HTML

CSS-in əsasları

müəllif Emil Hüseynov

CSS (Cascading Style Sheets) texnologiyası - bu, veb səhifənin görünüşünü dəyişmək üçün istifadə edilən koddur. Bu dərsdə CSS-in əsasları barədə məlumat verilir. Aşağıdakı suallara aydınlıq gətirilir:

  • Mən mətnin rəngini necə qırmızı edə bilərəm?
  • Veb səhifənin maketində kontenti istədiyim hissədə necə yerləşdirə bilərəm?
  • Veb səhifəni arxa fon şəkilləri və rənglər ilə necə gözəlləşdirə bilərəm?

CSS nədir?

CSS proqramlaşdırma dili deyil, veb səhifənin dizaynını dəyişmək üçün istifadə edilən koddur. Bu texnologiya HTML sənədindəki elementlərin stilini dəyişdirməyə imkan verir.

İyerarxik struktur yaradırıq yarımbaşlığında text-complete.html faylı yaratmışdıq. Onun HTML kodu aşağıdakı kimidir:

<!DOCTYPE html>
<html lang="az">
<head>
    <meta charset="utf-8">
    <title>Verilənlərin tipi</title>
</head>

<body>
    <h1>Verilənlərin tipi</h1>
    <p>Müəllif: Emil Hüseynov</p>

    <h2>Məntiqi tip (Boolean)</h2>
    <p>Ən sadə verilənlər tipidir. Bu tip ya true (doğru), ya da false (yalan) qiymətlərini ala bilər.</p>

    <h2>Sətir</h2>
    <p>PHP-də sətir (string tipi) baytlar ardıcıllığıdır. Sətrin uzunluğu 2 QB-dan çox ola bilməz.</p>

    <h3>Tək dırnaq işarəsi</h3>
    <p>Tək dırnaq işarəsi içərisində yazılmış sətirdə (məsələn, 'string') dəyişənlər və idarəedici simvollar yazıldığı
        kimi görsənir.</p>
</body>
</html>

Aşağıdakı addımları ardıcıllıqla icra edirik:

  • html qovluğunun içərisində css_start qovluğu yaradırıq
  • css_start qovluğunda text.html faylı yaradırıq

Yuxarıdakı kodu text.html faylına əlavə edib yadda saxlayırıq və brauzerdə açırıq:

css-start qovluğunda text.html faylı yaradırıq

İndi, məsələn, aşağıdakı CSS qayda yuxarıdakı HTML sənədindəki bütün abzasların (<p> elementi) rəngini qırmızı etməyə imkan verir:

p {
    color: red;
}

Aşağıdakı addımları ardıcıllıqla yerinə yetiririk:

  • css_start qovluğunun içərisində styles qovluğu yaradırıq
  • styles qovluğunda style.css faylı yaradırıq
  • Mətn redaktorunda həmin faylı açırıq və yuxarıdakı CSS kodunu ona əlavə edirik

text.html faylını redaktorda açırıq, <head> elementinə aşağıdakı sətri əlavə edirik:

<link href="styles/style.css" rel="stylesheet" type="text/css">

CSS və JavaScript-i səhifəyə qoşuruq yarımbaşlığında CSS faylının HTML sənədinə necə əlavə edilməsi barədə ətraflı yazılıb.

Bundan sonra dəyişikliyi yadda saxlayırıq və faylı brauzerdə açırıq:

mətndə paraqrafların rəngi qırmızıdır

Əgər HTML sənədinizdə bütün paraqrafların (<p> ... </p>) rəngi qırmızıdırsa, sizi təbrik edirəm, CSS kod işləyir.

CSS qaydaları

Bir qədər əvvəl HTML sənədindəki bütün paraqrafların rəngini qırmızıya dəyişən CSS kodu yazdıq. İndi həmin CSS kodu daha ətraflı nəzərdən keçirək:

CSS qaydaları

Yuxarıdakı struktur qaydalar adlanır və aşağıdakı hissələrdən ibarətdir:

  • Selektor. HTML elementin adıdır, HTML sənədində stilini dəyişmək istədiyimiz elementi seçir. HTML sənədindəki başqa elementin stilini dəyişmək üçün sadəcə olaraq selektoru dəyişin (məsələn, h1, ul).
  • Atribut. Yuxarıdakı şəkildə color atributdur. Bu atribut HTML elementinin rəngini dəyişmək üçün istifadə edilir.
  • Atributun qiyməti. Atributun adından sonra qoşa nöqtə (:) qoyulur və onun qiyməti yazılır. Məsələn, yuxarıdakı kodda color atributunun qiyməti red yazılıb. Əgər red əvəzinə green yazsaq, onda HTML sənədindəki bütün paraqrafların rəngi yaşıl olacaq. Özünüz yoxlaya bilərsiniz.

