Mühazirə №6-10 css mövzunun məqsədi


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



Yüklə 1,45 Mb.
səhifə2/3
tarix18.05.2023
ölçüsü1,45 Mb.
#116554
növüMühazirə
1   2   3
CSS

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:
  • [background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]
  • 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.
  • background: #FFCC66 url("butterfly.gif") no-repeat;
  • CSS də şriftlər
  • Şrift ailəsi- font-family xüsusiyyəti
  • 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.
1   2   3




Verilənlər bazası müəlliflik hüququ ilə müdafiə olunur ©azkurs.org 2024
rəhbərliyinə müraciət

gir | qeydiyyatdan keç
    Ana səhifə


yükləyin