Ställa in listmarkören på olika sätt. Jag vill ändra markörtypen till en annan symbol

CSS-listor- en uppsättning egenskaper som ansvarar för utformningen av listor. Användningen av HTML-listor är mycket vanligt när man skapar webbplatsnavigeringsfält. Listelement representerar en uppsättning blockelement.

Genom att använda vanliga CSS-egenskaper kan du förändra utseende listmarkör, lägg till bild för markör, och ändra markörens plats. Markeringsblockets höjd kan ställas in med egenskapen line-height.

Stylinglistor med CSS-stilar

1. Listmarkör typ list-style-type

Egenskapen ändrar markörtypen eller tar bort markören för punktlistor och numrerade listor. Ärvt.

Syntax

Ul (list-stil-typ: ingen;) ul (list-stil-typ: kvadrat;) ol (list-stil-typ: ingen;) ol (list-stil-typ: lägre-alfa;) Ris. 1. Ett exempel på utformningen av punktlistor och numrerade listor

2. Bilder för liststil-bildelement

Bilder och övertoningsfyllningar kan användas som markörer för listobjekt. Ärvt.

Syntax

Ul (list-style-image: url("images/romb.png");) ul (list-style-image: linear-gradient(#FF7A2F 0, #FF7A2F 50%, #FFB214 50%);)
Ris. 2. Designa en punktlista med en bild
Ris. 3. Styla en punktlista med en gradient

3. Listmarkör plats list-stil-position

Den här egenskapen ger möjlighet att placera markören utanför eller inuti innehållet i listelementet. Ärvt.

Det finns två populära sätt att ändra färgen på kulorna så att de skiljer sig från färgen på texten.

Användande

Inuti varje element

skapa en struktur

I det här fallet bestäms färgen på markörerna av färgstilsegenskapen för li-väljaren, och färgen på texten bestäms av spanväljaren (exempel 1).

Exempel 1: Använda kapslade taggar

• Fiol
• Gitarr
• Säckpipor
• tunnorgel
• Celesta

Resultatet av detta exempel visas nedan (fig. 1).

Ris. 1. Markörer som skiljer sig i färg från brödtexten

Trots sin enkelhet är metoden obekväm, särskilt med stora listor, för nu måste du lägga till varje listobjekt .

Användning::före

Tanken är att ta bort de ursprungliga listmarkörerna via list-style-type-egenskapen och lägga till våra egna markörer via ::before pseudo-elementet och content-egenskapen. En sådan länk låter dig infoga vilken text eller tecken som helst före elementet, i det här fallet

Exempel 1: Använda kapslade taggar

HTML5 CSS 2.1 IE Cr Op Sa Fx

• Fiol
• Gitarr
• Säckpipor
• tunnorgel
• Celesta

Resultatet av detta exempel visas nedan (fig. 1).

Ris. 1. Markörer som skiljer sig i färg från brödtexten

Trots enkelheten är metoden obekväm, speciellt med stora listor, för nu måste du lägga till en tagg till varje listobjekt . Därför kommer vi att analysera ett knepigt sätt, helt baserat på arbetet med CSS.

Tanken är att ta bort de ursprungliga listmarkörerna via list-style-type-egenskapen och lägga till våra egna markörer via pseudoelementet :before och content-egenskapen. Denna bindning låter dig infoga vilken text eller tecken som helst före ett element, i det här fallet LI . Dessutom kan typen av text (färg, teckensnitt, bakgrund, etc.) också styras genom stilar, vilket visas i exempel 2. Här används styckesymbolen ¶ som markörer.

Exempel 2: Använda pseudoelementet:before

HTML5 CSS 2.1 IE Cr Op Sa Fx

• Norr
• söder
• Väst
• Öst

Resultatet av detta exempel visas i fig. 2.

Ris. 2. Markörer skapade med stilar

Ändra punktfärg i HTML-listan utan att använda intervall (6)

För mig det bästa alternativetär att använda CSS-pseudo-element, så för skivan skulle det se ut så här:

ul ( list-stil-typ: ingen; ) li ( position: relativ; ) li: före ( innehåll: ""; display: block; position: absolut; bredd: 5px; /* justera för att passa dina behov */ höjd: 5px; /* justera för att passa dina behov */ kant-radie: 50%; vänster: -15px; /* justera för att passa dina behov */ topp: 0.5em; bakgrund: #f00; /* justera för att passa dina behov * / )

• först
• andra
• tredje

• bredd och höjd måste vara lika för att hålla pekarna rundade
• du kan ställa in border-radius till noll om du vill ha fyrkantiga kulor

För fler kulstilar kan du använda andra css-former https://css-tricks.com/examples/ShapesOfCSS/ (välj detta som inte kräver pseudoelement som trianglar)

Jag undrade om det finns något sätt att ändra färgen på kulorna i listan.

Jag har en lista:

• Hus
• trädgård

Det går inte att infoga något i li, som "span" och "p". Kan jag ändra färgen på kulorna, men inte texten på något sätt smart sätt?

Om du kan använda en bild kan du. Och utan en bild kommer du inte att kunna ändra färgen på bara kulorna, inte texten.

Bildanvändning

Li ( list-style-image: url(images/yourimage.jpg); )

Utan att använda en bild

Sedan måste du redigera HTML-uppmärkning och inkluderar span inuti listan och färg li och span med olika färger.

Jag gillade också verkligen Marks svar - jag behöver en uppsättning olika färgade UL och uppenbarligen skulle det vara lättare att bara använda en klass. Här är vad jag använde för apelsinen, till exempel:

ul.orange ( liststil: ingen; utfyllnad: 0px; ) ul.orange > li:before ( innehåll: "\25CF "; font-size: 15px; färg: #F00; margin-right: 10px; utfyllnad: 0px ; linjehöjd: 15px;)

Jag upptäckte också att hex-koden jag använde för "content:" var annorlunda än Marcs (den hex-cirkeln verkade för lång). Den jag använde verkar sitta perfekt i mitten. Jag hittade också flera andra former (fyrkanter, trianglar) , cirklar, etc.)

Vi kan kombinera list-stil-bild med svg s vi kan bädda in i css! Denna metod ger otrolig kontroll över "kulor" som kan bli vad som helst.

För att få den röda cirkeln använd bara följande css:

"); }

Men detta är bara början. Detta gör att vi kan göra vilken galen sak vi vill med dessa kulor. cirklar eller rektanglar är lätt, men allt du kan rita med svg kan gå dit! Kolla in äppelträdsexemplet nedan:

ul ( list-style-image: url("data:image/svg+xml, "); ) ul ul ( list-style-image: url("data:image/svg+xml, "); ) ul ul ul ( list-style-image: url("data:image/svg+xml, "); ) ul ul ul ul ( list-style-image: url("data:image/svg+xml, "); ) ul.bulls-eye ( list-style-image: url("data:image/svg+xml, "); ) ul.multi-color ( list-style-image: url("data:image/svg+xml, "); }

• stora cirklar!
  • Stora rektanglar!
  • b
    • Små cirklar!
    • c
      • Små rektanglar!

• tjurar
• ögon.

• Mång
• Färg

Attribut Bredd/Höjd

Vissa webbläsare kräver att bredd- och höjdattributen ställs in

Kodningar

Att bygga på både @Marc och @jessica lösningar är lösningen jag använder:

Li (position:relativ; ) li:före (innehåll:""; display: block; position: absolut; bredd: 6px; höjd:6px; border-radie:6px; vänster: -20px; topp: .5em; bakgrund- färg: #000;)

Jag använder em för teckenstorlekar, så om du sätter toppen till .5em kommer den alltid att placeras i mitten av din första textrad. Jag använde left:-20px eftersom det är standardpositionen left:-20px i webbläsare: parent padding/2

Jag vet att det här är en riktigt, riktigt gammal fråga, men jag har lekt med det här och kom på ett sätt som jag inte såg. Ge listan en färg och åsidosätt sedan textfärgen med::first-line selector::first-line . Jag är ingen expert, så det kan vara något fel med det här tillvägagångssättet som jag saknar, men det verkar fungera.

li ( färg: blå; ) li:: första raden ( färg: svart; )

• Hus
• trädgård

Uppgift

Ändra utseendet på markörer i listan och ersätt dem med ett annat tecken.

Lösning

MED använder HTML eller CSS är det tillåtet att sätta en av tre typer av markörer: skiva (prick), cirkel (cirkel), kvadrat (fyrkant). Du måste lägga till dessa värden till stilegenskapen liststilstyp, som anges för UL- eller LI-väljaren (exempel 1).

Exempel 1 Standardmarkörer

HTML5 CSS 2.1 IE Cr Op Sa Fx

• Cheburashka
• Krokodil Gena
• Shapoklyak

I detta exempel en fyrkant används som markörer (fig. 1).

Ris. 1. Typ av markörer

Att välja och ställa in din egen markörkaraktär görs på ett mycket märkligt sätt, via pseudoelementet :before. Ta först bort punkterna från listan helt och hållet genom att sätta stilegenskapen list-style-type till none och sedan lägga till pseudoelementet :before till LI-väljaren. Själva teckenutmatningen utförs med hjälp av innehållsegenskapen, vars värde är den önskade texten eller tecknet (exempel 2).

Exempel 2: Använda :before och content

HTML5 CSS 2.1 IE Cr Op Sa Fx

• Cheburashka
• Krokodil Gena
• Shapoklyak

I det här exemplet är standardmarkören dold, och en symbol läggs till istället (fig. 2).

Ris. 2. Symbolmarkörer

För att ställa in någon knepig karaktär som markör kan du använda Microsoft program Ord eller teckentabell är standardprogram ingår i Windows kit. Kodkodning måste vara UTF-8.