I CSS behandlas element grundläggande som rektangulära lådor eller remsor. För beskrivning av lådorna används följande - redan för er säkert kända - egenskaper:
• width - elementets bredd
• height - elementets höjd
• left - avstånd till vänster
• right - avstånd till höger
• top - avstånd uppåt
• bottom - avstånd nedåt
• margin - yttre marginal
• border - ramen runt elementet
• padding - inre marginal, alltså avståndet från ramen till elementinnehållet
Dessa egenskaper har redan presenterats.
Elementets totalbredd adderas från bredden av respektive värden. (Samma gäller för höjden).
Ett exempel:
div#box {
width: 100px;
padding: 20px; /* 20px till vänster och höger */
border: 2px solid; /* 2px till vänster och höger */
margin: 0 30px; /* 30px till vänster och höger */
}Vilken bredd har detta div-område? Låt oss titta på de individuella värdena:
• 100 pixlar
• 2 gånger 20 pixlar
• 2 gånger 2 pixlar
• 2 gånger 30 pixlar
Det resulterar i en total bredd på 204 pixlar.
Bredden och höjden på elementen bestäms med width och height. Om dessa värden inte finns explicit i stylesheet gäller följande:
• Om width saknas blir boxen lika bred som det omslutande elementet visas.
• Om height saknas blir elementet lika högt som dess innehåll visas.
Ett exempel:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
div#box {
border: 1px solid; /* 2px till vänster och höger */
margin: 0 30px; /* 30px till vänster och höger */
background-color:#6600CC;
}
</style>
</head>
<body>
<div id="box">PSD-Tutorials.de</div>
</body>
</html>
I webbläsaren ser det ut så här:
Det överordnade elementet för div-elementet är body. Därför visas elementet faktiskt lika brett som body-elementet. När det gäller höjden anpassar det sig till innehållet.
Allting på noll
Varje webbläsare har en inbyggd stylesheet. I dessa stylesheets är vissa standardvärden definierade. Det gäller exempelvis också för padding och margin. Tyvärr varierar dessa standardvärden i olika webbläsare. Detta faktum gör det svårt att uppnå identiska resultat i de olika webbläsarna, särskilt med avseende på boxmodellen. Därför rekommenderas att nollställa avstånden som webbläsarna fördefinierat. Det kan göras på följande sätt:
* { padding: 0; margin: 0; }
Lägg till denna rad i början av ditt stylesheet. På så sätt kan du nu börja placera lådorna på önskade platser.
Lådtyper
Hur ett element slutligen visas och hur det påverkar andra element beror på elementets typ. I själva verket skiljer CSS-specifikationen mellan blockelement och inline-element. (Det finns andra typer, men de lämnas åsido här eftersom de spelar en underordnad roll).
Blockelement skapar alltid en ny rad. Efterföljande element börjar också på en ny rad. Typiska blockelement är till exempel p, div, h1, ul osv. För dessa element gäller de tidigare nämnda egenskaperna yttre marginal, inre marginal, höjd, bredd och ram.
<h1>Digital Painting & Matte Painting: Bildaufbau definieren</h1> <p>Modul 2 - Del 2: En bild är alltid en helhet. Dock måste man alltid fundera över var betraktaren först bör titta.</p>
En titt på resultatet i webbläsaren visar att h1 och p skapar varsin egen rad.
Inline-element å andra sidan skapar ingen egen paragraf, de visas istället i den normala textflödet. Typiska inline-element är span, em, strong, img, br osv. För inline-element gäller inga vertikala yttre marginaler och inga angivelser för bredd och höjd.
<h1><em>Digital Painting & Matte Painting</em>: Bildaufbau definieren</h1> <p>Modul 2 - Del två: <strong>En bild är alltid en helhet</strong>. Dock måste man alltid fundera över var betraktaren först bör titta.</p>
Och även här en titt på resultatet:
Ni kan nu göra om element som egentligen är blockelement till inline-element.
<!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 - Del 2: <em>En bild är alltid en helhet</em>. Men man måste alltid tänka på var betraktaren först bör titta.</p>
</body>
</html>Titta på resultatet i webbläsaren.
Bakgrundsfärgen på överskriften h1 signalerar att elementet sträcker sig över hela bredden. Bredden anpassar sig efter det överordnade body-elementet.
Nu kommer egenskapen display in i bilden.
<!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 - Del 2: <em>En bild är alltid en helhet</em>. Men man måste alltid tänka på var betraktaren först bör titta.</p>
</body>
</html>
Genom display: inline ändras elementets bredd.
Faktum är att elementets bredd nu anpassar sig efter innehållet. Här är en översikt över vilka värden som kan tilldelas till display:
• none – ingen visning
• block – elementet visas som ett blockelement och skapar således en ny rad.
• inline – elementet visas som ett inline-element och placeras inom den löpande texten.
• inline-block – skapar visuellt ett block där höjd, bredd och marginal kan anges. Varje element förblir dock i den löpande texten. Det är alltså en kombination av ett block- och ett inline-element.
• list-item – elementet visas som ett blockelement. Ett markerings-ikonen läggs också till framför elementet.
• run-in – skapar beroende på innehållet antingen ett block- eller inline-element.
• table – fungerar som det kända HTML-elementet table.
• inline-table – fungerar som HTML-elementet table, men inline.
• table-row – elementet innehåller kidelement som är placerade bredvid varandra. Fungerar som HTML-elementet tr.
• table-cell – elementet representerar en cell i en tabell och fungerar som både th- och td-elementen i HTML.
• table-row-group – elementet innehåller en grupp av element med flera kidelement placerade bredvid varandra. Fungerar som tbody-HTML-elementet.
• table-header-group – elementet innehåller en grupp av element med flera kidelement placerade bredvid varandra. Fungerar som thead-HTML-elementet.
• table-footer-group – elementet innehåller en grupp av element med flera kidelement placerade bredvid varandra. Fungerar som tfoot-HTML-elementet.
• table-column – här beskrivs egenskaperna för cellerna i en kolumn. table-column fungerar som col-elementet i HTML.
• table-column-group – detta element innehåller en grupp av element som beskriver egenskaperna för cellerna i en kolumn. Fungerar som HTML-elementet colgroup.
• table-caption – här definieras tabellrubriken. Egenskapen fungerar som HTML-elementet caption.
I själva verket erbjuder CSS olika visningsalternativ för olika elementtyper. Dessa spelar en avgörande roll i samband med positionering av elementen. Mer om detta i de kommande handledningarna.
