Når du opbyg et websted fra bunden, det er smart at starte med de definerede grundlæggende stilarter. Det er som at starte med et rent lærred og friske børster. Et af de første problemer, som webdesignere står over for, er det webbrowsere er alle forskellige. Standardskrifttypestørrelsen er forskellig fra platform til platform, standardskrifttypefamilien er forskellig, nogle browsere definerer margener og polstring på body-tagget, mens andre ikke gør det og så videre. Omgå disse uoverensstemmelser ved at definere standardformaterne til dine websider.
CSS og tegnsættet
Første ting først skal du indstille tegnsættet for dine CSS-dokumenter til utf-8. Det er sandsynligt, at de fleste af de sider, du designer, er skrevet på engelsk, men nogle kan være lokaliseret - tilpasset til forskellige sproglige og kulturelle sammenhænge. Når de er, forenkler utf-8 processen. Indstilling af tegnsæt i eksternt stilark vil ikke have forrang over en HTTP header, men i alle andre situationer gør det det.
Det er let at indstille tegnsættet. For den første linje i CSS-dokumentet skriv:
@charset "utf-8";
På denne måde, hvis du bruger internationale tegn i indholdsejendommen eller som klasse- og ID-navne, vil stilarket stadig fungere korrekt.
Styling af sidekroppen
Den næste ting, som et standardformatark har brug for, er typografier nul margener, polstring og kanter. Dette sikrer, at alle browsere placerer indholdet på det samme sted, og at der ikke er nogen skjulte mellemrum mellem browseren og indholdet. For de fleste websider er dette for tæt på kanten til tekst, men det er vigtigt at starte der, så baggrundsbilleder og layoutinddelinger er opstillet korrekt.
html, krop {
margen: 0px;
polstring: 0px;
kant: 0px;
}
Indstil standard forgrunds- eller skriftfarve til sort og standard baggrundsfarve til hvid. Selvom dette sandsynligvis vil ændre sig for de fleste websidesign, har disse standardfarver sat på kroppen og HTML-tag gør siden først lettere at læse og arbejde med.
html, krop {
farve: # 000;
baggrund: #fff;
}
Standard skrifttypestil
Skriftstørrelsen og skrifttypefamilien er noget, der uundgåeligt vil ændre sig, når designet tager fat, men start med en standard skriftstørrelse på 1 em og en standard skrifttypefamilie af Arial, Genève eller et andet sans-serif skrifttype. Brug af ems holder siden så tilgængelig som muligt, og en sans-serif-skrifttype er mere læselig på skærmen.
html, krop, p, th, td, li, dd, dt {
skrifttype: 1em Arial, Helvetica, sans-serif;
}
Der kan være andre steder, hvor du måske finder tekst, men s, th, td, li, ddog dt er en god start for at definere basiskrifttypen. Omfatte HTML og legeme just in case, men mange browsere tilsidesætter valg af skrifttype hvis du kun definerer dine skrifttyper til HTML eller brødtekst.
Overskrifter
HTML-overskrifter er vigtige at bruge til at hjælpe med at skitsere dit websted og lade søgemaskiner komme dybere ind på dit websted. Uden typografier er de alle ret grimme, så angiv standardformater på dem alle, og definer skrifttypefamilien og skriftstørrelserne for hver.
h1, h2, h3, h4, h5, h6 {
font-familie: Arial, Helvetica, sans-serif;
}
h1 {font-size: 2em; }
h2 {font-size: 1.5em; }
h3 {font-size: 1.2em; }
h4 {font-size: 1.0em; }
h5 {skriftstørrelse: 0,9 em; }
h6 {skriftstørrelse: 0,8 em; }
Glem ikke linkene
Styling af linkfarverne er næsten altid en kritisk del af designet, men hvis du ikke definerer dem i standardstilarterne, er chancerne for, at du glemmer mindst en af pseudoklasserne. Definer dem med nogle små variationer på blå, og skift dem, når du har defineret farvepaletten til webstedet.
For at indstille links i blå nuancer, sæt:
- links som blå
- besøgte links som mørkeblå
- svæver links som lyseblå
- aktive links som endnu lysere blå
Som vist i dette eksempel:
a: link {farve: # 00f; }
a: besøgte {color: # 009; }
a: svæver {farve: # 06f; }
a: aktiv {farve: # 0cf; }
Ved at style linkene med et ret uskadeligt farveskema, sikrer det, at du ikke glemmer nogen af klasserne, og gør dem også lidt mindre høje end standard blå, rød og lilla.
Komplet stilark
Her er det fulde stilark:
@charset "utf-8";
html, krop {
margen: 0px;
polstring: 0px;
kant: 0px;
farve: # 000;
baggrund: #fff;
}
html, krop, p, th, td, li, dd, dt {
skrifttype: 1em Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-familie: Arial, Helvetica, sans-serif;
}
h1 {font-size: 2em; }
h2 {font-size: 1.5em; }
h3 {font-size: 1.2em; }
h4 {font-size: 1.0em; }
h5 {skriftstørrelse: 0,9 em; }
h6 {skriftstørrelse: 0,8 em; }
a: link {farve: # 00f; }
a: besøgte {color: # 009; }
a: svæver {farve: # 06f; }
a: aktiv {farve: # 0cf; }