Hvad er css?
Css - cascading style sheets - er et formateringssprog, der definerer hvordan html skal vises i en browser. Filerne er simple tekstfiler med endelsen .css, der kan skrives i et program som Notepad.
Eksempel på html og css
Tag f.eks html-elementet 'body' der omslutter alt hvad du ser på skærmen:
<body>her imellem er alt du ser på skærmen</body>
Du kan så 'kontakte' body med en css deklaration, som fortæller at baggrundsfarven på hjemmesiden skal være sort. I deklarationen har du:
body {background-color: #000;}
- en selector: body
- en egenskab ved den selector: background-color
- en værdi til egenskaben: #000 som er sort.
Man peger altså et bestemt html-element ud og bestemmer med en efterfølgende erklæring hvordan det skal præsenteres i en browser.
Forbindelsen fra css til html
Alle css-deklarationer placeres som hovedregel i eksterne stylesheets, der linkes til head-sektionen af html-dokumentet eller til den template, den er knyttet til i et cms. Dvs det samme stylesheet er linket til alle sider. Der findes desuden flere typer stylesheets, f.eks. til at styre print.
'Cascading' betyder at css indgår i et hieraki
Browsere har en default style som de viser en html-side med, hvis de ikke får andet at vide. Et linket stylesheet indgår i et hieraki af styles, der vises efter hvilken rækkefølge de placeres i og hvor specifikt de beskriver et html-element: et linket stylesheet vises frem for browserens egen default osv.
- Browserens egen default style
- Css linket til head-sektionen i html
- (Css indsat direkte i head-sektionen)
- (Css indsat direkte i den enkelte html-tag)
Css indsat direkte i html-dokumentet (de to sidste) overtrumfer et linket stylesheet og bruges derfor kun undtagelsesvist - det har de samme ulemper som tabel-baseret layout - at man skal ind og rette i koden i det enkelte dokument for at ændre udseendet på hjemmesiden.
Css-layout er baseret på div-tags
Html har et par elementer, som bruges til at gruppere indhold med og som (i modsætning til andre html-tags) ikke betyder noget i sig selv: span og div.
Når man styrer et layout med css, grupperer man sit indhold med <div> tags, der hver har en unik id, der kun kan findes én gang i et html-dokument.
F.eks <div id="menu">her er menuens links</div>.
Fra css kan du så bestemme hvordan alt det, der ligger inde i div-taggen med id 'menu', skal vises sådan:
#menu {
width:200px;
float:left;
}
og få en menu der er 200px bred og flyder til venstre i indholdet.
Lone Jacobsen -
tlf. 5188 6075 -
mail [at] lonejacobsen [dot] dk
