Een @import-regel kan worden gebruikt om binnen een stijlblok of een extern stijlblad stijlen op te nemen uit een ander extern stijlblad.
Deze regel wordt niet ondersteund door oudere browsers en wordt dus ook vaak gebruikt wanneer stijlbladen door de oudere browsers niet mogen opgenomen worden.
| notatie |
beschrijving |
| @import url("uri") |
Neem het stijlbestand op waarnaar wordt verwezen door "uri" |
| @import "uri" |
Neem het stijlbestand op waarnaar wordt verwezen door "uri" |
| @import url("uri") media |
Neem het stijlbestand op waarnaar wordt verwezen door "uri" voor de media aangegeven in 'media'. Niet ondersteund door IE6. |
| @import "uri" media |
Neem het stijlbestand op waarnaar wordt verwezen door "uri" voor de media aangegeven in 'media'. Niet ondersteund door IE6. |
De aanduiding media wil zeggen dat je hier een lijst kan opnemen van media-types die de stijl moeten gebruiken:
- all: voor weergave door alle apparaten
- screen: voor weergave op een computerscherm
- print: voor weergave in pagina-opmaak bij het afdrukken of als print-preview
- aural: voor weergave door een spraaksynthesizer
- braille: voor weergave door een brailleleesapparaat)
- embossed: voor weergave in pagina-opmaak door een brailleprinter
- handheld: voor weergave door een apparaat met een klein beeldscherm
- projection: voor weergave door een projectieapparaat
- tty: voor weergave door een apparaat dat alleen tekst weergeeft in een vast karaktergrid
- tv: voor weergave op een televisietoestel
regels1.css
h1 { color:red; font-size:10pt }
p { color:blue }
regels1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Cursus CSS - IVO Brugge</TITLE>
<style type="text/css">
@import url("regels1.css") print;
p { color:green }
</style>
</HEAD>
<BODY>
<h1>Gebruik van extern stijlblad</h1>
<p>Inline stijlen zijn <b>een eerste</b> manier om <b>CSS</b> te gebruiken.</p>
</BODY>
</HTML>
@media maakt het mogelijk binnen een stijlblok of een exteren stijlbestand stijlregels op te bouwen specifiek voor een bepaalde media-types.
| notatie |
beschrijving |
| @media media {stijlregels} |
Pas de stijlregels toe voor de aangegeven media |
De aanduiding media wil zeggen dat je hier een lijst kan opnemen van media-types die de stijl moeten gebruiken:
- all: voor weergave door alle apparaten
- screen: voor weergave op een computerscherm
- print: voor weergave in pagina-opmaak bij het afdrukken of als print-preview
- aural: voor weergave door een spraaksynthesizer
- braille: voor weergave door een brailleleesapparaat)
- embossed: voor weergave in pagina-opmaak door een brailleprinter
- handheld: voor weergave door een apparaat met een klein beeldscherm
- projection: voor weergave door een projectieapparaat
- tty: voor weergave door een apparaat dat alleen tekst weergeeft in een vast karaktergrid
- tv: voor weergave op een televisietoestel
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Cursus CSS - IVO Brugge</TITLE>
<style type="text/css">
@media print{
p { color:green }
}
@media screen{
p { color:blue }
}
</style>
</HEAD>
<BODY>
<h1>Media</h1>
<p>Op het scherm ben ik blauw, bij een afdruk ben ik groen</p>
</BODY>
</HTML>
@page is een stijlregel die kan worden gebruikt voor de pagina-opmaak bij het afdrukken. Deze eigenschap wordt niet ondersteund in IE6.
| notatie |
beschrijving |
| @page {stijlregels} |
Pas de stijlregels toe voor alle pagina's |
| @page:left {stijlregels} |
Pas de stijlregels toe op alle linkerpagina's, voor ons: even paginanummers |
| @page:right {stijlregels} |
Pas de stijlregels toe op alle rechterpagina's, voor ons: oneven paginanummers |
| @page:first {stijlregels} |
Pas de stijlregels toe op de eerste pagina |
Voorlopig enkel ondersteund door Opera.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Cursus CSS - IVO Brugge</TITLE>
<style type="text/css">
@page { margin-left:5cm }
</style>
</HEAD>
<BODY>
<h1>Media</h1>
<p>even testen met de @page-directive</p>
</BODY>
</HTML>
