Luokkiot ja tunnukset Ohje Laajenna CSS
Verkkosivujen rakentaminen nykyiseen verkkoon edellyttää syvää ymmärrystä CSS (Cascading Style Sheets). Nämä ovat ohjeita, jotka annat verkkosivustolle, miten se sijoittuu selainikkunaan. Sovellat sarjan "tyylejä" HTML-asiakirjallesi, joka luo verkkosivun ulkoasun.
On monia tapoja soveltaa näitä edellä mainittuja tyylejä asiakirjan läpi, mutta usein haluat käyttää tyyliä vain tietyissä asiakirjan elementeissä, mutta ei kaikki kyseisen elementin esiintymät.
Voit myös halutessasi luoda tyylin, jota voit hakea useille asiakirjan elementeille ilman, että sinun tarvitsee toistaa tyylisääntöä jokaiselle yksittäiselle instanssille. Halutun tyylin saavuttamiseksi käytät luokan ja ID HTML -attribuutteja. Nämä attribuutit ovat globaaleja määritteitä, joita voidaan soveltaa lähes jokaiseen HTML-tunnisteeseen . Tämä tarkoittaa sitä, että voit muotoilla osioita, kappaleita, linkkejä, luetteloita tai mitä tahansa muuta HTML-osaa asiakirjassasi. Voit muuntaa luokkien ja ID-määritteiden auttaa sinua toteuttamaan tämän tehtävän!
Luokan valitsimet
Luokanvalitsimen avulla voit asettaa useita tyylejä samaan elementtiin tai tunnisteeseen asiakirjassa. Voit esimerkiksi haluta, että tiettyjä tekstin osia kutsutaan eri värein muusta asiakirjan tekstistä. Nämä korostetut osat voivat olla "varoitus", jonka asetat sivulla. Voit jakaa kappaleitasi tämänkaltaisilla luokilla:
p {väri: # 0000ff; }
p.alert {väri: # ff0000; }
Nämä tyylit tekisivät kaikkien kappaleiden värin siniseksi (# 0000ff), mutta kaikki kohdat, joiden luokitusominaisuus on "hälytys", luotiin sen sijaan punaisella (# ff0000). Tämä johtuu siitä, että luokan attribuutilla on suurempi spesifisyys kuin ensimmäinen CSS-sääntö, joka käyttää vain tagivalitsinta.
Kun työskentelet CSS: n kanssa, tarkempi sääntö ohittaa vähemmän spesifisen. Joten tässä esimerkissä yleisempi sääntö asettaa kaikkien kohtien värin, mutta toinen, tarkempi sääntö kuin ohittaa, että asetetaan vain tietyissä kohdissa.
Tässä käytetään, miten sitä voitaisiin käyttää joissakin HTML-merkinnöissä:
Tämä kohta näytetään sinisenä, mikä on sivun oletusarvo.
Tämä kohta olisi myös sininen.
Ja tämä kohta näytetään punaisena, koska luokan määrite korvaa tavallisen sinisen värin elementin valitsimen tyylistä.
Tässä esimerkissä tyyli "p.alert" koskee vain elementtejä, jotka käyttävät kyseistä "hälytys" -luokkaa. Jos haluat käyttää kyseistä luokkaa useissa HTML-elementeissä, yksinkertaisesti poistat HTML-elementin tyylikäs puhelu (vain varmasti jätä aika (.) paikalleen), kuten:
.alert {taustaväri: # ff0000;}
Tämä luokka on nyt saatavilla mihin tahansa siihen tarvitsemiin elementteihin. Jokainen HTML-merkki, jonka luokitusominaisuusarvo on "hälytys", saa tämän tyylin. Alla olevassa HTML-koodissa on sekä kohta että otsikkotaso 2, jotka käyttävät "varoitus" -luokkaa. Kummallakin näistä olisi taustaväri punainen, joka perustui juuri esittelemään CSS: hen.
Tämä kohta kirjoitetaan punaisella.
Ja tämä h2 olisi myös punainen.
Nykyään verkkosivustoilla luokan elementtejä käytetään usein useimmissa elementeissä, koska niitä on helpompi käsitellä tietyntyyppisen perspektiivin avulla. Löydät useimmat nykyiset HTML-sivut, jotka täytetään luokkamääritteillä, joista osa on toistettu useita kertoja asiakirjassa ja muita, jotka saattavat näkyä vain kerran.
ID-valitsimet
ID- valitsimella voit antaa nimen tiettyyn tyyliin liittämättä sitä tagilla tai muulla HTML-elementillä . Sano, että sinulla on jako HTML-merkintään, joka sisältää tietoja tapahtumasta.
Voit antaa tämän divisioonille ID-attribuutin "tapahtuma", ja sitten jos halusit hahmotella tämän jakauman 1-pikselin leveällä musta reunuksella, kirjoitat tämänkaltaisen ID-koodin:
#event {border: 1px solid # 000; }
ID-valitsimien haaste on se, että niitä ei voi toistaa HTML-dokumentissa. Niiden on oltava yksilöllisiä (voit käyttää samaa tunnusta sivustosi useilla sivuilla, mutta vain kerran jokaisessa yksittäisessä HTML-asiakirjassa). Joten jos sinulla oli 3 tapahtumaa, jotka kaikki tarvitsivat tämän rajan, sinun pitäisi antaa heille ID-attribuutit "event1", "event2" ja "event3" sekä tyyli jokainen niistä. Siksi olisi paljon helpompaa käyttää edellä mainittua "tapahtuman" luokan määritystä ja muotoilla niitä kaikki kerralla.
Toinen ID-attribuuttien haaste on se, että niillä on suurempi spesifisyys kuin luokkamääritteillä. Tämä tarkoittaa sitä, että jos tarvitset CSS: n, joka ohittaa aikaisemmin määritetyn tyylin, se voi olla vaikeaa, jos olet kiinnostanut liian suuresti tunnisteisiin. Tästä syystä monet web-kehittäjät ovat siirtyneet käyttämään tunnuksia merkinnöissään, vaikka he aikovat käyttää tätä arvoa vain kerran, ja ovat sittemmin kääntyneet vähemmän täsmällisiin luokkien attribuutteihin lähes kaikille tyyleille.
Yksi alue, jolla ID-attribuutit tulevat pelaamaan, on silloin, kun haluat luoda sivun, jolla on sivun välisiä linkkejä. Esimerkiksi, jos sinulla on parallaksityylinen verkkosivusto, joka sisältää kaiken yhden sivun sisällön, jossa on linkkejä, jotka "hyppäävät" kyseisen sivun eri osiin. Tämä tehdään käyttämällä ID-attribuutteja ja tekstilinkkejä, jotka käyttävät näitä ankkurilinkkejä.
Voit lisätä tämän attribuutin arvon, jota edeltää #-symboli, linkin href-attribuuttiin, kuten:
Tämä on linkki
Kun napsautat tai kosketat, tämä linkki siirtyy sivun osalle, jolla on tämä ID -attribuutti. Jos sivulla ei ole elementtiä tätä ID-arvoa, linkki ei tekisi mitään.
Muista, että jos haluat luoda sivun linkittämisen sivustossa, tarvitaan tunnusominaisuuksia, mutta voit silti kääntyä luokkiin yleisten CSS-muotoilutarkoitusten mukaan. Näin kirjoitan sivut tänään - käytin luokkavaihtoehtoja mahdollisimman paljon ja vain käännän tunnuksille, kun tarvitsen attribuuttia toimimaan paitsi CSS: n koukkuna myös sivun linkkinä.
Alkuperäinen artikkeli Jennifer Krynin. Julkaisija Jeremy Girard 8/9/17