Zasnova seznama: skupina lastnosti seznama v CSS

Seznami so pomemben element spletne strani. Pomagajo strukturirati informacije in jih predstaviti v uporabniku prijazni obliki. Poleg tega so v obliki seznamov pogosto sestavljeni meniji in navigacijske plošče. Upravljanje položaja in videza označevalnega elementa omogoča skupino lastnosti CSS-style-style.

Vrste seznama

Naročeni in neurejeni seznami. Prvi marker je lahko katerikoli znak, ki se ne spremeni od točke do točke, drugič ima vsak element seznama lasten označevalec, ki določa njegovo lokacijo med drugimi.

Na naročenih seznamih za označevanje se običajno uporabljajo številke ali črke različnih sistemov in abeced.

Glede na stopnjo gnezdenja, enostopenjske in seznami na več ravneh. Vsaka raven ima pogosto svoj znak.

Uporaba seznamov pri ustvarjanju menijev ali vrstic za navigacijo spodbuja najnovejša različica standarda HTML, ker ima ta element pomemben pomen.

Prikaži v CSS

Vsak element je blok zabojnik s posebno vrsto zaslona: element seznama. Ta privzeta vrednost je privzeta za elemente li, ki se nahajajo znotraj vsebnikov ul in ol, in preden blokira oznako.

Po potrebi lahko ta tip zaslona nastavite za vse vsebnike HTML. Novi element za etiketiranje je oblikovan s skupino lastnosti sloga v slogu CSS.

p {prikaz: list-item-list-type-style: decimalna}

Vse tri od naslednjih lastnosti so podedovali otroci, ki imajo prikaz: element seznama in, če je potrebno, zahtevajo izrecno override.

Položaj označevalca seznama

Prva lastnost skupine je položaj v slogu seznama. Določa, ali marker ostane v besedilnem bloku ali se premakne iz njega.

Lastnost ima eno od dveh vrednosti:

• znotraj,
• zunaj.

Razlika med njimi je še posebej opazna pri več vrsticah.

.list1 {seznam-slog-položaj: zunaj -} .list2 {seznam-slog-položaj: znotraj-}

Privzeta vrednost je zunaj, oznaka seznama se premakne iz polja.

Videz označevalca

Druga lastnost - vrsta seznama sloga - nadzoruje tip oznake in lahko traja več kot petnajst vrednosti.

Številčni seznam privzeto uporablja arabske številke, za točkovno listo pa se uporablja točka. Vendar lastnosti seznama v CSS omogočajo, da spremenite te nastavitve in celo popolnoma odstranite označevalce.

Neurejeni označevalci seznama:

• disk - navadna pika, napolnjena z barvo besedila;
• krog - prazen krog s kapom v barvi besedila;
• kvadrat - zasenčeni trg.

Za naročene sezname možnosti je veliko več:

Nekatere vrednosti se podvajajo drug drugemu, na primer nižje-alfa in nižje latinske, druge pa ne podpirajo številni brskalniki in pisave.

Po potrebi se lahko markerji naročenega tipa uporabijo za neurejene liste ul in obratno.

Ločeno izberite vrednost nič, ki skrije označevalce s seznama katere koli vrste. Še posebej je uporabno pri ustvarjanju navigacijskih plošč, če želite ohraniti semantiko seznama, vendar se elementi označevanja ne ujemajo z načrtom. Prav tako se lastnost pogosto uporablja za uporabniško oblikovan stil.

.seznam {list-style-type: none;}

Marker po meri

Namesto določenih tipov oznak CSS lahko uporabite katero koli sliko. Če želite to narediti, morate povezavo prenesti na lastnost seznama slogov.

Lahko celo uporabite slike v gif formatu - animacija bo shranjena. Pomembno je, da se tega spomnite CSS-style-style prikaže sliko v polni velikosti.

.seznam {list-slog-slika: url (image.jpg) -line-višina: 25px;}

Na primer:

Poleg slikovnih datotek lahko uporabite funkcije CSS radialnih ali linearnih gradientov:

.seznam {list-style-image: radialni gradient (svetlobo, aqua, modri) -}

Oblika oznake ostane kvadratna.

Kombinirana sintaksa

Vse lastnosti, ki definirajo prikaz označevalca seznama, se lahko kombinirajo v enem slogu seznama CSS.

slog seznama: list-style-style-style-style-style-style-sl

Posebne lastnosti so naštete v prostoru, ne morejo prekiniti njihovega naročila, vendar jih lahko izpuščate:

.list1 {list-style: none;} .list2 {slog seznama: zgornji roman znotraj -} .list3 {slog seznama: znotraj url (/images/img1.jpg) -}

Za ponastavitev slogov na prvotne parametre je začetna vrednost, ki se lahko prenese v katero koli od štirih navedenih lastnosti.

Če uporabljate skupino sloga seznama lastnosti CSS v kombinaciji z učinki ciljanja, lahko ustvarite čudovite edinstvene sezname, ki pritegnejo pozornost uporabnika.