Beginning CSS and Web Development kap. 1 11
Plan Xhtml opbygning CSS 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 <option selected> i stedet < option selected= selected /> i XHTML bruges attributten "id" til identifikation og ikke name
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 <!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> Så nu er vi klar til at gå i gang med CSS
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 xhtmldokument <!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 <head> <style type="text/css"> p{ color:#666666; </style> </head> Inline css skrives som en del af den selektor den skal påvirke. <p style="color:#ccccff"> noget tekst </p> Det er dog mest fleksibelt at benytte eksterne stylesheets på nær i nogle få enkelte tilfælde
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 sheetetsåledes: selektor attributter 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;
Klasser og id I stedet for at modificere en specifik selektor direkte kan vi lave en klasse som kan tilføjes forskellige selektorer:.floatright{ float:right; Denne klasse kan vi tilføje til alt der skal flyde til højre dette vil se således ud i xhtml dokumentet: <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: #overskrift1{ font size:12px; I xhtml dokumentet kommer det til at se således ud: <h1 id= overskrift1">noget tekst</h1> Vi kan derefter lave en link til denne specifikke overskrift: <a href= #overskrift1 >link</a> Vi behøver ikke at definere vores id er i style sheetet hvis de bare skal virke som et link id
Divs I stedet for predefinerede selektorer kan vi benytte divs som byggesten til at lave vores egne indholdscontainere. Dette gør xhtml og css meget fleksibelt. En container med ramme kunne se således ud i xhtmldokumentet: <div class="box"> </div> Og således i style sheetet:.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. <div class="box"> text box 1 <div class="box2"> text box 2 </div> </div>.box{.box2{ border:1px solid #000; width:200px; height:200px; font:arial, Helvetica, sans serif; font size:18px; text-box 1 text-box 2 Dette gælder dog ikke attributter såsom border, margin og padding
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. <div class="box"> <p>en tekst</p> <p>en anden tekst</p> </div> Elementer såsom span er inline elementer og efterfølges ikke af linjeskift. Kan f.eks. Bruges til at ændre dele af en tekst. <div class="box"> <p>en tekst <span class="highlight"> med highlight</span></p> <p>en anden tekst</p> </div>.highlight{ Man kan ændre blokelementer til at være inline elementer og selvfølgelig også modsat 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{.box2{ border:1px solid #000; margin:30px; width:200px; 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{.box2{ border:1px solid #000; margin:30px; width:200px; border:1px solid #f00; width:90%;
Baggrundsfarver og billeder Der kan defineres en baggrundsfarve for vores elementer.box{ background color:#ccccff;.box2{ background color:#cc3366; Vi kan også indsætte et baggrundsbillede.box{.box2{ background color:#ccccff; 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 <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> </div>.floatright{ img{ float:right; border: 1px solid #CCCCCC; Billedet og teksten i containeren forholder sig nu til hinanden
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 p{ color:#00ff33; background color:#ccffff; Man kan derudover også ændre på linjehøjden, afstand imellem bogstaver, tykkelsen, stilen og selve font typen m.m. 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{ a:hover{ a:visited{ a:active{ color:#cc00ff; color:#cccc00; background color:#333333; color:#cc00ff; color:#ffffff; background color:#666600;
Links som blok element Ved at lave vores links om til et blokelement kan vi få et helt element til at virke som link og ikke kun teksten <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; Det er også muligt at lave et billede til et link <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å: ul{ list style type:katakana; ul{ list style type:lower roman; ul{ list style type:square; Der er i alt ca. 15 forskellige default muligheder at vælge imellem
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{ li{ list style:none; 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 <ul> <li>indre element 1</li> <li>indre element 2</li> </ul> </li> <li>element 2</li> <li>element 3</li> </ul> </div> ul{ list style:lower alpha; list style position:inside; padding: 0 0015px; 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 tabeldata 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{ th{ td, th{ border:0px; border collapse:collapse; width:100%; text align:left; background image:url(../images/bargradient.gif); background repeat:repeat x; 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> </div>.box2 p{ p{ color:#ccffff; 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: <! En lille kommentar til mig selv på flere linjer > Og i stylesheetet ser det således ud: /* en lille kommentar på flere linjer */ Dette kan også begge henseender bruges til at udkommentere kode som man gerne vil gemme men ikke skal bruge lige nu
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