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

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


 سه روش برای افزودن کد های 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> استایل زیر تعریف شده است :

h1 {
    color: navy;
}

و استایل تعریف شده در روش Internal هم ، برای عنصر <h1> به صورت زیر است :

h1 {
    color: orange;    
}

اگر استایل تعریف شده در روش 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 پایین ترین اولویت هستند :

  1.  استایل در روش Inline (داخل یک عنصر HTML)
  2. استایل در روش External و Internal (در قسمت head)
  3. پیشفرض های مرورگر نصب شده بر روی سیستم.

بنابراین یک استایل در روش Inline (داخل یک عنصر خاص در HTML) دارای بیشترین اولویت است. این به این معناست که استایل تعریف شده در تگ head ، استایل تعریف شده در روش External و پیشفرض های مرورگر توسط روش Inline قابل چشم پوشی است. 

خودتان امتحان کنید

منتشر شده در ۹ تیر ۱۳۹۶ حمید رضا ملکی ۱۴۴۴ بازدید
دیدگاه ها

هنوز دیدگاهی ثبت نشده

برای ارسال دیدگاه لازم است ابتدا وارد سایت شوید