جلسه سوم آموزش توسعه وب | CSS و طراحی ظاهر صفحات وب

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

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

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

---

CSS چیست؟

CSS مخفف Cascading Style Sheets است.

اگر HTML را اسکلت یک صفحه در نظر بگیریم، CSS وظیفه طراحی و ظاهر آن را بر عهده دارد.

برای مثال HTML مشخص می‌کند که یک عنوان داریم:

html
<h1>وب‌سایت من</h1>

اما CSS می‌تواند مشخص کند:

  • عنوان چه رنگی باشد.
  • اندازه آن چقدر باشد.
  • چه فونتی داشته باشد.
  • از اطراف چقدر فاصله داشته باشد.
  • در کجای صفحه قرار بگیرد.

پس می‌توانیم به شکل ساده بگوییم:

text
HTML → ساختار و محتوا
CSS  → ظاهر و طراحی

---

اولین کد CSS

یک فایل جدید با نام style.css ایجاد کنید.

داخل آن بنویسید:

css
body {
    background-color: #f5f5f5;
}

حالا باید این فایل را به صفحه HTML خودمان متصل کنیم.

داخل بخش head فایل HTML این خط را قرار دهید:

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

ساختار فایل HTML ما اکنون می‌تواند این‌طور باشد:

html
<!DOCTYPE html>

<html lang="fa" dir="rtl">

<head>
    <meta charset="UTF-8">
    <title>صفحه من</title>

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

<body>

    <h1>وب‌سایت من</h1>

    <p>
        این اولین صفحه من است.
    </p>

</body>

</html>

حالا مرورگر فایل style.css را نیز می‌خواند و رنگ پس‌زمینه صفحه تغییر می‌کند.

---

Selector چیست؟

در CSS ابتدا باید مشخص کنیم می‌خواهیم ظاهر کدام عنصر را تغییر دهیم.

برای مثال:

css
h1 {
    color: blue;
}

در اینجا h1 یک Selector است.

یعنی به مرورگر می‌گوییم:

ظاهر تمام عناصر h1 را تغییر بده.

قسمت داخل {} دستورهایی است که برای آن عنصر اجرا می‌شوند.

---

Property و Value

در این کد:

css
h1 {
    color: blue;
}

دو قسمت مهم داریم.

color یک Property است؛ یعنی مشخص می‌کند چه ویژگی‌ای را می‌خواهیم تغییر دهیم.

blue مقدار یا Value آن ویژگی است.

ساختار کلی CSS معمولاً به شکل زیر است:

css
selector {
    property: value;
}

مثلاً:

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

در اینجا رنگ و اندازه نوشته پاراگراف تغییر می‌کند.

---

تغییر رنگ متن

برای تغییر رنگ متن از color استفاده می‌کنیم:

css
h1 {
    color: #222222;
}

می‌توانیم رنگ را با نام نیز بنویسیم:

css
h1 {
    color: red;
}

اما استفاده از کدهای رنگی مثل:

css
#222222

در طراحی‌های واقعی کنترل بیشتری به ما می‌دهد.

---

تغییر رنگ پس‌زمینه

برای تغییر رنگ پس‌زمینه از background-color استفاده می‌کنیم:

css
body {
    background-color: #f2f2f2;
}

همچنین می‌توانیم برای یک عنصر خاص پس‌زمینه تعیین کنیم:

css
h1 {
    background-color: #ffffff;
}

---

اندازه نوشته

برای تغییر اندازه نوشته از font-size استفاده می‌کنیم:

css
h1 {
    font-size: 36px;
}

برای پاراگراف:

css
p {
    font-size: 18px;
}

واحد px یکی از واحدهای رایج برای تعیین اندازه است.

---

ضخیم کردن نوشته

برای ضخیم کردن نوشته می‌توانیم از font-weight استفاده کنیم:

css
h1 {
    font-weight: 700;
}

مقدارهای مختلفی برای ضخامت وجود دارد.

برای مثال:

css
font-weight: 400;

معمولاً حالت عادی متن است و:

css
font-weight: 700;

متن را ضخیم‌تر می‌کند.

---

فاصله داخلی و خارجی

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

padding

padding فاصله بین محتوای یک عنصر و لبه داخلی آن است.

مثلاً:

css
h1 {
    padding: 20px;
}

margin

margin فاصله یک عنصر از عناصر اطراف خودش است.

مثلاً:

css
h1 {
    margin: 30px;
}

برای درک بهتر:

text
┌─────────────────────────────┐
│           margin            │
│   ┌─────────────────────┐   │
│   │       padding       │   │
│   │      محتوا          │   │
│   └─────────────────────┘   │
└─────────────────────────────┘

---

ساخت یک کارت ساده

حالا می‌خواهیم یک بخش شبیه کارت بسازیم.

در HTML:

html
<div class="card">

    <h2>پروژه من</h2>

    <p>
        این یک پروژه آزمایشی برای یادگیری CSS است.
    </p>

</div>

در CSS:

