Html səhifəsində siyahının görünüşünü fərdiləşdirmək üçün CSS qaydaları. Siyahı stil xüsusiyyəti (növ, şəkil, mövqe). Xüsusi CSS siyahı tərzi qaydası

Salam, blog saytının əziz oxucuları. Bu gün donuz bankında başqa bir məqalə olacaq. Kaskad üslub vərəqlərinin qaydalarından istifadə edərək dizayna diqqət yetirəcəkdir. Burada hər şey çox sadədir, amma buna baxmayaraq bu mövzuya ayrıca bir yazı həsr etmək qərarına gəldim.

Bir az əvvəl, biz artıq necə, necə və necə işləyə biləcəyinizi öyrənə bildik. Yaxşı, bir az əvvəl, müəyyən üslub xüsusiyyətlərinin tətbiq edilməli olduğu Html kodu elementini dəqiq müəyyən etmək üçün bütün mümkün və onların müxtəlif birləşmələrini ətraflı araşdırdıq.

Siyahı stili - Html kodunda siyahı dizaynı

Beləliklə, üslub işarələmə dilində siyahı üslubundan başlayaraq fərdiləşdirməyə xidmət edən üç ayrı qayda var görünüş veb-sənədlərin kodunda siyahılar (nömrələnmiş və ya işarələnmiş). Bundan əlavə, kodun miqdarını bir qədər azaltmağa imkan verən əvvəlcədən hazırlanmış Css siyahısı tərzi qaydası var. Ancaq ilk şeylər.

İndi sizinlə nəzərdən keçirəcəyimiz şey kimi istifadə edilə bilər Html elementləri LI və Ul və Ol elementləri üçün (müvafiq olaraq markerli və nömrələnmiş siyahılar). Bu teqlərə siyahı üslubunun tətbiqi hansı fərq ola bilər?

Əslində, kaskad üslub cədvəllərinin spesifikasiyası bölməsində bir mülkiyyətin miras qalıb-qalmamasını validator saytında (təqdim olunan linkdə oxuyun) öyrənə bilərsiniz. Miras alınan qaydaların qarşısındakı "Vərəs" sütununda "Bəli" olacaq:

ilə başlayaq siyahı stili növüüçün işarələmə növünü təyin etməyə imkan verir fərdi elementlər html siyahısı. Bu qayda üçün aşağıdakı dəyərlərə icazə verilir:

1. Yoxdur - heç bir işarələmə olmayacaq (siyahı üslubu növü: heç biri; bu elementə tətbiq olunur və buna görə də marker yoxdur)
2. Disk - doldurulmuş dairə (siyahı üslubu növü: disk bu sətirə yeni tətbiq edilmişdir;)
3. Dairə - marker kimi bir dairə
4. Kvadrat - marker kimi kvadrat
5. Onluq - Ərəb rəqəmləri (siyahı üslubu növü: ondalık;)
6. aşağı-alfa - kiçik hərflə
7. upper-alpha - Latın hərfləri böyük hərflərlə
8. aşağı-roman - kiçik hərflə Roma rəqəmləri
9. yuxarı-roman - böyük hərflə Roma rəqəmləri

Sizcə, yuxarıdakı siyahı Ul və ya Ol-un hansı elementlərinin köməyi ilə yaradılıb? Çətin sual. Məlum oldu ki, bu artıq vacib deyil, baxmayaraq ki, bu vəziyyətdə mən Ol-dan istifadə etdim, lakin onu Ul-a dəyişdirsəm, görünüş eyni qalacaq, çünki hər bir element üçün özünəməxsus şəkildə təyin olunur. CSS dəyəri stil növü qaydalarını siyahıya alın.

Əslində, Ul və Ol yalnız standart davranışda (Ul işarələri və Ol nömrələri) fərqlənir. Ancaq istəsəniz, list-style-type ilə asanlıqla bir növ siyahını digərinə çevirə bilərsiniz. Rəqəmlərin və ya hərflərin etiketlənməsi üçün istifadə olunan şrift LI teqlərinin məzmunu üçün təyin etdiyiniz şriftlə tamamilə eynidir. Məsələn, siyahının şrift rəngini dəyişdirməklə biz dəyişəcəyik və marker rəngi:

