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

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

CSS lektion 08

Hvad er Pseudo-class? Lektionen forsøger at råde bod på dette!

I CSS anvendes pseudo-class (tilstande!) til, at give din selector nogle helt specielle egenskaber. Du kan for eksempel få dine links fremhævet når musemakøren føres hen over linket, eller den kan skifte farve, alt afhængig af om linket har været besøgt eller ikke! Med andre ord, så sætter du dine links i forskellige tilstande! På samme måde har du mulighed for at ændre den første linie eller det første bogstav.
Følgende beskrives i denne lektion:
  • Syntaksen
  • Anchor (links)
  • First-line
  • First-letter

Syntaksen
Som nævn i tidligere lektion, er syntaksen i CSS følgende:


Selector {Egenskab: Værdi;}


Ved pseudo-classes er syntaksen


Selector:pseudo-class {Egenskab: Værdi;}


eller


Selector.class:pseudo-class {Egenskab: Værdi;}


Alt afhængig af hvad anvendelsen er!
Anker (Anchor)
CSS egner sig godt til at opnå effekter i forbindelse med liks på siden. Man kan vise besøgte links på en måde, og ubesøgte links på en anden. Det eneste krav er at browseren understøtter dette, men det kan du læse mere om senere.

Her er et eksempel, med anvendelsen af syntaksen:


Selector:pseudo-class {Egenskab: Værdi;}



Pseudo-class: Link => uberørt link
a:link {color: blue;}

Pseudo-class: Visited => det besøgte link
a:visited {color: purple;}

Pseudo-class: Hover => når musemakøren føres over et link
a:hover {color: green;}

Pseudo-class: Active => den aktive link
a:active {color: red;}


Eksempel 1:


a:link {color: #ccff00;}
a:visited {color: #cc0000;}
a:hover {color: #00ff00;}
a:active {color: #ffcc00;}

/* Gem dette stylesheet som pseudo-class.css */



Husk! Det er vigtig at rækkefølgen hvori linkene skrives er korrekt, for at effekterne virker. Så derfor:
a:hover skal altid komme efter a:link og a:visited.
a:active skal altid komme efter a:hover

Det tilhørende html dokument:


<html>
<head>
<title>pseudo-class</title>
<link rel="stylesheet" type="text/css" href="pseudo-class.css" />
</head>
<body>
<p>links</p>
<a href="kamera.htm">kamera</a><br />
<a href="linse.htm">linse</a><br />
</body>
</html>


Vis som eksempel

Eksempel 2:

Her er pseudo-class anvend sammen med CSS's class funktion.
Eksemplet viser anvendelsen af syntaksen:

Selector.class:pseudo-class {Egenskab: Værdi;}



a.nr1:link {color: #ccff00;}
a.nr1:visited {color: #cc0000;}
a.nr1:hover {color: #00ff00;}
a.nr1:active {color: #ffcc00;}

a.nr2:link {color: #ff33ff;}
a.nr2:visited {color: #333399;}
a.nr2:hover {color: #ccff00;}
a.nr2:active {color: #ccffff;}
/* Gem dette stylesheet som pseudo-class2.css */


Det tilhørende html dokument:


<html>
<head>
<title>pseudo-class</title>
<link rel="stylesheet" type="text/css" href="pseudo-class2.css" />
</head>
<body>
<p>links nr1</p>
<a class="nr1" href="kamera.htm">kamera</a><br />
<a class="nr1" href="linse.htm">linse</a><br />

<p>links nr2</p>
<a class="nr2" href="kuglepen.htm">kuglepen</a><br />
<a class="nr2" href="linial.htm">linial</a><br />

</body>
</html>


Vis som eksempel

Eksempel 3:


a:link {
color: blue;
text-decoration: none;
}
a:visited {
color: green;
font-style: italic;
}
a:hover {
color: purple;
font-weight: bold;
letter-spacing: 5px;
text-transform: uppercase;
background-color: blue;
}
a:active {
color: red;
}

/* Filnavn: link.css */


Det tilhørende html dokument:


<html>
<head>
<title>Afsluttende eksempel</title>
<link rel="stylesheet" type="text/css" href="link.css" />
</head>
<body>
<p>links</p>
<a href="1.htm">Se de nyeste film i biffen her!</a><br />
<a href="2.htm">TV film i aften</a><br />
<a href="3.htm">Det kører jo bare derud af</a><br />
<a href="4.htm">God link - hardware</a><br />
<a href="5.htm">God link - software</a><br />
</body>
</html>


Vis som eksempel

First-line
'First-line' pseudo-element anvendes til at give en speciel effekt til den første linie af et kapittel, en sætning eller lignende.
Læg mærke til at sætningen i html dokumentet er skrevet med små bogstaver, men bliver ændre via 'first-line' pseudo-element.

Eksempel:


body {
margin-left: 20%;
margin-right: 20%;
}
p {
color: green;
}
p:first-line {
font-variant: small-caps;
color: red;
}


/* Gem dette stylesheet som first-line.css */



<html>
<head>
<title>first-line pseudo-element</title>
<link rel="stylesheet" type="text/css" href="first-line.css" />
</head>
<body>
<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>
</body>
</html>


Vis som eksempel

Prøv nu at ændre margin-left og right til 0% i stylesheet, læg mærke til at den første linie bliver tilpasset!! .... Du kan også nøjes med at lave vinduet større og mindre ved at trække i hjørnet.

First-letter
'First-letter' har samme effekt som 'first-line', blot er det kun det første bogstav som bliver ændret.
Eksempel:


body {
margin-left: 20%;
margin-right: 20%;
}
p {
font-size: 12pt;
line-height: 12pt;
}
p:first-letter {
font-size: 150%;
float: left;
}
span {
text-transform: uppercase;
}

/* Gem dette stylesheet som first-letter.css */




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


Vis som eksempel



Så meget til pseudo-class. Prøv nu at lege en smule med de ovenfor stående eksempler, det er faktisk nemmere end man tror. ;-) Næste lektion handler om attributterne class og id.

ATTRIBUTTERNE CLASS OG ID >>

 

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