Uppgift 2a

Ett style sheet är en deklaration med visningsregler. Det ger information till anpassade användaragenter om hur man formaterar ett XHTML-, HTML- eller XML-dokument. Cascading style sheets, förkortas CSS, och där termen "cascade" syftar på förmågan hos flera formatmallar att samverka för att skapa det slutliga utseendet på dokumentet.
Idag finns det två versioner av standarder för stilsättning av webbdokument, CSS 1 och CSS 2 (CSS 3 är på gång). Dessa standarder lägger riktlinjer för CSS-syntaxen och stöds till olika grad av olika webbläsare. Varje CSS-förklaring specificerar hur man formaterar antingen ett element eller en grupp element. CSS:er kan även innehålla kommentarer.
Genom att separera ett dokuments stil från dess struktur, får man en mer begriplig och överskådlig kod. Detta gör även ändringar av stilsättning mycket enklare, då man bara behöver ändra på ett enda ställe, nämligen i css-filen, och slipper rota i koden i varje enskilt dokument.
CSS 2 är en standard för att stilsätta dokument som ska visas i vanliga webbläsare. Denna tutorial går igenom de olika egenskaperna för stilsättning enligt CSS 2. Stilsättningen är statisk vilket innebär att sidan inte förändras via JavaScript/OM. Klicka på länkarna nedan för att komma till respektive sektion:

Bakgrund

background
Specificerar bakgrunden i ett dokument. Används för att bestämma hela sidans bakgrund (samtliga background-egenskaper) i en enda deklaration.

background-attachment
Bestämmer om bakgrunden skall vara fixerad eller om den ska scrolla när sidan gör det.

background-color
Bestämmer bakgrundsfärgen. Det kan vara en färg eller två färger som blandas ihop. Färgerna kan specificeras med ett namn (green) eller med ett RGB-värde (kan anges i hex "#FF02CC", i procent "80%, 20%, 0%" eller efter värde "255,0,0").

background-image
Bestämmer en bakgrundsbild med hjälp av en URL (absolut eller relativ), t.ex.:
background-image: url (yellow_fabric.gif);

background-position
Specificerar den initiala platsen för bakgrundsbilden med hjälp av två värden, vilka definieras som ett procenttal (horisontalt, vertikalt), en absolut distans (i en måttenhet, horisontellt sedan vertikalt) eller genom två av de tillgängliga nyckelorden, t.ex.:
background-position: top left;

background-repeat
Bestämmer om bilden ska upprepas för att fylla sidan eller elementet. Upprepning av bilden kan styras med hjälp av värden (kan upprepas i endast en riktning eller inte alls). Som standard upprepas bilden i båda riktningarna.

Enheter

Absoluta enheter
Användande av absoluta mått kräver kännedom om visningsmekanismen, t.ex. sorten av skrivare, typen av bildskärm etc.
"cm" - anger måttet i centimeter
"in" - anger måttet i tum
"mm" - anger måttet i millimeter
"pc" - anger måttet i picas (1 pc motsvarar 12 pt)
"pt" - anger måttet i typsnittspunkter (1 pt är lika med 1/72 tum = 72 pt på 1 tum)

Relativa enheter
Användande av relativa mått är att föredra, då dessa inte kräver nägon kännedom om utdatamediet. I IE 4/5 är "em" och "ex" samma som "pt" och "en" är samma som "px".
"em" - är en typografisk term och refererar till storleken på tecknet "m"
"en" - är en typografisk term och refererar till storleken på tecknet "n"
"ex" - är en typografisk term och refererar till storleken på tecknet "x"
"px" - pixels motsvarar en prick på dataskärmen och storleken beror på den inställda upplösningen för skärmen

Färg

color
Anger textfärgen på ett element. Färgerna kan specificeras med ett namn (red) eller med ett RGB-värde (kan anges i hex "#FF02CC", i procent "80%, 20%, 0%" eller efter värde "255,0,0"). Man kan använda fördefinierade systemfärger eller egendefinierade färger.

Standardfärger (Web Safe Colors)
Färg	Färgnamn	Hexadecimalkod	RGB-kod
s	Black	#000000	000,000,000
b	Blue	#0000FF	000,000,255
c	Cyan/Aqua	#00FFFF	000,255,255
g	Gray	#808080	128,128,128
g	Green	#008000	000,128,000
l	Lime	#00FF00	000,255,000
m	Magenta/Fuchsia	#FF00FF	255,000,255
m	Maroon	#800000	128,000,000
n	Navy	#000080	000,000,128
o	Olive	#808000	128,128,000
p	Purple	#800080	128,000,128
r	Red	#FF0000	255,000,000
s	Silver	#C0C0C0	192,192,192
t	Teal	#008080	000,128,128
w	White	#FFFFFF	255,255,255
y	Yellow	#FFFF00	255,255,000

Kantlinjer (Border)

border
Anger egenskaperna för kantlinjerna som finns runt elementet i en enda deklaration. Fungerar på ungefär samma sätt som marginalinställningarna, förutom att den kan göras synlig.

border-color
Anger färgen för de fyra kantlinjerna i en enda deklaration. Genom att istället för färg ange en bilds URL upprepas bilden så att den skapar en kantlinje.

border-style
Anger formatet för de fyra kantlinjerna i en enda deklaration. Möjliga värden är "double", "groove", "inset", "none", "outset", "ridge" och "solid". Standardvärdet är "none".

border-width
Anger bredden på kantlinjerna för elementet i en enda deklaration. Möjliga värden är "thin", "medium", "thick" eller en måttenhet. Standardvärdet är "medium".

Listor

list-style
Definierar hur listobjektet visas. Kan används för att ange alla list-egenskaperna i en enda deklaration.

list-style-image
Definierar en URL till en bild som används som "punkt" eller listmarkering för varje objekt i en lista.

list-style-position
Indikerar om listmarkeringen skall placeras indragen (inside) eller utdragen (outside) i relation till jälva listan. Standardvärdet är "outside".

list-style-type
Definierar den typ av "punkt" eller listmarkering som används före varje objekt i listan (none, circle, disk, square, decimal, lower-alpha, upper-alpha, lower-roman, upper-roman, decimal-leading-zero, lower-greek, lower-latin, upper-latin, hebrew och många fler). Standardvärdet är "disk". Mozilla stödjer användning av fler typer än Explorer.

marker-offset
Definierar avståndet mellan närmaste kantlinjen för en marker box och dess "associated principal box". Kan anges med hjälp av måttenheter eller automatiskt. Denna egenskap fungerar inte i någon webbläsare än.

Marginaler

margin
Används för att bestämma alla marginalegenskaper i en enda deklaration. Värden för marginal anger det faktiska minimala avståndet mellan det aktuella elementet och andra.

Outlines

outline
Outline är linjer som ritas runt visuella element så att dessa skall utmärkas. Skiljer sig från kanlinjer i och med att de inte tar upp utrymme och behöver inte vara rektangulära. Outline används för att bestämma alla outline-egenskaper i en enda deklaration. Fungerar varken i Mozilla eller Explorer.

outline-color
Bestämmer färgen på linjen. Värden "invert" används för att invertera färgen så att den blir synlig oavsett bakgrundfärgen. Fungerar varken i Mozilla eller Explorer.

outline-style
Bestämmer streckformat genom värden "none", "dotted", "dashed", "solid", "double", "groove", "ridge", "inset" och "outset". Fungerar varken i Mozilla eller Explorer.

outline-width
Bestämmer bredden på strecket runt elementet genom värden "thin", "medium", "thick" eller "length" (vilket tillåter egetdefinerat värde). Fungerar varken i Mozilla eller Explorer.

Paddning

padding
Anger avståndet mellan ett elements innehåll och kantlinje. Värden anger det faktiska minimala avståndet mellan det aktuella elementet och andra. Padding används för att bestämma alla padding-egenskaper i en enda deklaration. Kan i Explorer användas för "th" och "td", men inte för "table".

padding-bottom
Bestämmer det nedre mellanrummet mellan elementets kanlinje och elementets innehåll.

padding-left
Bestämmer det vänstra mellanrummet mellan elementets kanlinje och elementets innehåll.

padding-right
Bestämmer det högra mellanrummet mellan elementets kanlinje och elementets innehåll.

padding-top
Bestämmer det övre mellanrummet mellan elementets kanlinje och elementets innehåll.

Pekare (Cursor)

cursor
Anger vilken typ av markör pekaren skall vara. Testa genom att flytta pekaren över orden nedan för att se vad som händer:

Position

