| |
CSS Boks-model
|
| |
Nu har du tidligere lært at man laver struktur på
websiden med tabeller, hvormed vi kan placere tekst, billeder m.v. i
tabellens enkelte celler. Nu vil jeg vise dig at vi kan gøre det samme
UDEN tabeller! Hvorfor nu det ? Se f.eks. koderne til en tilfældig
hjemmeside. En meget stor del af koderne består af tabel-koder. Det
tager - alt andet lige - tid for browseren at læse alt denne tabel kode,
og ikke mindst for den der på et tidspunkt skal til at redigere en
webside, hvor strukturen er bygget op med tabeller i tabeller som
kinesisk æsker. Det kan blive totalt uoverskueligt.
|
| |
Når du skriver html-koder arbejder du med TAGS. <
html> eller <table> er alle HTML tags. <table> er start tag for
elementet tabel og elementet afsluttes med slut tag'et </table>.
Men HTML taget <table> eller <h3> etc er foruddefineret. HTML tag'et
<table> fortæller således browseren at nu kommer der en tabel af en
eller anden art. Hvad nu hvis vi selv kunne
definere vores elementer!
Det er netop hvad dette handler om.
|
| |
CSS ( Cascading Style Sheets) giver os mulighed for,
at definere vores egne elementer med den såkaldte box-model. En
box kan sammenlignes med en tabel med blot én celle. En sådan box har (
ligesom en tabel) en række egenskaber som vi kan tildele værdier.
Nedenfor er vist en box med to egenskaber 'width' og 'height'.
Værdien af disse egenskaber defineres i vores stylesheet. |
| Her er vist en kasse som jo meget vel kunne
være en celle i en tabel, eller en tabel med kun én celle. Men det er
det ikke. Det er et box-element.
elementet tildeles et selvvalgt navn og boksens egenskaber og
tilhørende værdier defineres i stylesheetet. |
 |
| Eksempel: |
Jeg vil oprette en tekstboks på websiden. Jeg
definerer boksen i stylesheet som f.eks. .left_box {
width:300px;
height:200px;
background-color:beige;
color:black;
}
På websiden indsættes boksen i block-elementet <div>, på denne måde:
<div class="left_box">Her er
indholdet af mit element left_box og elementet lukkes igen med </div> |
| |
Se eksempel på hvordan dette ser ud i browseren
box_1
|
| To block-elementer |
Lad os prøve at oprettet endnu et element - denne gang
en boks som jeg kalder for 'right_box' . Denne boks indsættes
også i DIV -elementet. Se eksempel her. box_2
Vælg Vis -> Kilde i browseren for at se såvel stylesheet som html-koder
til denne side.
|
| Loat:left |
Men der er lige en ting her. De to blockelementer
vises ikke ved siden af hinanden. Men det kan vi hurtig lave om - jeg
tilføjer blot egenskaben 'float' til den ene box og tildeler egenskaber
værdien 'left'
se her hvordan det virker box_3 |
Læs mere om
web-terminologien.
|
På næste side skal vi se
nærmere på box-modellen og hvor vi sætter margin - og padding for
boksen. |
