تا اینجا یاد گرفتیم چگونه با HTML ساختار یک صفحه وب را ایجاد کنیم؛ عنوان‌ها، متن‌ها، تصاویر، لینک‌ها، فرم‌ها، جدول‌ها و عناصر مختلف HTML5 را در جای مناسب قرار دهیم. اما اگر یکی از صفحات HTML خود را در مرورگر باز کرده باشید، احتمالاً متوجه شده‌اید که ظاهر آن بسیار ساده است. رنگ‌بندی، فاصله‌ها، اندازه فونت‌ها، پس‌زمینه‌ها، کادرها و چیدمان حرفه‌ای عناصر هنوز وجود ندارند. اینجا جایی است که CSS وارد می‌شود. CSS یا Cascading Style Sheets زبانی برای تعیین ظاهر و نحوه نمایش عناصر HTML است. با CSS می‌توانیم مشخص کنیم یک عنوان چه رنگ و اندازه‌ای داشته باشد، یک دکمه چگونه دیده شود، فاصله بین بخش‌های مختلف چقدر باشد و در مراحل بعدی حتی Layoutهای پیچیده و طراحی Responsive ایجاد کنیم. در این مقاله از صفر با CSS آشنا می‌شویم و اولین قدم‌های خود را برای تبدیل یک HTML ساده به یک صفحه زیباتر برمی‌داریم.

CSS چیست؟

CSS مخفف:

Cascading Style Sheets

است که در فارسی معمولاً آن را:

برگه‌های آبشاری سبک

ترجمه می‌کنند.

اما برای یادگیری بهتر، همان عبارت CSS را استفاده خواهیم کرد.

CSS وظیفه اصلی خود را در یک جمله انجام می‌دهد:

CSS ظاهر و نحوه نمایش عناصر HTML را کنترل می‌کند.

برای مثال در HTML می‌نویسیم:

<h1>
    سلام دنیا
</h1>

این کد به مرورگر می‌گوید:

این متن یک عنوان اصلی است.

اما اگر بخواهیم عنوان:

• قرمز باشد

• بزرگ‌تر باشد

• وسط صفحه قرار بگیرد

• پس‌زمینه داشته باشد

• فاصله مناسبی داشته باشد

از CSS استفاده می‌کنیم.

مثلاً:

h1 {
    color: red;
    font-size: 40px;
    text-align: center;
}

حالا HTML ساختار را مشخص کرده و CSS ظاهر آن را تعیین کرده است.

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

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

به این مثال توجه کنید.

فرض کنید می‌خواهیم یک کارت محصول بسازیم.

HTML می‌تواند ساختار کارت را ایجاد کند:

<article>

    <h2>
        لپ‌تاپ
    </h2>

    <p>
        یک لپ‌تاپ قدرتمند برای کارهای روزمره
    </p>

    <button>
        خرید
    </button>

</article>

HTML مشخص می‌کند که کارت ما شامل چه چیزهایی است:

عنوان
متن
دکمه

اما CSS مشخص می‌کند این موارد چگونه دیده شوند.

مثلاً:

article {
    background-color: white;
    padding: 20px;
    border: 1px solid gray;
}

h2 {
    color: blue;
}

button {
    background-color: green;
    color: white;
}

بنابراین می‌توانیم به‌صورت ساده بگوییم:

HTML
↓
ساختار و معنا

CSS
↓
ظاهر و نحوه نمایش

این جداسازی ساختار از ظاهر یکی از اصول پایه توسعه وب است.

آیا CSS یک زبان برنامه‌نویسی است؟

خیر.

CSS یک زبان Style Sheet است.

CSS مانند زبان‌های برنامه‌نویسی وظایفی مانند:

if
loop
function
variable
algorithm

را به شکل یک زبان برنامه‌نویسی عمومی انجام نمی‌دهد.

هدف CSS این است که مشخص کند عناصر صفحه چگونه نمایش داده شوند.

برای مثال:

p {
    color: blue;
}

به معنی:

متن پاراگراف‌ها را آبی نمایش بده.

است.

CSS چه کارهایی می‌تواند انجام دهد؟

CSS امکانات بسیار زیادی دارد.

در مراحل مختلف این دوره با بسیاری از آن‌ها آشنا خواهیم شد.

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

رنگ متن را تغییر دهد

p {
    color: blue;
}

اندازه متن را تغییر دهد

h1 {
    font-size: 40px;
}

پس‌زمینه ایجاد کند

body {
    background-color: lightgray;
}

فاصله ایجاد کند

section {
    margin: 20px;
}

کادر ایجاد کند

article {
    border: 1px solid black;
}

اندازه عناصر را کنترل کند

img {
    width: 300px;
}

و در مراحل پیشرفته‌تر:

• Layout

• Flexbox

• Grid

