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.
 |
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>
<title>Sidans titel</title>
<style type="text/css">
body { color:blue; }
</style>
body { color:blue; }
</style>
</head>
Detta talar om för webläsaren att body-texten på sidan skall vara blå.
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ä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>
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>
a { text-decoration:none; }
</style>
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>
.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>
<p class=cyklar>Detta är en text som handlar om cyklar, den kommer att vara skriven med typsnittet Times New Roman</p>
| 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 |
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; }
BLOCKQUOTE { font-size: larger; }
Cascading Style Sheets, level 1
Cascading Style Sheets, level 2
http://www.jojoxx.net/css/
Inga kommentarer:
Skicka en kommentar
Glöm inte att skriva in koden som kommer upp i bilden när du trycker skicka.