| ||
|
Alle hoofdstukken... InhoudsopgaveInleiding Een eenvoudig HTML document Afbeeldingen Lijsten Links Tabellen Frames Formulieren Cascading stylesheets JavaScript PHP programmeren Server side includes CGI & Perl Speciale tekens Kleurvoorbeelden Meer informatie Software Recente toevoegingen Alfabetische index In dit hoofdstuk...
InleidingEen extern stylesheet gebruiken Een STYLE element gebruiken Een STYLE attribuut gebruiken Wat is beter: extern, element, of attribuut? Inhoud, ruimte, rand en marge Achtergrondkleur Een afbeelding als achtergrond Kleur voorgrond Randen Ruimte Marges Lettertype Vetgedrukt Letterstijl Varianten op lettertypes Lettergrootte Letterafstand Regelafstand Uitlijnen van tekst Kleuren van links Nieuwe pagina bij afdrukken
Language choice...
You have chosen to use Dutch as your preferred language. Click here to switch to English.
|
Cascading stylesheetsInleidingAls je HTML 4 gebruikt, heb je de mogelijkheid alle opmaak in aparte "cascading style sheets" (CSS) te bewaren. Het voordeel hiervan is dat je zo'n style sheet in een apart document kunt bewaren. Je kunt dan de opmaak van je hele website wijzigen door alleen dat stylesheet aan te passen. Er zijn drie manieren om CSS te gebruiken:
Alle drie de methoden worden in dit hoofdstuk behandeld. De volledige specificatie van CSS vind je op de website van het world wide web consortium, http://www.w3c.org/. Het gebruikt van een extern stylesheet heeft duidelijke voordelen. Je kunt vanuit meerdere HTML documenten verwijzen naar dezelfde stylesheet. Als je dus de opmaak van je site wilt veranderen, hoef je maar één document, het stylesheet, aan te passen. Je hoeft dus niet langer alle bestanden een voor een te openen en aan te passen. Een stylesheet is een verzameling van regels. Een regel begint met aan te geven waarop die van toepassing is en vervolgens informatie over de toe te passen opmaak. Bijvoorbeeld: TD.mrn {background:maroon; color:white;} Deze regel geeft aan dat alle cellen in tabellen van de klasse "mrn" een donkerrode achtergrond moeten krijgen. Je kunt op een regel net zoveel informatie over de opmaak kwijt als je wilt. Je kunt dus alle onderstaande voorbeelden over kleuren, lettertypen, enz. samenvoegen op één regel. Het gedeelte "TD.mrn" noem je de selector. Het gedeelte "background:maroon" heet de stijldeclaratie. Een stijldeclaratie bestaat uit één of meer eigenschappen (background en color,in dit voorbeeld), met elk een waarde (maroon en white). De selector geeft aan waarop de stijldeclaratie van toepassing is. De stijldeclaratie is de opmaak zelf. Je past regels op de volgende manier toe: <TABLE><TR><TD CLASS="mrn">
Het CLASS attribuut legt de koppeling met de selector TD.mrn uit het stylesheet. Je kunt zo verschillende stijldeclaraties voor de TD element definiëren en die toepassen op verschillende cellen. Je kunt ook een ID attribuut gebruiken om een stijl te kiezen: <P ID="yellowgreen">Lelijk: gele tekst op een groene achtergrond.</P> In je stylesheet staat dan de volgende regel: #yellowgreen {color:yellow; text-align:center; background:green;} En dit is het resultaat: Lelijk: gele tekst op een groene achtergrond. Het verschil tussen CLASS en ID is dat ID uniek moet zijn in een document. Dezelfde ID (yellowgreen in dit voorbeeld) mag dus maar één keer voorkomen. CLASS kunt je net zo vaak gebruiken als nodig. 
Een extern stylesheet gebruikenElk HTML document dat een extern stylesheet gebruikt verwijst daar op de volgende manier naar: <HTML><HEAD> Een stylesheet is een eenvoudig tekstbestand dat gemaakt kan worden in een programma zoals BBEdit voor de Mac of Kladblok voor Windows. Een HTML document kan verwijzen naar meerdere stylesheets. Je kunt bijvoorbeeld algemene opmaak voor je hele site in een stylesheet zetten en aanvullende stijlen voor een bepaald hoofdstuk in een ander.
Een STYLE element gebruikenJe kunt CSS ook gebruik door een STYLE element in de kop van je document te zetten. Die stijl is dan alleen beschikbaar binnen dat ene document. Hier is een voorbeeld: <HEAD> TestcaseDe aanduidingen <!-- en --> voor commentaar dienen hier om browsers die niet om kunnen gaan met de STYLE element niet in verwarring te brengen. Ook bij dit type CSS kun je alle onderstaande voorbeelden toepassen. Het STYLE element moet in de kop van je document staan, dus tussen <HEAD> en </HEAD>.
Een STYLE attribuut gebruikenHet gebruikt van een STYLE attribuut gaat op de zelfde manier als andere attributen. <P STYLE="color:maroon; text-align:center;">Een donkerrode paragraaf</P> Een donkerrode paragraaf Je kunt op deze manier alle onderstaande voorbeelden en regels toepassen. Je kunt ook een SPAN element met STYLE attribuut. De SPAN element dient dan alleen om de opmaak op te slaan. <SPAN STYLE="color:red;">Rode</SPAN> tekst
Rode tekst
In de rest van dit hoofdstuk zie je meer voorbeelden waarin het SPAN element gebruikt wordt.
Wat is beter: extern, element, of attribuut?Wat is nu beter om te gebruiken: een extern stylesheet, een STYLE element of een STYLE attribuut? Daarvoor kun je de volgende regel hanteren:
In de praktijk zul je een combinatie van de verschillende manieren gebruiken. Meestal is dat een extern stylesheet voor opmaak die in je hele site gebruikt wordt en een combinatie van elementen en attributen voor uitzonderingen daarop.
Inhoud, ruimte, rand en margeElk element op je pagina kent vier ruimtes:
In dit voorbeeld is de inhoud tekst maar die inhoud kan evengoed een afbeelding of een tabel zijn. De volgende subkopjes gaan over de voorgrond- en achtergrond kleur van de inhoud, die daarna over de ruimte, de randen en de marges.
AchtergrondkleurOm de achtergrondkleur voor je hele document in te stellen neem je dit op in je stylesheet BODY {background:yellow;} Hiermee krijgt je hele pagina een gele achtergrond. Voor een selectie van kleuren kijk je op de pagina met kleurcodes. Je kunt de background eigenschap gebruiken bij elk element: A, P, H1, TD, enz. Hier is een voorbeeld met het P element: <P STYLE="background:gray; text-align:center;">Dit is een grijze achtergrond</P> Dit is een grijze achtergrond De achtergrond kleur geld zowel voor de inhoud als voor de ruimte daaromheen maar niet voor de rand en de marge: <P STYLE="background:aqua; color:red; padding:5px; border-style:solid; border-width:1px; margin:5px; text-align:center;">Dit is een aqua achtergrond</P> Dit is een aqua achtergrond In het bovenstaande voorbeeld zie je dat de achtergrond alleen het gebied binnen de rand, dus de inhoud en de ruimte, bedekt. De marges zijn transparant.
Een afbeelding als achtergrondMet stylesheets kun je een afbeelding als achtergrond gebruiken. Dat kan bij het BODY element maar bij elk willekeurig ander element ook. Je kunt dus een afbeelding gebruiken als achtergrond bij één paragraaf: <P STYLE="background: url(parts/valid-html401.png) no-repeat white;">Semper ubi ... periculo deicerentur.</P> Semper ubi sub ubi. Quone modo nunc, fulve bos? Si hoc non legere potes, tu asinus es. Tua mater tam antiqua ut linguam latinam loquatur. Itaque cum adpropinquarent Britanniae et ex castris viderentur, tanta tempestas subito coorta est ut nulla earum cursum tenere posset, sed aliae eodem unde erant profectae referrentur, aliae ad inferiorem partem insulae, quae est propius solis occasum, magno suo cum periculo deicerentur. De gespecificeerde achtergrondkleur wit wordt gebruikt voor die delen van de achtergrond die de afbeelding niet bedekt. Normaal gesproken plaatst de browser de afbeelding linksboven. Dat kun je veranderen: <P STYLE="background: url(parts/valid-html401.png) no-repeat bottom right white;">Semper ubi ... periculo deicerentur.</P> Semper ubi sub ubi. Quone modo nunc, fulve bos? Si hoc non legere potes, tu asinus es. Tua mater tam antiqua ut linguam latinam loquatur. Itaque cum adpropinquarent Britanniae et ex castris viderentur, tanta tempestas subito coorta est ut nulla earum cursum tenere posset, sed aliae eodem unde erant profectae referrentur, aliae ad inferiorem partem insulae, quae est propius solis occasum, magno suo cum periculo deicerentur. "no-repeat" betekent dat de afbeelding maar één keer wordt getoond. Als je in plaats daarvan "repeat" gebruikt wordt de afbeelding net zo vaak herhaald als nodig is om de hele achtergrond te bedekken. Je kunt ook "repeat-y" gebruiken om de afbeelding alleen verticaal te herhalen of "repeat-x" om de afbeelding alleen horizontaal te herhalen. <P STYLE="background: url(parts/valid-html401.png) repeat white;">Semper ubi ... periculo deicerentur.</P> Semper ubi sub ubi. Quone modo nunc, fulve bos? Si hoc non legere potes, tu asinus es. Tua mater tam antiqua ut linguam latinam loquatur. Itaque cum adpropinquarent Britanniae et ex castris viderentur, tanta tempestas subito coorta est ut nulla earum cursum tenere posset, sed aliae eodem unde erant profectae referrentur, aliae ad inferiorem partem insulae, quae est propius solis occasum, magno suo cum periculo deicerentur. Semper ubi sub ubi. Quone modo nunc, fulve bos? Si hoc non legere potes, tu asinus es. Tua mater tam antiqua ut linguam latinam loquatur. Itaque cum adpropinquarent Britanniae et ex castris viderentur, tanta tempestas subito coorta est ut nulla earum cursum tenere posset, sed aliae eodem unde erant profectae referrentur, aliae ad inferiorem partem insulae, quae est propius solis occasum, magno suo cum periculo deicerentur. Semper ubi sub ubi. Quone modo nunc, fulve bos? Si hoc non legere potes, tu asinus es. Tua mater tam antiqua ut linguam latinam loquatur. Itaque cum adpropinquarent Britanniae et ex castris viderentur, tanta tempestas subito coorta est ut nulla earum cursum tenere posset, sed aliae eodem unde erant profectae referrentur, aliae ad inferiorem partem insulae, quae est propius solis occasum, magno suo cum periculo deicerentur. Als je een afbeelding als achtergrond van het BODY element gebruikt, kun je die vast positioneren. Dat betekent dat de afbeelding op z'n plek blijft als je door de pagina loopt: <BODY STYLE="background: url(parts/valid-html401.png) no-repeat white fixed;"> De afbeelding blijft zo in de linkerbovenhoek van het venster, ook als je door de pagina heen loopt.
Kleur voorgrondOp een vergelijkbare manier kun je de voorgrondkleur instellen. In je externe stylesheet neem je deze twee regels op: P.first {color:maroon; background:yellow; text-align:center;} De kleurcodes zouden er zo langzamerhand bekend uit moeten zien. In je HTML document gebruik je: <P CLASS="first">De eerste paragraaf</P> De eerste paragraaf De tweede paragraaf Je ziet hier het gebruik van een CLASS attribuut om een stijl te kiezen bij een paragraaf.
RandenAls je alle randen van je element dezelfde stijl, kleur en dikte wilt geven ben je snel klaar: <P STYLE="border: dashed navy thick; text-align:center;">Kijk nou eens!</P> Kijk nou eens! Voor de kleuren kun je de gebruikelijke kleurnamen of -codes gebruiken. Voor de dikte van de randen kun je "thin", "medium", "thick" of een getal gebruiken. Een getal is de dikte van de lijn in pixels. Je kunt de attributen ook voor iedere rand apart instellen: <P STYLE="border-top-width:thin; border-right-width:thick; border-bottom-width:medium; border-left-width:medium; border-color:red; border-style: solid; text-align:center;">Verschillende randen!</P> Verschillende randen! Datzelfde kan ook een op compactere manier: <P STYLE="border-width:thin thick medium medium; border-color:red; border-style: solid; text-align:center;">Verschillende randen!</P> Verschillende randen! Als je één border-width eigenschap gebruikt met 4 waarden, worden die achtereenvolgens toegepast op de bovenkant, rechtkant, onderkant en linkerkant. Dus bovenaan beginnen en met de klok mee. Als je twee waarden gebruikt wordt de eerste gebruikt voor de onder- en bovenkant en de tweede waarde voor de linker- en rechterkant: <P STYLE="border-width:thick; border-color:red navy; border-style: solid; text-align:center;">Verschillend gekleurde randen!</P> Verschillend gekleurde randen!
RuimteBij de meeste bovenstaande voorbeelden, ligt de rand strak om de inhoud heen. Daarom komt de padding eigenschap in beeld. Daarmee voeg je ruimte in tussen de inhoud en de rand: <P STYLE="background:aqua; text-align:center; padding:5px; border: thin solid black;">Een beetje bewegingsruimte</P> Een beetje bewegingsruimte Ook padding kun je verschillend instellen voor bovenkant, onderkant en zijkanten: <P STYLE="background:teal; text-align:center; padding-top:5px; padding-right:50px; padding-bottom:20px; padding-left:20px; border: thin solid black;">Verschillende bewegingsruimte...</P> Semper ubi sub ubi. Quone modo nunc, fulve bos? Si hoc non legere potes, tu asinus es. Tua mater tam antiqua ut linguam latinam loquatur. Itaque cum adpropinquarent Britanniae et ex castris viderentur, tanta tempestas subito coorta est ut nulla earum cursum tenere posset, sed aliae eodem unde erant profectae referrentur, aliae ad inferiorem partem insulae, quae est propius solis occasum, magno suo cum periculo deicerentur. Ook dit kan korter, op een manier die vergelijkbaar is met het instellen van de randen. <P STYLE="background:teal; text-align:justify; padding:5px 20px 20px 20px; border: thin solid black;">Semper ubi ... latinam loquatur.</P> Semper ubi sub ubi. Quone modo nunc, fulve bos? Si hoc non legere potes, tu asinus es. Tua mater tam antiqua ut linguam latinam loquatur. Je ziet hier nogmaals dat de achtergrond ook de ruimte (padding) vult maar niet de marges.
MargesDe marges kunnen ingesteld worden op een manier die vergelijkbaar is met de ruimte en de randen. De marges zijn altijd transparant en dienen om je object afstand te geven tot omringende objecten. <P STYLE="background:#99F; text-align:center; margin-top:5px; margin-right:50px; margin-bottom:5px; margin-left:50px;">Ruime marges!</P> Ruime marges! Ruimere marges! Je ziet dat de marges de afstand tot het omringende object bepalen, in dit geval de lichtgrijze rand. De paragraaf met grotere marges wordt dus smaller.
LettertypeJe kunt op twee manieren het lettertype kiezen: een font bij naam noemen of een algemeen schriftsoort benoemen. De algemene schriftsoorten zijn:
Als je een algemeen font-soort kiest, zoekt de browser iets wat daarbij past. Als je een lettertype met naam noemt probeert de browser precies dat lettertype te vinden. Je kunt beide mogelijkheden ook combineren: P.font1 { font-family:times,times new roman,serif; text-align:center;} In je HTML document gebruik je dan: <P CLASS="font1">Eerste voorbeeld met lettertypes</P> Eerste voorbeeld met lettertypes Tweede voorbeeld met lettertypes Derde voorbeeld met lettertypes De browser zoekt nu eerst naar de lettertypes die je bij naam noemt en als die niet gevonden worden een algemeen lettertype wat een goede vervanging is.
VetgedruktDe font-weight eigenschap wordt gebruikt om verschillende gradaties van vetgedrukt aan te geven: <SPAN STYLE="font-weight:lighter;">lighter: een lichtere regel</SPAN>
lighter: een lichtere regel In deze voorbeelden zie je meteen ook het nut van het SPAN element. Dat kan gebruikt worden om een STYLE of CLASS attribuut onder te brengen. Je kunt ook een getal gebruiken om aan te geven hoe vet een regel moet worden. Je kunt alleen de getallen gebruiken uit de voorbeelden hier onder, en geen andere waarden. 400 is hetzelfde als "normal" en 700 is hetzelfde als "bold" <SPAN STYLE="font-weight:100;">font-weight waarde 100</SPAN>
font-weight waarde 100 Niet alle regels zien er verschillend uit. Dat kan komen door de browser of door het gebruikte lettertype. Niet alle waarden van 100 t/m 900 zijn altijd beschikbaar.
LetterstijlEr zijn drie stijlen beschikbaar: normal, italic en oblique. Je kunt er maar één tegelijk gebruiken. <SPAN STYLE="font-style:italic;">italic: schuingedrukt</SPAN>
italic: schuingedrukt Hoe de drie stijlen er precies uitzien kan verschillen per browser en gebruikt lettertype. "normal" is de standaard waarde maar soms wil je die toch gebruiken: <P STYLE="font-style:italic">Soms wil je in een schuingedrukte paragraaf één <SPAN STYLE="font-style:normal;">normaal</SPAN> woord.</P> Soms wil je in een schuingedrukte paragraaf één normaal woord. Zo zie je hoe je normaal toch wilt gebruiken ondanks dat het de default waarde is.
Varianten op lettertypesMet font-variant kunnen kleine letters als kleine hoofdletters (small caps) worden getoond. <SPAN STYLE="font-variant:small-caps;">Kleine hoofdletters</SPAN> Kleine hoofdletters "Normal" is de beginwaarde en die heb je dus alleen nodig als je normale tekst wilt tonen in een object wat "small caps" overgenomen heeft van het omringende element.
LettergrootteEr zijn verschillende manieren om lettergrootte te definiëren. Je kunt dat doen door absolute groottes met namen te kiezen: <SPAN STYLE="font-size:xx-small;">Extra, extra kleine tekst</SPAN>
Extra, extra kleine tekst Je kunt de grootte ook instellen met absolute waarden in millimeters, centimeters, inches, point, pixel, pica, x-height (de hoogte van een kleine letter x) of em (de hoogte van het lettertype). Het ligt voor de hand dat die grootte niet negatief kan zijn. <SPAN STYLE="font-size:6mm;">6 Millimeter</SPAN>
6 Millimeter Een alternatief is relatieve groottes te gebruiken: <P STYLE="font-size:large;">Dit is een voorbeeld van <SPAN STYLE="font-size:smaller;">kleiner (smaller)</SPAN> en <SPAN STYLE="font-size:larger;">groter (larger)</SPAN> als tekstgrootte.</P> Dit is een voorbeeld van kleiner (smaller) en groter (larger) als tekstgrootte. In het bovenstaande voorbeeld heeft de paragraaf een grote letter, en krijgen twee kleine stukjes tekst een grotere en kleinere letter. als je dit vergelijkt met het eerste voorbeeld zie je dat "smaller" en "larger" resulteert in een maatje kleiner of groter op die schalen. Tenslotte kunt je de grootte ook opgeven als een percentage van de grootte van de tekst van het omringende element: <P STYLE="font-size:large;">Dit is een voorbeeld van <SPAN STYLE="font-size:50%;">vijftig procent</SPAN> en <SPAN STYLE="font-size:150%;">honderdvijftig procent</SPAN>.</P> Dit is een voorbeeld van vijftig procent en honderdvijftig procent.
LetterafstandMet CSS kun je ook de afstand tussen letters controleren. Die afstand kan worden ingesteld in millimeters, centimeters, inch, punten, pixels, pica, x-hoogte en letterhoogte: <SPAN STYLE="letter-spacing:2mm">2 millimeter</SPAN>
2 millimeter Het is overduidelijk dat je tekst niet erg leesbaar wordt door een grote letterafstand. De waarde "normal" kan gebruikt worden om de letterafstand weer terug te zetten naar de beginwaarde voor dat lettertype. Dat is nuttig als het omringende object een grote letterafstand heeft: <P STYLE="letter-spacing:0.5cm;">Grote en <SPAN STYLE="letter-spacing:normal;">normale</SPAN> afstand.</P> Grote en normale afstand.
RegelafstandDeze eigenschap geeft de afstand tussen regels tekst. De waarde kan een getal zijn, waarmee de regelafstand de lettergrootte vermenigvuldigd met het getal wordt. <P STYLE="line-height:2.0;">Semper ubi sub ubi ... periculo deicerentur.</P> Semper ubi sub ubi. Quone modo nunc, fulve bos? Si hoc non legere potes, tu asinus es. Tua mater tam antiqua ut linguam latinam loquatur. Itaque cum adpropinquarent Britanniae et ex castris viderentur, tanta tempestas subito coorta est ut nulla earum cursum tenere posset. Je kunt de regelafstand ook instellen in millimeters, centimeters, inch, punten en pixels. Omdat deze voorbeelden nogal veel ruimte innemen geef ik er maar een: <P STYLE="line-height:8mm;">Semper ubi sub ubi ... periculo deicerentur.</P> Semper ubi sub ubi. Quone modo nunc, fulve bos? Si hoc non legere potes, tu asinus es. Tua mater tam antiqua ut linguam latinam loquatur. Itaque cum adpropinquarent Britanniae et ex castris viderentur, tanta tempestas subito coorta est ut nulla earum cursum tenere posset. Je kunt ook een negatief getal gebruiken voor de regelafstand waarmee je overlappende tekst maakt. Je kunt ook een percentage gebruiken, de regelafstand wordt dan dat percentage van de hoogte van het lettertype.
Uitlijnen van tekstMet de text-align eigenschap geef je aan hoe tekst uitgelijnd moet worden. Er zijn vier mogelijke waarden: left, right, center of justify. <P STYLE="text-align:left">Links uitgelijnde tekst</P> Links uitgelijnde tekst Gecentreerde tekst Rechts uitgelijnde tekst Semper ubi sub ubi. Quone modo nunc, fulve bos? Si hoc non legere potes, tu asinus es. Tua mater tam antiqua ut linguam latinam loquatur. Itaque cum adpropinquarent Britanniae et ex castris viderentur, tanta tempestas subito coorta est ut nulla earum cursum tenere posset, sed aliae eodem unde erant profectae referrentur, aliae ad inferiorem partem insulae, quae est propius solis occasum, magno suo cum periculo deicerentur.
Kleuren van linksIn het stylesheet voor deze gids gebruik ik de volgende kleuren: A:link {color:black;} De eerste drie regels bepalen de kleuren voor een link, een link die je recentelijk hebt bezocht en een actieve link. Een link is actief op het moment dat je er met de muis boven hangt en de (linker) knop ingedrukt houdt. De vierde regel geeft aan hoe de link er uit ziet als je er met de muis boven hangt zonder de knop in te drukken. Op de volgende manier kun je meerdere, verschillende stijlen voor links gebruiken op je pagina: A:link.one {color:black; font-family:sans-serif; font-style:italic;} In je HTML document gebruik je vervolgens dit: <P><A HREF="xxx.html" CLASS="one">non-existent file</A><BR>
non-existent file Een alternatief is om een STYLE attribuut te gebruiken bij elk A element <A HREF="xxx.html" STYLE="color:black; font-family:sans-serif; font-style:italic;">non-existent file</A>
non-existent file
Nieuwe pagina bij afdrukkenMiddels stylesheets kun je bij het afdrukken een nieuwe pagina afdwingen op door jou gekozen plekken. De titel van deze sectie ziet er zo uit: <H2 STYLE="page-break-before:always;">Nieuwe pagina bij afdrukken</H2> Als je dit document afdrukt of voorvertoning van afdrukken bekijkt, zul je zien dat deze sectie steeds op een nieuwe pagina begint. Je kunt ook een nieuwe pagina na een bepaald element afdwingen: <P STYLE="page-break-after:always;">Nieuwe pagina na deze paragraaf...</P> Nieuwe pagina na deze paragraaf... Helaas ondersteunen lang niet alle browsers deze eigenschappen.
|
|
|
Reacties welkom...
Open standaarden...
Deze site is volledig conform de open standaarden van het World Wide Web Consortium (W3C). Je kunt op de logo's klikken om dat te verifiëren.
| ||
|
©1995-2021 Jan Weijers, the Netherlands. All rights reserved.
| ||
