I CSS behandles elementer generelt som rektangulære bokser eller striper. For å beskrive boksene brukes følgende egenskaper - som dere sikkert allerede kjenner til:
• width - elementets bredde
• height - elementets høyde
• left - avstand til venstre
• right - avstand til høyre
• top - avstand til toppen
• bottom - avstand til bunnen
• margin - ytterkant
• border - rammen rundt elementet
• padding - indre avstand, altså avstanden fra rammen til elementinnholdet
Disse egenskapene er allerede blitt presentert.
Bredden på et element er summen av bredden på de enkelte delene. (Det samme gjelder for høyden).
Et eksempel:
div#box {
width: 100px;
padding: 20px; /* 20px både til venstre og høyre /
border: 2px solid; / 2px både til venstre og høyre /
margin: 0 30px; / 30px både til venstre og høyre */
}Hvor bred er dette div-området? La oss se nærmere på de enkelte verdiene:
• 100 piksler
• 2 ganger 20 piksler
• 2 ganger 2 piksler
• 2 ganger 30 piksler
Dette gir en totalbredde på elementet på 204 piksler.
Bredden og høyden på elementer bestemmes av width og height. Hvis disse verdiene ikke er spesifisert i stilarket, gjelder følgende:
• Mangler width, vil boksen vises like bred som det omkringliggende elementet.
• Mangler height, vil elementet vises like høyt som innholdet.
Et eksempel:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
div#box {
border: 1px solid; /* 2px både til venstre og høyre */
margin: 0 30px; /* 30px både til venstre og høyre */
background-color:#6600CC;
}
</style>
</head>
<body>
<div id="box">PSD-Tutorials.de</div>
</body>
</html>
Slik ser det ut i nettleseren:
Det overordnede elementet til div-elementet er body. Derfor vises elementet faktisk like bredt som body-elementet. Når det gjelder høyden, tilpasses den innholdet.
Alt til null
Hver nettleser har et innebygd stilark. Disse stilarkene definerer noen standardverdier. Dette gjelder for eksempel også for padding og margin. Dessverre varierer disse standardverdiene i de forskjellige nettleserne. Dette gjør det vanskelig å oppnå identiske resultater i nettleserne spesielt i forbindelse med boksmodellen. Derfor anbefales det å sette avstanden som er forhåndsdefinert i nettleserne, til null. Dette kan gjøres på følgende måte:
* { padding: 0; margin: 0; }
Legg til denne linjen øverst i stilarket ditt. På denne måten kan du begynne å plassere boksene på ønskede steder nå.
Bokstyper
Hvordan et element til slutt vises og påvirker andre elementer, avhenger av elementtypen. Faktisk skiller CSS-spesifikasjonen mellom blokkelementer og inline-elementer. (Det er andre typer som ikke tas med her, siden de spiller en mindre rolle).
Blokkelementer lager alltid en ny linje. Påfølgende elementer starter også på en ny linje. Typiske blokkelementer er for eksempel p, div, h1, ul osv. Disse elementene er underlagt de tidligere nevnte egenskapene for ytteravstand, indre avstand, høyde, bredde og ramme.
<h1>Digital Painting & Matte Painting: Definerer bildeoppbyggingen</h1> <p>Modul 2 - Del 2: Et bilde er alltid en helhet. Imidlertid må man alltid tenke på hvor betrakteren bør se først.</p>
En titt på resultatet i nettleseren viser at h1 og p hver lager en egen linje.
Inline-elementer lager derimot ikke en egen avsnitt, de vises mer i den normale teksten. Typiske inline-elementer inkluderer span, em, strong, img, br osv. For inline-elementer gjelder ingen vertikale ytteravstander og ingen bredde- og høydeangivelser.
<h1><em>Digital Painting & Matte Painting</em>: Definerer bildeoppbyggingen</h1> <p>Modul 2 - Del to: <strong>Et bilde er alltid en helhet</strong>. Imidlertid må man alltid tenke på hvor betrakteren bør se først.</p>
Og her er et kikk på resultatet:
Dere kan nå gjøre elementer som egentlig er blokkelementer om til inline-elementer.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
h1 {
background-color:#00CCFF;
}
</style>
</head>
<body>
<h1>Digital Painting & Matte Painting</h1>
<p>Modul 2 - Teil 2: <em>Et bilde er alltid en helhet</em>. Men man må alltid tenke på hvor betrakteren bør se først.</p>
</body>
</html>Se resultatet i nettleseren.
Bakgrunnsfargen til h1-overskriften signaliserer at elementet strekker seg over hele bredden. Bredden tilpasser seg avhengig av det overordnede body-elementet.
Nå kommer egenskapen display på banen.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
h1 {
display:inline;
background-color:#00CCFF;
}
</style>
</head>
<body>
<h1>Digital Painting & Matte Painting</h1>
<p>Modul 2 - Teil 2: <em>Et bilde er alltid en helhet</em>. Men man må alltid tenke på hvor betrakteren bør se først.</p>
</body>
</html>
Ved bruk av display: inline endres bredden på elementet.
Faktisk tilpasser nå elementets bredde seg til innholdet. Her er en oversikt over hvilke verdier display kan tilordnes:
• none – ingen visning
• block – elementet vises som et blokkelement og oppretter dermed en ny linje.
• inline – elementet vises som et inline-element og vises derfor i løpende tekststrøm.
• inline-block – visuelt oppretter et blokkelement der høyde, bredde og ytre margin kan angis. Hvert element forblir imidlertid i den løpende tekststrømmen. Det er derfor en kombinasjon av et blokk- og et inline-element.
• list-item – elementet vises som et blokkelement. Det er imidlertid tilført et oppramsingsmerke foran.
• run-in – avhengig av innholdet skapes enten et blokk- eller et inline-element.
• table – oppfører seg som det kjente table-elementet i HTML.
• inline-table – oppfører seg som HTML-elementet table, men inline.
• table-row – elementet inneholder side om side ordnede barnelementer. Oppfører seg som HTML-elementet tr.
• table-cell – elementet representerer en tabellcelle og oppfører seg som de to HTML-elementene th og td.
• table-row-group – elementet inneholder en gruppe elementer med flere side om side ordnede barneelementer og oppfører seg som tbody-HTML-elementet.
• table-header-group – elementet inneholder en gruppe elementer med flere side om side ordnede barneelementer og oppfører seg som thead-HTML-elementet.
• table-footer-group – elementet inneholder en gruppe elementer med flere side om side ordnede barneelementer og oppfører seg som tfoot-HTML-elementet.
• table-column – beskriver egenskapene til cellene i en kolonne. table-column oppfører seg som elementet col fra HTML.
• table-column-group – dette elementet inneholder en gruppe elementer som beskriver egenskapene til cellene i en kolonne. Det oppfører seg som HTML-elementet colgroup.
• table-caption – brukes til å definere tabellens overskrift. Egenskapen oppfører seg som HTML-elementet caption.
CSS gir faktisk ulike visningsalternativer for en rekke elementtyper. Disse spiller en avgjørende rolle i forbindelse med posisjonering av elementer. Mer om dette i de neste opplæringene.
