I denne artikkelen skal jeg ta for meg de aller fleste funksjonene til CSS. CSS er et kodespråk som påvirker HTML-taggene.
Syntaks
CSS bruker denne oppbygningen:
- Kode: Merk alt
HTML-tagg {
egenkap: verdi;
egenskap: verdi
}
Eksempel:
- Kode: Merk alt
body {
color: #000;
background-color: #FFF
}
Hvis du vil at de samme verdiene skal gjelde for flere tagger, skill dem med komma (,):
- Kode: Merk alt
p, div, span {
color: #000;
background-color: #FFF
}
- Kode: Merk alt
div p a {
color: #000;
background-color: #FFF
}
- Kode: Merk alt
* {
color: #000;
background-color: #FFF
}
- Kode: Merk alt
* {
color: #000;
background-image: url("bilde.gif")
}
Sette inn i HTML-filen
CSS kan settes inn i HTML på re måter:
- Ekstern fil: Du kan lagre CSS som en egen .css-fil. For å benytte kodene i HTML-filen, kan du skrive denne koden i <head>:
- Kode: Merk alt
<link rel="stylesheet" type="text/css" href="fil.css">
- Direkte i filen: Hvis du bare vil bruke kodene i den ene filen, kan du sette de inn direkte i filen:
- Kode: Merk alt
<style type=”text/css">
<!--
body {
background-color: #FFF
}
-->
</style>
- Direkte i HTML-koden: Det finnes tre måter å sette CSS inn i en HTML-kode på: style, id og class. Hvis du vil bruke CSS på bare en bestemt kode på hele siden, kan du bruke style:
- Kode: Merk alt
<body style="background-color: #FFF">
Importerte filer
@import er en nyttig funksjon i CSS. Den henter info fra andre CSS-filer:
- Kode: Merk alt
@import url("fil.css");
Class
Class kan brukes når du vil bruke samme kode på flere HTML-tagger i filen.
CSS:
- Kode: Merk alt
p.avsnitt {
color: #00F;
}
HTML:
- Kode: Merk alt
<p class="avsnitt">Bla bla bla...</p>
Bla bla bla...
ID
ID er nesten det samme som class, men det bør forøvrig kun brukes èn gang per side.
CSS:
- Kode: Merk alt
#gul {
background-color: #FF0
}
HTML:
- Kode: Merk alt
<td id="gul">Bla bla bla...</td>
Kodene
Font
Font bestemmer skrifttype og -størrelse:
- Kode: Merk alt
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: 400;
font-style: normal;
font-variant: normal
}
- font-family: Bestemmer hvilken skrifttype som skal brukes. Hvis nettleseren ikke finner Arial, vil den bruke Helvetica. Finnes ikke denne heller på maskinen, brukes en sans-serif skrifttype; med andre ord en skrifttype uten pynt (eksempel: Tahoma). serif er skrifttyper med pynt (eksempel: Comic Sans MS).
- font-size: Se under Størrelser, eller bruk X: xx-small er nettleserens minste skriftstørrelse. x-small er en halv gang større, small er en halv gang større enn x-small, og slik fortsetter det gjennom medium, large, x-large og xx-large. En annen ting du kan bruke er smaller og larger: Smaller vil gjøre teksten en tredel mindre enn den forrige, og larger vil gjøre den en halv gang større.
- font-weight: Bestemmer hvor tykk teksten skal være.
- font-style: Har verdiene normal, italic og oblique. Italic vil bruke den skråstilte versjonen av skrifttypen. oblique gjør at nettleseren skråstiller den normale versjonen av skrifttypen.
- font-variant: Har valgene small-caps og normal. small-caps vil gjøre små bokstaver store, men med en mindre skriftstørrelse.
- Kode: Merk alt
p {
font: normal normal 400 13px Arial, Helvetica, sans-serif
}
Text
Nesten det samme som font, men bestemmer mer om selve teksten:
- Kode: Merk alt
p {
text-align: left;
text-decoration: none;
taxt-indent: 10px;
text-transform: none
}
- text-align: Bestemmer om teksten skal være venstrestilt, midtstilt osv. Har valgene left, center, right og justify.
- text-decoration: underline understreker teksten, overline lager linje over teksten og line-through stryker den ut.
- text-indent: Bestemmer innrykk. Se under Størrelser.
- text-transform: Bestemmer om det skal være store eller små bokstaver. uppercase lager BARE STORE BOKSTAVER, lovercase lager bare små bokstaver og capitalize gjør at Alle Ord Får Stor Forbokstav.
Background
Background lar deg bestemme bakgunner:
- Kode: Merk alt
body {
background-color: #FFF;
background-image: url(fil.gif);
background-repeat: no-repeat;
background-position: center;
background-attachment: scroll
}
- background-color: Bakgrunnsfarge.
- background-image: Bakgrunnsbilde.
- background-repeat: Bestemmer om bakgrunnsbildet skal gjenta seg selv. repeat repeterer bildet begge veier, repeat-x repterer bildet vannrett, repeat-y loddrett og no-repeat lager bare ett bilde som ikke repeteres.
- background-position: Hvor bakgrunnen skal være. Kan angis på to måter: Enten med avstand fra øverste venstre hjørne, f. eks. 20px 20px (se størrelser), hvor den første verdien oppgir avstanden fra venstre kant og den andre fra øverste kant. Den adre muligheten er med valgene left top / top left, top, right top / top right, left, center, right, left bottom / bottom left, bottom, right bottom / bottom right. Kan du engelsk, skal det ikke være nødvendig å forklare hva disse betyr
- background-attachment: Har valgene scrolll og fixed. scroll gjør at bakgrunnen scroller i takt med siden, og fixed gjør at den sitter på samme sted på skjermen uansett hvor man scroller.
- Kode: Merk alt
background: #FFF url(fil.gif) no-repeat scroll center;
Margin
Margin kan brukes til å sette en marg på ting.
- Kode: Merk alt
body {
margin-left: 10px;
margin-top: 1cm;
margin-right: 8mm;
margin-bottom: 4pt
}
- Kode: Merk alt
margin: 1cm 8mm 4pt 10px;
- Kode: Merk alt
margin: 10px;
Border
Border kan brukes til å sette en linje rundt ting.
- Kode: Merk alt
body {
border-left: 1px;
border-top: 1cm;
border-right: 1mm;
border-bottom: 1pt;
border-style: solid;
border-color: #000;
}
Hvis du vil angi alle verdiene i et eksempel, bruk denne rekkefølgen: width style color
- Kode: Merk alt
border: 2px solid #000;
Padding
Padding lager en marg innenfor borderen og bruker akkurat samme egenskaper som margin:
- Kode: Merk alt
body {
padding-left: 10px;
padding-top: 1cm;
padding-right: 8mm;
padding-bottom: 4pt
}
Andre CSS-koder
Width
Bestemmer bredden på ting. Se under Størrelser.
- Kode: Merk alt
div {
width: 10in
}
Height
Bestemmer høyden på ting. Se under Størrelser.
- Kode: Merk alt
div {
height: 10in
}
Color
Bestemmer skriftfarge.
- Kode: Merk alt
p {
color: #000
}
Float
Gjør at du kan velge hvor objektet skal ligge i forhold til andre objekter.
- Kode: Merk alt
div {
float: left
}
Clear
Gør at du kan plassere objektet i forhold til et objekt med float-egenskap.
- Kode: Merk alt
div {
clear: both
}
Vertical-align
Gjør at du kan skrive hevet eller senket skrift.
- Kode: Merk alt
p {
vertical-align: normal
}
Line-height
Lar deg angi lnjeavstanden.
- Kode: Merk alt
p {
line-height: normal
}
Letter-spacing
Lar deg forstørre avstanden mellom bokstavene:
- Kode: Merk alt
p {
letter-spacing: .2px
}
- Kode: Merk alt
p {
letter-spacing: -.2px
}
Word-spacing
Lar deg forstørre mellomrommene:
- Kode: Merk alt
p {
word-spacing: .2px
}
- Kode: Merk alt
p {
word-spacing: -.2px
}
Måleenheter
Størrelser kan angis med piksler (px), centimeter (cm), millimeter (mm), punkter (pt), tommer (in), pica (pc), X (ex), em (em) eller prosent (%). X regnes ut fra skrifttypens lille x. 10ex, f. eks., er ti ganger så stort som x. Em beregnes utifra nettleserens standardstørrelse, og % er relativ til elementets egentlige størrelse/posisjon.
Kommentarer
Kommentarer ignoreres av nettleseren.
- Kode: Merk alt
/*Kommentar her.*/
Ofte stilte spørsmål
Kodene virker ikke! Hva kan være feil?
Ikke alle HTML-tagger kan ha CSS. Hvis du for eksempel har skrevet <font style="color: #00F">, anbefaler jeg å bruke <p>. En annen feil som ofte blir gjentatt er at man blander HTML med CSS. For eksempel skal det ikke være bgcolor, men background-color.
Må CSS være installert på serveren for å virke?
CSS tolkes av nettleseren, ikke serveren. Ergo: Nei.
Kan jeg ha HTML-koder i CSS-koden?
Nei. Dessuten er det totalt unødvendig.
>>>> © Tomas Engebretsen <<<<
Viktig: Dette er IKKE en supporttråd for CSS. Lurer du på noe, start et NYTT emne.
