Om man vill utforma flera olika stiltyper i ett och samma dokument, använder man sig av attributet CLASS. Attributet kan användas till nästan alla märken och används för att skilja på olika märken av samma typ. Fördelen är att man slipper utforma varje textstycke, rubrik, tabell, lista, etc, för sig. Attributet har inga speciella tillåtna värden, utan man kan hitta på i stort sett vilka värden som helst till CLASS - själva värdet är nämligen inte så viktigt utan det är vilka märken som har samma värde.
Om man vill ha ett HTML-dokument med en kort presentation av ett ämne, sedan en förklarande text och till sist en kommentar, vill man kanske använda sig av tre olika slags utseenden på texten. Man kan då dela in styckena i klasser genom att använda attributet CLASS för att skilja mellan de tre olika typerna av text. Alla stycken med presentationstexter sätter man till CLASS=presentation, alla stycken med förklarande text sätter man till CLASS=huvudtext och till sist alla texter med kommentarer sätter man till CLASS=kommentar. Värdena till CLASS kan med fördel väljas med beskrivande ord av vad klassen innehåller, vilket gör det lättare att komma ihåg.
Efter att man har bestämt värdena för klasserna, måste man skapa formatmallar för dem. Man
åstadkommer detta genom att använda en väljare av formen märke.klass. Mallen för alla
stycken i klassen presentation börjar med P.presentation. Man definerar sedan klassens
egenskaper och värden. När man sedan vill anropa stilmallen inne i dokumentet skriver man:
<P CLASS=presentation>presentaionstext</P>
<HTML>
<HEAD>
<TITLE></TITLE>
<STYLE><!--
P.presentation { color: blue; font-family: verdana }
P.huvudtext { margin-left: 1cm; font-family: times }
P.kommentar { margin-left: 1cm; font-family: times; font-style: italic }
--></STYLE>
</HEAD>
<BODY>
<P CLASS=presentation>Därför bör kräftfiske-premiären vara förlagd till
augusti.</P>
<P CLASS=huvudtext>Att ha kräftfiske-premiären förlagd till augusti
är en gammal svensk fin tradition som jag anser bör bevaras.
Att samlas ett gäng och lägga i kräftburarna en ljummen
augustikväll, för att efteråt kanske ha en liten sammankomst
och äta och dricka gott, är en speciell festhögtid som har sin
givna plats i almanackan precis som midsommar. Morgonen får man
uppleva spänningen med att ta upp burarna och se hur stor fångsten
blev. På kvällen kanske man träffas igen och har kräftskiva, med
nykokta kräftor och givetvis med den tillhörande kräftsupen.</P>
<P CLASS=kommentar>Jag håller fullständigt med, det här nya påfundet
med att man kan fiska kräftor året runt tycker jag är ett helgerån,
som jag hoppas att inte alltför många anamar. Dessutom så har
kräftorna inte ömsat färdigt skalet förrän i augusti, därför kommer
ett tidigare kräftfiske förmodligen ge dåliga fångster.</P>
</BODY>
</HTML>
Därför bör kräftfiske-premiären vara förlagd till augusti.
Att ha kräftfiske-premiären förlagd till augusti är en gammal svensk fin tradition som jag anser bör bevaras. Att samlas ett gäng och lägga i kräftburarna en ljummen augustikväll, för att efteråt kanske ha en liten sammankomst och äta och dricka gott, är en speciell festhögtid som har sin givna plats i almanackan precis som midsommar. Morgonen får man uppleva spänningen med att ta upp burarna och se hur stor fångsten blev. På kvällen kanske man träffas igen och har kräftskiva, med nykokta kräftor och givetvis med den tillhörande kräftsupen.
Jag håller fullständigt med, det här nya påfundet med att man kan fiska kräftor året runt tycker jag är ett helgerån, som jag hoppas att inte alltför många anamar. Dessutom så har kräftorna inte ömsat färdigt skalet förrän i augusti, därför kommer ett tidigare kräftfiske förmodligen ge dåliga fångster.
Den första mallen har ingen vänstermarginal och har en blå text av teckensnittet Arial. Dom bägge andra mallarna har en vänster marginal på en centimeter och har teckensnittet Times new roman, den sista mallen har dessutom kursiv text (italic).
Om man vill ge enstaka märke en egen formatmall, kan man ge det en unik identitet med hjälp av attributet ID. Attributet ID skiljer sig från CLASS på så sätt att det pekar ut ett unikt element (exempelvis ett visst stycke eller citat), snarare än en viss elementtyp. Attributet kan ha i stort sett vilket värde som helst, men värdet måste vara unikt - HTML-dokumentet får inte innehålla två märken med samma ID-värde. För att peka ut ett speciellt element i en formatmall, skriver man ett nummertecken (#) följt av elementets identitet.
<HTML>
<HEAD>
<TITLE></TITLE>
<STYLE><!--
#start { font-family: verdana; font-weight: bold }
P.huvudtext { margin-left: 1cm; font-family: times }
--></STYLE>
</HEAD>
<BODY>
<P ID=start>Den inledande texten i dokumentet har teckensnittet
Arial. Genom att i dess formatmall lägga till egenskapen font-weight
med värdet bold, får texten en fet stil. Stycket har identiteten
start och den får bara förekomma en gång i dokumentet.</P>
<P CLASS=huvudtext>Den efterföljande huvudtexten har en
vänstermarginal på en centimeter och teckensnittet Times new roman.
Eftersom jag vill använda samma formatmall för fler stycken använder
jag mig av attributet CLASS.</P>
</BODY>
</HTML>
Den inledande texten i dokumentet har teckensnittet Arial. Genom att i dess formatmall lägga till egenskapen font-weight med värdet bold, får texten en fet stil. Stycket har identiteten start och den får bara förekomma en gång i dokumentet.
Den efterföljande huvudtexten har en vänstermarginal på en centimeter och teckensnittet Times new roman. Eftersom jag vill använda samma formatmall för fler stycken använder jag mig av attributet CLASS.
Det finns sammanlagt 9 olika sätt att ange längder och storlekar på i CSS. Man kan till exempel skriva 12pt vilket betyder 12 punkter och 2cm vilket betyder 2 centimeter. Det går ibland att ange negativa värden, till exempel margin-left: -1cm, vilket betyder att vänstermarginalen ska vara en centimeter mindre än normalt. Observera att det inte får vara något mellanslag mellan minustecknet och talet och inte heller mellan talet och enhetsbeteckningen. De längdenheter som man kan använda i CSS är följande:
| Beteckning | Enhet | Kommentar |
| mm | Millimeter | |
| cm | Centimeter | 1 cm = 10 mm som bekant |
| in | Tum | 1 in = 25,4 mm |
| pt | Punkter | 1 pt = 1/72 in = 0,35 mm |
| pc | Pica | 1 pc = 12 pt = 4,23 mm |
| px | Pixlar | 1 px = 1/90 in = 0,28 mm |
| em | Em | Texten teckenstorlek |
| ex | x-höjd | Höjden på bokstaven "x" |
| % | Procent | Enhet beror på egenskapen |
Man brukar kalla dom fyra sista enheterna för relativa enheter, därför att deras värden inte alltid är desamma. En pixels storlek beror på bildskärmens eller skrivarens upplösning. Em och x-höjden är relativa eftersom de beror av det teckensnitt och den teckengrad som används. X-höjden är exakt höjden av lilla "x" i det aktuella teckensnittet och em anger hur stort något ska vara i förhållande till teckensnittets tecken. Måtten är bra att använda för att ange till exempel radavstånd och indrag eftersom de är anpassade till textens verkliga storlek.
<P STYLE="{ font-size: 14pt }">Här har vi en text som är 14 punkter
hög. 8 millimeter hög får texten
<SPAN STYLE="{ font-size: 8mm }">denna höjd</SPAN>.
Ger vi texten höjden 1 centimeter blir den
<SPAN STYLE="{ font-size: 1cm }">så här hög</SPAN>.
Är storleken satt till 1 tum får texten
<SPAN STYLE="{ font-size: 1in }">denna höjd</SPAN>.
Sätter man höjden till 1 pica får texten den
<SPAN STYLE="{ font-size: 1pc }">här höjden</SPAN>
30 pixlar hög blir texten
<SPAN STYLE="{ font-size: 30px }">så här hög</SPAN>.
Om man istället anger värdet <TT>2em</TT> får texten
<SPAN STYLE="{ font-size: 2 em }">denna höjd</SPAN>.
X-höjd har den
<SPAN STYLE="{ font-size: 1ex }">här höjden</SPAN>.
75% av teckenstorleken ger
<SPAN STYLE="{ font-size: 75% }">denna höjd</SPAN>
</P>
Här har vi en text som är 14 punkter hög. 8 millimeter hög får texten denna höjd. Ger vi texten höjden 1 centimeter blir den så här hög. Är storleken satt till 1 tum får texten denna höjd. Sätter man höjden till 1 pica får texten den här höjden. 30 pixlar hög blir texten så här hög. Om man istället anger värdet 2em får texten denna höjd. X-höjd har den här höjden. 75% av teckenstorleken ger denna höjd
Gruppering tillåter dig att gruppera olika selektorer som delar samma egenskaper. Det gör en stilmall kortare och med det mer överskådlig samtidigt som du sparar skrivtid.
Om du tilldelar olika element en viss specifik stil listar du de en i taget och deklarerar denna stil. Om du till exempel vill ha alla rubriker på nivå 1 röda, stycken svarta, poster i listorna gula och länkarna gröna skriver du:
H1 { color: red }
P { color: black }
LI { color: yellow }
A {color: green }
Men om du vill tilldela ett antal element en och samma stil, till exempel röd förgrundsfärg, istället för att lista dem en i taget enligt principen:
H1 { color: red }
P { color: red }
LI { color: red }
A { color: red }
kan du gruppera de och sedan tilldela hela gruppen denna stil. Alla ovannämnda element kan till exempel tilldelas den röda färgen enligt följande:
H1, P, LI, A { color: red }
Gruppmeddlemarna åtskiljs med ett komma.
Det är inte enbart element som kan grupperas i en selektor. Du kan även gruppera deklarationer som tilldelas en viss selektor. Istället för att du skriver:
P { font-size: 10pt }
P { font-weight: bold }
P { text-indent: 1cm }
P { color: blue }
skriver du:
P { font-size: 10pt; font-weight: bold; text-indent: 1cm; color: blue }
Listade deklarationer åtskiljs med en semikolon. De två första deklarationerna kan förkortas ännu mer.
Precis som i HTML kan man i CSS ange färger med namngiven färgkod eller med hexadecimala siffror. Det går även att använda sig av ett RGB-värde. RGB betyder Red Green Blue, på svenska "Rött Grönt Blått". Ett RGB-värde anges med nyckelordet rgb följt av en parentes med tre siffror åtskiljda av komman. Siffrorna står i tur och ordning för den mängd rött, grönt och blått färgen består av. Det finns två sätt att ange RGB-värden, antingen färger i procent av maximal intensitet, eller med ett absolut tal mellan 0 (ingen färg alls) och 255 (maximal intensitet).
<P STYLE="{ font-weight: bold }">
<SPAN STYLE="{ color: #008080 }">Text med den hexadecimala
färgen #008080</SPAN><BR>
<SPAN STYLE="{ color: teal }">Text med den namngivna
färgen teal</SPAN><BR>
<SPAN STYLE="{ color: rgb(0, 50%, 50%) }">Text med färg
av RGB-värdet rgb(0, 50%, 50%)</SPAN><BR>
<SPAN STYLE="{ color: rgb(0, 128, 128) }">Text med färg
av RGB-värdet rgb(0, 128, 128)</SPAN><BR>
Text med den hexadecimala färgen #008080
Text med den namngivna färgen teal
Text med färg av RGB-värdet rgb(0, 50%, 50%)
Text med färg av RGB-värdet rgb(0, 128, 128)
För att utforma "kaskader" av formatmallar, finns det en detaljerad rangordning mellan
mallarna som man kan använda sig av. En av grundtankarna i CSS är att det ska vara möjligt att
ange samma egenskap, exempelvis teckensnittet på vanlig brödtext, på ett flertal ställen. Den
deklaration som har högst rang väljs sedan ut och används av webbläsaren.
Grundorningen ser ut på följande sätt:
Med detta nyckelord, important (eng. viktigt), har man möljighet att ge en deklaration högsta
rang oavsett var den står. Standarden är att web-designers regler kommer att överskrida
användarens.
P { font-size: 14pt ! important }
I den här formatmallen får brödtexten en storlek på 14 punkter oavsett om något annat angetts i dokumentetet. Nyckelordet gäller bara en enda tilldelning, om man vill ange flera viktiga egenskaper måste man skriva ut nyckelordet för var och en av dem:
H2 { font-size: 18pt ! important;
font-family: arial ! important;
background-color: teal }
I den här mallen anges att rubriker av typen <H2>; ska ha en teckenstorlek på 18 punkter och teckensnittet Arial. Rubriken ska ha bakgrundsfärgen teal om inget annat anges i dokumentet.
Ifall flera motstridiga deklarationer anges som alla har nyckelordet important, gäller den vanliga rangordningen då webbläsaren bestämmer vilket av de viktiga värdena som ska användas. Användaren får i alla fall sista ordet. eftersom det är möjligt att instruera sin webbläsare att inte bry sig om dokumentens formatmallar.
Klicka på knapparna för att backa tillbaka eller för att läsa vidare om HTML-guiden.
Denna sida är skriven av Robert Karlsson.
E-post: karlsson.robert@vetlanda.mail.telia.com
Hemsida: http://w1.383.telia.com/~u38302477
Sidan uppdaterades senast:
© Copyright 1999