• Responsive Design

• Animation

• Transition

• Transform

• Gradient

• Shadow

• Filter

و بسیاری موارد دیگر را با CSS یاد خواهیم گرفت.

چرا بدون CSS هم HTML کار می‌کند؟

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

مثلاً:

<h1>
    فروشگاه من
</h1>

<p>
    به فروشگاه من خوش آمدید.
</p>

<button>
    خرید
</button>

مرورگر این عناصر را نمایش می‌دهد.

اما ظاهر آن‌ها بسیار ساده خواهد بود.

دلیل آن این است که مرورگر برای بسیاری از عناصر HTML Styleهای پیش‌فرض دارد. مثلاً عنوان‌ها معمولاً بزرگ‌تر از متن عادی دیده می‌شوند و لینک‌ها معمولاً با رنگ و زیرخط متفاوت نمایش داده می‌شوند. این ظاهر اولیه از CSSهای پیش‌فرض مرورگر می‌آید، نه اینکه خود HTML وظیفه طراحی ظاهری را بر عهده داشته باشد.

ساختار یک قانون CSS

حالا مهم‌ترین قسمت این مقاله را بررسی کنیم.

به این کد نگاه کنید:

h1 {
    color: blue;
}

این کد از چند قسمت تشکیل شده است.

h1
│
├── Selector
│
↓
{
    color: blue;
}
│
├── Declaration

بیایید قسمت‌ها را جداگانه بررسی کنیم.

Selector چیست؟

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

به این قسمت:

h1

Selector (انتخابگر) می گوییم.

در این مثال:

h1 {
    color: blue;
}

h1 سلکتور است یعنی تمام عناصر h1 را انتخاب کن.

Property چیست؟

بعد از انتخاب عنصر، باید مشخص کنیم چه ویژگی‌ای را تغییر دهیم.

در این قسمت:

color

ویژگی یا Property است که برای تغییر رنگ استفاده می‌کنیم.

Value چیست؟

بعد از Property مقدار موردنظر را مشخص می‌کنیم.

در این مثال blue مقدار (Value) است.

color: blue;

پس:

color
↓
Property

blue
↓
Value

Declaration چیست؟

ترکیب Property و Value یک Declaration یا اعلان CSS است.

مثلاً:

color: blue;

یک Declaration است.

به همین ترتیب:

font-size: 30px;

نیز یک Declaration است.

Ruleset چیست؟

کل این ساختار:

h1 {

    color: blue;

    font-size: 40px;

}

یک Rule یا Ruleset محسوب می‌شود.

ساختار آن:

Selector
    ↓
h1
    ↓
Declaration Block
    ↓
{
    property: value;
    property: value;
}

است.

این ساختار یکی از پایه‌ای‌ترین مفاهیم CSS است.

چرا از { } استفاده می‌کنیم؟

دستورهای مربوط به یک Selector داخل آکولاد قرار می‌گیرند:

h1 {

    color: blue;

    font-size: 40px;

}

آکولاد باز شروع Declaration Block را مشخص می‌کند و آکولاد بسته پایان آن را مشخص می‌کند.

چرا از : استفاده می‌کنیم؟

Property و Value با علامت : از یکدیگر جدا می‌شوند.

درست:

color: red;

غلط:

color red;

بنابراین:

Property : Value

ساختار اصلی Declaration است.

چرا از ; استفاده می‌کنیم؟

هر Declaration معمولاً با ; از Declaration بعدی جدا می‌شود.

مثلاً:

h1 {

    color: blue;

    font-size: 40px;

    text-align: center;

}

در اینجا سه Declaration داریم:

color
font-size
text-align

و هرکدام با ; تمام شده‌اند.

سه روش استفاده از CSS

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

1. Inline CSS
2. Internal CSS
3. External CSS

هر سه را بررسی کنیم.

روش اول — Inline CSS

در این روش CSS مستقیماً داخل Attribute به نام style قرار می‌گیرد.

مثلاً:

<h1 style="color: red;">
    سلام دنیا
</h1>

در اینجا CSS مستقیماً روی همان عنصر قرار گرفته است.

مثال دیگر:

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

مزیت Inline CSS

برای آزمایش‌های بسیار کوچک می‌تواند سریع باشد.

مثلاً:

<p style="color: red;">
    متن مهم
</p>

اما استفاده گسترده از این روش معمولاً مناسب نیست.

مشکل Inline CSS

فرض کنید ۵۰ پاراگراف داشته باشیم و بخواهیم همه آن‌ها آبی باشند.

اگر برای تک‌تک آن‌ها بنویسیم:

<p style="color: blue;">

کد بسیار شلوغ خواهد شد.

اگر بعداً بخواهیم رنگ را تغییر دهیم، باید تعداد زیادی خط HTML را تغییر دهیم.

