En introduktion till stilmallar (CSS) Cascading Style Sheets (CSS)? 2002 Ulf Tornert 1

Transkript

1 En introduktion till Stilmallar eller Cascading Style Sheets (CSS) 1

2 Stilmallar en introduktion... 4 Vad är stilmallar?...4 Vad behöver du för att lära dig stilmallar?...4 Hur stilmallar integreras i en webbsida... 5 Att infoga en mall direkt i HTML-märket...5 Att bädda in mallen med märket <STYLE>...6 Att importera en mall...6 Att länka en mall...7 Grunderna till stilmallar... 7 Grundläggande syntax... 7 Class-attributet...8 ID-attributet...9 Bakgrunder...10 Bakgrundsfärg till ett element...10 Bakgrundsbild till ett element...12 Olika sätt att lägga bakgrundsbilden...12 Textformattering...13 Att sätta färg på text...13 Avstånd mellan tecken...13 Linjehöjd...14 Styckejustering...14 Textdekoration...15 Indrag av första raden...15 Textomvandling...16 Typsnitt...16 Att sätta typsnitt...16 Bestäm storleken...16 Välj stil...17 Olika former av fet stil...17 Ramar och kanter...17 Ramtyp...17 Färg och bredd...18 Egna ramtyper...19 Marginaler...19 Fyllning...20 Listor...20 Dimensionering och presentation av element...21 Storleken på ett element...21 Placering och synlighet...23 Överlappande lager vilket ligger överst?...25 Flytande text kring en bild...26 Pseudo-klasser...27 Ändra muspekarens utseende...28 Färga dina scrollknappar...28 Några enkla exempel

3 Exempel nr Exempel nr Exempel nr Övningsuppgifter

4 Stilmallar en introduktion Vad är stilmallar? I webbens barndom, då de enda användarna var akademiker, fanns inget större behov av att kunna styra en sidas layout. Man begränsade sig tvärtom till ett fåtal regler för hur olika delar av sidan skulle visas med rubriker, kursiv- respektive fetstil, punktlistor och så vidare. Alla dessa regler för hur sidans olika delar märktes ut, sammanfattades i språket HTML (HyperText Markup Language). Detta hade den åtråvärda fördelen att alla användare kunde läsa ett sådant dokument, oberoende av vilken maskin eller operativsystem som användes. På senare år har dock webben fått helt andra användningsområden och målgrupper, vilket ställer krav som HTML inte kan leva upp till. I ett försök att komma runt detta skapades stilmallar eller Cascading Style Sheets (CSS) som de heter på engelska. Med dessa kan du definiera speciella regler för hur- och var olika element i sidan skall visas. Du kan alltså placera objekt precis vart som helst i sidan, du kan göra saker och ting osynliga eller synliga (utan att ladda om sidan), du kan formattera om alla märkord såsom <B>, <H1>, <P>, du kan till och med ge samma märkord flera olika format. Sådant som indrag av första raden i ett stycke, ramar och bakgrundsfärg till text är också möjligt. För avancerade användare kan man t.o.m. definiera regler för olika media såsom bildskärm och skrivare, men det är överkurs i det här sammanhanget. En ytterligare stor fördel är att man kan koppla en extern stilmall till många dokument, vilket ger en sajt enhetligt utseende utan att man måste formattera alla element explicit. Om alla dokument följer samma mall (vilken endast definieras en gång) kommer de att få samma utseende. Namnet Cascading Style Sheets kommer av det faktum att man kan definiera en stilmall på flera olika sätt, även inom ett och samma dokument. Om ett dokument har flera stilmallar som riktar sig till ett och samma märkord måste ju webbläsaren bestämma sig för vilken som ska gälla. Man säger på engelska att multiple rules will cascade into one, vilket ungefär betyder multipla regler kommer att sammanfattas i en och då enligt speciella prioriteringsregler. Hur dessa prioriteringar går till tar jag upp i nästa avsnitt. Egentligen finns det flera olika standarder för hur stilmallar ska fungera, men den standard som förmodligen används flitigast är den som World Wide Web Consortium (W3C) står för. Det är denna jag refererar till i detta häfte. Den första versionen (CSS1) blev en rekommenderad standard i december 1996, och nu gäller version CSS2. Nu kan man fråga sig om stilmallar verkligen täcker webbdesignerns behov av layout-verktyg, för att kunna presentera sin produkt eller tjänst tillfredställande. Jag skulle vilja påstå att de inte fullt ut gör det! Åtminstone inte för alla och definitivt inte utan kopplingen till exempelvis JavaScript, som kan få en sida att leva upp ännu mer (vi kommer att titta på detta lite senare). Riktigt mediatunga sajter använder helt andra verktyg, men om man lyckas kombinera stilmallar med JavaScript kan man ändå erhålla mycket avancerade sajter som kan tillfredställa till och med en kräsen surfare. Vilken teknik man slutligen väljer att använda beror dels på tycke och smak, dels på behovet av regelbunden uppdatering, och förstås på uppenbara begränsningar. Vad behöver du för att lära dig stilmallar? Om du inte har väldigt höga ambitioner med stilmallar föreslår jag att du utnyttjar webben själv för att lära dig grunderna. Det finns mycket bra information att hämta på W3C:s egen hemsida på adressen (följ länken CSS). På kan man även ladda ner en manual i pdf-format på ca 300 sidor med bra innehåll. Jag tycker inte det är nödvändigt att köpa en dyr bok i ämnet, eftersom det dels finns så mycket gratismaterial att hämta och dels eftersom det är ganska lätt att lära sig hantera stilmallar på egen hand. Sedan behöver du en vanlig texteditor (typ Windows Anteckningar) och en webbläsare som klarar 4

