Start På CSS
I denne artikel vil jeg forklare lidt om det absolut basiske i CSS, jeg starter med sprogets opbygning, HTML referencer og implementering.
Sprogets Opbygning
Alt i CSS er sat sammen af som et sæt, dette / disse sæt er så inden for en HMTL, class eller id reference, se eksempel herunder.
/* Disse to eksempler giver samme resultat */
div.header {
bakground-color:#400000;
}
/* div.header {...} er en mere specifik udgave af .header */
.header {
bakground-color:#400000;
}.header er en class attribut i HTML, denne class kan defineres flere gange.
div.header er en div med class attributen "header", det der gør sig gældende er at begge kriterier skal være opfyldt.
Men som det kan ses i ovenstående eksempel, så er der en CSS nøgle "background-color" og en værdi "#400000", disse er adskilt af kolon og linjen bliver afsluttet med semikolon.
I nedestående eksempel er der et id, det enkelte id kan kun blive brugt en gang i HTML, men kan defineres flere gange i CSS.
#header {
bakground-color:#400000;
}Der nogle CSS nøgler som er en sammenlægning af de under liggende, eksempelvis "border", se eksempel herunder.
div {
border:1px solid #DAA520;
}
/* Er det samme som */
div {
border-width:1px;
border-style:solid;
border-color:#DAA520;
}HTML Referencer
Man kan bruge tre referencer i HTML, disse er style, class og id attributterne.
Jeg vil lægge ud med style, denne vil indholde CSS nøgle og værdi par, dog anbefaler jeg at man skriver dem alle på en linje som vist her under.
<div style="border-width:1px;border-style:solid;border-color:#DAA520;">
...
</div>Man kan også bruge class attributten, denne kan defineres flere gange, disse kan have forskellige tags, som er vist her under.
<div class="sortbg">
...
</div>
<!-- Den samme class reference kan deles i mellem flere tags -->
<p class="sortbg">
...
</p>Denne class definition bliver delt af både div og p elementet, i CSS defineres den ved at sætte punktum foran, som vist her under.
.sortbg {
background-color:black;
}Et id i HTML kan kun defineres en gang, det er på grund af JavaScript function "getElementById", et id er unikt, og kan derfor kun bruges en gang. Et id defineres i HTML som vist her under.
<div id="sortbg">
...
</div>Man definerer et id i CSS ved at sætte hashtag foran, som er vist herunder.
#sortbg {
background-color:black;
}Implementering
Man kan implementere CSS på tre forskellige måder, man kan bruge style attributten i et tag, style tag i headeren og / eller et eksternt style sheet.
Style attributten er en del af et HTML tag, man definerer det på denne måde.
<div style="border-width:1px;border-style:solid;border-color:#DAA520;">
...
</div>Jeg har tidligere i denne artikel skrevet lidt om den metode.
Man kan også bruge et style tag, som også bliver kaldt et internt stilark.
<html>
<head>
...
<style type="text/css">
div {
border-width:1px;
border-style:solid;
border-color:#DAA520;
}
</style>
</head>
<body>
...
</body>
</html>Vi kan også have et eksternt stilark, dette vises her under.
<link rel="stylesheet" type="text/css" href="style/default.css">Rækkefølgen man overskriver tidligere indstillinger fra CSS er at man læser først det eksterne stilark, så læser man head stilarket, og til sidst, de informationer der er i tags.