Om de .css files te kunnen wijzigen,
is enige kennis van Cascading Style Sheets nodig.
Deze kennis is op Internet te vinden,
maar houd voor de zekerheid toch maar een kopie achter de hand
voordat je de css files gaat wijzigen !
Verschillende style sheets voor scherm en printer
Er worden in deze site 2 style sheets gebruikt
(maar je bent binnen je eigen site vrij om dat anders te doen):
Zoals de naam al zegt: de éne zorgt voor de layout op het beeldscherm,
en de andere voor de layout op de printer.
Dat is handig, want
- aanklikbare links hebben op het scherm meer functie dan op papier
- aanwijzingen om iets aan te klikken hebben op papier al helemaal geen nut
- schtergrondkleur op het scherm kost niets; op de printer echter een half potje inkt.
De browser kent het verschil, doordat het label head.begin
de volgende 2 regels bevat:
<LINK REL='stylesheet' HREF='/~display.css' TYPE='text/css'>
<LINK REL='stylesheet' HREF='/~print.css' TYPE='text/css' MEDIA='print'>
Hierin staat ~display.css gerefereerd als CSS file in het algemeen,
en ~print.css speciaal voor 'Media=print'.
display.css
In deze file staan in het algemeen de layout-codes voor de hele website,
bedoeld voor op het scherm /en algemene codes (scherm én printer).
Sommige daarvan worden ook gebruikt door het Webserver programma:
- body = kleur en layout van de hele pagina
- h1 = kleur en lettertype site-name
- h2 = kleur en lettertype van de pagina-titel
- .description = kleur en lettertype van de omschrijving
- .mark = kleur en lettertype van de 'markeerstift'
- img = kleur en dikte van de randjes om de images
In deze display.css is o.a. het volgende te vinden:
- color = kleur van de letters
- background = kleur van de achtergrond
- text-decoration = wijze van afdrukken: vet, schuin, ...
De kleuren zijn steeds geschreven in 3 hexadecimale getallen van elk
2 cijfers, dus 6 cijfers in totaal, voorafgegaan door een '#'.
Dus #FF8800 staat voor rood=#FF(255) + groen=#88(136) + blauw=#00(0),
oftewel zo'n beetje oranje.
Speciale aandacht voor de codes .printonly en .noprint:
deze zorgen er voor dat iets uitsluitend op de printer komt, of juist
helemaal niet.
Kijk maar:
deze tekst verschijnt alleen op het scherm,
en niet op de printer.
Controleer dit met print, preView, en lees dit stukje
in het printvoorbeeld !
Met View/Source kun je zien, hoe je dit kunt bereiken.
deze tekst verschijnt niet op het scherm,
maar uitsluitend op de printer.
De ~display.css van deze site bevat de volgende inhoud:
.css files
Bovengenoemde codes geven aan wat de functie is van de tekst.
In de .css-file staat hoe deze
tekst er uit moet zien:
Bij elke HTML-code hoort een style,
waarin de layout is gedefinieerd.
Dat garandeert
- consequente vorm en layout
- heldere HTML-code en inhoud van tekst-files
- weinig onderhoud
- minder kans op fouten door onleesbare HTML-code
Deze code's kunnen door de tekst-files heen worden gebruikt.
Let er op, dat voor elke gebruikte start-code ook de betreffende
eind-code wordt geschreven (behalve <br>, en <p>).
De file ~display.css in deze site ziet er als volgt uit:
/* Scherm layout */
body { background: #e0e0e0;
color: #000000;
text-align: justify;
}
.new { background: #f0f0f0;
}
.mark { background: #FFE0E0;
color: #FF0000;
}
.literal { background: #FFFFFF;
color: #000000;
}
.description { text-decoration: bold;
color: #000000;
}
/* Link layout */
a:link { color: #CC0040; }
a:visited { color: #CC0040; }
a:active { color: #000000; }
a:hover { color: #0000FF; }
/* Pagina name */
h1 { color: #4040E0; }
/* Sub pagina names */
h2 { color: #4040E0; }
/* Sub pagina names */
h3 { color: #4040E0;
text-decoration: underline;
clear: both;
}
h4 { clear: left; }
img { border: solid #000000 0px;
padding: 3px 3px 3px 3px;
}
#plaatje { float: left;
padding: 5 px;
}
/* Header table */
header.a:link { text-decoration: none; }
header.a:visited { text-decoration: none; }
header.a:active { text-decoration: none; }
header.a:hover { text-decoration: none; }
/* Table header */
th { background: #D0D0D0; }
/* Kleuren */
.parm1 { background: #F0C0C0; }
.parm2 { background: #C0F0C0; }
.parm3 { background: #C0C0F0; }
img.float_left {
float: left;
clear: left; }
De file ~print.css in deze site ziet er als volgt uit:
/* Printer layout */
body { background: #FFFFFF;
color: #000000;
font-size 10pt;
font-family "Times New Roman", Times, Serif;
margin: 1em 12m 1em 2em;
text-align: justify;
}
.mark { background: #404000;
color: #FFFFFF;
}
img {
border: solid $FFFFFF 1px;
padding: 1px 1px 1px 1px;
}
.printonly { display: inline; }
.noprint { display: none; }
/* Link layout */
a:link { color: #400000; }
a:visited { color: #400000; }
a:active { color: #400000; }
a:hover { color: #400000; }
Wil je meer weten over Cascading Style Sheets:
zoek dan op Internet, of lees boeken over CSS van o.a. 'Meyer'.
