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)

Salam, blog saytının əziz oxucuları. Bu gün kaskad üslub vərəqlərinin xüsusiyyətləri haqqında başqa bir məqalə olacaq. CSS qaydalarından istifadə edərək dizayna diqqət yetirəcəkdir.

Ümumiyyətlə, siyahılar blok elementləri arasında bir-birindən fərqlənir. Bu, brauzerin özü tərəfindən yerləşdirilən güllələri və nömrələmələri ehtiva etməsi ilə əlaqədardır.

Siyahı stilinin xüsusiyyəti - html səhifəsində siyahının dizaynı

CSS dilində, markerli və nömrələnmiş siyahıların dizaynına cavabdeh olan siyahı üslubu ilə başlayan üç xüsusiyyət var. Üstəlik, kodun miqdarını azaltmağa imkan verən əvvəlcədən hazırlanmış siyahı tərzi qaydası da var.

Bütün bu xüsusiyyətlər hər ikisi üçün istifadə edilə bilər html elementləri li, ul və ol elementləri üçün. Yeganə fərq ondadır ki, əgər qaydalar li siyahısının müəyyən dəyəri üçün yazılıbsa, o zaman yalnız ona tətbiq olunacaq. Eyni css qaydaları ul və ya ul konteynerləri üçün yazılıbsa, o zaman bu konteynerlərdə olan bütün li elementlərinə tətbiq olunacaq.

Atributdan başlayaq siyahı stili növü, təyin edən markerlərin növü və ya nömrələmə siyahı maddələri üçün:

Gördüyünüz kimi, list-style tipli xassə həm markerin, həm də markerin növünü təyin edə bilən çoxlu mövcud dəyərlərə malikdir. müxtəlif növlər nömrələmə.

disk - qara dairə şəklində marker (markerlə işarələnmiş siyahılar üçün standart dəyər).
dairə - doldurulmamış dairə şəklində marker.
kvadrat - kvadrat şəklində marker. Brauzerdən asılı olaraq açıq və ya qaranlıq ola bilər.
ondalık - nömrələmə Ərəb rəqəmləri(nömrələnmiş siyahılar üçün standart).
decimal-leading-zero - ə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ğı-roman - kiçik rum rəqəmləri ilə nömrələmə.
yuxarı-roman - böyük rum rəqəmləri ilə nömrələmə.
aşağı yunan - kiçik 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ərindən istifadə edərək nömrələmə.
gürcü - ənənəvi gürcü rəqəmlərindən istifadə edərək nömrələmə.
heç biri - işarələmə və nömrələmə ümumiyyətlə aparılmayacaq.

Siyahı elementləri müxtəlif siyahı stili tipli dəyərləri olan brauzerdə belə görünəcək:

At CSS istifadə edərəküslublar üçün siyahı yaratmaq üçün hansı elementin (OL və ya UL) istifadə edilməsinin əhəmiyyəti yoxdur. OL və UL yalnız standart davranışda fərqlənir və siyahı stili tipli xüsusiyyət ilə siz asanlıqla bir növ siyahını digərinə çevirə bilərsiniz.

Stil atributu siyahı tərzi-şəkil kimi təyin etməyə imkan verir marker siyahı maddələri qrafik şəkil . List-style-image atributundan istifadə edərkən, list-style-type atributunun dəyəri nəzərə alınmır:

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

Məna heç birişəkil markerini silir və qrafiki yox, normal vəziyyətə gətirir. Bu standart davranışdır.

Şəkil faylının ünvanını göstərdiyiniz zaman şəkil markerin yerinə daxil ediləcək. istifadə edərkən olduğu kimi, şəkil ünvanı kimi həm mütləq, həm də nisbi ünvanlardan istifadə edə bilərsiniz. Brauzer şəkli yükləyə bilmirsə, defolt marker və ya nömrələmə və ya siyahı stili tipində xüsusiyyətdə göstərilənlərdən istifadə olunacaq.

