CSS-szabályok a lista megjelenésének testreszabásához egy html-oldalon. listastílus tulajdonság (típus, kép, pozíció)

15.07.2021

Olvassa el is

Kameratippek Samsung Galaxy S8 és S8 Plus készülékekhez

Samsung Galaxy J1 vs Samsung Galaxy J3 - két mainstream okostelefon összehasonlítása

Okostelefonok és táblagépek esetében ez így néz ki

Okostelefon firmware Samsung GT-I9300 Galaxy S III telefon firmware samsung galaxy s3 gt i9300

Samsung okostelefon ciklikus újraindítás: okok és megoldások

Leírás

Univerzális tulajdonság, amely lehetővé teszi a jelölő stílusának, pozíciójának, valamint a jelölőként használandó kép egyidejű beállítását. Részletes információkért tekintse meg az egyes ingatlanokra vonatkozó információkat, külön-külön is.

Szintaxis

list-style: list-style-type || list-style-position || list-style-image | örököl

Értékek

A három jelölőstílus-érték tetszőleges kombinációja, szóközzel elválasztva. Az értékkombinációknak a felsorolt sorrendben kell lenniük, először a marker típusával, majd a pozícióval és a képpel. Egyik érték sem kötelező, így a nem használtak elhagyhatók.

Inherit A szülő értékét örökli.

HTML5 CSS2.1 IE Cr Op Sa Fx

lista stílusa

Lorem ipsum dolor sit amet
Consectetuer adipising elit
Sed diem nonummy nibh euismod
Tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Eredmény ezt a példátábrán látható. 1.

Rizs. 1. A lista-stílus tulajdonság alkalmazása

Objektummodell

document.getElementById("elementID ").style.listStyle

Böngészők

Az Internet Explorer 7.0-s verzióig nem támogatja az öröklési értéket.

A Web Language Reference anyaga

Felhasznált értékek

sHelyszín Vonal, amely a következő értékek egyikét határozhatja meg és veheti fel:

Ez a tulajdonság minden objektum számára olvasható/írható, kivéve a currentStyle (csak olvasható). Az alapértelmezett érték egyik sem. A Cascading Style Sheets (CSS) attribútum öröklődik.

Megjegyzések

Ingatlan listStyleImage minden olyan elemre vonatkozik, amely margókkal és kijelző:listaelem.

Ha elérhető egy kép, az lecseréli a listStyleType-ban beállított jelölőképet.

A tulajdonsághoz tartozó listajelölő kép megjelenítéséhez árrés minimumra kell állítani 30 pont.

Példák

A következő példák szemléltetik az ingatlan használatát listStyleImageés tulajdonság lista-stílus-kép a listajelölő képének beállításához.

Az első példa a választót használja ulés tulajdonság lista-stílus-kép.

A második példa a tulajdonságot használja listStyleImage a jelölő stílusának megváltoztatásához, amikor egy esemény bekövetkezik az egér felett.

Sziasztok, a blogoldal kedves olvasói. Ma egy újabb cikk lesz a lépcsőzetes stíluslapok tulajdonságairól. A CSS-szabályokkal történő stílusra összpontosít.

Általánosságban elmondható, hogy a listák különállóak a blokkelemek között. Ez annak köszönhető, hogy jelölőket és számozást tartalmaznak, amelyeket maga a böngésző helyez el.

Listastílus tulajdonság - listatervezés html oldalon

A CSS-ben három olyan tulajdonság található, amelyek listastílussal kezdődnek, és a felsorolásjeles és számozott listák stílusáért felelősek. Ezenkívül létezik egy lista stílusú előregyártott szabály, amely lehetővé teszi a kód mennyiségének csökkentését.

Mindezek a tulajdonságok felhasználhatók html elemeket li, valamint az ul és ol elemekhez. Az egyetlen különbség az, hogy ha a szabályok a li lista egy adott értékére vannak írva, akkor az csak arra vonatkozik. És ha ugyanazok a css szabályok vannak az ul vagy ul tárolókhoz írva, akkor ezek az ezekben a tárolókban található összes li elemre vonatkoznak.

Kezdjük egy tulajdonsággal lista-stílusú, amely beállítja amolyan markerek vagy számozás listaelemekhez:

Amint láthatja, a listastílus típusú tulajdonság számos elérhető értékkel rendelkezik, amelyek meghatározhatják a jelölő típusát és a számozás különböző típusait.

lemez – fekete kör jelölő (alapértelmezett listajeles listáknál).
kör - egy jelölő kitöltetlen kör formájában.
négyzet - négyzet jelölő. A böngészőtől függően világos vagy sötét lehet.
decimális - számozás arab számokkal (a számozott listák alapértelmezett értéke).
decimális kezdő nulla – arab számok 01-től 99-ig, kezdő nullával.
alsó-római - számozás kis római számokkal.
felső-római - számozás nagy római számokkal.
alsó-görög - számozás kisebb görög betűkkel.
alsó-alfa és alsó-latin - számozás kis latin betűkkel.
felső-alfa és felső-latin - számozás nagy latin betűkkel.
örmény - számozás hagyományos örmény számokkal.
grúz - számozás hagyományos grúz számokkal.
nincs - jelölés és számozás egyáltalán nem történik meg.

Így fognak kinézni a listaelemek a böngészőben különböző jelentések list-style-type:

Nál nél CSS használatával A stílusok nem számítanak, hogy melyik elemet (OL vagy UL) használja a lista létrehozásához. Az OL és az UL csak az alapértelmezett viselkedésükben különbözik, és a listastílus-típus tulajdonsággal könnyedén átváltoztathatja az egyik listanézetet a másikba.

stílus attribútum lista-stílus-kép lehetővé teszi a beállítást jelző listaelemek grafikus kép. A list-style-image attribútum használatakor a list-style-type attribútum értéke figyelmen kívül marad:

list-style-image: nincs|<интернет-адрес файла изображения>|örökölni

Jelentése egyik sem eltávolítja a képjelölőt, és normálra állítja be, nem grafikusra. Ez az alapértelmezett viselkedés.

A képfájl címének megadásakor a jelölő helyére egy kép kerül beillesztésre. A használatához hasonlóan abszolút és relatív címek is használhatók képcímként. Ha a böngésző nem tudja betölteni a képet, akkor az alapértelmezett jelölőt vagy számozást, vagy a list-style-type tulajdonságban megadottat fogja használni.

Példa egy képet jelölő listára:

a lista első eleme;

a lista második eleme;

harmadik elem a listán.

És így néz ki:

a lista első eleme;
a lista második eleme;
harmadik elem a listán.

Nyilvánvaló, hogy ha képet választunk jelölőként, jobb, ha egy kis képet választunk.

És az utolsó CSS tulajdonság a lista stílusú sorozatból - lista stílusú pozíció, amely lehetővé teszi egy listaelemben lévő golyó vagy szám helyének megadását. Két lehetőség közül választhat az értékhez:

lista-stílus-pozíció: belső|külső

Érték esetén belül a jelölő vagy a számozás mintegy a listán belül és a tokban található kívül li elemeken kívül. Az alapértelmezett érték kívül van, és a marker kívülre kerül.

Listapélda különböző listastílus-pozícióértékekkel:

az első bekezdésben alapértelmezés szerint minden;
a második bekezdésben a list-style-pozíció belső értékre van állítva. Ebben az esetben vegye figyelembe, hogy a második vonal egy szintben van a jelölővel;
ezen a ponton list-style-pozíció kívül van.

Egyéni CSS-lista stílusú szabály

A következő CSS-lista-stílus tulajdonság előre gyártott listák stílusához. Lehetővé teszi, hogy a fent tárgyalt három CSS-szabályt egyetlen egybe írd. A benne lévő értékek megadásának sorrendje tetszőleges lehet, és azokat a paramétereket, amelyeket nem ad meg listastílusban, alapértelmezés szerint átveszi a böngésző.

Az értékek elválasztása egy lista stílusú előregyártmányban szóközökkel:

lista-stílus: lista-stílus-típus lista-stílus-kép listastílus-pozíció;

Egy igazi CSS-szabály a listák stílusához valahogy így nézhet ki:

