Stilmallar

Stilmallar (Cascading Style Sheets) eller CSS används för att anpassa utseendestilar. Med CSS påverkar man stil för t.ex. stycke, rubrik, länk osv. Här studerar vi grunderna.

Föreslagen tidsåtgång: minst 20 timmar.

Denna föreläsning är kopplad till lärandemål 9.

Denna studiemodul är individuell och kan studeras när som helst.

Stilmallar UP

En webbläsares uppgift är att tolka HTML-koden och rendera (visa) resultatet. Om ingen ytterligare stilmallsinformation finns, så används webbläsarens inbyggda. CSS-kod ersätter webbläsarens inbyggda "stil". Exempel på stil kan vara typsnitt, textstorlek och färg.

Syftet med CSS UP

Ju snabbare du förstår följande desto enklare får du med förståelsen för CSS.

Syftet med "stilspråket" CSS är att sätta sig över webbläsarens inbyggda stilmall. Man kan inte hamna i ett läge där ingen stil råder.

Detta är viktigt!

  • Webbläsaren har en inbyggd stilmall
  • All skriven CSS-kod ersätter webbläsarens inbyggda stilmall på respektive HTML-element

HTML tillsammans med tekniken Cascading Style Sheet (CSS) kombinerar utformning för webb.

Här och nu ska du lära dig hur CSS ger stil till HTML.

Öppen standard UP

Standardiseringsorganet W3C.org arbetar med många öppna tekniska standarder och CSS är en av dem. Istället för att behandla och uppgradera hela CSS som en singularitet så delar man upp olika Module's och samlingar av uppdaterade moduler publiceras i s.k. Level's. Dessa ständigt uppdaterade och förbättrade moduler och levels dokumenteras som nya Snapshot's med ett eller några års mellanrum. En webbläsare behöver därför kunna implementera alla dessa rekommendationer och det är bl.a. därför vi har uppdateringar för just webbläsare.

Arbetsgruppens definition på olika status

  1. Working Draft (WD)
  2. Last Call Working Draft (LC eller LCWD)
  3. Candidate Recommendation (CR)
  4. Proposed Recommendation (PR)
  5. W3C Recommendation (REC)

Dokumentationen av CSS Snaphot 2017 (senaste) innehåller avslutade moduler sedan 31 januari 2017.

CSS Selektorer UP

Att med CSS-kod sätta sig över webbläsarens befintliga stil sker genom att ange ett (eller flera) HTML-element (typ. p, img, h1, a, table osv). I CSS-koden kallas det utpekade HTML-elementet för Selektor och förses med sin nya Declaration enligt ett Property - Value-format. Flera deklarationer separeras med ett semi-kolon-tecken. CSS-kod som innehåller selektorer och deklarationer kallas Rules.

Bild 1. En selektor med sin deklaration (credit: w3schools.com)

h1 { color: blue; font-size: 12px; }

Kod 1. Selektorn H1 och dess deklaration

Resultat

Varning

Resultat där en H1 är blå med storleken 12px

Tänk lager UP

Nu har vi studerat HTML, CSS i förhållande till information. Med fördel delar man i tanken upp arbetet med en webbsida i tre lager.

  • Informationen - I sin renaste form helt oformaterad. Vad ska den bestå av
  • Strukturen - Uppmärkningsspråket strukturerar information och talar om vad som är rubrik, stycke, länk osv. Detta görs uteslutande med HTML
  • Stilen - Slutliga presentationen av den strukturerade informationen, oftast med avsikt att öka förståelse, läsbarhet osv. Detta görs uteslutande med CSS

Varje HTML-element har sina attribut och många attribut kan appliceras på flera av HTML-elementen. En img kan ha attributet height och samma attribut kan också en tr (tabellrad).

Kom igång praktiskt UP



Introduktion till CSS i VS Code (11.51)
Introduktion till DIV & SPAN i VS Code (16.05)
Introduktion till layout med HTML, CSS och VS Code (14.04)
Introduktion till CSS - Box Model (4.18)
Introduktion till CSS - Färger (12.06)

Bootstrap UP

