CSS چگونه کار می کند؟

وقتی یک مرورگر صفحه وب را لود می کند ، عناصر موجود در صفحه وب را بر اساس فایل CSS یا همان (style sheet) و کد های موجود در آن قالب بندی و مرتب کرده و نمایش می دهد.

3راه برای دادن استایل (CSS) به عناصر موجود در صفحه وب وجود دارد :

استفاده از فایل CSS خارجی (External style sheet)
استفاده از فایل CSS داخلی (Internal style sheet)
استفاده از استایل inline

توجه داشته باشید که فایل CSS حتما باید با پسوند .CSS ذخیره شود و در داخل آن نباید از کدهای HTML استفاده شود.

فایل CSS خارجی:

استفاده از فایل CSS خارجی زمانی مطلوب است که بخواهیم استایل را به تمام یا بیشتر صفحات وب اعمال کنیم . این عمل باعث جلوگیری از تکرار شده و همچنین اگر زمانی بخواهیم تغییری در استایل ها ایجاد نماییم فقط کافیست در یک فایل تغییر دهیم ، پس این روش از نظر زمان ، فضا (حجم کد نوشته شده) و هزینه کاملا بهینه است.

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

توجه داشته باشید که شما باید در قسمت href آدرس محل قرار گیری فایل CSS خود را وارد نمایید . در اینجا فایل CSS ما در پوشه اصلی (root) و با نام mystyle می باشد شما میتوانید آن را در هر مسیر دلخواهی از پوشه مورد نظر و با هر نام دلخواهی ذخیره نمایید.

مثلا شما می توانید یک پوشه به نام mycss در داخل پوشه اصلی ایجاد کنید و در داخل آن فایل CSS خود را با نام styles.css ذخیره نمایید . در این صورت آدرس دهی در فایل HTML به صورت زیر خواهد بود:

این بدان معنیست که داخل پوشه mycss فایل style.css وجود دارد که توسط دستور بالا به پروژه لینک می شود.

CSSداخلی:

از CSS داخلی زمانی استفاده می شود که بخواهید به یک صفحه استایل بدهید. برای تعریف آن بایستی در داخل سند مورد نظر استایل ها را داخل تگ <style> </style> قرار دهید.

مثال:

<head>

<style>

h2 {

color: yellow;

}

h1 {

color: maroon;

margin-left: 40px;

}

</style>

</head>

استایل inline :

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

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

مثال :

نمایش عنوان

</h1>

گاهی اوقات برای یک عنصر مثلا تگ h1 داخل یک فایل css خارجی که به سند خود لینک کرده اید، مقادیری را تنظیم کرده اید به طور مثال width: 100px; color: blue; و در عین حال در css داخلی نیز به همان عنصر مقادیر دیگری را نسبت داده اید ، مثلا color: red; در این شرایط در مورد استایل های مشترک css داخلی نسبت به css خارجی اولویت بالاتری دارد (و همانطور که قبلا گفتیم استایل inline نسبت به هردویعنی css داخلی و css خارجی اولویت بالاتری دارد.)

در این شرایط عنصر h1 در داخل سند مقدار color را از فایل استایل داخلی میگیرد یعنی رنگ آن قرمز و مقدار width آن از css خارجی ارث بری خواهد نمود.

نکته کلی:

استایل ها به ترتیب اولویت :

استایل inline
استایل موجو در css داخلی
استایل موجو در css خارجی
استایل پیش فرض مرورگر (در صورتی که به یک عنصر هیچ استایلی داده نشود یا برخی از استایل ها داده نشوند از استایل های پیش فرض مرورگر برای آن عنصر استفاده خواهد شد.)