I løbet af denne serie er der allerede blevet gjort opmærksom på stylesheets flere gange. Disse stylesheets muliggør en strikt adskillelse af layout og design. HTML-elementer er takket være CSS udelukkende ansvarlige for den logiske eller semantiske beskrivelse af webdokumentet.
Erfaringsmæssigt er det nyttigt i begyndelsen at vide, hvordan et stylesheet egentlig ser ud. Se et første eksempel.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
h1 {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
p {
font-family:Geneva, Arial, Helvetica, sans-serif;
color:#0066FF;
}
</style>
</head>
<body>
<h1>PSD-Tutorials.de</h1>
<p>dein Grafik-, Web- & Fotoportal</p>
</body>
</html>I browseren ser dokumentet sådan ud:
I HTML-filens body-område er der defineret to elementer:
• en overskrift
• en tekstafsnit
Gennem CSS bliver disse to elementer formateret. Dertil defineres i head-området et stylesheet-område ved hjælp af style. Inden for dette område foregår formateringen af elementerne.
Her er definitionen for overskriften h1 igen:
h1 {
font-family: "Courier New", Courier, monospace;
font-size: 200%;
}
Den viste syntaks fastlægger to ting:
• Skrifttypen bestemmes.
• Skriftstørrelsen defineres.
På dette tidspunkt skal det først og fremmest handle om den anvendte syntaks generelt. Enhver CSS-anvisning består grundlæggende af to dele - en selector og en CSS-deklaration. Gennem selektoren fastlægges det element, der skal formateres. Hvordan formateringen til sidst ser ud, bestemmer CSS-deklarationen. Selektoren står altid til venstre, CSS-deklarationen til højre i krøllede parenteser.
Selv CSS-deklarationen består af to elementer, nemlig egenskaben og værdien. Egenskab og værdi adskilles af et kolon. Efter værdien følger et semikolon.
Selektor {
Egenskab: Værdi;
}Integrer stylesheets
Der findes mange forskellige måder at integrere stylesheets på hjemmesider. Først og fremmest kan du tildele stile direkte til et HTML-tag. Et eksempel:
<h1 style="color: #0033CC;">PSD-Tutorials.de</h1>
I dette eksempel vises overskriften i blå farve.
Du kan også tilføje flere stile til et HTML-tag på én gang.
<h1 style="color: #0033CC; background-color: #99FF66">PSD-Tutorials.de</h1>
Skriv dem simpelthen efter hinanden, adskil dem med et semikolon.
Generelt er disse såkaldte inline-stile kun fornuftige, hvis individuelle områder på en side skal formateres individuelt. Normalt bør du dog undgå denne type direkte formatering, da HTML-koden derved bliver uoverskuelig.
Central definition i head-området
Du kan definere et centralt stylesheet inden for head-området i HTML-filen. Her defineres alle stilarter, der skal gælde for denne fil.
<head>
<style type="text/css">
.text {
font-family: "Courier New", Courier, monospace;
font-size: 200%;
}
</style>
</head>
Fordele ved denne metode: I modsætning til inline-metoden kan de definerede formater bruges flere gange i dokumentet. I det foregående eksempel blev CSS-klassen text defineret. (Yderligere oplysninger om selektorer som den her anvendte klasse vil blive givet i næste vejledning). Denne klasse kan nu bruges vilkårligt mange gange i dokumentet.
<h1 class="text">PSD-Tutorials.de</h1> <p class="text">dein Grafik-, Web- & Fotoportal</p>
En sådan definition har selvfølgelig også den fordel i forhold til inline-metoden, at ændringer kan foretages meget hurtigt.
Udliciter CSS-anvisninger
Den mest praktiske metode til CSS-definition er at udlicitere stilerne til en ekstern fil. Derved kan et vilkårligt antal HTML-filer tilgå den samme CSS-fil. Dette gør det let at opnå en ensartet formatering af alle filer, der hører til webprojektet. Senere ændringer, der skal gælde for alle sider, kan dermed udføres problemfrit.
<link rel="stylesheet" type="text/css" href="css/styles.css">
I HTML-filens hoved indsættes link-elementet. Inden for link angiver man først attributværdi-kombinationen rel="stylesheet". Derefter følger type="text/css". href-attributtet tildeles den pågældende CSS-fil. Vær opmærksom her - ligesom ved indlejring af billeder - på den korrekte sti. I det aktuelle eksempel antages det, at CSS-filen styles.css er i mappen css, som igen er på samme niveau som selve HTML-filen.
Den refererede CSS-fil er en normal tekstfil med filtypen css. De tilhørende CSS-anvisninger defineres i den eksterne CSS-fil.
h1 {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
Alternativ til den viste link-variant kan stylesheets også importeres. Her er CSS-instruktionerne placeret i en ekstern fil. Syntaxen er som følger:
<style type="text/css">
@import url("css/styles.css");
</style>
Inden for parenteserne angives stien til den css-fil, der skal importeres. @import er i øvrigt en del af CSS-syntaksen, så @import-instruktionen kan også bruges inden for CSS-filer. Dette gør det muligt at kalde andre stylesheets fra et stylesheet, hvilket muliggør en bedre organisation af stylesheets.
Naturligvis melder spørgsmålet sig, om man skal bruge link eller @import. Generelt foretrækker jeg link, da denne metode er hurtigere, hvilket resulterer i en bedre ydeevne på siden.
Mediespecifikke stylesheets
Man kan definere stylesheets til forskellige medier som f.eks. printere eller skærme. Dette gøres ved hjælp af media-attributtet. Du kan også tildele et stylesheet til flere medier adskilt af kommaer.
<link rel="stylesheet" media="screen" href="css/styles.css"> <link rel="stylesheet" media="print " href="css/druck.css">
I dette tilfælde blev der kaldt to stylesheets, et til skærmen og et til udskrift. CSS-filen druck.css indlæses derfor, når browserens udskriftsfunktion kaldes. Overordnet set er følgende media-værdier tilgængelige:
• all – gælder for alle outputmedier.
• aural – CSS-filen bruges til lydoutputsystemer.
• braille – CSS-filen er designet til punktskriftprintere med taktile feedback, der kan generere såkaldt "blindskrift".
• embossed – Braille-siderprintere adresseres hermed.
• handheld – Designet til håndholdte enheder.
• print – CSS-filen gælder for print på papir. Browserne bør automatisk henvise til denne fil, når udskriftsfunktionen kaldes.
• projection – Denne variant er designet til projicerede præsentationer.
• screen – Designet til skærmvisning.
• tty – CSS-filen er designet til medier, der bruger en fast tegngitterstruktur. Dette kan f.eks. være teleskrivere og terminaler.
• tv – Disse er designet til tv-lignende enheder. Det antages, at enhederne har en lav opløsning og kun er begrænset scrollbar.
Ud over den viste HTML-syntaks ved hjælp af link-elementet er der også specielle CSS-varianter. Her bruges @import eller @media.
<style type="text/css">
@media screen, projection {
/* Formater for skærm */
}
@media print {
/* Formater for udskrift */
}
</style>
Inden for style-elementet defineres i @media et område for formateringer, der er beregnet til et specifikt outputmedium. Efter @media skal en af de allerede beskrevne mediatyper angives adskilt af mellemrum. Flere mediatyper skal adskilles af kommaer.
