login  Naam:   Wachtwoord: 
Registreer je!
 Tutorials

Tutorials > CSS


Gegevens:
Geschreven door:
Jeroen
Moeilijkheidsgraad:
Normaal
Hits:
13855
Punten:
Aantal punten:
 (4.5)
Aantal stemmen:
4
Stem:
Niet ingelogd
Nota's:
 Lees de nota's (4)
 

Tutorial:

Media Types

1. Voorwoord
2. De theorie
3. Lijst met media types
4. Tabs
5. Je codes terug vinden
6. Afsluiting


1. Voorwoord
In css bestaat er iets handigs, genaamd: Media types. Deze laten je toe om verschillende css styles te maken voor verschillende media, een handige toepassing : Voor het printen van pagina's op je site, is het best dat je niet te veel images en/of kleuren hebt. Het kan wel, maar het is de bezoeker alleen maar een last dat je de kleuren van zijn printer opgebruikt, terwijl je alleen maar de tekst nodig hebt. En bij je site wil je liefst geen klachten horen van de bezoeker.

 top

2. De theorie
Nu de theorie. Een media type wordt gestart door een @. Ook wel benoemd als een: atje. Dan volgt 'media', en da het media type zelf. Een voorbeeld:

@media all body {
    background-color
: #FFFFFF ;
}
Met dit stukje code heb je de achtergrond kleur voor alle mediatypes wit gezet. Niets nieuws dus, buiten de '@media all'.

 top
3. Lijst met media types
all voor alle media types
aural voor geluidstoepassingen
braille voor de leesbaarheid voor braille transformators
embossed voor braille printers
handheld voor kleine pc's
print voor de printer
projection voor projecteerders
screen voor pcmonitors
tty voor mediatypes die een fixed patch karakternet gebruiken : zoals teletypes en terminals.
tv wordt gebruikt voor televiesie-schermen

 top
4. Voorbeeld
Even een voorbeeldje om het wat duidelijker te maken: Je wilt bijvoorbeeld een achtergrond op je scherm van je pc, maar als hij door de printer gaat wil je een witte achtergrond. Bij tv en andere projectmatige wil je dan weer dan het herleid wordt naar een 256-kleureneenheid.
@media screen
body
{
    background-color
: #C3C7BA ;
}


@media print
body
{
    background-color
: #FFFFFF ;
}


@media projection
body
{
    background-color
: #CCCCCC ;
}


@media tv
body
{
    background-color
: #CCCCCC ;
}


 top


6. Afsluiting
Dit is alles wat er te weten valt over media types in css. Voor vragen kun je mij een privé bericht sturen of je vraag stellen op de forum.

 top

« Vorige tutorial : CSS - Code netjes weergeven Volgende tutorial : Dropdown menu - Pseudo class »

© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.016s