Lektion 12. CSS på livet løs

Forberedelse

  • Repeter evt. kapitel 6 til og med afsnit 6.4
  • Læs kapitel 6 fra afsnit 6.4 og resten af kapitlet ud

Formål

  • Repetere HTML og CMS
  • Kikke på noget mere CSS

Fælles gennemgang

Fra sidst

  • Hvad karakteriserer fontend kode
  • Hvad er HTML
  • Hvad er CSS
  • Giv et eksempel på, hvordan man skriver HTML
  • Hvad er et “site”, “en hjemmeside” og en “side”
  • Hvordan bygger vi en god struktur op. Forklar ud fra princippet om “separation of concerns”

Lektien til denne gang

Øvelser

12.1 Prøv CSS af 1

Løb følgende sider igennem og leg lidt med koden

Forklar forskellen på padding, border og margin

12.2 Prøv CSS af 2

Vi fortsætter, hvor vi slap. Skim følgende sider og leg lidt med koden inde på w3schools. Du vil møde et tag, <div>, som du først lærer om i lektion 30. Et <div> tag er “bare” en kasse, men brugen af den folder sig ud, når du lærer lidt mere css. Indtil videre bare lav nedenstående:

12.3 Styling af lister

Gennemfør videoen https://www.nemprogrammering.dk/Tutorials/CSS/V2/8-lister.php. Supplement: https://www.w3schools.com/css/css_list.asp

  • Hvordan laver du en liste med et andet “start” ikon, hvis du nu ikke gider se på en prik
  • Kan du lave en ordered liste <ol> med romertal i stedet for almindelige tal
  • VIGTIGT: Find ud af, hvordan man laver en liste vandret. Det er nyttigt i forhold til menuer

12.4 Styling af links

Se videoen her: https://www.nemprogrammering.dk/Tutorials/CSS/V2/7-links.php og supplement: https://www.w3schools.com/css/css_link.asp. Gennemfør videoen

  • Hvilke 4 forskellige stadier har et link, og hvad dækker de enkelte stadier over
  • Hvordan kan du fjerne understregningen
  • Hvis linket skal have et andet udseende, når musen rulles over, hvordan klarer vi det

12.5 Klasser og id i CSS

Kopier koden her over i Visual Studio Code i et nyt HTML dokument. 

<!DOCTYPE html>
<html>
<head>
    <style>
        a.menu {
            text-decoration: none;
            color: black !important;
        }
        
        a.menu:hover {
            text-decoration: underline;
        }
        /* unvisited link */
        
        a:link {
            color: red;
        }
        /* visited link */
        
        a:visited {
            color: green;
        }
        /* mouse over link */
        
        a:hover {
            color: hotpink;
        }
        /* selected link */
        
        a:active {
            color: blue;
        }
        
        body {
            color: brown;
        }
        
        .green {
            color: rgb(63, 230, 63);
        }
    </style>
</head>

<body>
    <p>Menu</p>
    <ul>
        <li><a href="#" class="menu">Forside</a></li>
    </ul>
    <h1>Hej verden</h1>
    <p>Brødtekst 1</p>
    <p>Brødtekst 2</p>
    <p class="green">Brødtekst 3</p>
    <p>Link til <a href="w3schools.com" target="_blank">w3schools</a></p>
    <p>Link til <a href="https://stackoverflow.com/" target="_blank">stackoverflow</a></p>
</body>

</html>

Du skal nu undersøge koden. Siden er ikke køn men:

  • Hvordan får jeg teksten generelt til at være brun
  • Noget af teksten er neongrøn. Hvordan får jeg det til at lykkedes
  • Hvilke 4 stadier af et link er der, og hvordan styler jeg dem
  • Øverst er der et menu med. Hvordan bærer jeg mig ad med at style dem specifikt
  • Der er ikke 4 men kun 2 stadier af linkets udseende. Hvordan har jeg fået det til at virke
    • Hvad synes du om den måde at style links på, er det pænt
  • På de 2 nederste link har jeg sat en attribut på: target=”_blank”. Prøv at google koden og find ud af, hvad den bruges til
    • Hvad er en attribut forresten?
  • Svært spørgsmål. I en af de øverste linjer i CSS’en står der “!important” til sidst. Prøv at google også den og find ud af, hvad den bruges til. Faktisk var det lidt en panikhandling, at jeg satte den ind, men “!important” er netop god til sådanne situationer. Du skal finde ud af hvorfor

12.6 Få inspiration

Undersøg menuen her. https://www.w3schools.com/css/css_navbar.asp