سی اس اس (CSS) در HTML
سی اس اس (CSS یا Cascading Style Sheets) ابزاری برای کنترل ظاهر و چیدمان صفحات وب است. با CSS می توانید رنگ ها، فونت ها، اندازه متن، فاصله ها، موقعیت عناصر، پس زمینه ها و بسیاری ویژگی های دیگر را مدیریت کنید.
CSS چیست؟
CSS برای تعریف استایل صفحه استفاده می شود. به صورت آبشاری عمل می کند، یعنی استایل اعمال شده روی یک عنصر والد به عناصر فرزند نیز منتقل می شود مگر اینکه تغییر داده شود.
نکته: اگر رنگ متن body را آبی کنید، تمام متن ها (مانند p و h1) نیز آبی خواهند شد مگر اینکه رنگ دیگری مشخص کنید.
روش های استفاده از CSS
سه روش برای اضافه کردن CSS به HTML وجود دارد:
- درون خطی (Inline) با استفاده از ویژگی
style - داخلی (Internal) با استفاده از تگ
<style>در بخش<head> - خارجی (External) با لینک دادن به فایل CSS جداگانه
CSS درون خطی
<h1 style="color:blue;">عنوان آبی</h1>
<p style="color:red;">پاراگراف قرمز</p>CSS داخلی
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>CSS خارجی
<link rel="stylesheet" href="styles.css">body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}نکته: با یک فایل CSS خارجی می توانید ظاهر کل وب سایت را تنها با تغییر یک فایل تغییر دهید.
ویژگی های پرکاربرد CSS
color: رنگ متنfont-family: فونت متنfont-size: اندازه متنborder: ایجاد کادر دور عنصرpadding: فاصله داخلی بین متن و کادرmargin: فاصله خارجی عنصر با سایر عناصر
خلاصه فصل
- CSS می تواند به صورت درون خطی، داخلی یا خارجی اضافه شود.
- با CSS می توان رنگ ها، فونت ها، اندازه ها، فاصله ها و موقعیت عناصر را کنترل کرد.
- استفاده از فایل CSS خارجی بهترین روش برای مدیریت پروژه های بزرگ است.
برای ادامه مطالعه به بخش رنگ های HSL و HSLA و لینک ها در HTML مراجعه کنید.