bottom
Bestämmer hur långt från nedre kanten som elementet placeras i förhållande till förälderelementet. Fungerar i Explorer endast om man använder elementet "position" och värdert "absolute". Fungerar inte alls i Mozilla.

clear
Tvingar de följande elementen att visas under ett element som är justerat. Normalt skulle de omge det. Möjliga värden är "both", "left", "none" och "right". Standardvärdet är "none".

float
Gör att följande element placeras till vänster eller höger om elementet, istället för att visas under det. Möjliga värden är "left", "none" och "right". Standardvärdet är "none".

left
Bestämmer hur långt från vänster kanten som elementet placeras i förhållande till förälderelementet. Fungerar både i Mozilla och Explorer, men endast om man använder elementet "position" och värdert "absolute".

position
Specificerar positionstypen för ett element. Det finns följande värden, och där standardvärdet är "relative":
"absolut" - elementet kan fixeras i sidans bakgrund på en specificerad plats och röra sig med den
"fixed" - elementet kan fixeras i sidans bakgrund med avseende på en referens
"relative" - elementet kommer att placeras normalt beroende på de föregående elementen
"static" - elementet kan fixeras i sidans bakgrund på en angiven plats, men inte röra sig när sidan rullas

right
Bestämmer hur långt från höger kanten som elementet placeras i förhållande till förälderelementet. Fungerar både i Mozilla och Explorer, men endast om man använder elementet "position" och värdert "absolute".

top
Bestämmer hur långt från över kanten som elementet placeras i förhållande till förälderelementet. Fungerar varken i Mozilla eller Explorer.

z-index
Kontrollerar ordningen för överlappande element och definierar vilket som skall visas "överst". Positiva tal finns ovanför den normala texten på sidan och negativa tal finns under. Ett element med högre z-index placeras alltid ovanpå ett element med lägre z-index.

Selektorer

class
Specificerar ett elements klass. Används för att associera ett element till en klass med visningsegenskaper bestämda i en formatmall (style sheet).

id
Gör att ett element får en unik identitet i dokumentet. Har ersatt "name", men stöds inte i alla webbläsare.

pseudo-selektorer
"a:" och "p:" är så kallade pseudo-selektorer som inte skrivs ut i html-koden. De kännetecknas i stilmallarna av tecknet ":" som står innan stilsättningsattributet, till skillnad från den vanliga stilsättningen då man använder "". "a" förändrar länkens utseende och "p:" skapar typografiska effekter.

a:active
Markera med hjälp av färg när en länk håller på att aktiveras, t.ex. under tiden då användaren har tryckt på länken men innan han har släpt den.

a:hover
Markera med hjälp av färg när en pekare pekar på en länk utan att ha aktiverat den.

a:link
Markera med hjälp av färg länkar som inte besökts av användaren.

a:visited
Markera med hjälp av färg länkar som har besökts av användaren.

Skapar typografisk effekt genom att förändra utseende på första bokstaven i ett ord.

Skapar typografisk effekt genom att förändra utseende på första raden i ett paragraf. Utseende av andra raden är oförändrat.

Storlek

height
Bestämmer den vertikala storleken (höjden) på ett element och skalar elementet om det behövs. Värdet anges som en sträng med måttypen (cm, % etc.).

line-height
Bestämmer minsta radavståndet för block-element och exakta radavståndet för inline-element.

max-height
Bestämmer maximala höjden för ett element. Fungerar i Mozilla men inte i Explorer.

max-width
Bestämmer maximala bredden för ett element. Fungerar i Mozilla men inte i Explorer.

min-height
Bestämmer minimala höjden för ett element. Fungerar i Mozilla men inte i Explorer.

min-width
Bestämmer minimala bredden för ett element. Fungerar i Mozilla men inte i Explorer.

vertical-align
Bestämmer den vertikala placeringen för inline-element och tabellceller. Möjliga värden är "baseline", "sub", "super", "top", "text-top", "middle", "bottom" och "text-bottom". Standardvärdet är "baseline". "text-bottom" fungerar inte i Mozilla.

width
Bestämmer den horisontella storleken (bredden) på ett element ock skalar elementet om det behövs. Värdet anges som en sträng med måttypen (px, % etc.).

Synlighet

