Om styles / typografier / typografiark / stylesheets (dvs. Cascading StyleSheet ~ CSS) CSS er et sprog til at definere layout på HTML-dokumenter. CSS indeholder flere muligheder for layout end HTML og det er meget mere præcist. HTML er et struktur-sprog - og CSS er et layout-sprog. Oprindeligt altså da HTML blev opfundet var HTML et rent struktur-sprog. Det vil sige at man med HTML udelukkende kunne strukturere en tekst ved at sige Dette er en overskrift Dette er et tekstafsnit Dette er en tabel osv. ved at bruge <h1>, <p> og <table>. Og det kan man stadig. I har nu set på en række af disse HTML-tags (HTML- markører), som beskriver hvorvidt givne elementer på en webside skal opfattes som en overskrift, et link til en anden side, et billede, et tekstafsnit, en tabel,.. osv. Til nogle af disse markører (tags) har vi også knyttet enkelte attributter, der piller ved sidens eller tekstens udseende (layout og præsentation) som fx: <body bgcolor= blue > </body> <td bgcolor= red width= 70% > </td> <b>ingredienser</b> osv. Disse er eksempler på, at når folk præsenterer noget information vil de også gerne kunne give det et personligt præg. Så hurtigt efter HTML s fremkomst opstod ønsket om, at man på websiderne kunne benytte varierende skrifttyper, størrelser og farver forskellige steder på en side. Og det førte til indførelsen af typografier (på engelsk Styles) CSS. CSS blev opfundet for at give webside-designere flere muligheder for layout og samtidigt kunne beholde HTML som et struktur-sprog. Det er oftest mere enkelt at styre, hvis man sørger for at adskille indhold og layout. Med Styles og især typografi-ark kan man samle layout på ét (eller nogle få) steder. Om typografi CSS 1
Man kan påvirke en teksts udseende (give den typografi) på flere måder: 1) Ved hjælp af STYLE-attributen som de fleste HTML-markører har. 2) Man kan definere sine styles i toppen af siden i en STYLE-tag (Style-markør) hvilket er en fordel, hvis man skal bruge de samme typografier (styles) flere steder på en web-side. 3) Man kan definere sine styles i et selvstændigt dokument, så flere web-sider kan benytte samme style (layout). I det følgende vil det trin for trin blive vist, hvordan man gør i hvert af de tre tilfælde nævnt ovenfor. 1) Typografi ved hjælp af STYLE-attributen, som de fleste HTML-tags har. (Lokalt style / inline style) Eksempel: <p style= color:blue; font-family:arial; font-size:10px > Dette afsnit er skrevet med blåt. <br /> Vi har tilføjet en style-attribut til p-koden, som omkranser et afsnit. </p> <h1 style= color:red; font-size:2cm > h1-overskriften her skrives med rødt. </h1> I eksemplet ovenfor angives skriftstørrelsen i pixels (px). Man kan også bruge punkt (pt) eller centimeter (cm) eller millimeter (mm). Det bedste for brugeren vil være, hvis man angiver en procent forhold til standard-størrelsen (fx 75%). Man behøver jo ikke at angive en font-størrelse. Style-attributtens værdi er en tekst-streng, derfor begynder og slutter den med gåseøjne. Imellem disse opremses så de forskellige egenskaber adskilt af semikolon (;) Der sættes kolon (:) mellem egenskaben og dennes værdi. Meget ofte benyttede egenskaber er (HUSK at bindestregen i egenskabs-betegnelsen er vigtig!): color background-color font-family font-size tekstfarven baggrundsfarven skrifttypen skriftstørrelse Se flere egenskaber og deres mulige værdier i appendix A Opgave 1: Giv dit eget helt personlige præg til teksten på den udleverede webside, ved at indføre styleattributten i de forskellige koder. Gør gerne din side farvestrålende. Gem resultatet under et nyt navn. Om typografi CSS 2
2) Man kan definere sine styles i toppen af web-siden i en STYLE-tag (Globalt style) hvilket er en fordel hvis man skal bruge de samme typografier flere steder på en web-side. En globalt style defineres i HEAD-delen i en STYLE-tag: Eksempel: <html> <head> <title>global styles</title> <style type= text/css > body {color:blue; font-size:6mm} h1 {font-size:12mm; color:green} p {color:black; background-color:yellow} </style> </head> <body> Normal tekst er blå og.. </body> </html> Opgave 2: Indfør det ovenfor nævnte globale style på den side du tidligere har fået udleveret Betragt resultatet. Gem så siden under et andet navn, så du har flere versioner liggende. Eksperimenter nu selv med at ændre på eller tilføje i det globale style. Gem et eller flere af dine resultater til eventuelt senere brug. OBS: Generel syntax for angivelse af globale og eksterne Styles (hentet fra html.dk): Om typografi CSS 3
3) Man kan definere sine styles i et selvstændigt dokument (Eksternt stylesheet / typografiark) - så flere web-sider kan benytte samme layout. Eksempel: Lav en fil og giv den fx flg. navn minstyle.css og den kan så fx have følgende indhold: Her er så din webside: /*Mit eksterne stylesheet*/ body {color:darkblue; font-family:courier; font-size:6mm; background-color:lightblue } h1 {font-family:arial; line-height:3cm; color:green } p {color:black; background-color:yellow } <html> <head> <title>brug af eksternt stylesheet </title> <link rel= StyleSheet href= minstyle.css type= text/css /> </head> <body> Her står din tekst. </body> </html> Filen med dit typografiark (stylesheet) skal i dette eksempel ligge i samme mappe som de websider, der bruger det. Alternativt skal hele stien til typografiarket stå i referencen, ganske som du kender det fra billeder mm. Hvis alle web-sider skal have nyt udseende, er det nu nok at ændre i filen minstyle.css. Opgave 3: Se på web-kogebogen.. og mulighederne heri. Om typografi CSS 4
Reglernes hierarki (kaskade-princippet) Du kan komme ud for at skulle/ville bruge alle tre typer stylesheets i samme HTML-dokument. I det tilfælde skal du først i dokumentet skrive den linie, der kalder det eksterne stylesheet. Derefter følger STYLE-tags, hvori det globale stylesheet bliver erklæret. Hvis der er modstridende erklæringer mellem disse to stylesheets, vil det være reglerne i det globale, som gælder, fordi det er erklæret senest. Hvis der senere i HTML-dokumentet kommer nogle inline styles (interne stylesheet), vil det være det, der gælder (og kun inden for de tags, hvor de er erklæret). Inline/interne Styles skrives i selve HTML-dokumentet, dér hvor man har brug for dem. Metoden benyttes når man ønsker at indføre enkelte undtagelser eller tilføjelser til de generelle regler, som er beskrevet i et eksternt eller globalt CSS. Der gælder altså at den style-erklæring, der er placeret tættest på den konkrete tekst, er den der kommer til at gælde. Når du selv vil fremstille en CSS-fil. Det er som altid en god ide at gå systematisk frem når man arbejder med disse ting. Her er en arbejdsgang du med fordel kan benytte, når/hvis du vil fremstille et eksternt stylesheet: 1. Start med at lave et dokument med et globalt stylesheet. Når det fungerer, som du vil have det til, er du klar til at gå videre. 2. Marker og kopier alle erklæringerne mellem STYLE-taggene. Du skal ikke have STYLEtaggene med, kun alt hvad der står imellem dem. 3. Åbn en ny side og kopier/paste indholdet af stylesheetet ind på den (se side 4). 4. Gem dette i en fil med efternavnet (extension) css. Fx minstyle.css. 5. Inden du prøver at kalde det eksterne stylesheet, skal du slette erklæringerne i dit HTMLdokument: Altså alt det du kopierede over i minstyle.css. Style-taggene skal også slettes. 6. I HEAD-afsnittet indsættes følgende linie der, hvor STYLE-taggene var. Den eksterne cssfil hedder her minstyle.css, og hvis den ligger i samme mappe som HTML-dokumentet, så skal begyndelsen af HTML-dokumentet se sådan ud: <head> <title> </title> <link rel= stylesheet type= text/css title= en forklarende titel href= minstyle.css /> </head> Om typografi CSS 5
Litteratur: Findes på http://www.html.dk/tutorials/css/default.asp Vi vil især koncentrere os om nedenstående Lektioner 1-6 - enkelte dog kun i uddrag. HTML.dk à CSS Tutorial Af Jonas Astrup, HTML.dk Indhold: Introduktion Om hvad du kan forvente at lære, og hvilke forudsætninger der kræves for at benytte tutorialen. Lektion 1: Hvad er CSS? Lidt om baggrunden for CSS, og hvorfor det er smart at bruge CSS fremfor HTML til layout og design. Lektion 2: Hvordan fungerer CSS? Vi kigger på den grundlæggende syntaks og laver vores første stylesheet. Lektion 3: Farver og baggrunde I denne lektion vil vi kigge nærmere på muligheder for at benytte farver, baggrundsfarver og baggrundsbilleder. Lektion 4: Fonte Denne lektion handler om de mange muligheder CSS giver for at specificere fonte og font familier. Lektion 5: Tekst Om hvordan man tilføjer layout til tekst, f.eks. justeringer, dekorationer, m.v. Lektion 6: Links Om hvordan man arbejder med pseudo-classes og links - herunder forskellige effekter. Se flere CSS-egenskaber her: http://www.pageresource.com/dhtml/cssprops.htm Om typografi CSS 6
Appendix A: Kort oversigt over ofte benyttede Style-egenskaber og (nogle af) deres mulige værdier: Color : Farve-navn eller hexværdi Background-color : ---- ---- Background-image : url(.. ) [I parentesen skal stien til billedfilen stå] Background-repeat : no-repeat, repeat, repeat-x, repeat-y Font-family : arial, verdana, courier,., serif, sans-serif, monospace Font-size : px, pt, mm, cm Text-transform : normal, uppercase, lowercase, capitalize Text-align : default, right, left, center.. Og der findes mange flere. Når en egenskab ikke nævnes, så vælger browseren en standard-værdi (default-værdi). Denne standardværdi vil variere fra browser til browser. Om typografi CSS 7