• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

آموزش CSS (فصل اول-جلسه 2) : اصول اولیه CSS

31493 ۳ آبان ۹۱

روش های استفاده از CSS در اسناد HTML

برای وارد کردن کدهای CSS در یک صفحه HTML  چهار روش وجود دارد :

1.   قرار دادن دستورات CSS در داخل فایل HTML (استایل داخلی)

در این روش باید کد فوق را در بالای سند HTML  و در داخل تگ head قرار بگیرد و بجای نقطه چین ها نیز دستورات Css قرار می گیرند.

2.  قرار دادن دستورات css در یک فایل جداگانه با پسوند css. و استفاده از تگ </ link> برای ارتباط دادن این فایل به فایل HTML ( استایل خارجی)

در کد بالا یک فایل css خارجی با نام Style.css به صفحه لینک شده است. کد فوق باید در بالای سند Html و در داخل تگ head قرار بگیرد. دقت کنید که مقدار صفت href باید آدرس فایل باشد.

3.  دستورات css می توانند به طور مستقیم در داخل عناصر HTML و با استفاده از صفت عمومی style در تگ های HTML استفاده شوند.

4.  با استفاده از دستور import@ می توان دستورات  css را به هر دو صورت استایل داخلی و استایل خارجی در یک فایل وارد کرد :

اضافه کردن توضیح (کامنت) در CSS

نحوه نوشتن comment در CSS شبیه به زبان ++C بوده و به این صورت است که با علامت (*/) شروع و با علامت (/*) به پاپان می رسد :

اضافه کردن کامنت ها در css به طراح وب کمک می کند که سریعتر کدهای  هر بخش را پیدا کند.

قسمت های یک دستور CSS

در زبان CSS برای نسبت دادن استایل خاصی به یک قسمت از اجزای صفحه وب، اول باید آن را انتخاب کرد و سپس به تعریف استایل نمود. به طور مثال :

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

  1. گزینشگر (یا همان selectors) : که در اصل همان تگ های html هستند و یا کلاس ها (class) و یا شناسه ها (id)یی هستند که شما برای یک تگ در صفحه html تعریف کرده اید. در مثال فوق h2 گزینشگر بوده و مشخص می کند که این استایل موردنظر باید به تمامی تگ های <h2> اعمال شود.
  2. خصوصیات (یا همان prorerties ) : که مشخص می کنند که چه سبکی باید به برچسبهای انتخاب شده اعمال شود.یا به عبارتی دیگر کدام خصوصیت آن تگ، مورد تغییر قرار گیرد. در مثال فوق خصوصیت font-size اندازه فونت تگ h2 را تغییر می دهد.
  3. مقادیر ( یا همان value ) : سومین قسمت از هر دستور مقدار است. که مشخص می کند مقدار خصوصیت انتخاب شده چه باشد. اگر به مثال بالا دقت کنید می بینید که 24px مقدار خصوصیت انتخاب شده می باشد، که تعیین می کند اندازه فونت همه ی تگ های <h2> بیست و چهار پیکسل باشد.

دستور css قسمت چهارمی نیز دارد آن هم علامت ;  (سمیکولن) است که در انتهای هر دستور می آید.

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

درضمن به یاد داشته باشیدکه خصوصیت ها حتما باید ما بین علامت {} قرار بگیرند.

برای درک بهتر مطلب به تصویر زیر دقت کنید :

بسیار خب تا اینجا با اصول اولیه زبان CSS، طریقه افزودن کدها، و اجزای یک دستور CSS آشنا شدید. در جلسه بعدی شما را با انواع گزینشگرها آشنا خواهیم کرد.

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 10 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏

    خیلی خوب بود سجاد جان 😳

  • ‏‏

    مغسی

  • ‏‏

    سلام ممنون از آموزش خوبتون
    اگر امکان داره آموزش ها رو هم به صورت pdf تهیه کنید و برای دانلود بزارید
    بسیار ممنون

    • ‏‏
      سجاد دریس(۸ آبان ۱۳۹۱)

      سلام.
      چشم، بعد از به پایان رسوندن آموزش ها، سعی میشه کل سری به صورت pdf در اختیارتون قرار بگیره.

      • ‏‏
        لقمان آوند(۸ آبان ۱۳۹۱)

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

    • ‏‏
      لقمان آوند(۸ آبان ۱۳۹۱)

      به روی چشم . انجام شد . شما از الان می تونید همه ی مطالب سایت رو به صورت PDF دانلود کنید .
      موفق باشید .

  • ‏‏
    عادله(۱۹ آذر ۱۳۹۱)

    خیلی عالی و کامل وقابل فهم 😳

  • ‏‏

    مرسی خیلی خوب بود

  • ‏‏

    سلام خسته نباشید. عذرمیخام من سایت بسیار خوب شمارواز YOUTUBEپیداکردم .فقط یه سؤال تمام ویدیوهلی JAVASCRIPTدر youtube کلأ 5 تاست؟؟؟

    • ‏‏
      سجاد دریس(۲۷ خرداد ۱۳۹۲)

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

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram