Stilanvisningar i CSS1

Dessa stilangivelser ingår i Cascading Style Sheets, level 1. Notera att alla stilangivelser inte får effekt i alla webbläsare. Här finns en lista över vilka stilangivelser som stöds av olika versioner av Netscapes och Microsofts webbläsare. Se förra avsnittet för information om hur stilangivelserna anropas från HTML-koden.

Textstil

font-family anger typsnittet. Flera namn (i prioriteringsordning) separeras med komma, och namn som innehåller mellanrum sätts inom citattecken. Förutom typsnittsnamn kan man ange fem generiska namn: serif (typsnitt med "klackar"), sans-serif (typsnitt utan "klackar"), cursive (skrivstilstypsnitt), fantasy (fantasistilar) och monospace (typsnitt med fast breddsteg). Man bör alltid ange ett av dessa, ifall användaren inte har det önskade typsnittet installerat.
- BODY { font-family: palatino, "new century schoolbook", serif }
font-style kan vara normal, italic eller oblique. Italic ger kursiv stil, medan oblique ger en lutande stil. Detta ger ibland samma resultat.
- CITE { font-style: italic }
font-variant kan vara normal eller small-caps. Small-caps ger kapitäler (ser ut som stora bokstäver, men är i de små bokstävernas höjd). System som inte kan visa kapitäler kan välja att visa versaler istället.
- P:first-line { font-variant: small-caps }
font-weight styr textens vikt och kan anges absolut med normal eller bold, relativt tidigare stil med bolder eller lighter, eller med siffervärdena 100, 200, 300, 400, 500, 600, 700, 800 och 900. Normal motsvarar 400 och bold motsvarar 700. Finns typsnittet i flera olika vikter mappas de till lämpliga värden.
font-size styr textens grad (storlek) och kan anges som en absolut storlek (xx-small, x-small, small, medium, large, x-large, xx-large), som en relativ storlek (larger, smaller), i procent eller med måttenheter (t.ex. pt, se avsnittet om måttenheter nedan). Man bör helst inte använda måttenheter, eftersom olika människor föredrar olika textstorlek (beroende på syn, skärmstorlek och skärmupplösning). Ange hellre i procent.
- H1 { font-size: 150% }
font kan styra alla textstilsattribut ovan. 12pt/14pt i exemplet nedan betyder att graden (storleken) är 12 punkter och kägeln (radavståndet) är 14 punkter.
- P { font: 12pt/14pt bold Helvetica, Gill, sans-serif }

Färg och bakgrund

