Styling av en notatblokklaget webside med CSS

Koble CSS-stilarket til HTML-en din

?

Når du har fått en stilark for nettstedet ditt, må du knytte det til selve websiden. For å gjøre dette bruker du link-taggen. Plasser følgende link-tag hvor som helst i

Fiks sidemargene

Når du skriver XHTML for forskjellige nettlesere, en ting du vil lære er at de alle ser ut til å ha forskjellige marginer og regler for hvordan de viser ting. Den beste måten å være sikker på at nettstedet ditt ser likt ut i de fleste nettlesere er å ikke la ting som marginer være standard til nettleservalget.

Vi foretrekker å starte sider i øvre venstre hjørne, uten ekstra utfylling eller marger rundt teksten. Selv om vi skal fylle innholdet, setter vi marginene til null slik at vi starter med samme blanke ark. For å gjøre dette, legg til følgende i styles.css-dokumentet:

html,body { 
margin: 0px; 
polstring: 0px; 
kantlinje: 0px; 
venstre: 0px; 
topp: 0px; 
}

Endre skriften på siden

Fonten er ofte det første du vil endre på en nettside. Standaren skrift på en nettside kan være stygg og er faktisk opp til nettleseren selv, så hvis du ikke definerer fonten, vet du egentlig ikke hvordan siden din vil se ut.

Vanligvis vil du endre skrifttypen på avsnitt, eller noen ganger på hele dokumentet. For dette nettstedet vil vi definere skriften på overskrifts- og avsnittsnivå. Legg til følgende i styles.css-dokumentet:

p, så { 
font: 1em Arial, Helvetica, sans-serif; 
} 
h1 { 
font: 2em Arial, Helvetica, sans-serif; 
} 
h2 { 
font: 1,5em Arial, Helvetica, sans-serif; 
} 
h3 { 
font: 1,25em Arial, Helvetica, sans-serif; 
}

Vi startet med 1em som grunnstørrelse for avsnitt og listeelementer, og brukte den til å angi størrelsen for overskriftene mine. Vi forventer ikke å bruke en overskrift som er dypere enn h4, men hvis du planlegger det, vil du også style den.

Gjør koblingene dine mer interessante

Standardfargene for lenker er blå og lilla for henholdsvis ubesøkte og besøkte lenker. Selv om dette er standard, passer det kanskje ikke til fargeskjemaet på sidene dine, så la oss endre det. I styles.css-filen legger du til følgende:

en kobling { 
font-familie: Arial, Helvetica, sans-serif; 
farge: #FF9900; 
tekst-dekorasjon: understreking; 
} 
a:visited { 
farge: #FFCC66; 
} 
a:hover { 
bakgrunn: #FFFFCC; 
font-weight: fet; 
}

Vi setter opp tre lenkestiler, a:link som standard, a:visited for når den har blitt besøkt, vi endrer farge og a:hover. Med a:hover får vi lenken til å få en bakgrunnsfarge og bli fet for å understreke at det er en lenke som skal klikkes.

Style navigasjonsdelen

Siden vi setter navigasjonsdelen (id='nav') først i HTML, la oss style den først. Vi må angi hvor bred den skal være og sette en bredere marg på høyre side slik at hovedteksten ikke støter mot den. vi setter også en kant rundt det.

Legg til følgende CSS i styles.css-dokumentet:

#er ikke { 
bredde: 225px; 
marg-høyre: 15px; 
kantlinje: middels solid #000000; 
} 
#navn i { 
liste-stil: ingen; 
} 
.bunntekst { 
skriftstørrelse: .75em; 
klar: begge; 
bredde: 100 %; 
tekst-align: center; 
}

Liste-stil-egenskapen setter opp listen inne i navigasjonsdelen slik at den ikke har kuler eller tall, og .bunnteksten stiler opphavsrettsdelen til å være mindre og sentrert i delen.

Plassering av hovedseksjonen

Ved å plassere hoveddelen din med absolutt posisjonering kan du være sikker på at den forblir akkurat der du vil at den skal være på nettsiden din. Vi gjorde den 800px bred for å få plass større skjermer , men hvis du har en mindre skjerm, vil du kanskje gjøre den smalere.

Plasser følgende i styles.css-dokumentet:

#main { 
bredde: 800px; 
topp: 0px; 
posisjon: absolutt; 
venstre: 250px; 
}

Styling av avsnittene dine

Siden jeg allerede har angitt avsnittsfonten ovenfor, ønsket jeg å gi hvert avsnitt et lite ekstra 'kick' for å få det til å skille seg bedre ut. Jeg gjorde dette ved å sette en kant på toppen som fremhevet avsnittet mer enn bare bildet alene.

Plasser følgende i styles.css-dokumentet:

.heat { 
border-top: tykk solid #FFCC00; 
}

Vi bestemte oss for å gjøre det som en klasse kalt 'topline' i stedet for bare å definere alle avsnitt på den måten. På denne måten, hvis vi bestemmer oss for å ha et avsnitt uten en topp gul linje, kan vi ganske enkelt utelate class='topline' i avsnittskoden og den vil ikke ha den øverste kantlinjen.

Styling av bildene

Bilder har vanligvis en kant rundt seg, dette er ikke alltid synlig med mindre bildet er en lenke, men vi liker å ha en klasse innenfor CSS-stilark som slår av grensen automatisk . For dette stilarket opprettet vi 'noborder'-klassen, og de fleste bildene i dokumentet er en del av denne klassen.

Den andre spesielle delen av disse bildene er plasseringen på siden. Vi ønsket at de skulle være en del av avsnittet de var i uten å bruke tabeller for å justere dem. Den enkleste måten å gjøre dette på er å bruke float CSS-egenskapen.

Plasser følgende i styles.css-dokumentet:

#main img { 
flyte: venstre; 
marg-høyre: 5px; 
marg-bunn: 15px; 
} 
.noborder { 
kantlinje: 0px ingen; 
}

Som du kan se, er det også angitt margegenskaper på bildene, for å sikre at de ikke blir knust opp mot den flytende teksten som er ved siden av dem i avsnittene.

Se nå på den fullførte siden din

Når du har lagret CSS-en din, kan du laste inn pets.htm-siden på nytt i nettleseren din. Siden din skal se ut som den som vises på dette bildet, med bildene justert og navigasjonen plassert riktig på venstre side av siden.

Følg de samme trinnene for alle dine interne sider for dette nettstedet. Du vil ha én side for hver side i navigasjonen.