🎨 درس ششم: آشنایی با CSS و زیباتر کردن صفحات HTML

👋

سلام مهمان عزیز!

برای دسترسی به تمام محتوا و امکانات، وارد شوید.

🎯 هدف این درس: آشنایی با CSS، روش‌های اعمال استایل، انتخاب عناصر HTML و ساخت یک صفحه وب زیباتر و حرفه‌ای‌تر

مهمان عزیز! 👋
به درس ششم از دوره HTML سطح مقدماتی خوش آمدی.

تا اینجا یاد گرفتی چطور ساختار یک صفحه وب را با HTML ایجاد کنی، متن و عنوان قرار بدهی، لینک و تصویر بسازی، لیست و جدول ایجاد کنی و اطلاعات را از طریق فرم دریافت کنی.
اما یک صفحه HTML خام، معمولاً ظاهر ساده‌ای دارد.

اینجا جایی است که CSS وارد کار می‌شود.
اگر HTML را اسکلت یک ساختمان در نظر بگیریم، CSS همان چیزی است که ظاهر، رنگ، فاصله، اندازه و چیدمان آن ساختمان را مشخص می‌کند.

💡 یک نکته مهم مهمان:

HTML برای ساختار و معنی محتوا استفاده می‌شود، در حالی که CSS مسئول ظاهر و نحوه نمایش آن محتوا است.

🎨 بخش ۱: CSS چیست؟

CSS مخفف عبارت Cascading Style Sheets است که در فارسی می‌توان آن را «شیوه‌نامه‌های آبشاری» ترجمه کرد.

CSS به ما اجازه می‌دهد مشخص کنیم عناصر HTML چگونه نمایش داده شوند.
برای مثال می‌توانیم رنگ متن را تغییر دهیم، اندازه فونت را مشخص کنیم، پس‌زمینه قرار دهیم، فاصله بین عناصر را تنظیم کنیم و حتی چیدمان بخش‌های مختلف صفحه را کنترل کنیم.

🧩 HTML و CSS چه تفاوتی دارند؟

HTML: ساختار و محتوای صفحه را ایجاد می‌کند.
CSS: ظاهر و نحوه نمایش آن ساختار را مشخص می‌کند.
HTML + CSS: پایه اصلی بسیاری از صفحات وب هستند.

یک مثال ساده

در مثال زیر یک عنوان HTML داریم و سپس با CSS رنگ و اندازه آن را تغییر می‌دهیم:

🌐
اولین CSS

HTML + CSS
HTML5


<h1 style="color: blue; font-size: 32px;">سلام مهمان عزیز!</h1>

<p style="color: #555;">
این اولین تجربه من با CSS است.
</p>

⚠️ توجه:

استفاده از CSS داخل ویژگی style برای مثال‌های ساده مناسب است، اما در پروژه‌های واقعی بهتر است CSS را از HTML جدا کنیم.

🧱 بخش ۲: روش‌های قرار دادن CSS

در HTML معمولاً سه روش اصلی برای استفاده از CSS داریم:

Inline CSS: نوشتن CSS مستقیماً داخل ویژگی style
Internal CSS: قرار دادن CSS داخل تگ <style>
External CSS: قرار دادن CSS در یک فایل جداگانه

۱. Inline CSS

در این روش، استایل را مستقیماً روی عنصر HTML قرار می‌دهیم.

🌐
Inline CSS

HTML
HTML5


<p style="color: red; font-size: 20px;">
این یک متن با Inline CSS است.
</p>

۲. Internal CSS

در این روش، CSS را داخل تگ <style> قرار می‌دهیم.
این روش زمانی مناسب است که بخواهیم برای یک صفحه مشخص چندین عنصر را استایل‌دهی کنیم.

🎨
Internal CSS

HTML + CSS
HTML5


<style>
h1 {
    color: #2563EB;
    font-size: 32px;
}

p {
    color: #475569;
}
</style>

<h1>عنوان صفحه</h1>
<p>این یک پاراگراف است.</p>

۳. External CSS