Marker kimi şəkil olan siyahı nümunəsi:

ilk siyahı elementi;

ikinci siyahı maddəsi;

siyahının üçüncü maddəsi.

Və bu necə görünür:

ilk siyahı elementi;
ikinci siyahı maddəsi;
siyahının üçüncü maddəsi.

Aydındır ki, marker kimi bir şəkil seçərkən kiçik bir şəkil seçmək daha yaxşıdır.

Siyahı tipli seriyadan sonuncu CSS xassəsidir siyahı tərzi-mövqe bu, siyahı elementində güllənin və ya nömrənin yerini müəyyən etməyə imkan verir. Dəyər üçün iki seçim ola bilər:

list-style-position: daxili|xarici

Dəyər olduğu halda içəri marker və ya nömrələmə sanki siyahının içərisində və qutuda yerləşdirilir kənarda li elementlərindən kənarda. Varsayılan dəyər xaricdədir və marker xaricə köçürülür.

Fərqli siyahı tərzi-mövqe dəyərlərinə malik nümunə siyahı:

birinci abzasda hər şey standartdır;
ikinci abzasda list-style-position daxili olaraq təyin edilmişdir. Bu halda nəzərə alın ki, ikinci sətir markerlə bərabər yerləşdirilir;
bu nöqtədə list-style-mövqe kənara bərabərdir.

Prefabrik CSS siyahı tərzi qaydası

Aşağıdakı CSS siyahı stili xüsusiyyəti üslub siyahıları üçün prefabdır. Bu, yuxarıda müzakirə olunan bütün üç CSS qaydasını bir birinə yazmağa imkan verir. İçindəki dəyərlərin göstərilmə qaydası hər hansı ola bilər və siyahı üslubunda göstərmədiyiniz parametrlər standart olaraq brauzer tərəfindən qəbul ediləcəkdir.

Siyahı üslubunda tərtib qaydasındakı dəyərlər boşluqlarla ayrılmalıdır:

list-style: list-style-type list-style-image list-style-position;

Üslub siyahıları üçün əsl CSS qaydası belə görünə bilər:

