Lijstmarkeringskleur css. Hoe u de kleur van een HTML-lijstmarkering kunt wijzigen met behulp van CSS

Houd er rekening mee dat in dit voorbeeld de eigenschap padding-right werd gebruikt, waardoor we in elk lijstelement een interne inspringing naar rechts konden maken (HTML-element

Voorbeeld:

• Geloof in het beste, verwacht het slechtste.
• Het leven is een ziekte met een fatale afloop.
• Zeg nooit nooit.

Resultaat :

Aanvulling op het algemene onderwerp.
Als u om de een of andere reden de nummering van de markerlijst niet vanaf nul wilt instellen, maar bijvoorbeeld vanaf 8, kunt u deze zet doen.

Voorbeeld:

• Geloof in het beste, verwacht het slechtste
• Het leven is een dodelijke ziekte
• Zeg nooit nooit
• Dat is alles wat ik wist. Punt 4

Resultaat :

Dit onderwerp is ten einde.

Taak

Stel de kleur van markeringen in de lijst in zonder de tekstkleur te wijzigen.

Oplossing

Er zijn twee manieren om de kleur van markeringen te veranderen, laten we ze eenvoudig en lastig noemen. Een eenvoudige methode is naar binnen

Voorbeeld 1: Geneste tags gebruiken

HTML5 CSS 2.1 IE Cr Op Sa Fx

• Viool
• Gitaar
• Doedelzakken
• Orgel orgel
• Celesta

Het resultaat van dit voorbeeld wordt hieronder weergegeven (Figuur 1).

Rijst. 1. Markeringen die qua kleur afwijken van de hoofdtekst

Ondanks de eenvoud is de methode lastig, vooral bij grote lijsten, omdat je nu een tag aan elk lijstitem moet toevoegen . Laten we daarom eens kijken naar een slimme methode die volledig op CSS is gebaseerd.

Het punt is dit: we verwijderen de originele lijstmarkeringen via de list-style-type eigenschap en voegen onze eigen markeringen toe met behulp van het :before pseudo-element en de content eigenschap. Met deze link kunt u elke tekst of symbool vóór een element invoegen, in dit geval LI . Bovendien kan het type tekst (kleur, lettertype, achtergrond, enz.) ook worden bepaald via stijlen, zoals gedemonstreerd in voorbeeld 2. Hier wordt het alineasymbool ¶ gebruikt als markeringen.

Voorbeeld 2: Gebruik van het:before pseudo-element

HTML5 CSS 2.1 IE Cr Op Sa Fx

• noorden
• zuiden
• Westen
• Oosten

Het resultaat van dit voorbeeld wordt getoond in Fig. 2.

Rijst. 2. Markeringen gemaakt met stijlen

Het artikel presenteert verschillende methoden waarmee u een specifieke markering voor een ongenummerde lijst kunt instellen, en geeft ook hun voor- en nadelen aan

Als u een site analyseert, kunt u ontdekken dat de inhoud vaak lijsten van verschillende soorten bevat: menu's, lijsten met producten, enz. In de HTML-code is de tag verantwoordelijk voor een genummerde lijst, en de tag voor een lijst met opsommingstekens. lijst.

Het is ook vermeldenswaard dat lijsten met opsommingstekens in de praktijk veel vaker voorkomen, maar ze hebben wel één klein nadeel. De markering in de lijst wordt anders weergegeven, afhankelijk van de browser die u gebruikt. Voor een serieuze ontwerper is dit een probleem.

Om dit negatieve effect te elimineren, moet u de markeringsuitvoer annuleren met behulp van de lijststijleigenschap:

ol, ul ( lijststijl: geen; )

Hiermee begint de vorming van een lijst met unieke markeringen en pictogrammen. Hieronder vindt u de meest gebruikelijke manieren om lijstitempictogrammen weer te geven die uniek en consistent zijn in alle browsers.

Markeringen via afbeeldingen

De meest gebruikelijke en eenvoudige manier om een ​​markering voor een lijst op te geven, is door een achtergrondafbeelding te gebruiken (de achtergrondeigenschap). De methode is gebaseerd op het specificeren in de stijltabel van de achtergrondafbeelding voor de lijstitems, evenals de opvullingseigenschap, die ruimte reserveert voor de nieuwe markering. Hieronder vindt u een codevoorbeeld:

ul (lijststijl: geen; ) li( achtergrond: url(pad-naar-afbeelding) nee-herhaling; opvulling-links: 20px; )

Deze methode bevalt door zijn uniekheid, omdat je hiermee absoluut elke markering in de vorm van een afbeelding kunt plaatsen. Hieronder ziet u hoe onze code er in de browser uit zal zien:

De belangrijkste positieve kant van deze methode is dat deze 100% compatibel is met meerdere browsers, maar desondanks is er een klein nadeel. Het gebruik van een afbeelding is een extra oproep naar de server.

Markers die eerder gebruikten

Er is een optie wanneer u het zonder een afbeelding kunt doen, als de ontwerpomstandigheden dit toelaten. Dit is heel vaak toegestaan ​​bij het ontwerpen van de hoofdinhoud, wanneer de lijst is gemarkeerd met de eenvoudigste elementen, zoals een vierkant ( ) of een pijl ( →). We zijn dus op het punt gekomen dat elk geschikt speciaal teken als markering kan fungeren.

Vervolgens rijst de vraag hoe speciale tekens in lijstelementen kunnen worden ingevoegd. Uiteraard niet met de hand, anders zou het een zeer langdurig en moeizaam proces zijn, en bovendien arbeidsintensief. Een pseudo-element zal ons helpen uit deze situatie te komen voor, waarvan het gebruik is gekoppeld aan een specifieke selector, waardoor we ons proces van het toewijzen van markeringen op basis van speciale tekens kunnen automatiseren. Deze oplossing is geschikt voor de meeste browsers, rekening houdend met het feit dat deze voor IE zal worden geschreven uitdrukking.

Hieronder ziet u een voorbeeld van code die een lijst met opsommingstekens produceert met een en-streepje:

li( dit. innerHTML = "-" + dit. innerHTML) /*IE hack*/ ) li: before( inhoud: " \201 3" ; }

