CSS-WORKSHOP Nätverksträff för it-bibliotekarier, 7 mars 2013 Sara Britta Jadelius Trollhättans Stadsbibliotek [email protected] 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.