-
Stijlen
in cascade
Stijlen in cascade geven geen
probleem voor Netscape Communicator. Voor de originele specificaties in
dit verband kan je terecht op de webpagina:
http://www.w3.org/pub/WWW/TR/REC-CSS1
Een stijlenblad (Eng. style sheet)
bestaat uit twee of meer stijldefinities. In CSS-representatie
worden de eigenschappen en hun waarden
vermeld in gekrulde haakjes na de selectiecriteria voor die stijl.
De selectiecreteria bepalen op welke
elementen de stijl zal worden toegepast. Als het selectiecriterium een
HTML-element is, wordt de stijl toegepast op elk voorkomen van dat element.
Het selectiecriterium kan ook een klasse (Eng. class) zijn, een ID, of
afhankelijk van de context. We zullen van elk een voorbeeld geven.
Elke eigenschap wordt gevolgd door
een dubbelpunt, en daarna de betreffende waarde voor die eigenschap. Alle
paren eigenschap/waarde worden gescheiden door een kommapunt.
Voorbeeld:
Het volgende voorbeeld geeft de
definitie van twee stijlen in cascade. Het eerste definieert de fontgrootte
op 18 voor alle <P> elementen en de linkermarge voor alle <P> elementen
op 20.
De tweede stijldefinitie specifieert
de kleur blauw voor alle <H1> elementen.
<STYLE TYPE="text/css">
<!--
P {font-size:18pt; margin-left:20pt;}
H1 {color:blue;}
-->
</STYLE>
Eerste
oefening: Oef1.html
Probeer een en ander eens uit in
het volgend voorbeeld:
<html>
<head>
<title>Oef1</title>
</head>
<body>
<STYLE TYPE="text/css">
<!--
P {font-size:18pt; margin-left:20pt;}
H1 {color:blue;}
-->
</STYLE>
<H1>Onze nieuwe hoofding</H1>
<P>Eerste paragraaf</P>
Gewone tekst
<P>Tweede paragraaf</P>
</body>
</html>
Je kan stijldefinities insluiten
in commentaar <!-- --> voor de browsers die het <STYLE> tag niet
herkennen.
Belangrijk: Wanneer je verschillende
stijldefinities plaatst in een stijl, gebruik geen dubbele aanhalingstekens!
Laat ook geen kommapunten weg! Als
je één enkele kommapunt vergeet, zal de hele deinitie waardeloos
zijn. Ook als je er een teveel plaatst.
Terug naar begin
-
Gebruik
van Javascript
Met Javascript kun je gebruik
maken van het Javascript document object model. In dit model kun je aan
een document, zoals een webpagina, denken aan een object met eigenschappen
die je kan wijzigen.
Elke eigenschap kan weer een object
zijn met weer andere eigenschappen.
Bijvoorbeeld:
Het volgende voorbeeld verandert
de kleureigenschap van de <H1> eigenschap.
document.tags.H1.color = "red";
De tags eigenschap geldt altijd
voor het huidige document, dus mag je het woordje document hier weglaten.
Het volgende voorbeeld geeft twee
stijldefinities.
De eerste specifieert de fontgrootte
als 18 voor alle <P> elementen, en zet de marge op 20 voor alle <P>
elementen.
De tweede definitie zet de kleur
op blauw voor alle <H1> elementen.
<STYLE TYPE = "text/javascript">
tags.P.fontSize = "18pt";
tags.P.marginLeft = "20pt";
tags.H1.color = "blue";
</STYLE>
Voor deze stijlbalden mag je geen
commentaar <!-- --> gebruiken!
Je kan ook gebruik maken van de
syntax (tags.element) om een kortere schrijfwijze te bekomen:
Stijldefinitie
in javascript: Oef2.html
Probeer een en ander uit in het
volgende voorbeeld:
<body>
<STYLE TYPE = "text/javascript">
tags.H1.color = "red";
with (tags.P) {
color="green";
fontWeight="bold";
fontStyle="italic";
fontFamily="helvetica"; fontSize=20;
}
</STYLE>
<H1>Onze nieuwe hoofding</H1>
<P>Eerste paragraaf</P>
Gewone tekst
<P>Tweede paragraaf</P>
</body>
</html>
Hieronder nog een voorbeeld om de
smaak te pakken te krijgen.
Stijldefinitie
in CSS: Oef3.html
<html>
<head>
<title>Oef1</title>
</head>
<body>
<STYLE TYPE="text/css">
P { textAlign:center;
margin-left:20%; margin-right:20%;}
H4 { text-decoration:underline;
color: green;}
H5 { text-transform:uppercase;
color: red;
border-width:4pt; border-style:outset;
background-color:yellow;
padding: 4pt;
border-color:red;}
BLOCKQUOTE {
color:blue; font-style:italic;
line-height:1.5; text-indent:10%;}
</STYLE>
<H4>Hoofding 4 onderlijnd</H4>
<H5>Hoofding 5 </H5>
<BLOCKQUOTE>
This is a blockquote. It
is usual for blockquotes to be indented, but the first line of this blockquote
has an extra indent. Also the line height in this blockquote is bigger
than you usually see in blockquotes.
</BLOCKQUOTE>
<P>This paragraph has
a text alignment value of center. It also has
large margins, so each line
is not only centered but is also inset on both sides from the element that
contains it, which in this case is the document.</P>
</body>
</html>
Probeer ook eens in Javascript-syntax:
Stijldefinitie
in javascript: Oef3_js.html
<html>
<head>
<title>Oef1</title>
</head>
<body>
<STYLE TYPE="text/javascript">
with (tags.P) {
textAlign = "center";
marginLeft="20%";
marginRight="20%";}
with (tags.H4) {
textDecoration = "underline";
textcolor = "green";
textTransform = "uppercase";}
with (tags.H5) {
color = "red";
borderWidth="4pt"; borderStyle="outset";
backgroundColor="yellow";
paddings("4pt");
borderColor="red";}
with (tags.BLOCKQUOTE) {
color="blue"; fontStyle="italic";
lineHeight = 1.5; textIndent
= "20pt";}
</STYLE>
<H4>Hoofding 4 onderlijnd</H4>
<H5>Hoofding 5 met boord</H5>
<BLOCKQUOTE>
This is a blockquote. It
is usual for blockquotes to be indented, ut the first line of this blockquote
has an extra indent. Also the lie height in this blockquote is bigger than
you usually see in blockquotes.
</BLOCKQUOTE>
<P>This paragraph has
a text alignment value of center. It also has
large margins, so each line
is not only centered but is also inset on both sides from the element that
contains it, which in this case is the document.</P>
</body>
</html>
Terug naar begin
-
Het
overerven van stijlen
Een HTML-element dat een ander
element bevat, wordt aanzien als een parent element., en het het
element dat het bevat is het child-element.
In onderstaand voorbeeld is het
<BODY> element de parent van het <H1> element, en <H1>
is het parent-elemnet van de <EM> tag.
<BODY>
<H1>The headline <EM>is</EM>
important!</H1>
</BODY>
In veel gevallen erven de child-elementen
de eigenschappen van het parent-element. Stel dat we aan <H1> enkele
stijleigenschappen toekennen: (Probeer uit!)
<STYLE type="text/css">
H1 {color:blue;}
</STYLE>
<BODY>
<H1>The headline <EM>is</EM>
important!</H1>
In dit geval zal het child-element
eveneens de kleur blauw aannemen.
Nochtans, stel dat je eerst een
stijl gedefinieerd had, waardoor <EM>-elementen rood zijn,
Dan zou die kleur rood blijven,
omdat eigenschappen van het child-element deze van de parent overschrijven
(Eng. override).
Voeg in de oefening de juiste script
bij en controleer!
Overerving begint op het hoogste
niveau, dus de <HTML> tag, en daarnder de <BODY>tag.
Om dus eigenschappen voor alle elementen
van een webpagina te definiëren kan je een stijl definiëren voor
het <BODY> element zoals hieonder, waarin dat we het ganse document
in het groen willen weergeven:
CSS Syntax
<STYLE TYPE="text/css">
BODY {color: green;}
</STYLE>
JavaScript Syntax
<STYLE TYPE="text/javascript">
tags.BODY.color="green";
</STYLE>
Opgelet: deze code moet nu in de
<head>tag geplaatst worden, vooraleer de <BODY>tag wordt uitgevoerd!
Probeer uit!
Enkele eigenschappen worden niet
overgeërfd van het parent-element, maar in de meeste gevallen is het
resultaat hetzelfde alsof het werd overgeërfd.
De achtergrondkleur wordt niet overgeërfd,
maar deze is niettemin zichtbaar in het child-element, omdat dit doorzichtig
is.
Terug naar begin
-
Stijlbladen
definiëren in een extern bestand.
Je kan stijlen definiëren
in een apart bestand, en het daarna met je document verbinden. Hierdoor
kun je één stijlblad gebruiken voor meerdere documenten door
een link te leggen naar het juiste stijlblad.
De syntax is dezelfde als voor het
definiëren van stijlen in een document, maar je hoeft de <STYLE>
</STYLE> tags niet te gebruiken.
CSS Syntax
/* external style sheet mystyles1.htm
*/
all.BOLDBLUE {color:blue;
font-weight: bold;}
H1 {line-height: 18pt;}
P {color: yellow;}
/* end of file */
JavaScript Syntax
/* external style sheet mystyles1.htm
*/
classes.BOLDBLUE.all.color
= "blue";
classes.BOLDBLUE.all.fontWeight
= "bold";
tags.H1.lineHeight="18pt";
tags.P.color="yellow";
/* end of file */
Om deze stijldefinities in een webpagina
te kunnen gebruiken moet de <LINK>tag worden gebruikt zoals hieronder:
CSS Syntax:
<HTML>
<HEAD>
<TITLE>A Good Title</TITLE>
<LINK REL=STYLESHEET TYPE="text/css"
HREF="http://style.com/mystyles1.htm">
</HEAD>
JavaScript Syntax:
<HTML>
<HEAD>
<TITLE>A Good Title</TITLE>
<LINK REL=STYLESHEET TYPE="text/javascript"
HREF="http://style.com/mystyles1.htm">
</HEAD>
Voorbeeld
van een extern stijlblad: Oef5.html
Maak eerst een stijlblad aan met
de naam Mijnstijl1.html als volgt:
/* extern stijlbald Mijnstijl1.html
*/
all.BOLDBLUE {color:blue;
font-weight: bold;}
H1 {line-height: 18pt;}
P {color: red;}
/* einde externe stijldefinitie
*/
Gebruik dit in de volgende webpagina
Oef5.html:
<HTML>
<HEAD>
<TITLE>A Good Title</TITLE>
<LINK REL=STYLESHEET TYPE="text/css"
HREF="Mijnstijl1.html">
</HEAD>
<BODY>
<H1 CLASS=BOLDBLUE>Hoofding</H1>
<P>Dit is gedefinieerd
met een extern stijlblad</P>
</BODY>
</HTML>
Hierin zie je reeds een voorbeeld
van het gebruik van classes (CLASS = BOLDBLUE). Dit wordt in het volgende
hoofdstuk verder uitgelegd.
Gebruik ook nog eens de javascript-syntax:
/* external style sheet mystyles1.htm
in javascript */
classes.BOLDBLUE.all.color
= "blue";
classes.BOLDBLUE.all.fontWeight
= "bold";
tags.H1.lineHeight="18pt";
tags.P.color="red";
/* end of file */
Wat moet er veranderen in Oef5.html?
Terug naar begin
-
Definiëren
van stijlklassen
Je kan een willekeurige stijldefinitie
toepassen in bepaalde elementen door gebruik van de CLASS-attribuut in
een HTML-tag. Dit is handig als je niet alle <H1> elementen dezelfde
kleur wil geven bijvoorbeeld.
Het volgende voorbeeld definieert
een klasse GREENBOLD:
CSS Syntax
<STYLE TYPE="text/css">
all.GREENBOLD {color:#44CC22;
font-weight:bold;}
</STYLE>
JavaScript Syntax
<STYLE TYPE="text/javascript">
classes.GREENBOLD.all.color
= "#44CC22"
classes.GREENBOLD.all.fontWeight
= "bold"
</STYLE>
Om deze in een webpagina te kunnen
gebruiken voor de H1-tag, doe je dit als volgt in de webpagina:
<H1 CLASS=GREENBOLD>This
Heading Is Very Green</H1>
<P CLASS = GREENBOLD>This
paragraph uses the style class GREENBOLD. You can use the CLASS attribute
to specify the style class to be used by an HTML element.</P>
<BLOCKQUOTE CLASS
= GREENBOLD>
This blockquote uses
the style class GREENBOLD.
</BLOCKQUOTE>
Voorbeeld
definiëren van stijlklassen: Oef6.html
<html>
<head><title>Klassen</title>
<STYLE type="text/javascript">
classes.DARKYELLOW.all.color="#EECC00";
classes.RED1.P.color = "red";
classes.RED1.P.fontWeight
= "bold";
classes.RED1.BLOCKQUOTE.color
= "red";
classes.RED1.BLOCKQUOTE.fontWeight
= "bold";
</STYLE>
<BODY>
<P CLASS=red1>This paragraph
is red.</H1>
<P>This paragraph is in
the default color, since it does not use the lass RED1.</P>
<BLOCKQUOTE CLASS="red1">This
blockquote uses the class RED1.
</BLOCKQUOTE>
<H5 CLASS=red1>This H5
element tried to use the style RED1, but was not allowed to use it.</H5>
<P CLASS=darkyellow>This
paragraph is dark yellow.
<H5 CLASS=darkyellow>This
H5 element tried to use the style DARKYELLOW and was succesful.</H5>
</BODY>
</HTML>
Probeer ook eens in de javascript
versie:
<STYLE type="text/javascript">
classes.DARKYELLOW.all.color="#EECC00";
classes.RED1.P.color = "red";
classes.RED1.P.fontWeight
= "bold";
classes.RED1.BLOCKQUOTE.color
= "red";
classes.RED1.BLOCKQUOTE.fontWeight
= "bold";
</STYLE>
In de CLASS-definitie kun je het
woordje all gebruiken om alle HTML deze eigenschap te geven, of de naam
van het HTML-element dat de klasse zal gebruiken.
Terug naar begin
-
Benoemde
individuele stijlen
Je kan individuele stijlen gaan
benoemen. Een HTML-element kan zowel een klasse als een individueel benoemde
klasse gebruiken.
Je kan dit gebruiken om stilistische
uitzonderingen op een stijlklasse te definiëren.
Je zou bijvoorbeeld de klasse MAIN
kunnen aanpassen met een variant BLUE1 als volgt:
Je kan ze ook gebruiken om layers
te definiëren. Deze zijn precies gepositioneerd in de webpagina. Zie
hiervoor hoofdstuk 2 voor meer bijzonderheden.
In CSS-syntax laat je de naam van
de stijl voorafgaan door een #-teken.
In Javascript gebruik je het ids-symbool.
Het volgende voorbeeld definieert
de stijl STYLE1, met een lijnhoogte van 20, een lettergrootte van 18, vetjes,
en rood. Er wordt ook een benoemde stijl BLUE1 gedefinieerd met een blauwe
kleur:
CSS Syntax
<STYLE TYPE="text/css">
all.STYLE1 {line-height:
20pt; font-size: 18pt;
font-weight: bold; color:
red;}
#BLUE1 {color: blue;}
</STYLE>
JavaScript Syntax
<STYLE TYPE="text/javascript">
with (classes.STYLE1.all)
{
lineHeight = "20pt";
fontSize = "18pt";
fontWeight = "bold";
all.color = "red";
}
ids.BLUE1.color = "blue";
</STYLE>
In je webpagina kun je dit als volgt
gebruiken:
<P CLASS="STYLE1" ID="BLUE1">Tekst…
</P>
Pas dit toe in onderstaand voorbeeld:
Voorbeeld
benoemde klassen: Oef7.html
<HTML>
<HEAD><title>Benoemde
klassen</title>
<STYLE TYPE="text/css">
all.STYLE1 {line-height:
20pt; font-size: 18pt;
font-weight: bold; color:
red;}
#BLUE1 {color: blue;}
</STYLE>
<HEAD>
<BODY>
<P CLASS="STYLE1">Hier
zie je een grote rode tekst. Deze tekst is groter en vetter dan de normale
paragraaftekst. </P>
<P CLASS="STYLE1" ID="BLUE1">Deze
tekst is eveneens groter en vetter. Maar alhoewel deze tekst ook in de
klasse STYLE1 is, is de tekstkleur blauw, omdat er uniek ID wordt gebruikt.
</P>
</BODY>
</HTML>
Verander de code ook eens in de
javascript-versie!
Terug naar begin
-
Selectiecriteria
gebruiken
Als je nog meer controle wil
verkrijgen kun je selectiecriteria gaan gebruiken, om deze stijl selectief
op een element toe te passen.
Zo zou je bv willen dat alleen alle
EM-elementen in een H1-element groen worden. Dit doe je als volgt.
In CSS-syntax gebruik je een gekruld
haakje {}, in Javascript gebruik je de methode contextual().
CSS Syntax
<STYLE TYPE="text/css">
H1 EM {color:green;}
</STYLE>
JavaScript Syntax
<STYLE TYPE="text/javascript">
contextual(tags.H1, tags.EM).color
= "green";
</STYLE>
In je webpagina gebruik je dit als
volgt:
<H1>Dit is<EM> groene,
vette tekst,</EM> maar dit is gewoon hoofdingtekst</H1>
Voorbeeld
van selectiecriteria: Oef8.html
<html>
<HEAD><title>Benoemde
klassen</title>
<STYLE TYPE="text/css">
all.MAGENTACLASS {color:
magenta;}
DIV P.MAGENTACLASS {font-style:
italic;}
DIV P.MAGENTACLASS B {font-size:18pt;}
</STYLE>
<HEAD>
<BODY>
<DIV CLASS=MAGENTACLASS>
<H3 CLASS=MAGENTACLASS>Hoofding
3 in de MAGENTA-klasse</H3>
<P CLASS=MAGENTACLASS>Is
dit magenta en cursief? Het zou moeten.
Hier komt <B>grote vette
tekst.</B> We hebben dit bereikt met contextuele selectie.</P>
<P CLASS=MAGENTACLASS>Dit
is ook magenta.</P>
</DIV>
<P CLASS=MAGENTACLASS>Deze
paragraaf is ook magenta,
maar omdat hij zich niet
bevindt binnen de DIV-blok
mag hij niet cursief zijn.</P>
</BODY>
</HTML>
Hier nog een ander voorbeeld, eerst
in CSS-syntax, daarna in Javascript-syntax:
UL UL LI {color:blue;}
contextual(tags.UL, tags.UL, tags.LI).color
= "blue";
Hier krijgen alleen de elemente
van een lijst <LI> met tenminste twee parent tags <UL> de kleur blauw.
Terug naar begin
-
Stijlen
voor een individueel element
Je kan het STYLE attribuut gebruiken
voor een enkel element uit de webpagina.
Voorbeeld
van een stijl voor een individueel element: Oef9.html (CSS)
<HTML>
<HEAD><TITLE>Stijl
voor een individueel element</TITLE>
</HEAD>
<BODY>
<P STYLE="color:green;font-weight:bold;
margin-right:20%; margin-left:20%;">
Deze paragraaf (en alleen
deze) is vetjes, groen en grote marges.
</P>
<P>Deze paragraaf is in
de gewone kleur, maar dit
<SPAN STYLE="color:red;
font-style:italic;">woord </span> is verschillend van de andere woorden
in deze paragraaf.</P>
</BODY>
</HTML>
Terug naar begin
-
Combineren
van Stijlbladen
