کجا کد بزنیم؟
برای نوشتن کد های CSS از سه روش زیر استفاده می کنیم:
- درون خطی (Inline CSS)
- داخلی (Internal CSS)
- خارجی (External CSS)
درون خطی - Inline CSS
برای استایل دادن به HTML، با روش درون خطی به شکل زیر عمل می کنیم:
1. ابتدا در سند HTML، المان مورد نظر را انتخاب کنید.
<h1>inline style</h1>2. ویژگی style را به المان اضافه کنید.(" "=style)
<h1 style="">inline style</h1>3. سپس ویژگی CSS یا CSS Property را به المان اضافه کنید.
<h1 style="color: red; font-size: 12px;">داخلی - Internal CSS
در روش Internal برای نوشتن کد های CSS، در تگ <head> از تگ <style> استفاده می کنیم.
1. ابتدا در داخل تگ <head>، تگ <style> را باز می کنیم.
<head>
<style>
</style>
</head>2. نام المانی که به آن می خواهیم استایل دهیم را در جایگاه انتخابگر می نویسیم. (در نمونه کد از p استفاده شده است) سپس از علامت {} (براکت مجعد - curly brace) استفاده می کنیم.
3. در انتها، کد های CSS خود را، داخل {} می نویسیم.
<style>
p {
color: red;
font-size: 12px;
}
</style>خارجی - External CSS
برای استایل دهی به صورت خارجی، کد های CSS را خارج از فایل HTML، در یک فایل با پسوند .css می نویسیم.
به عبارت دیگر:
1. ابتدا در کنار فایل HTML، یک فایل با پسوند css. می سازیم.
2. سپس ارتباط بین سند HTML و CSS را برقرار می کنیم. برای این کار در تگ <head> سند HTML، از تگ <link> (بدون تگ پایانی) استفاده می کنیم.
<head>
<link rel="stylesheet" href="style.css">
</head>و در ویژگی href، آدرس فایل CSS را قرار می دهیم. (در اینجا نام فایل ما style.css است.)
3. در انتها، دستورات css خود را در فایل style.css می نویسیم.
h1 {
color: blue;
}اولویت اجرای کد CSS
هنگامی که یک ویژگیِ (مانند color) یک المان را چند بار با شیوه های مختلف (درون خطی، داخلی، خارجی) مقدار دهی کنیم (به طور مثال اگر رنگ متن یک المان را یک بار قرمز و بار دیگر سبز کنیم)، اولویت اجرای استایل ها به چه صورت است؟
اولویت اجرا از کم به زیاد به صورت زیر است:
- ویژگی های پیشفرض المان (اولویت کمتر)
- خارجی یا external و داخلی یا internal (اولویت یکسان)
- درون خطی - inline (اولویت بیشتر)
نکته: مرورگرها کدها را از بالا به پایین اجرا می کنند. در نتیجه هر چه یک استایل به خط های آخر کد شما نزدیک تر باشند، اولویت اجرای بیشتری دارند. به عبارتی ویژگی هایی که در خط های پایین تر نوشته شده باشند روی خط های بالایی بازنویسی (overwrite) می شوند.
نکته: به این چیدمان آبشاری یا Casecading Order گفته می شود.
p {
color: green;
}
p {
color: red;
}!important در CSS
با استفاده از !important بدون توجه به اولویت اجرا، ویژگی دارای important! اجرا می شود.
p {
color: green !important;
}نکته: در صورت وجود چند !important، از چیدمان آبشاری استفاده می شود. و کدهایی که در خط های پایین تر نوشته شده باشند اولویت بیشتری دارند.
نکته: برای اطلاعات بیشتر به آموزش !important در CSS مراجعه کنید.
خلاصه درس
- در این درس با چگونگی استایل دهی به شیوه درون خطی، داخلی و خارجی در CSS آشنا شدیم.
احسان اسلامی
