-tags blauw moet zijn: p {color: blue;}
Als je op zoek bent naar amber, groengeel of zalmkleur, heb je pech. Deze lijst is geen doos met 64 kleurpotloden! In de spiekbrief kun je echter wel hexcodes vinden voor webveilige kleuren, evenals ook kleurstalen. Deze kleuren zijn webveilig omdat ze op de meeste kleurenbeeldschermen en -printers vrij betrouwbaar worden gereproduceerd.
Kleurnummers Dankzij kleurnummers kun je elke kleur (zelfs zalm) op je webpagina gebruiken.
H E I NF O
T E C H NI
SC
RIJK
B EL
A
NG
Hexadecimale kleurcodes Hexadecimale notatie gebruikt zes tekens (een combinatie van cijfers en letters) om kleur te definiëren. Als je de hexadecimale code van een kleur weet (afgekort hexcode), heb je alles wat je nodig hebt om die kleur in je HTML-pagina te gebruiken. Wanneer je hexadecimale code gebruikt om een kleur te definiëren, moet je altijd een hekje (#) voor de code zetten. Het kan anders gebeuren dat de kleur niet goed wordt weergegeven in sommige browsers. De volgende CSS-stijldeclaratie maakt alle tekst tussen de
-tags blauw: p {color: #0000FF;} -tags.
RGB-waarden Je kunt twee decimale RGB-waarden gebruiken om kleur te definiëren. Deze waardetypen zijn niet zo gebruikelijk als hexadecimale waarden, maar ze zijn net zo effectief: 55 rgb(r,g,b). De r, g en b zijn integers tussen 0 en 255 die (respectievelijk) de rode, groene en blauwe niveaus van de kleur vertegenwoordigen. 55 rgb(r%,g%,b%).De r%, g% en b% vertegenwoordigen (respectievelijk) het percentage rood, groen en blauw van de kleur. T E C H NI
SC
H E I NF O
Elke kleur kan worden gedefinieerd als een mix van rood, groen en blauw (RGB). Je kunt ofwel een RGB-waarde ofwel de equivalente hexcode gebruiken om de RGB-waarde van een kleur te beschrijven aan een webbrowser. Voor meer informatie over hexadecimale notatie, ga je naar de ‘Tutorial on Hexadecimal Color’ op www.lts.com/class/hextoc.htm.
165
166
DEEL III: De leiding in handen nemen over webpagina’s en stijlen_ ______
De hexcode van een willekeurige kleur vinden Je kunt niet zomaar even met je toverstokje zwaaien en een hexcode voor een willekeurige kleur verzinnen. Dit betekent echter niet dat je de hexcode niet op een minder magische manier kunt vinden. Kleurconverters volgen een nauwkeurige formule die de standaard-RGB-notatie van een kleur veranderen in hexadecimale notatie. Omdat jij betere dingen kunt doen met je tijd dan hexcodes berekenen, bestaan er verschillende mogelijkheden om achter de code te komen voor de kleur van je keuze, inclusief de webveilige kleuren die in de spiekbrief bij dit boek staan. Voor geen van de opties heb je een rekenmachine nodig: 55 Op het web. Enkele goede bronnen voor hexadecimale kleurgrafieken:
www.colorschemer.com/online.html
Je zoekt een kleur op die je mooi vindt en typt de hexcode die ernaast staat in je HTML.
55 Software voor het bewerken van afbeeldingen. Veel editors voor afbeeldingen, zoals Adobe Photoshop of Adobe Fireworks, geven de hexadecimale notatie voor elke kleur weer. Zelfs de kleurkiezer van Microsoft Word toont hexcodes voor kleuren in een afbeelding. Als je een afbeelding hebt die je als kleurenbron voor je webpagina wilt gebruiken, open je die afbeelding in je favoriete editor en zoek je de hexcodes van de kleuren op.
http://www.webmonkey.com/2010/02/ color_charts
Kleurdefinities Je kunt niet alleen afzonderlijke kleuren definiëren voor elk stukje tekst op de webpagina. Je kunt ook een achtergrondkleur definiëren voor de hele webpagina of een gedeelte daarvan. CSS gebruikt de volgende eigenschappen om kleuren te definiëren: 55 color definieert de lettertypekleur en wordt ook gebruikt om kleuren te definiëren voor koppelingen in hun verschillende stadia (link, active, focus, visited en hover; zie de paragraaf ‘Koppelingen’ later in dit hoofdstuk). 55 background of background-color definieert de achtergrondkleur voor de hele pagina of definieert de achtergrond voor een bepaald element (bijvoorbeeld een achtergrondkleur voor alle koppen op het eerste niveau, vergelijkbaar met het idee van iets markeren in een Word-document).
Tekst Je kunt de kleur van tekst op je webpagina in drie stappen veranderen: 1.
Bepaal de selector. Is de kleur bijvoorbeeld van toepassing op alle koppen op het eerste niveau, op alle alinea’s of op een specifieke alinea?
___________________ Hoofdstuk 11: Creatief met kleuren en lettertypen 2.
Gebruik de eigenschap color.
3.
Geef de kleurnaam of hexadecimale waarde aan.
De basissyntaxis voor de stijldeclaratie is: selector {kleur: waarde;}
Hierna volgt een verzameling stijldeclaraties waarin we de eigenschap color gebruiken om tekstkleur toe te wijzen aan het element body (en daardoor aan alle andere aanvullende HTML-elementen die in een documenttekst kunnen voorkomen, behalve waar andere specificaties die selectie overschrijven, zoals in het geval van het element h1): body {color: olive; font-family: Verdana, sans-serif; background-color: #FFFFFF; font-size: 85%;} hr {text-align: center;} .navbar {font-size: 75%; text-align: center;} h1 {color: #808000;} p.chapternav {text-align: center;} .footer {font-size: 80%;}
Je ziet dat in de vorige CSS-regels de kleur voor alle tekst op de pagina wordt gedefinieerd door de body-selector te gebruiken. Kleur wordt toegepast op alle tekst in de hoofdtekst van het document tenzij anders is bepaald. Om dit te illustreren, is de kop op het eerste niveau gedefinieerd als bosgroen, met behulp van hexadecimale notatie.
Koppelingen Dankzij pseudoklassen kun je stijlregels definiëren op basis van informatie buiten de documentstructuur. T E C H NI
SC
H E I NF O
De gangbaarste CSS-toepassing van pseudoklassen is het definiëren van een stijlregel voor een bepaald element in de documentstructuur. Dit is een technische term die gewoon betekent dat de browser een hiërarchische weergave bouwt voor alle elementen in een document, vergelijkbaar met een stamboom waarin elk element een ouder heeft en een kind kan hebben. :link is bijvoorbeeld een pseudoklasse die stijlregels definieert voor elke koppeling die nog niet is bezocht. De vijf gangbare pseudoklassen die je met hyperlinks kunt gebruiken, zijn deze: 55 :link definieert opmaak voor koppelingen die nog niet zijn bezocht. 55 :visited definieert opmaak voor koppelingen die zijn bezocht. 55 :focus definieert opmaak voor koppelingen die met behulp van het toetsenbord zijn geselecteerd (door bijvoorbeeld de Tab-toets te gebruiken) en die op het punt staan te worden geactiveerd met behulp van de Enter-toets.
167
DEEL III: De leiding in handen nemen over webpagina’s en stijlen_ ______ 55 :hover definieert opmaak voor koppelingen wanneer de muisaanwijzer ze aanwijst.
NG
RIJK
De naam van een pseudoklasse wordt voorafgegaan door een dubbele punt (:).
B EL
A
55 :active definieert opmaak voor koppelingen wanneer ze zijn geselecteerd (op geklikt met de muis of geactiveerd door op Enter te drukken).
Pseudoklassen kunnen worden gebruikt met: 55 elementen (zoals het element dat hyperlinks definieert); 55 klassen; 55 id’s. Om bijvoorbeeld de stijlregels voor bezochte en onbezochte koppelingen te definiëren, gebruik je de volgende syntaxis: 55 De volgende syntaxis stelt de kleur van een hyperlink die wijst naar een onbezochte URL in op rood door de hexadecimale waarde te gebruiken: a:link {color: #FF0000;}
55 De volgende syntaxis stelt een hyperlink in die wijst naar een bezochte URL om in de genoemde kleur green te worden weergegeven: a:visited {color: green;}
55 De volgende regel geeft onbezochte koppelingen aan met een klasse van internal om weer te worden gegeven in de kleur geel. (Zie hoofdstuk 9 voor een bespreking van CSS-klassen.)
PA
a.internal:link {color: yellow;} SO
P!
Koppelingen kunnen meerdere statussen tegelijk hebben. Een koppeling kan bijvoorbeeld tegelijkertijd worden bezocht en aangewezen. Definieer altijd koppelingstijlregels in de volgende volgorde: :link, :visited, :visible, :focus, :hover, :active. AK
N HET V VA
EEPJES KN
168
CSS kijkt altijd naar de laatste gebruikte regel om je pagina weer te geven. Dus als je de pseudoklassenselectoren in de verkeerde volgorde plaatst, kan het zijn dat je niet de gewenste resultaten krijgt. Als visited bijvoorbeeld volgt na hover en als de twee overlappende regels hebben, gelden de effecten van hover alleen voor koppelingen die nog niet zijn bezocht. In de volgende CSS-regels zijn koppelingen die nog niet zijn bezocht olijfgroen en gevolgde koppelingen geel:
___________________ Hoofdstuk 11: Creatief met kleuren en lettertypen body {color: #808000; font-family: Verdana, sans-serif; font-size: 85%;} a:link {color: olive;} a:visited {color: yellow;}
De CSS-specificatie definieert :link en :visited als wederzijds exclusief. Het is aan de browsertoepassing om te beslissen wanneer de status (bezocht versus niet-bezocht) voor een koppeling moet worden veranderd. Een browser kan bijvoorbeeld bepalen dat een koppeling onbezocht is als je de geschiedenisgegevens wist.
Achtergronden Voer deze stappen uit om de achtergrondkleur van je webpagina of voor een gedeelte van die pagina te veranderen: 1.
Bepaal de selector. Geldt de kleur bijvoorbeeld voor de hele achtergrond of alleen voor een specifiek gedeelte?
2.
Gebruik de eigenschap background-color of background.
3.
Bepaal de kleurnaam of hexadecimale waarde.
De basissyntaxis voor de stijldeclaratie is: selector {background-color: waarde;}
In de volgende verzameling stijldeclaraties gebruikt de eerste stijldeclaratie de eigenschap background-color en stelt deze in op lichtgroen met behulp van hexadecimale notatie: body {color: #808000; font-family: Verdana, sans-serif; background-color: #EAF3DA; font-size: 85%;}
Je kunt een achtergrondkleur toepassen op een blok tekst (bijvoorbeeld een alinea) zoals je ook een achtergrondkleur definieert voor de hele pagina. Je gebruikt background als een ingekorte eigenschap voor alle afzonderlijke achtergrondeigenschappen of je gebruikt background-color om alleen de kleur in te stellen, zoals hier: selector {background: waarde waarde waarde;}
Voor meer informatie, zie hoofdstuk 9 of lees de paragraaf ‘The Shorthand Property’ van Webmonkey’s ‘Mulder’s Stylesheets Tutorial’ op www.webmonkey.com/2010/02/mulders_stylesheets_tutorial.
169
DEEL III: De leiding in handen nemen over webpagina’s en stijlen_ ______
Lettertypen Je kunt afzonderlijke lettertype-eigenschappen voor verschillende HTML-elementen definiëren met: 55 afzonderlijke CSS-eigenschappen, zoals font-family, line-height en
font-size;
55 een groep lettertype-eigenschappen in de ingekorte verzameleigenschap font.
Lettertypefamilie Voer de volgende stappen uit om het letterbeeld te definiëren (een benoemde en vaak auteursrechterlijk beschermde collectie specifieke tekendesigns, zoals Times Roman, Arial of Helvetica) met behulp van de CSS-eigenschap font-family: 1.
Bepaal de selector voor de stijldeclaratie. Wanneer je bijvoorbeeld van p de selector maakt, definieer je een lettertypefamilie voor alle
2. H E I NF O SC
T E C H NI
A
NG
RIJK
Voeg de eigenschapnaam font-family toe. Niet elke browser ondersteunt alle lettertypefamilies. Met CSS kun je meerdere lettertypefamilies opgeven voor het geval een browser niet de voorkeurslettertypefamilie ondersteunt. Je kunt meerdere namen van lettertypefamilies noemen, gescheiden door komma’s. De browser gebruikt de eerste naam in de lijst die beschikbaar is op de computer waarop deze draait. Je vindt een lijst met webveilige lettertypefamilies op FontTester.com, op www.fonttester.com/help/ list_of_web_safe_fonts.html.
3.
B EL
170
Definieer een waarde voor de eigenschap (de naam van de lettertypefamilie). Plaats namen van lettertypefamilies die spaties bevatten tussen enkele of dubbele aanhalingstekens.
Gebruik een stijldeclaratie als deze om alle koppen op het eerste niveau op te maken om het lettertype Verdana te gebruiken: h1 {font-family: Verdana, Helvetica, sans-serif;}
In de voorgaande declaratie worden nog twee andere lettertypefamilies weergegeven voor het geval de browser van iemand de lettertypefamilie Verdana niet ondersteunt. We raden je aan deze lettertypefamilies in je stijldeclaraties op te nemen:
___________________ Hoofdstuk 11: Creatief met kleuren en lettertypen 55 Algemeen. Minimaal een van deze algemene lettertypefamilies: • • • • 55 Generiek. Minimaal een van deze generieke lettertypefamilies: • • • • • Verschillende elementen kunnen worden opgemaakt met behulp van verschillende lettertypefamilies. Deze regels definiëren een andere lettertypefamilie voor hyperlinks (zie figuur 11.1):
Figuur 11.1: De lettertypefamilie voor hyperlinks verschilt van de lettertypefamilie voor de rest van de tekst
171
DEEL III: De leiding in handen nemen over webpagina’s en stijlen_ ______ body {color: #808000; font-family: Arial, sans-serif; font-size: 85%;} hr {text-align: center;} a {font-family: Courier, "Courier New", monospace;}
Afmetingen bepalen Met de volgende eigenschappen kun je de afmetingen van je tekst bepalen.
Tekengrootte De stijldeclaratie om de grootte van tekst op te geven, is: selector {font-size: waarde;}
De waarde van de declaratie kan zijn: 55 een van de standaardmaateenheden voor de eigenschap font (genoemd in hoofdstuk 9); 55 een van deze door de gebruiker gedefinieerde trefwoorden: SC
T E C H NI
172
H E I NF O
xx-small, x-small, small, medium, large, x-large of xx-large De waarde van elk trefwoord wordt bepaald door de browser, niet door de stijlregel. De regels die in de volgende subparagrafen worden genoemd, definiëren: 55 een relatieve lettertypewaarde voor alle tekst; 55 een absolute waarde voor de lettertypegrootte voor alle koppen op het eerste niveau.
De grootte van lettertypen bepalen met CSS Naast de namen voor lettertypegrootte (xx-small, x-small, small, medium, large, x-large of xx-large) kun je lettertypegrootten ook toewijzen met behulp van de volgende CSS-maateenheden: px (pixels), pt (punten) of em (de m-hoogte voor het gebruikte lettertype, welke dat ook is). Pixels hangen af van de grootte van een afzonderlijke pixel op het beeldscherm van je gebruiker en verschillen te veel van scherm tot scherm om echt nuttig te zijn. Punten zijn hele kleine maateenheden en het kan zijn dat je heel veel moet experimenteren om ze precies goed
te krijgen. Dat verklaart waarschijnlijk waarom tegenwoordig em veel wordt gebruikt om de afmetingen van lettertypen op te geven. Je moet nog wel experimenteren wanneer je em-eenheden kiest, maar je kunt een lettertypegrootte snel en eenvoudig afstemmen op het onderliggende lettertype. Zie hoofdstuk 9 voor meer informatie over het gebruiken van deze eenheden, die de vorm font-size: 2em; (om lettertypegrootte te verdubbelen) of font-size: 0.8em; (om een lettertype te verkleinen tot tachtig procent van de basis) hebben.
___________________ Hoofdstuk 11: Creatief met kleuren en lettertypen body {color: #808000; font-family: Arial, sans-serif; font-size: 85%;} h1 {font-family: "trebuchet ms", verdana, geneva, arial, helvetica, sans-serif; font-size: 2em; line-height: 2.5em; color: teal;}
De resultaten staan in figuur 11.2.
Figuur 11.2: Koppen op het eerste niveau zijn twee keer zo groot als het basislettertype; de lettertypegrootte voor andere tekst is relatief
Regelhoogte De regelhoogte van een alinea is de hoeveelheid ruimte tussen elke regel binnen de alinea. Regelhoogte is te vergelijken met regelafstand in een tekstverwerker. Om de hoeveelheid ruimte tussen regels van een alinea te veranderen, gebruik je de eigenschap line-height: selector {line-height: waarde;}
De waarde van de eigenschap line-height kan zijn: 55 een van de standaardmaateenheden voor de eigenschap font (genoemd in hoofdstuk 9); 55 een cijfer dat de lettertypegrootte van het element vermenigvuldigt, zoals 1.5. In dit hoofdstuk wijzen we een quotation-klasse toe aan de eerste alinea, zodat je de veranderingen kunt zien. Op deze manier kunnen we deze stijlen toepassen op de eerste alinea door de volgende regel te gebruiken in het HTML-document.
173
DEEL III: De leiding in handen nemen over webpagina’s en stijlen_ ______ De volgende regels maken de tekst in de eerste alinea cursief, springen die alinea in en vergroten de regelhoogte om de leesbaarheid te verbeteren (zie figuur 11.3): body {color: #808000; font-family: Arial, sans-serif; font-size: 85%;} h1 {font-family: "trebuchet ms", verdana, geneva, arial, helvetica, sansserif; font-size: 2em; line-height: 2.5em; color: teal;} .quotation {font-style: italic; text-indent: 2em; line-height: 150%;}
Figuur 11.3: Elk element dat tot de klasse quotation behoort, krijgt dezelfde opmaak
Tekenafstand Je kunt de hoeveelheid ruimte tussen letters of woorden vergroten of verkleinen met behulp van deze eigenschappen: 55 word-spacing. De stijldeclaratie voor word-spacing is: selector {word-spacing: waarde;} T E C H NI
H E I NF O SC
SC
T E C H NI
174
Designers noemen de ruimte tussen woorden woordspatiëring. 55 letter-spacing. De stijldeclaratie voor letter-spacing is:
H E I NF O
selector {letter-spacing: waarde;}
Designers noemen de ruimte tussen letters letterspatiëring. De waarde van een van deze eigenschappen moet een lengte zijn die gedefinieerd wordt door een standaardmaateenheid voor een lettertypeeigenschap (genoemd in hoofdstuk 9). De volgende code vergroot de letterafstand (afspatiëring) van de eerste alinea (zie figuur 11.4):
___________________ Hoofdstuk 11: Creatief met kleuren en lettertypen body {color: #808000; font-family: Arial, sans-serif; font-size: 85%;} h1 {font-family: "trebuchet ms", verdana, geneva, arial, helvetica, sansserif; font-size: 2em; line-height: 2.5em; color: teal;} .quotation {font-style: italic; text-indent: 10pt; line-height: 150%; letter-spacing: 0.2em;}
Figuur 11.4: De afspatiëring kan groter of kleiner zijn dan de normale spatiëring van het lettertype
Blokken tekst positioneren Met uitlijningseigenschappen kun je bepalen hoe de randen van tekstblokken ten opzichte van elkaar uitlijnen.
Tekst uitlijnen Uitlijning bepaalt of de linker- en rechterzijden van een tekstblok: 55 gelijk lopen en samen beginnen of eindigen; 55 onregelmatig zijn en beginnen of eindigen op verschillende punten.
Syntaxis voor tekstuitlijning Je definieert uitlijning met de eigenschap text-align. De stijldeclaratie om tekst uit te lijnen is deze: selector {text-align: waarde;}
De waarde van de eigenschap text-align moet een van de volgende trefwoorden zijn:
175
DEEL III: De leiding in handen nemen over webpagina’s en stijlen_ ______ 55 left. Lijnt tekst links uit. De rechterkant van het tekstblok is onregelmatig. 55 right. Lijnt tekst rechts uit. De linkerzijde van het tekstblok is onregelmatig. 55 center. Centreert de tekst in het midden van het venster. Beide zijden van het tekstblok zijn onregelmatig. 55 justify. Lijnt de tekst uit voor zowel de linker- als de rechterzijde. De afstand binnen de tekst in elke regel wordt aangepast, zodat beide zijden van het tekstblok gelijk lopen. PA
176
SO
P!
Het uitvullen van tekst heeft invloed op de letter- of woordafstand in de alinea. Test de resultaten voordat je je webpagina’s aan de wereld laat zien.
Mark-up voor tekstuitlijning Het volgende voorbeeld definieert de uitlijning voor de kop op het eerste niveau en de eerste alinea (zie figuur 11.5): body {color: #808000; font-family: Verdana, sans-serif; font-size: 85%;} h1 {color: teal; font-family: "Trebuchet MS", Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 2em; line-height: 2.5em; color: teal; text-align: center} .quotation {font-style: italic; text-indent: 2em; text-align: left;}
Figuur 11.5: De kop op het eerste niveau is gecentreerd; de eerste alinea is ingesprongen en links uitgelijnd
Tekst inspringen Je kunt de hoeveelheid ruimte definiëren die vooraf moet gaan aan de eerste regel van een alinea met behulp van de eigenschap text-indent.
___________________ Hoofdstuk 11: Creatief met kleuren en lettertypen T E C H NI
SC
H E I NF O
Als je de eigenschap text-indent gebruikt, wordt niet de hele alinea ingesprongen, alleen de eerste regel. Om een hele alinea in te springen, moet je CSS-tekstvakeigenschappen gebruiken, zoals margin-left en marginright (zie hoofdstuk 10).
Syntaxis voor het inspringen van tekst De stijldeclaratie die je gebruikt om tekst in te springen is: selector {text-indent: waarde;}
Hier moet waarde een van de standaardmaateenheden voor de eigenschap length zijn (genoemd in hoofdstuk 9).
Mark-up voor het inspringen van tekst Zoals je eerder in dit hoofdstuk hebt gezien, heeft de klasse quotation een text-indent van 2em. body {color: #808000; font-family: Verdana, sans-serif; font-size: 85%;} .quotation {font-style: italic; text-indent: 2em;}
Tekstdecoraties Met CSS kun je je tekst decoreren door woorden of zinsdelen vet of cursief te maken, door een streep boven of onder woorden of zinsdelen te zetten of door tekst door te halen. Je kunt je tekst zelfs laten knipperen (wanneer dat door browsers wordt ondersteund).
Lekker vet Een van de meest gebruikte tekstdecoraties is vet. Als je in HTML vet wilt toepassen, gebruik je de tag . CSS biedt je echter meer controle over het tekengewicht van de vette tekst.
Syntaxis om vet toe te passen Deze stijldeclaratie gebruikt de eigenschap font-weight: selector {font-weight: waarde;}
De waarde van de eigenschap font-weight kan een van de volgende zijn: 55 bold. Geeft de tekst vet weer. 55 bolder. Relatieve waarde die een tekengewicht vetter weergeeft dan het huidige gewicht (mogelijk toegewezen door een hoofdelement).
177
178
DEEL III: De leiding in handen nemen over webpagina’s en stijlen_ ______ 55 lighter. Relatieve waarde die een tekengewicht lichter weergeeft dan het huidige gewicht (mogelijk toegewezen door een hoofdelement). 55 normal. Verwijdert eventuele vette opmaak. 55 een van deze integerwaarden: 100 (het lichtst), 200, 300, 400 (normaal), 500, 600, 700 (standaard vet), 800, 900 (het donkerst).
Mark-up om vet toe te passen Het volgende voorbeeld geeft hyperlinks vet weer (zie figuur 11.6), schakelt de onderstrepingen uit en verandert de kleur in groen wanneer een koppeling bezocht is (we hebben dit toegepast op het onderdeel Bedrijfsgeschiedenis om je te laten zien hoe het eruitziet): body {color: black; font-family: Arial, sans-serif; font-size: 85%;} a {font-weight: bold;} a:link {color: olive; text-decoration: underline;} a:visited {color: green; text-decoration: none;}
Figuur 11.6: Alle hyperlinks worden vet weergegeven
Nadruk leggen met cursief Cursief wordt veel gebruikt om citaten te onderscheiden of om tekst te benadrukken. Als je in HTML cursief wilt toepassen, gebruik je de tag . CSS biedt je echter meer controle over de tekenstijl van tekst met de eigenschap font-style.
Syntaxis om cursief toe te passen Deze stijldeclaratie gebruikt de eigenschap font-style: selector {font-style: waarde;}
___________________ Hoofdstuk 11: Creatief met kleuren en lettertypen De waarde van de eigenschap font-style kan een van de volgende zijn: 55 italic. Geeft de tekst cursief weer (een speciaal lettertype dat meestal naar rechts helt). 55 oblique. Geeft de tekst schuin weer (een andere hellende versie van een normaal lettertype; wordt zelden gebruikt voor lettertypedefinities). 55 normal. Verwijdert eventuele cursieve of schuine opmaak.
Mark-up om cursief toe te passen Het volgende voorbeeld wijst een cursieve lettertypestijl toe aan de kop op het eerste niveau: body {color: #808000; font-family: Verdana, sans-serif; font-size: 85%;} h1 {color: teal; font-family: "MS Trebuchet", Arial, Helvetica, sans-serif; text-transform: uppercase; font-style: italic; font-weight: 800; font-size: 2em; line-height: 30pt; text-align: center;}
Hoofdlettergebruik veranderen Je gebruikt de eigenschap text-transform om het hoofdlettergebruik in je document in te stellen.
Syntaxis om hoofdlettergebruik te veranderen Deze stijldeclaratie gebruikt de eigenschap text-transform: selector {text-transform: waarde;}
De waarde van de eigenschap text-transform kan een van de volgende zijn: 55 capitalize. Maakt een hoofdletter van het eerste teken van elk woord. 55 uppercase. Geeft alle letters van de tekst van het opgegeven element weer in hoofdletters. 55 lowercase. Geeft alle letters van de tekst van het opgegeven element weer in kleine letters. 55 none. Handhaaft de waarde van het geërfde element.
Mark-up om hoofdlettergebruik te veranderen Het volgende voorbeeld geeft de kop op het eerste niveau weer in hoofdletters (zie figuur 11.7): body {color: black; font-family: Arial, sans-serif; font-size: 85%;} a {font-weight: bold;} a:link {color: olive; text-decoration: underline;}
179
DEEL III: De leiding in handen nemen over webpagina’s en stijlen_ ______ a:visited {color: green; text-decoration: none;} h1 {font-family: "Trebuchet MS", verdana, geneva, arial, helvetica, sansserif; font-size: 2em; line-height: 2.5em; color: teal; text-transform: uppercase; text-align: center}
Figuur 11.7: De kop op het eerste niveau wordt in hoofdletters weergegeven
Tekst decoreren Met de eigenschap text-decoration kun je tekst op een iets gekkere manier opmaken. Ze wordt niet vaak gebruikt.
Syntaxis voor tekstdecoratie Deze stijldeclaratie gebruikt de eigenschap text-decoration: selector {text-decoration: waarde;}
De waarde van de eigenschap text-decoration kan een van de volgende zijn: 55 underline. Onderstreept tekst. 55 overline. Geeft de tekst weer met een streep erboven. 55 line-through. Geeft de tekst met een streep erdoor.
PA
180
SO
P!
55 blink. Laat de tekst in het scherm knipperen. Weet je zeker dat je knipperende tekst wilt? • blink wordt niet door alle browsers ondersteund; • blink kan vreselijk irritant en afleidend zijn. 55 none. Verwijdert eventuele tekstdecoratie.
___________________ Hoofdstuk 11: Creatief met kleuren en lettertypen
Mark-up voor tekstdecoratie Het volgende voorbeeld verandert de koppeling wanneer deze met de muis wordt aangewezen. In dit geval wordt eventuele onderstreping voor een koppeling uitgeschakeld: body {color: #808000; font-family: Verdana, sans-serif; font-size: 85%;} a:link {color: olive; text-decoration: underline;} a:visited {color: olive; text-decoration: underline;} a:hover {color: olive; text-decoration: none;}
De verzameleigenschap font Veel lettertype-eigenschappen kunnen worden samengevat in een stijldeclaratie door de ingekorte eigenschap font te gebruiken. Wanneer je deze gebruikt, heb je maar één stijlregel nodig om een combinatie van lettertype-eigenschappen te definiëren: selector {font: waarde waarde waarde;}
De waarde van de eigenschap font is een lijst met waarden die corresponderen met de verschillende lettertype-eigenschappen: 55 De volgende waarden moeten in de volgende volgorde worden gedefinieerd, maar dat hoeft niet opeenvolgend: • font-size (verplicht) • line-height (optioneel) • font-family (verplicht)
B EL
A
De lijst met font-family-waarden moet eindigen met een puntkomma. NG
RIJK
Gebruik komma’s om meerdere namen van lettertypefamilies van elkaar te scheiden. Je kunt bijvoorbeeld de volgende stijldeclaratie gebruiken om een specifieke stijl te creëren voor alineatekst die font-size, line-height en font-family in die (verplichte) volgorde bepaalt: p {font: 1.5em bold 150% Arial, Helvetica, sans-serif;}
55 De volgende waarden zijn optioneel en kunnen op elke willekeurige volgorde in de declaratie staan. Afzonderlijke waarden worden gescheiden door spaties: • font-style • font-variant • font-weight
181
182
DEEL III: De leiding in handen nemen over webpagina’s en stijlen_ ______ Je kunt bijvoorbeeld de volgende stijldeclaratie gebruiken om een specifieke stijl te creëren voor een kop op het eerste niveau die de optionele waarden vermengt met de verplichte waarden (in dit geval font-style en font-weight voor line-height en font-family; font-size en font-variant zijn weggelaten): h1 {font: italic bold 150% Arial, Helvetica, sans-serif;}