5 stilmallar. De webbläsare som fungerar är Netscape Navigator från version 4 och framåt, samt Internet Explorer 4 och framåt, men Explorer är faktiskt helt överlägsen Netscape när det gäller stilmallar. I flera av de exempel jag visar i det här häftet måste du använda Explorer för att resultatet skall bli vad du förväntar dig Netscape är inte ens i närheten. Det här ställer förstås till med mycket bekymmer för den som vill arbeta som webbdesigner, eftersom denne måste skapa sidor som passar både NN och IE samtidigt. Inte helt enkelt! I skrivande stund finns visserligen NN6 ute (vart tog NN5 vägen?) och den fungerar säkert mycket bättre med stilmallar. Hur stilmallar integreras i en webbsida Det finns fyra olika sätt att aktivera en stilmall i ett dokument. Dessa är (med fallande prioritet): 1. Att infoga en mall direkt i HTML-märket (inline-styles). 2. Att bädda in mallen innanför <style></style>-taggarna i sidans huvud. 3. Att importera en mall i sidans huvud. 4. Att länka en mall med <link>-taggen i sidans huvud. Om en enda mall används spelar det egentligen inte så stor roll vilken metod som används, men om ett dokument använder flera mallar kommer speciella prioriteringsregler att användas för att sammanfatta dessa i en övergripande mall för sidan. Jag visar nedan hur varje metod går till. Att infoga en mall direkt i HTML-märket Denna metod har högst prioritet. Om det finns flera mallar för ett märke kommer denna att gälla. Anta att jag vill ha mina H1-rubriker i 24 punkter, Garamond och kursiv i djupblå färg. Då kan jag skriva så här: <H1 style= font-size: 24pt; font-family: Garamond, serif; font-style: italic; color: # >H1-rubrik med infogad mall</h1> Man anger på detta sätt olika värden till olika egenskaper såsom värdet 24pt till egenskapen fontsize. Märket H1 kallas här selektor det märke man valt att formattera. Lägg märke till att jag sätter ett kolon mellan varje egenskap och dess respektive värde. Varje par av egenskap: värde skall skiljas åt med semikolon. Dessutom skall värdena normalt inte omslutas av citationstecken så som man är van vid från HTML, det gör man endast då värdet består av flera ord som Times New Roman. I sidan nedan har jag använt precis ovan nämnda mall och för skoj skull jämför jag med den normala H1-rubriken: På det här sättet kommer endast denna rubrik att få detta utseende jag måste skriva precis likadant vid varje rubrik om jag vill få dem likadana. Otympligt! 5