1. Mətnin rəngi dəyişdirildi (siyahı üslubu növü: aşağı-roman; rəng: qırmızı) və marker rəngi dəyişdirildi

Gəlin aşağıdakı CSS xassəsinə keçək - siyahı tərzi-mövqe. Onunla siz markerlə ərazinin mövqeyini (yerləşdirməsini) təyin edə bilərsiniz. Onun yalnız iki mümkün dəyəri var:

Bunlar. əslində, list-style-mövqeyində biz markerlərlə ərazini harada yerləşdirmək istədiyimizi göstəririk - LI elementindən kənarda (xarici) və ya onun daxilində (daxili). Varsayılan olaraq, marker olan sahə hüdudlardan çıxarılır, yəni. xaricdəki dəyər istifadə olunur.

Buna bir nümunə ilə baxaq. Siyahının ilk elementində mən xüsusi olaraq list-style-position:inside yazacağam və bunun nə olduğunu görəcəyik:

1. Burada hər şey standartdır.
2. Marker sahəsinin daxili ilə yerləşdirilməsi belə görünəcək. Qeyd edək ki, bu elementdəki ikinci xətt və marker eyni səviyyədədir.
3. Burada hər şey standartdır.

Siyahı tərzi-şəkil və prefabrik CSS qaydası

Sonrakı sırada List-style-image - marker kimi istifadə olunacaq şəkli təyin etməyə imkan verir. Bu qayda defolt olaraq Yoxdur (yəni heç bir şəkil marker kimi istifadə edilmir), lakin siz sonradan bu siyahıda marker rolunu oynayacaq şəklin yolunu göstərərək Url () funksiyasını yaza bilərsiniz:

Bu belə görünə bilər:

