Selectors
CSS er ikke bare til brug for formatering af HTML- og XHTML-dokumenter, men til alle slags XML-dokumenter, hvor det giver mening at skabe en præsentation. Da nogle dokumenter i rå form kun er beregnet til maskin-læsning, dækker det ikke alle XML-dokumenter.
Lad os først se på, hvorledes CSS-reglerne er opbygget. En CSS-regel består af tre dele: En selector, som bestemmer, hvad der skal formateres, og en liste af egenskaber og deres værdier:
h1 { font-family: Arial, Helvetica, sans-serif; font-size: 1em; font-weight: bold }
Denne regel siger, at alle h1-elementerne skal formateres med skrifttypen Arial, eller alternativt Helvetica eller en anden sans-serif skrift. Skriftstørrelsen sættes til 1em, der betyder samme størrelse som browserens standard-skrifttypestørrelse. Til sidst sættes skriftsnittet til fed skrift.
Når elementernes egenskaber skal sættes, kan det gøres ved blot at slå op i en tabel over CSS1- og CSS2-egenskaber. Der findes en glimrende oversigt på webstedet W3Schools.
Selectorne, som bestemmer, hvad der skal formateres, bygger på elementer, klasser og id'er. Et element er i øvrigt blot det rigtige navne for et tag. Klasserne refererer til class-attributten, som kan indgå i alle XHTML- og HTML 4.01-elementer. Id'et er id-attributten, som er en speciel attribut i XML-sammenhæng. Værdien af id-attributten skal nemlig være unik i forhold til andre id-attributter i XML-dokumentet.
Et mærke benyttes som selector ved bare at angive det, som i eksemplet ovenfor. En klasse og et mærke kan kombineres, på formen
mærke.klasse
Hvis man ønsker, at nogle af ens overskrifter skal være orange, kan det altså klares ved at tildele dem en class-attribut med en værdi som "orange", på sådan vis:
<h1 class="orange">
Disse elementer kan så udvælges med CSS-selectoren
h1.orange { color: orange }
Slutteligt kan mærkets id-værdi benyttes som selector. Hvis mærket ser således ud:
<h1 id="overskrift1">
- kan man benytte "overskrift1" som selector, ved at sætte en havelåge foran. CSS-reglen kan se således ud:
#overskrift1 orange { color: orange }
Pseudo-klasser
Pseudo-klasser
Der findes også et sæt af klasser, som afhænger af en eller anden tilstand. Mest kendt er pseudo-klassen hover, som udvælger de elementer, som musen befinder sig over. Med andre ord virker hover som en slags mouseOver-handler. Det kan så benyttes til at skabe effekter, som det kendes fra JavaScript. I Internet Explorer 6 er det kun a-elementet, som har tilknyttet hover, og det kan benyttes således:
a:hover { color: red }
Denne regel bevirker så, at links skifter farve til rød, når musen bevæges hen over linket. I Mozilla 1.0 kan hover benyttes med alle elementer, hvilket kan bruges til at bygge menuer med.
Man kan også danne selectorer som sekvenser af elementer. Hvis man vil gøre em-elementer inden for li-elementer orange, som kan det klares med sekvensen li em som selector, som i reglen
li em { color: orange }
Hvis flere selectorer benytter den samme regel, kan de oplistes med komma imellem. Så de to foregående regler kan skrives som
h1.orange, li em { color: orange }
Man skal aldrig benytte STYLE-elementet eller inline-CSS definitioner. Det er en uskik, og det hævner sig - altid.
CSS til XML
CSS til XML
CSS er ikke bare beregnet på HTML og XHTML, men har også en funktion i forbindelse med XML-dokumenter. I forbindelse med XML vil man dog ofte have et behov for at udtrække de relevante data ved hjælp af XML-transformationer, XSLT. Så kan man også placere elementerne og noderne i en rækkefølge, som er mere naturlig til præsentation.
Men hvis data skal vises frem, skal der jo vælges et eller andet slut-format, og det behøver altså ikke være XHTML, men kan ligeså godt være XML med et CSS-stylesheet. Fordelen ved at benytte XML i stedet for XHTML er, at browserne fremviser dokumentet på samme måde som hvis det var XHTML, og samtidig bevarer man XML-dokumentets semantik, så maskin-agenter også kan læse siderne.
Når et CSS-ark skal kobles til et HTML- eller XHTML-dokument, så sker det med <link>-elementet. I XML kobles et stylesheet til XML-dokumentet med en processerings-instruktion (PI), som ser sådan ud:
<?xml-stylesheet type="text/css" href="style.css"?>
Det skal placeres før XML-dokumentets rod-element, så starten af XML-dokumentet kan se sådan ud:
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="style.css"?>
<rodmaerke>
...
...
Når det drejer sig om HTML og XHTML, så bygger de CSS-regler, man definerer, på et virtuelt CSS-ark, som browseren renderer elementerne med. Det disse regler, som ens CSS-definitioner så bygger videre på, eller overskriver.
Browseren ved altså nogle ting om de forskellige elementer fra XHTML-navnerummet, for eksempel at et <p>-element skal fremvises som et blok-element, og at <a>-elementer skal fremvises som et inline-element.
Når browseren skal fremvise et XML-dokument, kan den ikke gøre sig nogen forudsætninger om hvordan de forskellige mærker skal fremvises. Derfor skal man angive alle de grundlæggende egenskaber, som mærket skal have.
Den vigtigste egenskab er, om de elementer, som selectoren udvælger, skal vise som et blok-element (block), eller som et inline-element (inline).
Et blok-element fremvises som en kasse, og har underliggende egenskaber som indre og ydre margin, rammer og så videre. Eksempler på blok-elementer i XHTML og HTML er <h1>- og <p>-elementet.
Inline-elementer placeres i forhold til tekst-forløbet. I XHTML og HTML er det eksempelvist <a>-elementet og <img>-elementet.
Derudover fungerer CSS-ark til XML stort set som CSS-ark til HTML og XHTML gør. Standarden siger tillige, at CSS-arket skal tillade XPath-udtryk som selectors, men det er der ingen af de store browsere, som har implementeret endnu. Til allersidst skal det nævnes, at tegn som er tilladt som mærker i XML, men ikke som selector i CSS, kan "ecscapes" ved at sætte baglæns skråstreg "\" foran tegnet. XML-mærket rdf:description kan så skrives som rdf\:description i CSS-arket.
Der er masser af eksempler på dygtig anvendelse af CSS på nettet, og CSS-guruen Eric A. Meyer har samlet en del information om emnet på sit website. En række flotte eksempler på ren CSS kan findes på Meyers site CSS/Edge.