list-style: circle url (//site/images/marker.png) kívül;

Így a lista stílusú tulajdonság jelentősen csökkentheti a kód mennyiségét, mert három szabály helyett elég csak egyet megadni.

Mint fentebb említettük, az értékek tetszőleges sorrendben és számmal megadhatók. Tehát például annak érdekében jelölők eltávolítása a menülistából Elég leírni:

lista-stílus: nincs;

Ugyanezt megtehetjük a list-style-type tulajdonság használatával:

list-style-type: nincs;

Ebben a történetben a tervezésről html listák A lépcsőzetes stíluslapokkal fejezem be. Másokról tanulni CSS tulajdonságok cikkeket olvashat a " " szakaszból, és ne felejtsen el feliratkozni a blogfrissítésekre. Hamarosan találkozunk!

A Web Language Reference anyaga

Felhasznált értékek

Vonal

Ez a tulajdonság minden objektumhoz olvasható/írható. Az alapértelmezett érték a lemez kívül nincs. A Cascading Style Sheets (CSS) attribútum öröklődik.

Megjegyzések

Ingatlan listStyle egy általános összetett tulajdonság. Ha mindkét érték be van állítva a típushoz és a képhez is, akkor a kép értéke élvez elsőbbséget (a kép jelenik meg, nem pedig a szabványos listajelölők egyike), kivéve, ha a listStyleImage beállítása egyik sem vagy link ( URL) a képen helytelenül van beállítva vagy elavult.

Ingatlan listStyle vonatkozik minden olyan elemre is, amelyre be van állítva listaelem ingatlanért kijelző. A listajelölő félkövér pontként való megjelenítéséhez részletesen le kell írnia a margó tulajdonságot, vagy be kell állítania az értéket belül a listStylePosition tulajdonsághoz azokon az elemeken.

Értékek egy ingatlanban listStyle tetszőleges sorrendben leírható. Ezeket szóközzel kell elválasztani.

Példák

A következő példák szemléltetik az ingatlan használatát listStyleés tulajdonság lista stílusa a lista stílusához.

A példa osztályokat használ ulÉs UL kompakt, valamint az attribútum lista stílusa két rendezetlen lista meghatározásához. Az órára UL kompakt pontban leírt minta cseréjére ul, be kell állítania az értéket egyik sem a list-style-image attribútumhoz.

A második példa a tulajdonságot használja listStyle. Ha a listához megadott kép nem érhető el, akkor a jelölő kerül felhasználásra. üreges kör(üres kör).

A harmadik példa azt mutatja, hogy az ingatlan listStyle tulajdonsággal rendelkező elemekre alkalmazható kijelző felveszi az értéket listaelem.

HTML-referencia HTML-oktatóanyagok Weboldal-építési videotanfolyamok

A LIST-STYLE tulajdonsággal

Ingatlan	Értékek	Stb*	Hc*
lista stílusa	[lista-stílus-kép; lista-stílus-pozíció; list-style-type ], öröklődik	*	+
lista-stílusú	korong , kör, négyzet, decimális, tizedes-vezető nulla, alsó-római, felső-római, alsó-latin, felső-latin, örmény, grúz, nincs, örököl	*	+
lista-stílus-pozíció	belül, kívül, örökölni	*	+
lista-stílus-kép	URL, nincs , öröklődik	*	+

Ingatlan Lista stílus az írástulajdonságok egy rövidített formája, amely beállítja a listaelemek jelölőinek összes stílusát. Ezek a tulajdonságok mind a számozott, mind a felsorolásjeles listákra vonatkoznak – ezeket külön kell figyelembe venni. A jelölés rövidített formája nem tartalmazhat egyedi tulajdonságokat, de a jelölésük sorrendjét be kell tartani: jelölő típusa - pozíciója - a képhez vezető út.

Alkalmazási terület*: listák elemei és minden olyan elem, amelyre a tulajdonság értéke kijelző van listaelem.

Lista-stílusú

Tulajdonkészletek marker típusa a lista minden eleméhez. A felsorolásjelek típusai különböznek a felsorolásjeles és a számozott listák esetében.

Értékek:

korong- pontjelölő.
kör- kör jelölő.
négyzet- négyzet jelölő.
decimális- Arab számok: 1, 2, 3 ....
decimális-vezető-nulla- arab számok, nullától kezdődően: 01, 02, 03 ... 09.
lowel-román- Római számok kisbetűvel.
felső római- Római számok nagybetűvel.
lowel-latin- kisbetűk latin betűk: a, b, c ....
felső-latin— latin nagybetűk: A, B, C ….
örmény- Örmény számozás.
grúz- Grúz számozás.
egyik sem- törlés.
örököl

A példa kettőt használ különböző jelentések tulajdonságait Lista-stílusú:

lista-stílus-pozíció

A tulajdonság megadja az elem jelölőjének helyét. A marker vagy az elemen belül van, vagy azon kívül.

Értékek:

belül- a marker a listaelemen belül található.
kívül- a marker a szövegblokkon kívülre kerül.
örököl- öröklődés a szülőelemtől.

A példa jól mutatja az értékek közötti különbséget belülÉs kívül tulajdonságait lista-stílus-pozíció:

Lista-stílusú kép

A tulajdonság megadja a kép elérési útját, amely jelölőként fog szolgálni a számozott ill pontozott lista. A markerkép helye a tulajdonság segítségével szabályozható lista-stílus-pozíció.

Értékek:

URL— a grafikus fájl elérési útja.
egyik sem- törli a jelölőképet, például a szülőelemnél.
örököl- öröklődés a szülőelemtől.

Ul (lista-stílus-kép: url(papka/find.png); list-style-position:inside;)

A példában egy kis képet használtunk jelölőként, amely egyértelműen bemutatja az ingatlan képességeit. Lista-stílusú kép: