حالا که با HTML آشنا شدیم و یاد گرفتیم چطور ساختار یک صفحه وب را تعریف کنیم، نوبت به طراحی ظاهری و زیبایی آن میرسد. CSS یا Cascading Style Sheets، زبانی است که به ما کمک میکند تا ظاهر عناصر HTML را کنترل و سفارشیسازی کنیم. با استفاده از CSS، میتوانیم رنگها، فونتها، اندازهها، چیدمان و بسیاری از ویژگیهای ظاهری دیگر را به عناصر HTML اضافه کنیم.
CSS چیست و چرا باید آن را یاد بگیریم؟
CSS یک زبان سبکبندی است که به شما اجازه میدهد تا ظاهر صفحات وب را کنترل کنید. با CSS، شما میتوانید:
- طراحی صفحات وب جذاب: با استفاده از CSS میتوانید طرحهای خلاقانه و زیبایی برای صفحات وب خود ایجاد کنید.
- سازگاری با دستگاههای مختلف: CSS به شما کمک میکند تا وبسایت شما در دستگاههای مختلف مانند دسکتاپ، موبایل و تبلت به خوبی نمایش داده شود.
- بهبود سرعت بارگذاری: با استفاده صحیح از CSS، میتوانید سرعت بارگذاری صفحات وب خود را بهبود بخشید.
- کاهش حجم کد: CSS به شما اجازه میدهد تا سبکهای مشترک را در یک مکان تعریف کنید و از تکرار کد جلوگیری کنید.
چگونه CSS را به HTML اضافه کنیم؟
سه روش اصلی برای اضافه کردن CSS به یک صفحه HTML وجود دارد:
- Inline CSS: در داخل تگهای HTML
- Internal CSS: در بخش
<head>
صفحه HTML - External CSS: در یک فایل جداگانه با پسوند .css
ساختار یک قانون CSS
یک قانون CSS از سه بخش تشکیل شده است:
- Selector: عنصری که میخواهیم سبکبندی کنیم (مثلاً
h1
,p
,div
). - Property: ویژگیای که میخواهیم تغییر دهیم (مثلاً
color
,font-size
,background-color
). - Value: مقداری که به ویژگی اختصاص میدهیم (مثلاً
red
,16px
,#f0f0f0
).
مثال:
CSS
h1 {
color: blue;
text-align: center;
}
در این مثال، همه عناوین سطح یک (h1) به رنگ آبی و در وسط صفحه نمایش داده میشوند.
مفاهیم مهم در CSS
- Selectorها: برای انتخاب عناصر HTML
- Properties: برای تغییر ظاهر عناصر
- Values: برای تعیین مقدار ویژگیها
- Comments: برای توضیح کد
- Box Model: برای درک نحوه چیدمان عناصر در صفحه
طراحی یک بخش هدر ساده با CSS
/* تنظیمات کلی */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
/* سبکبندی هدر */
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
/* سبکبندی لوگو */
.logo {
font-size: 24px;
font-weight: bold;
text-decoration: none;
color: #fff;
}
/* سبکبندی منو */
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin-right: 10px;
}
nav a {
text-decoration: none;
color: #fff;
}
/* سبکبندی بخش اصلی محتوا */
main {
padding: 20px;
}
توضیح کد CSS:
- تنظیمات کلی: سبک پیشفرض برای تمام صفحه را تعریف میکند.
- هدر: پسزمینه، رنگ متن، فاصله داخلی و ترازبندی متن را برای بخش هدر تنظیم میکند.
- لوگو: اندازه فونت، وزن فونت، حذف خط زیرین و رنگ متن را برای لوگو تنظیم میکند.
- منو: یک منو ناوبری ساده ایجاد میکند.
- بخش اصلی محتوا: فاصله داخلی را برای بخش اصلی محتوا تنظیم میکند.
جمعبندی
CSS یک ابزار قدرتمند برای طراحی صفحات وب است. با یادگیری CSS، میتوانید صفحات وب زیبا و تعاملی ایجاد کنید. برای یادگیری بیشتر، میتوانید به منابع آموزشی آنلاین مانند W3Schools، MDN Web Docs و freeCodeCamp مراجعه کنید.