آموزش css-جلسه چهارم-CSS چگونه کار می کند؟

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

سه روش برای درج css :

سه راه برای وارد کردن یک CSS وجود دارد

  • style sheet خارجی
  • style sheet داخلی
  • درون خطی

استایل خارجی:

با یک CSS خارجی، شما می توانید ظاهر کل یک وب سایت  رابا تغییر فقط یک فایل تغییر دهید!

با استفاده از تگ <link>  آدرس فایل css مربوط به صفحه را مشخص می نماییم .تگ <link> درون تگ <head> قرار میگیرد.

 اجرای مثال

 

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

ید با پسوند .css ذخیره شود.

استایل داخلی:

استایل های داخلی درون تگ <style> درج می شوند وتگ <style > درون تگ <head> صفحه قرار می گیرد.

 اجرای مثال

 

استایل درون خطی:

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

مثال زیر نشان می دهد که چگونه رنگ و حاشیه سمت چپ عنصر <h1>  را تغییر دهیم:

 اجرای مثال

اگر بعضی از ویژگی ها برای یک عنصر در چندین stylesheet تعریف شده باشد مقدار آخرین style sheet خوانده و اعمال می شود

فرض کنید که یک CSS خارجی دارای سبک زیر برای  تگ <h1> می باشد.

پس از آن، فرض کنیم که یک style sheet داخلی همچنین دارای الگوی زیر برای  تگ <h1> می باشد.

اگرstyle sheet داخلی پس از لینک به style sheet خارجی تعریف شده باشد style sheet داخلی اجرا خواهد شد و رنگ تگ <h1> به رنگ نارنجی می شود.

 اجرای مثال

با این حال، اگر استایل داخلی قبل از لینک به style sheet خارجی تعریف شده بود style sheet  خارجی اعمال می شد

 اجرای مثال

ترتیب آبشاری:

اگر بیش از یک استایل برای یک عنصر html  وجود داشته باشد کدام استایل اعمال می شود؟

الویت اعمال استایل ها به صورت زیر است:

۱-استایل درون خطی

۲-استایل شیت های داخلی و خارجی(تعریف شده در بخش head)

۳-استایل پیش فرض مرورگر




پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*

code