NemProgrammering.dk logo
NemProgrammering.dk Trustpilot

CSS display og media queries

Lad NemProgrammering.dk´s eksperter lave din hjemmeside for dig
Vi tilbyder professionel hjælp til udvikling af hjemmesider og webshops . Læs mere om vores ydelser her!

Information om denne video

Underviser: Thomas Iversen, A-kasse priser

Denne lektion skal handle om CSS display egenskaben samt media queries. Vi skal prøve at arbejde med forskellige værdier af display, samt se hvordan display:none kan anvendes sammen med to forskellige media queries.

Øvelser:
1 - Undersøg via nettet hvad forskellige elementers default display værdi er. Prøv at lave disse elementer i din HTML samt herefter ændre deres default værdi via din CSS.
2 - Lav en div. Lav en række media queries som ændrer størrelsen og baggrundsfarven på denne div ved over 200px, 500px og 700px. Du bestemmer selv, om du gøre det med min-width, max-width eller måske en kombination.

Video tags:

Denne video relaterer til emner såsom: CSS kursus for begyndere, CSS guides, Lær CSS fra bunden, CSS video-tutorials, introduktion til CSS og display og media queries

Her har du kildekoden

<!-- HTML filen: -->
<!DOCTYPE html>
<html>
    <head>
        <title>Lektion 12</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="css.css">
    </head>
    <body>
    
        <p>
            ikke span, <span class="test_span">span</span> <span class="test_span">span</span>, ikke span  
        </p>
        
        
        
        <p class="test_paragraf">
            paragraf 
        </p>
        
        
        <p class="test_paragraf">
            paragraf 
        </p>
        
        
        <p class="test_paragraf">
            paragraf 
        </p>     
        
    </body>
</html>    
        

Her har du kildekoden

/* CSS filen */
.test_span {
    background-color: red;
    display: block;
}
/* Default in-line */

.test_paragraf {
   background-color: yellow;
   display: inline;
}

/* default block */

@media screen and (max-width: 300px) {
    .test_span {
       display: none;
    }
}

@media screen and (min-width: 500px) {
    .test_paragraf {
       display: block;
    }
}
        

Spørgsmål og kommentarer

Har du et spørgsmål eller en kommentar til denne video/artikel? Så skriv herunder! Alternativt kan du kontakte os på vores forum, hvor en masse hjælpsomme personer sidder klar til at hjælpe.

Url´er bliver automatisk omdannet til links (nofollow).

Vær den første til at skrive en kommentar!

Forum stats

  • 1146 Antal brugere
  • 1611 Antal emner
  • 8069 Antal indlæg

Deltag selv!

Nyt fra vores bloggere

Besøg vores webbureau

WordPress Hjemmeside

Nyheder

  • Lær, hvordan du kommer til tops i Google og får flere kunder med vores nye SEO kursus for begyndere. Læs mere her!
  • Du kan nu lære avanceret WordPress her på siden. Lær at tilpasse dit tema samt udvikle dit eget plugin! Lœs mere...
  • Nu kan du også lære at bruge Photoshop fra bunden! Se med her: Photoshop kursus
  • Du kan ikke drive et velfungerende udviklingsmiljø uden hurtigt bredbånd. Se vores artikel om Billig Bredbånd
  • Vil du blive bedre til Google Sheets? Så kan du med fordel se vores nye Google Sheets kursus!