100% کامل شده تا
به‌روزرسانی شده در: ۲۶ روز پیش

استایل‌ها در اچ‌تی‌ام‌ال - سی‌اس‌اس (HTML Styles - CSS)

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
< HTML:Tutorial(تغییرمسیر از CSS در HTML)
پرش به ناوبری پرش به جستجو

CSS (سرواژه: Cascading Style Sheets) به معنای برگه‌های استایل آبشاری است.[۱]

CSS باعث صرفه‌جویی زیاد در کار می‌شود. این کار می‌تواند طرح‌بندی چندین صفحهٔ وب را به‌طور همزمان انجام دهد.

Responsive demo.svg

CSS چیست؟ (What is CSS?)

برگه‌های استایل آبشاری (CSS) برای قالب‌بندی صفحهٔ وب استفاده می‌شود.

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

نکته: کلمهٔ آبشاری به این معنی است که سبکی که روی عنصر والد اعمال می‌شود، در مورد همهٔ عناصر فرزندانِ درون والدین نیز، صدق می‌کند؛ بنابراین، اگر رنگ متن اصلی را روی «آبی» تنظیم کنید، همه سرفصل‌ها، پاراگراف‌ها و سایر عناصر متن در داخل بدنه نیز، همان رنگ را خواهند گرفت (مگر اینکه چیز دیگری را مشخص کرده باشید)!


استفاده از سی‌اس‌اس (Using CSS)

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

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

CSS درون‌خطی (Inline CSS)

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

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

مثال زیر رنگ متن عنصر <h1> را آبی و رنگ متن عنصر <p> را بر روی قرمز تنظیم می‌کند:

مثال

<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>

مثال

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>

</body>
</html>

Responsive demo.svg



CSS داخلی (Internal CSS)

یک CSS داخلی برای تعریف استایل، برای یک صفحهٔ HTML واحد استفاده می‌شود.

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

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

مثال

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

مقادیر سی‌اس‌اس:
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}

مثال

<!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>

Responsive demo.svg

CSS خارجی (External CSS)

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

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

مثال

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

مثال

<!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>

Responsive demo.svg

صفحهٔ استایل خارجی را می‌توان در هر ویرایشگر متنی نوشت. فایل مذکور نباید حاوی کد HTML باشد و باید با پسوند .css ذخیره شود.

در اینجا می‌توانید فایل “styles.css” را مشاهده کنید:

"styles.css":
body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}


نکته: با یک صفحه استایل خارجی، می‌توانید با تغییر یک فایل، ظاهر کل وب‌سایت را تغییر دهید!

رنگ‌ها، فونت‌ها و اندازه‌ها در سی‌اس‌اس (CSS Colors, Fonts and Sizes)

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

  • خصوصیت color رنگ متن مورد استفاده را مشخص می‌کند.
  • خصوصیت font-family قلم مورد استفاده را مشخص می‌کند.
  • خصوصیت font-size اندازهٔ متن مورد استفاده را مشخص می‌کند.

مثال

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

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

مقادیر سی‌اس‌اس:
h1 {
  color: blue;
  font-family: verdana;
  font-size: 300%;
}
p {
  color: red;
  font-family: courier;
  font-size: 160%;
}

مثال 

<!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>

Responsive demo.svg

کادر در سی‌اس‌اس (CSS Border)

خصوصیت border، کادری در اطراف عنصر HTML را مشخص می‌کند:

نکته: تقریباً می‌توانید برای همهٔ عناصر HTML یک کادر تعریف کنید.

مثال

استفاده از ویژگی border در CSS:

p {
  border: 2px solid powderblue;
}

مثال

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 2px solid powderblue;
}
</style>
</head>
<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

</body>
</html>

Responsive demo.svg

حاشیهٔ درونی در سی‌اس‌اس (CSS Padding)

خصوصیت padding یک حاشیهٔ درونی (فاصله) بین متن و کادر ایجاد می‌کند:

مثال

استفاده از ویژگی‌های border و padding در CSS:

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

مثال

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 2px solid powderblue;
  padding: 30px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

</body>
</html>

Responsive demo.svg

حاشیهٔ خارجی (CSS Margin)

خصوصیت margin یک حاشیهٔ خارجی (فاصله) خارج از کادر را مشخص می‌کند:

مثال

استفاده از ویژگی‌های border و margin در CSS:

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

مثال

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 2px solid powderblue;
  margin: 50px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

</body>
</html>

Responsive demo.svg

پیوند به CSS خارجی (Link to External CSS)

شما می‌توانید به صفحات استایل خارجی با یک آدرس کامل یا با مسیر مربوط به صفحهٔ وب فعلی ارجاع دهید.

مثال

در این مثال از یک URL کامل برای پیوند به یک برگهٔ استایل، استفاده می‌شود:

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

مثال

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Responsive demo.svg


مثال

این مثال به برگهٔ استایلی که در یک پوشهٔ HTML، در وبسایت فعلی قرار دارد، پیوند می‌دهد:

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

مثال

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="/html/styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Responsive demo.svg


مثال

این مثال به برگهٔ استایلی که در همان پوشهٔ صفحهٔ فعلی قرار گرفته‌است، پیوند می‌دهد:

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

مثال

<!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>

Responsive demo.svg


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

خلاصهٔ بخش (Chapter Summary)

نکته: در مورد CSS در آموزش CSS ما بیشتر خواهید آموخت.

تگ‌های استایل‌دهی در اچ‌تی‌ام‌ال (HTML Style Tags)

تگ تعریف
<style> اطلاعات مربوط به استایل یک سند HTML را مشخص می‌کند
<link> لینک بین یک سند و منبع خارجی را نعریف می‌کند
برای بدست آوردن لیست کامل تگ‌های HTML موجود، به مرجع تگ‌های HTML ما مراجعه کنید.

منابع آموزشی

  1. ↑ w3schools.com: HTML Styles – CSS




برگرفته از «https://wikicod.ir/w/index.php?title=HTML:Tutorial/استایل_ها_-_CSS&oldid=28329»