Siyahı tərzi-şəkil: url(https://website/images/list_star.png);

1. Burada hər şey standartdır.
2. Şəkildən marker kimi istifadə belə görünə bilər. Bunun üçün daha uyğun bir şəkil seçə biləcəyiniz aydındır.
3. Məsələn, burada olduğu kimi.

Yadınızdadırsa, məqalədə dedim ki, şəkillər daxili elementlərə aiddir (əslində, brauzer üçün bu eyni hərfdir, lakin bəzən çox böyükdür).

Budur şəkil və markerin yerini tutur (hərflər və ya rəqəmlər). Eyni zamanda, marker kimi böyük bir şəkil daxil etsəniz (yuxarıdakı nümunənin ikinci elementində olduğu kimi) siyahı elementi olan xəttin hündürlüyü artırılacaqdır.

Siyahı üslubunda şəkil funksionallığında siz hər iki şəkli təyin edə bilərsiniz. Şəkil yüklənmirsə, defolt marker və ya nömrələmə və ya bu siyahı elementi üçün siyahı stili tipində yazılmış hər hansı bir şey istifadə olunacaq.

Yuxarıda təsvir edilən hər üç CSS qaydasını bir birinə yazmaq üçün üslub siyahıları üçün əvvəlcədən hazırlanmış Siyahı üslubundan istifadə etmək mümkün olacaq. Dəyərlərin göstərilmə ardıcıllığının əhəmiyyəti yoxdur. Siyahı üslubunda qeyd etmədiyiniz dəyərlər brauzer tərəfindən standart dəyərlərlə açıq şəkildə şərh ediləcək.

Standart dəyərləri harada görə bilərəm? Bəli, hər şey eyni yerdədir - maraqlandığınız xüsusiyyətlərin qarşısındakı "İlkin dəyər" sütununda W3C təsdiqləyicisinin CSS spesifikasiyasında:

Siyahı tipli prefabrikdə fərdi xüsusiyyətlər üçün dəyərlər boşluqlarla ayrılır. Yerlər, artıq qeyd edildiyi kimi, vacib deyil:

Praktikada bu belə görünə bilər:

Siyahı tərzi:yuxarı-roman url daxilində(https://site/images/list_star.png);

Dəyərləri istənilən qaydada və istənilən sayda (birdən başlayaraq) istifadə edə bilərsiniz. Yeri gəlmişkən, siyahıların köməyi ilə menyular ən çox veb-saytlarda formalaşır və List-style xassəsindən istifadə olunur. menyu siyahılarından markerləri silmək üçün orada tamamilə lazımsız olan:

list-style-type:yox;

Siyahı tərzi: heç biri;

Sənə uğurlar! Tezliklə blog səhifələri saytında görüşənədək

Sizi maraqlandıra bilər

CSS-də ekran (blok, heç biri, daxili) - veb-səhifədə Html elementlərinin ekran tipini təyin edin N-ci uşaq psevdo-sinifindən istifadə edərək saytdakı cədvəllərin, siyahıların və digər Html elementlərinin cərgələrinin fon rəngini necə dəyişdirmək olar
CSS-də sürüşdürün və təmizləyin - blok tərtibatı alətləri
Siçan kursorunu dəyişdirmək üçün Z-indeksi və CSS Kursor qaydası ilə yerləşdirmə
Mövqe (mütləq, nisbi və sabit) - CSS-də Html elementlərini yerləşdirmə yolları (sol, sağ, yuxarı və aşağı qaydalar)
CSS nədir, kaskad üslub vərəqlərini necə bağlamaq olar html sənədi və bu dilin əsas sintaksisi
CSS xüsusiyyətləri Html mətn bəzəyi üçün mətn dekorasiyası, şaquli düzülmə, mətnin düzülməsi, mətnin girintisi
Şrift (Çəki, Ailə, Ölçü, Üslub) və CSS-də şriftlərin üslubu üçün Line Height qaydaları
CSS-də fon (rəng, mövqe, şəkil, təkrar, əlavə) - hamısı Html elementlərinin fon rəngini və ya fon şəklini təyin etmək üçün
CSS - bu nədir, kaskad üslub vərəqləri necə bağlanır html kodu Stil və Link ilə
Css-də prioritetlər və seçicilərin, istifadəçi və müəllif üslublarının vacib, birləşməsi və qruplaşdırılması səbəbindən onların artması

Siyahı markeri kimi xidmət edən şəklin ünvanını təyin edir. Bu xassə miras alınır, ona görə də heç birinin dəyəri nişanı bərpa etmək üçün fərdi siyahı elementləri üçün istifadə olunur.

qısa məlumat

Sintaksis

list-style-image: none | url(<адрес>)

Bu fəsildə biz müəyyən edən üslub atributlarını öyrənəcəyik paraqraf variantları. Sözün geniş mənasında paraqraflar - həm başlıqları, həm də siyahıları, və ünvan etiketləri və əla sitatlar. Ümumilikdə, 2-ci Fəsildə müzakirə edilən və mətnin strukturlaşdırılması üçün nəzərdə tutulmuş blok səviyyəli elementlər.

Nəhayət, biz iki çox xüsusi stil atributuna baxacağıq ki, bu bizə Veb səhifə elementinin (yəni blok və ya inline) ekranını təyin etməyə və elementi görünməz etməyə imkan verir. Bu üslub atributları nadir hallarda və yalnız müəyyən davranışlarla birlikdə istifadə olunur (III hissəyə baxın).

Mətn çıxış variantları

Biz nəzarət edən stil atributları ilə başlayacağıq mətn çıxışı mətni strukturlaşdıran blok elementlərində. Onlardan çox azdır. Və onların hamısı yalnız blok elementlərinə aiddir.

Text-align style atributu mətnin üfüqi düzülməsini təyin edir:

text-align: sol|sağ|mərkəz|dəqiqləşdir|miras

Burada mövcud olan dəyərlər sola (sola düzülmüş; normal veb brauzer davranışı), sağa (sağa düzülmüş), mərkəzə (mərkəyə) və əsaslandırma (tam düzülmüş) daxildir.

Nümunələr:

P (mətn hizalanması: əsaslandırma)
H1 (mətn hizalanması: mərkəzə)

Mətn girinti stili atributu "qırmızı xətt" üçün abzas təyin edir:

mətn abzas:<отступ "красной строки">

Burada mütləq və nisbi (paraqrafın eninə nisbətən) abzas dəyərlərinə icazə verilir. Varsayılan olaraq, "qırmızı xəttin" girintisi sıfırdır. Qeyd edək ki, mətn girinti stili atributu miras dəyərini dəstəkləmir.

Misal:

P (mətn girintisi: 5 mm)

İndi paraqraflarda "qırmızı xətt" olacaq.

Siyahılar blok elementləri arasında seçilir. Əsasən, ona görə ki, birincisi, onların tərkibində digər blok elementləri (ayrı-ayrı paraqraflar), ikincisi, veb-brauzerin özü tərəfindən yerləşdirilən markerlər və nömrələmə daxildir. Burada markerlər və nömrələmə, daha doğrusu, onların parametrlərini təyin etmək üçün nəzərdə tutulan üslub atributları haqqında danışacağıq.

List-style-type stil atributu siyahı elementləri üçün markerlərin növünü və ya nömrələnməsini müəyyən edir:

list-style-type: disk|dairə|kvadrat|onluq|onluq-leading-sıfır|

aşağı-roman|yuxarı-roman|aşağı-yunan|aşağı-alfa|aşağı-latın|

yuxarı-alfa|yuxarı-latın|erməni|gürcü|heç biri|miras

Gördüyünüz kimi, bu stil atributunun çoxlu mövcud dəyərləri var. Onlar həm müxtəlif növ markerləri, həm də müxtəlif nömrələmə üsullarını bildirir.

Qara dairə şəklində disk markeri (markalı siyahılar üçün adi davranış).

Dairə - işıq dairəsi şəklində marker.

Kvadrat - kvadrat şəklində bir marker. Veb brauzerindən asılı olaraq açıq və ya qaranlıq ola bilər.

Ondalık - ərəb rəqəmləri ilə nömrələmə (nömrələnmiş siyahılar üçün adi davranış).

Ondalıq-aparıcı-sıfır - ərəb rəqəmləri ilə 01-dən 99-a qədər qabaqcıl sıfırla nömrələmə.

Aşağı-Roma - kiçik Roma rəqəmləri ilə nömrələmə.

Upper-roman - böyük rum rəqəmləri ilə nömrələmə.

Aşağı yunan - aşağı yunan hərfləri ilə nömrələmə.

Aşağı alfa və aşağı latın - kiçik latın hərfləri ilə nömrələmə.

Yuxarı alfa və yuxarı latın - böyük latın hərfləri ilə nömrələmə.

Erməni - ənənəvi erməni rəqəmləri ilə nömrələmə.

Gürcü - ənənəvi gürcü rəqəmləri ilə nömrələmə.

Yoxdur - Marker və ya nömrələmə yoxdur (siyahı olmayanlar üçün adi davranış).

QEYD ÜZRƏ

Biz yalnız CSS 3 tərəfindən təmin edilən siyahı stili tipli atribut dəyərlərinə baxdıq. Bununla belə, CSS 2 hələ də veb brauzerlər tərəfindən dəstəklənən bir neçə dəyər təqdim etdi. Siz onları https://developer.mozilla.org/en/CSS/list-style-type ünvanında tapa bilərsiniz.

Siyahı stili tipli stil atributunu hər ikisinə təyin etmək olar siyahıları, və fərdi siyahı elementləri üçün. Sonuncu halda, elementlərin fərqli güllələri və ya nömrələnməsi olan siyahı yaradılır. Bəzən bu faydalı ola bilər.

Qutu işarəsi olan markerli siyahının tərifi budur:

UL (siyahı üslubu növü: kvadrat)

Və Siyahı 9.1-də biz markerlə işarələnmiş siyahıdakı elementlərdən biri üçün eyni markeri təyin etdik.

Siyahı stili-şəkil stili atributu istənilən qrafik təsviri siyahı elementi markeri kimi təyin etməyə imkan verir (qrafik marker yaradın). Bu halda list-style-type stil atributunun dəyəri, əgər varsa, nəzərə alınmır:

list-style-image: none|<интернет-адрес файла изображения>|miras

Qrafik marker faylının İnternet ünvanı fon şəkli faylının İnternet ünvanı ilə eyni formatda göstərilmişdir (bax. Fəsil 8):

UL (siyahı stili-şəkil: url(/markers/dot.gif))

None dəyəri qrafik markeri silir və sadə, qeyri-qrafik markeri qaytarır. Bu normal davranışdır.

Siyahı tərzi-şəkil üslubu atributunu həm siyahıların özləri, həm də fərdi siyahı elementləri üçün təyin etmək olar.

Siyahı tərzi-mövqe stili atributu sizə siyahı elementində güllə və ya nömrənin yerini təyin etməyə imkan verir:

list-style-position: daxili|xarici|miras

İki mövcud dəyər var:

İçəridə - marker və ya nömrələmə, sanki siyahı elementinin içərisindədir, onlar onun bir hissəsidir;

Xaricdə - marker və ya nömrələmə nöqtədən kənardadır siyahı(bu normal davranışdır).

Bu üslub atributunun nə üçün lazım olduğu aydın deyil, çünki siyahıları marker və ya nömrələmənin paraqraflardan çıxarıldığı , daha yaxşı oxunaqlıdır. Yaxşı, CSS standartında olduğu üçün belə olsun...

Misal:

OL (siyahı üslubunda mövqe: içəridə)

Markerin üslubunu, mövqeyini, habelə siyahı markeri kimi istifadə ediləcək təsviri eyni vaxtda təyin etməyə imkan verən universal bir xüsusiyyət.

qısa məlumat

LIST-STYLE xüsusiyyəti ilə

Əmlak Siyahı üslubu siyahı elementləri üçün markerlərin bütün üslublarını təyin edən yazı xassələrinin qısaldılmış formasıdır. Bu xüsusiyyətlər həm nömrələnmiş, həm də markerlə işarələnmiş siyahılara aiddir - onlar ayrıca nəzərdən keçirilməlidir. Qısaldılmış qeyd formasına heç bir fərdi xüsusiyyət daxil olmaya bilər, lakin onların qeyd edilməsi qaydasına riayət edilməlidir: marker növü - onun mövqeyi - təsvirə gedən yol.

Tətbiq sahəsi*: siyahıların elementləri və əmlakın dəyəri olan hər hansı digər göstərin edir siyahı maddəsi.

Siyahı üslubu növü

Əmlak dəstləri marker növü siyahının hər bir elementi üçün. Güllə növləri markerli və nömrələnmiş siyahılar üçün fərqlənir.

Dəyərlər:

disk- nöqtə işarəsi.
dairə- dairə işarəsi.
kvadrat- kvadrat marker.
onluq- Ərəb rəqəmləri: 1, 2, 3 ....
ondalık-aparıcı-sıfır- Sıfırdan başlayan ərəb rəqəmləri: 01, 02, 03 ... 09.
aşağı-roman- Roma rəqəmləri kiçik hərflərlə.
yuxarı roman- Böyük hərflə Roma rəqəmləri.
aşağı-latın- kiçik Latın hərfləri: a, b, c ....
yuxarı latın- böyük latın hərfləri: A, B, C ....
erməni- Erməni nömrələmə.
gürcü- Gürcü nömrələmə.
heç biri- ləğv.
miras almaq

Nümunədə iki fərqli xüsusiyyət dəyəri istifadə olunur Siyahı üslubu növü:

siyahı tərzi-mövqe

Xüsusiyyət elementin markerinin yerini təyin edir. Marker ya elementin içərisindədir, ya da onun xaricində.

Dəyərlər:

içəri- marker siyahı elementinin daxilində yerləşir.
kənarda— marker mətn blokundan kənara köçürülür.
miras almaq- ana elementdən miras.

Nümunə dəyərlər arasındakı fərqi aydın şəkildə göstərir içəri Və kənarda xassələri siyahı tərzi-mövqe:

Siyahı tərzi-şəkil

Mülk, nömrələnmiş və ya üçün marker kimi xidmət edəcək şəkilə gedən yolu müəyyən edir markerli siyahı. Marker şəklinin yeri mülkiyyətdən istifadə etməklə idarə oluna bilər siyahı tərzi-mövqe.

Dəyərlər:

URL- yol qrafik fayl.
heç biri- məsələn, əsas element üçün marker şəklini ləğv edir.
miras almaq- ana elementdən miras.

Ul (siyahı stili-şəkil: url(papka/find.png); siyahı stili-mövqe: daxili;)

Nümunədə marker kimi bir şəkil istifadə etdik kiçik ölçü, bu da əmlakın imkanlarını aydın şəkildə nümayiş etdirir Siyahı tərzi-şəkil: