CSS-regler för att anpassa utseendet på en lista på en HTML-sida. liststilsegenskap (typ, bild, position)

15.07.2021

Läs också

Kameratips för Samsung Galaxy S8 och S8 Plus

Samsung Galaxy J1 vs Samsung Galaxy J3 - jämförelse av två vanliga smartphones

För smartphones och surfplattor ser det ut så här

Firmware för smartphone Samsung GT-I9300 Galaxy S III Firmware för telefon samsung galaxy s3 gt i9300

Cyklisk omstart av Samsung Smartphone: Orsaker och lösningar

Beskrivning

En universell egenskap som gör att du samtidigt kan ställa in stilen på markören, dess position, såväl som bilden som kommer att användas som markör. För detaljerad information, se informationen om varje fastighet, och separat.

Syntax

list-stil: list-stil-typ || list-stil-position || list-stil-bild | ärva

Värderingar

Valfri kombination av de tre markörstilsvärdena, separerade med ett mellanslag. Värdekombinationerna måste vara i den ordning som anges, med markörtyp först, sedan position och bild. Inget av värdena krävs, så oanvända kan utelämnas.

Ärver Ärver värdet av föräldern.

HTML5 CSS2.1 IE Cr Op Sa Fx

liststil

Lorem ipsum dolor sit amet
Consectetuer adipiscing 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.

Resultat detta exempel visad i fig. 1.

Ris. 1. Tillämpa egenskapen liststil

Objektmodell

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

Webbläsare

Internet Explorer upp till version 7.0 stöder inte ärvt värde.

Material från Web Language Reference

Använda värden

sPlats Linje, som kan definiera och ta ett av följande värden:

Den här egenskapen är läs/skriv för alla objekt utom currentStyle (skrivskyddad). Standardvärdet är ingen. CSS-attributet (Cascading Style Sheets) ärvs.

Anmärkningar

Fast egendom listStyleImage gäller alla element som har marginaler och visa:listobjekt.

När en bild är tillgänglig ersätter den markörbilden i listStyleType .

För att visa listmarkörsbilden för egenskapen marginal måste ställas in på minimum 30 pkt.

Exempel

Följande exempel illustrerar användningen av fastigheten listStyleImage och attribut list-stil-bild för att ställa in listmarkeringsbilden.

Det första exemplet använder väljaren ul och attribut list-stil-bild.

Det andra exemplet använder egenskapen listStyleImage för att ändra markörstil när en händelse inträffar på musen över.

Hej kära läsare av bloggsidan. Idag kommer det att finnas ytterligare en artikel om egenskaperna hos cascading style sheets. Det kommer att fokusera på styling med CSS-regler.

I allmänhet skiljer sig listor mellan blockelement. Detta beror på att de inkluderar markörer och numrering, som placeras av webbläsaren själv.

Liststilsegenskap - listdesign på html-sida

Det finns tre egenskaper i CSS som börjar med liststil och är ansvariga för att utforma punktlistor och numrerade listor. Dessutom finns det en prefabricerad regel i liststil som låter dig minska mängden kod.

Alla dessa egenskaper kan användas till html-element li, samt för ul- och ol-element. Den enda skillnaden är att om reglerna är skrivna för ett specifikt värde på li-listan, så kommer det bara att tillämpas för det. Och om samma css-regler skrivs för ul- eller ul-behållare, kommer de att tillämpas på alla li-element som finns i dessa behållare.

Låt oss börja med ett attribut list-stil-typ, som sätter typ av markörer eller numrering för listobjekt:

Som du kan se har egenskapen list-style-type många tillgängliga värden som kan specificera både typen av markör och olika typer av numrering.

