CSS-WORKSHOP. Nätverksträff för it-bibliotekarier, 7 mars 2013 Sara Britta Jadelius Trollhättans Stadsbibliotek

Transkript

1 CSS-WORKSHOP Nätverksträff för it-bibliotekarier, 7 mars 2013 Sara Britta Jadelius Trollhättans Stadsbibliotek sarabritta.jadelius@trollhattan.se

2 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.

3 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>!

4 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.

5 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;! }!

6 Textsträngar skrivs inom eller. Länkar till andra filer skrivs: url( bild.jpg )!

7 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 ]!

8 Selektorerna kan kombineras: #wrapper.faktaruta p! Olika selektorer skiljs åt med komma: #wrapper.faktaruta p, #wrapper.faktaruta li!

9 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

10 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 Traycolor gratisprogram ColorZilla för Firefox

11 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.

12 Övning 1 Gå till 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.

13 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!

14 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;!

15 Övning 2 Ladda ner övningsfilerna här: sarabritta.jadelius.se/ testwebbplats.zip Använd denna webbplats som extra referens under övningarna: 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.

16 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.)

17 Övning 3 Ändra färgen på alla länkar Ändra så att understrykningen försvinner när man för pekaren över länkarna.

18 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;!

19 Måtten räknas samman för att få den verkliga storleken: 200px+5px+5px+5px+5px+5px+5px=230px

20 Deklarationerna för alla boxens sidor kan skrivas ihop i ordningen top, right, bottom, left eller top/ bottom, right/left! T.ex. border: # 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.

21 Ö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.

22 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: # url( bild.jpg ) repeat-y top center;!

23 Ö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.!

24 Display Olika element har olika standardvärde Inline visas på samma rad Block visas på egen rad None visas inte alls

25 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.

26 Ö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.

27 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.

28 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!

29

30

31 Ö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.!

32 Ö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.

33 Övning 9 Formatera ul, li och a för.meny så att den ser snygg ut. Formatera.bildtext.

34 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 style.css );!

35 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

36 Bra resurser (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)

37 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.