siyahı üslubu: kənarda dairə url (//site/images/marker.png);

Beləliklə, siyahı stili xassə kodun miqdarını əhəmiyyətli dərəcədə azaltmağa imkan verir, çünki üç qayda əvəzinə yalnız birini təyin etmək kifayətdir.

Yuxarıda qeyd edildiyi kimi, dəyərlər istənilən qaydada və istənilən miqdarda göstərilə bilər. Beləliklə, məsələn, üçün menyu siyahısından markerləri çıxarın yazmaq kifayətdir:

siyahı tərzi: heç biri;

Eyni şeyi list-style-type xüsusiyyətindən istifadə etməklə etmək olar:

list-style-type: heç biri;

Dizayn haqqında hekayə üçün budur. html siyahıları Mən Cascading Style Sheets ilə bitirəcəyəm. Başqaları haqqında məlumat əldə etmək üçün CSS xüsusiyyətləri“” bölməsindən məqalələri oxuya bilərsiniz və blog yeniləmələrinə abunə olmağı unutmayın. Yenidən görüşərik!

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

qısa məlumat

Təyinatlar

	Təsvir	Misal
<тип>	Dəyərin növünü göstərir.	<размер>
A && B	Dəyərlər göstərilən ardıcıllıqla çıxmalıdır.	<размер> && <цвет>
A \| B	Təklif olunanlardan (A və ya B) yalnız bir dəyər seçməyiniz lazım olduğunu göstərir.	normal \| kiçik qapaqlar
A \|\| B	Hər bir dəyər müstəqil və ya başqaları ilə birlikdə istənilən qaydada istifadə edilə bilər.	eni \|\| saymaq
	Qrup dəyərləri.	[ məhsul \|\| xaç]
*	Sıfır və ya daha çox dəfə təkrarlayın.	[,<время>]*
+	Bir və ya bir neçə dəfə təkrarlayın.	<число>+
?	Göstərilən növ, söz və ya qrup isteğe bağlıdır.	daxil?
(A, B)	Ən azı A təkrarlayın, lakin B dəfədən çox deyil.	<радиус>{1,4}
#	Vergüllə ayrılmış bir və ya bir neçə dəfə təkrarlayın.	<время>#

Dəyərlər

Markerlərin üslubunu təyin edən üç dəyərin hər hansı birləşməsi, onlar boşluqla ayrılır. Dəyər birləşmələri verilmiş ardıcıllıqla yerinə yetirilməlidir: əvvəlcə marker növü, sonra mövqe və şəkil gəlir. Dəyərlərin heç biri tələb olunmur, ona görə də istifadə olunmayanlar buraxıla bilər.

Misal

siyahı tərzi

Çoxdəyişənli polinom
Normal mütləq yaxınlaşan sıra
Funksiyanın inteqralı
Funksiyanın kollinear ekstremumu

Bu nümunənin nəticəsi Şəkildə göstərilmişdir. 1.

düyü. 1. Siyahı tərzi xassəsinin tətbiqi

Obyekt modeli

Bir obyekt.style.listStyle

Spesifikasiya

Hər bir spesifikasiya bir neçə təsdiq mərhələsindən keçir.

Tövsiyə - Spesifikasiya W3C tərəfindən təsdiq edilmişdir və standart olaraq tövsiyə olunur.
Namizəd Tövsiyəsi ( Mümkün tövsiyə) - standarta cavabdeh olan qrup onun məqsədlərinə cavab verdiyindən razıdır, lakin standartın tətbiqi üçün inkişaf cəmiyyətindən kömək tələb edir.
Təklif olunan Tövsiyə Təklif olunan Tövsiyə) - bu mərhələdə sənəd yekun təsdiq üçün W3C Məsləhət Şurasına təqdim edilir.
İşçi Layihə - Müzakirə edilmiş və icmanın nəzərdən keçirilməsi üçün düzəliş edilmiş layihənin daha yetkin versiyası.
redaktor layihəsi ( Redaksiya layihəsi) - layihə redaktorları tərəfindən dəyişikliklər edildikdən sonra standartın qaralama versiyası.
qaralama ( Layihə spesifikasiyası) - standartın ilk qaralama variantı.

Brauzerlər

Brauzer cədvəlində aşağıdakı qeydlərdən istifadə olunur.

Veb Dilləri kataloqundan material

İstifadə olunan dəyərlər

sStyle Xətt, aşağıdakı dəyərlərdən birdən üçə qədər müəyyən edə və götürə bilər:

Bu xüsusiyyət bütün obyektlər üçün oxunur/yazılır. Varsayılan dəyərdir disk xaricində yoxdur. Cascading Style Sheets (CSS) atributu miras alınır.

Qeydlər

Əmlak siyahıStil universal mürəkkəb xassədir. Həm növ, həm də şəkil təyin edildikdə, listStyleImage təyin edilmədiyi halda, şəkil dəyəri üstünlük təşkil edir (şəkil standart siyahı markerlərindən biri deyil, göstəriləcək). heç biri və ya keçid ( URL) təsvirin üzərində səhv quraşdırılıb və ya köhnəlmişdir.

Əmlak siyahıStil təyin edilmiş bütün elementlərə də aiddir siyahı maddəsiəmlak üçün göstərin. Siyahı markerinin qalın nöqtələr kimi görünməsini təyin etmək üçün siz margin xassəsini təfərrüatlı şəkildə göstərməlisiniz və ya dəyər təyin etməlisiniz. içəri listStylePosition xüsusiyyəti üçün bu elementlərdə.