skiva - svart cirkelmarkör (standard för punktlistor).
cirkel - en markör i form av en ofylld cirkel.
fyrkantig - fyrkantig markör. Det kan vara ljust eller mörkt, beroende på webbläsare.
decimal - numrering med arabiska siffror (standardvärde för numrerade listor).
decimal-ledande-noll - arabiska siffror från 01 till 99 med en inledande nolla.
lägre-romerska - numrering i små romerska siffror.
övre-romerska - numrering med stora romerska siffror.
lägre grekiska - numrering med lägre grekiska bokstäver.
lägre alfa och lägre latin - numrering med små latinska bokstäver.
övre-alfa och övre-latin - numrering med stora latinska bokstäver.
armeniska - numrering med traditionella armeniska siffror.
georgisk - numrering med traditionella georgiska siffror.
ingen - märkning och numrering kommer inte att utföras alls.

Så här kommer listobjekten att se ut i webbläsaren med olika betydelser list-stil-typ:

På använder CSS stilar spelar ingen roll vilket element (OL eller UL) som används för att skapa listan. OL och UL skiljer sig endast i deras standardbeteende, och med egenskapen list-style-type kan du enkelt förvandla en listvy till en annan.

stilattribut list-stil-bild låter dig ställa in som markör listobjekt grafisk bild. När du använder list-style-image-attributet ignoreras värdet för list-style-type-attributet:

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

Menande ingen tar bort bildmarkören och ställer in den på en vanlig, inte en grafisk. Detta är standardbeteendet.

När du anger adressen till bildfilen kommer en bild att infogas i stället för markören. Precis som med att använda , kan både absoluta och relativa adresser användas som bildadress. Om webbläsaren misslyckas med att ladda bilden kommer standardmarkören eller numreringen att användas, eller vad som än anges i egenskapen list-style-type.

Ett exempel på en lista med en bild som markör:

den första posten i listan;

den andra punkten på listan;

tredje punkten på listan.

Och så här ser det ut:

den första posten i listan;
den andra punkten på listan;
tredje punkten på listan.

Det är tydligt att när man väljer en bild som markör är det bättre att välja en liten bild.

Och den sista CSS-egenskapen från liststilsserien - list-stil-position, som låter dig ange platsen för en kula eller nummer i ett listobjekt. Det kan finnas två alternativ för värdet:

list-stil-position: inuti|utsida

Vid värde inuti markören eller numreringen placeras så att säga inne i listan och i fallet utanför utanför li-element. Standardvärdet är utanför och markören flyttas utanför.

Listexempel med olika liststilspositionsvärden:

i första stycket är allt som standard;
i andra stycket är list-style-position satt till insidan. Observera i detta fall att den andra raden är placerad i jämnhöjd med markören;
vid denna punkt är liststil-position utanför.

Regel för anpassad CSS-lista

Följande egenskap i CSS-liststil är prefabricerad för stylinglistor. Det låter dig skriva alla tre CSS-reglerna som diskuterats ovan till en enda. Ordningen för att specificera värdena i den kan vara vilken som helst och parametrarna som du inte ställer in i liststil kommer att tas av webbläsaren som standard.

Separera värden i en prefab i liststil med mellanslag:

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

En riktig CSS-regel för stylinglistor kan se ut ungefär så här:

