14
Tags:
css
Skrevet af
Bruger #5426
@ 25.01.2005
Denne artikel henvender sig til nybegynderen, som vil til at prøve kræfter med CSS i forbindelse med HTML. Den kræver at du har prøvet kræfter med HTML og forstået det.
Hvad er CSS?
CSS står for
Cascading
Style
Sheet.
I starten, tilbage i internettets barndom, var der HTML. HTML kunne/kan bruges til at strukturere en tekst, ved at lave tekstafsnit med <p>, lave tabeller med <table> samt f.eks. at lave teksten
fed,
understreget eller
kursiv. Problemet lå i at de mere krævende internet brugere ville have flottere designs osv. Derfor blev layoutsproget CSS skabt, bl.a. for at holde HTML som det struktursprog det var lavet til at være.
Hvad kan man med CSS?
Med CSS kan du rigtig meget. Personligt bruger jeg det for det meste til at administrere designet på mine sider, så de for det første ser ens ud over det hele, og for det andet så er det nemt at ændre noget(skrifttyper, farver mm.) da det hele jo bare ligger samlet i en fil. CSS kan dog selvfølgelig også bruges til mange andre ting, bl.a. til at formatere output fra en XSLT transformation, hvilket jeg dog ikke vil gennemgå her, da denne artikel handler om hvordan man kan bruge CSS i forbindelse med HTML.
Så starter vi for alvor
Okay, så må vi heller se at komme igang med selv CSS koden, men først en lille beskrivelse af hvordan CSS fungerer.
Hvis man med HTML vil have en side der har en sort baggrund og hvid tekst skriver man det således:
<html>
<head>
<title>Eksempel 1</title>
</head>
<body bgcolor="#000000# text="#FFFFFF">
Denne tekst vil så blive ved på en sort baggrund
</body>
</html>
I CSS opnår vi samme effekt ved at skrive:
body {
background-color: #000000;
color: #FFFFFF;
}
Jeg gennemgår lige hvad de forskellige elementer i koden gør.
Body: angiver at det er <body> tagget vi vil formatere på den ene eller anden måde.
De to brackets
{ og } viser at alt imellem dem hører til body'en.
Background-color: Denne kode hentyder til baggrundsfarven, i dette eksempel #000000 (sort), men vi kunne have fået samme effekt ved at skrive
background-color: black;. Man kan også angive en farve ved at bruge RGB værdier. Det gøres ved at skrive:
background-color: rgb(0,0,0);
Hvilket vil give en sort farve igen.
Hvis det skal forklares lidt mere grundlæggende siger man at en CSS kode består af 3 elementer:
En selektor: i eksemplet er det body
En egenskab: i eksemplet er det background-color og color
En værdi: som her i eksemplet er farvekoderne
Note: Det er vigtigt hver gang du har skrevet en egenskab og en værdi, at du husker at separere dem med ; (semikolon) som jeg har gjort i eksemplerne.
Hvordan får vi det så sat sammen?
Der findes flere måder hvorpå man kan bruge CSS i et HTML dokument. Jeg vil her gennemgå med 3, for vi kan jo ikke komme igang med det sjove, før vi får sat det sammen.
Metode 1: Attributten "Style"
Første metode går ud på at man for et enkelt element, kan angive et stykke CSS. Altså påvirker den kun det enkelt element den bliver tildelt til:
<span style="color: #00ff00;">Denne tekst bliver grøn</span>
Du kan sagtens tilføje mere end en egenskab ved at bruge ; (semikolon) til at separere egenskaberne.
Metode 2: Tagget "Style"
I metode 2 indsætter man et tag i HTML filens <head> sektion, da det er det første der bliver loadet. Et eksempel kunne se således ud:
<html>
<head>
<title>Endnu et eksempel</title>
<!-- Nu kommer style tagget -->
<style type="text/css">
... Her skal din CSS være ...
</style>
<body>
Resten af siden
</body>
</html>
Metode 3: Linke til et eksternt stylesheet
Den sidste metode er nok den mest brugte, da man, som jeg har fortalt om, kan bruge den samme CSS i flere filer, og kun skal ændre CSS'en et sted.
Koden vi skal bruge ser således ud:
<link rel="stylesheet" type="text/css" [u]href="style/style.css"[/u]>
Husk at ændre
href til stien til din egen css fil.
Det skal så placeres i headeren, så det ser således ud:
<html>
<head>
<title>Endnu et eksempel</title>
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
...
Selvom du bruger et eksternt stylesheet kan du sagtens også bruge andre metoder jeg har beskrevet i samme dokument. Du skal dog være op mærksom på at hvis du tilføjer Tagget Style i headeren, er det de ting du skriver deri, som bestemmer hvordan dokumentet former sig, og ikke det eksterne stylesheet.
Flere måder at bruge CSS på
Okay nu har jeg gennemgået det mest grundlæggende i CSS. Nu skal vi til at se lidt mere på, hvad CSS egentlig kan bruges til.
En ting CSS også tit bliver brugt til, er at formatere tekst. Hvis man vil formatere teksten på en hjemmeside, skal man tilføje sine egenskaber og værdier i "body" sektionen
Eksempel:
body {
background-image: url(../images/bg.gif);
font-family: "Verdana", "Arial";
font-size: 12px;
color: #333333;
}
td {
border: 1px solid #333333;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
Denne kode er forholdsvis nem at gå til.
Vi har et baggrundsbillede: bg.gif.
Font-family fungerer på den måde at, hvis skrifttypen Verdana findes på klientens computer, så bruge den, men hvis den ikke gør bruges Arial. Man kan tilføje lige så mange skrifttyper som man vil.
Font-size angiver skrifttypen. Den kan angives på mange forskellige måder, hvilket jeg vil gennemgå senere.
Til sidst angiver vi en mørkegrå tekstfarve.
Som egenskaber for en <td> sætter vi kun en border, som ændrer rammen rundt i tabellen. 1px angiver tykeklsen på stregen. Solid fortæller hvordan borderen skal se ud. Den kan også sætte til: none, dotted, dashed, double, groove, ridge, outset, inset og hidden.
Nu begynder vi så at vælge hvordan vores links skal se ud. Til dette benytter vi et element jeg endnu ikke har introduceret: Pseudo-classes.
Først fortæller vi at linkenes decoration, altså den linje der er nedenunder, skal sættes til none, altså er den væk.
Nu kommer det smarte så. Det næste vi skriver er a:hover. :hover er den omtalte Pseudo class. Den gør at når musen svæver (hover) over linket, så bliver text-decoration sat til underline. Altså har vi nu et understreget link. Man kan opnå den samme effekt med javascript, men jeg synes personligt at det her er nemmere.
Classes og ID'er
Nogle gange kan det være nødvendigt at angive det samme stylesheet for flere forskellige elementer. Det kan gøres ved at skrive f.eks. således i sit stylesheet:
h1, p, a {
Din style
}
Men det kan også bare være nogle ganske få steder på en side, f.eks. i en menu at teksten eller noget andet skal se ens ud, og det er her Classes og id'er kommer til sin ret.
Jeg laver her et eksempel, som kunne blive til en menu. Vi starter med inden.htm:
<html>
<head>
<title>Side 1</title>
</head>
<body>
...Koden før menuen...
<table width="200" class="menu">
<tr>
<td class="menu">Menupunkt 1</td>
</tr>
<tr>
<td class="menu">Menupunkt 2</td>
</tr>
<tr>
<td class="menu">Menupunkt 3</td>
</tr>
</table>
...Koden efter menuen...
</body>
</html>
Nu kan man så bygge sit stylesheet op som følgende:
.menu {
...Her skal du skrive din style...
}
Id fungerer på næsten samme måde, hvor man skriver id="dit-id" i et element, og så kan man hente den med
#dit-id {
... Din kode...
}
bagefter.
Størrelser i CSS
Som jeg jo lovede tidligere oppe i artiklen ville jeg gennemgå flere måder, hvorpå man kan angive størrelser i CSS.
Her er en række forskellige metoder:
1. px - Pixels - Angiver en størrelse i pixels
2. pt - Punkter - Angiver en størrelse i antal punkter
3. % - Procent - Angiver en størrelse i procent. Den er nyttig, hvis man skal lave design der skal kunne se ved alle opløsninger.
Disse er de vigtigste, men der findes endnu flere, som der nemt kan findes flere informationer ved en hurtig søgning på www.google.dk.
Hvad synes du om denne artikel? Giv din mening til kende ved at stemme via pilene til venstre og/eller lægge en kommentar herunder.
Del også gerne artiklen med dine Facebook venner:
Kommentarer (8)
lidt tyndt også for nybegyndere
citat: "Id fungerer på næsten samme måde, hvor man skriver id="dit-id" i et element, og så kan man hente den med..
"
.. sorry
Uden en DTD før <html> - og vel at mærke den korrekte - kan IE ikke forstå CSS-standarden ordentligt. Det undrer mig derfor, at alle dine eksempler i en artikel om CSS mangler DTD'en. Er det hensigtsmæssigt?
Du kan f.eks. bruge:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
- hvor URL-delen er ekstremt vigtig. Du kan teste dit dokument for CSS-kompatibillitet med:
<script type="text/JavaScript">
alert(document.compatMode)
</script>
- som skal returnere 'CSS1Compat'. Læs evt. mere her:
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie60/html/cssenhancements.asp- under doctype-switch
/mvh
Ole Clausen
Desunden bruger du ikke vaild tags.
"<body bgcolor="#000000# text="#FFFFFF">"
For det første er den fin nok.. For det andet så er: Font-size ikke lig med skrifttype, for det er skriftstørrelse!.. For det 3. <link rel="StyleSheet" href="style/test.css" type="css/text">, må gerne placeres i bodydelen og jeg har ikke lagt mærke til at det gør en forskel!
Jeg har valgt at placere <link> tagget i head-sektionen, fordi det er den del der bliver loadet først, hvilket er smart.
Kan man indstille nuance, mætning og luminans ved at opsætte farver i CSS?
link-elementer
skal placeres i head-elementet, at noget fungerer i en given browser (jeg gætter på IE) betyder
langt fra at det er korrekt (X)HTML (eller CSS, for den sags skyld.
En vigtig ting er altid at få valideret sine sider, hvis der er noget der ikke fungerer som man regnede med, kan det nemt skyldes en syntaxfejl i koden. Så brug altid:
http://validator.w3.org/ og
http://jigsaw.w3.org/css-validator/
Jeg bakker Allan op. Et link element SKAL være i head sektionen.
1. Man bruger ikke <table> til at huse menu'er...
2. Hvis man bruger <table> til at huse menu'er, bruger man ikke CSS til at style dem...
Nå nok om det. Jeg savner noget information i delen om classe´s og id´s.
Hvornår bruger man class og hvornår bruger man id? Hvad er forskellen? Hvilken er bedst? Hvorfor er der to?
#ID bruger man når style koden er unik (/læs hvis kun et element skal bruge en style, bruger man ID)
- <p id="unikum">Kun et element må bære dette id!</p>
.CLASS bruger man, når style koden skal genbruges
- <p class="mainstream">Flere elementer må bære denne class</p>
-
- <p class="mainstream">Flere elementer må bære denne class</p>
Du skal være
logget ind for at skrive en kommentar.