Iscenes multimedia
Trainingscentrum voor jong en oud en voor beginners en gevorderden.
| Kleurenbeheer met style sheets | | Afdrukken | |
| Geschreven door Rinie Hooijer | ||||
| woensdag, 31 december 1997 07:00 | ||||
Pagina 1 van 2 Zwart-wit pagina's komen we op het World Wide Web nog maar zelden tegen. De voornaamste reden hiervoor is dat het gebruik van kleur, in tegenstelling tot gedrukte media, niets kost. Theoretisch gezien kan iedereen dus gratis gebruik maken van de ruim 16,7 miljoen zichtbare kleuren uit het lichtspectrum. Natuurlijk zult u nooit al deze kleuren gebruiken, al was het alleen maar omdat niet iedere computer in staat is deze kleuren weer te geven.Zwart-wit pagina's komen we op het World Wide Web nog maar zelden tegen. De voornaamste reden hiervoor is dat het gebruik van kleur, in tegenstelling tot gedrukte media, niets kost. Theoretisch gezien kan iedereen dus gratis gebruik maken van de ruim 16,7 miljoen zichtbare kleuren uit het lichtspectrum. Natuurlijk zult u nooit al deze kleuren gebruiken, al was het alleen maar omdat niet iedere computer in staat is deze kleuren weer te geven. Kleuren worden op het Web meestal gebruikt om tekst, achtergronden, links, tabellen of frames te accentueren. HTML biedt hiervoor de standaard mogelijkheden die niet toereikend waren voor de meeste webdesigners om hier iets unieks mee uit te halen. Zo is het in HTML bijvoorbeeld niet mogelijk om de achtergrondkleur van afzonderlijke block-tags te definiëren, terwijl de kleur van de tekst alleen maar kan worden aangegeven door middel van de tag. Dit was ook één van de reden waarom animated gifs en Java applets zo populair werden. Het nadeel van deze alternatieven is dat ze een groot beslag leggen op de beschikbare hoeveelheid bandbreedte. De uitvinders van Cascading Style Sheets onderkenden dit probleem en kwamen daarom met een aantal oplossingen. Niet alleen werd het mogelijk om voor de afzonderlijk block-tags zowel de voorgrond- als achtergrondkleur te bepalen, ook heeft worden er nu verschillende mogelijkheden geboden om te werken met achtergrondafbeeldingen. Kleurnotatie In de regel worden kleuren in HTML bij naam of op hexadecimale code genoteerd. De tweede manier heeft de voorkeur omdat het bij naam noemen van kleuren veel mensen moeilijk afgaat. Dit is ook zeer begrijpelijk, want probeert u zelf maar eens 256 verschillende kleuren te benoemen, laat staan 16,7 miljoen. Daarnaast is het probleem dat de kleurnaam lichtgeel, niet door ieder browser wordt herkend. Het W3-Consortium heeft 16 namen aangegeven die u kunt gebruiken. Helaas worden niet alle namen hetzelfde weergegeven op verschillende platformen, want daarvoor moet de hexadecimale code bestaan uit een samenstelling van de combinaties 00, 33, 66, 99, CC, FF. We geven hier de 16 namen weer gevolgd door de hexadecimale code ervan. black (#000000), silver (#C0C0C0), gray (#808080), white (#FFFFFF), maroon (#800000), red (#FF0000), purple (#800080), fuchsia (#FF00FF), green (#008000), lime (#00FF00), olive (#808000), yellow (#FFFF00), navy (#000080), blue (#0000FF), teal (#008080), aqua (#00FFFF). Cascading style sheets kan echter ook overweg met RGB-waarden. RGB staat voor de primaire kleuren rood, geel en blauw, die ieder 256 verschillende helderheids waarden kunnen bevatten. Omdat het om drie kleuren gaat, vinden alle RGB-notaties plaats in de vorm van een triplet. Deze triplet kan in een style sheet op twee manieren worden toegepast. Ten eerste kunt u de RGB-kleuren als percentages (255%, 255%, 255%) noteren en maar u kunt ook volstaan met alleen de RGB-waarde (255, 255, 255). Ook hier geniet de tweede optie de voorkeur. Color Om kleuren te implementeren in een style sheet moet u gebruik maken van de eigenschap 'color', die de voorgrondkleur van de tags bepaalt. Alle voorgaande notatie-mogelijkheden kunt u hier gebruiken. P { color: fuchsia } H1 { color: #FF00FF } DIV { color: rgb(255%, 0, 255%) } BLOCKQUOTE { color: rgb(255, 0, 255) } Dat de Cascading Style Sheets een hele stap vooruit is ten opzichte van HTML tonen we u door middel van het volgende voorbeeld. We hebben in een stuk tekst twee verschillende paragrafen gemaakt met ieder een andere kleur tekst. Daarnaast hebben we om een sterker effect te bereiken er een rand aan toegevoegd. De style sheet die we hebben gebruikt ziet er zo uit:  De voorgrondkleur wordt het meest gebruikt op het web om links een andere kleur te geven. Veel vaker zien we dat mensen een achtergrondkleur gebruiken. In HTML kunt u een achtergrondkleur gebruiken bij het BODY element en in tabellen. Met style sheets kunt u nu aan ieder tag een achtergrondkleur toekennen met de eigenschap 'background-color'. Deze eigenschap kan twee waarden hebben; color of transparent. Door achtergrondkleuren te combineren met voorgrondkleuren kunnen we eindelijk vaarwel zeggen tegen de onnodige GIFjes die er nu voor worden gebruikt. Hoe groot het oppervlak is dat de achtergrondkleur zal beslaan, is afhankelijk van het element dat u gebruikt en de hoeveelheid padding. Over het algemeen zal bij inline-tags de achtergrondkleur alleen zichtbaar zijn achter de tekst en in de ruimte die door de padding is gedefinieerd. Breekt u een zin af dan zal de achtergrondkleur pas op de volgende regel worden voortgezet. Bij block-tags dekt achtergrondkleur ook alle spatieringen. De achtergrond zal dus lopen van het begin van de regel tot aan het einde van de regel. Gebruikt u Netscape als browser dan zult u dit helaas nog niet kunnen waarnemen in tegenstelling tot Internet Explorer. Met de style sheet; P { background-color: blue; color: white; H1{ background-color: purple; color: yellow; } krijgen we dan het volgende resultaat:  |
||||
| Laatst aangepast op dinsdag, 01 september 2009 13:14 |