de structuur van CSS
De manier waarop je de CSS regels schrijft verschilt wel van de manier waarop de code van HTML eruitziet.
Van HTML ken je duidelijk de tag-haken
< en
>
en je ken de attributen van HTML, die altijd een
= hebben de
de "..".
Bij CSS zie je dat niet meer. De taal ziet er zelfs eenvoudiger uit.
selector {
stijldefinitie: waarde;
stijldefinitie: waarde;
.
.
.
stijldefinitie: waarde;
}
andere selector {
stijldefinitie: waarde;
stijldefinitie: waarde;
.
.
.
stijldefinitie: waarde;
}
body {font-family: Arial, Helvetica;
color: #000000;
font-size: 15px;
margin-left: 80px;
margin-right: 50px;
}
h1 { color: #ffffff;
font-variant: small-caps;
font-size: 35px; background:
#0099cc url(achtergrond.gif) repeat-y;
text-align: center;
position: relative;
margin-left: -40px;
margin-right: 30px; }
h2 { color: #0000ff;
font-size: 12px;
background: #0099cc url(achtergrond2.gif) repeat-y;
text-align: right }
h3 { color: #0000ff;
font-size: 10px;
background: #0099cc url(achtergrond2.gif) repeat-y;
text-align: left }
li { margin-left: 20px;
}
i {color: #990000;
text-decoration: none;
}
a {color: #0080ff;
text-decoration: none;
}
a:hover {text-decoration: underline;
color: 990000;
}
.theo {
background-color: #0099cc;
border: solid 2px #993333;
}
ol {color: #006600;
text-decoration: none;
}
ul {color: #006600;
text-decoration: none;
} |
selector
Met de selector geef je aan waarover je de stijlopmerkingen wilt maken. Als
er
body staat, dan gaan de stijldefinities tussen de accolades
over de hele body. Is de selector
h1, daan gan ze dus over
alle inhoud die in de HTML tussen <h1> en </h1> staan.
Als voorbeeld zie je in het kader hier rechts een stylesheet. Daarin
zijn de selecors dus:
body h1 h2
h3 li i a a:hover
.theo ol en
ul.
De a:hover is een selector voor een link waar de muis overgaat: je beschrijft
daarvan hoe de link er uitmoet zien als je met je muis erover gaat. Hierme
maak je dus een roll-over effect.
Er is zelfs een eigen stijl gemaakt. De selector wordt dan voorafgegaan door
een punt. In het kader is dat .theo. Dit wordt een class genoemd. Als die class
dan in de HTML wilt aanroepen dan kan dat door <p class="theo">
of <span class="theo"> of door <h2 class="theo">
een voorbeeld van een eigen stijl
stijldefinitie
De selector moet een vormgeving krijgen.
Dat zet je helemaal tussen de accolades.
Elke stijldefinitie heeft een naam gevolgd door een dubbele punt, een spatie met daarachter de waarde.
De waarde wordt door een puntkomma afgesloten. Daarna kun je de volgende stijldefinitie opgeven, die uiteindelijk ook weer met een puntkomma wordt afgesloten. Na de laatste stijldefinitie staat de afsluitende accolade.
Een overzicht met stijldefinities
Als je een document als hiernaas als extern stylesheet gaat gebruiken, dan kun je dit geheel zo opslaan als naam.css .
Elke HTML-pagina die tussen de head-tags een link maakt als
<link rel="STYLESHEET" href="naam.css" type="text/css">
krijgt de vormgeving, die in deze stylesheet beschreven staat.
terug
