Yleiskatsaus CSS-tyylisivuista, joissa on esimerkkitapaus
Kun rakennat verkkosivuston tyhjästä, on älykäs aloittaa määritellyillä perusstyleillä. Se on kuin alkaa puhtaalla kankaalla ja tuoreilla harjoilla. Yksi ensimmäisistä web-suunnittelijoiden kohtaamista ongelmista on, että web-selaimet ovat kaikki erilaisia. Oletuskokoinen kirjasintyyppi eroaa alustasta toiseen, oletusfonttiperhe on erilainen, jotkut selaimet määrittelevät marginaalit ja pehmusteita kehon tagissa, kun taas toiset eivät ja niin edelleen. Hanki nämä epäjohdonmukaisuudet määrittämällä Web-sivujen oletustyylit.
CSS ja Character Set
Ensinnäkin aseta CSS-dokumenttien merkkijoukko utf-8: ksi . Vaikka on todennäköistä, että suurin osa suunnittelemaasi sivuista on kirjoitettu englanniksi, jotkut saattavat olla lokalisoituja - sopeutettu erilaiseen kielelliseen ja kulttuuriseen kontekstiin. Kun ne ovat, utf-8 yksinkertaistaa prosessia. Ulkoisen tyylilevyn merkistöasetusten määrittäminen ei ole etusijalla HTTP-otsakkeessa , mutta kaikissa muissa tilanteissa se toimii.
Merkistö on helppo asettaa. CSS-asiakirjan ensimmäiselle riville kirjoitetaan:
@charset "utf-8";Tällä tavalla, jos käytät kansainvälisiä merkkejä sisällön ominaisuudessa tai luokki- ja ID-nimiä, tyyliarkki toimii edelleen oikein.
Sivun rungon muotoilu
Seuraava asia, joka on oletustyyliarkkien tarpeet, on tyylejä ns. Marginaalien, pehmusteiden ja reunusten poistamiseksi. Tämä varmistaa, että kaikki selaimet sijoittavat sisällön samaan paikkaan, eikä selaimen ja sisällön välillä ole piilotettuja välilyöntejä. Useimmille verkkosivuille tämä on liian lähellä tekstin reunaa, mutta on tärkeää aloittaa sinne niin, että taustakuvat ja asettelualueet on järjestetty oikein.
html, keho {marginaali: 0px; pehmuste: 0px; raja: 0px; }Aseta oletus etualalle tai fontin väriksi mustaksi ja oletus taustan väri valkoiseksi. Vaikka tämä todennäköisesti muuttuu useimmille verkkosivujen malleille, sillä nämä vakiovärit asetetaan keholle ja HTML-tunniste aluksi helpottaa sivun lukemista ja työskentelyä.
html, body {väri: # 000; tausta: #fff; }Oletusfonttityylit
Kirjasinkoko ja fonttiperhe ovat muutoksia, jotka muuttuvat väistämättä, kun muotoilu kestää, mutta alkaa oletusarvoltaan 1 emin fontilla ja Arialn, Geneven tai jonkin muun sans-serif -fontin oletusfonttiperheellä. Emsin käyttö pitää sivun mahdollisimman helposti, ja sans-serif-fontti on helpompi kuvaruudulla.
html, keho, p, th, td, li, dd, dt {fontti: 1em Arial, Helvetica, sans-serif; }Saattaa olla muitakin paikkoja, joissa saatat löytää tekstiä, mutta p , th , td , li , dd ja dt ovat hyvä alku peruspohjan määrittämiselle. Sisällytä HTML ja vartalo vain siinä tapauksessa, mutta monet selaimet ohittavat kirjasimen valinnat, jos määrität vain fontit HTML: lle tai keholle.
pääotsikot
HTML-otsikot ovat tärkeitä, jotta voit auttaa sivustosi ääriviivaa ja anna hakukoneen syventyä sivustoosi. Ilman tyylejä ne ovat kaikki melko ruma, joten määritä niiden oletustyylit ja määritä fonttiperhe ja kunkin fonttikoko.
h1, h2, h3, h4, h5, h6 {font-perhe: Arial, Helvetica, sans-serif; } h1 {font-size: 2em; } h2 {font-size: 1.5em; } h3 {font-size: 1.2em; } h4 {font-size: 1.0em; } h5 {font-size: 0,9em; } h6 {font-size: 0.8em; }Älä unohda linkkejä
Linkkien värien suunnittelu on lähes aina kriittinen osa suunnittelua, mutta jos et määritä niitä oletustyylissä, on mahdollista unohtaa ainakin yksi näennäisluokista. Määritä ne pienellä muunnelulla sinisellä ja muuta sitten ne, kun olet määrittänyt määritetyn sivun värivalikoiman.
Jos haluat asettaa linkit siniseen sävyyn, aseta:
- linkit sinisenä
- vieraillut linkit tummansinisenä
- viedä linkit vaaleansinisenä
- aktiiviset linkit jopa kirkkaammiksi
kuten tässä esimerkissä esitetään:
a: linkki {väri: # 00f; } a: vieraili {color: # 009; } a: hover {väri: # 06f; } a: aktiivinen {väri: # 0cf; } Suunnittelemalla linkit melko harmittomalla värimallilla varmistat, etten unohda yhtään luokasta, ja tekee niistä myös hieman vähemmän kuin oletuksena sininen, punainen ja violetti.Täydellinen tyyliarkki
Tässä on täysi tyyli:
@charset "utf-8"; html, keho {marginaali: 0px; pehmuste: 0px; raja: 0px; väri: # 000; tausta: #fff; } html, elin, p, th, td, li, dd, dt {font: 1em Arial, Helvetica, sans-serif; } h1, h2, h3, h4, h5, h6 {font-perhe: Arial, Helvetica, sans-serif; } h1 {font-size: 2em; } h2 {font-size: 1.5em; } h3 {font-size: 1.2em; } h4 {font-size: 1.0em; } h5 {font-size: 0,9em; } h6 {font-size: 0.8em; } a: linkki {väri: # 00f; } a: vieraili {color: # 009; } a: hover {väri: # 06f; } a: aktiivinen {väri: # 0cf; }