<< Typografiark menu

Typografiark

Note:Typografiark er den danske oversættelse af "style sheets" eller "cascading style sheets" (CSS). Er du begynder skal du vide, at man skal som minimum skal kende til grundlæggende HTML, før man kan kaste sig ud i at lære om (og bruge) typografiark.

Til toppen

Indledning

Med typografiark kan man let angive afstanden mellem linier, tekstfarve, fontstørrelse, baggrund og meget meget mere. Men det bedste er næsten, at man ved brug er eksterne typografiark kan korrigere udseendet på alle sine dokumenter ved at rette i én enkelt fil.

Hvis du er i tvivl om hvorfor du bør lære om typografiark og hvilke fordele du har ud af det, kan du læse mere dokumentet "Hvorfor bruge typografiark?"

Til toppen

Syntaksen

Syntaks: Generelt

Du kan skrive dit typografiark direkte i HTML dokumentets <head></head> -sektion eller lave det i en seperat fil (det kommer der mere om i de to næste afsnit). Hvis du vælger at lave det i en seperat fil, kan du sagtens benytte notesblok/notepad, eller en anden lille teksteditor... bare du husker at gemme filen med efternavnet .css, som f.eks. "typark.css".

Syntaksen i typografiark er noget anderledes end den du er van til at bruge i HTML. Men heldigvis er det meget let at lære. I følgende forklares syntaksen, til at starte med, ud fra et simpelt eksempel.

Du kender sikkert koden <p>, der angiver et afsnit. I følgende lille eksempel fortælles med typografiark at teksten hver enkelt afsnit skal være grøn, og desuden omgives af en rød kant.:


P {
color : green;
border: solid red;
}

Nu kan teksten formateres således:


<p>Denne tekst bliver grøn og omgives
af en rød kant</p>

Bemærk at du kun behøver skrive dit typografiark én gang. Skulle man nøjes med HTML ville ovenstående have set således ud:


<table>
<tr>
<td bordercolor="red">
<font color="green">
Denne tekst bliver grøn og omgivet af en rød kant
</td>
</tr>
</table>

... og det skal vel at mærke skrives hver gang et afsnit skal være grønt med rød kant.

Man starter med at skrive den HTML kode som formateringen skal gælde for. I dette tilfælde er <p> valgt. Bemærk dog at koden skrives med store bogstaver og < > udelades.

P {color: green; border: solid red;}

color og border er egenskaber.
green og solid red er værdier.

En egenskab og dens tilhørende værdi angives som egenskab:værdi adskilt af kolon ( : ). Sammenhørende egenskaber og værdier adskilles med semikolon ( ; ), og en blok af egenskaber og værdier tilhørende en bestemt HTML kode, omgives af krøllede parenteser ( {} ).

P {color:green ; border:solid red }

Syntaks: Flere koder, samme typografi

Hvis du vil angive den samme typografi til flere HTML koder, gøres dette ganske enkelt ved at skrive koderne adskilt af komma ( , ).


H1,H2,H3,H4 {
  color: red;
  text-decoration: underline}

Ved indsættelse af ovenstående typografi i et HTML dokument, vil brug af koderne <h1>, <h2>, <h3> og <h4> alle resultere i rød understreget tekst.

Syntaks: Én kode, forskellige typografier

Hvis typografien kun skal gælde i bestemte situationer for en HTML kode, eller man vil have mulighed for at definere flere typografier for den samme kode, angives et navn efter eget valg. Navn og kode adskilles af punktum ( . ). 


P.gron {
color : green;
border: solid black;
}

P.lilla {
color : purple;
border: solid black;
}

Nu kan teksten formateres således:


<p>Denne tekst bliver ikke formateret</p>

<p class="gron">Denne tekst er grøn og omgivet af
en sort kant</p>

<p class="lilla">Denne tekst er lilla og omgivet af
en sort kant</p>

Når der til en HTML-kode i typografiarket angives et navn (som gron og lilla i ovenstående) vil formateringen ganske enkelt kun forekomme hver gang du benytter den aktuelle kode sammen med dette navn til attributten class.

Syntaks: Jokeren der kan det hele

