F07 Stilmallar Dagens agenda

Storlek: px

Starta visningen från sidan:

Download "F07 Stilmallar Dagens agenda"

Henrik Nyström
för 6 år sedan
Visningar:

1 F07 Stilmallar Dagens agenda CSS, Stilmallar Lokala, interna, externa Selektorer - Taggselektorer - Klasselektorer - ID-selektorer Egenskapsarv Pseudo-klasser och element Kombinatorer Specificitet

2 Stilmallar

3 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

Återupprepning av kod <p style="color:#6c9; text-align:center"> Centrerad, blåaktig

4 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

5 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

på sajten <head> <title>sida med stilmallar</title>

css" /> </head> Använd denna metod uteslutande Man kan

6 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 inom <style>. Mer om detta senare.

7 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

8 Selektorer selektor { egenskap: värde; selektor { egenskap: värde; egenskap: värde; egenskap: värde;

9 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>

10 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>

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

12 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:active { egenskap: värde; div

förstabarn och har en förfader i form av div Först från och

Även :first-child stöds i och med IE7 <div> <p>jag är

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

textraden som webbläsaren rendrerar blir fetmarkerad I CSS2 finns även :before och :after som kan användas för

14 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 {

(A+B) li + li { color: red; <ul> <li>ett</li>

Två Tre Barn (A>B) p > strong { egenskap:

<strong>text</strong> </p> CSS3: A~B Välj B

15 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

font-family: verdana, san-serif; color: #6CF; h2 {

16 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;

6em; #content p { color: #4D83A4; font-size: 1.

17 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;

18 Kommentarer /* Layout Using: Two columns floating layout Total width: 250px */ #content { margin-right: 250px; width: 600px; float: left; /* Main Menu */ ol li { float: left;

content { color: green; p { color: red; p { color: blue; 101 11 1 1+senast angiven id-elektorer (vikt

19 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; 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)

Ordningen spelar roll <head> <link rel="stylesheet" href="basic.

</head> <body> <h3 style="font-size: 10px">Rubrik</h3> <p class="intro">lite text</p>

20 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

samtliga element på webbsidan och nollställa dess

Bättre är då att specificera exakt vilka element som ska

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

Relevanta dokument

12/9/2010 REGLER WEBBPRODUKTION WEBBDESIGN CASCADING STYLE SHEETS CSS LOKALA STILMALLAR GLOBALA STILMALLAR. Selektor. Deklaration

12/9/2010 REGLER WEBBPRODUKTION WEBBDESIGN CASCADING STYLE SHEETS CSS LOKALA STILMALLAR GLOBALA STILMALLAR. Selektor. Deklaration REGLER Selektor Deklaration Body { font-family:verdana WEBBPRODUKTION WEBBDESIGN CASCADING STYLE SHEETS CSS Ulrik Söderström Ulrik.soderstrom@tfe.umu.se h1,h2 { font-color:red; font-size:10pt; Egenskap