CSS kodu yazarkən aşağıdakı qaydalara riayət etmək lazımdır:

  • Selektordan başqa, digər qaydalar fiqurlu mötərizə ( {} ) içərisində yerləşdirilməlidir
  • Atribut və onun qiyməti bir-birindən qoşa nöqtə (:) ilə ayrılmalıdır
  • Hər bir qaydadan sonra nöqtəli vergül (;) yazılmalıdır

Bir selektora, həmçinin bir neçə atribut təyin edə bilərik:

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

Bir neçə elementin seçilməsi

Həmçinin bir neçə elementə eyni CSS qayda(ları) tətbiq etmək mümkündür:

p,
li,
h1 {
  color: red;
}

Müxtəlif növ selektorlar

Çoxlu sayda müxtəlif növ selektorlar mövcuddur. Aşağıda ən çox istifadə edilən selektor tipləri göstərilib:

Selektorun adı Əməliyyat Nümunə
Element selektoru (bəzən teq selektoru adlandırılır) HTML elementlərini seçir

<p>

HTML sənədində <p> elementini seçir
ID selektor HTML sənədində ID təyin edilmiş elementi seçir. Veb səhifədə hər bir ID-nin qiyməti unikal olmalıdır

#my-id

<p id="my-id"> və ya <a id="my-id"> seçir
Klass selektoru HTML sənədində klass təyin edilmiş elementləri seçir. Bir klass çoxlu sayda elementə təyin edilə bilər

.my-class

<p class="my-class"> və <a class="my-class"> seçir
Atribut selektoru HTML sənədində atribut təyin edilmiş elementi seçir

img[src]

<img> deyil, <img src="myimage.png"> seçir
Psevdo-klass selektoru    

Şriftlər və mətn

CSS-in əsasları ilə tanış olduq. İndi style.css faylına daha çox qaydalar əlavə edək və veb səhifənin görünüşünü daha da yaxşılaşdıraq.

Google Fonts servisinə daxil oluruq, axtarış xanasına Open Sans yazıb Enter düyməsinə sıxırıq:

Google Fonts servisi

Open Sans şriftini seçirik. Səhifəni aşağıya doğru aparırıq və şrift üçün stilləri seçirik:

Open Sans şrifti üçün stilləri seçirik

Brauzerin yuxarı sağ küncündə yerləşən ikonkaya (View selected families) sıxırıq. Açılan paneldə seçilmiş şrift(lər)in siyahısını, həmçinin şrifti HTML sənədə əlavə etmək üçün kodu görürük:

Şrifti HTML sənədə əlavə etmək üçün kod

Həmin kodu <head> elementinin içərisinə yerləşdiririk. Hazırda text.html faylının tərkibi aşağıdakı kimidir:

<!DOCTYPE html>
<html lang="az">
<head>
    <meta charset="utf-8">
    <title>Verilənlərin tipi</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600&display=swap" rel="stylesheet">
    <link href="styles/style.css" rel="stylesheet" type="text/css">
</head>

<body>
    <h1>Verilənlərin tipi</h1>
    <p>Müəllif: Emil Hüseynov</p>

    <h2>Məntiqi tip (Boolean)</h2>
    <p>Ən sadə verilənlər tipidir. Bu tip ya true (doğru), ya da false (yalan) qiymətlərini ala bilər.</p>

    <h2>Sətir</h2>
    <p>PHP-də sətir (string tipi) baytlar ardıcıllığıdır. Sətrin uzunluğu 2 QB-dan çox ola bilməz.</p>

    <h3>Tək dırnaq işarəsi</h3>
    <p>Tək dırnaq işarəsi içərisində yazılmış sətirdə (məsələn, 'string') dəyişənlər və idarəedici simvollar yazıldığı
        kimi görsənir.</p>
</body>
</html>

style.css faylında yazılmış əvvəlki CSS qaydalarını silirik. Bu, öyrənmək üçün yaxşı idi, ancaq qırmızı rəngli mətn heç də yaxşı görsənmir.