6 Att bädda in mallen med märket <STYLE> Denna metod har näst högst prioritet. Man bäddar in mallen i sidan efter <title>-taggen i <head>-sektionen med hjälp av <style>-taggen på följande sätt: <HTML> <HEAD> <TITLE>Sidans titel</title> <style type="text/css"></style> </HEAD> <BODY> </BODY> </HTML> Attributet type sätts till text/css så att webbläsaren vet att det är frågan om en stilmall. Därefter kommer en HTML-kommentar (<!--). Den finns där eftersom äldre webbläsare inte förstår <style>-taggen och därför kommer att hoppa över denna. Men när den gör det kommer den att uppfatta allt annat som ren text och den skriver då ut din mall i dokumentet som vanlig brödtext! Det vill du inte! Av den anledningen är det en god idé att dölja hela mallen i en HTMLkommentar. Man väljer först vilket märke man vill formattera, i vårt fall är det H1. Därefter anger man värden till de olika egenskaperna innanför klamrar ( och ) åtskilda med semikolon. Man måste förstås inte infoga radbrytningar mellan varje deklaration som ovan, det gör man bara för tydligheten. Att importera en mall Denna metod har näst lägst prioritet. Du kan importera en mall från en extern fil på vilken adress som helst. Fördelen med detta är förstås att flera dokument kan importera samma mall. Det ger enhetlighet åt din sajt och skulle du vilja ändra på utseendet i framtiden så gör du ändringarna endast i mallen och inte på hundra olika ställen. Du importerar genom att inuti <style>-taggen. Dock skall alla importerade mallar läggas överst. Importerade mallar sammanfattas med varandra, och med eventuella mallar i dokumentet, till en enda mall. Ett exempel: <style url(css/stilmall.css); H1 font-size: 24pt; font-family: Garamond, serif; font-style: italic; color: #000066; 6

7 --></style> Lägg märke till att den stilmall man importerar skall ha filändelsen css. Denna får endast innehålla css-regler, ingen HTML eller annan kod får förekomma. Det går bra att importera från såväl absoluta- som relativa adresser. Att länka en mall Denna metod har lägst prioritet och påminner mycket om den ovan. Skillnaden är att länkade mallar inte sammanfattas på det sätt som importerade gör, du kan inte heller länka flera mallar samtidigt. Den stilmall du länkar skall vara en separat fil med ändelsen css. Ett exempel: <link href= css/stilmall.css rel= stylesheet type= text/css /> Grunderna till stilmallar I det här häftet kommer jag inte att ta upp några direkta finesser med stilmallar, utan endast grunderna. Jag hoppas att det du lär dig härifrån skall vara tillräckligt för att kunna fortsätta på egen hand om du vill. Mitt mål med detta häfte är att du skall lära dig att använda stilmallar för att ge explicita och egendefinierade format till de vanligaste HTML-märkena, att kunna sätta bakgrundsfärg och ramar kring olika element, att kunna definiera och använda de reserverade orden class och id, att kunna placera objekt på valfri plats i sidan synliga som osynliga, samt att kunna skapa enhetlighet åt dina sidor med externa mallar. När du sedan har lärt dig JavaScript skall vi koppla stilmallar till sådana skript för att göra sidorna mycket mer levande. Grundläggande syntax Du har redan sett grunden till syntaxen i CSS. Generellt kan man säga att en regel i en mall definieras genom selektor egenskap: värde; egenskap: värde... Man skulle kunna tänka sig följande regel: H1 font-size: 24pt; font-family: Garamond där H1 är en selektor, font-size en egenskap och 24pt ett värde. Denna regel får till följd att alla rubriker i storlek H1 kommer att få teckenstorleken 24 punkter i typsnittet Garamond. Man kan även stapla selektorer på varandra om man vill att de skall använda samma värde till en speciell egenskap: H1, H2 font-family: Garamond Denna regel ser till att både H1- och H2-rubriker använder Garamond (däremot inget sagt om storleken). Selektorerna skall åtskiljas med kommatecken. Om en regel innehåller väldigt många olika deklarationer kan man för ökad läsbarhet separera dem på var sin rad: H1 font-size: 24pt; font-family: Garamond, serif; font-style: italic; color: #000066; 7

