ilj@flowsim.se
stylesheets på svenska 4 - stilmallar
stylesheets: css/ stilmallar - typsnitt

    


 

 
TYPSNITT
 
font-family: ...
font-style: ...
font-variant: ...
font-weight: ...
font-size: ...
font: ...
 

 

Om man vill använda en stilmall för att bestämma vilket typsnitt som ska användas kan man skriva så här:
 
 <STYLE TYPE="text/css">
<!--
BODY { font-family: arial, sans-serif }
-->
</STYLE>
 
I exemplet ovan väljs i första hand typsnittet arial. Om arial inte finns installerat på besökarens dator väljs annan sans-serif.
 
Om man bestämmer typsnitt för BODY-delen och inte anger annat kommer all text på sidan att skrivas i det valda typsnittet.
 
Om man i stället vill använda ett särskilt typsnitt mellan t ex BLOCKQUOTE-taggar och ytterligare ett annat mellan PRE-taggar kan man skriva så här:
 
 <STYLE TYPE="text/css">
<!--
BODY { font-family: arial, helvetica }
BLOCKQUOTE { font-family: times }
PRE { font-family: "times new roman"}
-->
</STYLE>
 
 Om namnet innehåller mellanslag ska det placeras mellan citationstecken, t ex "times new roman".
 
Möjliga värden efter font-family: förutom typsnittsnamnen är:
 
serif
sans-serif
cursive
fantasy
monospace
 
Här nedanför väljs till exempel i första hand typsnittet helvetica och i andra hand ett typsnitt av samma typ:
 
 <STYLE TYPE="text/css">
<!--
BODY { font-family: helvetica, sans-serif }
-->
</STYLE>
 

 

 
font-style
 
Om man vill att alla H3-rubriker ska kursiveras kan man skriva så här:
 
 <STYLE TYPE="text/css">
<!--
H3 { font-style: italic }
-->
</STYLE>
 
 Möjliga värden efter font-style: är:
 
normal | italic | oblique
 

 

 
font-variant
 
Små VERSALER i t ex H2-rubriker kan man få genom att skriva
 
 <STYLE TYPE="text/css">
<!--
H2 { font-variant: small-caps }
-->
</STYLE>
 
 Möjliga värden efter font-variant: är:
 
normal | small-caps
 

 

 
font-weight
 
Med hjälp av font-weight: reglerar man hur fet eller mager texten ska vara, t ex
 
 <STYLE TYPE="text/css">
<!--
PRE { font-weight: bold }
-->
</STYLE>
 
Möjliga (framtida) värden efter font-weight:är:
 
normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

 

 

 
font-size
 
Textens storlek bestämmer man efter font-size:. Man kan ange storlek relativt och absolut och på flera olika sätt, t ex:
 
P { font-size: medium}
P { font-size: larger}
P { font-size: xx-small}
P { font-size: 120%}
P { font-size: 15px}
P { font-size: 15pt}
 
Andra möjliga värden efter font-size: är:
 
xx-small | x-small | small | medium | large | x-large | xx-large
smaller | larger

 
Om man vill att en textrad ska skrivas med extra stor text kan man skriva så här:
 
<SPAN STYLE="font-size:xx-large">extra stor text</SPAN>
 
Så här ser det ut på din dator:
 
extra stor text

 
Så här kan en stilmall som reglerar sidans typsnitt se ut:
 
 <STYLE TYPE="text/css">
<!--
BODY { font-family: arial }
BODY { font-style: italic }
BODY { font-weight: bold }
BODY { font-size: 12pt }
-->
</STYLE>
 

 
 font
 
Man kan också använda font: och skriva samma sak så här:
 
 <STYLE TYPE="text/css">
<!--
BODY { font: bold italic 12pt arial }
-->
</STYLE>
 

 
OBS! Stilmallar fungerar i varierande grad i nyare webbläsare (Netscape 4.0+ o MIE 4.0+); det är definitivt bäst att kolla sidan i åtminstone både Netscape Navigator, Mozilla och MIE.
 
Mer om stilmallar under rubriken STYLESHEETS på www.flowsim.se
Webbplatsen öppnas som ett pop-upfönster.
 

Sidan gjordes av
 
ilj@flowsim.se
 

 
Fungerar bäst med Netscape 4.0+.
Senast ändrad 13 mars 2004

Den här sidan hör hemma i ett ramsystem hos:
www.flowsim.se
Stilmallar på svenska