Når du bygger et nettsted fra begynnelsen, er det smart å begynne med de grunnleggende stilene som er definert. Det er som å starte med et rent lerret og friske børster. Et av de første problemene som webdesignere står overfor, er at nettlesere er forskjellige. Standard skriftstørrelsen er forskjellig fra plattform til plattform, standardfontsfamilien er forskjellig, noen nettlesere definerer marginer og polstring på kropps-taggen mens andre ikke gjør det, og så videre. Omgå disse inkonsekvensene ved å definere standardstilene for websidene dine.
CSS og tegnsettet
Første ting først, sett tegnsettet av CSS-dokumentene til utf-8 . Selv om det er sannsynlig at de fleste sidene du designer er skrevet på engelsk, kan noen være lokalisert tilpasset for ulike språklige og kulturelle sammenhenger. Når de er, forenkler utf-8 prosessen. Innstilling av tegnsettet i det eksterne stilarket har ikke forrang over en HTTP-header, men i alle andre situasjoner vil det.
Det er lett å sette tegnsettet. For den første linjen i CSS-dokumentet skriv:
@charset "utf-8";
På denne måten, hvis du bruker internasjonale tegn i innholdsegenskapen eller som klasse- og ID-navn, fungerer stilarket fortsatt riktig. Det neste som et standard stilark trenger, er stiler for å nullstille marginer, polstring og grenser. Dette sørger for at alle nettlesere plasserer innholdet på samme sted, og det er ikke skjulte mellomrom mellom nettleseren og innholdet. For de fleste websider er dette for nær kanten for tekst, men det er viktig å starte der, slik at bakgrunnsbilder og oppdelingsdivisjoner er lined opp riktig. html, kropp { margin: 0px; polstring: 0px; grense: 0px; }
Angi standard forgrunns- eller skriftfargen til svart og standard bakgrunnsfarge til hvit. Selv om dette vil mest sannsynlig endres for de fleste websidedesigner, vil det være lettere å lese og arbeide med disse standardfargene på kroppen og HTML-taggen først. html, kropp { farge: # 000; bakgrunn: #fff; } Skriftstørrelsen og skrifttypefamilien er noe som uunngåelig endres når designen tar tak i men starter med en standard skriftstørrelse på 1em og en standard skrifttypefamilie av Arial, Genève eller noen andre sans-serif-skrifttyper. Bruken av ems holder siden så tilgjengelig som mulig, og en sans-serif-skrifttype er mer lesbar på skjermen. html, kropp, p, th, td, li, dd, dt { font: 1em Arial, Helvetica, sans-serif; }
Det kan være andre steder hvor du kanskje finner tekst, men p , th , td , li , dd , og dt er en god start for å definere grunnfonten. Inkludere HTML og kropp bare i tilfelle, men mange nettlesere overstyrer skriftvalgene hvis du bare definerer fonter for HTML eller kroppen. HTML-overskrifter er viktige å bruke for å hjelpe nettstedet ditt, og la søkemotorer bli dypere inn i nettstedet ditt. Uten stiler er de alle ganske stygg, så sett standardstilene på dem alle, og definer fontfamilien og skriftstørrelsene 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 {font-size: 0.9em; } h6 {font-size: 0.8em; } Styling av koblingsfarger er nesten alltid en kritisk del av designen, men hvis du ikke definerer dem i standardstilene, er det sjansen for at du glemmer minst en av pseudoklassene. Definer dem med litt liten variasjon på blått, og endre dem når du har fargepaletten for nettstedet definert. For å sette koblingene i nyanser av blått, sett: som vist i dette eksemplet: a: link {color: # 00f; }a: besøkt {farge: # 009; }a: svever {farge: # 06f; }a: aktiv {farge: # 0cf; }
Ved å stylere koblingene med et ganske uskyldig fargevalg, sikrer det at du ikke vil glemme noen av klassene, og gjør dem litt mindre høyt enn standardblått, rødt og lilla. Her er det fulle stilarket: @charset "utf-8"; html, kropp { margin: 0px; polstring: 0px; grense: 0px; farge: # 000; bakgrunn: #fff; } html, kropp, p, th, td, li, dd, dt { font: 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 {font-size: 0.9em; } h6 {font-size: 0.8em; } a: link {color: # 00f; } a: besøkt {farge: # 009; } a: svever {farge: # 06f; } a: aktiv {farge: # 0cf; } Styling Page Body
Standard skriftstiler
overskrifter
Ikke glem linkene
Full stilark
