نحوه استفاده (How To)
می خواهیم «افزودن CSS به HTML» را یاد بگیریم. «CSS (استایل دهی)» یعنی قانون هایی که ظاهر صفحه را می سازند. سه راه داریم: خارجی، داخلی، و درون خطی. مثل لباس مدرسه: یکدست برای همه، مخصوص یک کلاس، یا فقط یک نفر.
سه روش افزودن CSS
مرورگر فایل استایل را می خواند و طبق آن صفحه را نمایش می دهد. سه روش اصلی داریم: External، Internal، و Inline.
CSS خارجی (External)
یک فایل .css می سازیم و در <head> با <link> وصل می کنیم. با عوض کردن همان یک فایل، ظاهر کل سایت تغییر می کند.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
نمونه فایل mystyle.css:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
نکته: بین عدد و واحد فاصله نگذار: margin-left: 20px; درست است.
CSS داخلی (Internal)
وقتی فقط یک صفحه استایل خاص دارد، از <style> در <head> استفاده کن.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS درون خطی (Inline)
برای استایلِ یک عنصر خاص، ویژگی style را روی همان تگ بنویس.
<!DOCTYPE html>
<html>
<body>
<h1 style="color: blue; text-align: center;">This is a heading</h1>
<p style="color: red;">This is a paragraph.</p>
</body>
</html>
هشدار: Inline مزیت های مدیریت پذیری را کم می کند. کم استفاده کن.
چند فایل استایل و ترتیب خواندن
اگر یک انتخاب گر در چند استایل برگ تعریف شود، آخرین فایلِ خوانده شده برنده است.
نمونه قانون در فایل خارجی:
h1 {
color: navy;
}
و قانون در استایل داخلی:
h1 {
color: orange;
}
اگر داخلی بعد از لینک خارجی بیاید، نتیجه نارنجی می شود:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
اما اگر داخلی قبل از لینک خارجی باشد، نتیجه سرمه ای می شود:
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
ترتیب آبشاری (Cascading Order)
اولویت از بیشتر به کمتر: 1) Inline، 2) Internal/External در <head>، 3) پیش فرض مرورگر. پس Inline معمولاً برنده است.
گام های عملی سریع
- یک فایل mystyle.css بساز و قوانین را بنویس.
- در <head> با <link> به آن وصل شو.
- برای تست سریع، از Internal یا Inline هم استفاده کن.
نکته: برای شناخت انتخاب گرها به بخش انتخاب گرها برو. برای قواعد نگارشی هم بخش نحو نگارش را ببین. این دو پایه «افزودن CSS به HTML» هستند.
جمع بندی سریع
- External برای پروژه های واقعی بهتر است.
- Internal برای یک صفحه خاص مناسب است.
- Inline فقط برای موردهای فوری استفاده کن.
- آخرین فایلِ خوانده شده، غالب می شود.
- فاصله بین عدد و واحد ممنوع است.