CSS مخفف عبارت Cascading Style Sheets است.

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

CSS چیست؟

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

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

نکته: کلمه cascading به این معنی است که سبکی که برای عنصر والد اعمال می‌شود برای همه عناصر فرزند در والد نیز اعمال می‌شود. بنابراین، اگر رنگ متن را روی “آبی” تنظیم کنید، همه سرفصل ها، پاراگراف ها و سایر عناصر متن داخل بدنه نیز یک رنگ خواهند داشت (مگر اینکه چیز دیگری را مشخص کنید)!

با استفاده از CSS

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

Inline – با استفاده از ویژگی style در عناصر HTML
Internal  – با استفاده از عنصر <style> در بخش <head>
External – با استفاده از عنصر <link> برای پیوند دادن به یک فایل CSS خارجی
رایج ترین راه برای افزودن CSS، نگه داشتن استایل ها در فایل های external css است. با این حال، در این آموزش ما از سبک های Inline  و Internal  استفاده می کنیم، زیرا نشان دادنشان ساده تر است و برای شما راحت تر است تا بتوانيد خودتان آن را امتحان کنید.

Inline CSS

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

یک inline CSS از ویژگی style یک عنصر HTML استفاده می کند.

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

Example

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

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

Internal CSS

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

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

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

Example

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

یک external style برای تعریف style برای بسیاری از صفحات HTML استفاده می شود.

برای استفاده از یک external style، یک پیوند به آن در بخش <head> هر صفحه HTML اضافه کنید:

Example

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

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

در اینجا فایل “styles.css” به نظر می رسد:

“styles.css”:

body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
نکته: با یک external style، می توانید ظاهر کل یک وب سایت را با تغییر یک فایل تغییر دهید!

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

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

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

ویژگی CSS font-family فونت مورد استفاده را تعریف می کند.

ویژگی CSS font-size اندازه متن مورد استفاده را مشخص می کند.

مثال

استفاده از ویژگی های رنگ CSS، خانواده فونت و اندازه فونت:

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