- 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>

Browser default style

Tags.

Azero style

Tags.

Referencer

crossfit

"Team CrossFit Copenhagen takker for støtten fra Azero i vores kamp for at nå til CrossFit Games (VM) i Californien i Juli."

Nikolaj Rønnow

2015-01-19T11:02:53+00:00

Nikolaj Rønnow

crossfit
"Team CrossFit Copenhagen takker for støtten fra Azero i vores kamp for at nå til CrossFit Games (VM) i Californien i Juli."
eyeforimage

Azero has been Eye for Image's ISP from the very beginning. It's reassuring to know that they not only have a great array of products, but that we can always get relevant and timely information from their professional support team, by just picking up the phone and talking to someone.

Matt Coyle, Technical Copywriter / Eye for Image ApS

2015-01-20T03:47:24+00:00

Matt Coyle, Technical Copywriter / Eye for Image ApS

eyeforimage
Azero has been Eye for Image's ISP from the very beginning. It's reassuring to know that they not only have a great array of products, but that we can always get relevant and timely information from their professional support team, by just picking up the phone and talking to someone.

Kontakt Azero

Firmainformationer

Azero ApS
Stægers Alle 9A
2000 Frederiksberg
CVR: 36 96 60 41
VAT: DK28101759
KOB: 1191353

Telefon

Telefon: 38 19 50 17
 

Normal telefontid

Man-tor: 9:30-12:00 og 13:00-15:30
Fredag: 9:30-12:00 og 13:00-14:00