CSS - Cascading Style Sheets
Med hjälp av CSS, eller stilmallar, kan man på ett enkelt sätt skapa mallar för hur man vill att en
sida skall se ut. Dessa stilmallar kan vara en del av själva sidan, eller länkas in från externa
mallfiler. Här beskrivs de vanligast förekommande css elementen.
Definiera stilmallar
Stilmallsdefinitioner gör man med föredel i head och görs med style elementet. Ett
exempel kan se ut så här;
<head>
<title>Sidans titel</title>
<style type="text/css">
body { color:blue; }
</style>
</head>
Detta talar om för webläsaren att body-texten på sidan skall vara blå.
Externa mallfiler
Om du vill använda samma stilmall på flera sidor behöver du inte skriva in den i alla dokument utan
kan länka in en extern css-fil på följande sätt.
<link rel=stylesheet href="filnamn.css" type="text/css">
Länkar
Länkarnas utseende på en sidan kan du ändra på följande sätt.
<style type="text/css">
a:link { color:blue; }
a:visited { color:red; }
</style>
Exemplet kommer att de besökta länkar röd färg och obesökta blå. Förutom link och visited
finns även active som visas just när användaren klickar på länken och hover som visas
när användaren flyttar musmarkören över länken.
För att ta bort understrykningen på länkar kan du skriva så här:
<style type="text/css">
a { text-decoration:none; }
</style>
Klasser
Om du vill att olika stycken i din text skall se olika ut kan du använda dig av klasser. Detta gör du
på följande vis:
<style type="text/css">
.bilar { font-family: Arial; }
.cyklar { font-family: "Times New Roman"; }
</style>
I exemplet talar vi om att i klassen bilar vill vi ha typsnittet Arial och i klassen cyklar
skall det vara Times New Roman. För att sedan tala om vilken klass du vill använda i texten skriver du;
<p class=bilar>Detta är en text som handlar om bilar, den kommer att vara skriven
med typsnittet Arial</p>
<p class=cyklar>Detta är en text som handlar om cyklar, den kommer att vara skriven
med typsnittet Times New Roman</p>
Lista över attbribut
| Attribut | Påverkar | Värde | Exempel |
| font-family | Typsnitt | Namn på typsnittet | font-family: Arial |
| font-weight | Typsnittstjocklek | normal / bold / bolder
lighter | font-weight: bold |
| font-size | Typsnittsstorlek | px (pixel) / pt (punkter)
Absolut & Relativ | font-size: 12pt |
| font-style | Typsnittsstil | normal / italic | font-style: italic |
| text-align | Textjustering | left / right / center / justify | text-align: justify |
| text-indent | Textindrag | px (pixel) / pt (punkter) | text-indent: 16pt |
| text-decoration | Textdekorering | none / underline / overline
line-through / blink | text-decoration: underline |
| vertical-align | Vertikal justering | baseline / sub / super
top / text-top / middle
bottom / text-bottom | vertical-align: top |
| color | Färg | Färgnamn / RGB värde | color: green
color: rgb(0,255,0)
color: #00FF00 |
| background-color | Bakgrundsfärg | Färgnamn / RGB värde | color: green
color: rgb(0,255,0)
color: #00FF00 |
| background-image | Bakgrundsbild | Sökväg till bild | background-image: url(bild.gif)
background-image: none |
| background-attachment | Bakgrundsscrollning | scroll / fixed | background-attachment: fixed |
| background-repeat | Bakgrundsupprepning | repeat / repeat-x
repeat-y / no-repeat | background-repeat: no-repeat |
| cursor | Muspekaren | auto / crosshair / default
pointer / movetext / wait
help | cursor: crosshair |
* Listan är inte fullständig, utan innehåller bara de vanligaste attributen.
Absoluta och relativa storlekar
För exempelvis attributet font-size kan man ange storleken absolut eller relativt. Det senare gäller
då från default, eller föregående bestämda storlek. För absoluta storleksangivelser finns följande attribut
xx-small, x-small, small, medium, large, x-large & xx-large och för relativa larger & smaller.
Ex.
P { font-size: 12pt; }
BLOCKQUOTE { font-size: larger; }
Referenser
Cascading Style Sheets, level 1
Cascading Style Sheets, level 2