8 Det spelar dock inte någon avgörande roll hur dina mallar ser ut, bara syntaxen är korrekt! Om du vill infoga kommentarer i dina mallar för ytterligare läsbarhet skall du göra det innanför teckenkombinationerna /* och */. /* Detta är en kommentar */ En kommentar kan sträcka sig över flera rader. Class-attributet Det är fullt möjligt att ge ett och samma HTML-märke flera format. Man skapar då vad man kallar för klasser. Om man exempelvis har behov av att vissa stycken skall ha annat typsnitt än andra stycken, skapar man två klasser till <P>-taggen. p.normal font-family: Times New Roman ; p.special font-family: Verdana; margin-left: 1cm; Man kan sedan använda dessa växelvis i en sida genom att lägga till class-attributet till <P>taggen: <P class= normal >Normal text med Times New Roman</P> <P class= special >Specialtext med Verdana</P> Detta kommer att ge resultatet Här använder jag egenskapen margin-left för att öka indraget till klassen special. Mer om detta längre fram. Man kan även skapa generella klasser som går att applicera på flera HTML-taggar. För att skapa en sådan klass utelämnar man selektorn helt och skriver endast.normal font-family: Times New Roman ; 8

9 .special font-family: Verdana; margin-left: 1cm; På detta vis kan man skapa följande resultat: Då har jag istället skrivit in koden: <p class="normal">normal text med Times New Roman</P> <h1 class="special">specialtext med Verdana</h1> Dvs egenskaperna hör inte längre till en särskild tagg, utan är tillämpbar på alla (nåja, de flesta i alla fall). ID-attributet I många fall är det nödvändigt att definiera regler som skall gälla ett, och endast ett, element i en sida. Så är det förstås om man under skriptkontroll flyttar omkring objekt, eller gör dem osynliga resp. synliga beroende på hur besökaren navigerar i sidan. När man skapar en mall för ett unikt element använder man symbolen #. Ett exempel:  <html> <head> <title>css_4.htm</title> <style type="text/css"></style> </head> <body> 9

10 <i id="normal">normal text med Comic Sans MS.<br> Stilmallen sätter typsnitt och färg, medan märket <I> står för stilen.<br> Till detta sätter jag id="normal" - detta element är då unikt!</i> <p id="special">specialtext med Verdana.<br> Eftersom jag skapat elementet tillhörande <p>-taggen kan inga andra taggar erhålla detta id!</p> </body> </html> Lägg alltså märke till att det översta stycket blir kursiverat pga att jag omsluter texten med <I>taggen. Typsnittet och färgen kommer av det faktum att jag tilldelar det elementet identiteten normal med id= normal. Detta element är då unikt i sidan och jag kan inte tilldela ett annat element samma id. Däremot kan jag byta ut <I> mot <B> och göra samma sak, detta eftersom identiteten normal inte hör till en särskild tagg. Identiteten special däremot hör till <P>-taggen och kan därför inte läggas till någon annan än denna. Än så länge kan denna egenskap verka onödig, men vi kommer senare att använda den och då särskilt tillsammans med <div>-taggen. Bakgrunder Bakgrundsfärg till ett element Du är nu förtrogen med att man i HTML kan sätta bakgrundsfärg och bakgrundsbild till ett dokument eller en tabellcell. En bakgrundsbild kommer att upprepa sig själv och fylla hela webbläsarkroppen eller tabellcellen med en mosaik av bilden. Med CSS kan du sätta färg och bakgrundsbild till i stort sett vilket HTML-märke som helst. Det enklaste exemplet är förmodligen en textöverstrykning och då använder man med fördel en speciell tagg - <SPAN>. Denna har ingen som helst förformattering, utan tanken är att sidförfattaren själv skall ange formatet med en infogad (inline) stilmall. Betrakta nedanstående: Med hjälp av <SPAN>-taggen kan man göra <span style="background-color: yellow">textöverstrykningar</span> på ett enkelt sätt. Den här enkla regeln sätter värdet yellow till egenskapen background-color och resultatet blir 10

