Svar på frågor om CSS
V.37

Övningar CSS

  1. Vad står förkortningen CSS för?
  2. På vilka sätt kan man infoga css (stylesheets) i sin sida?
  3. Eftersom vi kan infoga css på flera sätt så är det alltså möjligt att ha flera stylesheets för ett och samma html-element(för hela dokumentet för den delen). Låt oss säga att vi har två stylesheets; ett externt och ett inline... vilket kommer att gälla (dvs vilket antas av webbläsaren)?
  4. Skriv en korrekt tagg för att infoga en stylesheet-fil som heter 'style.css'.
  5. Vad är 'selector', 'property' och 'value'? Hur skrivs de i en grundläggande syntax?
  6. Skriv css för följande;
    a) alla p-taggar ska ha typsnitt storlek 12px, familj Arial.
    b) Alla h-taggar (h1 – h6) ska vara understrukna. Använd grouping.
  7. Vad är 'class-selector' resp. 'id-selector' och hur skrivs de på rätt sätt?
    a) Visa med exempel genom att skapa tre olika klasser för div-taggar där varje klass ska ha en specifik bakgrundsfärg.
    b) Gör om samma procedur men använd 'id-selector'.
  8. Vad är kommentarer till för och hur skriver man dem i css och i html?
  9. Vad är det som är så speciellt med 'div'?
  10. Vad menas med att elementen kan betraktas som boxar?
  11. Css 'delas in i olika delar': dimension, classification, positioning, pseudo-class och pseudo-element. Beskriv kortfattat vad de olika delarna/kategorierna innebär/har för slags funktionalitet.
  12. Denna uppgift är något större, men innehåller en hel del. Se figur här. Använd externt stylesheet.
    13. Stäng(x) Uppgift 12

Svar:

  1. CSS står för Cascading Style Sheets.
  2. Genom att skriva "meta" taggar för CSS eller låta ett program t.ex. Dreamweaver göra det åt en.
  3. Det är det senast angivna värdet som kommer att användas.
  4. <link href="styles.css" rel="stylesheet" type="text/css">
  5. "selector {property : value}"
  6. a)

    <style type="text/css">
    p {
    font-family: arial;
    font-size: 12px
    }
    </style>

    hejhej viktor


    b)

    <style type="text/css">
    h1,h2,h3,h4,h5,h6 {text-decoration:underline}
    </style>

    hejhej viktor

    hejhej viktor

    hejhej viktor

    ...

  7. a)
    <html>
    <head>
    <style type="text/css">
    p.a {background-color:red}
    p.b {background-color:#00ff00}
    p.c {background-color:blue}
    </style>
    </head>

    <body>
    <p class="a">hejhejhej röd</p>
    <p class="b">hejhejhej grön</p>
    <p class="c">hejhejhej blå</p>
    </body>

    </html>

    hejhejhej röd

    hejhejhej grön

    hejhejhej blå


    b)
    <html>
    <head>
    <style type="text/css">
    p#a {background-color:red}
    p#b {background-color:#00ff00}
    p#c {background-color:blue}
    </style>
    </head>

    <body>
    <p id="a">hejhejhej röd</p>
    <p id="b">hejhejhej grön</p>
    <p id="c">hejhejhej blå</p>
    </body>

    </html>

    hejhejhej röd

    hejhejhej grön

    hejhejhej blå


  8. Kommentarer är till för att man ska kunna läsa information i koden utan att den syns i browsern. Där kan du t.ex. beskriva din kod.
    Så här skrivs den i
    HTML: <!--Det här är en kommentar-->
    CSS: /*Det här är en kommentar*/
  9. "div" är ett block-nivå element som definerar ett utvalt avsnitt. Vilket betyder att den endast riktar sig till en del av dokumentet och inte hela.
  10. Med boxar menas det att man måste avsluta varje kod genom att skriva > i slutet eller </...> dokumentet delas upp i dessa boxar med minfre boxar i dom stora är <html><head></head><body></body></html>.
  11. Dimension: Bestämmer stolek på det valda elementet. du kan bestämma höjd(height) eller bredd(width).
    Classification: Låter dig bestäma elementets synlighet.
    Positioning: Med detta kan du bestäma elementets posesion.
    Pseudo-class: Du kan lägga till special efekter till texter och länkar
    Pseudo-element: Du kan lägga till special efekter till en del av en text eller länk.
  12. Se resultatet HÄR.