 |
|
|
|
| Inleiding |
 |
|
Met behulp van Style Sheets kan je de opmaak van html-pagina's wijzigen.
Als je wat meer ervaring hebt met style sheets zijn ze erg makkelijk om te
gebruiken.
Style sheets worden ondersteund door Netscape vanaf versie 4 en Internet
Explorer vanaf versie 3. Een groot nadeel van style sheets zijn de grote
verschillen tussen Netscape en Internet Explorer. Er zitten soms al
verschillen tussen de PC en Mac of UNIX-versie....
Het mooie aan style sheets is dat je op een centrale plaats de opmaak
voor het hele document, of zelfs meerdere documenten kan definieren.
Hierdoor wordt het ontwerp en onderhoud van de pagina's erg
vereenvoudigd. Bovendien zijn met style sheets dingen mogelijk die met
gewone html niet mogelijk zijn.
| Invoegen |
|
|
Er zijn drie manieren om style sheets met behulp van de <STYLE>-tag in een html-document
in te voegen (deze codes moeten altijd in de <HEAD>-sectie staan):
| * |
een embedded style sheet
<STYLE TYPE="text/css">
<!--
hier komen de css-codes
// -->
</STYLE>
|
| * |
een cascading style sheet (CSS)
<LINK HREF="stylesheet.css" TYPE="text/css" REL="stylesheet">
|
| * |
een imported style sheet
Als uitbreiding op een CSS kan je een andere stylesheet importeren:
<LINK HREF="stylesheet.css" TYPE="text/css" REL="stylesheet">
<STYLE TYPE="text/css">
<!--
@import "stylesheet1.css";
// -->
</STYLE>
|
Bij de laatste twee manieren staan de style sheet definities in een apart bestand
en niet in het html-document zelf.
| Mogelijkheden |
|
|
Enkele mogelijke dingen die je in kan stellen zijn:
| * | font-family: serif, sans-serif, cursive, monospace of fantasy |
| * | font-weight: bold |
| * | font-size: in pixels (bijvoorbeeld 10px) of punten (bijvoorbeeld 10pt) |
| * | font-style: italic |
| * | text-align: right, left of center |
| * | text-decoration: none (links niet onderstrepen) |
| * | color: #rrggbb of kleurnaam (bijvoorbeeld red) |
| * | margin-left, margin-right, margin-top, margin-bottom: in pixels (bijvoorbeeld 10px)
of relatief aan paginagrootte (bijvoorbeeld 20%) |
| * | border-width: in pixels (bijvoorbeeld 10px) |
| * | border-color: #rrggbb of kleurnaam (bijvoorbeeld white) |
| Gebruik |
|
|
Je kan style sheets op verschillende manieren gebruiken:
Met behulp van tags verdeel je je html-document in verschillende secties (denk
maar aan <BODY> - </BODY>, <H1> - </H1>, <FONT> - </FONT>). Je kan met style
sheets nu een opmaak aan zo'n sectie toekennen, door die opmaak aan de begintag
toe te kennen.
| * |
<STYLE TYPE="text/css">
<!--
BODY {left-margin: 10px; right-margin: 10px}
H1 {font-family: fantasy; font-size: 10px}
H2 {font-size: 8pt; text-align: center; font-weight: bold; color: blue}
A {text-decoration:none}
// -->
</STYLE>
Het is ook mogelijk om bijvoorbeeld een opmaak te definieren voor een
<B>-tag, maar alleen als die binnen een <H1>-tag voorkomt:
H1 B {font-size: 18pt}
|
Als je een style class definieert, kan je een opmaak aan een naam koppelen.
In je html-document kan je vervolgens weer naar die naam verwijzen.
| * |
<HEAD>
<STYLE TYPE="text/css">
<!--
all.GROEN {color:#44CC22; font-weight:bold;}
// -->
</STYLE>
</HEAD>
<BODY>
<H1 CLASS=GROEN>Deze kop is groen,</H1>
<H1>en deze niet.</H1>
</BODY>
all geeft aan dat de class bij alle tags gebruikt mag worden. Als een class
bijvoorbeeld alleen bij <P> gebruikt mag worden, kan je een class definieren
met bijvoorbeeld P.GROEN {color:#44CC22}.
|
Met behulp van de <DIV>-tag kan je makkelijk styles toewijzen aan stukken html
die meerdere tags omvatten, met <SPAN> kan hetzelfde met stukjes tekst binnen
dezelfde sectie.
| * |
Deze tekst is niet <SPAN STYLE="color:red">rood</SPAN>.
|
| Links |
|
|
|