style.css faylında <body> elementi üçün font-family atributunun köməyilə şrifti təyin edirik:

body {
    font-family: 'Open Sans', sans-serif; // Google Fonts şriftinin adı
}

Yuxarıdakı qayda bütün səhifə üçün şrifti təyin edir, çünki kontent məhz <body> elementinin içərisində yerləşdirilir.

Nəhayət, başlıq teqləri (<h1>, <h2>, <h3>) və paraqraf elementi (<p>) üçün şriftin ölçüsünü təyin edirik. Beləliklə, style.css faylının tərkibi aşağıdakı kimi olacaq:

body {
    font-family: 'Open Sans', sans-serif;
}

h1 {
    font-size: 60px;
    text-align: center;
}

h2 {
    font-size: 35px;
}

h3 {
    font-size: 25px;
}

p {
    font-size: 14px;
    line-height: 1.5;
}

text.html faylını brauzerdə açırıq:

text.html faylının yeni tərtibatı

Bloklar, bloklar və yenə də bloklar

Veb səhifədəki HTML elementlərinin bir çoxunu bir-birlərinin üstündə yerləşən blok kimi təsəvvür edə bilərik:

blok modeli

CSS maket əsasən blok modelinə (box model) əsaslanır. Veb səhifədə müəyyən yer tutan blokların hər biri aşağıdakı atributlara malikdirlər:

  • padding atributu - kontentin ətrafında olan boşluğu təyin edir
  • border atributu - padding atributunun köməyilə təyin edilən boşluqdan sonra çərçivəni təyin edir
  • margin atributu - border atributunun köməyilə təyin edilən çərçivənin ətrafında olan boşluğu təyin edir

blok modeli

İstənilən brauzerin tərtibatçı alətində tamamilə eyni sxemi görmək mümkündür. Məsələn, Chrome brauzerində elementin blok modeli aşağıdakı kimi göstərilir:

CSS maket

Biz, həmçinin aşağıdakı atributlardan istifadə edəcəyik:

  • width - elementin enini təyin edir
  • background-color - elementin fon rəngini təyin edir
  • color - mətnin rəngini təyin edir
  • text-shadow - mətndəki hərflərə kölgə effektini təyin edir

Gəlin səhifəmizə daha çox CSS kodu əlavə edək.

Səhifənin fon rəngini dəyişirik

html {
    background-color: #00539F;
}

Bu qayda bütün səhifənin fon rəngini təyin edir.

<body> elementinə stil əlavə edirik

body {
    width: 600px;
    margin: 0 auto;
    background-color: #ff9500;
    padding: 0 20px 20px 20px;
    border: 5px solid black;
}

Göründüyü kimi, <body> elementi üçün bir neçə atribut təyin edilib. Gəlin onların hər birinə bir-bir nəzər salaq:

  • width: 600px; Bu, <body> elementinin enini 600 piksel təyin edir
  • margin: 0 auto; Bu atribut <body> elementini səhifənin mərkəzində yerləşdirir, elementdən kənara doğru yuxarı və aşağı hissələrdən boşluqlar ləğv edilib
  • background-color: #FF9500; Bu, <body> elementinin fon rəngini təyin edir
  • padding: 0 20px 20px 20px; Bu, <body> elementinin daxilində yerləşən kontentin ətrafında dörd tərəfdən boşluq təyin edir. Yuxarı hissə üçün boşluq təyin edilməyib, sol, aşağı və sağ hissələrdən isə 20 piksel boşluq saxlanılır 
  • border: 5px solid black; Bu, <body> elementi üçün dörd tərəfdən 5 piksel qalınlığında qara rəngli çərçivə təyin edir

Səhifənin əsas başlıq teqinin stilini təyin edirik

h1 {
    margin: 0;
    padding: 20px 0;
    color: #00539F;
    text-shadow: 3px 3px 1px black;
    font-size: 60px;
    text-align: center;
}

Artıq margin, padding, color, text-shadow atributları ilə tanış olmuşuq.

font-size: 60px - Bu, şriftin ölçüsü 60 piksel təyin edir

text-align: center - Başlıq teqini mərkəzdə yerləşdirir

Yekun

Əgər hər şeyi düz etmisinizsə, nəticə aşağıdakı kimi olmalıdır:

Dərsin kodlarını github-dan yükləyə bilərsiniz.

1

Şərh yazmaq üçün hesabınıza daxil olun.