En introduktion till Stilmallar eller Cascading Style ... · 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

Dynamisk HTML: Ulf Tornert En introduktion till stilmallar (CSS) [email protected]

? 2002 Ulf Tornert 1

En introduktion till Stilmallar eller

Cascading Style Sheets (CSS)



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 ............................................................................................................................................................29



Exempel nr 1 .......................................................................................................................................................................29 Exempel nr 2 .......................................................................................................................................................................31 Exempel nr 3 .......................................................................................................................................................................34

Övningsuppgifter ..................................................................................................................................................................35



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 http://www.w3schools.com (följ länken CSS). På http://www.w3c.org 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



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: #000066”>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 font-size. 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!



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 (</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; }



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”; }



.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>



<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



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: #000066 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å http://www.w3schools.com/css 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!



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:



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!



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.



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.



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



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 http://www.w3schools.com/css/css_syntax.asp 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:



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



{ 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:



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



ol {list-style-type: decimal} Förutom image och type har list-style ytterligare en egenskap: position. Denna kan sägas ge två möjligheter på indraget i listan, eftersom som den för värdet inside låter listsymbolen “vara en del av” resten av texten i det listelementet. För värdet outside är listan som vanligt. Först skapar jag mallen för en lista

ul {list-style-image: url(list_mark.gif); list-style-position: inside} Därefter skapar jag två listor. I den andra lägger jag till en infogad mall, vilket endast ändrar på position.

<ul style="list-style: outside"> Sidan ser ut så här:

Dimensionering och presentation av element

Storleken på ett element När man skapar sidor med komplext innehåll och struktur är det tacksamt om man kan säkerställa exakt hur stora alla ingående element skall vara och var de ska visas i sidan. När man skapar stycken med exempelvis <div>-taggen kommer webbläsaren som standard att utöka stycket neråt tills innehållet får plats. Risken är ju förstås att det stycket då kommer att överlappa ett annat element i sidan, vilket oftast inte är önskvärt. Om man vill vara säker på storleken på ett element måste man ange detta explicit. Det är här dina bekymmer börjar på allvar! Det visar sig nämligen att de egenskaper som finns i CSS2 för att styra detta inte stöds i nämnvärd utsträckning av vare sig IE eller NN (jag använder för tillfället NN4.7 och IE5.0). Stödet är uselt och man måste därför tänka sig mycket noga för när man skapar sidor med dynamiskt innehåll – innehåll som förändras efter det att sidan laddats. Eftersom den här kursen mest riktar sig mot det grundläggande kommer jag inte att ta upp finesserna – särskilt inte då stödet är magert. För att sätta storleken på ett element tilldelar du egenskaperna height och width önskade värden. Anta att jag vill skapa ett stycke med <div>-taggen som har bredden 200px och höjden 150px, då skriver jag

div {width: 200px; height: 150px; background-color: yellow}



Sedan skapar jag ett stycke

<div>Innehållet här…</div> Resultatet i NN och IE ser ut så här: Trots att jag sätter storleken explicit till 200 * 150 kommer NN att krympa hela stycket, eftersom den tycker att allt ändå får plats på en mindre yta. IE däremot visar hela lagret, men om jag utökar innehållet kommer de båda att utöka lagret neråt tills hela innehållet får plats. Om jag vill motverka detta kan jag lägga till

overflow: auto eller scroll; i mallen, men NN4 kommer inte att känna igen den egenskapen och den blir därför verkningslös! Sorgligt! I IE kommer det i alla fall att se ut på följande vis:

Det är inte särskilt vackert men lagret behåller i alla fall sin initiala storlek. Dessutom är det så att man kan sätta värden till egenskapen clip. Denna bestämmer vilken del av lagret som skall vara



synlig. Om man alltså sätter clip-regionen till lagrets initiala storlek kommer allt ytterligare innehåll inte att visas! En varning: Det innehållet kan inte heller visas – det är förlorat under lagrets nedre kant… Dessvärre är stödet för clip magert och jag upptäckte stora problem med denna egenskap under skapandet av det här häftet.

Placering och synlighet Det fina med CSS är att du kan placera ett element precis vart som helst i sidan, på en exakt pixel. Allt du behöver göra är att sätta önskade värden på egenskaperna left, top och position. Dessa avser förskjutningen – positionen – i sid- och höjdled. Dock kan man göra detta på två olika sätt – man kan sätta position till absolute eller till relative. Det förra avser förskjutningen relativt huvudfönstret (webbläsarkroppen alltså) och det senare avser den (eller de) närmast omgivande ”behållaren”. Som du säkert känner till kan man ju nästla två <div>-taggar inuti varandra. För att demonstrera skillnaden kommer jag att ta upp just ett sådant exempel. För enkelhets skulle skapar jag först ett enda lager med <div> och placerar det på sidan med reglerna position: absolute; left: 200px; top:50px; Det ser ut så här:

Därefter nästlar jag in ett stycke till med <div>. Där sätter jag regeln <div style="position: relative; background-color: blue; height: 100px; width: 100px; top: 20px; left: 20px; color: white"> Då ser det ut så här:



Som du ser är förskjutningen i höjdled större än den i sidled, trots att de båda sattes till 20px. Vad kommer detta sig? Jo, det första lagret har en mening i sig. Denna mening har en tänkt “behållare” som den skrivs in i. Om jag sätter position: relative, så menas det “relativt den, eller de närmast yttre behållarna”. Den behållare som innehåller meningen “Innehåll i första lagret” räknas med här. Alltså kommer det andra lagret att förskjutas 20px i höjdled relativt denna! Krångligt? Ja, men med lite träning blir det bättre. Dessutom kan du här vara betjänt av att läsa mer på egen hand. Om jag istället sätter position till absolute ser det ut så här:

Det vill säga att det yttre lagret (hela <div>-elementet) blir den yttre referensen. Lager som skapas efter varandra, och som alltså inte är nästlade kommer alla att ha webbläsarkroppen som yttre referens. Om jag “lyfter ut” det andra lagret får jag resultatet



vilket är det förväntade. Med egenskapen visibility kan jag även bestämma om lagren skall visas eller inte. Använd värdena visible respektive hidden. För att dölja det första lagret lägger jag till visibility: hidden; i mallen. Då får jag

Senare när vi lärt oss lite JavaScript ska vi ”tända och släcka” lager dynamiskt genom styrning från mus eller tangentbord! Då börjar det bli riktigt roligt!

Överlappande lager – vilket ligger överst? I exemplet med två nästlade lager ovan (css_23.htm) kan man ju undra om det går att ändra på det faktum att det andra lagret ligger ovanpå det första. Det gör det inte! Man kan i det här läget endast bestämma huruvida det andra lagret skall vara synligt eller inte. Det är skillnad med två lager som skapas inuti samma behållare. Men jag vill bara göra följande korta reflektion: Att det andra lagret syns är självklart, eftersom det först och främst är nästlad inuti det första. Sen har ju top och left värden som gör att lagret endast förskjuts något från den övre- respektive vänstra kanten. Vad händer om jag ökar dessa värden kraftigt – låt säga upp till 150px respektive 200px?



Två lager som skapas inuti samma behållare (exempelvis grunddokumentet) får ibland en gemensam yta. Den som syns är den som senast skapades, och lager skapas i den ordning de skrivs in i HTML-dokumentet. För att ändra synligheten på den överlappande ytan mellan två lager skall du sätta var sitt värde till egenskapen z-index för dem. Jag skapar nu två lager i samma behållare och lägger dem något om lott med varandra

Det andra lagret skapas sist i sidan – alltså kommer detta att överlappa det första. Men om jag nu sätter z-index: 1 i det första lagret, och z-index: 0 i det andra kommer rollerna att bytas

Egenskapen z-index tar som värde vilket heltal som helst, även negativa. Det lager som syns är det som har det största värdet. Det finns inget som hindrar att du använder värden som 10, 20 och 30 etc. Det kan vara en idé under utvecklingen av en sida – det är då enkelt att lägga ett nytt lager mitt emellan två existerande utan att ändra deras z-index.

Flytande text kring en bild I HTML är det möjligt att låta text flyta kring en bild – denna egenskap kan du styra med en stilmall också. Den egenskap du då skall använda är float och använd då märket <IMG> som selektor



img {float: left}

Det får texten att flyta fritt till höger om bilden. Tänk på att alla bilder kommer att erhålla denna egenskap, såvida du inte antingen skapar två klasser till <IMG>, eller använder en infogad stil som ändrar egenskapen float explicit.

Pseudo-klasser I CSS finns det fördefinierade klasser till några märken – ett av dem är länken <A>. Dessa klasser kallas pseudo-klasser. Även om det finns flera sådana tar jag endast upp dem som hör till länken (läs mer på egen hand). Du har säkert sett hur länkar byter utseende när man pekar på dem med musen. Det gamla sättet att göra det (och som fungerar i de flesta webbläsare) var att skapa bildlänkar, och ändra källfil då musen pekade på dessa. Med CSS kan man numera ändra på länkarnas utseende direkt istället! Fördelen är uppenbar – man slipper onödiga nedladdningar av många bildfiler. Nackdelen är i och för sig minst lika uppenbar – det fungerar inte i NN4! Sorgligt igen! Men jag visar ändå hur man gör, eftersom det är både användbart och snyggt. Det bör fungera i NN6, jag har inte kontrollerat detta i skrivande stund. Det finns fyra pseudo-klasser till <A>-taggen – du skapar regler till dem så här:

a:active {egenskap: värde} a:hover {egenskap: värde} a:link {egenskap: värde} a:visited {egenskap: värde}

Anta att du vill ha ljusgröna länkar i ditt dokument. När någon klickar en länk skall den bli svart, besökta länkar skall också vara svarta. När besökaren pekar på en länk (utan att klicka) skall den byta färg till röd. Då kan du använda följande mall

a:link {color: green} a:active {color: black} a:visited {color: black} a:hover {color: red}



Pseudo-klassen link står för en vanlig länk, active för den länk som är klickad, visited står för besökt länk och hover står för den länk som musen pekar på (hover betyder “sväva” på engelska). Man kan också låta länkar vara utan understrykning som standard, och sedan göra en understrykning då musen pekar på dem. Ändra mallen till

a:link {color: green; text-decoration: none} a:active {color: black; text-decoration: underline} a:visited {color: black; text-decoration: underline} a:hover {color: red; text-decoration: underline}

Färgvalet är kanske inte helt lyckat här – ändra det till något användbart!

Ändra muspekarens utseende Om du använder ett grafiskt operativsystem (vem gör inte det nu för tiden?) då vet du att muspekaren har många olika skepnader beroende av vilken situation du befinner dig i. En länk ändrar musen till en hand , en hjälplänk ändrar den kanske till en pil med ett frågetecken bredvid och så vidare. Med hjälp av egenskapen cursor kan du ändra musen så att den bättre beskriver vad som kommer att hända om besökaren exempelvis klickar en länk. Jag visar här de allra vanligaste muspekarna – vill du ha full koll får du undersöka saken själv. cursor: default; hand; wait; help; crosshair;

Pekare:

Om du då vill skapa en hjälplänk och visa motsvarande pekare skall du skriva

<a href=”URL:en” style=”cursor: help”>Hjälp mig!</a>

Färga dina scrollknappar Du har säkert sett hur många sajter har färgade scrollknappar, istället för de gråa, trista som normalt finns i Windows standardmiljö. Att färga scrollknapparna är inte svårt, däremot tar det



ett tag innan man kommer fram till ett heltäckande färgschema som är någorlunda snyggt. Detta eftersom det finns många olika egenskaper att färga och det brukar inte bli så bra att endast färga några och låta bli andra. Scrollknapparna hör i CSS till body-taggen och stilmallen nedan sätter färgerna så som visas på kursens hemsida (http://hem.passagen.se/ulftt).

<style> body { scrollbar-face-color:#000066; scrollbar-track-color:#999999; scrollbar-arrow-color:#cccccc; scrollbar-3dlight-color:black; scrollbar-shadow-color:white; scrollbar-highlight-color:white; scrollbar-darkshadow-color:black; } </style>

Egenskapen face-color sätter färgen på själva scrollknappen, track-color färgar ”spåret” under knappen och arrow-color färgar pilarna. De andra egenskaperna sätter skuggfärger runt de tre föregående och det är här det blir lite klurigt att avgöra vad som är vad. Ett tips är att sätta en egenskap i taget och kommentera bort de andra, så att man säkert vet vad allt står för.

Några enkla exempel Nu har du sett några grundläggande egenskaper i CSS, men det finns mycket, mycket mer! Kom ihåg att mitt mål med det här häftet var att du skulle 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 (plus lite annat smått och gott). Jag hoppas att du lärt dig något. Jag visar i det här avsnittet några enkla sidor med stilmallar, och deras tillhörande kod. Allt för att du skall få ytterligare förståelse för hur det kan gå till i verkligheten. Studera dessa exempel noga så att du är väl förberedd inför nästa avsnitt, då du själv skall skapa de mallar som sidorna (förmodligen) är uppbyggda av. Men än så länge har du sidor och kod listade tillsammans.

Exempel nr 1 I det här exemplet använder jag tre uppsättningar regler – en för rubrik <H1> (jag återanvänder den från sidan 5), och två för <P>-taggen tillsammans med class-attributet. Den ena klassen, som jag ger namnet vanlig, har ett indrag från vänster på 1 cm och det använder Verdana i 10 punkter. Dessutom sätter jag egenskapen width till 600px. Det innebär att varje <P CLASS=”vanlig”>-tagg kommer att uppta 600 pixlars bredd. Nästa klass får namnet kod. Denna använder Courier New i 10 punkter och djupblå färg (navy). Bakgrundsfärgen är tan. Stycket har ett indrag från vänster på 2cm och det är 450 pixlar brett. Dessutom har det en ram av typen double med storleken 10 pixlar. Ramens färg är densamma som typsnittet inuti (navy). Sidan ser ut så här:



och koden till sidan är

 <html> <head> <title>exempel_1.htm</title> <style type="text/css"></style>



</head> <body bgcolor="#FFFFFF" text="#000000"> <h1>Stilmallar gör livet enklare?</h1> <P class="vanlig">På många olika sajter runt om i världen kan man se hur stilmallar används effektivt för att öka läsbarheten och enhetligheten på sidorna. Ett av tricken är att skapa stycken med olika bakgrund och ram och så vidare. Kommer du ihåg hur man gör?</P> <P class="kod">Kod brukar ofta skrivas med Courier New, eller annat skrivmaskinsliknande typsnitt. Det är en tradition som jag låter leva vidare i det här häftet! </P> <P class="vanlig">På många olika sajter runt om i världen kan man se hur stilmallar används effektivt för att öka läsbarheten och enhetligheten på sidorna. Ett av tricken är att skapa stycken med olika bakgrund och ram och så vidare. Kommer du ihåg hur man gör?</P> </body> </html>

Exempel nr 2 I det här exemplet får du träna dig på att skapa lager med <div>-taggen, placera ut dem i sidan och ge dem korrekta z-index. Från början skapar du bara tre olika element med symbolen #. Dessa skall senare användas tillsammans med <div>-taggen och id-attributet. Sätt bredd och höjd till 200 * 200 px och ge lagren bakgrundsfärgerna gul, röd och blå. Se till att sätta position: absolute för samtliga och sätt därefter top och left så att lagren placerar sig som du ser nedan. Rubriken återanvänder mallen från förra exemplet, men här har jag placerat den med en infogad stil direkt i <H1>-taggen. Eftersom webbläsaren lägger ut lagren i den ordning de skapas kommer det gula ligga underst, det röda i mitten och det blå överst. Nu har du sidan till vänster nedan. Sätt nu explicita z-index för de respektive elementen i sidan så att resultatet blir det till höger nedan!



Här är koden

 <html> <head> <title>exempel_2a.htm</title> <style type="text/css"></style> </head> <body bgcolor="#FFFFFF" text="#000000"> <h1 style="position: absolute; top: 280">Stilmallar gör livet enklare?</h1> <div id="no1">Lager nr 1</div> <div id="no2">Lager nr 2</div> <div id="no3">Lager nr 3</div> </body> </html>

För att åstadkomma ovan nämnda förändring lägger jag till följande



 <html> <head> <title>exempel_2b.htm</title> <style type="text/css"></style> </head> <body bgcolor="#FFFFFF" text="#000000"> <h1 style="position: absolute; top: 150">Stilmallar gör livet enklare?</h1> <div id="no1">Lager nr 1</div> <div id="no2">Lager nr 2</div> <div id="no3">Lager nr 3</div> </body> </html>



Exempel nr 3 I det här sista exemplet skall du få tillverka en enkel mall och spara den som en textfil med ändelsen css. Därefter skall du göra två sidor som båda länkar denna mall. Övningen kommer att ge dig färdigheten att skapa externa stilmallar, för att sedan kunna länka dessa till så många sidor du själv önskar. 1) Starta Anteckningar 2) Skriv in en mall som definierar följande regler:

a) Bakgrundsfärgen i sidan skall vara #000066 b) Text skall ha vit färg i Verdana storlek 10pt (om inte annat anges) c) Länkar skall vara gula, utan understrykning. När man pekar på dem skall

