Introduktion

1. Inledning

Cascading Style Sheets, eller CSS som det förkortas, tillhör den senare tekniken när det gäller konstruktion av webbsidor. Detta infogas i HTML-koden och fungerar alltså inte fristående. Med denna teknik kan vi bl.a. uppnå effekter som inte annars var möjliga.

Det finns 2 standarder, CSS 1 och CSS 2. Den första standarden CSS 1, kom i december 1996 och denna kompletterades i maj 1998. Det du behöver är som lägst Internet Explorer 4 eller Netscape Navigator 4 installerat i din dator. En fördel är att ha båda, då det är bra att kunna jämföra resultatet av koden mellan dem.

2. Varför CSS?

Det finns flera anledningar till varför vi skall lära oss denna nya teknik. En anledning är att detta blir mer och mer vanligt och att det tillhör framtidens sätt att skriva kod på. En annan anledning är att det idag blir allt vanligare med många hemsidor. Ett företag kan ha 50 sidor inom sin domän, för att nämna ett exempel. Om vi vill ändra, låt oss säga bakgrundsfärgen, måste vi ändra i HTML-koden på 50 ställen. Dessutom måste vi kanske även ändra textfärgen... Men med Cascading Style Sheets kanske det räcker med att istället ändra på 1 ställe. Det är lite skillnad!

Men det som talar emot CSS för tillfället är att Netscape och Internet Explorer tolkar kodena lite olika och att tekniken ännu inte fått full genomslagskraft. Med detta menar jag att webbläsarna inte stöder allt och att de ibland stöder lite olika saker. I Netscape liksom i Internet Explorer verkar det finnas en del buggar.

3. Hur infogar jag CSS?

Det finns 3 olika sätt att infoga detta till våra webbsidor.

3.1 Fristående dokument

Det första alternativet är att skapa ett fristående dokument med CSS koder. Ett dokument som vi döper till *.css och som kan styra alla de sidor som vi så önskar. Inom HEAD sektionen i HTML koden för varje enskild webbsida hänvisar till detta dokument. Skall en sida inte styras av dokumentet, hänvisar vi inte till dokumentet. När vi senare skall ladda upp våra sidor till Internet, laddas denna upp också men registreras inte i sökmotorer.

I praktiken ser "hänvisningskoden" eller det första sättet ut så här:

<head> <title>Övningar</title> <link rel="stylesheet" type="text/css" href="sv.css"> </head> <body> Sidan som vanligt </body>

Det fristående dokumentet vi vill hänvisa till här heter sv.css och kan ha följande utseende: Klicka här för att se sv.css. Observera att sidan med exemplet är skapat som en webbsida, gör inte så själv. Skriv CSS-koderna i Anteckningarna, så som du ser dem i exemplet och spara till *.css

3.2 Inom head

Det andra sättet är att skriva dess koder direkt på sidan i head-sektionen. Koderna ser exakt likadana ut som i det fristående dokumentet. Nu kommer vi att skriva så här istället:

<head> <title>Övningar</title> <style type="text/css">  </style> </head> <body> Sidan som vanligt </body>

Som du ser ett lite annorlunda sätt att koda på än HTML.

3.3 Direkt i textavsnittet

Det tredje sättet är att skriva direkt i HTML koden i det avsnitt där det skall gälla. Det handlar alltså enbart om en ändring i förhållande till det övriga dokumentet, just på ett speciellt ställe. Då kan det se ut så här:

<span style="font-family: 'Times New Roman', Arial, Verdana"> ett textavsnitt eller ett enskilt ord </span>. Observera att vi använder style här istället.

Det finns en skillnad mellan dessa olika alternativ. Ett fristående dokument gäller för alla webbsidor som jag önskar och ändringar här, avspeglar sig på alla dessa sidor. I det andra och tredje alternativet gäller CSS koderna bara just för den webbsida på vilken de står. De kan alltså inte gälla för andra sidor. En ändring i koden här, påverkar bara en sida.

4. Förklaring av "koden"

Vi har i och med ovanstående exempel fått inblick i sättet att koda i CSS. Som du ser är "taggarna" borta och ersatta med klamrar, vilka markerar början och slut. Vi har kolon mellan kodernas attribut och värdet. Vi har också semikolon emellan varje nytt attribut med dess värde. Det liknar till en del sättet vi skriver Java-Script i. Slutligen har vi detta: . Om en browser inte stöder CSS, kommer alla dessa koder att synas i förstret, vilket är inte så lyckat. Men detta förhinras i och med dessa pilar. Det är ett meddelande till browsern att hoppa över koderna, som den inte förstår.

Selector {egenskap: värde;}

Inom style har vi i CSS koden skrivit body, h1 m.m. Dessa kallar vi för selektorer på fackspråk. Egenskaper är ex. font-style, font-size och color. Värden blir en precisering av egenskaperna. Egenskapen och värdet kallar vi för en deklaration. Deklarationen och selectorn kallas för en CSS regel. Ett element slutligen, kan bestå av: <h1>xxx</h1>, d.v.s. en öppningskod, ett innehåll och en avslutningskod.

5. Kärnan i systemet

Förstår du det jag talar om nedan, har du kommit en bra bit in i CSS. Detta är kärnan i systemet!

