Təcrübə 2

1. Faylı açın şablon. html. Yeni adla yadda saxlayın kvadrat. html qovluğunda public_html.

2. Teqlər arasında yazın yeni başlıq "Ev sahələri".

3. Məzmuna fayldan mətni kopyalayın Ev sahələri.txt qovluqdan html_ ccs_2 .

4. Eyni faylda üslubları yazacağıq üslub. css, əvvəlki dərsdə yaratdığımız. Buna görə də faylda kvadrat. html teqlər arasına daxil etməklə bu üslub cədvəlinə keçid edin Və(Şəkil 12)

Şəkil 12

5. Başlıqları etiketlə formatlayın

və hər başlığa öz sinfini təyin edin (Şəkil 13).

Şəkil 13

Sizin faylınız kvadrat. html indi belə görünməlidir (Şəkil 14).

Şəkil 14

6. Stil cədvəlində üslub. css aşağıdakı girişi yaradın (Şəkil 15)

Şəkil 15

7. Brauzerinizdə veb səhifəni yoxlayın. Nəticə Şəkil 16-dadır.

Şəkil 16

8. Yəqin ki, siz bunu bizdə müşahidə etmisiniz yeni giriş Başlıq üslubları təkrarlanan dizaynlara malikdir font-family:Verdana; mətni düzün: sola; şrift ölçüsü: 14 pt. Belə konstruksiyalar tətbiq olunduğu seçiciləri qruplaşdırmaqla bir dəfə yazıla bilər. Bunu etmək üçün seçiciləri vergüllə ayırmalı və sonra əyri mötərizədə yazmalısınız ümumi xassələri. Sonra başlıqlar üçün üslub cədvəlimiz belə görünəcək (Şəkil 17):

Şəkil 17

Təcrübə 3

Fayldakı hər başlığın altında kvadrat. html mətn var. Müxtəlif siniflərdən istifadə edərək paraqrafları formatlayın. Fərqli rənglər, düzülmə və şrift şriftlərindən istifadə edin. Sinif adları unikal olmalıdır. Fərqli seçicilər üçün eyni adlardan istifadə etmək məsləhət görülmür. Biri mümkün variantlarŞəkil 18-də:

Şəkil 18

5. Müəyyən element üçün ID stili

CSS dərslərinə id üslubları haqqında öyrənmə daxildir.

İstənilən elementə identifikator təyin edilə bilər id, və sonra istifadə edərək bu elementi hansısa üsluba uyğunlaşdırın id.

Misal üçün:

Stil cədvəli faylındakı giriş aşağıdakı kimi olacaq

# test { rəng:#00 ffff}

İndi bu üslubu html sənədindəki istənilən elementə uyğunlaşdıra bilərsiniz:

...

...

Bu nümunədə test sözü üslubun adıdır. Adı hər hansı bir şey ola bilər Latın hərfləri, lakin unikal olmalıdır, yəni. stil cədvəlindəki heç bir element artıq bu ada malik olmamalıdır.

Təcrübə 4

Gəlin saytımızın gələcək menyusu üçün şablon hazırlayaq.

1. Faylı açın şablon. html və onu yeni adla yadda saxlayın menyu. html qovluğunda public_html.

2. Fayl səhifəsinin məzmununa menyu. html fayldan mətn daxil edin menyu. mətn qovluqdan html_ css_2 .

3. HTML teqlərindən istifadə edərək faylı aşağıdakı kimi formatlayın:

• "Layihə kateqoriyaları", "Memarlıq layihələrinin kataloqu" və "Ev sahələri" başlıqları üçün etiketdən istifadə edin

  ;

