CSS Cascading Style Sheets
Et stylesheet (CSS) bruges til at definere temaet, altså det overordnede udseende af
din hjemmeside. Hvis du sørger for altid at at have al opsætning af udseende i et
eksternt stylesheet, som du inkluderer på dine HTML sider via
<link rel="stylesheet" type="text/css"
href="/standard.css"/>
vil du opleve at det bliver meget lettere at rette dit design.
I højre side kan du se et standard XHTML dokument, der bruger alle de mest populære HTML tags, og længere nede på siden kan du se hvordan det ser ud, uden et stylesheet og med Azeros standard stylesheet.
Selectors
Beskrivelse af forskellige metoder til at style de forskellige tags kan ses på vores selectors support.
En beskrivelse af alle de metoder man kan bruge til at style sine HTML tags, kan ses på w3 CSS2 oversigten.
| Link | Beskrivelse |
|---|---|
| CSS1 manual | CSS1 manualen. |
| CSS1 oversigt | CSS1 oversigt. |
| CSS2 manual | CSS2 manualen. |
| CSS2 oversigt | CSS2 oversigt. |
| CSS3 manual | CSS3 manualen, bemærk at denne endnu ikke er implementeret i nogen browsere. |
| W3Schools | W3Schools er et godt sted for alle der laver hjemmesider. |
| XSL manual | XSL betyder Extensible Stylesheet Language |
| Gode råd | Gode råd om CSS fra Jakob Nielsen (useit.com) |
| Filtre | Avancerede farve- og effektfiltre. |
| Cascade | Komplekse regler for hvilke for hvornår en style bliver valgt. |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Test af styles</title>
<link rel="stylesheet" type="text/css"
href="/inc/client/styles/standard.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<style type="text/css">
body {
font-size: 100%;
}
label { display:block; }
</style>
</head>
<body>
<h1>Dette er skrevet med h1.</h1>
<h2>Dette er skrevet med h2.</h2>
<h3>Dette er skrevet med h3.</h3>
<h4>Dette er skrevet med h4.</h4>
<p>Dette er skrevet med p.</p>
<h5>Dette er skrevet med h5.</h5>
<h6>Dette er skrevet med h6.</h6>
<ul>
<li>Unordered list item</li>
<li style="list-style:circle">Unordered list item</li>
</ul>
<ol>
<li>Ordered list item
<ol>
<li>Ordered list item</li>
</ol>
</li>
</ol>
<dl>
<dt>Definition term</dt>
<dd>Definition description</dd>
<dt>Webhotel</dt>
<dd>Firma der udbyder domæner og webhoteller.</dd>
</dl>
<table
summary="Denne tabel definerer elever i klassen.
De følgende kolonner indeholder disse data:
Studerendes navn, adresse">
<caption>Adresseliste</caption>
<colgroup>
<col class="big"/>
<col class="small"/>
</colgroup>
<thead>
<tr>
<th>Navn</th>
<th>Telefon</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2">Husk at ringe til den næste i listen</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Kasper</td>
<td>12346578</td>
</tr>
<tr>
<td>Peter</td>
<td>11223344</td>
</tr>
</tbody>
</table>
<form method="post" action=".">
<p>
<input type="hidden" name="ref" value=""/>
<label accesskey="d">
Navn
<input name="name" type="text" value="" size="40"></input>
</label>
<label accesskey="k">
Kodeord
<input name="hidden" type="text" value="" size="20"></input>
</label>
<label accesskey="e" for="email">E-mail</label>
<input id="email" name="email" type="text" size="40"></input>
<label accesskey="n" for="newsletter">Nyhedsbrev</label>
<input id="newsletter" name="newsletter" type="checkbox"></input>
</p>
<fieldset>
<legend>Arbejdstider</legend>
<label><input type="checkbox" name="arbejdstider" value="deltid"/> Deltid</label>
<label><input type="checkbox" name="arbejdstider" value="fuldtid"/> Fuldtid (Dage)</label>
<label><input type="checkbox" name="arbejdstider" value="svingende"/> Fuldtid (Svingende)</label>
<label><input type="checkbox" name="arbejdstider" value="graveyard"/> Fuldtid (Graveyard)</label>
<label><input type="checkbox" name="arbejdstider" value="Weekends Only"/> Kun weekender</label>
</fieldset>
<fieldset>
<label><input type="radio" name="emne" value="deltid"/>Information</label>
<label><input type="radio" name="emne" value="fuldtid"/>Besked</label>
<label><input type="radio" name="emne" value="andet"/>Andet</label>
<input size="8" type="text" name="emne_andet" value=""/>
</fieldset>
<p>
<label accesskey="d" style="overflow: auto;overflow-x: auto;overflow-y: visible; width: 160px;">
Forklaring
<textarea name="description" rows="4" cols="6"></textarea>
</label>
<select name="boeger">
<optgroup label="Andersen">
<option>Bog</option>
<option>En anden bog</option>
</optgroup>
<optgroup label="Kirkegaard">
<option>Bog</option>
<option value="anden-bog">En anden bog</option>
</optgroup>
</select>
<select name="book" multiple="multiple">
<optgroup label="Andersen">
<option>Bog</option>
<option>En anden bog</option>
</optgroup>
<optgroup label="Kirkegaard">
<option>Bog</option>
<option value="anden-bog">En anden bog</option>
</optgroup>
</select>
<label accesskey="s">
<input type="submit" value="Send"/>
</label>
</p>
</form>
<form method="get" action=".">
<p>Her er et input felt der er en
<input type="text" name="jobstart" value="del"/>
af en tekst.</p>
</form>
<pre>Previously formatted</pre>
<hr/>
<p>
<a href="." accesskey="l">Link</a>
</p>
<h4>Standardiserede fonte (cross browser/OS)</h4>
<div style="font-family: serif">Den lille røde ræv (serif)</div>
<div style="font-family: sans-serif">Den lille røde ræv (sans-serif)</div>
<div style="font-family: cursive">Den lille røde ræv (cursive)</div>
<div style="font-family: fantasy">Den lille røde ræv (fantasy)</div>
<div style="font-family: monospace">Den lille røde ræv (monospace)</div>
<h4>Windows fonte</h4>
<div style="font-family: Tahoma">Den lille røde ræv (Tahoma)</div>
<div style="font-family: Arial">Den lille røde ræv (Arial)</div>
<div style="font-family: Verdana">Den lille røde ræv (Verdana)</div>
<div style="font-family: Microsoft Sans Serif">Den lille røde ræv (Microsoft Sans Serif)</div>
<div style="font-family: Lucida Sans Unicode">Den lille røde ræv (Lucida Sans Unicode)</div>
<div style="font-family: Georgia">Den lille røde ræv (Georgia)</div>
</body>
</html>
