HOME -> CSS_TUTORIAL -> css-04 Lørdag, 24. Juni 2017

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

CSS lektion 04

Anvendelse af flere stylesheet samtidig, multible stylesheet

"Vægtning" af stylesheet!

Man kan normalt "vægte" de enkelte stylesheet alt afhængig af deres "gennemslags kraft".
Hvis man f.eks. har anvendt inline style, vil denne form for style "overskrive" et internt stylsheet, da inline style vægter højere. Og et internt stylesheet vil igen have en højere prioritet end et ekstent stylesheet.
Her er prioritets rækkefølgen.

  1. Inline style (indeni HTML element)
  2. internt stylesheet (indeni <head> tag)
  3. Eksternt stylesheet
  4. Browserens default
Multible stylesheets - Anvendelse af flere stylesheets samtidig.
Hvis det førnævnte skal være gældende, så har man mulighed for at anvende flere stylesheets af en gang. Man kunne have en ekstern stylesheet som virker globalt. Og for specielle udvalgte HTML dokumenter kunne man yderlige anvende et internt stylesheet eller inline style. Efterfølgende eksempel illustrerer dette.

Vi starter med et ekstern stylesheet (gemmes som "02b-ekssheet.css"), som ser ud som følgende:


body {
color: #000000;
background: #33ff00;
}
p {
color: #990066;
font: 15px arial;
}
h1 {
color: #3300ff;
font: bold 25px arial;
}


Vores HTML dokument nr.1 ser ud som følgende, og refererer udelukkende til vores eksterne stylesheet.


<html>
<head>
<link rel="stylesheet" type="text/css" href="02b-ekssheet.css" />
</head>
<body>
<h1>HTML dokument nr.1</h1>
<p>Sidens baggrund er grøn. Ved HTML dokumentet nr.2 bliver baggrunden gul, da et internt stylesheet vægter højere end et eksternt stylesheet.</p><br />
<p>Denne linie vil ved HTML dokument nr.2 blive ændret via "inline style", så den bliver skrevet med rød. Vi ved at et inline style vægter højere end et internt og ekstern stylesheet.</p>
</body>
</html>


Vis som eksempel

Vores HTML dokument nr.2 refererer ligeledes til vores eksterne stylesheet, dog skal baggrunden have farven #ffff00 (gul) og i et enkelt tilfælde skal skriften i linie 2 via inline style være rød.


<html>
<head>
<link rel="stylesheet" type="text/css" href="02b-ekssheet.css" />
<style type="text/css">
<!--
body {
background: #ffff00;
}
-->
</style>
</head>
<body>
<h1>HTML dokument nr.2</h1>
<p> Sidens baggrund er nu gul, da et internt stylesheet vægter højere end et eksternt stylesheet.</p><br />
<p style="color: red;">Denne linie er skrevet med rødt. Vi ved at et inline style vægter højere end et internt og eksternt stylesheet.</p>
</body>
</html>


Vis som eksempel

Læg mærke til at overskriften der er skrevet med blå ikke ændre sig i eksemplerne. Her er der stadig det eksterne stylesheet der bestemmer.

Mums, det var en ordentlig mundful. Men fortvivle ej. Selvom det måske synes lidt uoverskuelig, så vil du i de efterfølgende lektioner få styr på det enkelte.
Det primære er at du ved at et inline style vægter højere end et internt stylesheet, som igen vægter højere end et ekstern stylesheet. ;-)

LAYOUT AF TEKSTEN >>

 

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