به همین دلیل برای پروژه‌های واقعی معمولاً روش‌های سازمان‌یافته‌تر مناسب‌تر هستند.

روش دوم — Internal CSS

در این روش CSS داخل:

<style>

قرار می‌گیرد.

مثلاً:

<head>

    <style>

        p {
            color: blue;
        }

    </style>

</head>

این روش برای صفحات کوچک و نمونه‌های آموزشی مناسب است.

اما برای پروژه‌های بزرگ‌تر معمولاً بهتر است CSS را در فایل جداگانه قرار دهیم.

روش سوم — External CSS

در این روش CSS در یک فایل جداگانه قرار می‌گیرد.

مثلاً:

project/
│
├── index.html
│
└── css/
    └── style.css

داخل:

style.css

می‌نویسیم:

h1 {
    color: blue;
}

p {
    color: gray;
}

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

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

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

پروژه کوچک با External CSS

حالا یک پروژه کوچک ایجاد کنیم.

ساختار:

my-css-project/
│
├── index.html
│
└── css/
    └── style.css

فایل index.html

<!DOCTYPE html>

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

<head>

    <meta charset="UTF-8">

    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0">

    <title>
        اولین پروژه CSS
    </title>

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

</head>

<body>

    <h1>
        فروشگاه من
    </h1>

    <p>
        به فروشگاه من خوش آمدید.
    </p>

    <button>
        مشاهده محصولات
    </button>

</body>

</html>

فایل style.css

حالا داخل:

css/style.css

بنویسید:

h1 {
    color: darkblue;
    font-size: 40px;
    text-align: center;
}

p {
    color: #555;
    font-size: 20px;
}

button {
    background-color: green;
    color: white;
    font-size: 18px;
}

حالا اگر:

index.html

را باز کنید، CSS خارجی روی HTML اعمال خواهد شد.

اگر CSS اعمال نشد چه کنیم؟

این یکی از رایج‌ترین مشکلات افراد مبتدی است.

اگر CSS کار نکرد، ابتدا مسیر فایل را بررسی کنید.

ساختار ما:

my-css-project/
│
├── index.html
│
└── css/
    └── style.css

بنابراین از index.html تا فایل CSS مسیر:

css/style.css

است.

پس باید بنویسیم:

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

اما اگر ساختار چنین باشد:

my-css-project/
│
├── index.html
│
└── style.css

باید بنویسیم:

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

مسیر فایل بسیار مهم است.

تغییر رنگ متن

یکی از اولین ویژگی‌هایی که باید با آن آشنا شوید:

color

است.

مثلاً:

p {
    color: red;
}

یا:

p {
    color: blue;
}

یا:

p {
    color: green;
}

استفاده از رنگ‌های Hex

رنگ‌ها فقط با نام نوشته نمی‌شوند.

می‌توانیم از Hex نیز استفاده کنیم:

p {
    color: #333333;
}

مثلاً:

h1 {
    color: #ff6600;
}

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

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

ویژگی:

background-color

برای تعیین رنگ پس‌زمینه استفاده می‌شود.

مثلاً:

body {
    background-color: lightgray;
}

یا:

header {
    background-color: darkblue;
}

مثال:

button {
    background-color: green;
}

تغییر اندازه متن

برای اندازه متن می‌توانیم از:

font-size

استفاده کنیم.

مثلاً:

h1 {
    font-size: 40px;
}

یا:

p {
    font-size: 18px;
}

در مقالات بعدی درباره واحدهای اندازه‌گیری CSS مانند:

px
%
em
rem
vw
vh

به‌صورت کامل صحبت خواهیم کرد.

ترازبندی متن

ویژگی:

text-align

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

مثلاً:

h1 {
    text-align: center;
}

مقادیر رایج آن شامل:

left
center
right
justify

است.

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

یک مثال کامل‌تر

حالا همه چیز را کنار هم قرار دهیم.

HTML

<!DOCTYPE html>

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

<head>

    <meta charset="UTF-8">

    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0">

    <title>
        صفحه معرفی
    </title>

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

</head>

<body>

    <header>

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

        <p>
            یادگیری طراحی وب را از امروز شروع کنید.
        </p>

    </header>


    <main>

        <h2>
            درباره ما
        </h2>

        <p>
            این یک صفحه آزمایشی برای یادگیری CSS است.
        </p>

        <button>
            بیشتر بدانید
        </button>

    </main>

</body>

</html>

CSS

body {
    background-color: #f2f2f2;
}

header {
    background-color: #222;
    color: white;
}

h1 {
    font-size: 40px;
    text-align: center;
}

h2 {
    color: darkblue;
}

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

button {
    background-color: green;
    color: white;
}

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

CSS فقط درباره رنگ نیست