Du har set hvordan man ved navngivning og brug af attributten class kan definere typografi der kun skal forekomme på bestemte tidspunkter for en bestemt HTML kode. Men den kan også bruges som en slags joker, hvor du ikke angiver hvilken kode typografien gælder for... det forklares vidst bedst vha. et eksempel.:


.stor {
    font-size:20pt;                
     }

I ovenstående eksempel har man vha. .stor defineret en generel typografi som kan benyttes med alle HTML koder (i dette tilfælde gælder det naturligvis alle koder hvortil man kan angive en tekststørrelse). Denne typografi benyttes på følgende måde:


<p class="stor">Denne tekst har størrelsen 20 point's</p>

Syntaks: Koder mellem andre koder

Man kan også specificere typografi for en HTML kode der er placeret inden i en anden HTML kode. Man kunne f.eks. have to afsnit i sit HTML dokument som følger:

<del>
Bemærk at ovenstående DEL-kode gælder for begge afsnit idet
slutkoden for DEL er indsat efter det sidste afsnit.

<P>Nu starter andet afsnit og dermed har vi en P-kode mellem
DEL-koderne</P>
</DEL>

I tilfælde hvor man kun vil benytte en bestemt typografi for <P> når den forekommer mellem <DEL> og </DEL> skrives følgende i typografiarket.


DEL P {font-family: arial;
        color: gray;
        font-size: small}

Bemærk at DEL og P nu kun er adskilt af et mellemrum. Det er vigtigt at huske... kommer man til at indsætte et komma mellem DEL og P, får det jo en helt anden betydning, nemlig at typografien gælder for både <DEL> og <P>.

Syntaks: Den unikke typografi

Attributten id er lidt mindre fleksibel end class. Det er fordi den samtidig kan bruges til at give et sted på siden et unikt navn. id kan bruges i forskellige henseender i et HTML dokument:

Prøv at forestille dig følgende:

<P id="mitafsnit">Dette afsnit har et unikt navn.</P>
<P id="ditafsnit">Dette afsnit har også et unikt navn.</P>

Nu kan man linke til disse afsnit med f.eks.:

<A href="#mitafsnit"> Her er mit afsnit </A>
<A href="#ditafsnit"> Her er dit afsnit </A>

Hvis man så samtidig i sit typografiark har anført..

#mitafsnit {color: red}
#ditafsnit {color: blue}

...så vil teksten i det ene afsnit være blåt og i det andet afsnit vil teksten være rød.

Bemærk at du ved brug af id benytter # umiddelbart før navnet. Og som du måske allerede har gættet, må du kun benytte et navn ét sted i HTML dokumentet.

Til toppen

Interne typografiark

Vi skal i dette afsnit beskæftige os med interne typografiark. Dvs. typografi der indsættes direkte i HTML dokumentet.

Man skal her være opmærksom på, at den typografi der indsættes, kun gælder for det aktuelle dokument.

Interne typografiark: Indsættelse i <HEAD> -sektionen

Ved indsættelse af typografiark i dokumentets <HEAD> -sektion skal man benytte HTML koden <STYLE>:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="Generator" content="Stones WebWriter 3">

<style type="text/css">
<!--
H1.navn {border-width:1; border:solid; text-align:center}
TABLE {font-size:small; font-family:'Arial';}
//-->
</style>

</head>
<body>

<h1 class="navn"> Denne tekst er omgivet af en kant på 1 pixel i bredden, og er desuden centreret.</h1>

<table>
<tr>
<td>
Teksten i denne tabel skrives med fonten "Arial" i lille størrelse
</td>
</tr>
</table>

</body>
</html>

Som du kan se, opretter man vha. <STYLE> en sektion i dokumentet der indeholder det interne typografiark.

Bemærk at selve typografiarket foruden <STYLE>, er omgivet af kommentarkoden <!-- //-->. Det sikrer at teksten ikke vises i gamle browsere der ikke understøtter typografiark.

I ovenstående eksempel er indsat formatering til to HTML koder. Men der er naturligvis ingen begrænsninger på hvor stort dit typografiark må være. Bliver det meget omfattende, kan det imidlertid være en fordel at lave typografiarket i en ekstern fil.

