CSS er en forkortelse for Cascading StyleSheets. De kan bruges til at opnå en lang række avancerede effekter på din hjemmeside, og de kan også bruges til at gøre nogle ting lettere for dig, når du skriver HTML kode. CSS er sit eget programmeringssprog, som ikke er bygget op på samme måde som HTML. For eksempel består CSS ikke af tags, som du kender det fra HTML. CSS kode indlejres i din HTML fil og skal stå mellem <STYLE> og </STYLE>. Alt der står imellem dette starttag og sluttag fortolkes ikke som HTML kode, men som CSS kode. Dog skal du lige sætte feltet TYPE i <STYLE> tagget til "text/css". Ellers ved Internet Explorer ikke, at det er CSS kode som kommer. Med andre ord kommer dit CSS kode til at stå mellem <STYLE TYPE="text/css"> og </STYLE>. Stylesheets skal placeres imellem <HEAD> og </HEAD> i dit HTML dokument. Du må aldrig placere dem i <BODY>!
CSS er smart blandt andet fordi det kan spare dig for en masse HTML kode. Hvis du fx ønsker at al fed skrift samtidig skal være rød, så kan du gøre det en gang for alle i dit stylesheet, så du slipper for at skulle skrive <FONT COLOR="#FF0000"> hver eneste gang du har lidt tekst, der skal være med fed skrift. Med et CSS kan du blot starte fed skrift med <B> og så vil teksten automatisk blive farvet rød, hvis du har skrevet dit stylesheet rigtigt!
Denne guide går ud fra, at du allerede har været igennem guiden om HTML. CSS bygger ovenpå HTML og derfor er det nødvendigt, at du allerede har et kendskab til HTML. Hvis du ikke allerede har gennemgået HTML guiden kan du finde den ved at følge linket nedenfor:
Gå til HTML guiden
Et stylesheet er bygget op af såkaldte "selectors". En selector er i sin basale form navnet på et HTML tag. Efter selektoren kommer noget kode, der giver indstillinger for det pågældende tag. For eksempel kan man lave en selektor der hedder P. De indstillinger man så skriver til denne selektor vil blive anvendt på al tekst i HTML dokumentet, som er indeholdt i et <P> tag. Indstillingerne skrives i blokke omkranset af { og }. Det lyder måske kryptisk, så lad os i stedet for prøve at lave et lille bitte stylesheet, så du kan se, hvordan det kommer til at se ud. Vi vil lave et style-sheet der automatisk laver al tekst indeholdt i en paragraf (dvs. omkranset af <P> og </P>) til rød tekst. Et sådant style-sheet vil se ud som følger:
<STYLE TYPE="text/css">
P {
color: #FF0000;
}
</STYLE>
Dette er et eksempel på en selektor, som vi kun giver en enkelt indstilling. Nemlig indstillingen ved navn "color". Den generelle form af en indstilling er som følger:
navn_på_indstilling : værdi_for_indstilling;
Colon separerer indstillingens navn fra dens specificerede værdi. Hver indstilling skal afsluttes med semicolon. Style-sheetet ovenfor påvirker som nævnt kun ting der står mellem <P> og </P> i dit HTML dokument. Lad os prøve at udforske dette lidt mere. Her kommer et fuldt HTML dokument, som anvender stylesheetet angivet ovenfor.
<HTML>
<HEAD>
<TITLE>Mit første stylesheet</TITLE>
<STYLE TYPE="text/css">
P {
color: #FF0000;
}
</STYLE>
</HEAD>
<BODY>
Denne tekst står ikke i en paragraf, og er derfor ikke påvirket af stylesheetet.
<P>Denne tekst står i en paragraf, og vil derfor blive farvet rød.</P>
</BODY>
</HTML>
Som producerer følgende resultat:
Tryk her for at se resultatet af ovenstående HTML kodeI dette afsnit kommer du til at lære nogle flere indstillinger at kende end "color", som vi allerede har set. Vi vil også prøve at pille ved andet end paragraffer. For eksempel vil vi prøve at ændre udseende på fed tekst. Betragt følgende eksempel:
<STYLE TYPE="text/css">
P {
color : #000000;
font-size : 10pt;
font-family: "Verdana";
font-weight: normal;
font-style: italic;
}
B {
color : #FF0000;
font-size : 12pt;
font-family: "Times";
font-weight: bold;
font-style: normal;
}
</STYLE>
Dette stylesheet specificerer indstillinger for to forskellige HTML tags, nemlig <P> og <B>. Paragraffer vil blive vist med sort farve i størrelse 10 pkt, med skrifttypen Verdana, normal vægt (dvs. ikke fed) og kursiveret skrift. Fed skrift vil blive vist med rød farve i størrelse 12 pkt, med skrifttypen Times, med fed vægt (dvs. fed skrift) og ikke normal stil (ikke kursiveret). Som du kan se kan du bruge indstillingen "font-size" til at specificerer størrelsen på din tekst målt i punkter. Du kan bruge "font-family" til at styre fonten på din tekst, du kan bruge font-weight til at vælge mellem fed eller ikke-fed skrifttype og endelig kan du bruge font-style til at vælge mellem kursiveret og normal tekst. Hvis du vil have normal tekst eller ikke-fed tekst behøver du ikke give indstillinger for font-weight. At udelade font-weight er det samme som at sætte dens værdi til "normal".
Du er nok nysgerrig efter, hvordan tingene kommer til at tage sig ud med vores nye style-sheet. Hvis vi i <BODY> delen af vores HTML dokument nu skriver:
<P>Dette er en paragraf. Sådan ser teksten ud i paragraffer</P>
<B>Dette står med fed skrift. Sådan ser teksten ud, når den er med fed.</B><BR>
Denne tekst er helt almindelig
Så kommer det til at tage sig således ud:
Dette er en paragraf. Sådan ser teksten ud i paragraffer
Dette står med fed skrift. Sådan ser teksten ud, når den er med fed.Denne tekst er helt almindelig
Hvad så, hvis man har et <B> tag indeni et <P> tag? Med andre ord, hvordan ville følgende tage sig ud, med vores stylesheet ovenfor:
Dette vil producere følgende resultat:
Denne tekst står i en paragraf, og er samtidig fed. Hvad mon der så sker?
Som du kan se "vinder" indstillingerne for <B>. Det er fordi <B> står indeni <P>. Det er altid det inderste tag, som bestemmer indstillingerne der bruges. I næste afsnit kommer du til at lære, hvordan man kan specificere indstillinger for fx fed tekst der står indeni en paragraf uden at røre ved fed tekst der står udenfor en paragraf!
En selektor behøver ikke bare være et simpelt HTML tag. Du kan også beskrive en hel sekvens af tags, som skal komme indeni hinanden i den givne rækkefølge, før indstillingerne bliver taget i brug. Lad os sige, at vi ønsker at lave et stylesheet som farver fed tekst rød hvis den fede tekst kommer indeni en paragraf. Hvis den fede tekst ikke kommer indeni en paragraf, skal den ikke farves rød! Nedenstående stylesheet giver den ønskede virkning:
<STYLE TYPE="text/css">
P.B {
color: #FF0000;
}
</STYLE>
Vi bruger punktum til at separere tags i vores selektor. "P.B" betyder således at indstillingerne angivet til denne selektor bliver taget i brug, "når et B tag findes indeni et P tag". Hvis vi nu havde følgende HTML kode sammen med ovenstående stylesheet:
<P>Dette er en paragraf</P>
<B>Dette er fed tekst</B><BR>
<P><B>Dette er fed tekst indeni en paragraf</B></P>
Så får man følgende resultat:
Dette er en paragraf
Dette er fed tekstDette er fed tekst indeni en paragraf
Hvad nu, hvis du har flere forskellige indstillinger du gerne vil kunne skifte imellem? Hvis du nu fx, vil kunne lave to slags fed tekst. En som er rød og en som er blå? Hvis du bare bruger selektoren B, så vil den jo have indvirkning på al fed tekst. Løsningen hedder klasser! Et stylesheet med to forskellige slags fed skrift, kunne se ud som følger:
<STYLE TYPE="text/css">
B.type1 {
color: #FF0000;
}
B.type2 {
color: #0000FF;
}
</STYLE>
Jeg har lavet to typer kaldet "type1" og "type2". Typer angives også efter et punktum, ligesom du så det for avancerede selektorer. Hvis du vil lave en fed skrift, der bruger indstillingerne fra type1, skal du skrive CLASS="type1" indeni dit <B> tag. Alle tags har et CLASS felt, som du kan bruge, hvis du har behov for det. Lad os prøve at se et helt dokument, som anvender stylesheetet ovenfor:
<HTML>
<HEAD>
<TITLE>Leg med klasser</TITLE>
<STYLE TYPE="text/css">
B.type1 {
color: #FF0000;
}
B.type2 {
color: #0000FF;
}
</STYLE>
</HEAD>
<BODY>
<B CLASS="type1">Dette er fed skrift type 1</B><BR>
<B CLASS="type2">Dette er fed skrift type 2</B><BR>
</BODY>
</HTML>
Der skal naturligvis være overensstemmelse mellem det man skriver i stylesheetet efter punktum, og så det man angiver i CLASS feltet. Men det burde vel også give sig selv?
Har du undret dig over, hvordan jeg har fået alle overskrifterne i dette dokument rykket lidt ind? Det har jeg gjort med CSS! Ved at bruge den indstilling der hedder "margin-left". Det virker som følger:
<STYLE TYPE="text/css">
FONT.indryk {
margin-left: 40px;
}
</STYLE>
Margin kan angives i billedpunkter (pixels) på din skærm. Ovenstående vil indrykke tekst skrevet mellem <FONT CLASS="indryk"> og </FONT> med 40 punkter. For eksempel så vil følgende:
<FONT CLASS="indryk">Denne tekst er rykket 40 punkter ind.</FONT>
Producere følgende resultat:
Denne tekst er rykket 40 punkter indDu kan også justere andre marginer med "margin-top", "margin-right" og "margin-bottom". Du kan bruge marginer til tekst ligesom jeg gjorde ovenfor. Du kan også bruge dem til at justere marginer for tabeller eller lister ved fx at bruge selektoren TABLE.indryk og så bruge <TABLE CLASS="indryk">. Prøv at eksperimentere lidt med at justere marginer, og se hvad der sker!
Man kan lave mange sjove ting med links. Udover at ændre deres udseende ved at specificere indstillinger for A tagget, så kan du også specificere, hvordan linket skal tage sig ud, hvis man fører musen hen over det! Dette gøres ved at specificere indstillinger med selektoren A:hover. Du kan specificere indstillinger for besøgte links med A:visited. Normalt vises ikke besøgte links med blå, mens besøgte links vises med lilla. Det har du måske allerede lagt mærke til? Lad os nu prøve, at lege lidt med links!
<STYLE TYPE="text/css">
A {
font-family: "Verdana";
color: #0000FF;
text-decoration: none;
}
A:hover {
font-family: "Verdana";
color: #FF0000;
text-decoration: underline;
}
</STYLE>
Jeg har samtidig introduceret en ny indstilling, nemlig "text-decoration". Den kan være "none" (normal), "underline" (understreget), "line-through" (gennemstreget) eller "overline" (med en linie oven over sig). Lad os nu se, hvordan ovenstående stylesheet vil indvirke på vores links. Hvis vi nu laver et link:
<A HREF="http://www.google.dk">Gå til google<A>
Så vil det tage sig således ud (prøv at føre musen hen over det).
Gå til googleMed CSS kan du farve området bag en tekst i en vilkårlig farve, som for at simulere en overstregningspen. Dette kan gøres med indstillingen "background-color":
<STYLE TYPE="text/css">
FONT.overstreget {
background-color: #FFFF00;
}
</STYLE>
Som sammen med følgende HTML fragment:
<FONT CLASS="overstreget">Denne tekst bliver overstreget</FONT>
Producerer følgende output:
Denne tekst bliver overstregetVi kan også lade baggrunden være et billede. For eksempel kan vi sætte baggrundsbilledet på hjemmesiden ved hjælp af følgende:
<STYLE TYPE="text/css">
BODY {
background-image: url(mitbillede.gif);
}
</STYLE>
Men det har du jo allerede lært at gøre, bare ved at bruge HTML alene. Du synes måske det er underligt, at der står url(...) omkring filnavnet. Sådan er det altid i CSS, når man skal angive et navn på en fil. Det skal altid omkranses af sådan en url(...). Nu skal jeg vise dig, at man med CSS kan flere ting med baggrundsbilleder, end man kan i almindelig HTML! Man kan nemlig styre, hvordan billede bliver gentaget hen over skærmen. Man kan også forhindre, at billedet bliver gentaget.
Du kan styre, hvordan et billede gentages hen over skærmen ved at bruge "background-repeat" indstillingen. Den kan sættes til repeat (den almindelige indstilling), repeat-x (der gentages kun i højre-venstre-retningen), repeat-y (der gentages kun i op-ned retningen) eller no-repeat (der gentages slet ikke). Lad os prøve at se et eksempel, hvor vi vælger no-repeat:
<HTML>
<HEAD>
<TITLE>Et eksempel uden repeat</TITLE>
<STYLE TYPE="text/css">
BODY {
background-image: url(background.gif);
background-repeat: no-repeat;
}
</STYLE>
</HEAD>
<BODY>
Her er et eksempel på en baggrund, der ikke bliver gentaget hen over skærmen.
</BODY>
</HTML>
Billedet "background.gif" er et der ligger her sammen med denne HTML fil. Billedet ser således ud:
Tryk her for at se resultatet af ovenstående HTML kode
Det kunne også være, du hellere ville have haft billedet centereret. Det kan klare med indstillingen "background-position". Værdien for "background-position" er to ord separeret af mellemrum. For eksempel "center center", der vil placere billedet helt i midten af vinduet. Første ord beskriver, hvordan billedet ligger vandret, mens andet ord beskriver, hvordan billedet ligger lodret. Således vil "center top", være øverst og centreret.
<HTML>
<HEAD>
<TITLE>Et eksempel uden repeat</TITLE>
<STYLE TYPE="text/css">
BODY {
background-image: url(background.gif);
background-repeat: no-repeat;
background-position: center center;
}
</STYLE>
</HEAD>
<BODY>
Her er et eksempel på en baggrund, der ikke bliver gentaget hen over skærmen.
</BODY>
</HTML>
Årsagen til at billede ikke synes at blive vist i midten, men snarere i toppen af skærmen ligger i, at siden er så lille (den er kun 1 linies tekst høj). Havde man skrevet mere tekst ville situationen være en anden.
Sidst men ikke mindst, kan du forhindre at dit baggrundsbilleder scroller, når man scroller i selve dokumentet. Du kan således opnå den effekt, at din tekst glider hen over din baggrund, når man scroller med vinduet. Dette klares med indstillingen background-attachment. Hvis du sætter værdien til "fixed", vil billedet blive stående uanset om du scroller med vinduet eller ej. Lad os, se hvordan det kommer til at tage sig ud
<HTML>
<HEAD>
<TITLE>Et eksempel uden repeat</TITLE>
<STYLE TYPE="text/css">
BODY {
background-image: url(background.gif);
background-attachment: fixed;
}
</STYLE>
</HEAD>
<BODY>
Bla bla bla bla.
</BODY>
</HTML>
Nedenfor kan du se resultatet af ovenstående, dog har jeg gentaget "bla bla" mange flere gange, så der kommer så meget tekst at man kan scrolle i vinduet.
Tryk her for at se resultatet af ovenstående HTML kodeDet følgende virker ikke i Internet Explorer, fordi Internet Explorer ikke understøtter ":hover" på andet end links. Hvis du har en anden browser som for eksempel Mozilla Firefox, vil det følgende dog virke fint. Selvom du kun bruger Internet Explorer kan det dog alligevel være instruktivt at læse dette eksempel igennem. Men du vil så ikke kunne prøve det af. Du vil senere lære at lave en fancy menu som den nedenstående som virker i alle browsere - også Internet Explorer. Så der er ingen grund til at fortvivle! Det jeg vil vise dig I dette afsnit, er hvordan man kan lave en lækker menu ved hjælp af stylesheets. Vi vil lave en menu, hvor knapperne skifter udseende, når man fører musen hen over dem. Dette eksempel bør inspirere dig til at tænke kreativt, over hvor mange spændende ting, man faktisk kan lave med stylesheets. Inden jeg gik igang designede jeg fire billeder til brug for dette eksempel. Disse billeder ser ud som følger:
 |
 |
 |
 |