Bootstrap är ett framework för HTML/CSS/JS och förenklar vardagliga utformningar på användargränssnittet. Utvecklare på Twitter har skapat Bootstrap och resultatet har blivit mycket populärt bland webbdesigners.

Bootstrap är inget mer än ett välskrivna stylesheet-klasser som genomgående kan användas på HTML-filer. Bootstrap beskrivs, och kan laddas ned från getbootstrap.com.

Efter att ha laddat ned filen bootstrap.min.css och länkat in det i det egna projektet så är det klart att användas. Här nedan ett exempel...

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Test</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
</head>
 
<body>
    <!--Innehållscontainer med Bootstrap-->
    <div class="container">

        <h1 class="page-header">Hello, world!</h1>
 
        <!--Typografi med Bootstrap-->
        <p class="lead">Fugiat laboris consequat irure eiusmod consectetur
              laborum ad id aliquip qui eiusmod ullamco sunt in.</p>
        <p>Voluptate reprehenderit quis amet ex sunt veniam excepteur ea
              aliqua duis exercitation. Laboris nostrud sit ipsum commodo
              nulla excepteur eu officia. Id et id sint ex ipsum quis ad dolor
              adipisicing ex. Reprehenderit laborum id tempor laborum.</p>
        <hr>
 
        <!--Text Justeringar med Bootstrap-->
        <p class="text-left">Vänsterjusterad text</p>
        <p class="text-center">Centrerad text</p>
        <p class="text-right">högerjusterad text</p>
        <p class="text-justify">Marginaljusterad text</p>
        <p class="text-nowrap">Enkelrad Enkelrad Enkelrad Enkelrad Enkelrad...</p>
        <hr>
 
        <div class="pull-right">Div justerad till höger</div>
        <div class="pull-left">Div justerad till vänster</div>
        <div class="clearfix"></div>
        <hr>
 
        <!--Listor med Bootstrap-->
        <ul class="list-unstyled list-inline">
            <li>ett</li>
            <li>två</li>
            <li>tre</li>
        </ul>
        <hr>
 
        <!--Bilder med Bootstrap-->
        <img src="images/face320x400.jpg" height=100>
        <img class="thumbnail" src="images/face320x400.jpg" height=100>
        <img class="img-rounded" src="images/face320x400.jpg" height=100>
        <img class="img-circle" src="images/face320x400.jpg" height=100>
        <hr>
 
        <!--Länkar med Bootstrap-->
        <a class="btn btn-default"   href="#">Länk</a>
        <a class="btn btn-primary" href="#">Länk</a>
        <a class="btn btn-success" href="#">Länk</a>
        <a class="btn btn-info"       href="#">Länk</a>
        <a class="btn btn-warning" href="#">Länk</a>
        <a class="btn btn-delete"  href="#">Länk</a>
        <a class="btn btn-link"    href="#">Länk</a>
    </div>
 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
</body>
 
</html>

Kod 2. HTML-element med Bootstrap klasser
Introduktion till Bootstrap (16.55)
Introduktion till Bootstrap typografi (15.07)
Introduktion till effektivt användande av Bootstrap (10.50)

Layout med CSS UP

Sedan 2017 har ett förslag till ny standard behandlats och rekommenderas på W3.org som heter CSS-Grid Layout. Förslaget har CR-status (skrivet sept 2018). Den modulen i CSS ger möjlighet att skapa block med hjälp av DIV-element för att skapa en layout på en webbsida. Studera filmen nedan.

Introduktion till CSS Grid Layout (19min 48sek)

Individuell uppgift UP

  • Om du är ny på detta med HTML rekommenderar jag att du följer med i filmerna och gör samma sak som jag visar.
  • När du anser att du förstår principen för att själv påverka den presenterade Stil för HTML så är du redo för LAB1
Publicerad av:
Johan Sundström
Page updated 2020-09-17 10:37:12
  • Mälardalens högskola |
  • Box 883 |
  • 721 23 Västerås/Eskilstuna |
  • 021-10 13 00, 016-15 36 00 |
  • info@mdh.se |
  • Om webbplatsen