یکی از اشتباهات رایج افراد تازه‌کار این است که فکر می‌کنند CSS فقط برای:

رنگ
فونت
پس‌زمینه

است.

در واقع CSS بخش بسیار بزرگ‌تری از طراحی وب را پوشش می‌دهد.

در ادامه دوره با مواردی مانند:

Box Model
Display
Position
Flexbox
Grid
Responsive Design
Animation
Transition
Transform
Shadow
Gradient

آشنا خواهیم شد.

برای مثال، CSS می‌تواند نحوه قرار گرفتن عناصر نسبت به یکدیگر و Layout صفحه را نیز کنترل کند.

اشتباهات رایج در شروع CSS

اشتباه اول — فراموش کردن ;

مثلاً:

h1 {
    color: red
    font-size: 40px;
}

بهتر است بنویسیم:

h1 {
    color: red;
    font-size: 40px;
}

اشتباه دوم — اشتباه گرفتن Property و Value

درست:

color: red;

اشتباه:

red: color;

ساختار صحیح:

property: value;

است.

اشتباه سوم — بستن اشتباه { }

درست:

h1 {

    color: red;

}

اگر آکولادها درست بسته نشوند، ممکن است بخشی از CSS به‌درستی پردازش نشود.

اشتباه چهارم — مسیر اشتباه فایل CSS

اگر بنویسید:

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

اما فایل واقعاً در:

css/style.css

باشد، CSS بارگذاری نمی‌شود.

اشتباه پنجم — قرار دادن CSS خارجی در مسیر اشتباه

اگر فایل:

index.html

داخل یک پوشه و:

style.css

داخل پوشه دیگری باشد، باید مسیر نسبی صحیح را مشخص کنید.

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

تمرین 1

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

h1
h2
p
button

سپس برای هرکدام CSS متفاوت بنویسید.

تمرین 2

رنگ عنوان را تغییر دهید:

h1 {
    color: red;
}

سپس رنگ آن را به رنگ دیگری تغییر دهید.

تمرین 3

اندازه متن را تغییر دهید:

p {
    font-size: 20px;
}

سپس مقدار را تغییر دهید و تفاوت را مشاهده کنید.

تمرین 4

پس‌زمینه صفحه را تغییر دهید:

body {
    background-color: lightgray;
}

تمرین 5

هر سه روش CSS را امتحان کنید:

Inline
Internal
External

و تفاوت آن‌ها را مشاهده کنید.

چالش مقاله

یک صفحه معرفی ساده مانند پروژه مقاله شماره ۲۱ ایجاد کنید.

صفحه باید شامل:

Header
Navigation
Main
Section
Article
Footer

باشد.

سپس یک فایل:

style.css

ایجاد کنید و حداقل موارد زیر را تغییر دهید:

• رنگ پس‌زمینه صفحه

• رنگ عنوان اصلی

• اندازه عنوان

• رنگ پاراگراف‌ها

• رنگ دکمه

• اندازه متن دکمه

• تراز عنوان

هدف این تمرین این نیست که صفحه را حرفه‌ای طراحی کنید.

هدف این است که بتوانید ارتباط بین:

HTML
 ↓
CSS

را به‌خوبی درک کنید.

جمع‌بندی

در این مقاله برای اولین بار وارد دنیای CSS شدیم.

یاد گرفتیم:

CSS چیست؟

و فهمیدیم که CSS برای تعیین ظاهر و نحوه نمایش عناصر HTML استفاده می‌شود.

سپس تفاوت HTML و CSS را بررسی کردیم:

HTML
↓
ساختار و معنا

CSS
↓
ظاهر و ارائه

با ساختار یک Rule در CSS آشنا شدیم:

selector {
    property: value;
}

و مفاهیم زیر را شناختیم:

Selector
Property
Value
Declaration
Ruleset

همچنین سه روش استفاده از CSS را یاد گرفتیم:

Inline CSS
Internal CSS
External CSS

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

نکات مهم این مقاله

اگر بخواهیم کل مقاله را در چند نکته خلاصه کنیم:

1. CSS برای طراحی و ظاهر صفحات وب استفاده می‌شود.

2. HTML ساختار و معنا را مشخص می‌کند و CSS ظاهر را کنترل می‌کند.

3. ساختار پایه یک قانون CSS به شکل زیر است:

selector {
    property: value;
}

4. CSS را می‌توان به سه روش استفاده کرد:

Inline
Internal
External

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

6. color رنگ متن را تغییر می‌دهد.

7. background-color رنگ پس‌زمینه را تغییر می‌دهد.

8. font-size اندازه متن را تغییر می‌دهد.

9. text-align تراز متن را کنترل می‌کند.

10. CSS بسیار گسترده‌تر از تغییر رنگ و فونت است و در ادامه برای Layout و Responsive Design نیز استفاده خواهد شد.