CSS Mobile Profile 1.0 Tutorial

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. Denna tutorial innehåller bara beskrivning av taggarna, exempel finns i Uppgift 2a.
CSS Mobile Profile 1.0 är en standard för mobila klienter och är en nedbantad version av CSS 2. Denna tutorial går igenom de olika egenskaperna för stilsättning enligt CSS Mobile Profile 1.0. Stilsättning är statisk vilket innebär att sidan inte förändras via JavaScript/OM, som dessutom inte används speciellt ofta på mobila klienter. Klicka på länkarna nedan för att komma till respektive sektion:

• Bakgrund
• Enheter
• Färg
• Kantlinjer (Border)
• Listor
• Marginaler
• Paddning
• Position
• Selektorer
• Storlek
• Synlighet
• Teckensnitt
• Text

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

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-bottom
Anger egenskapen för den nedre kantlinjen.

border-left
Anger egenskapen för den vänstra kantlinjen.

border-right
Anger egenskapen för den högra kantlinjen.

border-top
Anger egenskapen för den övre kantlinjen.

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-bottom-color
Anger färgen endast för den nedre kantlinjen.

border-left-color
Anger färgen endast för den vänstra kantlinjen.

border-right-color
Anger färgen endast för den högra kantlinjen.

border-top-color
Anger färgen endast för den övre kantlinjen.

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-bottom-style
Anger formatet endast för den nedre kantlinjen.

border-left-style
Anger formatet endast för den vänstra kantlinjen.

border-right-style
Anger formatet endast för den högra kantlinjen.

border-top-style
Anger formatet endast för den övre kantlinjen.

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

border-bottom-width
Anger bredden på den nedre kantlinjen.

border-left-width
Anger bredden på den vänstra kantlinjen.

border-right-width
Anger bredden på den högra kantlinjen.

border-top-width
Anger bredden på den övre kantlinjen.

Listor

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.

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, lowwer-roman, upper-roman). Standardvärdet är "disk".

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.

margin-bottom
Bestämmer ett elements nedre marginal.

margin-left
Bestämmer ett elements vänstra marginal.

margin-right
Bestämmer ett elements högra marginal.

margin-top
Bestämmer ett elements övre marginal.

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.

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.

Position

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

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

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 (px, % etc.).

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

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

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

display
Bestämmer om ett element återges. Värdet "none" innebär att elementet inte återges, medan värdet " " (tom citat) innebär att elementet återges. Standardvärde är " " (tom citat).

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 "inherit":
"inherit" - elementet bara blir synligt när dess förälderelement är synligt
"hidden" - elementet blir inte synligt
"visible" - elementet blir synligt

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-style
Används för att applicera formatering på teckensnittet. Tillgängliga stilvärden är "normal", "italique" och "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).

Text

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