خانه / مستندات / HTML / استایل دادن - Style با CSS / HTML Styles - CSS

HTML Styles - CSS

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

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

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

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

کنترل متن
رنگ‌ها، باکس‌ها (جعبه‌ها)

CSS چیست؟

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

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

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

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

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

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

درون‌خطی (Inline): با استفاده از ویژگی style در داخل تگ HTML
داخلی (Internal): با استفاده از تگ <style> در بخش <head>
خارجی (External): با استفاده از تگ <link> برای لینک دادن به فایل CSS خارجی

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

🔸 بخش کدها

✅ Inline CSS

✅ 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 اضافه کنید:

فایل 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 کادر تعیین کنید.

🔸 کد:

CSS Padding

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

🔸 کد:

CSS Margin

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

🔸 کد:

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

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

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

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

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

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

📌 خلاصه فصل

از ویژگی style برای استایل درون‌خطی استفاده کنید.
از تگ <style> برای تعریف CSS داخلی استفاده کنید.
از تگ <link> برای ارجاع به فایل CSS خارجی استفاده کنید.
از تگ <head> برای نگهداری تگ‌های <style> و <link> استفاده کنید.
از ویژگی‌های color, font-family, font-size برای استایل‌دهی به متن استفاده کنید.
از ویژگی‌های border, padding, margin برای کنترل فاصله‌ها و کادرها استفاده کنید.

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

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

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

این محتوا کاملا رایگان توسط تیم کدلپر ترجمه شده و در اختیار شما کاربران عزیز قرار گرفته است، هر گونه کپی برداری برای مقاصد غیر رایگان و بدون ذکر منبع، مورد پیگیری قانونی قرار میگیرد.

ترجمه شده از منبع: https://www.w3schools.com/

خانه / مستندات / HTML / استایل دادن - Style با CSS / HTML Styles - CSS

HTML Styles - CSS

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

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

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

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

کنترل متن
رنگ‌ها، باکس‌ها (جعبه‌ها)

CSS چیست؟

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

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

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

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

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

درون‌خطی (Inline): با استفاده از ویژگی style در داخل تگ HTML
داخلی (Internal): با استفاده از تگ <style> در بخش <head>
خارجی (External): با استفاده از تگ <link> برای لینک دادن به فایل CSS خارجی

🔸 بخش کدها

✅ Inline CSS

✅ Internal CSS

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

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

<!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 اضافه کنید:

فایل 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 کادر تعیین کنید.

🔸 کد:

CSS Padding

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

🔸 کد:

CSS Margin

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

🔸 کد:

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

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

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

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

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

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

📌 خلاصه فصل

از ویژگی style برای استایل درون‌خطی استفاده کنید.
از تگ <style> برای تعریف CSS داخلی استفاده کنید.
از تگ <link> برای ارجاع به فایل CSS خارجی استفاده کنید.
از تگ <head> برای نگهداری تگ‌های <style> و <link> استفاده کنید.
از ویژگی‌های color, font-family, font-size برای استایل‌دهی به متن استفاده کنید.
از ویژگی‌های border, padding, margin برای کنترل فاصله‌ها و کادرها استفاده کنید.

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

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

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

ترجمه شده از منبع: https://www.w3schools.com/