Getsrevel > Tech > Css

Css

HTML bruges til at opbygge den semantiske struktur af et dokument. Dette har ikke nogen direkte kobling til det visuelle udtryk.

Når vi skal styre udseendet på en webside bruges i stedet Cascading Style Sheets (CSS).

CSS introduktion

CSS er opbygget af en række regler, der angiver hvordan et eller flere HTML elementer skal vises.

SELECTOR_ONE, SELECTOR_TWO {
    PROPERTY_ONE : VALUE_ONE;
    PROERTY_TWO : VALUE_TWO;
}

En regel består altså af

En SELECTOR der udvælger de elementer, der er omfattet af reglen.
Hvis der er flere selectors, adskilles listen med kommaer ,
En eller flere PROPERTIES (egenskaber) med en tilhørende værdi
Listen af egenskaber er indkapslet som en blok i et sæt krøllede paranteser { ... }
En egenskab og den tilhørende værdi er adskilt med et Kolon :
Listen af egenskabs-/værdipar er adskilt af semikolon ;

Her er et konkret eksempel, der styrer fontstørrelsen og farven for overskrifter på niveau 2 (h2 elementer):

h2 {
    font-size: 24px;
    color: blue;
}

Samspil med HTML

Der er 3 måder at insætte css i en html struktur.

Definition i ekstern fil
Definition i internt i html strukturen
Inline i html elementerne som værdi i attribut

Der er mange forskellige måder at lave en selector, der udvælger bestemte html elementer. De mest almindelige er

Direkte vha. navn på elementet
Ved brug af en klasse
Ved brug af et ID

Kodeeksempel

De forskellige måder at bruge styles og udvælge elementer er illustreret i dette eksempel.

Formålet med eksemplet er ikke at lave en webside, der er visuelt pæn, men blot at illustrere et udvalg af hvordan styles og selectors kan bruges.

Her er html strukturen i demo.html. Bemærk hvordan det eksterne stylesheet er inkluderet, definition af style internt i dokument, samt brug af inline style.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="external-style.css" >
  <title>CSS på 3 måder</title>
  <style>
    h3 {
      font-style: italic;
    }
  </style>
</head>
<body>
  <header>
    <h2>Ekstern Definition</h2>
    <p>Udseendet af denne sektion er defineret i en ekstern css fil.</p>
    <p>Selector er lavet vha. af elementets navn.</p>
  </header>
  
  <main>
    <h1>Tre måder at bruge CSS i HTML</h1>
    <ul>
      <li>Ekstern CSS Fil.</li>
      <li>Intern CSS i dokument.</li>
      <li>Inline CSS definition i style attribut.</li>
    </ul>

    <h3>Intern definition</h3>
    <p>Som eksempel er der lavet en <strong>intern definition</strong>, der ændrer skriften til kursiv for <code>h3</code> elementer.</p>

    <h2>Selectors</h2>
    <p>Der er flere måde at udvælge elementer vha. selectors. De mest almindelige er:</p>
    <ul>
      <li>Direkte ved hjælp af navn på elementet.</li>
      <li>Ved brug af en klasse.</li>
      <li>Ved brug af et ID.</li>
    </ul>

    <div>
      <h3>Element</h3>
      <p>Man kan bruge html elementer direkte som selector, så vil alle elementer der matches bruge samme stil.</p>
      <p>Dette er lavet som eksempel i dette dokument, med <code>div</code> elementer Der bliver vist som indrammede kasser.</p>
    </div>

    <div class="my-custom-class">
      <h3>Klasse</h3>
      <p>Man kan bruge selectors til at vælge bestemte html elementer vha. deres navn. Dette er lavet som eksempel i dette dokument, med <code>div</code> elementer Der bliver vist som indrammede kasser.</p>
      <p>Man kan bruge html elementer direkte som selector, så vil alle elementer der matches bruge samme stil.</p>
    </div>

    <div id="my-custom-id">
      <h3>Selector med ID</h3>
      <p>Man kan vælge at tildele et ID som en attribut til et element, og bruge det til styling.</p>
      <p>For denne blok er stilen lavet med et ID</p>
      <p><em>Bemærk:</em> at et id skal være unikt indefor et dokument.</p>
    </div>

    <div class="my-custom-class">
      <h3>Klasser fortsat</h3>
      <p>Man kan bruge Samme klasse flere steder i sit dokument.</p>
    </div>
  </main>

  <footer>
    <h2>Demonstration af css</h2>
    <p>Her er et eksempel på en <span style="font-weight: bold; color: orange;">inline style</span></p>
  </footer>
</body>
</html>

Her er css filen strukturen i external-style.css

/* Man kan indsætte kommentarer i CSS på denne måde */

/*
Kommentarer
kan sprede sig
over flere 
linjer
*/

header {
  display: inline-flexbox;
  justify-content: flex-end;
  margin: 1em 1em;
  padding: 1em;
  background-color: yellow;
  border-radius: .5em;
  -webkit-box-shadow: 8px 13px 16px 0px rgba(0, 0, 0, 0.85);
  -moz-box-shadow: 8px 13px 16px 0px rgba(0, 0, 0, 0.85);
  box-shadow: 8px 13px 16px 0px rgba(0, 0, 0, 0.85);
}

body {
  margin: 0;
}

footer {
  background-color: gray;
  padding: .2em 3em;
  margin: 0;
}

h3 {
  color: brown;
  font-style: italic;
}

main {
  margin: 0 2em;
}

div {
  background-color: lightgrey;
  margin-bottom: 1em;
  padding: .1em 1em;
  border: 2px solid gray;
}

.my-custom-class {
  color: rgb(0, 92, 0);
  background-color: rgb(136, 207, 136);
  border-color: green;
}

#my-custom-id {
  background-color: lightpink;
  border-color: darkred;
  margin-left: 2em;
  margin-right: 2em;
  border-radius: .5em;
  border-width: 5px;
}

Css

CSS introduktion

Samspil med HTML

Kodeeksempel

Demo

Materiale

Eksempler

Quiz

Css zen garden