Codecourse

Stillərin veb səhifəyə əlavə edilməsi üsulları

Stilləri veb səhifəyə əlavə etmək üçün bir neçə üsul mövcuddur. Aşağıda hər bir üsulu ayrı-ayrılıqda ətraflı nəzərdən keçirəcəyik.

Kənar stillər (External Style Sheets)

Kənar stillərdən istifadə etdikdə selektorlar və onların qiyməti .css genişlənməsinə malik ayrı faylda saxlanılır və sənədi bu faylla əlaqələndirmək üçün <link> teqindən istifadə olunur. Bu teq <head> konteyner teqi daxilində yerləşir.

<!DOCTYPE HTML>
<html>
 <head>
  <title>Kənar stillər</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
   <h1>Başlıq</h1>
   <p>Mətn</p>
 </body>
</html>

<Link> teqinin rel atributunun qiyməti həmişə dəyişməz qalır. Href atributu vasitəsilə kənar stil faylının ünvanı göstərilir. Nəzərə alın ki, bu üsulla başqa saytda yerləşən stili də sənədə əlavə etmək olar.

<Link> teqi vasitəsilə qoşulan style.css faylının tərkibi:

H1 {
color: #000080;
font-size: 200%;
font-family: Arial, Verdana, sans-serif;
text-align: center;
}

P {
  padding-left: 20px;
}

Yuxarıdakı nümunədən göründüyü kimi style.css faylı yalnız CSS sintaksisindən ibarətdir. HTML sənəddə isə stil faylına istinad edilib. Beləliklə, saytın kodu və tərtibatının ayrılması prinsipi reallaşdırılıb. Ona görə kənar stillərdən istifadə ən rahat və universal üsuldur.

Qlobal stillər (Document Style Sheets)

Qlobal stillərdən istifadə etdikdə CSS sintaksisi veb səhifənin daxilində göstərilir və sənədin başlıq hissəsində yerləşdirilir. Bu üsul öz imkanlarına görə əvvəlki metoddan geri qalır.

<!DOCTYPE HTML>
<html>
 <head>
  <title>Qlobal stillər</title>
  <meta charset="utf-8">
  <style>
   H1 { 
    font-size: 120%; 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    color: #333366; 
   }
  </style>
 </head>
 <body>
   <h1>Hello, World!</h1>
 </body>
</html>

Qlobal stil

Daxili stillər (İnline Styles)

Bəzən veb səhifədə hər hansı bir teq üçün ayrıca stil təyin etmək lazımdır. Bunun üçün style parametrindən istifadə edilir, onun qiyməti kimi isə stil qaydaları göstərilir.

<!DOCTYPE HTML>
<html>
 <head>
  <title>Daxili stillər</title>
  <meta charset="utf-8">
 </head>
 <body>
   <p style="font-size: 120%; font-family: monospace; color: #cd66cc">Başqa bir mətn</p>
 </body>
</html>

Bu nümunədə p teqinin stili style atributunun köməyi ilə təyin edilir, dırnaq daxilində konkret teq üçün stil qaydaları göstərilir.

Daxili stil

Növbəti dərsi seçib keçid düyməsinə sıxın: