Transkript

1 Jag önskar göra det lä0are för användarna genom a0 markera vissa delar med en annan färg? HTML är bra, men det är inte så snyggt? TDDD52 - CSS CSS regler och selectors gör a0 jag kan styla min HTML precis som jag vill Jag skulle vilja a0 alla länkar blev oranga istället för blå? TDDD52 CSS Föreläsning 1 IntrodukMon Mll TDDD52 Internet, klient, server, IP- adress HTML grunder Validering Specialtecken SökmotorsopMmering HTML4, XHTML, HTML5 Föreläsning 2 Färger Enheter Boxmodell CSS Syntax för CSS SeparaMon av innehåll och presentamon Validering av CSS CSS3 På webben används s k additamv färgblandning Man blandar färgerna Röd, Grön och Blå (RGB) Hexadecimala A B C D E F # eller #000 = Svart #FFFFFF eller #FFF = Vit #FF0000 eller #F00 = Röd Färger Man kommer givetvis inte ihåg alla dessa färger, utan använder en lista eller program för a0 få fram den färg man vill ha. Kolla länkar för laboramon 2 för exempel på webbaserade verktyg för a0 hi0a färger. Färger 1

2 Boxmodell Boxmodell padding height Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitamon ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. height Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitamon ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. width width border Boxmodell border Boxmodell padding padding height Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitamon ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. height Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitamon ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. width width margin Den fakmska bredden är = width + padding + border + margin 2

3 HTML - Uppdatering HTML - Uppdatering class id Markera a0 elementet på något sä0 är vikmgt eller av en viss typ. HTML dokumentet får innehålla flera element med samma class värde. <div class= ingress >Detta är text</div> <a class= external href=... >External</a> Markera e0 unikt element i HTML koden. HTML dokumentet får bara innhålla e0 element med e0 visst id värde. <button id= send >Send</button> <a id= googlelink href=... >Google</a> <span> När jag vill markera något i en flytande text t ex a0 <span class= red >de6a ska vara rö6</span> men a0 texten annars ska flyta på... Används för a0 gruppera inline element i e0 dokument. Denna grupp kan man sedan ändra med CSS eller Javascript (senare föreläsning). <button class= image-button ></button> <div id= leftcontent >...</div> När jag vill markera något i en flytande text t ex a0 de0a ska vara rö0 men a0 texten annars ska flyta på... Element kan ha både class och id definierade HTML - Uppdatering CSS <div> Används för a0 gruppera block element i e0 dokument. Cascading Style Sheet E0 oerhört vikmgt och kranfullt verktyg för a0 få webbplatser användbara När jag vill gruppera block element <div class= green- border > <ul> <li>item 1</li1> <li>item 2</li1> <li>item 3</li1> <li>item 4</li1> </ul> </div> Man kan tänka a0 block element är radbrytande element. Item 1 Item 2 Item 3 Item 4 Hur innehåll skall presenteras Cascade tolkar vi som ärver och skriver över Regler som appliceras sist gäller de som är före Kan förändra färger, storlekar, placeringar etc Tolkas utav webbläsare, vilket kan leda Mll lite olika resultat beroende på val av läsare 3

