مقدمات CSS
آشنایی با مفاهیم اولیه CSS و نحوه اعمال استایل به صفحات وب
فهرست مطالب
CSS چیست؟
زبان استایل‌دهی برای زیبا کردن صفحات وب
CSS مخفف Cascading Style Sheets (برگه‌های سبک آبشاری) است. فکر کنید CSS مثل لباس و آرایش برای HTML است - بدون آن صفحه شما خیلی ساده و بی‌روح به نظر می‌رسد! 🎨
CSS به شما امکان تغییر رنگ‌ها، فونت‌ها، اندازه‌ها، فاصله‌ها و حتی انیمیشن‌های صفحه را می‌دهد. با CSS می‌توانید یک صفحه HTML ساده را به یک وب‌سایت فوق‌العاده زیبا تبدیل کنید!
نکته جالب:
CSS در سال ۱۹۹۶ معرفی شد و انقلابی در طراحی وب ایجاد کرد. قبل از آن، همه استایل‌ها باید داخل HTML نوشته می‌شد!
CSS چگونه کار می‌کند؟
CSS با انتخاب عناصر HTML و اعمال استایل به آن‌ها کار می‌کند. مثل این است که شما یک نقاش باشید و بخواهید هر قسمت از تابلوتان را با رنگ و شکل خاصی بکشید! 🎨
h1 {
color: blue;
font-size: 24px;
}
p {
color: green;
font-family: Arial;
}انتخابگر (Selector)
h1 - کدام عنصر را انتخاب کنیم
ویژگی (Property)
color - چه چیزی را تغییر دهیم
مقدار (Value)
blue - چگونه تغییر دهیم
ساختار پایه HTML
هر صفحه HTML مثل یک خانه است که بخش‌های مختلفی دارد. بیایید با ساختار اصلی آشنا شویم:
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<title>عنوان صفحه من</title>
</head>
<body>
<h1>سلام! این اولین صفحه من است</h1>
<p>خوش آمدید به دنیای HTML! 🎉</p>
</body>
</html>DOCTYPE
به مرورگر می‌گوید این فایل HTML5 است
html
ریشه اصلی صفحه - همه چیز داخل این تگ قرار می‌گیرد
head
اطلاعات پنهان صفحه (عنوان، توضیحات، استایل‌ها)
body
محتوای قابل مشاهده صفحه - آنچه کاربران می‌بینند
روش‌های اعمال CSS
سه روش مختلف برای اعمال CSS به صفحات HTML وجود دارد. هر کدام مزایا و کاربردهای خاص خودشان را دارند! 🎯
۱. CSS درون‌خطی (Inline CSS)
مستقیماً داخل تگ HTML با استفاده از ویژگی style نوشته می‌شود
<h1 style="color: red; font-size: 30px;">عنوان قرمز</h1>
<p style="background-color: yellow; padding: 10px;">پاراگراف با پس‌زمینه زرد</p>۲. CSS داخلی (Internal CSS)
داخل تگ <style> در بخش <head> صفحه HTML نوشته می‌شود
<head>
<style>
h1 {
color: blue;
text-align: center;
}
p {
font-size: 16px;
line-height: 1.5;
}
</style>
</head>۳. CSS خارجی (External CSS)
در فایل جداگانه با پسوند .css نوشته و به HTML لینک می‌شود
<!-- در فایل HTML -->
<head>
<link rel="stylesheet" href="styles.css">
</head>
<!-- در فایل styles.css -->
h1 {
color: purple;
font-family: Arial;
}
p {
margin: 20px;
padding: 15px;
}تمرین عملی
حالا وقت تمرین CSS است! بیایید استایل‌دهی را امتحان کنیم:
🎨 تمرین:
یک صفحه HTML بسازید و با سه روش مختلف CSS استایل اعمال کنید:
- • یک عنوان h1 با CSS درون‌خطی (رنگ قرمز، اندازه 32px)
- • یک پاراگراف با CSS داخلی (رنگ آبی، فونت Arial)
- • یک فایل CSS خارجی برای استایل کلی صفحه
- • تست کردن هر سه روش در یک صفحه
جواب تمرین
این یکی از راه‌های حل این تمرین است:
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<title>تمرین CSS</title>
<link rel="stylesheet" href="styles.css">
<style>
.internal-style {
color: blue;
font-family: Arial, sans-serif;
font-size: 18px;
}
</style>
</head>
<body>
<!-- Inline CSS -->
<h1 style="color: red; font-size: 32px;">عنوان با CSS درون‌خطی</h1>
<!-- Internal CSS -->
<p class="internal-style">این پاراگراف با CSS داخلی استایل شده است.</p>
<!-- External CSS -->
<div class="external-style">
<h2>این بخش با CSS خارجی استایل شده</h2>
<p>محتوای این بخش از فایل خارجی استایل می‌گیرد.</p>
</div>
</body>
</html>
/* فایل styles.css */
.external-style {
background-color: #f0f0f0;
padding: 20px;
border-radius: 10px;
margin: 20px 0;
}
.external-style h2 {
color: green;
font-family: 'Tahoma', sans-serif;
}
.external-style p {
color: #666;
line-height: 1.6;
}نکته:
فایل styles.css را جداگانه ایجاد کنید و در همان پوشه HTML قرار دهید. هر سه روش CSS را در یک صفحه تست کنید!