Hyvin muotoiltujen verkkosivustojen rakentaminen nykypäivän verkkoon edellyttää syvällistä ymmärtämistä CSS-tyylilehdet. Lisää joukko CSS-tyylejä HTML-dokumenttiisi saadaksesi tietoa verkkosivusi ulkoasusta.
Luokan ja henkilöllisyyden määritteet
Suunnittelijoiden on joskus sovellettava tyyliä vain jonkin verran asiakirjan elementeistä, mutta ei kaikkia kyseisen elementin esiintymiä. Käytä näitä luokassa ja Henkilötunnus HTML-määritteet. Nämä määritteet ovat globaaleja määritteitä, joita voidaan käyttää melkein jokaiseen HTML-tunniste—Tyyliisit siis tyylit jakoihin, kappaleisiin, linkkeihin, luetteloihin tai mihin tahansa muuhun asiakirjasi HTML-kappaleeseen, voit kääntyä luokan ja ID-attribuuttien puoleen helpottaaksesi tämän tehtävän suorittamista!
Luokan valitsimet
Luokanvalitsin asettaa useita tyylejä samaan elementtiin tai tunnisteeseen asiakirjassa. Esimerkiksi, jos haluat kutsua tiettyjä tekstin osia eri väreinä ilmoituksena, määritä kappaleesi seuraavilla luokilla:
p {väri: # 0000ff; }
p.alert {väri: # ff0000; }
Nämä tyylit asettavat värinkaikki kappaleet siniseksi (# 0000ff), mutta kaikki kappaleet, joiden luokan attribuutti on hälytys sen sijaan tyylillä punaisella (# ff0000). Tämä johtuu siitä, että luokan attribuutilla on korkeampi spesifisyys kuin ensimmäisellä CSS-säännöllä, joka käyttää vain tagin valitsinta. Kun työskentelet CSS, tarkempi sääntö korvaa vähemmän tarkan säännön. Joten tässä esimerkissä yleisempi sääntö asettaa kaikkien kappaleiden värin, mutta toinen, tarkempi sääntö kuin ohittaa tämän asetuksen vain joissakin kappaleissa.
Näin sitä voidaan käyttää joissakin HTML-merkinnöissä:
Tämä kappale näytetään sinisenä, mikä on sivun oletusarvo.
Tämä kohta olisi myös sininen.
Ja tämä kappale näytetään punaisena, koska luokka-attribuutti korvaa sinisen vakiovärin elementinvalitsimen tyylistä.
Tässä esimerkissä tyyli s. hälytys sovellettaisiin vain kappaleen elementteihin, jotka käyttävät sitä hälytys luokassa. Jos haluat käyttää kyseistä luokkaa useissa HTML-elementeissä, poista HTML-elementti tyylipuhelun alusta seuraavasti:
.alert {background-color: # ff0000;}
Tämä luokka on nyt kaikkien sitä tarvitsevien elementtien käytettävissä. Mikä tahansa osa HTML: stä, jolla on luokan määritearvo hälytys saa nyt tämän tyylin. Alla olevassa HTML: ssä meillä on sekä kappale että toisen tason otsikko, jotka käyttävät hälytys luokassa. Molemmissa on taustan väri punainen:
Tämä kohta kirjoitettaisiin punaisella.
Nykyään verkkosivustoilla luokan määritteitä käytetään usein useimmissa elementeissä, koska niiden kanssa on helpompi työskennellä spesifisyyden näkökulmasta kuin tunnuksilla. Löydät useimmat nykyiset HTML-sivut täytettäviksi luokan määritteillä, joista osa toistuu usein asiakirjassa ja toiset saattavat näkyä vain kerran.
ID-valitsimet
Henkilötunnus valitsin nimeää tietyn tyylin yhdistämättä sitä tagiin tai muuhun HTML-elementti.
Oletetaan HTML-merkinnässä jako, joka sisältää tietoja tapahtumasta. Voisit antaa tälle jaolle ID-attribuutti / tapahtumaja hahmottele sitten jako 1 pikselin leveällä mustalla reunalla:
#event {reunus: 1px kiinteä # 000; }
Haasteen kanssa ID-valitsimet on, että niitä ei voida toistaa HTML-dokumentissa. Niiden on oltava yksilöllisiä (voit käyttää samaa tunnusta useilla sivustosi sivuilla, mutta vain kerran kussakin yksittäisessä HTML-asiakirjassa). Joten kolmelle tapahtumalle, jotka kaikki tarvitsevat tätä reunaa, sinun on tunnistettava tunnuksen attribuutit tapahtuma1, tapahtuma2ja tapahtuma 3 ja muotoile kukin niistä. Siksi olisi paljon helpompaa käyttää edellä mainittua luokan määritettä tapahtuma ja muotoile ne kaikki kerralla.
ID-attribuuttien komplikaatiot
Toinen ID-attribuuttien haaste on, että niillä on korkeampi spesifisyys kuin luokan määritteillä. Aiemmin vakiintuneen tyylin ohittaminen voi olla vaikeaa, jos olet luottanut liikaa tunnuksiin. Monet web-kehittäjät ovat siirtyneet pois käyttävät tunnuksia merkinnöissään, vaikka he aikovat käyttää kyseistä arvoa vain kerran, ja ovat sen sijaan kääntyneet melkein kaikkien luokkamääritteiden puoleen tyylejä.
Ainoa alue, jolla ID-määritteet tulevat esiin, on, kun haluat luoda sivun, jolla on sivun sisäisiä ankkurilinkkejä. Harkitse esimerkiksi parallaksityyppistä verkkosivustoa, joka sisältää kaiken yhden sivun sisällön linkeillä, jotka "siirtyvät" kyseisen sivun eri osiin. ID-määritteet ja tekstilinkit käyttävät näitä ankkurilinkkejä. Lisää kyseisen attribuutin arvo, jota edeltää # -symboli href linkin attribuutti, kuten tämä:
Tämä on linkki
Kun napsautetaan tai kosketetaan, tämä linkki hyppää sivun osaan, jolla on tämä tunnus-attribuutti. Jos mikään sivun elementti ei käytä tätä ID-arvoa, linkki ei tekisi mitään.
Sivujen sisäisen linkityksen luominen sivustolle edellyttää ID-määritteiden käyttöä, mutta voit silti kääntyä luokkien puoleen yleisiin CSS-muotoilutarkoituksiin. Näin suunnittelijat merkitsevät sivut tänään - he käyttävät luokan valitsimia niin paljon kuin mahdollista ja kääntyvät tunnisteiden puoleen vain, kun he tarvitsevat määritettä toimimaan paitsi CSS: n koukuna myös sivun sisäisenä linkkinä.