understrykningen visas. Besökta länkar skall vara vita, utan understrykning. d) Definiera en klass till <P>-taggen som använder typsnittet Comic Sans MS, om det inte

finns skall webbläsaren automatiskt välja Courier New – båda i storleken 12pt. 3) Se till att dokumentet inte innehåller något annat än regler till stilmallen 4) Välj Spara som… 5) Skriv in filnamnet ”min_stilmall.css” med citationstecken runt! Klart! När du nu har skapat din externa mall skall du tillverka de två sidorna nedan (eller liknande). Hur man länkar en mall gick jag igenom under rubriken ’Att länka en mall’ på sidan 7.

I punktlistan ovan finns tre länkar. Att de inte lyser gula just nu beror på att de länkarna är ”cachade” i browsern – alltså besökta. Då kan du lägga märke till att de är just vita och utan understrykning. I nästa sida skapar jag helt nya länkar för att visa hur det ser ut.



Koden för sidorna behöver jag nog inte lista, men här är stilmallen

body { background-color: #000066; color: white; font-family: Verdana; font-size: 10pt; } a:link {color: yellow; text-decoration: none} a:visited {color: white; text-decoration: none} a:hover {text-decoration: underline} p.comic { font-family: "Comic Sans MS", "Courier New"; font-size: 12pt; }

Övningsuppgifter De här övningsuppgifterna kan vara till hjälp för dig att testa dina kunskaper. Jag vill att du verkligen försöker lösa allihop på egen hand, men om du verkligen fastnar finns uppgifterna på adressen http://www.gy.varmdo.se/~ulftt. 1. ovnuppg_1.htm

Försök att skapa sidan nedan. Mallen för hur man lägger ut bakgrundsbilden kan du återanvända från sidan 13, men se till att text inte läggs över bilden – oavsett hur



webbläsarfönstret ser ut! Bilden heter mystone.jpg och finns på ovan nämnda adress. Den har måtten 200 * 120 (bredd * höjd).

2. ovnuppg_2.htm Skapa en mycket enkel stilmall med regeln H1 { font-family: Garamond; font-size: 24pt; color: navy; } och spara den som en textfil i namnet stilmall_2.css. Skapa nu en sida som länkar den mallen och visar en H1-rubrik. Skapa sedan en sida till (ny fil) som länkar mallen och som dessutom bäddar in en ny regel i <style>-taggen: H1 {font-family: Arial}. Skapa nu två stycken H1-rubriker, där den andra rubriken skall få en infogad (inline) regel: style=”color: olive”. Detta för att du skall få en känsla för hur prioriteringsregler går till!

Var noga med att du förstår varför det blir som det blir!



3. ovnuppg_3.htm Den här uppgiften behandlar ramar och kanter. Försök att återskapa sidan nedan. Färgerna på kanterna är yellow och navy. Tänk på att man kan sätta de fyra olika ramkanterna var för sig. För att sätta en och samma typ av kant runt hela elementet kan du använda egenskaperna border-style, border-width och border-color. För att komma åt exempelvis den högra kanten skall du ändra på border-right-style och så vidare (de andra kanterna heter top, bottom och left).

4. ovnuppg_4.htm

Skapa två lager med <div>-taggen. Tilldela dem var sitt id, exempelvis first och second. Skapa en mall som definierar två id-mallar med symbolen #. Reglerna skall skapas så att styckena skall kunna flyttas runt i sidan till en plats som du väljer. Sätt olika bakgrundsfärg till styckena så att du enkelt ser vilket som ligger överst. Ändra på koden i dokumentet (ordningen på <div>-taggarna) så att den eventuellt överlappande ytan visas växelvis mellan de båda – antingen visas first överst, eller så visas second. Prova sedan att ändra z-index för dem så att den överlappande ytan är bestämd oavsett i vilken ordning lagren skapas. Prova också att göra det ena stycket helt osynligt. Ett exempel kan se ut så här:

Documents

En introduktion till Stilmallar eller Cascading Style ... · 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