css
.card {
    background-color: #ffffff;
    padding: 25px;
    margin: 20px;
    border-radius: 15px;
}

اینجا از class استفاده کرده‌ایم.

کلمه:

html
class="card"

به ما اجازه می‌دهد در CSS عنصر موردنظر را با .card انتخاب کنیم.

---

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

اگر در HTML داشته باشیم:

html
<div class="box">
    سلام
</div>

در CSS می‌توانیم بنویسیم:

css
.box {
    background-color: white;
    padding: 20px;
}

نقطه . قبل از box به این معنی است که می‌خواهیم یک Class را انتخاب کنیم.

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

html
<div class="box">بخش اول</div>

<div class="box">بخش دوم</div>

<div class="box">بخش سوم</div>

همه این بخش‌ها از قوانین .box استفاده خواهند کرد.

---

ساخت یک دکمه زیباتر

HTML:

html
<a class="button" href="#">
    شروع کنید
</a>

CSS:

css
.button {
    display: inline-block;
    background-color: #111111;
    color: #ffffff;
    padding: 12px 20px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
}

با همین چند خط، یک لینک ساده به چیزی شبیه دکمه تبدیل می‌شود.

---

تغییر ظاهر هنگام قرار گرفتن ماوس

CSS قابلیتی به نام :hover دارد.

مثلاً:

css
.button:hover {
    background-color: #333333;
}

حالا وقتی کاربر ماوس را روی دکمه قرار دهد، رنگ آن تغییر می‌کند.

این ویژگی برای ایجاد تعامل‌های ساده در رابط کاربری بسیار کاربردی است.

---

یک پروژه کوچک

حالا تمام چیزهایی که یاد گرفتیم را ترکیب کنیم.

HTML

html
<!DOCTYPE html>

<html lang="fa" dir="rtl">

<head>
    <meta charset="UTF-8">
    <title>پروژه CSS من</title>

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

<body>

    <div class="card">

        <h1>سلام، من در حال یادگیری وب هستم</h1>

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

        <a class="button" href="#">
            شروع یادگیری
        </a>

    </div>

</body>

</html>

CSS

css
body {
    background-color: #f3f4f6;
    font-family: sans-serif;
    margin: 0;
    padding: 40px;
}

.card {
    max-width: 600px;
    margin: 40px auto;
    background-color: #ffffff;
    padding: 30px;
    border-radius: 18px;
}

.card h1 {
    color: #222222;
    font-size: 32px;
}

.card p {
    color: #555555;
    font-size: 17px;
    line-height: 1.9;
}

.button {
    display: inline-block;
    background-color: #111111;
    color: #ffffff;
    padding: 12px 22px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
}

.button:hover {
    background-color: #333333;
}

دو فایل index.html و style.css را کنار هم قرار دهید و index.html را با مرورگر باز کنید.

---

تمرین این جلسه

حالا یک کارت شخصی برای خودتان بسازید.

کارت شما باید شامل موارد زیر باشد:

  • یک عنوان
  • یک متن کوتاه
  • یک دکمه
  • رنگ پس‌زمینه
  • فاصله داخلی
  • گوشه‌های گرد
  • یک حالت hover برای دکمه

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

یک بار هم مقدار border-radius را از 10px به 30px تغییر دهید و تفاوت ظاهر را مشاهده کنید.

---

یک نکته مهم درباره CSS

در CSS لازم نیست همه چیز را از ابتدا حفظ کنیم.

مهم‌تر از حفظ کردن Propertyها، این است که بدانیم برای تغییر هر قسمت باید دنبال چه ویژگی‌ای بگردیم.

مثلاً اگر بخواهیم:

text
رنگ متن       → color
رنگ پس‌زمینه  → background-color
اندازه متن    → font-size
فاصله داخلی   → padding
فاصله خارجی   → margin
گردی گوشه‌ها  → border-radius
ضخامت متن     → font-weight

را تغییر دهیم، می‌توانیم ویژگی مناسب را پیدا کنیم و مقدار آن را تغییر دهیم.

---

جمع‌بندی

در این جلسه یاد گرفتیم که CSS چگونه ظاهر صفحات HTML را کنترل می‌کند.

با Selector، Property و Value آشنا شدیم و سپس رنگ، اندازه متن، فاصله‌ها، پس‌زمینه، گوشه‌های گرد و حالت hover را بررسی کردیم.

همچنین یاد گرفتیم چگونه با class بخش‌های مختلف صفحه را انتخاب کنیم و یک کارت ساده و یک دکمه طراحی کنیم.

در جلسه بعد می‌توانیم یک قدم جلوتر برویم و سراغ چیدمان عناصر با Flexbox برویم تا بتوانیم بخش‌های مختلف یک صفحه را در کنار هم قرار دهیم و رابط‌های کاربری مرتب‌تری بسازیم.

این آموزش به‌صورت اختصاصی برای LetPix تهیه شده و مثال‌ها و تمرین‌های این جلسه برای همین مجموعه نوشته شده‌اند.

LetPix | Learn • Build • Create

© 2026 LetPix — All Rights Reserved