11 Det finns tre olika sätt att ange färg dessa är: 1. background-color: fargnamn 2. background-color: #rrggbb 3. background-color: rgb(röd,grön,blå) där fargnamn skall vara något av de fördefinierade orden för färg i HTML exempelvis yellow. I det andra exemplet skall en färgkod anges med en hexadecimal trippel precis på samma sätt som du gjort i HTML förut (dock utan citationstecken). Ett exempel: background-color: # där alla par skall vara från 00 (0 decimalt) till ff (255 decimalt). Slutligen kan man ange färgen också decimalt. Man skriver då exempelvis background-color: rgb(0, 27, 146) där talen för respektive kanal skall vara mellan 0 och 255. Nu är det inte så att <SPAN>-taggen är unik man kan sätta bakgrundsfärg till nästan vilken tagg man vill. Bara för att illustrera detta visar jag ytterligare en rad som skapades med Det går bra att sätta färg till <I style="background-color: yellow">kursiva ord</i> om man vill. Kanske är det mer vanligt att man sätter färg på olika klasser till <P>-taggen, och i samband med det kanske även en ram runt. Det får stycket att stå ut i texten mycket mer. Om du tittar på ser du att alla kodexempel har samma bakgrundsfärg, ram, typsnitt och färg. Detta kan man åstadkomma genom att definiera motsvarande regler till <P>taggen. I det här häftet har alla kodexempel typsnittet Courier New med ett större indrag från vänster och det förenklar förhoppningsvis din läsning det var i alla fall tanken! 11

12 Bakgrundsbild till ett element Det finns med CSS numera möjligheten att sätta en bakgrundsbild till de flesta HTML-märken, på samma sätt som man gör till <BODY> och <TD> i vanlig HTML. Tänk på att en bakgrundsbild kan förhöja utseendet på ett dokument eller stycke, men det kan lika gärna få motsatt effekt. Hur många sidor har man inte sett där texten knappt går att läsa bara för att författaren velat ha en slick bakgrundsbild till sidan? Använd alltså med försiktighet! Ett exempel: Koden som åstadkommer detta är väsentligen <style type="text/css"></style> <p class="bild">hur lättläst är det här?<br>...</p> <p class="farg">lite mer lättläst - fast inte särskilt vackert<br>...</p> <P>Här kommer ett helt vanligt stycke!<br>...</p> Du anger alltså källfilen (värdet) till bakgrundsbilden (egenskapen) med url(filnamn), där filnamnet skall anges utan citationstecken. Olika sätt att lägga bakgrundsbilden Inte nog med att du kan använda bakgrundsbilder till vad som helst, du kan dessutom bestämma hur bilderna skall upprepas, om bakgrunden skall scrolla med dokumentet eller vara fixerat, du kan även bestämma var bakgrundsbilden skall befinna sig. I det här fallet tar jag <BODY>-taggen till min hjälp. Betrakta sidan nedan denna innehåller alla de tre egenskaperna ovan: 12

