Under denna serie har stylesheets redan nämnts flera gånger. Dessa stylesheets möjliggör en strikt separation av layout och design. HTML-element är endast ansvariga för den logiska eller semantiska beskrivningen av webbdokumentet tack vare CSS.
Det är erfarenhetsmässigt till hjälp att veta hur en stylesheet egentligen ser ut i början. Titta på ett första exempel.
<!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>Den här dokumentet ser ut så i webbläsaren:
I HTML-filens body-område har två element definierats:
• en rubrik
• en textparagraf
Genom CSS formateras dessa två element. I head-området definieras en stylesheet-sektion med hjälp av style. Formatet av elementen sker inom detta område.
Här är definitionen för rubriken h1 igen:
h1 {
font-family: "Courier New", Courier, monospace;
font-size: 200%;
}
Genom den visade syntaxen fastställs två saker:
• Typsnittsfamiljen bestäms.
• Typsnittsstorleken definieras.
Vid denna tidpunkt handlar det i allmänhet om den använda syntaxen. Varje CSS-anvisning består i grunden av två delar - en selektor och CSS-deklarationen. Genom selektorn väljer man det element som ska formateras. Hur denna formatering ser ut bestäms av CSS-deklarationen. Selektorn står alltid till vänster, CSS-deklarationen till höger inom klammerparenteser.
CSS-deklarationen består i sin tur av två element, nämligen egenskap och värde. Egenskap och värde åtskiljs av ett kolon. Efter värdet kommer ett semikolon.
Selektor {
Egenskap: Värde;
}Inkludera stylesheets
Det finns olika sätt att bädda in stylesheets i webbsidor. För det första kan du tilldela stilinstruktioner direkt till ett HTML-tag. Ett exempel:
<h1 style="color: #0033CC;">PSD-Tutorials.de</h1>
I detta exempel visas rubriken i blå färg.
Du kan också lägga till flera stilinstruktioner till ett HTML-tag.
<h1 style="color: #0033CC; background-color: #99FF66">PSD-Tutorials.de</h1>
Skriv dem sedan bara efter varandra, åtskilda av ett semikolon.
I princip är dessa så kallade inline-styles endast användbara om enskilda delar på en sida ska formateras individuellt. Normalt sett bör du dock undvika denna typ av direkt formatering eftersom HTML-koden blir oöverskådlig på grund av det.
Central definition i head-området
Du kan definiera en central stylesheet inom sidhuvudet på HTML-filen. Alla stilar som ska gälla för denna fil definieras där.
<head>
<style type="text/css">
.text {
font-family: "Courier New", Courier, monospace;
font-size: 200%;
}
</style>
</head>
Fördelen med detta alternativ: Till skillnad från den inlinestil du kan de definierade formaten användas flera gånger i dokumentet. I det tidigare exemplet definierades CSS-klassen text. (Uttömmande information om selektorerna som användes här kommer i nästa handledning). Denna klass kan nu användas godtyckligt många gånger i dokumentet.
<h1 class="text">PSD-Tutorials.de</h1> <p class="text">dein Grafik-, Web- & Fotoportal</p>
En sådan definition har naturligtvis fördelen jämfört med inlinestilen att ändringar kan genomföras mycket snabbt.
Utlösa CSS-anvisningar
Den mest praktiska metoden för att definiera CSS är att dela upp stilarna i en extern fil. På så sätt kan en obegränsad mängd HTML-filer få åtkomst till samma CSS-fil. På detta sätt blir en enhetlig formatering av alla filer som tillhör webbprojektet enkelt möjligt. Senare ändringar som ska påverka alla sidor kan därför genomföras problemfritt.
<link rel="stylesheet" type="text/css" href="css/styles.css">
I HTML-filens head definieras link-elementet. Inom link anges först attributvärdeskombinationen rel="stylesheet". Därefter följer type="text/css". href-attributet tilldelar CSS-filen. Här - liknande inkludering av bilder - är det viktigt att ange rätt sökväg. I det aktuella exemplet antas att CSS-filen styles.css finns i katalogen css, som ligger på samma nivå som den faktiska HTML-filen.
Den refererade CSS-filen är en vanlig textfil med filändelsen css. I den externa CSS-filen definieras de relevanta CSS-anvisningarna.
h1 {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
Alternativ till den visade länkvarianten kan stilmallar också importeras. Även här är CSS-instruktionerna i en extern fil. För detta används följande syntax:
<style type="text/css>
@import url("css/styles.css");
</style>
Inom parenteserna anges sökvägen till den CSS-fil som ska importeras. Förresten är @import en CSS-syntax. Därför kan @import-instruktionen också användas i CSS-filer. Det gör det möjligt att från en stilmall ringa upp andra stilmallar, vilket möjliggör en bättre ordning på stilmallarna.
Frågan uppstår naturligtvis om man bör använda link eller @import. Jag föredrar principiellt link, eftersom den här varianten är enklare och därmed prestandan på sidan är bättre.
Mediaspecifika stilmallar
Man kan definiera stilmallar för olika medier som till exempel skrivare eller skärm. Här används attributet media. Där kan man tilldela en stilmall flera medier som är åtskilda med kommatecken.
<link rel="stylesheet" media="screen" href="css/styles.css"> <link rel="stylesheet" media="print " href="css/druck.css">
I det här fallet har två stilmallar anropats, en för skärmen och en för om sidan ska skrivas ut. CSS-filen druck.css laddas därför när webbläsarens utskriftsfunktion anropas. Följande media-värden är tillgängliga:
• all – Gäller för alla utmatningsmedier.
• aural – CSS-filen används för talutgivningssystem.
• braille – CSS-filen är avsedd för punktdruckare med taktila återkopplingen som kan generera den så kallade "blindskriften".
• embossed – Detta tilltalar punktdruckare.
• handheld – För handhållna enheter.
• print – CSS-filen gäller för utskrift på papper. Webbläsare bör automatiskt använda den här filen när utskriftsfunktionen anropas.
• projection – Denna variant är avsedd för projicerade presentationer.
• screen – Avsedd för bildskärmsvisning.
• tty – CSS-filen gäller för medier som använder en fast teckenuppsättning. Det kan till exempel vara telex och terminaler.
• tv – Detta vänder sig till TV-liknande enheter. Det antas att enheterna har låg upplösning och är bara begränsat rullande.
Förutom den visade HTML-syntaxen via länkelementet finns det också speciella CSS-varianter. Här används @import eller @media.
<style type="text/css>
@media screen, projection {
/* Format för skärmen */
}
@media print {
/* Format för utskrift */
}
</style>
Inom style-elementet definierar man genom @media ett område för formatdefinitioner som är avsedda för ett specifikt utmatningsmedium. Bakom @media, åtskilda med mellanslag, måste en av de tidigare beskrivna medietyperna anges. Flera mediatyper ska separeras med kommatecken.
