F07 Stilmallar Dagens agenda CSS, Stilmallar Lokala, interna, externa Selektorer - Taggselektorer - Klasselektorer - ID-selektorer Egenskapsarv Pseudo-klasser och element Kombinatorer Specificitet
Stilmallar
Stilmallar på vår sida Webbläsarens inbyggda stilmall Användarspecifika ändringar Våra, utvecklarens, stilmallar: o Lokala stilar (inline styles) o Interna stilmallar (internal styles) o Externa stilmallar (external styles) Dessa kan vi påverka
Lokala stilar Fördelar: Enkelt och smidigt Nackdelar: Mycket svårt att underhålla Blandar upp innehåll och presentation Alla stilmallar finns inte på samma ställe Återupprepning av kod <p style="color:#6c9; text-align:center"> Centrerad, blåaktig text </p> Undvik för allt annat än testsyfte, och vissa specialfall Centrerad, blåaktig text
Interna stilmallar <head> <style type="text/css"> p { color: red; </style> </head> "text/css" default. Behöver inte anges Använd enbart för sidspecifika avvikelser, om än då
Externa stilmallar Fördelar: Lätt att ändra stilmall för flera sidor samtidigt Du får ett enhetligt utseende på sajten <head> <title>sida med stilmallar</title> <link rel="stylesheet" type="text/css" href="basic.css" /> </head> Använd denna metod uteslutande Man kan även använda direktivet @import inom <style>. Mer om detta senare.
Syntax selektor { egenskap: värde; selektor { egenskap: värde; egenskap: värde; egenskap: värde; Exempel: h1 { color: #CDF; background-color: #9FF; Testrubrik Skrivs antingen mellan <style></style> eller i en inlänkad css-fil
Selektorer selektor { egenskap: värde; selektor { egenskap: värde; egenskap: värde; egenskap: värde;
Taggselektor h1 { egenskap: värde; h1 em { egenskap: värde; p em strong { egenskap: värde; <p> Detta är ett <em><strong>exempel</strong></em>. Ytterligare <strong>text</strong> </p>
Klasselektor..avatar { egenskap: värde; <p class="avatar"></p> <p class="avatar"></p> <div class="avatar"></div> <p class="avatar"></p> p.avatar { egenskap: värde; <p class="avatar"></p> <p class="avatar"></p> <div class="avatar"></div> <p class="avatar"></p>
ID-selektor # <div id="content"> #content { egenskap: värde; </div> <div id="footer"></div> På en och samma sida får det aldrig förekomma att två id-attribut har samma värde!
Egenskapsarv (property inheritance) Vissa egenskaper, satta på en förälder ärvs ned till dess barnnoder. p { color: red; <p> Detta är ett <em><strong>exempel</strong></em> på <em>egenskapsarv</em>. </p> Detta är ett exempel på egenskapsarv. Alla egenskaper ärvs dock inte ned.
Pseudoklasser orörd a:link { egenskap: värde; a:visited { egenskap: värde; a:focus { egenskap: värde; a:hover { egenskap: värde; a:active { egenskap: värde; div p:first-child { egenskap: värde; Alla p-taggar som är förstabarn och har en förfader i form av div Först från och med IE7 stöds :hover på andra element än a. Även :first-child stöds i och med IE7 <div> <p>jag är första barn.</p> <ul> <li><p>jag också!</p></li> </ul> <p>inte jag :(</p> </div> <p>inte jag heller :(</p>
Pseudoelement p:first-letter { font-size: 2em; <p>första bokstaven är större</p> Första bokstaven är större p:first-line { font-weight: bold; <p>första textraden som webbläsaren rendrerar blir fetmarkerad</p> Första textraden som webbläsaren rendrerar blir fetmarkerad I CSS2 finns även :before och :after som kan användas för att dynamiskt lägga in innehåll före eller efter ett element. Första textraden som webbläsaren rendrerar blir fetmarkerad
Kombinatorer Ättling (A B) p em strong { egenskap: värde; "Direkt syskon-väljare" (A+B) li + li { color: red; <ul> <li>ett</li> <li>två</li> <li>tre</li> </ul> <p> Detta är ett <em><strong>exempel</strong></em>. Ytterligare <strong>text</strong> </p> Ett Två Tre Barn (A>B) p > strong { egenskap: värde; <p> Detta är ett <em><strong>exempel</strong></em>. Ytterligare <strong>text</strong> </p> CSS3: A~B Välj B om A föregår B och A och B delar samma förälder
Gruppering av selektorer Önskas liknande egenskaper på flera element så grupperar man dessa: h1,h2,h3 { font-family: verdana, san-serif; color: #6CF; h2 { text-decoration: underline; Rubriknivå 1 Rubriknivå 2 Rubriknivå 3 p.red strong.hidden, #content p:first-line { font-family: verdana, san-serif; color: #6CF;
Läsbar CSS Personliga stilar för att skriva CSS: #content p { font-size: 1.1em; color: #4D83A4; margin-left: 10px; #content { float: left; font-size: 1.6em; #content p { color: #4D83A4; font-size: 1.1em; #content p:first-letter { font-size: 1.7em; #content { font-size : 1.6em; float : left; margin-right: left;
Kommentarer /* Layout Using: Two columns floating layout Total width: 250px */ #content { margin-right: 250px; width: 600px; float: left; /* Main Menu */ ol li { float: left;
Specificity Olika selektorer har olika "vikt". Ju högre vikt, desto högre prioritet. p#firstptagg { color: yellow; p.content { color: green; p { color: red; p { color: blue; 101 11 1 1+senast angiven id-elektorer (vikt 100) har högst prioritet följt av klasselektorer (vikt 10) och lägst prioritet har övriga selektorer (vikt 1) http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
Ordningen spelar roll <head> <link rel="stylesheet" href="basic.css" /> <style> h3 { text-align: right; font-size: 20px; p { color: blue; </style> </head> <body> <h3 style="font-size: 10px">Rubrik</h3> <p class="intro">lite text</p> </body> h3 { color: red; text-align: left; font-size: 8px; basic.css Rubrik Lite text... Lite text... Effektiv stilmall: Rubrik h3 { color: red; text-align: right; font-size: 10px; 10px p.intro { color: silver; p.intro { color: silver; Vad händer om man byter plats på <style> och <link>?
Reset CSS * {margin:0; padding:0 Att använda * är inget man rekommenderar då det tar hårt på webbläsaren att gå igenom samtliga element på webbsidan och nollställa dess marginaler och padding. Bättre är då att specificera exakt vilka element som ska nollställas. Enklast är att använda något av alla de nollställningsstilmallar som finns att hitta på nätet.