| |
Det hele i én fil
|
Linked Style Sheets:
|
For at få det fulde udnytte at StyleSheets, vil man oftes lave ét style
sheet som anvendes på alle siderne på web-sitet, og dermed giver et
ensartet layout på hele web-sitet.
Et sådant Style Sheet er en fil , skrevet i f.eks
Notepad, som definerer forskellige værdier for web-sites html-koder og
classes. De enkelte web-sider
henviser derefter til denne eksterne fil.
Fordelen herved er indlysende: du kan ændre layout af hele dit web-site
ved kun at rette nogle enkelte koder i én fil. Du skal altså ikke ind og redigere i hver
enkelt side på web-sitet. Smart ... meget smart!
Pricippet er tillige enkelt. Man opretter én fil hvori
div. HTML-dkoder defineres, og på de enkelte sider på web-sitet henvises der i HEAD'er
sektoren til denne fil Nedenfor viser jeg dig hvordan du laver et style sheet
i og indsætter det på sine websider.
|
| Opret din CSS-fil |
For at springe over hvor gæret er lavest, vil
jeg bruge
det Globale Style Sheet som jeg anvendte tidligere, og lave det til et Linked Style Sheet.
Du gør det samme ..
|
|
- Åbn web-siden med det Global Style Sheet som du oprettede før
- Marker hele koden mellem <Style type="text/css"> og </Style>
og vælg 'Klip' (Ctrl +x)
- Åbn Notepad og indsæt koden her (Ctrl +V)
|
| Gem Style Sheet : |
- Gem nu filen som: ditnavn_style.css (bemærk filtypen)
- Gem filen i roden af den mappe hvor dine web-sider ligger.
|
| Indsæt link på web-siderne |
Nu skal du indsætte et link på alle dine web-sider til
style-sheet'et.
- Åbn en af dine web-sider
- Vælg fanebladet HTML - så du ser sidens html-koder
- I HEAD sektoren mellem <head> og ...</head> indsætter du
følgende kode:
<link rel="stylesheet" href="ditnavn_style.css" type="text/css">
- gem html-filen og check resultatet i browseren
- Se
min side her
|
| Hva så ..? |
Umiddelbart er min side ovenfor
jo præcist magen til den du så tidligere.
Ja det er sandt. Men prøv at se koderne bag siden!
Men se igen - der er INGEN formateringskoder - det er alt sammen
flyttet til det eksterne style sheet. Det eneste du ser heraf - er et link
til stylesheet'et.
Forestil dig nu at jeg havde 5-10-100 sider på mit website!
Alle sider sider kunne opdateres mht layout ved blot at ændre lidt i én fil
, nemlig mit eksterne stylesheet!
Thats the beauty of it all ! |
| |
- Husk hver gang du laver ændringer:
- at gemme dit Skyle Sheet - og
- at opdatere brower vinduet (F5) for at se ændringerne
|
Problemer... :
|
Virker det ikke.....så check at du har husket
kollon (:)
semikolon (;)
'tuborg-klammerne'
{...}, og anførselstegn " ..." |
| Whats next ? |
Hvis du har fået blod på tanden
af style sheet her - og ikke mindst linked stylesheets , så venter der mere
guf til dig , når jeg får skrevet lidt om POSITION.
|
Læs mere
|
 Der er masser af hjælp
og inspiration at finde på www om Style Sheets -
se siden Links |
www.htmlhelp.com/reference/css/ |
|
| |
|
