|
|
Ännu mer om stilmallar
– och hur du delar in din text i klasser
Del 8
I dag får du lära dig ännu mer om stilmallar.
Du kan bestämma typsnitt eller färg på en text genom att definiera om märkena för rubrik (H1) och brödtext (P). Nu skapar vi klasser, en form av stilmallar som du kan använda till ett märke eller till ett kort stycke av texten. Det blir mycket enkelt om du vill göra en text till ett citat, en snygg mellanrubrik eller en bildtext. Det är inte så många hemsidesprogram som är bra på att hantera stilmallar, så vi gör dem för hand. Men det är enkelt.
 Så gör du stilmallen
Börja med att göra klasser för citat, mellanrubrik och bildtext. Startadintexteditor och öppna den stilmall du gjorde i förra delen.Gör en ny.
Varje klass står på en egen rad i texteditorn med definitionen direkt efter. Klasserna kan du döpa till vad som helst, men kom ihåg vad du döpt dem till. Namnet anger du i html-koden när du vill använda stilmallen.
Klassen börjar med en punkt så att inte webbläsaren ska tro att du vill ändra ett heltmärke.
Vår mellanrubrik ska bli fet och bestå av versaler. Citatet vill vi ha lite inskjutet på sidan, kursivt och med en linje över och under som avgränsar citatet. Bildtexten ska vara lite mindre men ändå lättläst. Koden blir:
.mellanrubrik { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold; text-transform: uppercase}
.citat { font-family: Arial, Helvetica, sans-serif; font-size: 16pt; font-style: italic; border-color: #990099 black; border-top-width: 2px; border-bottom-width: 2px; position: relative; left: 40px;}
.bildtext { font-family: Arial, Helvetica, sans-serif; font-size: 8pt}
Den första raden är definitionen för klassen mellanrubrik och börjar med en punkt. Font-family anger vilket typsnitt som ska användas, font-size anger mellanrubrikens textstorlek (10pt), font-weight säger här att mellanrubriken ska vara fet (bold) och slutligen text-transform som säger åt webbläsaren att den ska visa texten i mellanrubriken som versaler (uppercase).
Definitionen för citat skiljer sig lite. Font-style säger här att texten ska vara kursiv (italic), border-color anger att ramfärgen ska vara lila (#990099), border-top-width och border-bottom-width begränsar linjerna på citatet till två bildpunkter och position säger att texten ska finnas 40 bildpunkter in från vänster, relativt sett från där texten normalt skulle finnas.
Spara stilmallen i din hemsideskatalog med dina html-filer och ge den ett namn, förslagsvis hemsida.css.
Css är en förkortning av det engelska uttrycket för stilmallar, Cascading Style Sheets.
Använd stilmallarna
Klasserna kan du använda på två sätt. Antingen genom att tilldela ett märke en klass, eller låta en klass spänna över ett textstycke. Så här:
<P CLASS=”mellanrubrik”>Stilmallarna lifter din sida</P>
eller
<P><SPAN CLASS=”mellanrubrik”>Stilmallarna lyfter din sida.</SPAN> Här kommer brödtext...</P>
Givetvis kan du använda klasserna på flera element än P. I princip kan du använda dem till alla märken som har med sidans innehåll att göra. Om en viss stilmall inte fungerar helt, kan det bero på att den inte stöds av webbläsaren. Stilmallar fungerar alltid bäst på de senaste webbläsarna.
Vill du ha ett riktigt bra program som kan hantera stilmallar, rekommenderar jag Dreamweaver 2 från Macromedia. Du kan hämta en provversion på adressen
 www.macromedia.com
Björn E Olsberg
/teknisk redaktör på
tidningen Internetworld.
Gå till förra html-lektionen. Del 7
|
|