Əmlak dəyərləri siyahıStil istənilən ardıcıllıqla təsvir edilə bilər. Onlar boşluqla ayrılmalıdır.

Nümunələr

Aşağıdakı nümunələr əmlakın istifadəsini göstərir siyahıStil və atribut siyahı tərzi siyahı stilini təyin etmək üçün.

Nümunə siniflərdən istifadə edir ul Və UL.kompakt, həmçinin atribut siyahı tərzi iki sırasız siyahını müəyyən etmək üçün. Sinif üçün UL.kompakt-də təsvir olunan rəsmi əvəz etmək ul, dəyəri təyin etməlisiniz heç biri list-style-image atributu üçün.

İkinci nümunə əmlakdan istifadə edir siyahıStil. Siyahı üçün göstərilən şəkil mövcud deyilsə, marker istifadə olunacaq içi boş dairə(boş dairə).

Üçüncü nümunə əmlakın olduğunu göstərir siyahıStil xüsusiyyətinə malik olan elementlər üçün tətbiq edilir göstərin dəyərini alır siyahı maddəsi.

HTML arayışı HTML dərsləri Veb saytın yaradılması üzrə video kurslar

SİYAHI STYLE əmlakı

Əmlak	Dəyərlər	və s.*	Hc*
siyahı tərzi	[siyahı üslubu-şəkil; siyahı tərzi-mövqe; list-style-type ], miras alır	*	+
siyahı stili növü	disk , dairə, kvadrat, ondalık, ondalıq ön-sıfır, aşağı-roman, yuxarı-roman, aşağı-latın, yuxarı-latın, erməni, gürcü, heç biri, miras	*	+
siyahı tərzi-mövqe	içəridə, xaricdə, varislik etmək	*	+
siyahı tərzi-şəkil	URL, heç biri , varis	*	+

Əmlak Siyahı tərzi— siyahı elementləri üçün bütün marker üslublarını müəyyən edən yazı xassələrinin qısaldılmış forması. 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. Qeydin qısa formasına heç bir fərdi xüsusiyyət daxil olmaya bilər, lakin onların yazıldığı sıraya riayət edilməlidir: marker növü - onun mövqeyi - təsvir yolu.

Tətbiq sahəsi*: siyahı elementləri və əmlak dəyəri olan hər hansı digər Ekran 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ğı romantika- Kiçik hərflə Roma nömrələmə.
yuxarı romalı- Böyük hərflə Roma nömrələmə.
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 istifadə olunur müxtəlif mənalar xassələri 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

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

Dəyərlər:

URL— qrafik fayla gedən yol.
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ə, mülkiyyətin imkanlarını aydın şəkildə nümayiş etdirən kiçik bir şəkildən marker kimi istifadə etdik. Siyahı tərzi-şəkil:

Veb Dilləri kataloqundan material

İstifadə olunan dəyərlər

Xətt

Bu xüsusiyyət currentStyle (yalnız oxumaq üçün) istisna olmaqla, bütün obyektlər üçün oxunur/yazılır. Varsayılan dəyərdir heç biri. Cascading Style Sheets (CSS) atributu miras alınır.

Qeydlər

Əmlak listStyleImage marjası olan bütün elementlərə aiddir və ekran:siyahı maddəsi.

Şəkil mövcud olduqda, listStyleType təyin edilmiş marker şəklini əvəz edir.

Mülk üçün siyahı marker şəklini göstərmək üçün marja minimuma təyin edilməlidir 30 pt.

Nümunələr

Aşağıdakı nümunələr əmlakın istifadəsini göstərir listStyleImage və atribut siyahı tərzi-şəkil siyahı marker şəklini təyin etmək üçün.

Birinci nümunə seçicidən istifadə edir ul və atribut siyahı tərzi-şəkil.

İkinci nümunə əmlakdan istifadə edir listStyleImage hadisə baş verdikdə marker üslubunu dəyişdirmək üçün siçan üzərində.