13 På det här sättet kan man rätt enkelt skapa färgade marginaler som når hela vägen ut till kanten. Var dock noga med hur du presenterar texten i sidan. I det här exemplet skulle det innebära katastrof om den nu svarta texten lade sig över bakgrundsbilden till höger fullständigt oläsbart! Den här sortens blunders kan man gardera sig emot genom att sätta marginaler för stycken. Textformattering Att sätta färg på text Att sätta färg på text är mycket enkelt och vi har redan gjort det ett flertal gånger. Man använder egenskapen color och denna vill ha ett värde på samma sätt som background-color. Egenskapen applicerar på alla HTML-märken och om man då vill sätta färgen på kursiv text kan man skriva: I color: red; /* eller */ color: #ff0000; /* eller */ color: rgb(255, 0, 0); Avstånd mellan tecken Ett knep att få text att synas bättre mitt i ett dokument kan vara att öka avståndet mellan tecknen. Du använder då en egenskap som heter letter-spacing, vilken applicerar till alla märken. Du kan minska avståndet också om du vill, var bara noga med att texten går att läsa. Jag ger två exempel:.narrow letter-spacing: -0.05em.wide letter-spacing: 0.5cm Genom att ange ett negativt värde kommer avståndet mellan två tecken att bli mindre än normalt. Enheten em betyder lite slarvigt den aktuella teckenstorleken, du kan också använda enheterna cm och in (eng inch och betyder tum). Om du använder decimaltal skall du använda. och inte, när du anger decimalerna. Det finns ännu fler enheter, undersök på egen hand! 13

14 Här har jag använt <SPAN>-taggen tillsammans med class-attributet för att ge texterna egenskaper enligt klasserna narrow och wide. Den första raden har normalt teckenavstånd. Linjehöjd Utöver möjligheten att öka avståndet mellan tecken horisontellt kan man också öka radavståndet vertikalt med line-height. Värden kan anges med flera olika enheter cm, in, px, em och så vidare. Ett exempel: p line-height: 0.5in Styckejustering För att sätta styckejustering skall du tilldela egenskapen text-align något av värdena center, left, right eller justify. De tre första känner du till från förut, och den sista betyder marginaljusterad. Då kommer både vänster- och höger marginal att bli raka. Ett exempel: För att sätta justering för exempelvis <P>-taggen kan du skriva en regel så här p.right text-align: right och använda den som vanligt. 14

15 Textdekoration Denna egenskap avser sådant som understrykningar i text. I HTML har du möjlighet att göra text understruken, men med CSS kan du göra text genomstruken eller överstruken. Du kan dessutom tvinga länkar att inte bli understrukna, vilket annars är standard i de flesta webbläsare. Tilldela egenskapen text-decoration något av värdena overline, line-through, underline eller none. Ett exempel: Detta skapas med <a href="css_10.htm" style="text-decoration: none">en länk</a> utan understrykning.<br> <span style="text-decoration: line-through">genomstruken text</span><br> På många sajter nu för tiden använder man helt andra sätt att visa länkar i sidan. Ett sätt är att låta länkarna byta färg när muspekaren står ovanför dem, ett annat sätt är att plötsligt låta den länkade texten få en understrykning etc. För att åstadkomma detta används det som kallas pseudo-klasser (vilka fungerar bäst i IE). Vi kommer till detta lite senare. Ett annat väl beprövat sätt är att göra bilder till länkar och byta ut dessa med ett JavaScript. Det skall vi också lära oss lite senare. Indrag av första raden Indentering, eller indrag av första raden, görs med egenskapen text-indent, vilken tar värden bl. a. i enheterna em, cm och in. Stycket ovan skapades med p text-indent: 2em <p>i många tryckta böcker... Du kan även skapa ett hängande indrag genom att sätta ett negativt värde till text-indent. 15