Interne typografiark: Indsættelse i <BODY> -sektionen

Du kan også benytte typografi i <BODY> -sektionen. Dette foregår vha. attributten style (må ikke forveksles med koden <STYLE>):

<BODY>

... dokumentets indhold iøvrigt...

Et eksempel på en ofte benyttet font er 
<SPAN style="font-family: Arial">Arial</SPAN>.

... dokumentets indhold iøvrigt...

</BODY>

Denne metode er nyttig hvis man har en typografi der kun skal benyttes en enkelt eller to gange i et dokument.

Til toppen

Eksterne typografiark

Eksterne typografiark foretrækkes i mange tilfælde. Det skyldes i høj grad, at ét eksternt typografiark kan bruges i mange dokumenter.

Som tidligere nævnt kan du bruge en lille tekst-editor som f.eks. notepad/notesblok. Husk at give filen efternavnet css, som f.eks. "typark.css". Ofte er der dog i programmer til webdesign en indbygget typografiarkeditor.

Der er ikke noget hokus-pokus ved at udarbejde et eksternt typografiark. Du starter ganske enkelt et nyt dokument og begynder at skrive. Ved interne typografiark skal koden startes og afsluttes med hendholdsvis <style> og </style>, men det skal man ikke, når man udarbejder et eksternt typografiark.

Det kan eksempelvis se således ud:


A:visited	{
  color: #349238;
  text-decoration:underline}

A:active {
  color:#8E3B3C;
  text-decoration: underline;
  font-weight:bold;}

A:link	{
  color: #000065}

A:hover	{
  color:#FF0000;
  text-decoration: underline;
  font-weight:bold;}


H2.kodeeks {
  color:#FFFFFF;
  background-color:#000066;}

CODE {
  font-size:x-small;
  font-family:'Courier';
  font-weight:bold;}

TABLE {
  font-size:small;
  font-family:'Arial';}

Når du har udarbejdet dit typografiark og besluttet hvilke dokumenter du vil benytte det i, skal du linke arket til disse dokumenter. Som i interne typografiark skal dette foregå i <head></head> -sektionen. Men du skal nu benytte HTML koden <link> i stedet for <style>.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="Generator" content="Stones WebWriter 3">

<link rel="stylesheet" href="typark.css" type="text/css">

</head>
<body>

Her skrives sidens indhold, og du benytter formatering af koderne på nøjagtig samme måde som ved interne typografiark

</body>
</html>

Som du kan se kan det ikke gøres vha. <link> alene. Der skal tilføjes nogle attributter.

rel
benyttes til at fortælle hvilken relation filen har til dette dokument. Da dette er et typografiark angives "stylesheet".
href
Du kender sikkert allerede denne attribut, som generelt benyttes flittigt i HTML. Det er her man angiver adressen/url'en til typografiarket. I ovenstående eksempel er filen placeret i samme mappe som dokumentet.
type
Forskellige programsprog skal behandles forskelligt i browsere. Derfor er det også nødvendigt at angive hvilket sprog der her er tale om. Ved brug af typografiark skal "text/css" derfor angives som værdi til denne attribut.

Samtidig kan browsere, som ikke understøtter dette sprog, på denne måde undgå at bruge tid på at downloade filen.

Til toppen

Egenskaber og værdier

Syntaksen for typografiark er til at overse. Det sværeste er sådan set at finde ud af hvilke ord man bruger for egenskaber, og hvordan værdierne til disse egenskaber angives.

Du kan derfor gå til sektionen Egenskaber, forklaring hvor du finder masser af forklaringer og eksempler på brug af forskellige egenskaber i typografiark.

Har du en HTML-editor som f.eks. Stones WebWriter med en indbygget typografiark-editor, vil de mest almindelige egenskaber og tilhørende værdier også være angivet dér.


CSS Tutorials and resources

Forgotten heroes of CSS Properties CSS Tutorial

General CSS syntax More on Backgrounds in CSS

How does the CSS work? Integration of external files in CSS

More on CSS Fonts