CSS ilə tanışlıq

1. CSS-nin yaranması

Aydın oldu ki, brauzer yalnız elmi məqsədlərlə deyil, həm də əyləncə məqsədilə istifadə olunur. Elə bu səbəbdən videoya, animasiyalara, rənglərə, səslərə, şəffaflığa və s. ehtiyac yarandı.

Əvvəlcə bunun üçün çoxlu sayda tag əlavə etmək istəyirdilər, ancaq tezliklə başa düşdülər ki, yeni tag-lar yüzlərlə olacaq və HTML sənədləri ilə işi çox çətinləşdirəcək. Buna görə də "sənədin rənglənməsi"ni (bəzək) onun məzmunundan ayırmaq fikri ortaya çıxdı. Beləliklə CSS yarandı.

Cascading Style Sheets (CSS) və ya kaskadlı üslub cədvəlləri, veb inkişafın əsas komponentlərindən biridir və veb səhifələrin vizual tərtibatından məsuldur.

CSS — bu xassələrin toplusudur, hər birinin adı və dəyəri var. Veb-tərtibatçı bu xassələri təyin edir, brauzer isə onların göstərilməsinə cavabdehdir. Bu cür xassələri demək olar ki, hər bir element üçün təyin etmək olar. CSS üslublarına bir nümunə:

Bu cür CSS parametrləri (onlara CSS-xassələr də deyilir) yüzdən azdır. Ancaq onlar bir-biri ilə ağıllı şəkildə qarşılıqlı təsir göstərə bilər və çox gözlənilməz effektlər yarada bilər. CodeGym-də siz onlarla işləməyi və səhifədə əsl möcüzələr yaratmağı öyrənəcəksiniz 🦄.

2. Elementlərin stilləri

Hər bir HTML-element üçün öz CSS-stilini atribut style vasitəsilə təyin etmək olar.

Nümunə:

      
<p style="color: blue; font-size: 16px;">Bu daxili stil nümunəsidir.</p>
      
    

Bu stil brauzerə bildirir ki, paraqrafın içindəki mətn mavi rəngdə göstərilməlidir və şriftin ölçüsü hündürlükdə 16 piksel olmalıdır.

Əslində burada iki «stil» var:

• color = blue
• font-size = 16px

Sadəcə onlar bir sətrdə yazılıb və nöqtəli vergül ilə ayrılıb.

Həmçinin, məsələn, siz qara düzbucaqlı yarada və onun içində ağ rəngdə mətn yaza bilərsiniz. Bu kod belə görünəcək:

      
<div style="width:100%; height:200px;color:white;background-color:black"> 
Ağ mətn qara fonun üstündə 
</div>
      
    

3. Rənglər

Daha ətraflı CSS stilləri haqqında HTML-i öyrənərkən danışacağıq. Amma maraqlı olsun deyə, gəlin bu gün rənglər ilə tanış olaq. CSS ilə kompüterin göstərə biləcəyi hər hansı bir rəngi, hətta daha artığını təyin edə bilərsiniz.

CSS-də rənglər veb səhifələrin stilizasiyası üçün vacib bir hissədir. Onlar vizual olaraq cəlbedici və intuitiv interfeyslər yaratmağa imkan verir. CSS-də rənglərin təyin edilməsi üçün bir neçə üsul mövcuddur və hər birinin öz xüsusiyyətləri və istifadəsi var.

1. Rəng adları (Color Names)

CSS 140-dan çox standart rəng adlarını dəstəkləyir. Bu, rəngi təyin etmək üçün sadə və aydın bir yoldur.

      
<div style="color: lightblue;"> Açıq mavi mətn rəngi</div>
      
    

Bəzi yayılmış rəng adları:

2. Onaltılıq dəyərlər (Hexadecimal Values)

Rəngləri təyin etməyin başqa bir yolu da onaltılıq kodlaşıdrma üsuludur. Bu üsul 16 milyon rəng çalarını təyin etməyə imkan verir — bu qədər rəng üçün ad tapmaq mümkün deyil, bu səbəbdən rəqəmlərdən istifadə olunur.

Onaltılıq dəyərlər # simvolu ilə başlayır və sonra altı rəqəm və ya hərf gəlir, bunlar müvafiq olaraq qırmızı, yaşıl və mavi rənglərin (RRGGBB) intensivliyini ifadə edir.

      
<div style="color: #ff0000; background-color: #00ff00;"> Qırmızı yaşıl fonda </div>
      
    

Bu üsul rənglərin CSS nümunələrində tez-tez qarşınıza çıxacaq. Bu mövzuya CSS-i daha ətraflı öyrənərkən qayıdacağıq.