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

کلمه CSS مخفف Cascading Style Sheets است.

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

 

CSS = Styles and Colors

Manipulate Text
Colors,  Boxes

 

CSS چیست؟

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

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

کلمه " آبشاری " به این معنی است که سبک اعمال شده به یک عنصر پدر و مادر نیز به تمام عناصر کودکان در داخل پدر و مادر اعمال می شود. پس اگر رنگ متن را به آبی تغییر دهید، تمام سرفصل ها، پاراگراف ها و دیگر عناصر متنی درون بدن متن هم همان رنگ را دریافت خواهد کرد ( مگر با تنظیمات ویژه دیگر )

 

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

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

1) درون خط - با استفاده از ویژگی style داخل عنصر HTML

2) داخلی - با استفاده از یک عنصر <style> در بخش <head>

3) خارجی - با استفاده از یک عنصر <link> برای پیوند به یک فایل CSS خارجی

 

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

 

CSS درون خط

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

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

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

<h1 style="color:blue;">عنوان آبی</h1>





<p style="color:red;">پاراگراف قرمز</p>
امتحان کنید

 

CSS داخلی

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

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

مثال  زیر رنگ همه بخش های <h1> در آن صفحه را آبی و همه عناصر <p> را قرمز می کند. به علاوه رنگ پس زمینه صفحه به رنگ پودر آبی در خواهد آمد.

<!DOCTYPE html>

<html>

<head>

<style>

body {background-color: powderblue;}

h1   {color: blue;}

p    {color: red;}

</style>

</head>

<body>





<h1>عنوان</h1>

<p>پاراگراف</p>





</body>

</html>
امتحان کنید

 

CSS خارجی

یک استایل خارجی برای ورق برای تعریف سبک بسیاری از صفحات HTML استفاده می شود.

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

<!DOCTYPE html>
<html>

<head>

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


</head>
<body>


<h1>عنوان</h1>

<p>پاراگراف</p>






</body>
</html>
امتحان کنید

 

سبک خارجی ورقه را می توان در هر ویرایشگر متن نوشت. پرونده نباید حاوی هیچ کد HTML باشد و باید با پسوند css. ذخیره شود.

اینجا یک نمونه فایل با نام style.css آماده کرده ایم:

"styles.css":

body {

  background-color: powderblue;

}

h1 {

  color: blue;

}

p {

  color: red;

}

 

با یک ورق سبک خارجی شما قادر خواهید بود جلوه کل وب سایت را با تغییر یک فایل تغییر دهید.

 

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

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

ویژگی color در CSS رنگ متن را تعریف می کند.

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

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

استفاده از خواص رنگ 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>عنوان</h1>
<p>متن</p>

</body>
</html>
امتحان کنید

 

قاب CSS

ویژگی border در CSS یک مرز را در اطراف یک عنصر HTML تعریف می کند.

شما می تواند تقریبا برای تمام عناصر HTML این مرز و کادر را تعیین کنید.

 

استفاده از اموال مرزی CSS:

p {

  border: 2px solid powderblue;

}
امتحان کنید

 

لایه گذاری CSS

ویژگی padding در CSS یک لایه گذاری ( فضا ) بین متن و مرز را تعریف می کند.

 

استفاده از مرز CSS و خواص padding :

p {

  border: 2px solid powderblue;

  padding: 30px;

}
امتحان کنید

 

حاشیه CSS

ویژگی margin در CSS یک حاشیه (  فضا ) خارج از مرز را تعریف می کند.

 

استفاده از خواص مرزی و حاشیه ای CSS:

p {

  border: 2px solid powderblue;

  margin: 50px;

}
امتحان کنید

 

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

ورق های سبک خارجی را می توان با یک URL کامل یا با مسیری نسبت به صفحه وب فعلی ارجاع داد.

این مثال از یک URL کامل برای لینک دادن به یک ورقه سبک استفاده می کند:

<link rel="stylesheet" href="https://maxdev.ir">
امتحان کنید

 

این مثال به یک ورقه سبک واقع در پوشه html در وب سایت فعلی پیوند می دهد:

<link rel="stylesheet" href="/html/styles.css">
امتحان کنید

 

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

<link rel="stylesheet" href="styles.css">
امتحان کنید