درس هشتم: استایل‌دهی با CSS

اموزش رایگان HTML

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

توی درس هشتم، می‌خوایم به یک مبحث بسیار مهم و پایه‌ای بپردازیم: استایل‌دهی با CSS (Cascading Style Sheets). CSS زبان طراحی و استایل‌دهی به صفحات وب هست و به ما این امکان رو میده که ظاهری زیبا و جذاب برای وب‌سایت‌هامون بسازیم.

چرا CSS مهمه؟

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

چگونگی استفاده از CSS

CSS می‌تونه به سه روش به مستندات HTML اضافه بشه:

  1. استفاده از تگ <style> در بخش <head>:
    می‌تونید CSS رو مستقیماً داخل تگ <style> در قسمت <head> سند HTML قرار بدید. این روش برای استایل‌دهی سریع و کلی مناسب هست. <head> <style> body { background-color: lightblue; /* رنگ پس‌زمینه */ } h1 { color: navy; /* رنگ متن */ text-align: center; /* تراز متن */ } </style> </head>
  2. استفاده از تگ style در خود عناصر HTML:
    می‌تونید استایل‌ها رو مستقیماً به تگ‌های HTML اضافه کنید. این روش معمولاً برای تغییرات جزیی و موقتی استفاده میشه. <h1 style="color: red;">سلام! به وب‌سایت من خوش آمدید!</h1>
  3. استفاده از فایل‌های CSS خارجی:
    بهترین و پاک‌ترین روش برای استایل‌دهی به وب‌سایت‌ها اینه که از یک فایل CSS جداگانه استفاده کنید و با استفاده از تگ <link> در قسمت <head>، اون رو به HTML متصل کنید. <head> <link rel="stylesheet" href="styles.css"> <!-- متصل شدن به فایل CSS --> </head> محتویات فایل styles.css می‌تونید به شکل زیر باشه: body { background-color: lightgray; } h1 { color: green; text-align: center; }

انتخاب‌گرها (Selectors)

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

  1. انتخاب‌گر تگ (Type Selector): با استفاده از نام تگ HTML، می‌تونین همه عناصر از اون نوع رو انتخاب کنید. p { color: blue; /* همه پاراگراف‌ها رنگ آبی می‌گیرند */ }
  2. انتخاب‌گر کلاس (Class Selector): با استفاده از نقطه (.) قبل از نام کلاس، می‌تونید به عناصر با یک کلاس خاص استایل بدید. .highlight { background-color: yellow; /* عناصر با کلاس highlight پس‌زمینه زرد دارند */ } برای استفاده از کلاس، از class="highlight" در تگ مورد نظر استفاده کنید: <p class="highlight">این متن هایلایت شده است.</p>
  3. انتخاب‌گر شناسه (ID Selector): با استفاده از علامت # قبل از نام شناسه، می‌تونید تنها یک عنصر با یک ID خاص رو انتخاب کنید. #header { font-size: 24px; /* عنصر با ID header فونت بزرگ‌تری دارد */ } برای استفاده از ID، از id="header" در تگ مورد نظر استفاده کنید: <h1 id="header">عنوان اصلی وب‌سایت</h1>

خصوصیات CSS

CSS دارای هزاران خصوصیت مختلف هست که می‌تونید به عناصر HTML اعمال کنید. بیاید چند مورد رو با هم بررسی کنیم:

  1. رنگ: برای تعیین رنگ متن یا پس‌زمینه. color: red; /* متن قرمز */ background-color: blue; /* پس‌زمینه آبی */
  2. فونت: برای تعیین نوع، اندازه و سبک فونت. font-family: Arial, sans-serif; /* نوع فونت */ font-size: 16px; /* اندازه فونت */ font-weight: bold; /* ضخیم کردن فونت */
  3. مرز (Border): برای اضافه کردن خط اطراف عناصر. border: 1px solid black; /* مرز سیاه رنگ */
  4. فاصله (Padding و Margin):
    • padding: فاصله بین محتوای عنصر و مرز آن.
    • margin: فاصله بین مرز یک عنصر و عناصر دیگر.
    padding: 10px; /* فاصله داخلی */ margin: 20px; /* فاصله خارجی */
  5. تراز (Text Alignment): برای تعیین چگونگی تراز کردن متن. text-align: center; /* متن را وسط‌چین می‌کند */

مثال ساده از استایل‌دهی با CSS

حالا بیاید یک مثال کامل از یک صفحه وب رو ببینیم که شامل HTML و CSS هست:

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>صفحه نمونه با CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>به وب‌سایت من خوش آمدید!</h1>
<p class="highlight">این یک متن هایلایت شده است.</p>
<p>چند تا متن معمولی دیگه هم وجود داره.</p>

</body>
</html>

فایل styles.css:

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

h1 {
    color: #333;
    text-align: center;
}

.highlight {
    background-color: yellow;
    padding: 10px;
}

نتیجه‌گیری

با استفاده از CSS، می‌تونید صفحات وب خودتون رو خیلی زیباتر و کاربرپسندتر کنید. ترکیب HTML و CSS قدرت زیادی به شما میده که می‌تونید وب‌سایت‌های حرفه‌ای بسازید.

محمد وب‌سایت
مطالب مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *