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 yli, mutta usein haluat käyttää tyyliä vain jonkin verran asiakirjan elementtejä, mutta ei kaikkia tämän elementin esityksiä. 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 ominaisuuksia, joita voidaan soveltaa lähes jokaiseen HTML-tunnisteeseen. Tämä tarkoittaa sitä, että oletko muotoillut asiakirjasi jakautumia, kappaleita, linkkejä, luetteloita tai muita HTML-osia, voit kääntää luokkien ja ID-määritteiden avulla tämän tehtävän suorittamisen!
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 värin kaikki kappaleita siniseen (# 0000ff), mutta jokainen luokki, jonka luokitusominaisuus on "hälytys", olisi tyyliltään 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. Tässä esimerkissä yleisempi sääntö asettaa kaikkien kohtien värin, mutta toinen, tarkempi sääntö kuin ohittaa, joka asetetaan vain joissakin 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 useilla HTML-elementeillä, yksinkertaisesti poista HTML-elementti tyylikutsun alusta (muista vain jättää aika ( .) paikallaan, 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.
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-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ä. Haluat vain lisätä tämän ominaisuuden arvon, jota edeltää "#" -merkki, 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 mitään elementtiä, tämä linkki ei tee mitään. Muista, että jos haluat luoda sivun linkittämisen sivustossa, tarvitaan tunnusominaisuuksia, mutta voit silti kääntyä luokkiin yleisten CSS-muotoilutarkoitusten mukaan. Tällä tavoin voimme merkitä sivuja tänään - käytämme luokkavaihtoehtoja mahdollisimman paljon ja vain käännämme tunnisteisiin, kun tarvitsemme attribuuttia toimimaan paitsi CSS: n koukkuna myös sivun linkkinä.Ja tämä h2 olisi myös punainen.
ID-valitsimet
ID-ominaisuuksien komplikaatiot