4 CSS - Selector CSS - ProperMes En selector är e0 syntax som avgör vilka element som skall påverkas av vilka regler. Selector h1.ingress #sendbu0on div.ingress div h1 div.ingress h1 Förklaring En visst typ av element, t ex alla h1 element Alla element med a0ributet class sa0 Mll något värde, t ex class= ingress Elementet med e0 visst id, t ex id= sendbu0on Alla div element med class= ingress Nestlade selectorer, t ex alla h1 som ligger innum div Alla kombinamoner fungerar, de0a innebär a0 man väljer alla h1 taggar som ligger innum div taggar som har class= ingress En property avgör vilka egenskaper som skall ändras och value avgör vad den skall ändras Mll. Property color width border border- style Value RGB färgkod, sä0er texten i det valda elementet Mll denna färg. Sä0er bredden av e0 element, använder enheter som px, % etc value kan vara 5px solid red som ger en 5px tjock solid kant med röd färg Sä0er kanten Mll en annan typ, t ex do0ed, dashed, double, groove, ridge, solid etc Det finns en uppsjö olika property- value man kan använda. CSS - Exempel CSS Hover selector CSS a { color: #F00; div h1 { font- size: 12px; border: 1px solid #CCC; div.ingress { font- weight: bold; img { cursor: pointer; UCall Alla länkar blir nu röda istället för standard blå Alla h1 taggar som ligger nestlade under div taggar får en mindre font storlek och en grå kant Alla div taggar som har class=ingress får fet sml Alla bilder gör nu om muspekaren Mll en hand istället för vanlig pekare när man håller musen över bilden. a:hover { background-color: yellow; En unik selector som först applicerar sina regler när musen förs över elementet Kolla denna länk när ni använder :hover i era webbplatser, det finns några saker man måste tänka på h0p://w3schools.com/cssref/sel_hover.asp om man använder den i kombinamon med a elementet. 4

5 1/3/13 CSS Float & Clear Antag a0 vi har fyra div taggar ener varandra. När webbläsaren ser nästa div tagg kommer den a0 göra en radbrytning och sedan rendera hela div taggen. CSS Float & Clear Om vi på den blå div taggen sä0er float: le); så placeras den så långt Mll vänster som möjligt. Enerkommande element hamnar sedan direkt ener. Den röda div taggen har inte float, så den gröna hamnar på nästa rad. 5

6 CSS Float & Clear CSS Float & Clear DIV DIV DIV DIV Om vi även på den röda sä0er float: le); så kommer den gröna direkt ener. Kan även använda float: right; och clear: right; DIV DIV DIV DIV Om vi vill undvika a0 det nästkommande elementet hamnar direkt ener den röda, så sä0er vi clear: le); på det gröna elementet. A0 kunna sä0a float på element möjliggör a0 man kan skapa andra layouter. Med float kan vi placera element på andra sä0 än med ren HTML h0p://jigsaw.w3.org/css- validator/ Validering CSS Demo TDDD52 Som med HTML, är korrekt CSS nödvändig för a0 webbläsaren skall slippa gissa vad som menas med koden. Om man skriver stora stylehsheets är det smart a0 validera ona. En mänsklig validering som kollar a0 webbplatsen ser ut som det är tänkt på alla större webbläsare är foryarande nödvändig. CongratulaMons! No Error Found. 6

7 1/3/13 SeparaMon av innehåll och presentamon Enklare a0 skapa, underhålla och återanvända När man bygger dynamiska webbsidor är de0a oumbärligt Går a0 skapa olika design beroende på webbläsare HTML CSS CSS CSS Man kan skapa helt olika utseenden vid behov för samma HTML innehåll. Ti0a på: h0p://www.csszengarden.com/ 7

8 1/3/13 8

9 1/3/13 9

10 Länkat CSS i HTML dokument... <head> <link rel= stylesheet type= text/css href= style.css /> </head>... TDDD52 godkänd metod Inline <body> CSS i HTML dokument <div style= font-weight: bold; > This text will be bold </div> </body> Header style... <head> <style type= text/css > a { color: #F00; div.ingress { font-weight: bold; </style> </head>... De0a är ibland OK i andra sammanhang, men inte denna kurs. De0a är aldrig ok, inte i denna kurs och inte någon annan stans heller. Om ni får för er a0 göra såhär, tänk på hur det hade påverkat Zen Garden om de gjorde så. CSS3 LaboraMon 1 Steg 2 En ny standard för CSS Innehåller specifikamoner för rundade kanter, gradients, skuggor, roteringar etc. Endast nya webbläsare kan hantera dessa. Äldre webbläsare hanterar inte CSS3 I denna kurs använder vi inte CSS3, utan endast funkmoner från CSS2 CSS SeperaMon av innehåll och presentamon Krav på selectorer och regler som skall användas Krav på ändring av befintlig layout Vidareutveckla eran företagshemsida, ge den e0 bra och passande utseende och en ny layout genom a0 endast använda CSS 10