När du bygger en webbplats från början, är det smart att börja med de grundläggande stilar som definieras. Det är som att börja med en ren duk och färska borstar. Ett av de första problemen som webbdesigners står inför är att webbläsare är olika. Standard teckensnittstorlek skiljer sig från plattform till plattform, standardfontsfamiljen är annorlunda, vissa webbläsare definierar marginaler och vaddering på kroppslabeln medan andra inte, och så vidare. Ta bort dessa inkonsekvenser genom att definiera standardstilarna för dina webbsidor.
CSS och teckenuppsättningen
Första saker först, sätt teckenuppsättningen av dina CSS-dokument till utf-8 . Även om det är troligt att de flesta sidorna du skriver är skrivna på engelska, kan vissa vara lokaliserade anpassade för olika språkliga och kulturella sammanhang. När de är, förenklar utf-8 processen. Att ställa in teckenuppsättningen i det externa stilarket har inte företräde framför en HTTP-header, men i alla andra situationer kommer det att göra det.
Det är lätt att ställa in teckenuppsättningen. För den första raden i CSS-dokumentet skriv:
@charset "utf-8";
På så sätt kan stilarken fortfarande fungera korrekt om du använder internationella tecken i innehållsegenskapen eller som klass- och ID-namn. Nästa sak en standard stilark behöver är stilar för att nollställa marginaler, vadderingar och gränser. Detta gör att alla webbläsare placerar innehållet på samma plats, och det finns inte några dolda mellanslag 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 layoutavdelningar är ordnade på rätt sätt. html, kropp { marginal: 0px; vaddering: 0px; gränsen: 0px; }
Ställ in förvald förgrundsfärg eller teckensnittsfärg till svart och standard bakgrundsfärg till vit. Även om det här förmodligen kommer att förändras för de flesta webbsidedesigner, gör det enkelt att läsa och arbeta med dessa standardfärger på kroppen och HTML-taggen. html, kropp { färg: # 000; bakgrund: #fff; } Skriftstorleken och fontfamiljen är något som oundvikligen kommer att förändras när designen håller tag i men börjar med en standard teckenstorlek på 1em och en standardfontsfamilj av Arial, Genève eller någon annan sans-serif-typsnitt. Användningen av ems håller sidan så tillgänglig som möjligt, och en sans-serif-typsnitt är mer läsbar på skärmen. html, kropp, p, th, td, li, dd, dt { font: 1em Arial, Helvetica, sans-serif; }
Det kan finnas andra platser där du kanske hittar text, men p , th , td , li , dd , och dt är en bra start för att definiera basfonten. Inkludera html och kropp just i fall, men många webbläsare överreder typsnittet om du bara definierar dina teckensnitt för HTML eller kroppen. HTML-rubriker är viktiga att använda för att hjälpa din webbplats skissera och låta sökmotorerna bli djupare in i din webbplats. Utan stilar är de alla ganska fula, så ställ in standardstilar på alla och definiera typsnittfamiljen och teckensnittstorlekarna 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; } 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 lite variation på blå och ändra sedan dem när du har färgpalett för den definierade sidan. För att ange länkarna i nyanser av blått, sätt: som visas i detta exempel: a: länk {färg: # 00f; }a: besökte {färg: # 009; }a: svävar {färg: # 06f; }a: aktiv {färg: # 0cf; }
Genom att utforma länkarna med ett ganska oskyldigt färgschema säkerställer det att du inte kommer att glömma någon av klasserna och gör dem också lite mindre högljudda än standardblått, rött och lila. Här är det fullständiga stilarket: @charset "utf-8"; html, kropp { marginal: 0px; vaddering: 0px; gränsen: 0px; färg: # 000; bakgrund: #fff; } html, kropp, p, th, td, li, dd, dt { font: 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 {färg: # 00f; } a: besökte {färg: # 009; } a: svävar {färg: # 06f; } a: aktiv {färg: # 0cf; } Styling Sidkroppen
Standard teckensnitt
rubriker
Glöm inte länken
Full stilark
