I løpet av denne serien har det allerede blitt påpekt flere ganger at Stylesheets er viktig. Disse Stylesheets gjør det mulig med en strikt separasjon av layout og design. Takk være CSS er HTML-elementer kun ansvarlig for den logiske og semantiske beskrivelsen av webdokumentet.
Det er nyttig å vite hvordan et Stylesheet ser ut i begynnelsen. Se på 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 nettleseren ser dokumentet slik ut:
I body-delen av HTML-dokumentet er to elementer definert:
• en overskrift
• en tekstavsnitt
Disse to elementene formateres ved hjelp av CSS. For dette formålet blir det definert en Stylesheet-seksjon i head-delen ved hjelp av style. Inni denne seksjonen utføres formateringen av elementene.
Her er definisjonen for overskriften h1 igjen:
h1 {
font-family: "Courier New", Courier, monospace;
font-size: 200%;
}
Ved den viste syntaksen fastsettes to ting:
• Skriftfamilien bestemmes.
• Skriftstørrelsen defineres.
På dette tidspunktet handler det først og fremst om den generelle syntaksen som brukes. Enhver CSS-instruksjon består grunnleggende av to deler - en velger og en CSS-deklarasjon. Gjennom velgeren angir man elementet som skal formateres. Hvordan denne formateringen til slutt ser ut, bestemmes av CSS-deklarasjonen. Velgeren er alltid til venstre, CSS-deklarasjonen til høyre i krøllete parenteser.
Den faktiske CSS-deklarasjonen består igjen av to elementer, nemlig egenskap og verdi. Egenskap og verdi skilles med et kolon. Et semikolon følger veriden.
Selektor {
Egenskap: Verdi;
}Inkludering av Stylesheets
Det finnes ulike måter å inkludere Stylesheets på nettsider. Først kan du tildele stilmeldinger direkte til et HTML-tag. Et eksempel:
<h1 style="color: #0033CC;">PSD-Tutorials.de</h1>
I dette eksempelet vises overskriften i blå farge.
Du kan også legge til flere stilmeldinger til en HTML-tag samtidig.
<h1 style="color: #0033CC; background-color: #99FF66">PSD-Tutorials.de</h1>
Bare noter dem etter hverandre, adskilt med et semikolon.
Prinsipielt er disse såkalte Inline-stilene bare hensiktsmessige når individuelle deler på en side skal formateres individuelt. Vanligvis bør du imidlertid unngå denne direkte formateringen, da HTML-koden blir rotete.
Sentral definisjon i head-delen
Du kan definere et sentralt Stylesheet innenfor HTML-dokumentets head-delen. Der blir alle stiler definert som skal gjelde for dette dokumentet.
<head>
<style type="text/css">
.text {
font-family: "Courier New", Courier, monospace;
font-size: 200%;
}
</style>
</head>
Fordelen med denne varianten er at de definerte formatene kan brukes flere ganger i dokumentet, i motsetning til Inline-varianten. I det forrige eksempelet ble CSS-klassen text definert. (Detaljert informasjon om velgerne, for eksempel klassen som er brukt her, følger i neste veiledning). Denne klassen kan nå brukes vilkårlig mange ganger i dokumentet.
<h1 class="text">PSD-Tutorials.de</h1> <p class="text">dein Grafik-, Web- & Fotoportal</p>
En slik definisjon har selvsagt den fordelen i forhold til Inline-varianten at endringer kan gjøres raskt.
Utsiling av CSS-instrukser
Den definitivt mest praktiske måten å definere CSS på er å lagre stilene i en ekstern fil. Dette gjør at en hvilken som helst HTML-fil kan få tilgang til den samme CSS-filen. Dermed blir en enhetlig formatering av alle filer som tilhører webprosjektet enkelt mulig. Senere endringer som skal påvirke alle sider, kan utføres uten problemer.
<link rel="stylesheet" type="text/css" href="css/styles.css">
I filhodet til HTML-filen defineres link-elementet. Først angis attributtverdikombinasjonen rel="stylesheet" innenfor link. Deretter følger type="text/css". href-attributtet tildeles den aktuelle CSS-filen. Vær oppmerksom her - på samme måte som ved innsetting av bilder - på den riktige filbanen. I dette eksempelet antar jeg at CSS-filen styles.css befinner seg i mappen css, som igjen ligger på samme nivå som den faktiske HTML-filen.
I den refererte CSS-filen er det en vanlig tekstfil med css-suffiks. De tilsvarende CSS-instruksjonene er definert i den eksterne CSS-filen.
h1 {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
Alternativ til den viste link-varianten kan stiler også importeres. Også her er CSS-angivelsene i en ekstern fil. For dette brukes følgende syntaks:
<style type="text/css">
@import url("css/styles.css");
</style>
Innenfor parentesene angir man banen til den CSS-filen som skal importeres. For øvrig er @import en CSS-syntaks. Derfor kan @import-angivelsen også brukes innen CSS-filer. Dette gjør det mulig å kalle andre stiler fra et stilark, som tillater bedre organisering av stilarkene.
Naturligvis melder spørsmålet seg om man bør bruke link eller @import. Jeg foretrekker generelt link, ettersom denne varianten er enklere og dermed gir bedre ytelse til siden.
Mediespesifikke stiler
Man kan definere stiler for helt forskjellige medier som for eksempel skrivere eller skjermen. For dette brukes attributtet media. Man kan også tildele et stilark til flere medier separert med komma.
<link rel="stylesheet" media="screen" href="css/styles.css"> <link rel="stylesheet" media="print " href="css/druck.css">
I dette tilfellet ble to stiler kalt, en for skjermen og en annen for tilfelle siden blir skrevet ut. CSS-filen druck.css blir derfor lastet inn når nettleserens utskriftsfunksjon blir kalt. Totalt er følgende media-verdier tilgjengelige:
• all – Gjelder for alle utgivelsesmedier.
• aural – CSS-filen brukes for taleutgavesystemer.
• braille – CSS-filen er ment for punktskrivere med taktil tilbakemelding som kan lage såkalt "blindskrift".
• embossed – Dette henvender seg til punktskrivere.
• handheld – Ment for håndholdte enheter.
• print – CSS-filen gjelder for utskrift på papir. Nettlesere bør automatisk ty til denne filen når utskriftsfunksjonen kalles.
• projection – Denne varianten er ment for projiserte presentasjoner.
• screen – Tenkt for skjermvisning.
• tty – CSS-filen gjelder for medier som bruker et fast tegnrutenett. Dette kan for eksempel være fjerntelegrafier og terminaler.
• tv – Dette henvender seg til TV-lignende enheter. Det antas at enhetene har lav oppløsning og er begrenset rullbare.
I tillegg til den viste HTML-syntaksen via link-elementet finnes det også spesielle CSS-varianter. Der blir @import eller @media brukt.
<style type="text/css">
@media screen, projection {
/* Formater for skjermen */
}
@media print {
/* Formater for utskrift */
}
</style>
Innenfor style-elementet definerer man via @media et område for formatdefinisjoner som er ment for et spesifikt utgivelsesmedium. Bak @media, adskilt av mellomrom, må en av de allerede beskrevne mediatypene oppgis. Flere mediatyper må noteres adskilt med komma.