list-stil: cirkel url (//site/images/marker.png) utanför;

Således kan liststilsegenskapen minska mängden kod avsevärt, för istället för tre regler räcker det att endast ange en.

Som nämnts ovan kan värden anges i valfri ordning och vilket nummer som helst. Så till exempel för att ta bort markörer från menylistan Nog att skriva:

list-stil: ingen;

Detsamma kan göras med egenskapen list-style-type:

list-stil-typ: ingen;

På denna berättelse om designen html listor Med Cascading Style Sheets avslutar jag. Att lära sig om andra CSS-egenskaper du kan läsa artiklar från avsnittet " " och glöm inte att prenumerera på blogguppdateringar. Ses snart!

Material från Web Language Reference

Använda värden

Linje

Denna egenskap är läs/skriv för alla objekt. Standardvärdet är skiva utanför ingen. CSS-attributet (Cascading Style Sheets) ärvs.

Anmärkningar

Fast egendom liststilär en generisk sammansatt egenskap. När båda värdena är inställda för typen och även för bilden, har värdet för bilden företräde (bilden kommer att visas snarare än en av standardlistmarkörerna), förutom när listStyleImage är inställd på ingen eller länk ( URL) på bilden är felaktigt inställd eller inaktuell.

Fast egendom liststil gäller även alla element som är inställda på listobjekt för egendom visa. För att ställa in visningen av listmarkören som feta punkter måste du beskriva marginalegenskapen i detalj eller ställa in värdet inuti för egenskapen listStylePosition på dessa element.

Värden i en fastighet liststil kan beskrivas i valfri ordning. De måste vara åtskilda av ett mellanslag.

Exempel

Följande exempel illustrerar användningen av fastigheten liststil och attribut liststil för att styla listan.

I exemplet används klasser ul Och UL kompakt, såväl som attributet liststil för att definiera två oordnade listor. För klass UL kompakt för att ersätta mönstret som beskrivs i ul måste du ställa in värdet ingen för attributet list-style-image.

Det andra exemplet använder egenskapen liststil. Om bilden som anges för listan inte är tillgänglig kommer markören att användas. ihålig cirkel(tom cirkel).

Det tredje exemplet visar att fastigheten liststil gäller för element som har en egenskap visa tar på sig värdet listobjekt.

HTML-referens HTML-handledningar Webbplatsbyggande Videokurser

Med egenskapen LIST-STYLE

Fast egendom	Värderingar	Etc*	Hc*
liststil	[list-stil-bild; list-stil-position; list-stil-typ ], ärva	*	+
list-stil-typ	disk , cirkel, kvadrat, decimal, decimal-ledande-noll, lowel-romersk, övre-romersk, lowel-latin, övre-latin, armenisk, georgisk, ingen, ärva	*	+
list-stil-position	inuti, utanför, ärva	*	+
list-stil-bild	URL, ingen , ärv	*	+

Fast egendom Liststilär en förkortad form av skrivegenskaper som anger alla stilar av markörer för listobjekt. Dessa egenskaper gäller både numrerade och punktlistor - de måste övervägas separat. Den förkortade formen av notation får inte innehålla någon enskild egenskap, men ordningen för deras notation måste respekteras: markörtyp - dess position - sökväg till bilden.

Applikationsområde*: element av listor och andra för vilka egenskapen värde visaär listobjekt.

List-stil-typ

Egenskapsuppsättningar markörtyp för varje element i listan. Punkttyper skiljer sig för punktlistor och numrerade listor.

Värden:

disk- prickmarkör.
cirkel- cirkelmarkör.
fyrkant- fyrkantig markör.
decimal- Arabiska siffror: 1, 2, 3 ....
decimal-ledande-noll- Arabiska tal, från noll: 01, 02, 03 ... 09.
lowel-romersk- Romerska siffror med gemener.
övre romerska- Romerska siffror i versaler.
lowel-latin- latinska små bokstäver: a, b, c ....
övre-latin— latinska versaler: A, B, C ….
armeniska- Armenisk numrering.
georgiska- Georgisk numrering.
ingen- avbokning.
ärva

Exemplet använder två olika betydelser egenskaper List-stil-typ:

list-stil-position

Egenskapen anger platsen för elementets markör. Antingen är markören inuti elementet eller utanför det.

Värden:

inuti- markören är placerad inuti listelementet.
utanför- markören flyttas utanför textblocket.
ärva- arv från det överordnade elementet.

Exemplet visar tydligt skillnaden mellan värdena inuti Och utanför egenskaper list-stil-position:

List-stil-bild

Egenskapen anger sökvägen till bilden som ska fungera som en markör för den numrerade eller punktlista. Platsen för markörbilden kan styras med hjälp av egenskapen list-stil-position.

Värden:

URL— sökväg till grafikfilen.
ingen- avbryter markörbilden, till exempel för det överordnade elementet.
ärva- arv från det överordnade elementet.

Ul (list-style-image: url(papka/find.png); list-style-position:inside;)

I exemplet använde vi en liten bild som markör, som tydligt visar egenskapen för egenskapen. List-stil-bild: