Edimax Webserver Manual

top
Soortgelijke onderwerpen over deze Edimax
Edimax verbouwing
Mailserver op Edimax
Andere onderwerpen op deze Edimax
Vogels
Insecten

Style sheets of .CSS files

Webserver manual

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
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: In deze display.css is o.a. het volgende te vinden: 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

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'.


Voor op- of aanmerkingen over deze pagina klik hier