Cascading Style Sheet (CSS) Oversikt med prøve

click fraud protection

Når du bygge et nettsted fra bunnen av, det er smart å starte med de definerte grunnleggende stilene. Det er som å starte med et rent lerret og friske børster. Et av de første problemene som webdesignere møter er at nettlesere er alle forskjellige. Standard skriftstørrelse er forskjellig fra plattform til plattform, standard skriftfamilie er forskjellig, noen nettlesere definerer marginer og polstring på kroppskoden, mens andre ikke gjør det, og så videre. Gå rundt disse uoverensstemmelsene ved å definere standardstilene for websidene dine.

CSS og tegnsettet

Første ting først, sett tegnsettet til CSS-dokumentene dine til utf-8. Selv om det er sannsynlig at de fleste av sidene du designer er skrevet på engelsk, kan det hende at noen er lokalisert - tilpasset forskjellige språklige og kulturelle sammenhenger. Når de er det, forenkler utf-8 prosessen. Angi tegnsettet i eksternt stilark vil ikke gå foran en HTTP topptekst, men i alle andre situasjoner vil det gjøre det.

Det er enkelt å sette tegnsettet. For første linje i CSS-dokumentet skriv:

instagram viewer
@charset "utf-8";

På denne måten, hvis du bruker internasjonale tegn i innholdsegenskapen eller som klasse- og ID-navn, vil stilarket fortsatt fungere riktig.

Styling av sidekroppen

Det neste et standard stilark trenger er stiler å null marginer, polstring og grenser. Dette sørger for at alle nettlesere plasserer innholdet på samme sted, og at det ikke er noen skjulte mellomrom mellom nettleseren og innholdet. For de fleste nettsider er dette for nær kanten for tekst, men det er viktig å starte der, slik at bakgrunnsbilder og layoutinndelinger er riktig oppstilt.

html, kropp {
margin: 0px;
polstring: 0px;
grense: 0px;
}

Sett standard forgrunn eller skriftfarge til svart og standard bakgrunnsfarge til hvit. Selv om dette mest sannsynlig vil endre seg for de fleste websidesign, har disse standardfargene satt på kroppen og HTML-tag først gjør siden lettere å lese og jobbe med.

html, kropp {
farge: # 000;
bakgrunn: #fff;
}

Standard skriftstiler

Skriftstørrelsen og skriftfamilien er noe som uunngåelig vil endres når designen tar tak, men begynner med en standard skriftstørrelse på 1 em og en standard fontfamilie av Arial, Genève eller noe annet sans-serif font. Bruken av ems holder siden så tilgjengelig som mulig, og en sans-serif-skrift er mer leselig på skjermen.

html, kropp, p, th, td, li, dd, dt {
font: 1em Arial, Helvetica, sans-serif;
}

Det kan være andre steder du kan finne tekst, men s, th, td, li, dd, og dt er en god start for å definere basiskriften. Inkludere HTML og kropp bare i tilfelle, men mange nettlesere overstyrer skriftvalg hvis du bare definerer skriftene dine for HTML eller brødtekst.

Overskrifter

HTML-overskrifter er viktig å bruke for å hjelpe nettstedet med å skissere og la søkemotorer komme dypere inn på nettstedet ditt. Uten stiler er de alle ganske stygge, så sett standardstiler på dem alle og definer skriftfamilien 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 {skriftstørrelse: 0,9 em; }
h6 {skriftstørrelse: 0,8 em; }

Ikke glem koblingene

Styling av koblingsfargene er nesten alltid en kritisk del av designet, men hvis du ikke definerer dem i standardstiler, er sjansen stor for at du glemmer minst en av pseudoklassene. Definer dem med noen små variasjoner på blått, og endre dem når du har definert fargepaletten for nettstedet.

For å stille inn lenker i blå nyanser, sett:

  • lenker som blå
  • besøkte lenker som mørkeblå
  • svevekoblinger som lyseblå
  • aktive lenker som enda lysere blå

Som vist i dette eksemplet:

a: link {color: # 00f; }
a: besøkt {color: # 009; }
a: sveve {farge: # 06f; }
a: aktiv {color: # 0cf; }

Ved å utforme koblingene med et ganske uskadelig fargevalg, sørger det for at du ikke glemmer noen av klassene, og gjør dem også litt mindre høye enn standard blå, rød og lilla.

Fullt stilark

Her er hele 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 {skriftstørrelse: 0,9 em; }
h6 {skriftstørrelse: 0,8 em; }
a: link {color: # 00f; }
a: besøkt {color: # 009; }
a: sveve {farge: # 06f; }
a: aktiv {color: # 0cf; }
instagram story viewer