In de praktijk krijgen we het volgende beeld:

Laat me je eraan herinneren dat hacks in reële omstandigheden verband houden met voorwaardelijke opmerkingen.

Wanneer u deze methode gebruikt, is het belangrijkste om de codering van het vereiste pictogram te kennen. Het is ook vermeldenswaard dat voor expressie speciale tekens worden geschreven als een numerieke combinatie of geheugensteuntje. Wat de inhoudseigenschap betreft, wordt in dit geval eerst een schuine streep geplaatst en vervolgens wordt de hexadecimale code geschreven.

Gebruik insertAdjacentHTML

Bovenstaande methode werkt niet altijd correct in het legendarische IE (ondanks de hack). Om precies te zijn: de “krukken” voor deze browser zijn nog niet volledig ontwikkeld. Een effectievere methode is gebaseerd op voegAangrenzendeHTML in, hieronder vindt u de code voor deze methode:

li( //z-index: expression(runtimeStyle.zIndex = 1, insertAdjacentHTML("afterBegin", "-")); }

Markeringen getekend door CSS-eigenschappen

Sommige vierkante markeringen kunnen worden getekend met behulp van bepaalde CSS-eigenschappen. Een vierkant met een gekleurde vulling wordt bijvoorbeeld getekend met de eigenschap background-color, en een vierkant in de vorm van een kader wordt getekend met de eigenschap border (een vierkant met een vulling kan overigens op deze manier worden getekend) . Voorbeeldinvoer in een CSS-bestand:

li( //z-index: expressie(runtimeStyle.zIndex = 1, dit. innerHTML = "

Een markering getekend met CSS-eigenschappen zal er in de praktijk dus als volgt uitzien:

Gebruik voor en eerste kind in combinatie

Deze methode wordt vaak gebruikt bij het maken van broodkruimels op een website. Voor degenen die niet weten waar we het over hebben, bekijk het onderstaande voorbeeld.

In dit geval wordt elke link van elkaar gescheiden door een speciaal teken, maar er mag geen speciaal teken vóór het eerste element staan. Een pseudo-klasse zal ons hierbij helpen eerstgeborene, die alleen toegang heeft tot het eerste element van de lijst. In code zou het er zo uit moeten zien

HTML

< ul> < li>< a href= "#" >thuis < li>< a href= "#" >Bloggen < li>< a href= "#" >CSS < li>Geldige code bij gebruik van target= "_blank"

li:before( inhoud: " \21 92" ; ) li: eerste kind: before( inhoud: "" ; )

Het is ook vermeldenswaard dat deze techniek niet alleen wordt gebruikt voor broodkruimels, maar ook voor gewone lijsten met opsommingstekens, afhankelijk van de ontwerpopdracht.

In welke browsers werkt het?

conclusies

Samenvattend kunnen we opmerken dat het gebruik van het vorige pseudo-element gerechtvaardigd en rationeel is in de hoofdinhoud, aangezien er geen speciale vereisten zijn voor het ontwerp van lijsten. Dit zal op zijn beurt de belasting van de server verminderen in vergelijking met de optie bij het gebruik van een afbeelding. En als je ook opmerkt dat de hoofdinhoud veel lijsten met opsommingstekens kan bevatten, kan het verschil groter worden. Maar afbeeldingen hebben grote voordelen als het gaat om markerontwerpoplossingen.