HOME -> CSS_TUTORIAL -> css-03 Søndag, 22. Oktober 2017

HOME
FORUM
OPEN DIRECTORY
BOOKMARK
Offentliggjort 2002 - Opdateret n/a

CSS lektion 03

Lektionen beskriver placeringen af dit stylesheet

Et stylesheet kan enten være placeret internt i HTML dokumentet eller som en separat fil. Er vores stylesheet placeret internt i HTML dokumentet er der yderlige to muligheder for placering. Nedenfor er listet de tre muligheder der findes for placering af et stylesheet.
  • Eksternt stylesheet
  • Internt stylesheet
  • Inline style

Eksternt stylesheet
Et eksternt stylesheet er ideelt at anvende, når man har et ønske om at skulle kunne ændre en komplet web-site, der indeholder mange sider. Her er der nemlig kun et sted der skal foretages en ændring for at opnå denne effekt.
For at kunne gøre dette skal HTML dokumentet være forbundet til stylesheet via følgende tag <link>. Tagen placeres i HTML dokumentets head som vist i eksemplet.


<head>
<link rel="stylesheet" type="text/css" href="navnafstylesheet.css" />
</head>
<body>
..
</body>


Det tilhørende stylesheet "navnafstylesheet.css" kunne se ud som følgende:


body {
color : #000000;
background-color : #ff99ff;
}
p {
font : 12px arial;
margin-left: 25px;
}


  • Det er nu browserens opgave at læse "navnafstylesheet.css", og formatere det viste HTML-dokumentet efter dette.
  • Et stylesheet dokument gemmes altid med efternavnet ".css"
  • I de følgende lektioner vil denne type stylesheet blive anvendt.
Internt stylesheet
Ved et internt stylesheet anvendes <style> taget. Denne form for stylesheet anvendes i forbindelse med dokumenter hvor man har et ønske om et bestemt layout, som kun er gældende for dette dokument.


<html>
<head>
<style type="text/css">
<!--
body {
background: #33ff99;
}
p {
font: 15px arial;
margin-left: 50px;
}
h1 {
font : bold 25px arial;
color : #999999;
}
-->
</style>
</head>
<body>
<h1>Her er overskriften</h1>
<p>Denne tekst er rykket 50px ind på venstre side.Og fonten er 15px arial. </p>
</body>
</html>


Da en browser normalt ignorerer ukendte tags, vil browsere af ældre dato ikke kunne læse <style> taget. Dette resulterer i at indholdet bliver vist på skærmen. For at undgå dette indsættes "<!--" og "-->" som er html-kommentar tegn.

Inline style
Inline style anvendes indeni selve tagen. Denne type anvendes når der ønskes en specielt egenskab som kun gælder for denne ene tag.


<html>
<head>
</head>
<body>
<p style="color: blue; margin-left: 50px">
Dette er en sætning som er skrevet med blåt, venstre margin er 50px.
</p>
</body>
</html>


Nu har du fået et indblik i de forskellige typer stylesheet. Anvendelsen af de enkelte sheets har hver deres fordel. Om du anvender eksternt, intern eller inline style, afhænger af dig. Men prøv at gå videre til næste lektion, her kan du se hvordan anvendelsen af ekstern, intern og inline style funger i kombination.
Men som nævnt tidligere vil jeg her i vores tutorial anvende ekstern stylesheet i de øvrige lektioner. ;-) Videre med næste lektion.

MULTIBLE STYLESHEET >>

 

Copyright © 2002 - 2017
NETeXplorer.dk · All rights reserved Top