CSS-WORKSHOP
Nätverksträff för it-bibliotekarier, 7 mars 2013
Sara Britta Jadelius
Trollhättans Stadsbibliotek
sarabritta.jadelius@trollhattan.se
0520-49 76 65
HTML – strukturerar innehåll
<h1>Det här är en rubrik</h1>!
<p>Det här är ett stycke<br>!
!med en radbrytning</p>!
<a>Det här är en länk</a>!
• Attribut anger egenskaper. T.ex. <a
href=”index.html” title=”Startsida”>Länk</
a>!
• Rubriker kan anges i sex nivåer h1–h6. De ska användas
i rätt ordning.
Struktur
• Div – samlar element så att man ska kunna ge dem en
gemensam layout
• Span – namnger en del av en eller flera textrader
• Elementen kan märkas upp med följande attribut:
• Class – det kan finnas flera element med samma class
• Id – ett unikt namn
<div id=”ruta1” class=”faktaruta”>!
!…!
</div> !
CSS – för formatering
• CSS = Cascading Style Sheets
• Stilmallar som kan styra utseendet för flera sidor.
• Webbläsaren har en inbyggd stilmall som styr det som
inte finns med i en sidas stilmall.
CSS – syntax
• En selektor anger vilket html-element du vill påverka.
• CSS-deklarationen innehåller en egenskap och ett värde.
• Mellan varje deklaration används semikolon.
/*Det här är en kommentar. Sedan följer
två deklarationer för textstycken.*/!
p {!
color: blue;!
text-align: center;!
}!
• Textsträngar skrivs inom ” ”eller ’ ’.
• Länkar till andra filer skrivs: url(”bild.jpg”)!
Olika sorters selektorer
• Typselektorer – p eller h1!
• Id-selektorer – #ruta1!
• Klasselektorer – .faktaruta eller div.faktaruta!
• Pseudoklasser – a:visited, a:hover etc.
• Attributselektorer – input[type="button”]!
• Selektorerna kan kombineras:
#wrapper .faktaruta p!
• Olika selektorer skiljs åt med komma:
#wrapper .faktaruta p,
#wrapper .faktaruta li!
Olika mått
• % kan referera till olika saker beroende på var det
används, t.ex. i förhållande till textstorlek eller till sidan.
Flexibelt
• 1 em baseras på textstorleken. Flexibelt
• 1 px är 1 pixel. Storleken varierar beroende på skärmen
• För decimaltal används punkt (.)
• Utelämna enhet för värde 0
Färger
• Anges framför allt med namn eller en kod för hexadecimal
RGB
T.ex. blue eller #0000FF!
• Du kan hitta rätt färgkod här:
• Photoshop
• www.htmlfarg.nu
• Traycolor – gratisprogram
• ColorZilla – för Firefox
Hjälpmedel
• Firebug – plugin till Firefox
• Validera ofta
• I Firefox-pluginen Web developer.
• På webben: jigsaw.w3.org/css-validator
• Testa i olika webbläsare. Buggar kan göra att framför allt
äldre versioner av Internet Explorer inte visar sidan
korrekt.
Övning 1
• Gå till www.gp.se
• Använd Firebug för att ta reda på vad den blå färgen som
används i menyerna har för kod.
• Ta reda på vilka fonter som används i deras rubriker.
Textformatering
• font-size – basstorleken i body anges i %, därefter
förslagsvis i em
• font-family – använd familjer med olika alternativ,
avsluta med de allmänna serif eller sans-serif. Namn som
består av flera ord inom ” ”
T.ex. font-family: Helvetica, Arial, sans-serif;!
• font-weight – normal/bold!
• Textfärg – color!
• Radhöjd – line-height!
• Justering – text-align: left/right/center!
Samlingsegenskaper
• En del deklarationer, t.ex. för font och background, kan
anges i en samlad deklaration.
T.ex. font: bold 62.5%/1.6em helvetica,
arial, sans-serif;!
Övning 2
• Ladda ner övningsfilerna här: sarabritta.jadelius.se/
testwebbplats.zip
• Använd denna webbplats som extra referens under
övningarna: www.w3schools.com/cssref
• Gör först en standardformatering för text med selektorn
body (hela webbplatsen)
• Formatera #bannertext och rubrikerna h1 och h2 –
ändra font och textstorlek
• Gör de första orden i textstycket, med
klassen.inledning, fetstilt och med avvikande färg.
Länkar
• Pseudoklasser är extra användbara: Hover, active,
focus, visited!
T.ex. a:hover!
• De kan kombineras
T.ex. a:visited:hover!
• Text-decoration – none/underline (Gäller inte
bara för länkar, men understrykning används med
försiktighet i vanlig text.)
Övning 3
• Ändra färgen på alla länkar
• Ändra så att understrykningen försvinner när man för
pekaren över länkarna.
Boxar
• Varje element bildar en egen ”box”
• Width och height definierar innehållet.
• Padding – inom ram och bakgrundsfärg (kollapsar inte)
• Ram – border. Border-style: solid/dotted/
dashed. Border-width och border-color.
• Marginaler – utanför ram (kollapsar)
T.ex. margin-left: 10em;!
• Måtten räknas samman för att få den verkliga storleken:
200px+5px+5px+5px+5px+5px+5px=230px
• Deklarationerna för alla boxens sidor kan skrivas ihop i
ordningen – top, right, bottom, left eller top/
bottom, right/left!
T.ex. border: #111111 solid 1px 1px 2px 1px;!
eller padding: 2em 1em;!
i stället för border-color: #111111; borderstyle: solid; o.s.v
eller padding-top: 2em; padding-right: 1em
o.s.v.
Övning 4
• Ange bredden 73em för boxen #wrapper!
• Ange marginaler för #wrapper – inga marginaler ovanför
och nedanför och värdet auto på sidorna för att centrera
boxen.
Bakgrund
• Färg – background-color, även transparent!
• Bild – background-image, skrivs url(”bild.jpg”)/
none!
• Placering – background-position: top/bottom,
left/right/center, med mått
• Repetition – background-repat: repeat-x/
repeat-y/no-repeat!
• Eller t.ex.:
background: #333333 url(”bild.jpg”)
repeat-y top center;!
Övning 5
• Byt färg på bakgrunden för body och länka in bildfilen
med bakgrundsskugga.!
• Ta bort alla marginaler runt body – tar bort eventuellt
mellanrum högst upp.!
Display
• Olika element har olika standardvärde
• Inline – visas på samma rad
• Block – visas på egen rad
• None – visas inte alls
Listor
• Ul – unordered list (ol – ordered list)
• Li – listpunkt
• List-style-type: disc/none!
• Menyer görs som listor i html, men stajlas om med CSS.
Övning 6
• Gör om listan med klassen meny till en meny på en rad.
• Ta bort marginaler och punkter/prickar för hela listan (ul).
• Ange att listpunkterna (li) ska visas på en rad.
• Ta bort länkarnas understreckning och ange att de ska
visas som block – då blir ytan som man kan klicka på
större.
Bilder
!T.ex. <img width=”10” height=”15”
src=”bild1.jpg”>!
!
• För genomskinlighet i bilderna använd filformatet .png
• Storleksangivelser i px passar oftast bäst.
Positionering och float
• Position – placerar ett element enligt specifika mått.
Static (default)/absolute/relative/fixed!
• Top/right/bottom/left – ange mått.
• Float – gör så att boxar flyter åt ena eller andra hållet
så snart det finns tillräckligt utrymme. Left/right/none!
• Clear – hindrar float åt ena eller båda hållen. Left/
right/both!
Övning 7
• Ge #wrapper värdet position: relative!
• Positionera #bannertext så att den hamnar bredvid
fotot på Selma Lagerlöf.!
• Lägg de två kolumnerna bredvid varandra med hjälp av
float.!
• Placera sidfoten underst, så att den inte ”flyter med”.!
Övning 8
• Ge #banner en bakgrundsfärg och sätt höjden så att
den är lika stor som bilden. Ändra textfärgen.
• Gör en linje ovanför sidfoten.
• Snygga till sidfotens padding, margins och width.
• Centrera texten i sidfoten.
Övning 9
• Formatera ul, li och a för .meny så att den ser snygg
ut.
• Formatera .bildtext.
Använda stilmallar
• Extern – i separat dokument, länkas i head-tagg
• Interna – skrivs direkt i head-tagg
• Inline – med attributet style inom en html-tagg (inte att
rekommendera)
• Länk till extern stilmall i head-tagg:
<link rel="stylesheet" type="text/
css" href="style.css”>!
!
• Inuti annat CSS-dokument och i exempelvis Arena
@import(”style.css”);!
Hierarki mellan CSS-deklarationer
• Viktighet – !important ger företräde (undvik)
• Specificitet – t.ex. id framför enbart klass, framför enbart
typselektor
• Ordning – mellan länkar till olika dokument och mellan
deklarationer inom dokumentet
Bra resurser
• www.w3schools.com/css (pedagogisk, men ibland
föråldrad)
• webdesignskolan.se/css (på svenska, men föråldrad)
• developer.mozilla.org/en-US/learn/css (mer avancerad
och mer pålitlig än ovanstående)
Extrauppgifter
• Content – t.ex. content:”Ny!”;!
• Testa attributselektorer
• Before, after – t.ex. p.ny:before:
{content:”Ny!”;}!
• Lägg gärna till fler element att laborera med i htmldokumentet.
