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

Hej kära läsare av bloggsidan. Idag kommer det ytterligare en artikel i spargrisen. Det kommer att fokusera på designen med hjälp av reglerna för cascading style sheets. Allt är väldigt enkelt här, men jag bestämde mig ändå för att ägna ett separat inlägg till detta ämne.

Lite tidigare har vi redan hunnit lära oss hur, hur och hur du kan arbeta med. Nåväl, lite tidigare undersökte vi i detalj alla möjliga och deras olika kombinationer för att specificera exakt HTML-kodelementet för vilket vissa stylingegenskaper kommer att behöva tillämpas.

Liststil - listdesign i HTML-kod

Så i stilmarkeringsspråket finns det tre separata regler som börjar med liststil som tjänar till att anpassa utseende listor (numrerade eller punkterade) i koden för webbdokument. Dessutom finns det en prefabricerad Css-listliknande regel, som gör att du kan minska mängden kod något. Men först till kvarn.

Det vi nu ska överväga med dig kan användas som för Html-element LI, och för elementen Ul och Ol (punktlistor respektive numrerade listor). Vad skulle vara skillnaden när det gäller att tillämpa liststil på dessa taggar?

Egentligen kan du ta reda på om en egendom ärvs eller inte på valideringswebbplatsen (läs om på länken som tillhandahålls) i avsnittet om specifikationen av kaskadformatmallar. I kolumnen "Ärvt" mittemot kommer de ärvda reglerna att vara "Ja":

Låt oss börja med list-stil-typ, som låter dig ställa in typen av märkning för enskilda element lista html. Följande värden är tillåtna för denna regel:

1. Ingen – det kommer inte att finnas någon markering alls (list-style-type:none; tillämpas på detta objekt och därför har det ingen markör)
2. Skiva - en fylld cirkel (list-stil-typ: skivan användes precis på den här raden;)
3. Cirkel - en cirkel som en markör
4. Fyrkant - en ruta som markör
5. Decimal – arabiska siffror (liststil-typ:decimal;)
6. lägre-alfa - med gemener
7. versaler - latinska bokstäver med versaler
8. lägre-romerska - romerska siffror med gemener
9. övre-romerska - romerska siffror i versaler

Vad tror du, med hjälp av vilka delar av Ul eller Ol skapades listan precis ovan? Klurig fråga. Det visar sig att detta inte längre är viktigt, även om jag i det här fallet använde Ol, men om du ändrar det till Ul, kommer utseendet att förbli detsamma, eftersom det ställs in för varje element av sig själv CSS-värde liststilstypsregler.

I själva verket skiljer sig Ul och Ol endast i standardbeteendet (Ul - märken och Ol - siffror). Men om du vill kan du enkelt förvandla en sorts lista till en annan med liststilstyp. Teckensnittet som används för att märka siffror eller bokstäver är exakt detsamma som det du definierade för innehållet i LI-taggarna. Till exempel, genom att ändra teckensnittsfärgen för listan kommer vi att ändra och markör färg:

1. Ändrade textfärg (list-style-type:lower-roman;color:red) och ändrade markörfärg

Låt oss gå vidare till följande CSS-egenskap − list-stil-position. Med den kan du ställa in positionen (placeringen) för området med markören. Den har bara två möjliga värden:

De där. Faktum är att i liststil-positionen anger vi var vi vill placera området med markörer - utanför LI-elementet (utanför) eller inuti det (inuti). Som standard tas området med markören utanför gränserna, dvs. värdet utanför används.

Låt oss se detta med ett exempel. I det första elementet i listan kommer jag specifikt att skriva list-style-position:inside och vi får se vad som kommer av det:

1. Allt är standard här.
2. Så här kommer placeringen av markörområdet med insida att se ut. Observera att den andra raden i detta element och markören är på samma nivå.
3. Allt är standard här.

List-stil-bild och prefabricerad CSS-regel

Näst på tur är List-style-image - låter dig ange en bild som ska användas som markör. Den här regeln är inställd på Ingen som standard (dvs. ingen bild används som en markör), men du kan skriva URL-funktionen () och ange sökvägen till bilden i den, som senare kommer att fungera som en markör i den här listan:

Det kan se ut så här:

