Beginning CSS and Web Development kap. 1 - 11 Uge 45 xhtml og CSS Beginning CSS and Web Development kap. 1 - 11
Plan Xhtml opbygning CSS Stand-up programmering Divs, class, id Baggrunde, farver og billeder Tekst Links Lister Tabeller Stand-up programmering
Xhtml vs. html i XHTML skal alle elementer afsluttes i XHTML skal alle elementer skrives med små bogstaver (lowercase) i XHTML skal værdien af attributter stå med anførelsestegn (dette er kun under trans. og frameset, vi bruger strict) i XHTML tillades minimerede attributter ikke i XHTML bruges attributten "id" til identifikation og ikke ”name” <option selected> i stedet < option selected=”selected” />
Xhtml definition Definition af dokument (øverst i dokumentet) Tre typer Strict (rent markup, sammen med css) Transitional (kan stadigt bruge html attributter) Frameset (til brug af framesets) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Xhtml start af dokument Starter med tagget <html> med attributterne Xmlns (hvor kan finde definition for hvad dokumentet må indeholde af tags og attributter) Xml:lang (hvilket sprog er dokumentet skrevet i) <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
Xhtml header Information til browseren Content-type (hvordan skal den opfatte indholdet af dokumentet) Charset (hvilket karaktersæt bliver der brugt) Stylesheet (et evt. eksternt stylesheet der skal loades) Title (hvilken titel skal siden have i browseren) Script (import af evt. eksternt javascript) <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <link rel="stylesheet" href="styles/styles.css" type="text/css"/> <title>Gorilla Script</title> </head>
Xhtml skabelon Alt inden for body-tagget er det der vil blive præsenteret i browseren Så nu er vi klar til at gå i gang med CSS <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> </body> </html>
CSS (Cascading Style Sheet) Bruges til at definere udseendet for vores xhtml dokument Gør det muligt at adskille udseende og indhold Vi kan derfor ændre udseendet for multiple sider med bare et style-sheet Kan også bruges sammen med html og xml Et CSS-dokument er bygget op af selektorer og attributter for hvad der skal ske med den enkelte selektor
Oprettelse af stylesheet Et eksternt stylesheet er egentligt bare en tekst-fil med css som efternavn. Det stylesheet som vi bruger til de kommende eksempler hedder styles.css Det eksterne stylesheet forbindes til vores xhtml-dokument via en meta-information i headeren af vores xhtml-dokument <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="styles/styles.css" type="text/css"/> <title>Untitled Document</title> </head> <body> </body> </html>
Embedded og inline css Det er foruden eksterne stylesheets muligt at lave embedded og inline stylesheets. Embedded css skrives som en del af headeren i xhtml dokumentet Inline css skrives som en del af den selektor den skal påvirke. Det er dog mest fleksibelt at benytte eksterne stylesheets på nær i nogle få enkelte tilfælde <head> <style type="text/css"> p{ color:#666666; } </style> </head> <p style="color:#CCCCFF"> noget tekst </p>
Selektorer og attributter Vi kan definere i vores style-sheet hvad der skal ske med den enkelte selektor i vores xhtml-dokument Dette gøres i style-sheetet således: Efterfølgende vil det have indflydelse på alle p-elementer i vores xhtml-dokument der benytter sig af vores style-sheet Vi har mulighed for at ændre alle pre-definerede selektorer i xhtml-formatet såsom: <p>, <table>, <ul>, <li>, <img> osv. p{ padding:6px; padding-top:0px; text-align:justify; } selektor attributter
Klasser og id I stedet for at modificere en specifik selektor direkte kan vi lave en klasse som kan tilføjes forskellige selektorer: Denne klasse kan vi tilføje til alt der skal ”flyde til højre” dette vil se således ud i xhtml-dokumentet: .floatright{ float:right; } <img class="floatright" src="images/image.jpg" />
Klasser og id 2 Ved at lave et id i stedet for en klasse er det muligt at referere til et specifikt sted i xhtml-dokumentet, dette gøres således i style-sheetet: I xhtml-dokumentet kommer det til at se således ud: Vi kan derefter lave en link til denne specifikke overskrift: Vi behøver ikke at definere vores id’er i style-sheetet hvis de bare skal virke som et link-id #overskrift1{ font-size:12px; } <h1 id=”overskrift1">noget tekst</h1> <a href=”#overskrift1”>link</a>
Divs I stedet for predefinerede selektorer kan vi benytte divs som byggesten til at lave vores egne indholds-containere. Dette gør xhtml og css meget fleksibelt. En container med ramme kunne se således ud i xhtml-dokumentet: Og således i style-sheetet: <div class="box"> </div> .box{ border:1px solid #000; width:200px; height:200px; }
Nedarvning Xhtml og css er bygget i hierarkisk struktur hvilket betyder at en selektor der er barn af en anden selektor nedarver dennes attributter, hvis en attribut ikke er defineret specifikt for selektoren. Dette gælder dog ikke attributter såsom border, margin og padding text-box 1 text-box 2 <div class="box"> text-box 1 <div class="box2"> text-box 2 </div> .box{ border:1px solid #000; width:200px; height:200px; font:Arial, Helvetica, sans-serif; font-size:18px; } .box2{
Blok- og inline-elementer Elementer såsom p og div er default blokelementer. Dette betyder at der efter afslutningen af elementet indsættes et linjeskift. Elementer såsom span er inline-elementer og efterfølges ikke af linjeskift. Kan f.eks. Bruges til at ændre dele af en tekst. Man kan ændre blokelementer til at være inline-elementer og selvfølgelig også modsat <div class="box"> <p>en tekst</p> <p>en anden tekst</p> </div> <div class="box"> <p>en tekst <span class="highlight"> med highlight</span></p> <p>en anden tekst</p> </div> .highlight{ background-color:#003399; } p{ display:inline; }
Margin og padding Fælles for alle selektorer er at vi kan tilføje margin og padding til dem Padding definerer afstanden for elementets ydre grænse og ind til selve indholdet af elementet Margin definerer afstanden fra elementets ydre grænse til det omsluttende element .box{ border:1px solid #000; margin:30px; width:200px; } .box2{ border:1px solid #f00; padding:30px; margin padding
Bredde og højde Alle elementers bredde og højde kan også defineres Dette kan f.eks. enten gøres i pixels eller procent. Hvis de defineres i procent forholder elementet sig til sit omsluttende element og laver den procentvise størrelse derudfra. Pas på i forhold til padding og borders da disse også regnes med. .box{ border:1px solid #000; margin:30px; width:200px; } .box2{ border:1px solid #f00; width:90%;
Baggrundsfarver og -billeder Der kan defineres en baggrundsfarve for vores elementer Vi kan også indsætte et baggrunds- billede .box{ background-color:#CCCCFF; } .box2{ background-color:#CC3366; .box{ background-color:#CCCCFF; } .box2{ background-image:url("../images/css3.png");
Baggrundsbilleder: gentagelse Vi kan bestemme hvordan vores baggrundsbillede skal opføre sig i forhold til gentagelse horisontalt og vertikalt .box2{ background-image:url("../images/css3.png"); background-repeat:repeat-x; } .box2{ background-image:url("../images/css3.png"); background-repeat:repeat-y; } .box2{ background-image:url("../images/css3.png"); background-repeat:no-repeat; }
Billeder Vi har også mulighed for at indsætte almindelige billeder i vores containere Billedet og teksten i containeren forholder sig nu til hinanden <div class="box"> text-box 1 <div class="box2"> <img src="images/css3.png" class="floatright"/> text-box 2, med noget mere tekst i </div> .floatright{ float:right; } img{ border: 1px solid #CCCCCC;
Tekst Der findes som default 7 selektorer i xhtml lavet til tekst: p, h1, h2, h3, h4, h5, h6. Hvor p er beregnet til brødtekst og h1-h6 kan bruges til overskrifter startende med h1 som det øverste niveau. <div class="box"> <h1>overskrift 1</h1> <h2>overskrift 2</h2> <h3>overskrift 3</h3> <h4>overskrift 4</h4> <h5>overskrift 5</h5> <h6>overskrift 6</h6> <p>brødtekst</p> </div>
Tekst 2 Som med andre elementer kan man ændre farven og baggrundsfarven Man kan derudover også ændre på linjehøjden, afstand imellem bogstaver, tykkelsen, stilen og selve font-typen m.m. p{ color:#00ff33; background-color:#CCFFFF; } h2{ color:#663399; background-color:#FFFF99; p{ color:#000000; background-color:#CCFFFF; font-family:Georgia, "Times New Roman", Times, serif; line-height:150%; letter-spacing:4px; font-weight:bold; font-style:italic; }
Line break Et linjeskift i f.eks. en tekst kan ikke bare laves som et normalt linjeskift som vi er vandt til i programmer som word, notepad etc., men skal i stedet også defineres som et element: <div class="box"> <p>Her er en tekst med linjeskift?</p> </div> <div class="box"> <p>Her er en tekst med<br /> linjeskift?</p> </div>
Links En vigtig del af et xhtml-dokument er hyper-links, så der kan linkes til andre steder i dokumentet og desuden til eksterne dokumenter. Et link kan både være tekst, et billede og et helt element. Et typisk tekst-link ser således ud i xhtml-dokumentet: <div class="box"> <p>tekst med <a href="http://dr.dk">link til dr</a></p> </div>
Links og css Et link kan være i fire forskellige stadier: link, visited, active og hover. Vi kan igennem vores stylesheet definere hvordan hvert af disse stadier skal se ud: a:link, a:visited, a:hover, a:active{ text-decoration:none; } a:link{ color:#CC00FF; a:hover{ color:#CCCC00; background-color:#333333; a:visited{ a:active{ color:#FFFFFF; background-color:#666600;
Links som blok-element Ved at lave vores links om til et blok-element kan vi få et helt element til at virke som link og ikke kun teksten Det er også muligt at lave et billede til et link <div class="box"> <a href="http://dr.dk">link til dr</a> </div> a:link, a:visited, a:hover, a:active{ text-decoration:none; display:block; } <div class="box"> <a href="http://dr.dk"><img src="images/css3.png" /></a> </div>
Lister Lister bruges, som navnet antyder, til at opstille tekst på listeform. Dette kan enten gøres i en uordnet eller en ordnet liste. Forskellen på de to listetyper er at den ordnede liste er nummereret stigende ,hvorimod den uordnede ikke har nogen nummerering. En uordnet og en ordnet liste laves således i xhtml: <div class="box"> <ul> <li>element 1</li> <li>element 2</li> <li>element 3</li> </ul> </div> <div class="box"> <ol> <li>element 1</li> <li>element 2</li> <li>element 3</li> </ol> </div>
Lister og css Det er muligt at ændre på den måde hvert element i listen bliver præsenteret på: Der er i alt ca. 15 forskellige default muligheder at vælge imellem ul{ list-style-type:katakana; } ul{ list-style-type:lower-roman; } ul{ list-style-type:square; }
Lister og css 2 Udover de default præsentationsmuligheder er det også muligt selv at indsætte et billede som skal vises ud for hvert liste-element. ul{ list-style-image:url(../images/angry.gif); }
Lister inline Lister behøves ikke at være vertikale. Hvis vi f.eks. vil bruge en liste til en horisontal menu-bar kan listen nemt omstilles til dette ul{ list-style:none; } li{ display:inline; background-image: url(../images/angry.gif); background-repeat: no-repeat; background-position: left center; padding: 5px 10px 5px 30px; top højre bund venstre
Lister af lister Lister kan indeholde andre lister som igen kan indeholde andre lister. Vi kan derved lave en hierarkisk opbygning til f.eks. En indholdsfortegnelse <div class="box"> <ul> <li>element 1 <li>indre element 1</li> <li>indre element 2</li> </ul> </li> <li>element 2</li> <li>element 3</li> </div> ul{ list-style:lower-alpha; list-style-position:inside; padding: 0 0 0 15px; line-height:150%; }
Tabeller Tabeller er lavet til at præsentere data i tabelform og ikke som det førhen har været tilfældet i html som en måde at lave layout på. Det har vi css til! Tabeller er bygget op af de tre selektorer table, tr og td hvor table står for selve omgrænsningen af tabellen og tr og td henholdsvis står for tabel-rækker og tabel-data Det er desuden muligt at tilføje selektoren th i den første række af tabellen for at få en overskrift på den enkelte kolonne <div class="box"> <table> <tr><th>navn</th><th>adr.</th><th>tlf.</th></tr> <tr><td>poul</td><td>en gade</td><td>12334</td></tr> <tr><td>anders</td><td>gade 3</td><td>32892</td></tr> <tr><td>sigrid</td><td>vej 21</td><td>12452</td></tr> </table> </div>
Tabeller og css Det er muligt at ændre på tabellens udseende via css så vi kan få en pænere præsentation af vores data table{ border:0px; border-collapse:collapse; width:100%; } th{ text-align:left; background-image:url(../images/bargradient.gif); background-repeat:repeat-x; td, th{ border-bottom:solid; border-bottom-width:1px; border-bottom-color:#CCCCCC; padding:3px;
Tabeller og inline css Vi vil dog også gerne have forskellige størrelser på hver af kolonnerne da nr. ikke behøves lige så meget plads som navn, dette er en af de få gange hvor vi skal skrive css inline i selve xhtml dokumentet. <div class="box"> <table> <tr><th style="width:6%;">nr.</th><th>navn</th><th>adr.</th><th style="width:20%;">tlf.</th></tr> <tr><td>1</td><td>poul</td><td>en gade</td><td>12334</td></tr> <tr><td>2</td><td>anders</td><td>gade 3</td><td>32892</td></tr> <tr><td>3</td><td>sigrid</td><td>vej 21</td><td>12452</td></tr> </table> </div>
Ændring af specifikke celler Det er også muligt at tilføje en klasse til nogle af cellerne for at gøre tabellen lettere læselig <div class="box"> <table> …. <tr><td class="tablecellgrey">2</td><td class="tablecellgrey">anders</td><td class="tablecellgrey">gade 3</td><td class="tablecellgrey">32892</td></tr> </table> </div> .tablecellgrey{ background-color:#CCCCCC; }
Kontekst specifikke selektorer Det er muligt at bestemme hvordan elementer i forhold til deres kontekst skal opføre sig <div class="box"> <p>text-box 1</p> <div class="box2"> <p><img src="images/css3.png" class="floatright"/> text-box 2, med noget mere tekst i</p> </div> .box2 p{ color:#CCFFFF; } p{ color:#FF00FF;
Kommentarer i css og xhtml Man kan skrive kommentarer til sig selv og andre programmører i både xhtml- og css-koden. Disse kommentarer vil blive overset af webserveren og web-browseren. Kommentarer i xhtml ser således ud: Og i stylesheetet ser det således ud: Dette kan også begge henseender bruges til at udkommentere kode som man gerne vil gemme men ikke skal bruge lige nu <!-- En lille kommentar til mig selv på flere linjer --> /* en lille kommentar på flere linjer */
Validering af xhtml og css Det er muligt at validere sin xhtml og css kode for at finde ud af om den overholder de standarter man har foreskrevet den burde gøre Validering af xhtml kan foretages her: http://validator.w3.org/ Validering af css kan foretages her: http://jigsaw.w3.org/css-validator/
Stjæl med arme og ben Layout Xhtml – kig på koden Css – kig på koden Billeder (hvis de ikke er få åbenlyse)
Stand-up programmering Så hvordan kombinerer vi så alt det vi har lært til en færdig hjemmeside? Start med at lave en skitse så vi har noget at gå ud fra Lav derefter de ting som er gennemgående for alle siderne såsom header, menuer osv. Afslut med at lave det der er specifikt for den enkelte side
Udskiftning af stylesheet Hvorfor var det så smart at vi lavede alt vores css i et eksternt stylesheet? Vi kan hurtigt udskifte vores stylesheet med et nyt og få et helt andet layout