Fontegenskaper

1. Inledning

I detta avsnitt går jag bl.a. igenom hur vi kan skapa en speciell fontstil åt texten, hur vi anger textstorleken, hur vi gör avsnitt kursiva eller i fet stil samt hur vi ger texten önskad färg.

Fonterna har ingen egen selector, utan uppgår i andra selectorer. Nedan har jag angivit de egenskaper (med valda värden) som fonterna i huvudsak kan anta. Efter detta går jag igenom allt mer noggrant.

<style type="text/css">  </style>

Nu har jag bara angivit ett värde för var egenskap. Men nu förklarar jag allt lite mer.

2. Typsnitt

I font-family har vi angivit tre olika typsnitt. Det först nämnda typsnittet är förstahands valet. Om mottagarens dator inte har detta installerat, väljs det som är angivet därefter osv. Sist brukar vi nämna det alla har installerade, d.v.s. Sans-Serif. Observera att typsnitt som omfattar mer än ett ord omges med 'xxx'!

3. Normal eller kursiverad text

Egenskapen font-style kan anta bara anta värdena normal, oblique och italic. Du kanske förstår vad de innebär utan att jag förklarar det alltför ingående. Med italic kursiverar vi texten och oblique har samma egenskaper.

4. Fet stil

Här kan vi ange att texten skall vara i fet stil och inte bara det. Vi kan också reglera hur fet den skall vara! Egenskapen har en mängd värden och det är dessa: normal, bold, bolder eller lighter (i förhållande till omgivande text), 100, 200, 300, 400, 500, 600, 700, 800 och 900.

Alla värden fungerar dock inte, så testa resultatet först.

5. Fontstorlek

Med denna egenskap reglerar vi storleken på texten denna kan ha många olika värden. Dels kan värdena vara absoluta och dels relativa (i för hållande till omgivande text), dels kan de vara angivna i procent och dels i pt (som i HTML).

De absoluta värdena är: xx-small, x-small, small, medium, large, x-large samt xx-large och de relativa: larger eller smaller.

6. Textfärg

Slutligen har vi egenskapen color som anger textfärgen. Att färgen kan anges på ett antal olika sätt, läste vi om i avsnittet bakgrundsfärger i CSS. Men för säkerhets skull gör vi en liten repetition och anger hur färgen vit kan infogas:

<style type="text/css"> >!-- body { background-color: #FFFFFF; background-color: #FFF; background-color: rgb(255, 255, 255); background-color: rgb(100%, 100%, 100%); background-color: white; } --> </style> Om du känner dig osäker, studera avsnittet om bakgrundsfärger i fördjupningsdelen om CSS.

7. Exempel på kod

<html> <head> <title>Övningar</title> <style type="text/css">  </style> </head> <body> <br><br><br> <h1>RUBRIK</h1> Sidan som vanligt. Här har jag infogat ett textavsnitt hämtat någonstans från mina sidor: "Själv använder jag ingen HTML-editor, varken privat eller i denna HTML-Skola, då jag vant mig med att arbeta utan. Editorer behövs inte heller för att göra hemsidor, men kan å andra sidan kanske tjäna som ett hjälpmedel. Men observera att du i vissa editorer saknar möjlighet att skriva egen HTML-kod om du skulle vilja det! Sedan måste vi uppgradera produkten ibland, då nya möjligheter med HTML kommit." </body> </html>





kontakt	© Stefan Dahlén	Tisdag 7:e oktober 2008