Exempel 2: Använda pseudoelementet ::before

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

Resultatet av detta exempel visas i fig. 2.

Artikeln presenterar flera metoder som låter dig ställa in en specifik markör för en onumrerad lista, och indikerar också deras fördelar och nackdelar

Om du analyserar någon sida kan du upptäcka det faktum att innehållet mycket ofta innehåller listor av olika slag: menyer, produktlistor etc. I HTML-koden ansvarar taggen för en numrerad lista och taggen för en punktlista. lista.

Det är också värt att notera att punktlistor i praktiken är mycket vanligare, men de har en liten nackdel. Markören i listan visas olika beroende på vilken webbläsare du använder. För en seriös designer är detta ett problem.

För att eliminera denna negativa effekt måste du avbryta markörutmatningen med egenskapen list-style:

ol, ul ( liststil: ingen; )

Detta börjar bildandet av en lista med unika markörer och ikoner. Nedan är de vanligaste sätten att presentera listobjektikoner som är unika och konsekventa i alla webbläsare.

Markörer genom bilder

Det vanligaste och enklaste sättet att ange en markör för en lista är att använda en bakgrundsbild (bakgrundsegenskapen). Metoden bygger på att man i stiltabellen specificerar bakgrundsbilden för listobjekten, samt utfyllnadsegenskapen, som reserverar utrymme för den nya markören. Nedan är ett kodexempel:

ul ( liststil: ingen; ) li( bakgrund: url(sökväg till bild) ingen upprepning; utfyllnad vänster: 20px; )

Denna metod är nöjd med sin unikhet, eftersom den låter dig ställa in absolut vilken markör som helst i form av en bild. Nedan är hur vår kod kommer att se ut i webbläsaren:

Den huvudsakliga positiva sidan av denna metod är att den är 100% kompatibel med flera webbläsare, men trots detta finns det en liten nackdel. Att använda en bild är ett extra anrop till servern.

Markörer som används tidigare

Det finns ett alternativ när du kan klara dig utan en bild, om designförhållandena tillåter det. Detta är mycket ofta tillåtet när man utformar huvudinnehållet, när listan är markerad med de enklaste elementen, som en kvadrat ( ) eller en pil ( →). Därmed har vi kommit till punkten att vilken lämplig specialkaraktär som helst kan fungera som en markör.

Därefter uppstår frågan om hur man infogar specialtecken i listelement. Naturligtvis inte för hand, annars skulle det bli en mycket utdragen och tråkig process, plus att det också skulle vara arbetskrävande. Ett pseudoelement hjälper oss att ta oss ur den här situationen innan, vars användning är knuten till en specifik väljare, vilket gör att vi kan automatisera vår process för att tilldela markörer från specialtecken. Denna lösning är lämplig för de flesta webbläsare, med hänsyn till det faktum att för IE kommer den att skrivas uttryck.

Nedan är ett exempel på kod som skapar en punktlista med ett bindestreck:

li( this. innerHTML = "-" + this. innerHTML) /*IE hack*/ ) li: before( innehåll: " \201 3" ; }

I praktiken får vi följande bild:

Låt mig påminna dig om att hack i verkliga förhållanden är kopplade till villkorliga kommentarer.

När du använder den här metoden är det viktigaste att känna till kodningen av den nödvändiga ikonen. Det är också värt att notera att för uttryck skrivs specialtecken som en numerisk kombination eller mnemonisk kod. När det gäller innehållsegenskapen placeras i det här fallet ett snedstreck först, och sedan skrivs den hexadecimala koden.

Använder insertAdjacentHTML

Ovanstående metod fungerar inte alltid korrekt i den legendariska IE (trots hacket). Mer exakt är "kryckorna" för den här webbläsaren inte fullt utvecklade. En mer effektiv metod bygger på infoga AdjacentHTML, nedan är koden för denna metod:

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

Markörer ritade av CSS-egenskaper