List-style-image: url(https://website/images/list_star.png);

1. Allt är standard här.
2. Så här kan det se ut att använda en bild som markör. Det är tydligt att du kan välja en mer lämplig bild för detta ändamål.
3. Till exempel som här.

Som ni minns sa jag i artikeln om att bilder hänvisar till inline-element (i själva verket är det samma bokstav för webbläsaren, men ibland väldigt stor).

Här är bilden och tar plats för markören (bokstäver eller siffror). Samtidigt kommer höjden på linjen med listelementet att ökas om du infogar en stor bild som markör (som hände i det andra elementet i exemplet ovan).

I liststilens bildfunktion kan du ange båda bilderna. Om bilden inte laddas kommer standardmarkören eller numreringen att användas, eller vad som än står i liststilstypen för detta listelement.

För att skriva alla tre CSS-regler som beskrivs ovan till en enda, kommer det att vara möjligt att använda List-style, som är prefabricerad för stylinglistor. Ordningen i vilken värdena anges spelar ingen roll. Värden som du inte anger i liststil kommer att tolkas explicit av webbläsaren med standardvärden.

Var kan jag se standardvärdena? Ja, allt är på samma plats - i CSS-specifikationen för W3C-valideraren i kolumnen "Initialt värde" mittemot egenskaperna du är intresserad av:

Värden för enskilda fastigheter i en prefab i liststil är separerade med mellanslag. Platser, som redan nämnts, är inte viktiga:

I praktiken kan detta se ut så här:

List-style:inside upper-roman url(https://site/images/list_star.png);

Du kan använda värden i valfri ordning och vilket nummer som helst (med början från ett). Förresten, med hjälp av listor bildas oftast menyer på webbplatser, och egenskapen List-stil används för att för att ta bort markörer från menylistor, som är helt onödiga där:

list-style-type:none;

Liststil:ingen;

Lycka till! Vi ses snart på bloggens sida

Du kanske är intresserad

Visa (blockera, ingen, inline) i CSS - ställ in visningstypen för HTML-element på en webbsida Hur man ändrar bakgrundsfärgen för raderna med tabeller, listor och andra HTML-element på webbplatsen med hjälp av pseudoklassen nth-child
Flyta och rensa i CSS - blocklayoutverktyg
Positionering med Z-index och CSS-markörregel för att ändra muspekaren
Position (absolut, relativ och fix) - sätt att placera HTML-element i CSS (vänster, höger, övre och nedre regler)
Vad är CSS för, hur man ansluter kaskadformatmallar till ett HTML-dokument och grunderna i syntaxen för detta språk
CSS-egenskaper text-dekoration, vertikal-align, text-align, text-indent för HTML-textdekoration
Regler för typsnitt (vikt, familj, storlek, stil) och linjehöjd för stiltypsnitt i CSS
Bakgrund i CSS (färg, position, bild, upprepning, bilaga) - allt för att ställa in bakgrundsfärgen eller bakgrundsbilden för HTML-element
CSS - vad är det, hur kaskadformatmallar är anslutna till html-kod med stil och länk
Prioriteter i Css och deras ökning på grund av Viktigt, kombination och gruppering av väljare, användar- och författarestilar

Ställer in adressen till en bild som fungerar som en listmarkör. Den här egenskapen ärvs, så värdet av none används för individuella listobjekt för att återställa token.

kort information

Syntax

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

I det här kapitlet kommer vi att studera stilattributen som definierar styckealternativ. Paragrafer i ordets vidaste bemärkelse – som omfattar både rubriker och listor, och adresstaggar och bra citat. I allmänhet element på blocknivå, diskuterade i kapitel 2 och avsedda för att strukturera text.

Slutligen ska vi titta på två mycket specifika stilattribut som gör att vi kan ställa in visningen av ett webbsideselement (dvs. block eller inline) och göra elementet osynligt. Dessa stilattribut används sällan och endast i samband med vissa beteenden (se del III).

Alternativ för textutmatning

Vi börjar med stilattributen som styr textutmatning i blockelement som strukturerar texten. Det finns väldigt få av dem. Och alla är endast tillämpliga på blockelement.

Attributet text-align style anger den horisontella justeringen av texten:

text-align: left|right|center|justify|ärva

Värdena som är tillgängliga här är vänster (vänsterjusterat; normalt webbläsarbeteende), höger (högerjusterat), centrerat (centrerat) och justerat (heljusterat).

Exempel:

P (textjustera: justera)
H1 ( textjustera: mitten )

Attributet text-indent style anger indraget för den "röda linjen":

textindrag:<отступ "красной строки">

Absoluta och relativa (relativt styckets bredd) indragsvärden är tillåtna här. Som standard är indraget på den "röda linjen" noll. Observera att attributet text-indent style inte stöder ett ärvt värde.

Exempel:

P (text-indrag: 5 mm)

Nu kommer styckena att få en "röd linje".

Listor sticker ut bland blockelementen. I grund och botten, eftersom de för det första innehåller andra blockelement (separata stycken), och för det andra inkluderar de markörer och numrering, som placeras av webbläsaren själv. Här kommer vi att prata om markörer och numrering, eller snarare om stilattribut avsedda att ställa in deras parametrar.

Attributet list-style-type style anger typen av punktpunkter eller numrering för listobjekt:

list-stil-typ: skiva|cirkel|kvadrat|decimal|decimal-ledande-noll|

nedre-romerska|övre-romerska|nedre-grekiska|nedre-alfa|nedre-latin|

övre-alfa|övre-latinska|armeniska|georgiska|ingen|ärva

Som du kan se har detta stilattribut många tillgängliga värden. De betecknar både olika typer av markörer och olika sätt att numrera.

Skivmarkör i form av en svart cirkel (vanligt beteende för punktlistor).

Cirkel - en markör i form av en ljus cirkel.

Square - en markör i form av en kvadrat. Det kan vara ljust eller mörkt, beroende på webbläsare.

Decimal - numrering med arabiska siffror (vanligt beteende för numrerade listor).

Decimal-ledande-nolla - Arabiska siffror från 01 till 99 med en inledande nolla.

Lägre romersk - numrering i små romerska siffror.

Upper-roman - numrering i 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-latinska - numrering med stora latinska bokstäver.

Armeniska - numrering med traditionella armeniska siffror.

Georgisk - numrering med traditionella georgiska siffror.

Ingen - Ingen markör eller numrering (vanligt beteende för icke-listor).

PÅ EN NOTERA

Vi har bara täckt attributvärdena av liststil som tillhandahålls av CSS 3. Men CSS 2 gav några fler värden som fortfarande stöds av webbläsare. Du kan hitta dem på https://developer.mozilla.org/en/CSS/list-style-type.

Style-attributet list-style-type kan ställas in på båda listor, och för enskilda listobjekt. I det senare fallet skapas en lista där objekten har olika kulor eller numrering. Ibland kan detta komma väl till pass.

Här är definitionen av en punktlista med en ruta:

UL ( list-style-type: square )

Och i Listing 9.1 ställer vi in ​​samma markör för ett av objekten i punktlistan.

Attributet list-style-image style låter dig ställa in vilken grafisk bild som helst som listobjektsmarkör (skapa en grafisk markör). I det här fallet ignoreras värdet för stilattributet list-style-type, om något finns:

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

Internetadressen för den grafiska markörfilen anges i samma format som Internetadressen för bakgrundsbildfilen (se kapitel 8):

UL ( list-style-image: url(/markers/dot.gif) )

Ett värde på ingen tar bort den grafiska markören och returnerar en enkel, icke-grafisk markör. Detta är normalt beteende.

Attributet list-style-image style kan också ställas in både för listorna själva och för enskilda listobjekt.

Attributet list-style-position style låter dig ange platsen för en punkt eller ett nummer i ett listobjekt:

list-stil-position: inside|outside|ärva

Det finns två tillgängliga värden:

Inuti - markören eller numreringen är så att säga inuti listobjektet, de är en del av det;

Utanför - markören eller numreringen är utanför stycket lista(detta är normalt beteende).

Det är inte klart varför detta stilattribut behövs, eftersom listor, där markören eller numreringen tas ut ur styckena, är bättre läsbara. Tja, eftersom det är i CSS-standarden, så är det så...

Exempel:

OL ( liststil-position: inuti )

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 listmarkör.

kort information

Med egenskapen LIST-STYLE

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 på deras notation måste respekteras: markörtyp - dess position - sökväg till bilden.

Applikationsområde*: element av listor och alla 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— markör-punkt.
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 en bild som kommer att fungera som en markör för ett element i en numrerad eller punktlista. Platsen för markörbilden kan styras med hjälp av egenskapen list-stil-position.

Värden:

URL- väg till grafisk fil.
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: