Nedarvning Du styler som bekendt dit indhold med mange forskellige selektorer. De mest almindelige er class, id, tag men du kan også gruppere selektorer f.eks h1, h2, h3, p, a, img {font-family: Verdana, Geneva, sans-serif; At style tags inden i andre tags Her skal du bruge et system der hedder nedarvning, og med dette system kan du formatere et tag på baggrund af dets forhold til andre tag. Nedarvning er baseret på The Family Tree, som du her ser et diagram over. HTML-taget er det tag alle andre tag nedstammer fra, og kaldes derfor ancestor(stamfader). Head-taget og body-taget kaldes descendent(efterkommer), af det foranstående tag. Ancestor ( stamfader ) Et html-tag som omkrandser et andet tag er hermed stamfader Descendent ( efterkommer, nedstamme ) Et tag inden i et eller flere tag er efterkommer at disse tag, hermed er <title> efterkommer af <head> samt<html> Parent ( forældre ) Et forældre-tag er det nærmeste og tætteste tag fra et andet tag. Et forældre-tag er det første tag direkte forbundet med og over et andet tag. I eksemplet er head-taget <head> parent til <title> Child (barn ) Et tag som er direkte omkrandset af et andet tag. I diagrammet er <p> child af <body> men <strong> er ikke Sibling ( søskende ) Tags som er children af det samme tag, er siblings, ligesom søskende og brødre I diagrammet står siblings tag ved siden af hinanden, og forbundet til den samme forældre, Side 1
her <li> Du skaber en descendent selector ved at starte med den ældste ancester. Også forklaret med at du starter med den yderste selektor og bevæger dig indad eller nedad, startende med den ældste selektor længst til venstre og herefter bevæger du dig mod det tag som er målet længst til højre Eksempel: #left ul li a {; Reglen siger: formater alle links(a), som befinder sig inde i list item(li), som igen befinder sig i en unordered list(ul) som befinder sig i en div der hedder left. Browseren læser fra højre mod venstre. Følgende er alle lovlige selektorer for <a>-taget inde i listen: ul li a body li a html li a html body ul li a Side 2
Tilstødende selektorer (adjacent sibling) I dette eksempel skal du formatere et <p>-tag når det står efter et <img>-tag, og kun i denne situation. Dette angiver du med et (+) for at kombinere disse to tag. Din selektor bliver herefter: img + p{. Det er uden betydning om du kommmer luft i mellem, så img+p{ virker også. Så denne regel gælder når <p>-taget umiddelbart følger et <img>-tag <h1> <p> <img> <p> <p> <img> <p> Side 3
Til eksemplet skal du indskrive følgende CSS-regler: <style> body{ font-family: Verdana, Geneva, sans-serif; font-size: 11px; #content{ margin-top: 100px; margin-left: 50px; width: 280px; paddding: 0px; h1{ background: #999; font-size: 24px; height: 40px; line-height: 40px; text-align:center; margin-bottom: 20px; #indhold{ border: 2px dotted #999999; padding-bottom: 10px; #indhold p{ font-size: 11px; padding: 0 10px 0 10px; img{ margin: 0px 10px; img+p { background: #333; height:40px; font-size: 11px; line-height:20px; color: #ffffff; margin: 0 10px; padding-left: 10px; </style> Side 4
HTML-opsætningen til eksemplet: <body> <div id="content"> <h1>camera obscura</h1> <div id="indhold"> <p>det camera obscura, der bruges som fotografiapparat, er en firkantet kasse, ofte til at trække ud som en harmonika.</p> <img src="ill03_ny.jpg" /> <p>kassetten føres ind i et rum med rødt lys. </p> <p>dette indeholder nemlig næsten ingen kemisk virkende lysstråler og er derfor uskadeligt.</p> <img src="ill04_ny.jpg" /> <p>billedet på pladen er negativt</p> </div> </div> </body> </html> Udvid nu din css med følgende: img+p+p{ background: #f00; font-size: 11px; line-height:20px; color: #ffffff; margin: 10px 10px; padding-left: 10px; Side 5
Så får du følgende resultat: img+p+p{ Side 6
Child og direkte child selector: Ikke bare en child, men en direkte child angives med selektoren større end vinkel (>) Med en direkte child #left>a udvælges kun børn i første led mens en nedarvet selector #left a vil ramme alle <a>elementer der er efterkommere af #left Hermed kan du angive hvilken child fra hvilken forældre du vil formatere. Et <h2>-tag som er child af body angives med: body h2 og formaterer alle h2 som er child af body. Body h2 {reglen, vælger alle h2 på siden, hvorimod du også kan specificere nøjagtig hvilken h2 du vil formatere. På nedenstående eksempel har samtlige tekster et <h2>-tag Du skal her også formatere h2 som er direkte child af div, altså div>h2 Indsæt følgende CSS-regler: <style> body h2 {background-color: #0f0; body>h2{background-color: #f00; div>h2{background-color:yellow; </style> Indsæt følgende HTML på samme side til ovenstående eksempel: <body> <h2>cristiansø</h2> <div> <h2>bornholm</h2> <h2>sandvig</h2> </div> <div> <strong><h2>hullehavn</h2></strong> <!--da strong-taget kommer imellem bliver farven grøn --> <h2>allinge</h2> </div> </body> Side 7
Pseudo-class :first-child selektoren Pseudoklassen :first-child udvælger et element hvis det er første barn af et overordnet element, anvendelig til første afsnit i en spalte, første listeelement <li> i en listeopstilling, første menupunkt i en menu Her har jeg indrykning på alle afsnit. Du skal selv kode dette eksempel, se derfor også min kode nedenstående Indsæt følgende CSS: <style> body{ font-family: Verdana, Geneva, sans-serif; #content{ margin-top: 100px; margin-left: 50px; width: 300px; paddding: 0px; Side 8
#indhold{ border: 2px dotted #999999; #indhold p{ text-indent: 11px; /* indrykning */ font-size: 11px; line-height: 12px; margin: 10px 10px 11px 10px; h1{ background: #999; font-size: 24px; height: 40px; line-height: 40px; text-align:center; margin-bottom: 20px; </style> Html-koden ser sådan ud: <body> <div id="content"> <h1>fotografering</h1> <div id="indhold"> <p>fra gammel tid var det kendt, at visse stoffer, som sølvsalte og asfalt, forandrede sig ved lysets påvirkning, og adskillige havde eksperimenteret dermed; men en brugervenlig teknik udvikledes først af to franskmænd, Nièpce og Daguerre. Den første døde, før forsøgene var tilendebragt; men det lykkedes Daguerre at færdiggøre dem, og han offentliggjorde sine resultater i 1839. </p> <p>han lod billedet i camera obscura falde på en forsølvet kobberplade, der havde været udsat for joddamp. Lyset forandrede jodsølvet, og når pladen derpå udsattes for kviksølvdampe, fortættede disse sig mest dèr, hvor lyset havde virket stærkest, og dèr satte kviksølvdråberne sig tættest. Det uangrebne jodsølv bortvaskedes med svovlundersyret natron, så lyset ikke mere kunne forandre pladen. Man opnåede smukke billeder. De sås bedst, når en mørk flade spejlede sig i dem. Spejlede en lys flade sig i pladen, forandredes lys til skygge, og billedet blev negativt.</p> <p>metoden forbedredes, idet man ved at bruge brom og klor betydelig afkortede tiden for lysets indvirkning. En stor mangel var, at disse billeder ikke kunne kopieres. Igennem Talbots arbejder, der væsentligt gik ud på at kopiere tegninger og naturgenstande, nåede man til det næste skridt i kameraets historie:</p> </div></div></body> Side 9
I dette eksempel skal du ikke have indrykning på første afsnit, derfor indsættes følgende CSS på ovenstående eksempel: #indhold p:first-child { text-indent: 0px; Vi kan altså bruge pseudo-class`es til at ramme bestemte elementer i vores kode Du skal nu kode en navigationsmenu på liste. Den første listefunktion(list-item) tilføjer du en rød farve <!DOCTYPE html> <html> <head> <title>css Selektorer</title> Side 10
<meta charset="utf-8" /> <style> li:first-child { color: red </style> </head> <body> <ul> <li>punkt 1</li> <li>punkt 2</li> <li>punkt 3</li> <li>punkt 4</li> <li>punkt 5</li> </ul> </body> </html> Her ser du resultatet: Du styler nu det sidste liste-element Korriger din css til li:last-child{color: #00f; Side 11
Oversigt over pseudo classes: Selector: Eksempel: Beskrivelse: :root Svarer til: html{ Vælger dokumentets rod, som altid er <html>-elementet :nth-child() li:nth-child(2n) Hermed bliver hver anden liste element stylet :nth-child() li:nth-child(4) Hermed bliver det fjerde liste element stylet :nth-child() li:nth-child(2n+1) Du starter med den første, herefter bliver hver anden element stylet :nth-last-child() li:nth-last-child(3) Samme som :nth-child() men tæller bagfra eller baglæns :nth-of-type() article p:nth-of-type(1) Her styles første p-tag i taget article, som er et html5-tag :nth-last-of-type() article p:nth-last-oftype(1) Her styles sidste p-tag i article, tæller baglæns fra bunden :first-child p:first-child Vælger det element som er det første af andre elementer :last-child li:last-child Det sidste element i en liste :first-of-type article p:first-of-type Første p-tag i article :last-of-type article p:last-of-type Sidste p-tag i article :only-child li:only-child Vælger liste elementet som er det eneste element i en liste :only-of-type p:only-of-type f.eks ved kun et resultat af udtræk fra database :emty #results:empty Kan skabe brugers opmærksomhed ved tomt søgeresultat i et felt med navnet results Ikke alle elementer understøttes af alle browsere, specielt IE8 og tidligere. Praktisk eksempel: li:last-child{border-bottom: none; fjerner border på sidste liste element, hvilket ofte er nødvendigt Nedenstående har du link til en fantastisk pseudo-class oversigt: se nu dette site igennem http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/ korriger yderligere din css fra tidligere: du vil nu kunne vælge hver anden liste - element li:nth-child(2n){ color: #0f0; Side 12
Oversigt over position samt nummer - baseret pseudo-class: Nu skal du selv eksperimentere med forskellige løsninger. Lav selv 4 5 pseudo class regler, det behøver ikke nødvendigvis at være bygget på lister, og tilføj regler på noget aktuel html-kode Side 13
Pseudo element selektorer Pseudo element selektorer minder meget om pseudo class selektorer, vi skal her kikke nærmere på :first-letter samt :first-line :first-line Korriger dine css-regler til dette: #indhold p{ text-indent: 0px; font-size: 11px; line-height: 12px; margin: 10px 10px 11px 10px; #indhold p:first-line{ color:#f00; Side 14
:first-letter Korriger dine css-regler til dette: #indhold p:first-letter{ color: #f00; float: left; font-size: 26px; padding: 4px 0px 0px 0px; Side 15
Ekstra ekstra opgave Prøv nu som ekstra selvstændig opgave om du kan gennemskue denne sidste opgave. Det kræver at du går på nettet og nærmere undersøger pseudo classens struktur. Du skal ende med dette resultat Indskriv følgende kode i body-taget: <table > <tr> <th>vare</th> <th>pris</th> <th>antal</th> <th>total</th> </tr> <tr> <td>bukser</td> <td>100kr</td> <td>5</td> <td>500kr</td> </tr> <tr> <td>polo t-shirt</td> <td>200kr</td> <td>5</td> <td>1000kr</td> </tr> <tr> <td>bluse</td> <td>90kr</td> <td>4</td> <td>360kr</td> </tr> Side 16
<tr> <td colspan="3">subtotal</td> <!-- slår tre kolonner sammen --> <td>1860kr</td> </tr> <tr> <td colspan="3">fragt</td> <td>120kr</td> </tr> <tr> <td colspan="3">total sum</td> <td>1980kr</td> </tr> </table> Herefter skal du indskrive følgende css: table{ width: 600px; border-collapse: collapse; th, td{ border: none; th{ background-color: #000; color: #fff; /*START:hver anden lys grå, række 2 + 4 + 6, altså de lige rækker, even*/ tr:nth-of-type(even){ background-color: #F3F3F3; /* række 3 + 5 + 7, altså de ulige, odd */ tr:nth-of-type(odd) { background-color:#ddd; /*START:right-align */ td:nth-child(n+2){ text-align: right; Side 17
/*START: den sidste tr er bold */ tr:last-child{ font-weight: bolder; /*START: alle de sidste td er bolder */ td:last-child{ font-weight: bolder; /*START: stor total sidste værdi */ tr:last-child td:last-child{ font-size:24px; /*START:næstsidste række, altså nummer 2 fra bunden */ tr:nth-last-child(2){ color: green; /*START:align_sidste_tre_rækker */ tr:nth-last-child(-n+3) td{ text-align: right; Ved nedenstående tabel er der det pudsige, at med css3 ændres syntaksen fra : til :: altså fra enkelt kolon til dobbelt kolon, dog er understøttelsen af dobbel-kolon begrænset, men så er du klar på hvad der venter Oversigt over pseudo-elements: Css2.1 Css3 Beskrivelse :first-line ::first-line Styler første linje af et element :first-letter ::first-letter Styler første bogstav af et element :before ::before Tilføjer indhold før et element :after ::after Tilføjer indhold efter et element Side 18