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

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

CSS lektion 10

Elementerne <span> og <div>

Vi har set at man via attributterne class og id har mulighed for at specificere specielle egenskaber for udvalgte elementer.
Nu skal vi se på anvendelsen af <span> og <div>, disse to elementer bliver oftest anvend sammen med attributterne class og id.
Elementet <span>
Elementet <span>

- anvendes til at markere bestemte dele af et dokument.

- anvendes inden i et blok elementet.


Tekst eksempel: De tryllebundne tilskuere, Carters medhjælpere og de to andre anatomiprofessorer der var blevet tilkald for at foretage en undersøgelse af mumien, kunne ikke ..

Her ønskes følgende fremhævet: tryllebundne tilskuere .. Carters medhjælpere .. anatomiprofessorer.


<html>
<head>
<title>span</title>
<link rel="stylesheet" type="text/css" href="span.css">
</head>
<body>
<p>De <span class="personer">tryllebundne tilskuere</span>, <span class="personer">Carters medhjælpere</span> og de to andre <span class="personer">anatomiprofessorer</span> der var blevet tilkald for at foretage en undersøgelse af mumien, kunne ikke ..</p>
</body>
</html>


Det tilhørende stylesheet (jeg har døbt den "span.css") ser ud som følgende:


Span.personer {
color: red;
}


Note: I forbindelse med <span> kunne "id" i stedet for "class" også havde været anvendt.
Elementet <div>
Elementet <div>

- anvendes til at markere et eller flere blok områder af et dokument.

Tekst eksempel: De tryllebundne tilskuere, Carters medhjælpere og de to andre anatomiprofessorer der var blevet tilkald for at foretage en undersøgelse af mumien, kunne ikke ....

Denne gang ønskes hele teksten i rød med sort baggrundsfarve.


<html>
<head>
<title>div</title>
<link rel="stylesheet" type="text/css" href="div.css">
</head>
<body>
<div id="markering">
<p>De tryllebundne tilskuere, Carters medhjælpere og de to andre anatomiprofessorer der var blevet tilkald for at foretage en undersøgelse af mumien, kunne ikke ..</p>
</div>
</body>
</html>


Det tilhørende stylesheet (jeg har døbt den "div.css") ser ud som følgende:


#markering {
background: #000000;
color: red;
}


Note: I stedet for "id" kunne man også anvende "class", hvis flere blokke ønskes fremhævet med samme markering.
I modsætning til "class" og "id", kan <span> og <div> ikke stå "alene"!



Slut med <span> og <div>, og videre til næste lektion ;-)

BOX-ORIENTET MODEL >>

 

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