color anger textens eller objektets färg. Den kan anges med färgnamn (enligt avsnittet om färger ovan) eller med RGB-värden med tresiffriga hexkoder, sexsiffriga hexkoder, decimaltal eller procentvärden. Alla dessa exempel ger röd färg:
- EM { color: red }
- EM { color: #f00 }
- EM { color: #ff0000 }
- EM { color: rgb(255,0,0) }
- EM { color: rgb(100%,0%,0%) }
background-color anger bakgrundsfärgen för raden, sidan eller objektet. Färgen anges som för color ovan eller som transparent.
- BODY { background-color: red }
- H1 { background-color: yellow }
background-image kan anges med url:en till en bildfil eller som none.
- BODY { background-image: url(marmor.gif) }
- P { background-image: none }
background-repeat kan vara repeat, repeat-x, repeat-y eller no-repeat och styr hur bakgrundsbilden repeteras över sidan.
background-attachment kan vara scroll eller fixed och styr ifall bakgrundsbilden följer med texten när man rullar sidan eller om bilden ligger still.
background-position styr hur bakgrundsbilden placeras och kan anges som två procentvärden eller två längdmått (för x-axel och y-axel). Man kan även ange placeringen med top, center, bottom respektive left, center, right.
- BODY { background-position: right top }
- BODY { background-position: top center }
- BODY { background-position: 40% 70% }
- BODY { background-position: 14cm 0cm }
background kan styra alla bakgrundsattribut ovan.
- BODY { background: red url(marmor.gif) repeat scroll }

Textegenskaper

word-spacing styr avståndet mellan orden i texten och kan vara normal eller anges med måttenheter. Vid utsluten text (rak vänster- och högermarginal) kan avståndet variera om word-spacing är satt till normal. Webbläsare kan välja att ignorera denna kod.
- H1 { word-spacing: 0.4em }
letter-spacing styr avståndet mellan bokstäverna i texten och kan vara normal eller anges med måttenheter. Vid utsluten text (rak vänster- och högermarginal) kan avståndet variera om letter-spacing är satt till normal. Webbläsare kan välja att ignorera denna kod.
- H1 { letter-spacing: 0.1em }
text-decoration kan vara none, underline, overline, line-through eller blink.
vertical-align styr textens eller objektets placering i höjdled. Möjliga värden är baseline, sub, super, top, text-top, middle, bottom och text-bottom. Placeringen kan även anges i procent.
text-transform gör att texten växlar mellan versaler (stora bokstäver) och gemena (små bokstäver). Möjliga värden är capitalize (första bokstaven i varje ord blir versal), uppercase (all text blir med versaler), lowercase (all text blir med gemena) eller none (texten förändras inte).
text-align styr textens justering i sidled. left vänsterställer texten, right högerställer texten, center centrerar texten och justify åstadkommer utsluten text (rak vänster- och högermarginal). Alla webbläsare kan inte visa utsluten text.
- P.utsluten { text-align: justify }
text-indent åstadkommer ett indrag på första raden i ett stycke och kan anges med måttenheter eller i procent.
- P { text-indent: 1em }
- P { text-indent: 10% }
line-height styr kägeln (radavståndet) och anges med en siffra som multipliceras med teckengraden, i procent av teckengraden, med måttenheter eller som normal.
- DIV { font-size: 10pt; line-height 1.2 }
- DIV { font-size: 10pt; line-height 120% }
- DIV { font-size: 10pt; line-height 12pt }

Marginaler och ramlinjer

margin styr hur bred marginalen runt objektet ska vara och anges med måttenheter, i procent eller som auto. Anges ett värde gäller det för alla sidor, anges fyra värden tolkas de i ordningen uppåt, höger, nedåt, vänster. Anges två eller tre värden tas de saknade värdena från motstående sidor. Marginalerna på de olika sidorna kan även anges individuellt med margin-top, margin-right, margin-bottom och margin-left.
padding styr fyllningen runt objektet och anges med måttenheter, i procent eller som auto. Anges ett värde gäller det för alla sidor, anges fyra värden tolkas de i ordningen uppåt, höger, nedåt, vänster. Anges två eller tre värden tas de saknade värdena från motstående sidor. Fyllningen på de olika sidorna kan även anges individuellt med padding-top, padding-right, padding-bottom och padding-left.
border-width kan anges som thin, medium, thick eller med måttenheter och styr bredden på en ramlinje runt objektet. Anges ett värde gäller det för alla sidor, anges fyra värden tolkas de i ordningen uppåt, höger, nedåt, vänster. Anges två eller tre värden tas de saknade värdena från motstående sidor. Ramlinjen på de olika sidorna kan även anges individuellt med border-top-width, border-right-width, border-bottom-width och border-left-width.
border-color anger färgen på en ramlinje runt objektet. Färgen anges som för color ovan. Anges ett värde gäller det för alla sidor, anges fyra värden tolkas de i ordningen uppåt, höger, nedåt, vänster. Anges två eller tre värden tas de saknade värdena från motstående sidor.
border-style anger typen av ramlinje och kan vara none, dotted, dashed, solid, double, groove, ridge, inset eller outset. Anges ett värde gäller det för alla sidor, anges fyra värden tolkas de i ordningen uppåt, höger, nedåt, vänster. Anges två eller tre värden tas de saknade värdena från motstående sidor. Webbläsare kan välja att visa alla ramlinjer som solid.
border kan användas för att styra border-width, border-style och border-color på samma gång. Värdena gäller för ramlinjens alla sidor. Vill man ange olika värden för de olika sidorna får man använda border-top, border-right, border-bottom och border-left.
- BLOCKQUOTE { border: thin solid red }
width och height styr ett objekts bredd och höjd. Det är mest användbart för bilder, men kan i vissa webbläsare även användas för text. Värden kan anges med måttenheter, i procent eller som auto. Om det ena värdet anges med mått eller i procent, och det andra är auto storleksförändras bilden proportionerligt.
- IMG { width: 125px; height: 50px }
- IMG { width: auto; height: 20mm }
- IMG { width: 200%; height: auto }
float styr hur text figursätts runt ett objekt. Det är mest användbart för bilder, men kan även användas för text. Möjliga värden är left, right och none. Left och right placerar objektet i respektive marginal. Den omgivande texten flyter runt om. None gör att objektet placeras i den löpande texten.
- IMG.knapp { float: left }
clear anger ifall ett element tillåter att det finns flytande objekt vid dess sidor (se float ovan). Möjliga värden är none, left, right och both. Om man till exempel anger { clear: left } för ett element så kommer detta att flyttas ner under eventuella flytande objekt på vänster sida.
- H1 { clear: left }

Klassifikation

display anger hur ett element hanteras och hur det visas. Möjliga värden är block (elementet startar på en ny rad), inline (elementet ligger på samma rad som omgivande element), list-item (elementet har en listsymbol framför sig) eller none (objektet och dess eventuella ramar etc visas inte alls). Webbläsare kan välja att ignorera denna kod.
white-space styr ifall flera mellanslag efter varandra ska slås ihop till ett (normal), visas upp som de står i koden (pre) eller ifall rader endast bryts med <BR>-koder (nowrap). Webbläsare kan välja att ignorera denna kod.
list-style-type styr hur punkterna i en numrerad eller onumrerad lista ska se ut. Möjliga värden är disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha eller none. Se avsnittet om listor för exempel.
- UL { list-style-type: lower-roman }
list-style-image anger att en bild ska användas som listpunkt. Kan vara en url eller none.
- UL { list-style-image: url(http://www.firma.se/funny-star.gif) }
list-style-position anger ifall listpunkten ska ligga utanför listan (outside) som vanligt eller ligga indragen i listan (inside).
list-style kan användas för att styra list-style-type, list-style-image och list-style-position på samma gång.
- UL { list-style: url(http://www.firma.se/funny-star.gif) outside }
- UL UL { list-style: disc outside } /* gäller för listor i listor (UL UL) */
- OL { list-style: upper-alpha inside }
- UL { list-style: url(smiley.gif) disc } /* disc visas ifall bilden inte finns */

Måttenheter

Måttangivelser kan anges med följande olika enheter:

em	det typografiska måttet fyrkant, d.v.s. lika långt som texten är hög. Indrag i början av stycken räknas ofta i em.
ex	x-höjd, d.v.s. höjden av bokstaven x i aktuellt typsnitt.
px	pixlar, d.v.s. bildpunkter på skärmen. Om storleken på en pixel skiljer sig väldigt mycket från vanliga skärmupplösningar, t.ex. vid utskrift, kommer detta värde att förändras proportionerligt.
cm	centimeter.
mm	millimeter.
in	tum, d.v.s. 25,4 mm.
pt	typografiska punkter enligt PostScript-systemet, d.v.s 1/72 tum.
pc	pica enligt PostScript-systemet, d.v.s 12pt

URL:er

Adresser till bildfiler etc anges med koden url följt av adressen inom parentes (se exemplen ovan). Adressen kan, men behöver inte, omges med enkla (') eller dubbla (") citattecken.

Observera att relativa adresser tolkas utifrån den adress som style sheet-filen har, inte ifrån adressen till det dokument som eventuellt hämtar in style sheet-filen med <LINK>. Om stilanvisningarna anges i samma fil (i en <STYLE>-kod eller direkt i en enskild kod) blir detta samma sak.

Läs mer om CSS här

<<< Förra avsnittet Innehåll Nästa avsnitt >>>