Brugernavn:



Kodeord: Husk
Forside Forum Artikler Downloads Søg
 

-- CSS Start --

Forord

Dette er min aller, aller, aller første artikel, så håber i vil tage godt imod den.
Den er nok ikke lige så avanceret som de fleste andre, men jeg vil prøve at beskrive hvordan man kan udnytte CSS bedst.

Indholdsfortegnelse

1.0   Hvorfor bruge CSS?
   1.1   Generalle eksempler
   1.2   Baggrundsfarve
   1.3   Elementer
      1.3.1   Tabel
      1.3.2   Div
   1.4   Samlet kode
   1.5   Mere

1.0  Hvorfor bruge CSS?

CSS går ud på at man stil på sine elementer på sin hjemmeside.
Der er utallige muligheder med CSS.
Der er ikke facit på hvad der er forkert, og hvad der er rigtigt, og det er op til ens egen evner hvor langt man kan gå, og hvor avanceret det bliver.
CSS giver i korte træk et bedre miljø, når du designer din hjemmeside.

1.1  Generalle eksempler

Måden bruger CSS på er at inkludere din css-fil i selve den fil som du vil lægge stil over.
Her er et eksempel hvordan du kan lave tekstfarven, skriftentypen og tekststørrelsen om på HELE dit dokument, og til det skal du have 2 filer, her er den første "style.css":
  1. body {
  2. font-family: Verdana;
  3. font-size:8pt;
  4. color: #0000CC;
  5. }
Body står for at der skal være stil over indholdet på den side (i body sektionen)

Og dit html dokument, "index.html":
Her bruger jeg et normalt/gyldigt xhtml dokument!!
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Mit dokument - XHTML gyldig!</title>
  6. <link rel="stylesheet" href="style.css" type="text/css" /> <!-- Her bliver vores css dokument inkluderet -->
  7. </head>
  8. <body>
  9. Her er mit body indhold så, og farven skulle være blå, med skrifttypen Verdana, 8pt.
  10. </body>
  11. </html>

1.2  Baggrundsfarve

Nu vil jeg vise hvordan man let kan ændre baggrundsfarven på dit dokument.
I dette kapitel skal vi kun ændre i css filen, da vi har style.css inkluderet i vores dokument.
Nu kommer vores kode til at se sådan ud:
  1.  body {
  2. font-family: Verdana;
  3. font-size:8pt;
  4. color: #0000CC;
  5. background-color: #FFCCCC;
  6. }
Tagget 'background-color', ændre i alt sin enkelthed baggrundsfarven på hele dokumentet.

1.3  Elementer

1.3.1  Tabel

I dette afsnit vil jeg beskrive hvordan man kan lave en pæn tabel.
For at få en pæn skal man have en eventuelt ramme, og en baggrundsfarve.
Det du skal gøre er at give tabellen et id, som du så skal arbejde dig ud fra i din CSS-kode.
CSS-kode:
  1. #tabel
  2. {
  3. font-size:9px; /* Vi sætter skriftstørrelsen til 9px */
  4. color:#99CCFF; /* Vi sætter skriftfarven til #99CCFF */
  5. background-color:#0099FF; /* Vi sætter baggrundsfarven til #0099FF */
  6. border:1px solid #336699; /* Vi sætter ramme farven til #336699 og størrelsen til 1px i solid form */
  7. border-collapse:collapse; /* Vi sætter rammen sammensat */
  8. width:333px; /* Vi sætter tabel bredten til 333px */
  9. text-align:center; /* Vi sætter teksten centreret i forhold til cellen */
  10. }
Htmlkode:
  1. <table id="tabel" border="1" summary="Min tabel">
  2. <tr>
  3. <th colspan="2">Overskrift</th>
  4. </tr>
  5. <tr>
  6. <td>celle 1 på første række</td><td>celle 2 på første række</td>
  7. </tr><tr>
  8. <td>celle 1 på anden række</td><td>celle 2 på anden række</td>
  9. </tr></table>

1.3.2  Div

Dette afsnit vil jeg ikke sige så meget om lige nu, men det gælder som tabellen med at man kan give den et id, som man så kan arbejde ud fra.

1.4  Samlet kode

