Codecourse

Klasslar

Veb səhifənin fərdi elementi üçün stil təyin etmək və ya bir teq üçün müxtəlif stillər tətbiq etmək lazım olduqda klasslar köməyə gəlir. Teqlərlə birgə klassın sintaksisi aşağıdakı kimidir:

Teq.Klassın adı { xassə1 : qiymət; xassə2 : qiymət; ... }

Stil daxilində öncə lazımi teq yazılır, bundan sonra nöqtə qoyulur və sonda klassın adı qeyd edilir. Klassların adı latın simvolu ilə başlamalıdır, defis (-) və altdan xətt (_) simvolundan istifadə mümkündür. HTML kodunda teqdə müəyyən klassdan istifadə olunduğunu göstərmək üçün həmin teqə class="Klassın adı" atributu əlavə edilir.

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Klasslar</title>
  <style>
   P { /* Paraqraf */
    text-align: justify; /* Hər iki tərəfdən bərabər düzləndirmə */
   }
   P.cite { /* cite klassı ilə olan paraqraf */
    color: navy; /* Mətnin rəngi */
    margin-left: 20px; /* Soldan 20 piksel ölçüsündə məsafə */
    border-left: 1px solid red; /* Mətnin sol hissəsində çərçivənin təyin edilməsi */
    padding-left: 15px; /* Çərçivə ilə mətn arasındakı məsafə */
   }
  </style>
 </head>
 <body>
  <p>Sərt disklər əbədi deyil. Vaxt keçdikcə oxuyan başlıqlar köhnəlir, filterlər,
  disklərin maqnit səthləri və elektron komponentlər sıradan çıxır. Hərçənd ki
  daşıyıcıları hazırlayan mühəndislər məhsulların uzunmüddətli olması üçün mümkün olanı
  edirlər, lakin sərt disklər də nə vaxtsa sıradan çıxa bilər.</p>

  <p class="cite">Əksər hallarda daşıyıcının sıradan çıxma vaxtını 
  istifadəçi dəqiq bilmir və sonra məlum olur ki, diskin daxilində vacib
  informasiya var idi.</p>
 </body>
</html>

klass

Birinci paraqrafda qara rəngli (qara rəng brauzer tərəfindən başlanğıc ayar kimi təyin edilir) mətn hər iki tərəfdən (sağ və sol) eyni ölçüdə nizamlanıb, cite klassı tətbiq edilmiş ikinci paraqrafda isə göy rəngli mətn və sol tərəfdən göy çərçivə əks olunur.

Həmçinin teq olmadan da klassdan istifadə etmək mümkündür. Bu halda sintaksis aşağıdakı kimi olacaq:

.Klassın adı { xassə1 : qiymət; xassə2 : qiymət; ... }
<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Klasslar</title>
  <style>
   .term {
    color: green; /* Mətnin rəngi */
    font-weight: bold; /* Qalın şrift */ 
   }
  </style>
 </head>
 <body>
  <p><span class="term">USB 3.0 (SuperSpeed)</span> spesifikasiyasının 
  yekun versiyası 2008-ci il noyabrın 17-də təqdim edilib. Sözügedən standartın
  hazırlanması ilə "Intel", "Microsoft", "Hewlett-Packard",  "Texas Instruments",
  "Nec" və "NXP" şirkətləri məşğul olublar. <span class="term">USB 3.0 </span> 
 spesifikasiyasında verilənlərin ötürülməsi üzrə maksimum sürət 10 dəfə – 5 Qbit/s-dək
 artırılıb.</p>
 </body>
</html>

klass

Veb səhifənin müxtəlif elementlərinə (cədvəldəki xanalara, bağlantılara, paraqraflara və sairə) stil tətbiq etmək lazım olduqda klasslardan istifadə əlverişlidir.

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Klasslar</title>
  <style>
   table.country {
    width: 100%; /* Cədvəlin eni */
    border: 1px solid #ccc; /* Cədvəl ətrafında çərçivə */
   }
   th {
    background: #355E66; /* Arxa fon rəngi */
    color: #fff; /* Mətnin rəngi */
    text-align: left; /* Sol tərəfə düzləndirmə */
    padding: 7px 0; /* Mətnin ətrafında boşluq */
   }
   tr.odd {
    background: #d3cdd0; /* Arxa fon rəngi */
   }
   td {
    padding: 4px 0; /* Mətnin ətrafında boşluq */
   }
  </style>
 </head>
 <body>
  <table class="country">
   <tr>
    <th>Ölkə</th><th>Paytaxt</th><th>Əhali</th>
   </tr>
   <tr class="odd">
    <td>Azərbaycan</td><td>Bakı</td><td>9.5 milyon</td>
   </tr>
   <tr>
    <td>İtaliya</td><td>Roma</td><td>59 milyon</td>
   </tr>
   <tr class="odd">
    <td>Türkiyə</td><td>Ankara</td><td>79 milyon</td>
   </tr>
   <tr>
    <td>Rusiya</td><td>Moskva</td><td>143 milyon</td>
   </tr>
   <tr class="odd">
    <td>ABŞ</td><td>Vaşinqton</td><td>318 milyon</td>
   </tr>
  </table>
 </body>
</html>

klass

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