• "Layihə Kateqoriyaları" siyahısı üçün nömrələnmiş siyahıdan istifadə edin
  ;
  1. “Memarlıq layihələrinin kataloqu” və “Ev sahəsi” siyahıları üçün istifadə edin markerli siyahı

     4. Veb səhifənin yuxarı hissəsində loqo daxil edin (fayl logo_myhouse.gif). Nəticə Şəkil 19-a uyğun olmalıdır.

     

     Şəkil 19

     5. Bu menyu üçün adı altında ayrıca stil cədvəli hazırlayacağıq üslub_ menyu. css. Faylı əlaqələndirin menyu. html və stil cədvəli üslub_ menyu. css giriş daxil etməklə etiketlər arasında Və faylda menyu. html.

     6. Boş sənəd yaradın və adı altında saxlayın üslub_ menyu.css qovluğunuzda.

     7. Başlıq və nömrələnmiş siyahıdan ibarət “Layihə Kateqoriyaları” qrupu və başlığın özü və markerlə işarələnmiş siyahıdan ibarət “Memarlıq Layihələri Kataloqu” qrupu üçün biz id üslubunun adından istifadə edəcəyik. mavi. Bunlar. kod belə görünəcək (Şəkil 20):

     

     Şəkil 20

     8. Faylda üslub_ menyu. css Bu elementlərin üslubu Tahoma şriftində tünd mavi olacaq (Şəkil 21):

     Şəkil 21

     9. Başlıq və markerli siyahıdan ibarət “Ev Sahələri” qrupu üçün biz id stilinin adından istifadə edəcəyik. qəhvəyi. Bunlar. kod belə görünəcək (Şəkil 22):

     

     Şəkil 22

     10. Faylda üslub_ menyu. css gəlin bu elementləri tərtib edək Qəhvəyi, Times şriftində (Şəkil 23):

     Şəkil 23

     11. Və menu.html faylına başqa fon rəngi əlavə edin (Şəkil 24)

     Şəkil 24

     12. Nəticədə aşağıdakı veb səhifəni alırıq (Şəkil 25)

     

     Şəkil 25

     Bu CSS təlimatını tamamlamaq nəticəsində sizdə aşağıdakı fayllar yaradılmalıdır:

     • üslub. css
       
     • üslub_ menyu. css
     • kvadrat. html
       
     • menyu. html
       

     1. CSS Cascading Style Sheets nədir?

     Salam əziz oxucularım. Mən saytın CSS kaskad üslub cədvəlləri ilə işləməyə həsr olunmuş yeni hissəsini açmağa qərar verdim.

     Belə ki, kaskad üslub vərəqləri css nədir?

     css(İngilis dili) Kaskad üslub cədvəlləri — kaskad üslub vərəqləri) işarələmə dili ilə yazılmış sənədin görünüşünü təsvir etmək üçün dildir.
     Başlayanlar üçün başa düşməyi asanlaşdırmaq üçün, css-in kaskad üslub vərəqləri html veb sayt səhifələri üçün gözəl, asan redaktə edilə bilən dizaynlar yaratmaq üçün nəzərdə tutulmuşdur.

     Kaskad üslub vərəqləri ilk dəfə ötən əsrin 90-cı illərində istifadə edilmişdir. Amma əvvəlcə indiki qədər məşhur deyildilər, çünki müxtəlif brauzerlər CSS-dən istifadə edən HTML səhifələri fərqli şəkildə qəbul edilir və göstərilirdi.

     Bir müddət sonra sayt qurucularının işini asanlaşdırmaq üçün brauzerlər eyni standartlara "uyğunlaşdırılmağa" başladı. Bu gün İnternet səhifələrinə baxmaq üçün istifadə edilən demək olar ki, bütün proqramlar CSS-nin kaskad stil cədvəllərindən istifadə edən saytları eyni dərəcədə təkrarlayır.

     Müşahidələrim!!!Şəxsi müşahidələrimə görə, belə son versiyalar Opera, Mazilla ForeFox, Maxthon, Google Chrome və kimi brauzerlər internet Explorer Kaskad üslub vərəqlərindən istifadə edən səhifələr demək olar ki, eyni şəkildə göstərilir, lakin brauzerlər bunu etmirsə son nəsillər, onda veb-sayt səhifələrinin özləri fərqli görünəcək. Saytınızın demək olar ki, bütün brauzerlərdə eyni görünməsi üçün var xüsusi texnologiyalar kaskad üslub vərəqlərinin qurulması.

     Beləliklə, yaratmağa başlayaq yeni masaüslubları seçin və onu sənədimizə qoşun.

     2. Kaskad css üslub cədvəlini necə yaratmaq olar?

     Məqalənin bu hissəsində biz ən sadə html səhifəsinə kaskad üslub cədvəli yaradacağıq və birləşdirəcəyik.

     Beləliklə, bunu edək:

     1. Biz html səhifəmizi və kaskad stil cədvəlini ehtiva edən bir qovluq yaradırıq.
     Qoy qovluğum "css" adlansın

     2. Biz yaradırıq sadə html səhifə (index.html). Bunun necə edildiyini oxuya bilərsiniz.

     3. İndi sadə birini yaradaq Mətn sənədi(oxşar html yaratmaq pages), sadəcə olaraq style.css adlandırın.

     Nəticədə bunu almalısınız:

     Budur, css üslublarını ehtiva edən fayl hazırdır.

     İndi isə yaradılmış stil cədvəlini index.html faylına birləşdirək.

     3. Kaskad stil cədvəlini css ilə necə bağlamaq olar?

     Beləliklə, stil cədvəlini html səhifəsinə qoşmaq üçün index.html faylında teqdə etiket əlavə edin:

     Burada atributda href="style.css" css üslublu fayla gedən yol müəyyən edilir. Bu halda css və index.html faylı eyni qovluqdadır.

     Məsələn, əgər bizim index.html faylımızda aşağıdakı kod var idi:

     Vacib!!!

     Yeri gəlmişkən, index.html faylını Notepad-da saxlayarkən kodlaşdırmanı 1251 (ANSI-Kiril) olaraq təyin etməyi unutmayın. Çünki bunu etməsəniz və faylı başqa kodlaşdırmada saxlasanız, brauzer sizə mətnlər əvəzinə “doodle”lar göstərəcək.

     

     Hər şey düzgün aparılıbsa və saxlanılıbsa, brauzerdə aşağıdakıları görəcəksiniz:

     Hamısı budur, index.html faylı yaradıldı və css stil cədvəlləri də ona qoşuldu.

     İndi css stil cədvəllərinin işini yoxlayaq. Beləliklə, ən sadə şeydən başlayaq və etiketi təyin edək yeni üslub , fonun müəyyən edilməsi html şəkli

     səhifələr, səhifə fonunun rəngi (əgər şəkillər səhifə ziyarətçisinin brauzerində deaktiv edilibsə), yuxarı və aşağı kənarlar, standart şrift, onun ölçüsü və rəngi.

     Fon şəklini təyin etmək üçün onu fayllarımız olan qovluqda qeyd etməlisiniz.

     Magento mühərrikindən istifadə edərək peşəkar onlayn mağazalar yaratmağı öyrənməyi planlaşdırırsınızsa, bunu mənim müəllifin video kursunun köməyi ilə etmək ən asandır.

     Stil vərəqləri nə üçündür?

     Siz əvvəlki səhifələri yaratdınız, çünki onlar kaskad üslub cədvəlləri və ya CSS (Cascading Style Sheets) gəlməmişdən əvvəl yaradılmışdır.

     CSS-in yaranmasından əvvəl veb sayt tərtibatçılarının qarşılaşdıqları əsas problemlər:
     Yerləşdirmə problemi (səhifə düzümü). Cədvəllər bunun üçün istifadə olunmağa başlasa da (onlar əvvəlcə bunun üçün nəzərdə tutulmayıb), bütün problemləri həll etmədilər. Aşağıdakıları etmək mümkün deyil: - Ayarlana bilməz sabit ölçülər
     bəzi blok. Məsələn, mətn bloku daşdıqda (cədvəldə olsa belə) hərəkət edəcək.
     - Siz səhifədəki blok mövqeyi üçün sabit koordinatlar təyin edə bilməzsiniz.

     İkinci problem ondan ibarət idi ki, mən hər dəfə səhifələrdə şriftin ölçüsünü və rəngini, cədvəl hüceyrələrinin xüsusiyyətlərini və s. Bu, səhifənin ölçüsünü xeyli artırdı, yəni daha yavaş yüklənir. Rəng və ya şrift ölçüsünü dəyişdirmək istəsəniz, bütün səhifələri redaktə etməli olacaqsınız.

     Üçüncü problem bütün brauzerlərdə fərdi parametrlərin olması idi. Məsələn, brauzer şrifti böyüdə bilər ki, bu da bütün səhifənin təhrif olunmasına səbəb olur.

     İLƏ CSS istifadə edərək bu problemlər həll edilə bilər.

     CSS-dən istifadə yolları

     Stil cədvəllərindən istifadə etməyin üç yolu var:

     Daxili üslub vərəqləri(Inline Style Sheets) - xüsusi atributdan istifadə edərək, onlar birbaşa HTML teqlərinə yerləşdirilir.
     Nümunə HTML:

     Nümunə CSS:

     Gördüyünüz kimi, Inline Style Sheet kodu HTML-dən daha çox olduğu ortaya çıxdı. Buna görə də, ISS yalnız müəyyən bir elementə öz şəxsi üslubunuzu vermək lazımdırsa istifadə edilməlidir.
     Əlavə stil atributundan istifadə edərək istənilən teqdə bizə lazım olan stil parametrlərini təyin edə bilərik. Bu, ən asan yoldur və yalnız bir etiket daxilində işləyir. Ancaq təsəvvür edin ki, fayl ölçüsü nə qədər böyüyəcək və hər bir teq üçün stil müəyyən etsək, onu düzəltmək nə qədər əlverişsiz olacaq.

     Qlobal üslub vərəqləri(Qlobal Stil Vərəqləri) - bütün sənəddə elementlərin üslubunu təyin edin.
     Bunun üçün etiket istifadə olunur. Bu konteyner teqində biz selektordan (qaydanın tətbiq ediləcəyi HTML teqinin adı) və onun tərifindən (birbaşa formatlaşdırıcılar dəsti) qıvrımlı mötərizələrdən ibarət istənilən sayda CSS qaydalarını müəyyən etməkdə sərbəstik. . Yuxarıdakı misal üçün sintaksis belədir:

     ... ...

     CSS və HTML-ni əlaqələndirməyin bu üsulu yerləşdirmə adlanır. Saytın yalnız bir səhifəsi üçün müəyyən bir formatlaşdırma qaydaları dəsti təyin etmək qərarına gəldiyiniz hallarda istifadə etmək tövsiyə olunur və planınıza görə, bütün digər səhifələr fərqli görünməlidir.

     Eyni zamanda bir neçə sayt səhifəsinə üslubların təyin edilməsi

     CSS və HTML-ni əlaqələndirmək üçün daxil etmə və yerləşdirməyə əlavə olaraq stil cədvəlinin idxalı və əlaqələndirilməsi istifadə olunur. Bunlar, əlbəttə ki, eyni saytın çoxsaylı (və ya hətta bütün) səhifələrinə ardıcıl görünüş və hisslər bəxş etməyin ən yaxşı yollarıdır. Bu halda, bütün üslub cədvəli bir faylda saxlanılır (fayl uzantısı standart olmalıdır - .css).

     Belə bir faylın məzmununa bir nümunə (məsələn, my.css):

     Bədən ( şrift ailəsi: "Times New Roman", serif; şrift ölçüsü: 12pt; rəng: tünd yaşıl; ) h1 ( şrift ailəsi: Arial, sans-serif; şrift ölçüsü: 16pt; rəng: yaşıl; şrift-ağırlığı : qalın; ) h2 ( şrift ailəsi: Arial, sans-serif; şrift ölçüsü: 14pt; rəng: yaşıl sarı; şrift-ağırlıq: qalın; şrift-stil: kursiv; )

     Qeyd: etiketlər fayl daxilində heç bir stil cədvəlindən istifadə edilmir - .css uzantısı brauzerə faylın üslub cədvəli olduğunu aydın şəkildə göstərir. Belə fayllardan biri eyni anda bir neçə səhifə ilə əlaqələndirilə bilər (və ya eyni anda bir neçə səhifəyə idxal olunur). Əlaqələndirmək üçün html faylında teqlər arasında istənilən yerə yazmalısınız Və aşağıdakı xətt:

     ... ...

     Bu sətir əlaqələndirilən faylın stil cədvəli (rel="stylesheet") olduğunu, bu faylın formatının .css (type="text/css") olduğunu və html faylı ilə eyni kataloqda yerləşdiyini göstərir, və ya fərqli URL-yə malikdir (href="my.css"). Aydındır ki, biz bu sətri html fayllarımızın hər hansı birinə (və ya hamısına) yaza bilərik. Beləliklə, bir neçə səhifə üçün bir üslub dizaynı təyin ediləcəkdir.

     Nəzərə alın ki, daxili üslublar (stil atributundan istifadə edərək fərdi səhifə elementləri üçün müəyyən edilmiş üslublar) və daxil edilmiş üslublar (üslublar<голове>konteyner etiketinin içərisindəki səhifələr ...

     İdxal edilmiş stil cədvəlinin ünvanına əlavə olaraq, konteyner etiketinə yaza bilərsiniz ... ...

     Jurnalistin sualı

     Müsahibin cavabı

     ...
     
     

     Yuxarıdakı misalda jurnalistin sualları boz Arial şriftində, qalın, kursiv, 10 nöqtə, səhifənin sol kənarından 15 piksel aralığında boşluqla göstəriləcək. Cavablar 12 nöqtəli qara Times New Roman şriftində göstəriləcək. Sinif parametrini birbaşa html kodunda müxtəlif paraqraf siniflərinə təyin etməyi unutmamaq vacibdir. İstənilən səhifə elementləri üçün istənilən sayda sinif yarada bilərsiniz.

     ID seçicisi

     Başqa bir hadisəni götürək. Tutaq ki, siz gələcəkdə JavaScript proqramlarından daxil olmağı planlaşdırdığınız səhifədə bəzi unikal elementlər yaratmaq istəyirsiniz. Ola bilsin ki, bu elementlər digər səhifələrdə də təkrarlanacaq və siz CSS-dən istifadə edərək onlara ardıcıl görünüş vermək istərdiniz. Bu halda, kaskad stil cədvəlləri unikal elementlərə identifikatorlar (id) təyin etmək imkanına malikdir. İdentifikatorlardan ən çox istifadə HTML 4.0 spesifikasiyasında tam və ya məhdud CSS dəstəyinə malik olan forma elementləri üçündür (elementdən asılı olaraq). Bu cür elementlərə ID və CSS qaydalarının təyin edilməsi nümunəsi:

     ... ... ...

     Bu sahəyə daxil edilmiş mətn yaşıl rəngdə görünəcək:

     Bu sahəyə daxil edilmiş mətn qırmızı rəngdə görünəcək:

     ...
     
     

     Eynilə, unikal identifikatorlar istənilən sayda səhifə elementlərinə təyin edilə bilər. Bu, müxtəlif dinamik effektlər yaratmağa imkan verən JavaScript proqramından elementə daxil olmaq və istifadəçi girişinə cavab olaraq onun ekran tərzini dəyişmək üçün faydalı ola bilər.

     Kontekst seçiciləri

     Deyək ki, biz stil cədvəli yaratdıq, ona görə səhifədəki bütün birinci səviyyəli başlıqlar boz fonda qırmızı rəngdə, bütün abzaslar sarı fonda yaşıl rəngdə və etiketdən istifadə edərək vurğulananların hamısı göstərilir. Abzasların içərisində 1 söz - gümüşü fonda qara rəngdə. Stil cədvəli kodu, təxmin etdiyiniz kimi, belə görünür:

     H1 ( rəng: qırmızı; fon rəngi: boz; ) p ( rəng: yaşıl; fon rəngi: sarı; ) em ( rəng: qara; fon rəngi: gümüş; )

     Tutaq ki, biz də eyni teqdən istifadə edərək başlıqdakı bəzi sözləri vurğulamaq istəyirik , lakin başlıqda gümüşü fonda qara mətnin görünməsi bizi qane etmir. Başlıqdakı sözləri boz fonda tünd qırmızı rəngdə vurğulamaq istəyirik. Bunun üçün kontekst seçiciləri var. Bunun üçün üslub cədvəlinə əlavə edəcəyimiz qayda girişi belə görünəcək:

     H1 em ( rəng: #CC0000; fon rəngi: boz; )

     Bu kontekst seçicisindən istifadə edən səhifə koduna bir nümunə:

     ... ... ...

     Bu, birinci səviyyəli başlıqdır vurğulanan bir sözlə

     Və bu adi bir paraqrafdır vurğulanmış sözlərlə

     ...
     
     

     Bu gün üçün hamısı budur. Növbəti dəfə blok səhifə elementlərinin formatlaşdırılması qaydaları, elementlərin yerləşdirilməsi və CSS-dən istifadə etməklə həyata keçirilən digər maraqlı və faydalı funksiyalar haqqında danışacağıq.

     
     Stil cədvəlinin sənədə tətbiqi
     
     Stil Cədvəllərinin Sənədə Yerləşdirilməsi
     Ayrı bir sənəd parçası üçün üslubun təyin edilməsi
     Stil cədvəlinin idxalı
     
     Birdən çox xassələrin təyin edilməsi
     Seçicilərin qruplaşdırılması
     Stil vərəqinə şərh
     Stil xüsusiyyətləri
     fon xassələri
     Çərçivə elementləri
     Siyahı xüsusiyyətləri
     Mətn xüsusiyyətləri
     Stil müəyyən etməyi asanlaşdırmaq üçün xassələri qruplaşdırmaq
     Əmlak varisliyi
     Kontekst seçicilərindən istifadə
     Niyə Stil Vərəqləri Kaskad adlanır
     
     

     Üslub vərəqləri W3C tövsiyələri ilə təmin edilir və masaüstü nəşr sistemlərinə xas yanaşmalardan istifadə edərək Veb səhifələrin formatlaşdırılması üçün standart vasitədir. Microsoft Internet Explorer 3.0 stil cədvəllərini dəstəkləyən ilk brauzer idi. Netscape Navigator brauzeri 1997-ci ilin fevralında mövcud olan 4.0B2 (Beta 2) versiyasından bəri üslub cədvəllərini dəstəkləyir.

     W3C tövsiyələri haqqında ətraflı məlumatı aşağıdakı ünvanda əldə etmək olar: h ttp://www.w3.org/pub/WWW/TR/WD-cssl.html . W3C standartı "cascading style sheets level 1 (CSSI") terminindən istifadə edir.

     Birincisi, “stil vərəqləri” adının nə demək olduğunu aydınlaşdırmaq lazımdır. Müasir mətn redaktorlarının əksəriyyəti istifadəçiyə sənədi formatlaşdırmaq üçün istifadə olunacaq üslubu müəyyən etməyə imkan verir. Xüsusilə, bir abzas üslubu seçə bilərsiniz sətir aralığı, Courier şriftində və bir düymlük sol kənar ilə. Bu formatlaşdırma üslubu sonradan bu və digər sənədlərdə istənilən sayda paraqrafa tətbiq oluna bilər. NT üslub vərəqləri

     M Mən eyni şəkildə hərəkət edirəm. Aşağıda əsas xüsusiyyətlərin qısa siyahısı verilmişdir:

     Sətirlər, sözlər və fərdi simvollar arasındakı məsafəni dəyişdirin.

     Elementin sol, sağ, yuxarı və aşağı kənarlarının təyin edilməsi (HTML konteyner mətni bloku).

     Elementin abzasının təyin edilməsi.

     Elementin şriftinin ölçüsünü, üslubunu və digər atributlarını dəyişdirin.

     Element ətrafında haşiyə təyin etmək.

     Fon şəklini aktivləşdirin və fon rəngi elementə.

     HTML üslub vərəqlərinin böyük üstünlüyü formatlaşdırma əməliyyatını sənədin məzmunundan ayırmaq qabiliyyətidir. Əvvəlcə mətnin səhifənin bu və ya digər yerində necə görünməli olduğunu müəyyənləşdirin və sonra mətnin özünü daxil edin. Əgər daha sonra, məsələn, başlıqların şrift rəngini mavi rəngə dəyişmək qərarına gəlsəniz, sizə lazım olan tək şey həmin başlıqların üslubunu dəyişməkdir. Mətndə dəyişiklik etməyə ehtiyac yoxdur .

     Stil cədvəlini sənədə tətbiq etməyin dörd üsulu var:

     Əlaqələndirmə - HTML sənədini ayrıca faylda saxlanılan üslub cədvəli ilə əlaqələndirə bilərsiniz.

     Yerləşdirmə - konteynerdən istifadə edərək stil cədvəlini HTML sənədinə yerləşdirə bilərsiniz
     
     

     Tag

     Daha əvvəl qeyd edildiyi kimi, üslub vərəqləri saxlanılır mətn faylları, redaktə etmək üçün əlverişlidir. Onları əl ilə yaratmaq asandır, lakin var xüsusi redaktorlar məsələn üslub vərəqləri məşhur proqram Microsoft FrontPage.

     Üslub vərəqləri bir və ya bir neçə teq üçün üslub müəyyən etməyə imkan verir. Məsələn, teqlər üçün üslubları müəyyən edən üslub cədvəli yarada bilərsiniz

     ,

     ,

     VƏ . Hər bir tərif deyilir qayda (ru e). Qayda ehtiva edir seçici(HTML etiketi) ardınca bəyannamə(üslubun tərifi). Selektor tərif və etiket arasındakı əlaqədir. Aşağıda başlıq teqlərinin hər biri üçün üslubu təyin edən qayda nümunəsi verilmişdir

     :

     H1 (rəng: mavi)

     Bəyannamə qıvrımlı mötərizələrə əlavə edilmişdir. Hər bir bəyannamə iki hissədən ibarətdir: əmlakın adı və iki nöqtə ilə ayrılmış ona təyin edilmiş dəyər. HTML-ə aşağıda müzakirə olunacaq onlarla xassə (şrift ölçüsü, şrift üslubu, rəng, haşiyə-sağ və s.) daxildir. Hər bir xüsusiyyət bir neçə dəyər qəbul edə bilər, bunlardan biri defolt olaraq ona təyin edilir.

     Əvvəlki nümunədə yalnız bir rəng xüsusiyyəti göstərilmişdir. Bununla belə, bir teqdə bütün xassələri müəyyən etməyə, onları bir-birindən nöqtəli vergüllə ayırmağa heç nə mane olmur:

     HI (rəng: mavi; şrift ölçüsü: 12pt; mətn xətti: mərkəz)

     Bu misalda tamaşaçı hər bir birinci səviyyəli başlığı 12 nöqtəli mavi şriftlə göstərəcək və onları pəncərənin mərkəzinə uyğunlaşdıracaq. Bütün digər xüsusiyyətlər öz standart dəyərlərindən istifadə edəcək (məsələn, şrift üslubu xüsusiyyəti normal olaraq təyin olunacaq).

     Bir neçə teq üçün eyni üslubu müəyyən etmək lazımdırsa, onları ayrıca siyahıda sadalaya bilərsiniz:

     P (şrift ölçüsü: 12pt)
     UL (şrift ölçüsü: 12pt)
     LI (şrift ölçüsü: 12pt)

     HTML eyni şeyi daha yığcam formada - bir sətirdə etməyə imkan verir:

     P, UL, LI (şrift ölçüsü: 12pt)

     Burada vergül tələb olunan elementdir. Əgər buraxılıbsa, qaydanın mənası dəyişir (bu fəslin sonrakı " " bölməsinə baxın).

     Üslub cədvəliniz daha mürəkkəbləşdikcə, çox güman ki, qaydanın məqsədi haqqında daha çox məlumat daxil etməlisiniz. Şərhlər /* və */ simvolları arasında görünür və brauzerlər tərəfindən nəzərə alınmır, məsələn:

     BODY (kənar-sol: lin) /* 1 düym girinti */
     H1 (sol kənar: -lin) /* 1 düym sola sürüşdürün */
     H2 (kənar-sol: -lin) /* 1 düym sola sürüşdürün */

     HTML sizə üslub cədvəlinin geniş spektrini təyin etməyə imkan verir. Mülk adları defislə ayrılmış bir və ya daha çox iki və ya üç sözdən ibarətdir. Mürəkkəb adlarda birinci söz adətən kateqoriyanı təmsil edir və eyni zamanda əmlak adının stenoqramıdır (" " bölməsinə baxın).

     Cədvəl HTML üslub cədvəllərinin xassələrinin icmalını təqdim edir. Üçüncü sütunda əmlakın tabe teqlər tərəfindən miras alınıb-alınmaması haqqında məlumat verilir (əmlakın varisliyi üçün " " bölməsinə baxın).

     		Miras
     		HTML üslub vərəqləri səhifə elementinin fonunu rəng və ya şəkil ilə bəzəməyə imkan verir. Qeyd etmək lazımdır ki, bundan sonra biz bütün səhifə üçün deyil, xassələrin istifadəsi haqqında danışacağıq fərdi element. Məsələn, teq üçün fon təyin etsəniz , onda yalnız teqlərdə bu fon olacaq bütün səhifə: U L (fon şəkli: URL(http://www.myserver.com/images/watermark.gif)) W3C tövsiyələri səhifə elementləri üçün sərhədləri, kənarları və boşluqları müəyyən etmək imkanı verir. Siz, məsələn, bir başlığı çərçivəyə əlavə edə və ya paraqraf etiketindəki kənarları dəyişə bilərsiniz<Р>mətnin bütün paraqrafları üçün abzas təşkil etmək üçün. Bu məqsədlər üçün aşağıdakı əmlak qruplarından istifadə edə bilərsiniz: sərhəd - elementin solunda, sağında, yuxarısında və aşağısında yerləşən haşiyəni təyin etmək üçün istifadə olunur. Çərçivənin enini, rəngini və üslubunu təyin edə bilərsiniz. margin - elementin solunda, sağında, yuxarısında və altında yerləşən kənarları müəyyən etmək üçün istifadə olunur. Siz həmçinin kənarların enini təyin edə bilərsiniz. padding - çərçivə ilə elementin məzmunu arasındakı boş yeri göstərmək üçün istifadə olunur. Bu xüsusiyyətlər siyahıların necə göstərildiyini müəyyən etmək üçün istifadə olunur. Onların köməyi ilə siz markerin mövqeyini (siyahı stili-mövqe xüsusiyyəti), markerin üslubunu və ya şəklini (siyahı üslubu növü və siyahı stili-şəkil xüsusiyyətləri) dəyişə bilərsiniz. Siyahı xassələri miras alınır, yəni əmlak etiketdə müəyyən edilirsə , bütün teqlər üçün etibarlı olacaq UL konteyner. Xüsusiyyətlər izləyicinin mətni necə göstərməsinə tam nəzarət imkanı verir. Onların köməyi ilə siz rəngi, ölçüsünü, şriftini, sətir aralığını və s. idarə edə bilərsiniz. Bütün mətn xüsusiyyətləri aşağıda ətraflı təsvir ediləcəkdir. Yuxarıda təsvir edilən xüsusiyyətlərin çoxu bir-biri ilə qruplaşdırıla bilər. Beləliklə, qayda yerinə H1 (şrift çəkisi: qalın; şrift tərzi: normal; şrift ölçüsü: 12pt; şrift ailəsi: serif) Daha qısa formada yaza bilərsiniz: H1 (şrift: qalın normal 12pt serif) HTML üslub cədvəlləri qruplaşdırmağa imkan verir sərhəd xassələri, fon, şrift, siyahı, kənar və doldurma. Qrupların hər birini ayrıca nəzərdən keçirək. sərhəd mülkiyyət qrupu Siz sərhəd xassələrini beş müxtəlif şəkildə qruplaşdıra bilərsiniz. İstifadə edərək fərdi çərçivə tərəfi üçün xassələri təyin edə bilərsiniz b sıra-yuxarı, haşiyə-sağ, haşiyə-aşağı VƏ haşiyə-sol və ya sərhəddən istifadə edərək bütün çərçivəni eyni anda müəyyənləşdirin. Bu xassələrin hər biri ilə siz haşiyənin enini, üslubunu və rəngini təyin edə bilərsiniz, məsələn: b order-top: nazik nöqtəli qara Qrup fon xassələri Fon əmlak qrupunda rəng, şəkil, təkrar, əlavə və mövqe üçün dəyərlər təyin edə bilərsiniz, məsələn: fon: ağ URL(http://www.myserver.com/image/bg.gif) təkrar-x sabit yuxarı sol şrift mülkiyyət qrupu Şrift qrupuna çəki, üslub, ölçü və ailə dəyərləri verilə bilər, məsələn: şrift: qalın normal 12pt dəfə, serif siyahı əmlak qrupu Xüsusiyyətlər siyahı stili xüsusiyyətindən istifadə edərək qruplaşdırılır. Marker üçün təsviri, markerin növünü və mövqeyini təyin etmək mümkündür, məsələn: siyahı tərzi: kvadrat URL (http://www.myserver.com/images/marker.gif) daxilində marja mülkiyyət qrupu Qrup yuxarı, sağ, aşağı və sol kənarların hər biri üçün eni təyin etmək üçün istifadə edilə bilər, məsələn: kənar: .5in 1in .5in 1in Yalnız bir dəyər göstərilibsə, izləyici digər sahələri eyni genişlikdə edəcək. Bir və ya iki dəyər göstərməsəniz, qeyri-müəyyən dəyəri olan sahələr əks sahələrlə eyni genişlikdə olacaq. Məsələn, buraxsanız son dəyər(solda), sol kənarların eni sağ kənarların eninə bərabər olacaq, yəni 1 düym. Doldurma əmlak qrupu Doldurma Qrupunda yuxarı, sağ, aşağı və sol üçün dəyərlər təyin edə bilərsiniz, məsələn: doldurma: .25in .25in .25in .25in Yalnız bir dəyər göstərilibsə, izləyici çatışmayan dəyərlərə eyni dəyəri təyin edəcək. Bir və ya iki dəyər göstərməsəniz, qeyri-müəyyən dəyərləri olan boş yerlər onların əks dəyərləri ilə eyni genişlikdə olacaq. Məsələn, sonuncu dəyəri (solda) buraxsanız, çərçivənin sol tərəfi ilə elementin məzmunu arasındakı boşluq sağ tərəfdəki boşluqla eyni olacaq. HTML-də tabe teqlər öz ana teqlərinin bəzi xassələrini miras alırlar. Məsələn, bütün konteyner etiketləri (< P >Və ) bəzi etiket xüsusiyyətlərinə malik olacaq . Tam eyni etiket etiket xassələrini miras alır . Aşağıdakı kodu nəzərdən keçirin: Salam. Bu mətnin bir paraqrafıdır. Bu vurğulanır Bu sənədin üslub cədvəli etiketdəki rəngi təyin edir < P > mavi, lakin etiket üçün rəngdir açıq şəkildə müəyyən edilməyib (defolt qaradır). Bu teq əsas konteynerdə olduğu üçün burada narahat olacaq heç nə yoxdur Və beləliklə mavi rəngi miras alır. Bəzən bir teq üçün iki (və ya daha çox) üslub müəyyən etmək lazım olur. Məsələn, bir teq üçün iki üslub təyin etməli ola bilərsiniz : teqə tabe olduğu hal üçün biri , ikincisi isə etiketə tabe olduqda . Bu, kontekst seçicilərindən istifadə etməklə edilə bilər. Kontekst seçicisi müəyyən bir üslubun tətbiq olunacağı teqlərin dəqiq ardıcıllığını müəyyən edir. Başqa sözlə, müəyyən edə bilərsiniz ki, bəzi üslublar, məsələn, etiketdə tətbiq edilməlidir ancaq bu teq tabe teq olduqda : OL LI (siyahı üslubu növü: onluq) Eyni etiket üçün yalnız etiketə tabe olduqda etibarlı olan başqa bir üslub təyin edə bilərsiniz : UL LI (siyahı üslubu növü: kvadrat) Qeyd etmək lazımdır ki, seçicilərin siyahısı vergüllə ayrılmır. Əks halda, siyahıdakı bütün etiketlərə eyni üslub təyin ediləcək. W3C təlimatları üslub cədvəllərini "cascading style sheets" adlandırır. " çünki Web-səhifənin tərtibatı üçün bir deyil, eyni zamanda bir neçə cədvəldən istifadə etmək olar. Bu halda, tamaşaçı özü cədvəllərdən istifadə ardıcıllığını müəyyən edir və kaskad prinsipindən istifadə etməklə onlar arasındakı ziddiyyətləri həll edir. Məsələn, bir səhifə üçün üslub cədvəli yalnız onun müəllifi tərəfindən deyil, həm də oxucu tərəfindən müəyyən edilə bilər və sonra kaskad qaydaları hansı stil cədvəlinin qüvvəyə minəcəyinə qərar verir. Bu necə işləyir? Brauzer hər bir qaydaya çəki təyin edir. Hər bir etiketi şərh edərkən, proqram bu teqin bütün qaydalarına nəzər salır və onları çəki əmsalının dəyərinə görə çeşidləyir. Ən "ağır" qayda qalib gəlir. Stil vərəqləri arasında ziddiyyətlərin həlli üçün ümumi prinsiplər aşağıdakılardır: Sənəddə üslub cədvəli növlərinin üstünlüyü (azalan): cari üslub qəbulu (daxili), yerləşdirmə, əlaqələndirmə. Siz həmçinin vacib açar sözdən istifadə edərək qaydanın çəkisini dəyişə bilərsiniz. Aşağıdakı misalda qırmızı xüsusiyyətin dəyəri belədir kol Font-family xassəsinin və ya və sans-serif dəyəri bu funksiya sözü ilə qeyd olunur və buna görə də izləyici onları ləğv etməməlidir. Lakin iki belə qayda bir-birinə zidd olarsa, münaqişə yuxarıda göstərilən prinsiplərə əsasən həll edilir. H1 (rəng: qırmızı ! mühüm şrift çəkisi: qalın şrift-ailə: sans-serif ! vacibdir) Sinif bir elementin bir neçə üslubunun tərifidir, hər biri səhifənin lazımi yerində istifadə edilə bilər. Məsələn, H1 başlıq üslubunun üç variantını müəyyən edə bilərsiniz. Variasiyaların müəyyən edilməsi üslubun təyin edilməsinə bənzəyir, yalnız nöqtə ilə ayrılmış ixtiyari sinif adı etiket adına əlavə edilir: H1 mavi (rəng: mavi) H1 .qırmızı (rəng: qırmızı) H1 .qara (rəng: qara) İndi, sənəddəki etiket də daxil olmaqla , siz CLASS atributundan istifadə edərək onda xüsusi üslub təyin edə bilərsiniz: Qırmızı başlıq