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

All Right Reserved © 2025 Codoloper

background codoloper

HTML Styles - CSS

خانه

استایل‌های HTML - CSS

CSS مخفف Cascading Style Sheets (برگه‌های سبک آبشاری) است.

CSS مقدار زیادی از کار را کاهش می‌دهد. این زبان می‌تواند هم‌زمان چینش چندین صفحه وب را کنترل کند.

CSS = سبک‌ها و رنگ‌ها

  • کنترل متن

  • رنگ‌ها، باکس‌ها (جعبه‌ها)

CSS چیست؟

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

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

  • رنگ، فونت، اندازه متن،

  • فاصله بین عناصر،

  • موقعیت و نحوه قرارگیری عناصر،

  • تصاویر یا رنگ‌های پس‌زمینه،

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

  • و بسیاری موارد دیگر!

📌 نکته: واژه‌ی "آبشاری" به این معنی است که سبکی که روی یک عنصر والد اعمال می‌شود، به فرزندان آن نیز منتقل می‌گردد.
مثلاً اگر رنگ متن در <body> را آبی تنظیم کنید، همه‌ی تیترها، پاراگراف‌ها و سایر عناصر متنی داخل بدنه نیز همان رنگ را می‌گیرند (مگر اینکه طور دیگری مشخص کرده باشید).

نحوه استفاده از CSS

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

  1. درون‌خطی (Inline): با استفاده از ویژگی style در داخل تگ HTML

  2. داخلی (Internal): با استفاده از تگ <style> در بخش <head>

  3. خارجی (External): با استفاده از تگ <link> برای لینک دادن به فایل CSS خارجی

✅ رایج‌ترین روش استفاده از فایل CSS خارجی است.
اما در این آموزش از روش‌های درون‌خطی و داخلی استفاده می‌کنیم چون راحت‌تر هستند و بهتر قابل آزمایش‌اند.

🔸 بخش کدها 

✅ Inline CSS

<h1 style="color: blue;">A Blue Heading</h1>
<p style="color: red;">A red paragraph.</p>

✅ Internal CSS

یک CSS داخلی (Internal CSS) برای تعریف سبک (Style) یک صفحه HTML خاص استفاده می‌شود.

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

در مثال زیر، رنگ متن همه تگ‌های <h1> در آن صفحه به آبی و رنگ متن همه تگ‌های <p> به قرمز تنظیم می‌شود.
علاوه بر این، رنگ پس‌زمینه صفحه نیز powderblue (آبی پودری) خواهد بود.

 
<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background-color: powderblue;
        }
        
        h1 {
            color: blue;
        }
        
        p {
            color: red;
        }
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>

✅ External CSS

یک فایل CSS خارجی (External Style Sheet) برای تعریف استایل (سبک) چندین صفحه HTML مختلف استفاده می‌شود.

برای استفاده از یک فایل CSS خارجی، باید یک لینک به آن فایل را در بخش <head> هر صفحه HTML اضافه کنید:

 

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>
 

فایل CSS خارجی را می‌توان با هر ویرایشگر متنی (مانند Notepad) نوشت.

این فایل نباید حاوی هیچ کد HTML باشد و باید با پسوند .css ذخیره شود.

در ادامه، نمونه‌ای از محتوای فایل "styles.css" را مشاهده می‌کنید:

 
body {
    background-color: powderblue;
}

h1 {
    color: blue;
}

p {
    color: red;
}

📌 نکته: با یک فایل CSS خارجی می‌توانید ظاهر کل سایت را فقط با تغییر یک فایل، تغییر دهید!

🔷 بخش توضیحات ادامه 

رنگ‌ها، فونت‌ها و اندازه‌ها در CSS

در این بخش با ویژگی‌های پرکاربرد CSS آشنا می‌شوید:

  • color: رنگ متن را مشخص می‌کند.

  • font-family: فونت متن را تعیین می‌کند.

  • font-size: اندازه متن را تعیین می‌کند.

مثال

استفاده از ویژگی‌های CSS مانند color (رنگ)، font-family (فونت) و font-size (اندازه متن):

 
 
<!DOCTYPE html>
<html>
<head>
    <style>
        h1 {
            color: blue;
            font-family: verdana;
            font-size: 300%;
        }
        
        p {
            color: red;
            font-family: courier;
            font-size: 160%;
        }
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>

🔷 خصوصیات پیشرفته‌تر CSS 

CSS Border

ویژگی border یک کادر دور عنصر HTML ایجاد می‌کند.

📌 تقریباً می‌توانید برای تمام عناصر HTML کادر تعیین کنید.

🔸 کد:

 
 
p {
    border: 2px solid powderblue;
}

CSS Padding

ویژگی padding فاصله بین متن و کادر را مشخص می‌کند.

🔸 کد:

 
p {
    border: 2px solid powderblue;
    padding: 30px;
}

CSS Margin

ویژگی margin فاصله خارج از کادر (بیرونی) را تعیین می‌کند.

🔸 کد:

 
 
p {
  border: 2px solid powderblue;
  margin: 50px;
}

🔷 لینک به CSS خارجی

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

مثال با آدرس کامل:

 
 
<link rel="stylesheet" href="https://www.codoloper.com/html/styles.css">

مثال با مسیر نسبی به یک پوشه:

 
 
<link rel="stylesheet" href="/html/styles.css">

مثال با فایل در همان پوشه:

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

📘 برای اطلاعات بیشتر، فصل "مسیر فایل‌ها در HTML" را ببینید.

📌 خلاصه فصل

  • از ویژگی style برای استایل درون‌خطی استفاده کنید.

  • از تگ <style> برای تعریف CSS داخلی استفاده کنید.

  • از تگ <link> برای ارجاع به فایل CSS خارجی استفاده کنید.

  • از تگ <head> برای نگهداری تگ‌های <style> و <link> استفاده کنید.

  • از ویژگی‌های color, font-family, font-size برای استایل‌دهی به متن استفاده کنید.

  • از ویژگی‌های border, padding, margin برای کنترل فاصله‌ها و کادرها استفاده کنید.

📚 نکته: برای یادگیری بیشتر، آموزش کامل CSS را دنبال کنید.

 

🏷 تگ‌های مربوط به CSS در HTML

تگتوضیح
<style>اطلاعات استایل برای یک سند HTML را تعریف می‌کند
<link>یک لینک بین سند و منبع خارجی ایجاد می‌کند