Css-luettelon merkkiväri. Kuinka muuttaa html-luettelon merkkiväriä CSS:n avulla

Kiinnitän huomionne siihen, että tässä esimerkissä käytetään täyttö-right-ominaisuutta, jonka ansiosta pystyimme tekemään sisemmän sisennyksen oikealle listan jokaiseen elementtiin (HTML elementti

Esimerkki:

• Usko parasta, odota pahinta.
• Elämä on kohtalokas sairaus.
• Älä koskaan sano ei koskaan.

Tulos:

Täydennys yleiseen aiheeseen.
Jos haluat jostain syystä asettaa merkkiluettelon numerointia ei nollasta, vaan esimerkiksi 8:sta, voit tehdä sellaisen siirron.

Esimerkki:

• Usko parasta, odota pahinta kohtaa 1
• Elämä on kohtalokas sairaus kohta 2
• Älä koskaan sano ei koskaan #3
• Siinä kaikki, mitä tiesin. Kohde 4

Tulos:

Aihe on siis päättynyt.

Tehtävä

Aseta luettelon luettelomerkkien väri muuttamatta tekstin väriä.

Ratkaisu

On kaksi tapaa muuttaa merkkien väriä, sanotaanpa niitä yksinkertaisiksi ja hankalia. Yksinkertaisin tapa on mennä sisään

Esimerkki 1. Sisäkkäisten tunnisteiden käyttö

HTML5 CSS 2.1 IE Cr Op Sa Fx

• Viulu
• Kitara
• Säkkipilli
• Kampiliira
• Celesta

Tämän esimerkin tulos on esitetty alla (kuva 1).

Riisi. 1. Merkkejä, jotka eroavat väriltään päätekstistä

Yksinkertaisuudestaan ​​huolimatta menetelmä on hankala, varsinkin kookkaiden luetteloiden kanssa, koska nyt sinun on lisättävä tunniste luettelon jokaiseen kohteeseen ... Siksi puretaan älykäs tapa, joka perustuu täysin CSS:n toimintaan.

Asia on seuraava - poistamme alkuperäiset listamerkit List-style-type -ominaisuuden kautta ja lisäämme omat merkit käyttämällä pseudoelementtiä ennen ja content-ominaisuutta. Tämän linkityksen avulla voit lisätä minkä tahansa tekstin tai merkin ennen elementtiä, tässä tapauksessa LI. Lisäksi tekstin tyyppiä (väriä, fonttia, taustaa jne.) voidaan myös ohjata tyyleillä, kuten esimerkissä 2 on esitetty. Tässä kappalesymbolia ¶ käytetään merkeinä.

Esimerkki 2. Käyttämällä pseudoelementtiä ennen

HTML5 CSS 2.1 IE Cr Op Sa Fx

• pohjoinen
• Etelä
• länteen
• Itään

Tämän esimerkin tulos on esitetty kuvassa. 2.

Riisi. 2. Tyylien avulla luodut merkit

Artikkelissa esitellään useita menetelmiä, joiden avulla voit asettaa tietyn merkin järjestämättömälle luettelolle, ja osoittaa myös niiden edut ja haitat.

Jos analysoit mitä tahansa sivustoa, voit huomata, että sisältö sisältää hyvin usein erilaisia ​​​​luetteloita: valikoita, tuoteluetteloita jne. HTML-koodissa tunniste vastaa numeroidusta luettelosta ja luettelomerkitty -.

On myös syytä huomata, että käytännössä luettelomerkit ovat paljon yleisempiä, mutta samalla niissä on yksi pieni haittapuoli. Luettelon merkki näkyy eri tavalla käytetyn selaimen mukaan. Vakavalle suunnittelijalle tämä on ongelma.

Poistaaksesi tämän negatiivisen vaikutuksen, sinun on peruutettava merkin näyttäminen käyttämällä luettelotyylistä ominaisuutta:

ol, ul (luettelotyyli: ei mitään;)

Tästä alkaa ainutlaatuisten merkintöjen ja kuvakkeiden luettelon muodostaminen. Alla on yleisimmät tavat esittää luettelokohteiden kuvakkeet, jotka ovat ainutlaatuisia ja samoja kaikissa selaimissa.

Merkkejä kuvien kautta

Yleisin ja yksinkertaisin tapa määrittää merkintä luettelolle on käyttää taustakuvaa (taustaominaisuus). Menetelmä perustuu tyylitaulukon luettelokohteiden taustakuvan määrittämiseen sekä täyttöön (täyteominaisuus), joka varaa tilaa uudelle merkille. Alla on esimerkkikoodi:

ul (luettelotyyli: ei mitään;) li (tausta: url (polku kuvaan) ei - toistoa; täyttö - vasen: 20px;)

Tämä menetelmä miellyttää ainutlaatuisuuttaan, koska sen avulla voit asettaa täysin minkä tahansa merkin kuvan muodossa. Alla on kuinka koodimme näyttää selaimessa:

Tämän menetelmän tärkein positiivinen puoli on 100-prosenttinen yhteensopivuus selaimien välillä, mutta tästä huolimatta siinä on pieni haittapuoli. Kuvan käyttö on lisäpuhelu palvelimelle.

Merkkejä ennen

On mahdollisuus, kun voit tehdä ilman kuvaa, jos suunnitteluolosuhteet sen sallivat. Tämä on hyvin usein sallittua pääsisällön suunnittelussa, kun luettelo on merkitty yksinkertaisimmilla elementeillä, kuten neliö () tai nuoli (→). Siten olemme tulleet siihen tosiasiaan, että mikä tahansa sopiva erikoishahmo voi toimia merkkinä.

Lisäksi herää kysymys, kuinka erikoismerkkejä lisätään luettelon elementteihin. Ei tietenkään käsin, muuten se olisi erittäin pitkä ja työläs prosessi, plus kaikki muu ja työlästä. Pseudoelementti auttaa meitä pääsemään pois tästä tilanteesta ennen, jonka sovellus sitoutuu tiettyyn valitsimeen, mikä antaa meille mahdollisuuden automatisoida prosessimme, jolla osoitamme tokeneja erikoismerkeistä. Tämä ratkaisu sopii useimmille selaimille, kun otetaan huomioon se tosiasia, että IE:ssä täsmennetään ilmaisu.

Alla on esimerkki koodista, joka luo lyhennetyn luettelomerkityn luettelon:

li (this. innerHTML = "-" + this. innerHTML) / * IE hack * /) li: ennen (sisältö: " \201 3" ; }

Käytännössä saamme seuraavan kuvan:

Haluan muistuttaa, että todellisissa olosuhteissa hakkerointi liittyy ehdollisiin kommentteihin.

Tätä menetelmää käytettäessä tärkeintä on tietää vaaditun kuvakkeen koodaus. On myös syytä huomata, että ilmaisun erikoismerkit kirjoitetaan numeroyhdistelmällä tai muistokoodilla. Mitä tulee sisältöominaisuuteen, tässä tapauksessa ensin laitetaan vinoviiva ja sitten kirjoitetaan heksadesimaalikoodi.

Käytä insertAdjacentHTML

Yllä oleva menetelmä ei aina toimi oikein legendaarisessa IE:ssä (hakkerista huolimatta). Tarkemmin sanottuna tämän selaimen "sauvat" eivät ole täysin valmiita. Tehokkaampi menetelmä perustuu insertAdjacentHTML, alla on tämän menetelmän koodi:

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

CSS-ominaisuuksilla piirretyt merkit

Jotkut neliömerkit voidaan piirtää käyttämällä joitain CSS-ominaisuuksia. Esimerkiksi neliö, jossa on värillinen täyttö, piirretään taustaväri-ominaisuuden läpi ja reunuksen muodossa oleva laatikko piirretään reunuksen läpi (muuten, tällä tavalla voidaan piirtää täyttöruutu). Esimerkki kirjoittamisesta CSS-tiedostoon:

li ( // z-indeksi: lauseke (runtimeStyle.zIndex = 1, Tämä. innerHTML = "

Näin ollen CSS-ominaisuuksilla piirretty merkki näyttää käytännössä tältä:

Käyttö ennen ja ensimmäinen lapsi yhdessä

Tätä menetelmää käytetään usein koristeettaessa leivänmuruja sivustolla. Kuka ei tiedä, mistä tässä on kyse, katso alla oleva esimerkki.

Tässä tapauksessa jokainen linkki on erotettu toisistaan ​​erikoismerkillä, mutta ennen ensimmäistä elementtiä ei saa olla mitään erikoismerkkiä. Pseudoluokka auttaa meitä tässä. ensimmäinen lapsi joka viittaa vain luettelon ensimmäiseen kohtaan. Koodimuodossa sen pitäisi näyttää tältä

HTML

< ul> < li>< a href= "#" >Koti < li>< a href= "#" >Blogi < li>< a href= "#" >CSS < li>Kelvollinen koodi käytettäessä kohde = "_blank"

li: ennen (sisältö: " \21 92" ; ) li: ensimmäinen lapsi: ennen (sisältö: "";)

On myös syytä huomata, että tätä tekniikkaa ei käytetä vain korppujauhoissa, vaan myös tavallisissa luettelomerkeissä suunnittelutehtävästä riippuen.

Millä selaimilla se toimii?

johtopäätöksiä

Yhteenvetona voidaan todeta, että pseudoelementin käyttö ennen on pääsisällössä perusteltua ja järkevää, koska luetteloiden suunnittelulle ei ole erityisiä vaatimuksia. Tämä puolestaan ​​vähentää palvelimen kuormitusta verrattuna vaihtoehtoon, jossa käytetään kuvaa. Ja jos huomaat myös sen tosiasian, että pääsisällössä voi olla paljon luettelomerkittyjä luetteloita, ero voi tulla merkittävämpi. Mutta kuvat ovat huomattavasti parempia merkkien suunnittelupäätösten suhteen.