När du bygg en webbplats från grunden, det är smart att börja med de grundläggande stilar som definierats. Det är som att börja med en ren duk och färska borstar. Ett av de första problemen som webbdesigners möter är det webbläsare är alla olika. Standardstorleken på teckensnittet skiljer sig från plattform till plattform, standardteckensnittsfamiljen är annorlunda, vissa webbläsare definierar marginaler och vaddering på body-taggen medan andra inte gör det, och så vidare. Gå runt dessa inkonsekvenser genom att definiera standardformaten för dina webbsidor.
CSS och teckenuppsättningen
Först och främst, ställ in teckenuppsättningen för dina CSS-dokument till utf-8. Det är troligt att de flesta sidor du utformar är skrivna på engelska, men vissa kan vara lokaliserade - anpassade för olika språkliga och kulturella sammanhang. När de är, förenklar utf-8 processen. Ställa in teckenuppsättningen i externt stilark kommer inte ha företräde framför en HTTP rubrik, men i alla andra situationer kommer det.
Det är enkelt att ställa in teckenuppsättningen. För den första raden i CSS-dokumentet skriv:
@charset "utf-8";
På det här sättet, om du använder internationella tecken i innehållsegenskapen eller som klass- och ID-namn, stilarket fungerar fortfarande korrekt.
Styling av sidans kropp
Nästa sak som ett standardformatsark behöver är stilar till noll ut marginaler, stoppning och kantlinjer. Detta ser till att alla webbläsare placerar innehållet på samma plats och att det inte finns några dolda utrymmen mellan webbläsaren och innehållet. För de flesta webbsidor är detta för nära kanten för text, men det är viktigt att börja där så att bakgrundsbilder och layoutindelningar är ordnade korrekt.
html, body {
marginal: 0px;
stoppning: 0px;
gräns: 0px;
}
Ställ in standard förgrunds- eller teckensnittsfärg till svart och standardbakgrundsfärgen till vit. Även om detta sannolikt kommer att ändras för de flesta webbsidesdesigner, med dessa standardfärger inställda på kroppen och HTML-tagg först gör sidan lättare att läsa och arbeta med.
html, body {
färg: # 000;
bakgrund: #fff;
}
Standard typsnitt för teckensnitt
Teckenstorleken och teckensnittsfamiljen är något som oundvikligen kommer att ändras när designen tar tag men börjar med en standardstorlek på 1 em och en standard typsnittsfamilj av Arial, Genève eller något annat sans-serif teckensnitt. Användningen av ems håller sidan så tillgänglig som möjligt och ett sans-serif-teckensnitt är mer läsbart på skärmen.
html, kropp, p, th, td, li, dd, dt {
typsnitt: 1em Arial, Helvetica, sans-serif;
}
Det kan finnas andra platser där du kan hitta text, men sid, th, td, li, ddoch dt är en bra start för att definiera basteckensnittet. Omfatta HTML och kropp bara i fall, men många webbläsare åsidosätter val av teckensnitt om du bara definierar dina teckensnitt för HTML eller brödtext.
Rubriker
HTML-rubriker är viktiga att använda för att hjälpa din webbplats att beskriva och låta sökmotorer komma djupare in på din webbplats. Utan stilar är de alla ganska fula, så ställ in standardstilar på dem alla och definiera teckensnittsfamiljen och teckensnittsstorlekarna för varje.
h1, h2, h3, h4, h5, h6 {
font-family: 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; }
Glöm inte länkarna
Styling av länkfärgerna är nästan alltid en kritisk del av designen, men om du inte definierar dem i standardstilarna är chansen att du glömmer åtminstone en av pseudoklasserna. Definiera dem med en liten variation på blått och ändra dem när du har definierat färgpaletten för webbplatsen.
För att ställa in länkar i nyanser av blått, uppsättning:
- länkar som blå
- besökta länkar som mörkblå
- sväva länkar som ljusblå
- aktiva länkar som ännu ljusare blå
Som visas i detta exempel:
a: länk {color: # 00f; }
a: besökt {color: # 009; }
a: sväva {färg: # 06f; }
a: aktiv {färg: # 0cf; }
Genom att utforma länkarna med ett ganska oskadligt färgschema säkerställer du att du inte glömmer någon av klasserna och gör dem också lite mindre högt än standardblått, rött och lila.
Komplett stilark
Här är hela stilarket:
@charset "utf-8";
html, body {
marginal: 0px;
stoppning: 0px;
gräns: 0px;
färg: # 000;
bakgrund: #fff;
}
html, kropp, p, th, td, li, dd, dt {
typsnitt: 1em Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: 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: länk {color: # 00f; }
a: besökt {color: # 009; }
a: sväva {färg: # 06f; }
a: aktiv {färg: # 0cf; }