Vissa fyrkantiga markörer kan ritas med hjälp av vissa CSS-egenskaper. Till exempel ritas en kvadrat med en färgad fyllning med egenskapen bakgrundsfärg, och en kvadrat i form av en ram ritas med egenskapen kantlinje (förresten, en kvadrat med en fyllning kan ritas på detta sätt) . Exempelpost i en CSS-fil:

li( //z-index: expression(runtimeStyle.zIndex = 1, detta. innerHTML = "

Således kommer en markör ritad med CSS-egenskaper att se ut så här i praktiken:

Använder före och första barn i kombination

Denna metod används ofta när man skapar brödsmulor på en webbplats. För de som inte vet vad vi pratar om, titta på exemplet nedan.

I det här fallet är varje länk separerad från varandra med ett specialtecken, men det ska inte finnas något specialtecken före det första elementet. En pseudoklass hjälper oss med detta förstfödde, som endast kommer åt det första elementet i listan. I koden ska det se ut så här

HTML

< ul> < li>< a href= "#" >Hem < li>< a href= "#" >Blogg < li>< a href= "#" >CSS < li>Giltig kod när du använder target= "_blank"

li:before( innehåll: " \21 92" ; ) li: första barn: före( innehåll: "" ; )

Det är också värt att notera att denna teknik inte bara används för brödsmulor, utan också för vanliga punktlistor, beroende på designen.

Vilka webbläsare fungerar det i?

Slutsatser

För att sammanfatta kan vi notera det faktum att användningen av före pseudo-elementet är motiverat och rationellt i huvudinnehållet, eftersom det inte finns några särskilda krav på utformningen av listor. Detta kommer i sin tur att minska belastningen på servern, jämfört med alternativet när du använder en bild. Och om du också noterar det faktum att huvudinnehållet kan innehålla många punktlistor, så kan skillnaden bli mer betydande. Men bilder har stor nytta när det gäller designlösningar för markörer.

CSS-listor— En uppsättning egenskaper som ansvarar för utformningen av listor. Att använda HTML-listor är mycket vanligt när man skapar webbplatsnavigeringsfält. Listobjekt representerar en samling blockelement.

Du kan använda vanliga CSS-egenskaper ändra utseendet på listmarkören, lägg till en bild för markören, och ändra markörens plats. Markeringsblockets höjd kan ställas in med egenskapen line-height.

Designa listor 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. Exempel på utformning av punktlistor och numrerade listor

2. Bilder för listobjekt list-style-image

Du kan använda bilder och övertoningsfyllningar 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 hjälp av en bild
Ris. 3. Designa en punktlista med en gradient

3. Liststil-position

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

Den här handledningsartikeln kommer att fokusera på att arbeta med listor i CSS, du kommer att lära dig hur du ändrar typen av kula, kulans placering i förhållande till listobjektet, skapar dina egna kulor och till och med ändrar kulans färg.

Jag tror att du redan vet att HTML 5 använder två huvudtyper av listor (exklusive beskrivningslistor och menyalternativ):

• numrerad (beställd) lista – HTML-element
  1. punktlista (oordnad) – HTML-element

     CSS ger oss många alternativ för att formatera utseendet på dessa listor, låt oss titta på de viktigaste.

     Ändra markörtyp

     Den första egenskapen som jag skulle vilja överväga är denna fastighet list-style-type , detta anger typen av listobjektets markör.

     Navigationsmenyer, till exempel, består ofta av vanliga punktlistor (HTML-element

     ), som standard vars markör visas i form av en fylld cirkel, för att ta bort den måste du använda CSS-egenskap m list-style-type med värdet none :
     ul( list-stil-typ : ingen ; /* ta bort markören från listan */ }

     För punktlistor (oordnade) (HTML-element

     ) det finns tre typer av markörer: i form av en fylld cirkel (skiva är standardvärdet), en markör i form av en ihålig cirkel (cirkel) och i form av en kvadrat (fyrkant) och för numrerad ( beställda) listor (artikel
     ) alla återstående alternativ. Den fullständiga listan finns i följande tabell:

     Menande	Beskrivning
     ingen Listobjekt Listobjekt Listobjekt	Markören visas inte.
     skiva Listobjekt Listobjekt Listobjekt	En markör i form av en fylld cirkel. Detta är standardvärdet.
     armeniska Listobjekt Listobjekt Listobjekt	Numerisk markör (traditionell armenisk numrering).
     cirkel Listobjekt Listobjekt Listobjekt	Markör i form av en cirkel.
     cjk-ideografisk Listobjekt Listobjekt Listobjekt	Enkla ideografiska siffror.
     decimal Listobjekt Listobjekt Listobjekt	Numerisk markör (decimala arabiska tal som börjar med 1).
     decimal-ledande-noll Listobjekt Listobjekt Listobjekt	Numerisk markör (decimala arabiska tal som börjar med 1 och följs av en inledande nolla - 01, 02, 03...).
     georgiska Listobjekt Listobjekt Listobjekt	Numerisk markör (traditionell georgisk numrering - an, ban, gan, ..., he, tan, in, in-an...).
     hebreiska Listobjekt Listobjekt Listobjekt	Numerisk markör (traditionell hebreisk numrering).
     hiragana Listobjekt Listobjekt Listobjekt	Numerisk markör (japansk Hiragana syllabary - a, i, u, e, o, ka, ki...).
     hiragana-iroha Listobjekt Listobjekt Listobjekt	Numerisk markör (japansk syllabary Hiragana Iroha - i, ro, ha, ni, ho, he, to, ...).
     katakana Listobjekt Listobjekt Listobjekt	Numerisk markör (japansk Katakana kursplan - A, I, U, E, O, KA, KI, ...).
     katakana-iroha Listobjekt Listobjekt Listobjekt	Numerisk markör (japansk syllabary Katakana iroha - I, RO, HA, NI, HO, HE, TO, ...).
     lägre alfa Listobjekt Listobjekt Listobjekt	Små bokstäver i ascii (a, b, c, d...z).
     lägre grekiska Listobjekt Listobjekt Listobjekt	Små grekiska bokstäver (α, β, γ, δ, etc.).
     lägre latin Listobjekt Listobjekt Listobjekt	Små latinska bokstäver (a, b, c, d,...z).
     lägre-romersk Listobjekt Listobjekt Listobjekt	Romerska siffror med gemener (i, ii, iii, iv, v, etc.).
     fyrkant Listobjekt Listobjekt Listobjekt	Markör i form av en kvadrat.
     övre alfa Listobjekt Listobjekt Listobjekt	Versala ascii-bokstäver (A, B, C, D,...Z).
     övre-latin Listobjekt Listobjekt Listobjekt	Stora latinska bokstäver (A, B, C, D,...Z).
     övre-roman Listobjekt Listobjekt Listobjekt	Romerska siffror med versaler (I, II, III, IV, V, etc.).

     Observera att värdena hebrew , cjk-ideographic , hiragana , hiragana-iroha , katakana , katakana-iroha inte stöds av webbläsaren Internet Explorer .

     Låt oss titta på ett exempel på hur du använder egenskapen list-style-type i text:

     /* lista med standardmarkörtypvärdet (skiva). */
     • Listobjekt
     • Listobjekt
     • Listobjekt
     /* numrerad lista med markörtyp lägre-romersk */
     1. Listobjekt
     2. Listobjekt
     3. Listobjekt
     /* punktlista med punkttyp cirkel */
     • Listobjekt
     • Listobjekt
     • Listobjekt

     I i detta exempel vi skapade två stilar, den första anger markörtypen - romerska siffror med gemener (lägre romerskt värde), vi tillämpade den på en numrerad lista (HTML-element

     ), och till en punktlista (HTML-element
     ) har vi tillämpat en stil som anger markörtypen till en ihålig cirkel (värdescirkel ).

     Resultatet av vårt exempel:

     Observera att du kan tillämpa egenskapen list-style-type även på ett enda listelement (HTML-element

     • ) för att ställa in din markörtyp, eller skapa stilar som kommer att tillämpa en specifik markör på jämna eller udda listelement, som visas i följande exempel:
       • Listobjekt
       • Listobjekt
       • Listobjekt
       • Listobjekt
       • Listobjekt
       • Listobjekt
       • Listobjekt
       • Listobjekt

       I det här exemplet har vi stylat allt udda listelement - angav typen av markör fyrkant, och textfärgen angavs grön. Även Listelementen fick följande stil: röd textfärg och frånvaro markör.

       Resultatet av vårt exempel:

       Markörens position i förhållande till listobjektet

       Resultatet av vårt exempel:

       Ris. 71 Ett exempel på användning av egenskapen list-style-position (platsen för markören/numret i listor).

       Skapa dina egna markörer

       Förr eller senare kommer du att behöva skapa listmarkörer med din egen design, tack vare CSS-egendomen list-style-image kan vi implementera denna önskan i ditt projekt.

       Egenskapssyntaxen är som följer:

       ol( list-style-image : url("images/primer.png" ); /* ange den relativa sökvägen till bilden */ } ul( list-stil-bild : ; /* ange den absoluta sökvägen till bilden */ }

       Värdet inom parentes motsvarar sökvägen till bilden som du planerar att använda som markör. Sökvägen till bilden kan vara antingen absolut eller relativ. När du anger en relativ sökväg, viktig poängär det allt måste anges i förhållande till placeringen av stilmallen, inte sidan.

       Om du planerar att designa dina egna markörer måste du använda ett grafikredigeringsprogram eller använda färdiga uppsättningar. Observera att även om du gjorde allt korrekt, kanske bilden inte laddas på sidan, i det här fallet måste du redigera bilden så att bakgrunden blir genomskinlig.

       Låt oss titta på ett exempel på hur du använder anpassade markörer i ett dokument:

       .testa( list-stil-bild : url("http://site/images/mini5.png"); /* ange den absoluta sökvägen till bilden som ska användas som markör */ }
       • Listobjekt
       • Listobjekt
       • Listobjekt

       I detta exempel specificerar vi absolut väg till bilden som ska användas som markör.

       Resultatet av vårt exempel:

       Ändra markörfärg i CSS

       För att avsluta den här artikeln, låt oss titta på ett avancerat sätt att ändra markörens färg utan att ändra elementets färg, med använder CSS innehållsegenskapen och det tidigare diskuterade :before pseudo-elementet:

       • Listobjekt
       • Listobjekt
       • Listobjekt

       Kärnan i denna metod är att före varje element i listan (HTML-element

     • ) infoga ett pseudoelement (:before) genererat innehåll (CSS-egenskapsinnehåll), som är identiskt i utseende markör in punktlista(HTML-element
       ), endast den färg som redan är nödvändig för vår uppgift.

       Observera att i det här exemplet användes egenskapen padding-right, vilket gjorde att vi kunde göra en intern indragning till höger i varje listelement (HTML-element

       • ). Om den här egenskapen inte tillämpas i det här fallet kommer markören att placeras nära texten, vilket är visuellt fult. Att arbeta med interna och externa indrag av element kommer att diskuteras i detalj i nästa artikel i läroboken "".

         Frågor och uppgifter om ämnet

         Innan du går vidare till nästa ämne, slutför de praktiska uppgifterna:

         
         

         Om du har svårt att fullfölja praktisk uppgift Du kan alltid öppna exemplet i separat fönster och inspektera sidan för att förstå vilken CSS-kod som användes.

         2016-2019 Denis Bolshakov, du kan skicka kommentarer och förslag på webbplatsen till [email protected]