clip
Kontrollerar vilken del av ett element som är synligt. Allt som händer utanför clip-området är inte synligt. Denna egenskap är användbar om man exempelvis vill lägga en större bild i ett element den inte ryms i. Kan inte användas med element vars overflow-egenskap är satt till visible. Fungerar i Explorer endast om man använder elementet "position" och värdert "absolute". Fungerar inte alls i Mozilla.

display
Bestämmer om och hur ett element skall återges. Kan ha många olika värden, som "none", "inline", "block", "compact", "marker", "list-item", "table" mm. Värdet "none" innebär att elementet inte återges, medan värdet "inline" innebär att elementet återges på en och samma rad. De flesta värden verkar fungera tillsammans med olika element, både i Mozilla och Explorer.

overflow
Kontrollerar hur ett förälderelement visar sitt innehåll om detta innehåll inte har samma storlek som förälderelementet. Det finns följande värden, och där standardvärdet är "visible":
"auto" - elementet kommer att anpassas automatiskt efter innehållet
"hidden" - innehållet ändrar inte storlek och endast en del kommer att vara synligt
"visible" - förälderelementet visar rullningslister, så att hela innehållet kan visas genom rullning
"scroll" - har samma effekt som "visible"
Fungerar på olika sätt i Explorer och Mozilla.

I många ordbehandlingsprogram kan man välja ett namngivet format från en lista och använda det på ett stycke eller en annan text. I Word har man till exempel format som Rubrik1, Brödtext och Sidfot, och man kan även definera egna. I CSS kan man på liknande sätt hitta på ett format och sedan namnge det för senare användning i ett dokument.

visibility
Bestämmer om ett element skall visas eller döljas på sidan. Element som döljs tar fortfarande upp samma mängd utrymme, men återges transparent. Kan användas för att dynamiskt visa endast en av flera överlappande element. Det finns följande värden, och där standardvärdet är "visible":
"visible" - elementet är synligt
"hidden" - elementet är osynligt
"collapse" - kan användas i tabeller för att ta bort en rad eller en kolumn utan att påverka tabell-layouten. Tillsammans med andra element har samma effekt som "hidden".
Fungerar både i Explorer och Mozilla, utom "collapse" som endast fungerar i Mozilla (testad tillsammans med elementet "p").

Tabeller

border-collapse
Bestämmer en tabells kantlinjemodell. Möjliga värden är "collapse" och "separate". Fungerar i Explorer men inte i Mozilla.

border-spacing
Bestämmer avståndet mellan tabellers celler. Kan inte tillämpas separat för endast rader, kolumner, radgrupper eller kolumngrupper. Det är möjligt att ange ett eller två värden som specificerar avståndet. Avståndet kan dock inte vara negativt. Fungerar i Mozilla men inte i Explorer.

caption-side
Bestämmer placering av tabellrubriken, genom värden "bottom", "left", "right" och "top". Standardvärdet är "top". Fungerar varken i Mozilla eller Explorer.

empty-cells
Bestämmer om tomma celler och celler utan synligt innehåll skall ha kantlinjer eller inte. Möjliga värden är "hide" och "show". Möjlig endast ihop med alternativet "separate" för border-collapse. Fungerar varken i Mozilla eller Explorer.

table-layout
Bestämmer algoritmen som används för tabell-layouten. Möjliga värden är "auto" eller "fixed". Fungerar i Explorer men inte i Mozilla.

Teckensnitt

font
Används för att ange flera teckensnittsegenskaper i en enda deklaration.

font-family
Används för att ange en prioriteringslista av teckensnittsfamiljer (t.ex. "times", "arial", "courier", etc.) och/eller generiska teckensnittsfamiljer ("serif", "sans-serif", "cursive", "fantasy", "monospace") för ett element. Webbläsaren kommer att använda det första värde som den känner igen. Man bör alltid ange ett generiskt teckensnittsfamilj som sista alternativ.

font-size
Bestämmer storleken på teckensnittet. Värden för denna egenskap kan uttryckas på flera sätt, som absolut storlek, relativ storlek, storlek utryckt i måttenheter eller i procent.