در پروژه‌های واقعی، معمولاً CSS را در یک فایل جداگانه قرار می‌دهیم.
برای مثال فایل ما می‌تواند style.css نام داشته باشد.

🎨
style.css

CSS
CSS3


body {
    font-family: Arial, sans-serif;
    background-color: #F8FAFC;
}

h1 {
    color: #2563EB;
}

سپس فایل CSS را در صفحه HTML به این شکل متصل می‌کنیم:

🌐
اتصال CSS به HTML

HTML
HTML5


<head>

    <link
        rel="stylesheet"
        href="style.css"
    />

</head>

⭐ پیشنهاد حرفه‌ای:

برای پروژه‌های چندصفحه‌ای، استفاده از فایل CSS خارجی انتخاب بهتری است؛ چون می‌توانیم یک فایل CSS را به چند صفحه متصل کنیم و مدیریت ظاهر سایت بسیار ساده‌تر می‌شود.

🎯 بخش ۳: Selector یا انتخابگر CSS

یکی از مفاهیم مهم CSS، Selector یا انتخابگر است.
انتخابگر به مرورگر می‌گوید CSS باید روی کدام عنصر HTML اعمال شود.

چند انتخابگر بسیار مهم عبارت‌اند از:

انتخابگر عنصر: مانند p یا h1
انتخابگر کلاس: مانند .title
انتخابگر شناسه: مانند #header

انتخابگر عنصر

🎨
انتخابگر عنصر

CSS
CSS3


p {
    color: #334155;
    font-size: 18px;
}

انتخابگر کلاس

کلاس با علامت نقطه . در CSS مشخص می‌شود.
یک کلاس می‌تواند روی چند عنصر استفاده شود.

🎨
Class Selector

HTML + CSS
CSS3


.title {
    color: #2563EB;
    font-size: 28px;
}

<h1 class="title">عنوان اول</h1>
<h2 class="title">عنوان دوم</h2>

انتخابگر ID

شناسه با علامت # مشخص می‌شود و معمولاً برای یک عنصر مشخص در صفحه استفاده می‌شود.

🎨
ID Selector

HTML + CSS
CSS3


#main-title {
    color: #7C3AED;
    text-align: center;
}

<h1 id="main-title">
    عنوان اصلی سایت
</h1>

💡 نکته کلیدی مهمان:

اگر قرار است یک استایل را روی چند عنصر استفاده کنی، معمولاً کلاس انتخاب مناسبی است. شناسه یا id باید برای یک عنصر مشخص و منحصربه‌فرد در صفحه استفاده شود.

🖌️ بخش ۴: ویژگی‌های پرکاربرد CSS

حالا که با انتخابگرها آشنا شدیم، وقت آن است که چند ویژگی پرکاربرد CSS را بررسی کنیم.

📋 چند ویژگی مهم CSS

ویژگی	کاربرد	مثال
`color`	رنگ متن	`color: blue;`
`background-color`	رنگ پس‌زمینه	`background-color: #eee;`
`font-size`	اندازه متن	`font-size: 20px;`
`text-align`	تراز متن	`text-align: center;`
`margin`	فاصله بیرونی	`margin: 20px;`
`padding`	فاصله داخلی	`padding: 20px;`
`border`	حاشیه عنصر	`border: 1px solid #ddd;`

مثال ترکیبی

🎨
استایل‌دهی کارت

HTML + CSS
CSS3


.card {
    background-color: #FFFFFF;
    color: #1E293B;
    font-size: 18px;
    text-align: center;
    padding: 25px;
    margin: 20px;
    border: 1px solid #E2E8F0;
}

<div class="card">
    <h2>دوره HTML</h2>
    <p>
        یادگیری HTML را از پایه شروع کنید.
    </p>
</div>

📏 بخش ۵: Margin و Padding

دو ویژگی margin و padding از مهم‌ترین مفاهیم CSS هستند.
اگر تفاوت این دو را درست یاد بگیری، در طراحی صفحات وب بسیار راحت‌تر با فاصله‌ها کار خواهی کرد.

📦 تفاوت ساده