CSS-kode:
  1. body {
  2. font-family: Verdana; /* Vi sætter skrifttypen til "Verdana"*/
  3. font-size:8pt; /* Vi sætter skriftstørrelsen til 8pt */
  4. color: #0000CC; /* Vi sætter skriftfarven til #0000CC */
  5. background-color: #898989; /* Vi sætter baggrundsfarven til #898989 */
  6. cursor:crosshair; /* Vi bruger markøren "Crosshair" på vores side */
  7. }
  8. h1 {
  9. margin:0px; /* Vi sætter margin på header 1 til 0px */
  10. padding:0px; /* Vi sætter padding på header 1 til 0px */
  11. color:#0066CC; /* Vi sætter farven på header 1 til #0066CC */
  12. font-family:Trebuchet MS; /* Vi sætter skriftypen på header 1 til "Trebuchet MS */
  13. text-decoration:underline; /* Vi sætter tekstdekoration på header 1 til understregning */
  14. font-variant:small-caps; /* Vi sætter skrifttypevariant på header 1 til stilen "small-caps" */
  15. letter-spacing:5px; /* Vi sætter bogstav-mellem på header 1 til 5px */
  16. }
  17. h1 font {
  18. color: #66CCFF; /* Vi sætter farven på header1 "font", altså et tag inden i et andet tag til #66CCFF */
  19. }
  20. #tabel
  21. {
  22. font-size:9px; /* Vi sætter skriftstørrelsen til 9px */
  23. color:#99CCFF; /* Vi sætter skriftfarven til #99CCFF */
  24. background-color:#0099FF; /* Vi sætter baggrundsfarven til #0099FF */
  25. border:1px solid #336699; /* Vi sætter ramme farven til #336699 og størrelsen til 1px i solid form */
  26. border-collapse:collapse; /* Vi sætter rammen sammensat */
  27. width:333px; /* Vi sætter tabel bredten til 333px */
  28. text-align:center; /* Vi sætter teksten centreret i forhold til cellen */
  29. }
HTML-kode
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Mit dokument - XHTML gyldig!</title>
  6. <link rel="stylesheet" href="style.css" type="text/css" /> <!-- Her bliver vores css dokument inkluderet -->
  7. </head>
  8. <body>
  9. <h1>Header<font>1</font></h1>
  10. Her er mit body indhold så, og farven skulle være blå, med skrifttypen Verdana, 8pt.
  11. <br /><br />
  12. <h1>Header<font>2</font></h1>
  13. <br />
  14. <table id="tabel" border="1" summary="Min tabel">
  15. <tr>
  16. <th colspan="2">Overskrift</th>
  17. </tr>
  18. <tr>
  19. <td>celle 1 på første række</td><td>celle 2 på første række</td>
  20. </tr><tr>
  21. <td>celle 1 på anden række</td><td>celle 2 på anden række</td>
  22. </tr></table>
  23. </body>
  24. </html>
Og her er så et lille eksempel:


1.5  Mere

Indtil nu ser det jo ikke ud af meget.
MEEEEN - Jeg regner med at skrive flere artikler om CSS, men det bliver ikke lige nu, så håber i kan bruge denne lige forløbig! :]
Sidst redigeret 07:44 17/09/2007
Oprettet af:
JensStigaard

CSS

Point modtaget: 50

Rate:
13:50 15/09/2007

Kommentarer

Giv din mening tilkende om denne artikel, eller læs andres.
Har du spørgsmål eller brug for hjælp til denne artikel henvises du til forummet.
Hmm okay, måske kunne du godt lige forklare det lidt bedre næste gang da jeg synes der burde være lidt mere tekst. Men fin artikel ellers :)
Oprettet af:
Pedersen
  Mail
18:31 15/09/2007
hmm den er Mega god!
Oprettet af:
ggilir1
  Mail
21:20 15/09/2007
En god artikel!!!
Oprettet af:
wombatten
  Mail
16:36 23/09/2007
Så css kan både skrives med html og php??
Det ret godt det du skrev.(:
Oprettet af:
Nik
  Mail
20:03 11/02/2009
ville nok have været noget bedere hvis du havde skrevet noget om hvordan man bruger css og div's i stedet for tables..
Oprettet af:
fyhring4
  Mail
18:42 20/10/2009
I stedet for at skrive #tabel (som derved giver den et id) kan man skrive .tabel - derved bliver den til en klasse, og man kan så bruge den flere gange i samme dokument, og så alligevel få dokumentet til at validere korrekt i henhold til W3C. Altså:

I CSS-filen skrives: .tabel
og i HTML-dokumentet skriver man så: <div class="tabel">

VIOLA..! :o)
Oprettet af:
GibsonSG
  Mail
19:56 04/06/2011
Du skal være oprettet og logget ind for at kommentere en artikel
Copyright © Rowl.dk v/ Michael Raagaard | 2005-12 | Alle rettigheder forbeholdes