16 Textomvandling Det finns speciella regler för att skapa text med endast versaler eller gemener, eller kapitäler. Man tilldelar egenskapen text-transform något av värdena lowercase, uppercase eller capitalize (värdet none är också möjligt, fast något onödigt). Jag visar kapitäler, eftersom de andra två alternativen är självklara: Jag har då skapat en regel till <P>-taggen enligt p text-indent: 0.5cm; text-transform: capitalize Kapitäler i IE tolkas så att första bokstaven i varje ord skall vara stor (versal) och de övriga små (i Word 97 kommer alla bokstäver att vara versaler, men de första i varje ord något större). Typsnitt Att sätta typsnitt Vi har redan använt den här egenskapen flera gånger. Man tilldelar egenskapen font-family något av de namn som typsnitten i datorn har. Några möjliga värden är därför Verdana, Arial, Garamond och Courier New. Lägg märke till att man skall sätta citationstecken runt namn som består av flera ord. Om man vill ange en prioriteringsordning för några eventuella typsnitt skall man skilja dem åt med kommatecken. Om jag vill ange ordningen Verdana, Arial, sans-serif skall jag skriva font-family: Verdana, Arial, sans-serif ; Ett tips är att använda typsnitt som säkert finns på de flesta plattformar man vet kanske inte i förväg vilket operativsystem en besökare använder. Om typsnitten du valt inte finns installerat på datorn kommer webbläsaren att visa sidan med standardtypsnittet. Bestäm storleken Den här egenskapen har vi också använt tidigare. För att bestämma storleken på bokstäverna sätter du ett lämpligt värde till egenskapen font-size. Det finns många tillåtna värden för denna egenskap och för att röra till det ser de inte ut som de gör i <FONT>-taggen i HTML. Det finns ett antal fördefinierade konstanter som sätter storleken i de sju storlekar som HTML förfogar över dessa värden är: xx-small, x-small, small, medium, large, x-large och xx-large. Dessutom finns det två relativa storlekar att använda: smaller och larger. Vilken storlek tecknen får beror helt och hållet på vilken storlek som är aktuell omedelbart före det att regeln sätts i bruk. Dessutom kan du sätta storleken på någon av följande form 1. font-size: 120% 2. font-size: 24pt 16

17 3. font-size: 30px 4. font-size: 0.5cm (eller 0.5in) Det andra och det tredje valet använder de två olika enheterna pt (point) och px (pixel). De är inte ekvivalenta, vilket får till följd att ett typsnitt i 12pt inte upptar 12 pixlar på skärmen. Det finns fler enheter också undersök på egen hand! Välj stil Med stil menar man inte typsnitt, utan om tecknena av det valda typsnittet är kursiva eller inte. Genom att sätta något av värdena italic eller normal till egenskapen font-style får du det du önskar. Ett exempel: font-style: italic; Det finns faktiskt ett tredje värde som är nästan identiskt med kursiv stil oblique. Det betyder lutande. På min maskin (win98) och med IE5 kan jag inte se någon skillnad mellan dem. Olika former av fet stil Det finns en egenskap som heter font-weight och denna avser hur feta tecknen skall vara. Du har att tillgå nio olika grader av fetstil, från 100 upp till 900 i steg om 100 åt gången. Denna fina gradering är mer än vad de flesta webbläsare klarar att visa, men tänk då på att stilmallar även omfattar andra media såsom skrivare. På en sådan kan det mycket väl vara synbara skillnader mellan alla grader. Normal text har värdet 400 och fetstilt text 700. Förutom dessa numeriska värden har du konstanterna normal, bold, lighter och bolder att tillgå. De två sistnämnda fungerar precis som smaller och larger gör för storleken, dvs den tidigare fetheten på texten avgör vilket värde som blir aktuellt när regeln sätts i bruk. Ett exempel: font-weight: 700; Ramar och kanter Ramtyp Kanter och ramar runt stycken kan vara bra för att öka läsbarheten i ett stort dokument. På adressen finns ett bra exempel på detta (prova att kopiera sidan och sedan ladda den utan den länkade stilmallen får du se!). Det finns många olika typer av ramar, men inte alla är kompatibla med 4:e generationens webbläsare inte ens IE4. Jag tar upp några av de ramar som finns och vill du veta mer kan du gräva djupare själv. Anta att jag vill skapa olika ramar kring stycken. Jag definierar då lämpligen regler för <P>-taggen. Jag visar först resultatet och sedan koden: 17

