Sådan bruger du CSS filer
- Skrevet af HotBoy77Man hører tit om CSS filer når man snakker om html.
Så hvad er de?
En CSS fil er en fil der indeholder en masse klasser, der bestemmer hvordan et html element ser ud.
Det du normalt skriver i style attributten kan du skrive i css og få et meget mere overskuelig kode.
F.eks.
<h1 style="background-color:#FF0000; font-size:32; font-family: calibri, arial, verdana; font-weight:normal"></h1> <h1></h1>
Her der to h1 tags. Den ene viser hvordan man kan få en stor rød overskrift ved at taste det direkte ind i html'en den anden viser hvordan det ville se ud hvis vi brugte CSS.
Der er vist ingen tvivl om at det er lettere at sætte en hjemmeside op med CSS filer.
For at få gang i din CSS fil skal du først have den lavet, jeg har valgt at lave en fil der hedder style.css og jeg har lagt den ind i mappen CSS.
Når du har fået oprettet din fil skal du have din html fil til at indlæse den.
For at gøre det skal du putte dette i dit <head> tag:
<link rel="stylesheet" type="text/css" href="CSS/style.css">
Nu skal du have skrevet stilen ind i CSS filen.
For at få den overstående header skal det skrives sådan her:
h1{
font-size: 32px;
color: #FF0000;
font-family: calibri, arial, verdana;
font-weight: normal;
}
Så når du skal ændre på et tags udseende skal du skrive taggets navn f.eks.
h1{
}
div{
}
Du kan også lave klasser hvor sætter det op ligesom før men istedet skriver du et punktum før navnet og derefter skriver du dit eget navn der:
.minklasse{
font-size: 32px;
color: #FF0000;
font-family: calibri, arial, verdana;
font-weight: normal;
}
og så i html'en skrive
<h1 class="minklasse"></h1>
Ligeledes kan du definere en style for et specielt id ved:
#mitid{
font-size: 32px;
color: #FF0000;
font-family: calibri, arial, verdana;
font-weight: normal;
}
Hvis du vil ændre på stylen for et link i forskellige stadier kan du skrive:
a:link
{
color: #3CB371;
}
a:visited
{
color: orange;
}
a:active
{
color: green;
}
- Deltag i community projektet hvor vi laver en simpel html template i fællesskab!
Denne artikel er læst 12272 gang(e).
Se flere artikler i kategorien HTML her.
Kommentarer til artiklen
| Webmaster - [Redigér] | 03/04 - 2011 14:30 |
| God artikel! CSS er meget brugbart, især til større projekt. Det er også smart at hvis man nu har 10 sider, hvor man har den samme det samme design på at man let kan ændre visse ting i designet på alle 10 sider bare ved at ændre stylesheet (css) filen /Andreas Lysdal |
|
| Snitsky210 - [Redigér] | 19/04 - 2011 9:46 |
Man kan ikke bare bruge helt simpelt include?
<?
include('style.css')
?>
men ellers meget go artikel, 4/5.. -Gnaskern [http://www.craxyforum.yup.dk] |
|
| Webmaster - [Redigér] | 19/04 - 2011 19:46 |
| Nej php er et server sprorg hvilket betyder at kon webserveren som php-filen ligger på kan læse php'en. CSS, html javascript osv er klient sprog som afvikles i klientens browser. Det der vil ske i dit eksempel vil bare være at CSS filens indhold vil blive skrevet ind i dokumentet og ikke linket til. Det gør at browsere ikke kan cache det så det kan betyde længere sidevisningstider. Husk at hvis du gør det skal du gøre sådan her:
<style type="text/css">
<?
include('style.css');
?>
</style>
Men jeg anbefaler at du bare linker til den. Det spare også trafik. Mvh Andreas Lysdal |
|