Hva er en Cascading Style Sheet?
Web-sider bruker HTML kode til å bestemme innhold og struktur. Å diktere hvordan dette innholdet skal presenteres for brukerne på nettstedet, bruker HTML CSS, eller Cascading Style Sheets. CSS erklæringer håndheve dimensjoner, posisjonering og diverse andre aspekter av det visuelle inntrykket av HTML-elementer både individuelt og i forhold til hverandre. Ved hjelp av CSS-koden, kan utviklere velge spesielle elementer og grupper av elementer på en side, angi instruksjoner for nettleseren å gjengi dem på bestemte måter.
HTML
Nettsteder inkludere CSS-koden på ulike måter. HTML-elementet markup kan inkludere CSS erklæringer in-line, som i følgende eksempel:
<Div style = "color: # FF0000"> Hei </ div>
Alternativt kan CSS vises på siden hodedelen som følger:
<Style type = "text / css">
div {
color: # FF0000;
}
</ Style>
Endelig kan CSS-kode bli listet opp i filer som er lagret med "Css" forlengelse, med plasseringen av filen som inngår i en link på siden hodedelen som følger:
<Link rel = "stylesheet" type = "text / css" href = "stylefile.css" />
CSS-kode som vises i noen av disse stedene vil bli gjennomført når nettleseren gjengir en side.
element velgere
CSS erklæringer spesifisere hvilke elementer som reglene skal brukes til. For eksempel vil angi stilregler for alle elementer av en bestemt type, kan følgende syntaks vises:
p {
font-weight: bold;
}
Dette betyr at teksten i alle ledd elementer vil bli gjengitt med fete typer.
CSS kan bruke ID-attributtet for et HTML-element på følgende måte:
footer {
width: 600px;
}
Dette vil gjenspeile et element med den unike ID-attributtet "footer" oppført i HTML som følger:
<Div id = "footer"> The footer innhold </ div>
CSS kan også bruke et element klasse, oppført ved hjelp av følgende syntaks:
<P class = "content"> Noe tekst </ p>
CSS kan velge denne klassen som følger:
p.content {
background-color: #FFFFCC;
}
Oppsett
CSS-kode for en webside kan angi layout og dimensjoner av elementer. Følgende HTML markup indikerer et element med to underordnede objekter inni den:
<Div id = "top"> <div class = "left"> Venstre side tekst </ div> <div class = "right"> Høyre side tekst </ div> </ div>
Følgende CSS-kode kunne legge ut disse elementene innenfor siden:
top {
width: 800px;
height: 100px;
}
div.left {
width: 200px;
float: left;
}
div.right {
width: 300px;
float: right;
}
Dette skulle tilsi at nettleseren skal vise to barne elementer innen den overordnede element flytende i venstre og høyre retninger, noe som også vil gjøre dem sitte på samme horisontal linje.
styling
CSS-kode kan kontrollere flere aspekter av HTML-elementet og sidestilen, inkludert tekst egenskaper, farger, bakgrunner, marginer, padding og grenser. Følgende eksempelkode angir en skrift for hele HTML-dokumentet:
html, body {
font-family: "Times New Roman", Times, serif;
}
Følgende kode bestemmer tekst- og bakgrunnsfarger for visse elementer:
p.info {
color: # 333333;
background-color: #DEDEDE;
}
Denne koden angir marger, padding og border for elementer med en bestemt ID attributt:
spesiell {
border: 1px solid # 000000;
padding: 5px;
margin: 10px;
}
Alle utvikle et nettsted eller webside kan bruke mange forskjellige styling muligheter til å lage design de ønsker å presentere for besøkende.