سه روش برای افزودن کد های CSS به صفحات وب
کد های CSS را میتوان به چند روش به صفحه ی وب اضافه کرد :
- روش External
- روش Internal
- روش Inline
اضافه کردن کد های CSS در روش External
یکی از رایج ترین روش ها در پروژه های واقعی استفاده از روش External برای افزودن کد های CSS به صفحه است. در این روش شما میتوانید ظاهر تمام صفحات وب سایت را با ویرایش در یک فایل، تغییر دهید. در روش External کد ها مستقیما داخل صفحات وبسایت قرار نمیگیرد در عوض ارجاعی از یک فایل خارجی که کد های CSS در آن نوشته شده است در صفحه قرار میگیرد.
ارجاعات در یک صفحه توسط عنصر <link> که در قسمت <head> قرار دارد، در صفحه قرار میگیرند :
<head >
<" link rel = "stylesheet " type = "text/css " href = "mystyle2.css >
<head/ >
فایل خارجی (External) که کد های CSS در آن قرار میگیرد میتواند توسط هر ویرایشگر متنی نوشته شود.
این فایل نباید حاوی هیچ تگی از زبان HTML باشد و باید با پسوند css. ذخیره شود.
در نمونه مثال زیر محتوای فایلی به نام "mystyle.css" نشان داده شده است :
} body
;background-color : lightblue
{
} h1
;color : navy
;margin-left : 20px
{
نکته : دقت داشته باشید که فاصله ای بین مقدار خاصیت (property) و واحد آن قرار ندهید (برای مثال ;margin-left: 20 px). روش صحیح به این شکل است :
;margin-left: 20px
اضافه کردن کد های CSS در روش Internal
روش Internal ممکن است موقعی استفاده شود که یک صفحه ی خاص نیاز به استایل منحصر به فردی داشته باشد.
در این روش کد های CSS داخل عنصر <style> و داخل قسمت <head> از یک صفحه HTML قرار می گیرند.
در نمونه مثال زیر نحوه ی استفاده از این روش نشان داده شده است :
<head >
<style >
} body
;background-color : linen
{
} h1
;color : maroon
;margin-left : 40px
{
<style/ >
<head/ >
اضافه کردن کد های CSS در روش Inline
روش Inline ممکن است موقعی استفاده شود که یک عنصر نیاز داشته باشد استایل منحصر به فردی داشته باشد.
در این روش صفت style به عنصر مربوطه اضافه میشود. صفت style اضافه شده میتواند شامل هر صفتی از زبان CSS باشد.
نمونه مثال زیر نشان میدهد که در روش Inline چطور میتوان رنگ و صفت margin-left عنصر <h1> را تغییر داد :
<" ; h1 style =" color :blue ; margin-left :30px >
This is a heading
<h1/ >
نکته : در روش Inline به این دلیل که محتوا و نحوه ی نمایش عناصر با هم ترکیب میشوند، مزایای استفاده از زبان CSS را که یکی از آنها جداسازی محتوا از نحوه ی نمایش است به چالش میکشد. از این روش در موارد ضروری استفاده کنید.
چندین استایل برای یک عنصر
اگر چندین صفت از زبان CSS برای یک عنصر در روش های مختلف (External ، Internal ، Inline) تعریف شده باشد، آخرین مقداری که خوانده میشود روی عنصر مربوطه اعمال میشود.
فرض کنید که در روش External ، برای عنصر <h1> استایل زیر تعریف شده است :
و استایل تعریف شده در روش Internal هم ، برای عنصر <h1> به صورت زیر است :
اگر استایل تعریف شده در روش Internal بعد از ارجاعی باشد که استایل در روش External را مشخص میکند ، عنصر <h1> به رنگ orange خواهد بود :
<head >
< " link rel = "stylesheet " type = "text/css " href = "mystyle.css >
<style >
} h1
;color : orange
{
<style/ >
<head/ >
با این حال ، اگر استایل تعریف شده به روش Internal قبل از ارجاع روش External باشد، عنصر <h1> به رنگ orange خواهد بود :
<head >
<style >
} h1
;color : orange
{
<style/ >
< " link rel = "stylesheet " type = "text/css " href = "mystyle.css >
<head/ >
ترتیب اولویت ها در اعمال استایل
کدام استایل زمانی که بیش از از یک استایل برای یک عنصر HTML مشخص شده باشد، استفاده خواهد شد ؟
در نهایت یک از استایل ها خواهد توانست بر روی عنصر HTML اعمال شود.
در زیر اولویت های نحوه ی اعمال استایل بر روی یک عنصر مشخص شده است. شماره یک دارای بالاترین اولویت و شماره 3 پایین ترین اولویت هستند :
- استایل در روش Inline (داخل یک عنصر HTML)
- استایل در روش External و Internal (در قسمت head)
- پیشفرض های مرورگر نصب شده بر روی سیستم.
بنابراین یک استایل در روش Inline (داخل یک عنصر خاص در HTML) دارای بیشترین اولویت است. این به این معناست که استایل تعریف شده در تگ head ، استایل تعریف شده در روش External و پیشفرض های مرورگر توسط روش Inline قابل چشم پوشی است.
منبع:learnsource