دوست عزیز، به سایت علمی نخبگان جوان خوش آمدید

مشاهده این پیام به این معنی است که شما در سایت عضو نیستید، لطفا در صورت تمایل جهت عضویت در سایت علمی نخبگان جوان اینجا کلیک کنید.

توجه داشته باشید، در صورتی که عضو سایت نباشید نمی توانید از تمامی امکانات و خدمات سایت استفاده کنید.
نمایش نتایج: از شماره 1 تا 5 , از مجموع 5

موضوع: آموزش جامع و کامل زبان css

  1. #1
    یار همراه
    رشته تحصیلی
    مهندسی کامپیوتر - نرم افزار
    نوشته ها
    2,968
    ارسال تشکر
    5,023
    دریافت تشکر: 4,729
    قدرت امتیاز دهی
    3408
    Array
    Bad Sector's: جدید102

    Ok آموزش جامع و کامل زبان css

    سلام به دوستان گلم

    من قصد دارم زبان css رو اینجا بصورت جامع و کامل و از ابتدا به صورت گام به گام بذارم تا دوستانی که تمایل به یادگرفتن این زبان دارند استفاده کنند.

    با توکل به خدا این دوره آموزش رو با هم شروع می کنیم .

    فقط من سعی می کنم هر روز یه قسمت از آموزش رو قرار میدم تا همه با هم پیش بریم.

    ویرایش توسط Bad Sector : 26th December 2013 در ساعت 09:59 PM
    برای داشتن چیزی که تا به حال نداشته اید
    باید کسی باشید که تا به حال نبوده اید

  2. 2 کاربر از پست مفید Bad Sector سپاس کرده اند .


  3. #2
    یار همراه
    رشته تحصیلی
    مهندسی کامپیوتر - نرم افزار
    نوشته ها
    2,968
    ارسال تشکر
    5,023
    دریافت تشکر: 4,729
    قدرت امتیاز دهی
    3408
    Array
    Bad Sector's: جدید102

    پیش فرض پاسخ : آموزش جامع و کامل زبان css


    پیش نیاز:
    خوب دوستان عزیز در ابتدای یادگیری این زبان باید بگم که این زبان هم مثل بقیه زبان ها نیاز به پیش نیاز دارد که پیش نیاز این زبان یاد داشتن html می باشد. پس اگر هنوز این زبان را یاد نگرفته اید پیشنهاد می کنم که اول آنرا فرا گرفته و بعد با ما همراه شوید.

    css چیست ؟
    در واقع باید بگم که زبان css زبانی هست که شما با اون می تونین تمام شکل و ظاهر و خصوصیات وب سایت خودتون رو درست کنین و هر طوری که دوست دارین اونو پیاده سازی کنین.

    حالا چرا باید css رو یاد بگیریم؟
    ما با یاد گرفتن این زبان می تونیم در وقتمون صرفه جویی کنیم و از حجم کد های سایتمون کم کنیم تا سایتی سبک و زیبا و از همه مهمتر اینکه سرعت لود صفحه تون رو زیاد کنین و فقط و فقط با یادگیری این زبان بسیار ساده و در عین حال کارآمد.
    ویرایش توسط Bad Sector : 28th December 2013 در ساعت 04:11 PM
    برای داشتن چیزی که تا به حال نداشته اید
    باید کسی باشید که تا به حال نبوده اید

  4. 3 کاربر از پست مفید Bad Sector سپاس کرده اند .


  5. #3
    یار همراه
    رشته تحصیلی
    مهندسی کامپیوتر - نرم افزار
    نوشته ها
    2,968
    ارسال تشکر
    5,023
    دریافت تشکر: 4,729
    قدرت امتیاز دهی
    3408
    Array
    Bad Sector's: جدید102

    پیش فرض پاسخ : آموزش جامع و کامل زبان css




    تو قسمت اول می خوام در مورد اینکه چطور یک فایل CSS رو به یک فایل HTML متصل کنیم توضیح بدم.
    خوب برای این کار ما اگر یک فایل داشته باشیم که تمامی کد های CSS ما در آن قرار گرفته باشد .
    به عنوان مثال :

    Style.css فایل ما می باشد که ما کد های خود را در آن قرار داده ایم و می خواهیم یک ارتباط با فایل اصلی که نام آن index.html هست ایجاد کنیم .
    برای این کار با این کد:

    < "link rel="stylesheet" type="text/css" href="stayle.css >

    ما این کد را در فایل html خودمون قرار می دهیم . این کد همان گونه که می بینید از چندین قسمت تشکیل شده است که تک تک آنها را با هم بررسی می کنیم.
    در قسمت href همان گونه که می بینید نام فایل css ما قرار دارد و این نشان دهنده این است که فایل css در چه مسیری قرار دارد. در واقع ما مشخص می کنیم که فایل css ما در کجا قرار دارد .
    در صورتی که فایل css در کنار فایل html قرار داشته باشد طبق مثال فقط اسم و پسوند آن را می نویسیم ولی اگر در مسیر دیگری قرار داشت آدرس آنجا را قرار می دهیم.
    مثال:
    "href="c:\newfolder\stayle.css

    در قسمت type نوع فایل رو مشخص می کنه که در اینجا فایل ما یک فایل css متنی هست.


    "type="text/css


    و در قمست پایانی rel می باشد که مشخص کننده این است که فایل شما یک فایل css می باشد.




    "rel="stylesheet

    و این بود روشی که با اون شما می نونین یک ارتباط بین این دو فایل برقرار کنین.
    روش دیگری هم وجود دارد که شما بصورت مستقیم در درون تگ style که در درون خود فایل html تعریف می کنین قرار می گیرد ولی بخاطر بالا بردن حجم کد نویسی فایل html من این روش رو توضیح نمی دم و توصیه نمی کنم.



    دانلود فایل آموزشی در قالب pdf
    ویرایش توسط Bad Sector : 9th January 2014 در ساعت 09:43 PM
    برای داشتن چیزی که تا به حال نداشته اید
    باید کسی باشید که تا به حال نبوده اید

  6. 5 کاربر از پست مفید Bad Sector سپاس کرده اند .


  7. #4
    یار همراه
    رشته تحصیلی
    مهندسی کامپیوتر - نرم افزار
    نوشته ها
    2,968
    ارسال تشکر
    5,023
    دریافت تشکر: 4,729
    قدرت امتیاز دهی
    3408
    Array
    Bad Sector's: جدید102

    پیش فرض پاسخ : آموزش جامع و کامل زبان css



    سلام به دوستان عزیزم

    در این قسمت می خوام در مورد اصول کلی زبان css حرف بزنم.

    بطور کلی هر سبک css دو بخش کلی داره که شامل :

    1- Selector (سلکتورها)

    2- Property (خصوصیات)

    تشکیل شده که هر کدوم خودشون به قسمت های مختلفی تقسیم میشن.

    سلکتورها به پنج قسمت :

    1- سلکتورهای برچسب

    2- سلکتورهای کلاس کاذب

    3- سلکتورهای کلاس

    4- سلکتورهای مفهومی

    5- سلکتورهای خصوصی


    و در این قسمت من می خوام در مورد سلکتورهای برچسب براتون بگم و در کل ساده ترین نوع سلکتورها همین نوع هست .

    تو این روش یک تگ یا برچسب از زبان html انتخاب می کنیم و با استفاده از این روش خصوصیات خاصی رو به اون تگ یا برچسب میدیم.

    پس با هم میریم تا ببینیم که این قسمت شامل چه دستوراتی هست.

    برای مثال این صفحه html ما اگر باشد:

    کد PHP:

    <html>

    <
    head>
    <
    title>Njavan</title>
    <
    link rel="stylesheet" type="text/css" href="stayle.css">

    </
    head>

    <
    body>
    <
    h1عنوان صفحه </h1>
    <
    p>به سایت نسل جوان خوش آمدید</p>
    <
    div/>این قسمت مربوط به کلاس می باشد<"div class="header>
    </
    body>
    </
    html

    و حالا ما در اینجا قصد داریم که از تگهای موجود در صفحه تگ body را انتخاب کنیم و یکسری خصوصیات رو با استفاده از این روش برای اون اعمال کنیم.

    خوب برای ادامه ما در صفحه CSS خودمون که داریم و اگر ندارید همان طور که گفتم می تونید خودتون تولید کنید. برای این کار هم کافیه در صفحه Notpad آنرا با نام

    دلخواه مثلا : style.css ذخیره کنید و در کنار فایل html خود قرار بدین و یا هر مسیر که دوست دارید ولی در جلسه قبل گفتیم که می تونین مسیر اونو هم تغییر بدین.

    خوب حالا که تگ body رو انتخاب کردیم و می خواهیم به اون خصوصیاتی رو نصبت بدیم.

    صفحه css خودتون رو باز کنین و اینگونه بنویسین:

    کد PHP:

    body 

    ;background-color#000000
    ;font-familytahoma
    ;font-size14pt
    ;color#ffffff



    خوب دوستان تا اینجا با هم دیدیم که خیلی راحت می تونیم با استفاده از سلکتورها خصوصیاتی رو به تگهامون بدیم و حتی در این روش ما می تونیم در داخل تگ

    بودی که من یک کلاس دیگه براتون تعریف کردم که نشون بدم که می تونیم حتی در داخل تگ body باز هم با سکلتور تغییراتی دوباره بدیم . یعنی ما می تونیم به

    کلاس header که اضافه کردیم هم تغییراتی رو اضافه کنیم . پس هیچ محدودیتی ما نداریم و می تونیم هر تگی رو در هر موقعیتی یکسری خصوصیات روش اعمال کنیم.

    که تگ header رو که مربوط به جلسات بعدی میشه رو براتون در آینده خواهم گفت .
    ویرایش توسط Bad Sector : 2nd January 2014 در ساعت 05:24 PM
    برای داشتن چیزی که تا به حال نداشته اید
    باید کسی باشید که تا به حال نبوده اید

  8. 3 کاربر از پست مفید Bad Sector سپاس کرده اند .


  9. #5
    یار همراه
    رشته تحصیلی
    مهندسی کامپیوتر - نرم افزار
    نوشته ها
    2,968
    ارسال تشکر
    5,023
    دریافت تشکر: 4,729
    قدرت امتیاز دهی
    3408
    Array
    Bad Sector's: جدید102

    پیش فرض پاسخ : آموزش جامع و کامل زبان css



    خوب دوستان عزیز در این قسمت در مورد سلکتورهای کلاس می خواهیم صحبت کنیم و ببینیم که عملکردهای این دستور به چه صورت هست.

    خوب شما با استفاده از این دستور می تونین قسمت های کوچکتری از سایتتون رو برای اعمال تغییرات انتخاب کنین.

    حالا میریم برای ادامه اموزشمون.

    با توجه به مثال جلسه قبلمون :


    کد PHP:

    <html>

    <
    head>
    <
    title>Njavan</title>
    <
    link rel="stylesheet" type="text/css" href="stayle.css">

    </
    head>

    <
    body>
    <
    h1عنوان صفحه </h1>
    <
    p>به سایت نسل جوان خوش آمدید</p>
    <
    div/>این یک متن آزمایشی هست<"div class="header></body>

    </
    html
    در اینجا ما یک کلاس برای هدر سایتمون تعریف کردیم و می خواهیم که روی اون تعغییراتی رو اعمال کنیم.

    خوب ما بازم وارد صفحه CSS خودمون میشیم و مثل قبل میریم که این کلاس رو تعریف کنیم تا تغییرات روی اون اعمال بشه.

    نکته :
    در تعریف کلاس ها باید به این نکته توجه کنیم که همیشه برای تعریف این کلاس ما به اول این دستور یک نقطه اضافه می کنیم و بعد کلاسمون رو می نویسیم . به عنوان مثال :


    کد PHP:
    .header {

    دستورات و خصوصیات



    در واقع اینو هم بگم که ما در خصوصیاتی که به body داده بودیم باعث شده بود که تمام خصوصیات صفحه ما تغییر کنه ولی با کلاس ها شما این

    کارو می تونین به قسمت خاصی از صفحه خودتون تغییرات بدین.

    حالا ما برای کلاسی که تعریف کردیم یکسری خصوصیات می دیم تا ببینیم که صفحه سایت ما چطوری میشه.


    کد PHP:

    .header {

    background-color#000000;
    width600 px;
    height100px;
    color#ff0000;
    directionrtl



    خوب ما در اینجا مشخص کردیم که کلاس هدر ما این خصوصیات رو داشته باشه. یعنی رنگ بگراندمون رو سفید و طول رو 600 پیکسل و عرض 100 پیکسل و رنگ متنمون رو قرمز و نوع راست چین چپ چین رو هم روی rtl

    که مشخص کننده راست به چپ هست قرار دادیم.

    اینم دستورات کلاس که به همین آسونی بود .


    دوستان اگه تو ترتیب کدها مشکلی بود دیگه ببخشید . هر کاری می کنم خوب نمی شن . شاید مجبور بشم از این به بعد با عکس کدها رو بذارم.

    موفق باشین
    ویرایش توسط Bad Sector : 2nd January 2014 در ساعت 05:27 PM دلیل: مشکل صفحه بندی داشت
    برای داشتن چیزی که تا به حال نداشته اید
    باید کسی باشید که تا به حال نبوده اید

  10. 3 کاربر از پست مفید Bad Sector سپاس کرده اند .


اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

موضوعات مشابه

  1. آموزش توتال استیشن های South و آموزش مقدماتی Land
    توسط m@some در انجمن نقشه برداری
    پاسخ ها: 0
    آخرين نوشته: 7th September 2013, 11:14 AM
  2. پاسخ ها: 0
    آخرين نوشته: 14th June 2013, 04:45 PM
  3. پاسخ ها: 0
    آخرين نوشته: 30th November 2011, 09:42 AM
  4. پاسخ ها: 0
    آخرين نوشته: 17th December 2009, 01:14 PM
  5. پاسخ ها: 0
    آخرين نوشته: 24th October 2009, 12:56 PM

کلمات کلیدی این موضوع

مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •