Kun sinä rakenna verkkosivusto tyhjästä, on järkevää aloittaa määritellyillä perustyyleillä. Se on kuin aloittaa puhtaalla kankaalla ja tuoreilla harjoilla. Yksi ensimmäisistä ongelmista, joita web-suunnittelijat kohtaavat, on se verkkoselaimet ovat kaikki erilaisia. Oletuskirjasinkoko on erilainen eri alustoilla, oletusfonttiperhe on erilainen, jotkut selaimet määrittelevät marginaalit ja täytteen rungon tagiin, kun taas toiset eivät, ja niin edelleen. Voit kiertää nämä epäjohdonmukaisuudet määrittelemällä verkkosivujen oletustyylit.
CSS ja merkistö
Ensinnäkin, aseta CSS-asiakirjojesi merkistö utf-8. Vaikka on todennäköistä, että suurin osa suunnittelemistasi sivuista on kirjoitettu englanniksi, jotkut voidaan lokalisoida - mukauttaa erilaisiin kielellisiin ja kulttuurisiin olosuhteisiin. Kun ne ovat, utf-8 yksinkertaistaa prosessia. Merkkijoukon asettaminen ulkoinen tyyli ei ole etusijalla HTTP otsikko, mutta kaikissa muissa tilanteissa se tulee.
Merkistö on helppo asettaa. Kirjoita CSS-asiakirjan ensimmäiselle riville:
@charset "utf-8";
Tällä tavalla, jos käytät kansainvälisiä merkkejä sisältöomaisuudessa tai nimellä luokan ja tunnuksen nimet, tyylitaulukko toimii edelleen oikein.
Sivun rungon muotoilu
Seuraava asia, jonka oletustyylitaulukko tarvitsee, ovat tyylit nollaa marginaalit, pehmusteet ja reunukset. 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ä reunaa tekstiä varten, mutta on tärkeää aloittaa siitä, jotta taustakuvat ja asettelun jaot ovat rivissä oikein.
html, body {
marginaali: 0px;
pehmuste: 0px;
reunus: 0px;
}
Aseta etualan tai kirjasimen oletusväri mustaksi ja taustan oletusväri valkoiseksi. Vaikka tämä todennäköisesti muuttuu useimmille verkkosivumalleille, näiden vakiovärien asettaminen runkoon ja HTML-tunniste aluksi helpottaa sivun lukemista ja käsittelyä.
html, body {
väri: # 000;
tausta: #fff;
}
Oletuskirjasintyylit
Kirjasinkoko ja kirjasinperhe muuttuvat väistämättä, kun muotoilu tarttuu, mutta ne alkavat oletusarvoisella kirjasinkoolla 1 em ja oletusarvo kirjasinperhe Arial, Geneve tai jokin muu sans-serif-fontti. EMS: n käyttö pitää sivun mahdollisimman helposti saatavilla, ja sans-serif-fontti on helpommin luettavissa näytöllä.
html, body, p, th, td, li, dd, dt {
fontti: 1em Arial, Helvetica, sans-serif;
}
Saattaa olla muita paikkoja, joissa saatat löytää tekstiä, mutta s, th, td, li, ddja dt ovat hyvä alku peruskirjasimen määrittelylle. Sisältää HTML ja runko vain siinä tapauksessa, mutta monet selaimet ohittavat fontin valinnat jos määrität fontit vain HTML: lle tai tekstille.
Otsikot
HTML-otsikot on tärkeää käyttää auttamaan sivustoasi hahmottelemaan ja antamaan hakukoneiden päästä syvemmälle sivustoosi. Ilman tyylejä ne ovat kaikki melko rumia, joten aseta oletustyylit kaikille ja määritä kirjasinperhe ja kirjasinkoko kullekin.
h1, h2, h3, h4, h5, h6 {
fonttiperhe: 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 muotoilu on melkein aina kriittinen osa suunnittelua, mutta jos et määritä niitä oletustyyleissä, voit todennäköisesti unohtaa ainakin yhden näennäisluokan. Määritä ne pienillä muunnelmilla sinisellä ja vaihda ne sitten, kun olet määrittänyt sivuston väripaletin.
Aseta linkkejä sinisissä sävyissä, aseta:
- linkkejä sinisenä
- vieraillut linkit kuin tummansininen
- vie linkit kuin vaaleansininen
- aktiiviset linkit yhtä vaaleampana sinisenä
Kuten tässä esimerkissä on esitetty:
a: linkki {väri: # 00f; }
a: vieraili {color: # 009; }
a: vie hiiri {color: # 06f; }
a: aktiivinen {color: # 0cf; }
Muotoilemalla linkit melko vaarattomalla värimallilla, se varmistaa, että et unohda yhtään luokkaa ja tekee niistä myös hieman vähemmän äänekkäitä kuin oletussininen, punainen ja violetti.
Koko tyylisivu
Tässä on koko tyylitaulukko:
@charset "utf-8";
html, body {
marginaali: 0px;
pehmuste: 0px;
reunus: 0px;
väri: # 000;
tausta: #fff;
}
html, body, p, th, td, li, dd, dt {
fontti: 1em Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
fonttiperhe: 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: vie hiiri {color: # 06f; }
a: aktiivinen {color: # 0cf; }