På denna sida beskrivs hur man anger värden på egenskaper (eng. properties) för stilmallar samt vilka måttenheter som finns och hur man anger storlekar/längder. Många av egenskaperna i CSS finns beskrivna, med exempel, på sidorna Typsnitt (och stilar), Text (justering, radavstånd, m.m.), Färger (och bakgrundsbilder), Boxar (marginaler, kantlinjer och utfyllnad) och Positionering. För en komplett lista på egenskaper - se Referenser längst ner på denna sida (eller under Länkar).
Observera att webbsidor med exempel på dessa webbsidor (som nås via knapparna) kan bli ganska komplexa! Det är inte tänkt att dess HTML- och CSS-kod ska studeras i detalj - kunskap som behövs beskrivs på dessa webbsidor (Egenskaper), inte i exempelsidorna! Exempelsidorna används för att visa effekten av de olika egenskaperna i stilmallar.
För att ändra en egenskap i en stilmall så skriver man namnet på egenskapen följt av ett kolon och värdet för egenskapen.
{ egenskap: värde }{ font-family: Verdana }
Om värdet består av fler än ett ord (t.ex. typsnittet Times New Roman) så måste värdet inneslutas i citationstecken (t.ex. "Times New Roman"). Detta är enda gången som citationstecken ska användas i CSS!
{ font-family: "Times New Roman" }
För en del egenskaper kan man ange en värdelista, där ibland typsnitt. Värdena separeras då med komma.
{ egenskap: värde1, värde2, ... }
Principen för värdelistor är att webbläsare först försöker hitta första (mest vänstra) värdet i listan (t.ex. typsnittet Verdana i exempel ovan). Om besökares webbläsare inte har, eller stödjer, detta alternativ (t.ex. saknar typsnittet Verdana) så går webbläsaren vidare och försöka med nästa värde i listan (typsnittet Arial i exempel ovan). Detta görs tills inga fler värden finns i listan (webbläsare väljer då sitt standardtypsnitt).
{ font-family: Verdana, Arial, Helvetica, sans-serif }
Om något värde i en värdelista innehåller mellanslag så måste det värdet inneslutas inom citationstecken, som i exempel nedan.
{ font-family: Georgia, "Times New Roman", Times, serif }
Om flera egenskaper ska ändras i en stilmall så separeras egenskaperna med semikolon.
{ egenskap1: värde1; egenskap2: värde2; }
Semikolon är inte obligatoriskt efter sista värdet, men det kan vara en bra idé att använda det så att man inte glömmer det om man skulle lägga till fler egenskaper.
Precis som med HTML-kod så påverkar inte mellanslag och radbrytningar (s.k. white spaces) stilmallar. Stilmallar kan m.a.o. skrivs på ett så lättläst sätt som möjligt. För läsbarhet kan vi t.ex. skriva varje egenskap på en egen rad.
{
egenskap1: värde1;
egenskap2: värde2;
}I vissa fall kan två eller flera egenskaper kombineras och då separeras de olika värdena med mellanslag (inte komma som med värdelista - värdelistor används för att ange mest önskade till minst önskade värde). Om vi t.ex. vill ändra nedanstående tre egenskaper för typsnitt (storlek, vikt och typsnitt) så kan de skrivas om som en egenskap m.h.a. en s.k. "genväg", d.v.s. de två stilmallarna nedan är utbytbara (behandlas mer under sidan Typsnitt).
{
font-size: 13px;
font-weight: bold;
font-family: Verdana, Arial,
Helvetica, sans-serif;
}{ font: 13px bold Verdana, Arial,
Helvetica, sans-serif; }Vill man förklara hur man tänkt, eller göra det lättare
att hitta i en fil med många stilmallar, så kan (och bör)
man använda kommentarer. Kommentarer fungerar precis som flerradiga
kommentarer i C++/Java/JavaScript, d.v.s. börjar med /*
och avslutas med */).
/* En kommentar */
{
/* Ytterligare kommentar */
egenskap1: värde1;
}Till början på sida
Nedan visas ett "komplett" exempel på två stilmallar. Den första gäller för alla stycken och ändrar till ett typsnitt utan serifer (mer om dessa på sidan Typsnitt). Andra stilmallen ändrar till kursivstil för alla stycken av klass "ingress".
p { /* Alla stycken */
font-family: Verdana, Arial,
Helvetica, sans-serif;
}
p.ingress { /* Stycken av klassen ingress */
font-style: italic;
}Till början på sida
Egenskaper kan antingen anges med nyckelord (eng. keywords, t.ex. kursiv, fet, mindre eller röd, fast på engelska :-)) eller som storlek/längd och måttenhet (t.ex. 120% eller 14px). Det finns följande typer av måttenheter, vilka kan användas får de flesta egenskaper som gäller storlek/längder:
Observera att värden anges med "amerikansk" standard, d.v.s. eventuella decimaltal ska använda punkt (och inte komma), t.ex. 1.2 och 3.14. Eventuella måttenheter ska anges utan mellanslag mellan storlek/längd och måttenhet, t.ex. 12px, 1.2em och 100%. (I vissa fall anges nämligen flera värden - inte värdelistor - med mellanslag mellan, vilket innebär att felaktigt skriven storlek/längd skulle kunna tolkas som två olika (och ogiltiga) värden istället får ett med måttenhet.)
Exempel för de relativa och absoluta måttenheter ges när relevanta egenskaper behandlas, d.v.s. egenskaper som använder dessa måttenheter.
En relativ storlek är som namnet anger, relativt till något, oftast övergripande/omslutande element. Nedan visas några av de relativa måttenheterna vi kan använda samt exempel på hur de skrivs.
em (1.0em) - höjden av elementets typsnitt (egenskapen font-size)ex (2ex) - höjden av typsnittets bokstav xch (40ch) - bredden av typsnittets siffra 0rem (2rem) - typsnittsstorleken av rotelementetvw (90vw) - andel av webbläsares bredd (viewport)vh (90vh) - andel av webbläsares höjd (viewport)vmin (90vmin) - minsta värdet av vw och vhvmax (90vmax) - högsta värdet av vw och vh90%) - procent av övergripande/omslutande elementMåttenheterna em, ex, ch
och rem kräver lite förståelse
för typografi, men även om de låter som storlekar
för typsnitt så kan de användas för alla typer
av storlekar/längder. De är endast relaterade till storlek
på typsnitt för element (även om elementet inte har någon
text, d.v.s. alla element har, eller ärver, en textstorlek).
rem är baserat på storleken på "rotelementet"
- ofta html eller body - och är användbart
för att basera storlekar/längder på ett gemensamt värde istället för
omslutande element (föräldrar och förfädrar).
De senaste tillskotten av måttenheter - vw, vh, vmin och vmax - har tillkommit för att
kunna anpassa storlekar på element i förhållande till storleken på webbläsares
storlek (viewport). vw (viewport width)
avser procent av bredden på webbläsares fönster och vh (viewport
height) webbläsares höjd.
vmin och vmax är användbara för att anpassa
element efter proportion på webbläsares fönster, d.v.s. om besökare använder
dator med bredbildsskärm eller "stående" mobiltelefon.
De absoluta måttenheterna används för att ange "exakta" storlekar/avstånd, men de gör sig bäst för andra media än datorskärmar (t.ex. papper/utskrift). De absoluta måttenhterna visas nedan med exempel på hur de skrivs.
10px) - antalet bildpunkter på skärmen, d.v.s. skärmberoende10pt) - 1 punkt = 1/72 tum1cm)10mm)0.35in) - 1 tum = 2.54 cm1pc) - 1 pica = 12 punkterDå besökare kan ha olika upplösningar, m.m. på sina skärmar så är det svårt att exakt avgöra hur några av de absoluta måttenheterna kommer fungera, d.v.s. om 1mm verkligen är 1 millimeter på en skärm. Undvik därför de absoluta måttenheterna, förutom pixlar.
Måttenheten pixlar är mycket beroende av besökarens upplösning på skärmen, d.v.s. det kan vara en väsentlig skillnad om besökaren har en upplösning på 640*480 eller 1024*768 på sin skärm.
Till början på sida
Nedan finns länkar till webbplatser med mer information.