18 Koden för denna sida är väsentligen: p.solid border-style: solid p.double border-style: double p.groove border-style: groove p.ridge border-style: ridge p.inset border-style: inset p.outset border-style: outset <P class="solid">solid</p> <P class="double">double</p> <P class="groove">groove</p> <P class="ridge">ridge</p> <P class="inset">inset</p> <P class="outset">outset</p> Vi sätter alltså olika värden till egenskapen border-style. Färg och bredd Du kan även sätta färg och bredd på en ram med border-color och border-width. Ett exempel: Mallen som skapar detta ser ut så här: p.inset 18

19 border-style: inset; border-color: yellow; border-width: 10px; Värdena till egenskapen color skall anges som förut. Bredden kan anges med flera olika enheter såsom px, pt, cm, mm, in. Använd den du har bäst kontroll över. Egna ramtyper Det finns möjlighet för dig att skapa helt egna ramtyper i det avseendet att ramens fyra olika delar kan sättas helt separat från varandra. Du kan alltså sätta övre kanten i en helt annan typ än den högra och så vidare. Här lämnar jag över till självständig läsning förutom ett enda exempel: p.ram border: solid yellow 10px; border-right: double black 20px; margin-left: 0.5cm; Här ser du hur jag gjort kraftiga förkortningar i mallen. När mallar blir stora och klumpiga finns det faktiskt snabbare sätt att definiera dem. Istället för att skriva p.ram border-style: solid; border-color: yellow; border-width: 10px; skriver jag p.ram border: solid yellow 10px vilket är mycket enklare. Hur vet man när man kan göra sådana förkortningar? Med lite träning lär du dig snart se mönstret! Marginaler Marginaler har du sett redan, särskilt då den vänstra: margin-left. Marginalerna sätter gränserna för hur nära varandra olika element kan komma. Men det finns också möjlighet att sätta de andra tre: top, right och bottom. Du kan sätta var och en för sig så här: 19

20 p.marginal margin-top: 10px; margin-right: 2em; margin-bottom: 0.5cm; margin-left: 15%; eller sätt dem alla på en gång (med ovan nämnd ordning) med p.marginal margin: 10px 2em 0.5cm 15% Enheterna bör vara bekanta vid det här laget Fyllning Har likartad funktion som marginal, men sätter mer precis avståndet från kanterna i ett element till innehållet i just det elementet. Du kan göra på precis samma sätt som ovan, byt bara ut margin mot padding! Används ofta i samband med tabeller, där man då kan bestämma över de fyra olika fyllningarna padding-top, padding-right, padding-bottom och padding-left. Kom ihåg att man med HTML endast kan bestämma en och samma padding för samtliga cellmarginaler. Listor Man kan med stilmallar själv definiera vilken symbol som skall användas i exempelvis punktlistor. I HTML kan du styra över de få typer som finns (disc, circle, square), men här kan du dessutom sätta en bildfil som listsymbol. Följande listtyp skapades med koden ul list-style-image: url(list_mark.gif) Sedan är det bara att skapa en lista precis som vanligt. Om du är intresserad av att använda någon av de tre standardsymbolerna skall du skriva exempelvis ul list-style-type: square Om du å andra sidan vill bestämma hur uppräkningen visas i en ordnad lista <OL>, skall du välja något av värdena decimal, lower-alpha, upper-alpha, lower-roman eller upper-roman. Som i 20

Visa mer