|
CSS
Skrevet af d. 5/12-2017 09:01
|
|||||||||||||||||||||||
|
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 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. SelectorsBeskrivelse 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.
<!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>
| |||||||||||||||||||||||
 (0 stemmer) Denne artikel var til hjælp Denne artikel var ikke til hjælp |
|||||||||||||||||||||||
Kommentarer (0)