Margin: فاصله بیرون عنصر است.
Padding: فاصله داخل عنصر، بین محتوا و مرز عنصر است.

🎨
Margin و Padding

CSS
CSS3


.box {
    margin: 30px;
    padding: 20px;
    border: 1px solid #CBD5E1;
}

<div class="box">
    محتوای داخل جعبه
</div>

🧪 پروژه عملی: ساخت کارت معرفی

🚀 پروژه کوچک این درس

در این پروژه یک کارت معرفی ساده می‌سازیم و با CSS ظاهر آن را بهتر می‌کنیم.
هدف این است که HTML و CSS را کنار هم استفاده کنیم.

🌐
پروژه کارت معرفی

HTML + CSS
HTML5


<style>
body {
    font-family: Arial, sans-serif;
    background-color: #F1F5F9;
}

.profile-card {
    width: 320px;
    margin: 50px auto;
    padding: 25px;
    background-color: #FFFFFF;
    text-align: center;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
}

.profile-card h1 {
    color: #2563EB;
}

.profile-card p {
    color: #475569;
    line-height: 1.8;
}
</style>

<div class="profile-card">

    <h1>
        سلام مهمان!
    </h1>

    <p>
        من در حال یادگیری طراحی صفحات وب هستم.
    </p>

    <p>
        HTML و CSS پایه‌های طراحی وب هستند.
    </p>

</div>

🧠 نکات کلیدی درس

CSS برای کنترل ظاهر و نحوه نمایش عناصر HTML استفاده می‌شود.
سه روش اصلی استفاده از CSS شامل Inline، Internal و External است.
Selector مشخص می‌کند CSS روی کدام عنصر اعمال شود.
کلاس با . و شناسه با # مشخص می‌شود.
margin فاصله بیرونی عنصر و padding فاصله داخلی آن است.
در پروژه‌های واقعی، جدا کردن CSS از HTML معمولاً مدیریت و نگهداری کد را ساده‌تر می‌کند.

📝 تمرین‌های عملی

🎯 تمرین شماره ۱

یک عنوان و یک پاراگراف ایجاد کنید و رنگ، اندازه فونت و تراز متن آن‌ها را با CSS تغییر دهید.

🎯 تمرین شماره ۲

یک کلاس به نام box ایجاد کنید و برای آن پس‌زمینه، حاشیه، padding و margin تعیین کنید.

🎯 تمرین شماره ۳

پروژه کارت معرفی این درس را شخصی‌سازی کنید. نام، توضیحات، رنگ‌ها و اندازه‌ها را تغییر دهید و نتیجه را در مرورگر مشاهده کنید.

🧩 جمع‌بندی درس

مهمان عزیز، در این درس اولین قدم‌های جدی برای زیباتر کردن صفحات HTML را برداشتیم.
یاد گرفتی CSS چیست، چگونه به HTML متصل می‌شود و چطور با انتخابگرها و ویژگی‌های اصلی آن کار کنیم.

✅ مفهوم CSS و نقش آن در طراحی صفحات وب
✅ تفاوت Inline، Internal و External CSS
✅ مفهوم Selector
✅ انتخابگرهای عنصر، کلاس و ID
✅ ویژگی‌های مهم مانند color، background، font-size و border
✅ تفاوت margin و padding
✅ ساخت یک کارت معرفی با HTML و CSS

🚀 یک قدم تا پروژه نهایی!

در درس بعدی، همه چیزهایی که در این دوره یاد گرفته‌ای را کنار هم قرار می‌دهیم و یک صفحه وب شخصی می‌سازیم.

🔗 لینک‌های مرتبط

⬅️
درس قبل: فرم‌ها

🚀
درس بعدی: پروژه نهایی

🏠
صفحه دوره‌ها

👤

نویسنده یونس رجستری

📅

تاریخ انتشار 25 مرداد 1405

🔄

آخرین بروزرسانی 25 مرداد 1405

دنیای تکنولوژی
از یادگیری شروع می‌شود

آشنایی با CSS و زیباتر کردن صفحات HTML