CSS-WORKSHOP

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.