Vi har HTML koder som body, li, dt, dd, h1, h2, h3 m. fl. Vi kan bestämma egenskaperna för dessa inom en style kod inom sektionen head. Vi kan bestämma vilket typsnitt de skall ha, textfärg, textstorlek och vilken marginaljustering de skall ha (center, left, right, justify) m.m. I HTML-koden skrivs dessa sedan som vanligt och får på webbsidan angivna egenskaper. Inom vanlig HTML tilldelas annars ex. h1 en viss förutbestämd stil.

Har vi skrivit en lite längre text som denna, behöver vi inte gå in och ändra ex. h2 rubrikernas storlek eller utseende på en massa ställen, utan enbart i style koden. Det som står där liksom "refererar till" själva dokumentet.

Sedan kan vi ange egenskaper för vissa avsnitt i texten. Inom style kan vi skriva ett kommando och ange egenskaperna för detta. Det kan stå ex. .text eller .part1. Sedan märker vi ut de avsnitt i texten som skall ha dessa egenskaper vi definierat, ex. <div class="part1">xxx</div>. Som du ser har jag själv hittat på namnet .part1. Vi kan dessutom ange egna selectorer om vi vill och friheten är alltså större än i vanlig HTML! Ovan talade jag om ex. h1 och när denna står inom head, kallas denna för en selector.

6. Vissa HTML-koder försvinner

Vi skrev att denna nya teknik ersätter vissa HTML-koder, men vi har inte preciserat vilka. Attributen till body (bgcolor, text, alink, m.m.) försvinner och kvar blir endast body. När det gäller font och dess attribut, försvinner dessa helt från HTML-koden. Dessa nämns istället inom style i CSS koden. Det är två stora förändringar.

7. Dela in i klasser

Selektorerna kan vi dela in i klasser, d.v.s "underklasser". Om vi vill att vissa h2 rubriker skall ha storlek 14pt och ha röd text. Vissa andra h2 skall vara i 12pt och vara blåa. Vi kan då skriva:

h2.a {font-size: 14pt; color: red;} h2.b {font-size: 12pt; color: blue;}

Vi skriver sedan för resp. h2 rubrik i HTML-koden:

<h2 class=a>Rubrik</h2> <h2 class=b>Rubrik</h2>

Istället för h2.a och h2.b kan vi skriva en kortare version:

.a {font-size: 14pt; color: red;} .b {font-size: 12pt; color: blue;}

Alla klasser nämnda a (class=a) kommer att vara i 14pt och röda, oavsett vilken HTML kod vi väljer skall stå innan class (p class=a, h2 class=a, span class=a). Vi skapar alltså lite mer frihet och flexibilitet.

En styrka med denna nya teknik är att vi kan skapa våra egna selektorer vilka vi anger egenskaperna för. Vi återger en dialog mellan två människor; Anton och Bertil. Antons kommentarer skall vara kursiva, medan Bertils normala. Vi skriver inom style:

div.Anton {font-style: italic;} div.Bertil {font-style: normal;}

I den löpande texten skriver vi för Anton och Bertil:
<div class="Anton">Antons kommentarer...</div>
<div class="Bertil">Bertils kommentarer...</div>

class="Anton" refererar till de selektorer vi skapat för Anton och ger en kursiv text.

Har vi ett större textavsnitt som vi vill skall vara av ett visst typsnitt och färg, kan vi skriva:

div {font-style: normal; font-family: Verdana; color: black; }

och i HTML-koden skriver vi:

<body> <div> Text, text, text i massor... </div> </body>

Här har vi gjort div till en selector och angivit vissa egenskaper, utan att skapa några underklasser. Vi kan ange div istället för selectorn body om vi vill.

Vi kan också innesluta ett visst textavsnitt inom <p>xxx</p> och göra p till en selector. Används främst till ett mindre avsnitt inom en större helhet. Med andra ord finns det en stor frihet när det gäller vad vi vill döpa våra selectorer till.

Slutligen tar jag upp detta med id selectorer. Som selector kan jag skriva #stefan1. Stefan1 blir ett id nummer som skall förknippas med avsnittet inom body sektionen. Endast ett avsnitt i texten eller på sidan kan ha denna identitet. Jag skulle också kunna skriva p#stefan1, div#stefan1 eller span#stefan1, men vanligast är att inte skriva något innan #.

Beroende på vad vi skriver som selektor, kan vi skriva <span id="stefan1">Mitt namn är...</span>. Nu får detta avsnitt valda värden.

8. Arv

Slutligen nämner jag några ord om arv. I CSS ärver elementen egenskaperna från "föräldrarna". Om jag i selektorn body anger bakgrundsfärg, typsnitt och teckenstorlek, ärver ex. selektorn div dessa, om jag inte anger annat!

Vad händer om jag enbart anger annat typsnitt i selektorn div än det angivna i body. Samtidigt som jag i texten inom avsnittet div skapar avsnittet span? Då kommer avsnittet span att ärva typsnittet från div och de andra egenskaperna angivna i selektorn body.

På grund av arvet, är det viktigt att även avsluta de HTML-koder som inte behöver avslutas. Gäller inte <br>, men väl ex. <li> i listorna.





kontakt	© Stefan Dahl�n	S�ndag 20:e juli 2008