WEBBUTVECKLING CSS. Formatmallar - CSS

Storlek: px

Starta visningen från sidan:

Download "WEBBUTVECKLING CSS. Formatmallar - CSS"

Ida Martinsson
för 8 år sedan
Visningar:

1 betyder Cascading Style Sheets, vilket i svensk översättning blir ungefär formatmallar (inte riktigt, men nästan...). Anledningen till att man använder är att det är ett lätt sätt att skilja utseende och innehåll.

2 Det finns olika sätt att använda på. 1. Med hjälp av attributet style 2. Genom att använda taggen <style> 3. Via en extern css-mall som länkas till html-sidorna

3 Med hjälp av attributet style : Om du vill ändra utseendet på en viss tagg, tex <p> så kan du skriva tex: <p style= color:red >Röd text<p> Alla övriga <p>-taggar i dokumentet kommer se ut som vanligt, utom den ovan.

4 Exempel: <p> Vanlig text, men helt plötsligt </p> <p style= color:red >röd text,</p> <p> sen blir det som vanligt igen. </p>

5 Resultat: Vanlig text, men helt plötsligt röd text, sen blir det vanligt igen

6 Genom att använda <style>-taggen: Om man vill göra ändringar för samtliga taggar på en sida är det bättre att lägga in formatmallen i dokumentets sidhuvud (i headtaggen, alltså).

7 Exempel: <html> <head> <style> p {color: red;} </style> </head> <body> <p>den här texten blir röd.</p> <p>den här texten med.</p> </body> </html>

8 Resultat: Den här texten blir röd. Den här texten med.

9 Via en extern css-mall: Det vanligaste och bästa sättet att arbeta med css är att ha en extern css-mall. En stor fördel: Du kan bestämma utseendet på flera sidor samtidigt, genom att skriva in definitionen bara en gång. Dessutom kan du koncentrera dig på utseende i css-mallen och på innehållet i htmldokumentet, utan att blanda ihop det.

10 Via en extern css-mall: Du använder taggen <link> i html-dokumentets sidhuvud för att koppla ihop htmlsidan med css-mallen. Du använder två attributet ska vara rel och href Värdet för rel är stylesheet, och för href skriver du in namn och adress till css-filen. Exempel: <head> <link rel= stylesheet href= mall.css > </head>

11 Via en extern css-mall: Du kan alltså koppla fast hur många sidor du vill till en och samma cssmall. Smidigt..css.html.html.html.html.html.html.html

12 Via en extern css-mall: I mallen skriver du in samtliga definitioner du vill använda för varje tagg. Här har vi definierat hur taggarna <h2> och <p> ska se ut. h2 { font-family: garamond; color: blue; } p { font-family: verdana; color: red; background-color: black; }

13 Via en extern css-mall: Om man nu skulle vilja ha tex två olika typer av stycken (ett vanligt och ett kursiverat) i sin text, så är det möjligt. Genom att använda attributet class till olika taggar - i det här fallet till <p>-taggen som ju är till för textstycken. Värdet för class-attributet kan vara nästan vad som helst, men det är smart att använda värden så att man själv förstår vad attributet gör; I det här fallet är värdet kursiv är smartare än värdet sten till exempel (men båda kommer funka). Exempel: <p class= kursiv >Kursiv text</p>

14 Via en extern css-mall: Om det här ska fungera så måste såklart class-attributet vara definierat i css-mallen. I vårt exempel skulle det se ut så här: p {font-family: verdana; color: gray; } p.kursiv { font-style: italic } Det här gör att vi dels bestämmer hur den vanliga <p>-taggen ska se ut, dels hur vår <p class= kursiv >-tagg ska se ut.

15 Via en extern css-mall: Vi kan nu formatera texten på två olika sätt. Såhär ser koden ut: html-dokument <html> <head> <link rel= styesheet href= mall.css > </head> <body> <p>vanlig text utan konstigheter</p> <p class= kursiv > Kursiverad text </p> </body> </html> css-dokument (mall.css) p {font-family: verdana; color: gray; } p.kursiv { font-style: italic }

16 Via en extern css-mall: Resultatet Vanlig text utan konstigheter Kursiverad text

17 Arbeta vidare!

18 Användbara taggar: <div> & <span> Två mycket användbara taggar - som egentligen inte gör något. Genom att använda <div>-taggen runt ett stycke (med rubrik, text etc.) och kombinera den med attributet style, så kan du formge ett textstycke. <div> används alltså bara för att påverka utseendet på en viss del av sidan. <span> gör exakt samma sak, men används för att påverka vissa delar inne i en text, tex. göra två ord mitt i texten kursiva.

Relevanta dokument

Övning 1 Vi börjar med en vanlig html-fil där html används för både innehåll och utseende:

Uppsala universitet Institutionen för utbildning, kultur och medier IKT A HT 2009 Monica Langerth Zetterman 2009-09-23 Testa stilmallar Övning 1 Vi börjar med en vanlig html-fil där html används för både