Vi skal nu bruge en kombination af de ting vi har lært, til at få en animation frem! Ideen er, at jeg vil lægge billederne ind i en tabel, og så bruge selectoren ":hover" til at få billedet til at skifte, når man fører musen hen over det. Men jeg er nødt til at lave en klasse for hvert billede, da det jo ikke er det samme der skal ske for begge menupunkter. Når man fører musen hen over menupunkt 1 skal den jo vise et andet billede, end når man fører musen hen over menupunkt 2. Da tabelcellerne ikke kommer til at indeholde noget (det er kun baggrunden i dem jeg egentlig er interesseret i) så er jeg nødt til at tvinge browseren til ikke at lave tabellen lille bitte (det gør den, når man ikke fylder noget i tabellen). Til dette bruger jeg en kombination af <TABLE WIDTH="128"> og så noget CSS til at styre højden af hver tabelcelle. Jeg har nøje tilpasset værdierne til de faktiske størrelser på mine billeder (der er 128 x 64 pixels hver). Koden kommer her:
<HTML>
<HEAD>
<TITLE>Fancy menu</TITLE>
</HEAD>
<STYLE TYPE="text/css">
TD.pkt1 {
height: 64px;
background-image: url(pkt1.gif);
}
TD.pkt1:hover {
height: 64px;
background-image: url(pkt1hl.gif);
}
TD.pkt2 {
height: 64px;
background-image: url(pkt2.gif);
}
TD.pkt2:hover {
height: 64px;
background-image: url(pkt2hl.gif);
}
</STYLE>
<BODY>
<TABLE WIDTH="128">
<TR>
<TD CLASS="pkt1"></TD>
</TR>
<TR>
<TD CLASS="pkt2"></TD>
</TR>
</TABLE>
</BODY>
</HTML>
Som du kan se definerer jeg 4 selektorer i mit stylesheet. Den første håndterer menupunkt1 i sin "normale" tilstand. Det vil sige, når man ikke fører musen hen over den. Bemærk at jeg tvinger tabelcellehøjden til 64 pixels så browseren ikke kollapser cellen til en lille tynd streg fordi cellen er tom. Derudover bruger jeg "background-image" indstillingen, som du allerede har set, til at sætte baggrunden for cellen til det første billede af menupunkt 1 (det første af de fire billeder vist ovenfor). Den anden selektor er til, når man fører musen hen over menupunkt 1 (det vil sige fører musen ind over tabelcellen med CLASS="pkt1"). Her skifter vi baggrundsbilledet til billede 2 i rækken vist ovenfor. De sidste to selektorer fungerer på samme måde, bare for menupunkt 2 i stedet for. Læg som sagt mærke til, at jeg tvinger tabellen til at være bred nok ved at benytte <TABLE WIDTH="128">. Hvis man tegner noget pænere grafik end jeg har gjort og laver flere menupunkter, kan du nok tænke dig til, at det kan komme til at se rigtig lækkert ud! For at gøre det til en rigtig menu, skulle man selvfølgelig også benytte links, så der faktisk skete noget, når man trykkede på menupunkterne. Ja, ja tænker du nok. Det er godt med mig. Men hvordan pokker skal man nogensinde tilføje links? Man kan nemlig ikke pakke et <TD> tag ind i et <A> tag! En mulig løsning er at pakke hvert menupunkt ind i sin helt egen tabel og gøre hele tabellen til et link ved at pakke den ind i <A>. Dette er gjort nedenfor:
<HTML>
<HEAD>
<TITLE>Fancy menu</TITLE>
</HEAD>
<STYLE TYPE="text/css">
TD.pkt1 {
height: 64px;
background-image: url(pkt1.gif);
}
TD.pkt1:hover {
height: 64px;
background-image: url(pkt1hl.gif);
}
TD.pkt2 {
height: 64px;
background-image: url(pkt2.gif);
}
TD.pkt2:hover {
height: 64px;
background-image: url(pkt2hl.gif);
}
</STYLE>
<BODY>
<A HREF="http://www.google.dk">
<TABLE WIDTH="128">
<TR>
<TD CLASS="pkt1"></TD>
</TR>
</TABLE></A>
<A HREF="http://www.daimi.au.dk">
<TABLE WIDTH="128">
<TR>
<TD CLASS="pkt2"></TD>
</TR>
</TABLE></A>
</BODY>
</HTML>
Jeg har langt fra gennemgået alle indstillingerne man kan pille ved i CSS, men jeg håber du har fået et indblik i, hvad man kan lave med CSS og hvorfor det er smart. Hvis du gerne vil have en mere udførlig beskrivelse af samtlige indstillinger kan du prøve et af nedenstående links (de er godt nok på engelsk):
Gå til komplet beskrivelse af CSS indstillinger
Gå til CSS3 Intro