HTML sənədlərini yaradarkən veb-dizaynerlər müxtəlif mürəkkəb məsələlərlə qarşılaşırlar:
HTML sənədlərini yaradarkən veb-dizaynerlər müxtəlif mürəkkəb məsələlərlə qarşılaşırlar:
müəyyən abzas daxilində şifrələrin dəyişdirilməsi;
mətnin və ya təsvirin sənədin hər hansı bir yerində yerləşdirilməsi;
mətnin və ya fonun rənginin dəyişdirilməsi;
müxtəlif verilənlər cədvəllərinin format edilməsi və s.
CSS necə işləyir?
Tutaq ki bizə HTML səhifəsində arxa fonun rənginin dəyişməsi tələb olunur.Bunun üçün biz
yazmamız lazımdı.CSS –də bunu etmək üçün isə
body {background-color: #FF0000;}
yazırıq.Nümunədən göründüyü kimi sintaksislər demək olar ki bir birinə çox yaxındı.Aşağıdakı şəkildə CSS –in fundomental modeli verilmişdir.
CSS kodları harda yerləşdirmək lazımdır?
HTML sənədinə CSS-in qoşulmasının 3 yolu var.Biz daha çox 3-cü modelin üzərində dayanacağıq.
1.İnline model –style atributu vasitəsi ilə HTML sənəddə teqlərə stillər verilir.Məsələn
Example
This is a red page
This is a red page
Elementdə HTML-sənədin bütün tərkibi yerləşir. Beləliklə, bütün səhifənin fonun rənginin dəyişikliyi üçün background-color xüsusiyyəti elementinə tətbiq etmək lazımdır . Siz həmçinin başqa elementlərədə bu xüsusiyyəti tətbiq edə bilərsiniz, məsələn – başlıqlara və mətnə. Növbəti nümunədə müxtəlif fonun rəngləri və
elementlərinə tətbiq edilir .
Burada diqqət olunmalı məsələ biz h1 elementinə 2 stil xüsusiyyəti verdik.Və bunların arasına ; işarəsi qoyulur.
Fon təsvirləri — background-image xüsusiyyəti
background-image CSS-xüsusiyyəti fon təsvirinin yerləşdirməsi üçün istifadə olunur.
Web-səhifənin fon təsviri kimi hər hansı şəkili yerləşdirməsi üçün sadəcə teqində background-image xüsusiyyətini tətbiq edin və şəkilin yerini göstərin. Məsələn
Nümunədə əsas ona diqqət edin ki url (” butterfly.gif”) ilə biz fayl olan yeri göstəririk. Bu yazı bildirir ki, şəkil stillərin cədvəli ilə eyni qovluqdadır . Burada əlbəttə ki digər qovluqdakı şəkil fayllarınada, istinad edə bilərik məsələn, url (“. ./images/butterfly.gif”), və ya Internet-də olan fayllara, faylın tam ünvanını göstərərək: url (” http://www.html.net/butterfly.gif“).
Fon təsvirinin təkrarlanması — background-repeat xüsusiyyəti
Əvvəlki nümunəni sinaqdan keçirsəz görəcəksiz ki fondakı şəkil bütün səhifəni tutmaq üçün horizontal və vertikal olaraq təkrarlanır.Bunu edən background-repeat xüsusiyyətidir.Onun mümkün dəyərləri repeat-x,repeat-y,repeat və no-repeat
repeat-x şəkil horizontal olaraq təkrarlanır
repeat-y şəkil vertikal olaraq təkrarlanır
repeat şəkil həm vertikal həmdə horizontal olaraq təkrarlanır(susmaya görə bu dəyər aktiv olur)
no-repeat şəkil təkrarlanmır
Fon təsvirinin bloklanması– background-attachment xüsusiyyəti
background-attachment xüsusiyyəti səhifənin firladılması (scrolling) zamanı fon şəkilin blok edilməsini müəyyən edir.Bu xüsusiyyətin iki dəyəri var scroll və fixed
Fon şəkilinin yerləşməsi — background-position xüsusiyyəti
Susmaya görə fon şəkili ekranın sol yuxarı küncündə yerləşdirilir. background-position xüsusiyyəti bu susmaya görə mənanı dəyişdirməyə icazə verir, və fon şəkili ekranın istənilən yerində yerləşdirməyə kömək edir. background-position xüsusiyyətinin dəyərini çox formada vermək olar. Məsələn, ‘100px 200px’ dəyəri fon şəkili sol yuxari küncdə soldan 100px və yuxarıdan 200px məsafədə yerləşdirilir.
Koordinatları faiz ilə, piksellər, santimetrlər, və ya top, bottom, center, left və right sözlərindən istifadə edərək təqdim etmək olar. Məsələn
Qısaldılmış yazı background xüsusiyyəti
Background-un köməyi ilə siz bir neçə xüsusiyyəti sıxa və ixtisar edilmiş halda yaza bilərsiniz.Bu sizin stil cədvəllərin oxunmasını yüngülləşdirir.Məsələn, bu sətirlərə baxın:
Ardıcıl göstərilməli xüsusiyyətlərdən hansısa göstərilmirsə o hal ona susmaya görə olan dəyər mənimsədilir.Məsələn aşağıdakı nümünədə background-attachment və background-position təyin edilməyib.
Bu xüsusiyyət səhifədəki mətn məlumatının təsviri vaxtı istifadə ediləcək prioritet şriftlərin verilməsi üçün istifadə edilir.Mətn istifadəçinin brauzerində nümayiş edilərkən ilk sadalanan şriftdə təsvir edilə bilmirsə(yəni istifadəçinin komoyuterində verilən şrift yoxdursa) onda növbəti şrift götürülür.Şriftlər verilərkən ad olaraq şrift ailəsinin(family name) vəya şrift nəslinin adı(generic family) verilir.
Family-name-ə nümunə olaraq Arial,Times New Roman,Tahoma və s.-ni göstərmək olar
Şriftlər verilərkən saytın hansı formada təsvir ediləcəyini düşünüb əvvəlcə daha çox tərcih edilən şrift sonra isə növbə ilə daha aşağı prioritetli şriftlər daxil edilir.Ən sonda isə generic family name-in verilməsi məsləhət görülür.Belə ki əgər daxil edilən şriftlər istifadəçinin kompyuterində olmasa həmin ailəyə uyğun digər şriftlə təsvir ediləcək.Məsələn
Nümunədən göründüyü kimi h1 elementi üçün şrift olaraq arial olmazsa verdana oda olmazsa sans-serif ailəsindən şrift təyin edilmişdir.Diqqət yetirilməli məsələ Times New Roman şrifti cüt dirnaq arasında təqdim edilmişdir.Buna səbəb şriftin adının arasındakı boşluqlardır.
Şriftin stili-font-style xüsusiyyəti
Bu xüsusiyyət şriftin stilini təyin edir.
Dəyərləri normal, italic, oblique,
Şriftin variantı-font-variant xüsusiyyəti
Font-variant xüsusiyyəti vasitəsi ilə normal və ya small-caps variantları arasında seçim edilir.small-caps variantı ilə təyin edilən mətndə kiçik hərflər yuxarı reqistrdə amma daha kiçik ölçüdə verilir.