font-size-adjust
Används för att specificera ett "aspect value" för ett teckensnitt. Detta gör det möjligt att bevara x-höjden för första vals teckensnitt och tillämpa det på en ersättare. "x-height" beskriver höjden för teckensnittets lowercase glyphs. Förhållandet mellan teckensnittsstorleken och höjden på lilla "x" kallas alltså aspect value. Ju högre aspect value ett teckensnitt har desto läsbarare är teckensnittet i mindre storlek. Till exempel, när teckenstorleken för teckensnittet "Verdana" är 100 px och x-height 58 px, blir dess aspect value 58/100 = 0.58. "Times New Roman" har aspect value på 0.46. Fungerar varken i Mozilla eller Explorer.

font-stretch
Används för att göra det aktuella teckensnittet smalare ("narrower") eller breddare ("wider"). Man kan välja bland flera värden beroende på hur smalt eller brett teckensnitt man vill ha. Standardvärdet är "normal". Fungerar varken i Mozilla eller Explorer.

font-style
Används för att applicera formatering på teckensnittet. Tillgängliga stilvärden är "normal", "italic" och "oblique". "oblique" saknar stöd i webläsare - texten visas som italic istället.

normal italic oblique

font-variant
Används för att konvertera små bokstäver till stora (kapitäler) med hjäpl av värdet "small-caps". De koverterade bokstäverna blir dock något mindre än i övriga dokumentet. Standardvärdet är "normal".

font-weight
Används för att specificera tjocklecken på texten. Värden anges som "normal", "bold", "bolder", "lighter", eller med hjälp av numeriska värden från 100 till 900, där 400 motsvarar normal och där 700 motsvarar bold. Numeriska värden måsta anges i hundratal (250 är till exempel inte tillåtet).
Mozilla stödjer inte numeriska värden.

Text

letter-spacing
Används för att ange avståndet mellan bokstäver. Avståndsvärdet anges i måttenheter och indikerar ett tillägg till standardavståndet mellan tecken.

line-height
Används för att ange höjden på den aktuella raden. Avståndsvärdet anges i måttenheter. Numeriska värden uttrycks som teckenstorleken på det aktuella elementet multiplicerat med det angivna värdet. Standardvärdet beror på webbläsaren.

Line-height är detsamma som radavstånd. Procenttal baseras på teckenstorleken och skall normalt vara större än 100 %. Denna text har line-height på 200 %.

text-align
Används för att beskriva hur texten ska justeras inom elementet (t.ex. left, right, center, justify). Standardvärdet beror på webbläsaren.

text-decoration
Specificerar speciellt utseende på texten. Det finns möjlighet att lägga till läsarspecifika tillägg, oidentifierade tillägg återges med understrykning. Möjliga värden är "none", "underline", "overline" och "line-through". Standardvärde är "none".

text-indent
Anger indragningsvärdena i måttenheter eller som procent av förälderelementets bredd.

text-shadow
Används för att skapa skuggeffekter för en viss text. En lista med värden anger de önskade effekterna för texten. Första längd-värdet anger det horisontella avståndet till höger om texten (ett negativt värde placerar skuggan till vänster istället). Andra längd-värdet anger det vertikala avståndet under texten (ett negativt värde placerar skuggan ovanför texten istället). Ett eventuellt tredje värde specificerar gränsen för "suddigheten", dvs. en effekt som ger suddiga konturer. Ett alternativt färg-värde kan definieras före eller efter övriga värden.
Skugga kan användas för visuella effekter. Fungerar varken i Mozilla eller Explorer.

text-transform
Används för att formatera bokstäver i ett visst element, med hjälp av följande värden:
"capitalize" - anger det första tecknet i varje ord i elementet som en versal
"uppercase" - anger alla tecken i elementet som versaler
"lowercase" - anger alla tecken i elementet som gemener
"none" - neutraliserar ärvda inställningar

white-space
Använd för att ange hur ett blanksteg inom ett ett element ska hanteras av webbläsare. Det finns följande värden:
"normal" - webbläsaren ignorerar blanksteg
"pre" - blanksteg bevaras
"nowrap" - allt text fortsätter på samma rad
Mozilla stödjer inte "pre" - texten fortsätter på samma rad.

Man måste skriva en jätte lång mening för att testa effekten av denna egenskap. Webbläsaren bevarar blanksteg i denna mening.

Man måste skriva en jätte lång mening för att testa effekten av denna egenskap. Webbläsaren struntar i blanksteg i denna mening.

word-spacing
Används för att minskar eller ökar avståndet mellan orden. Ett avståndsvärde kan defineras som tillägg till teckensnittets standardavstånd.