WINDOWS
Windows 10
Windows 8
Windows 7
Windows XP
WEBSITE
HTML
StyleSheet
xampp
BROWSERS
Edge
Firefox
HARDWARE
Sony e-Reader
iPhone
iPad
SOFTWARE
Thunderbird
HomeSite
PC-INFO
DNS servers
DIVERSEN
Dagboek Tobias
Stripboeken
PostNL tarieven
 

INDEX StyleSheet
Preloading images met CSS
Implementeren van een StyleSheet in HTML

Preloading images met CSS
'Preloading' met JavaScript is de meest gehanteerde techniek! Echter, bij de gebruikte browser moet Javascript wel staan ingeschakeld. Zonder Javascript worden de plaatjes niet van te voren geladen. Cascading Style Sheets (CSS) is een goed alternatief. Door gebruik te maken van de 'DISPLAY' eigenschap vertel je de browser een plaatje te laden, en in z'n cache te plaatsen zonder dat deze op de pagina wordt getoond.
Plaats hiertoe de volgende code in de 'HEAD section' van de pagina:
   <style type="text/css">
   .hiddenElement {display:none;}
   </style>


De volgende stap is het plaatsen van de aanroep van het plaatje 'aan het einde van de pagina' (vlak boven de </body>-tag). Hierbij dient in elke aanroep de 'hidden class' naam te worden opgenomen; bv:
   <img src="plaatje.gif" alt="" width="100" height="100" border="0" class="hiddenElement">

Implementeren van een StyleSheet in HTML
Een StyleSheet kan op een aantal manieren in een HTML-document worden opgenomen:
1. als embedded (intern) StyleSheet
2. als extern StyleSheet
3. als imported StyleSheet
4. als inline style

1. als embedded (intern) StyleSheet
    De codes gelden alleen voor de betreffende pagina:
    <STYLE TYPE="text/css">
    selector { stijldeclaratie }
    </STYLE>


2. als extern StyleSheet
    De codes staan in een bestand met de extensie .css en worden vervolgens in de sectie <head> van een     HTML-document opgeroepen:
    <link rel="StyleSheet" href="naam van de stylesheet.css" type="text/css">

3. als imported StyleSheet
    Externe StyleSheets kunnen met elkaar gekoppeld worden:
    <head>
    <link rel="StyleSheet" href="stylesheet.css" type="text/css">
    <STYLE TYPE="text/css">
        @inport url(stylesheet2.css);
        @inport url(stylesheet3.css);
    </STYLE>
    </head>


4. als inline style
    Met de mogelijkheid een stijl te gebruiken voor één enkele HTML-code:
      a. met het gebruik van DIV style:
         De DIV style is bedoeld voor langere stukken die afwijken van hetgeen in het stylesheet is
         gedefinieerd. Hierbij moet je bijvoorbeeld denken aan alinea's die extra moeten opvallen.
         DIV is een afkorting van DIVision, een onderverdeling van de tekst. Natuurlijk kan de DIV style ook
         worden gebruikt om een enkel woord te benadrukken, maar bedenk wel dat na DIV altijd een
         nieuwe alinea begint! Het is beter om in dat geval de SPAN Style toe te passen
         <body> <div style="color:red">de roodgekleurde tekst</div> </body>
       b. met het gebruik van SPAN style:
          De SPAN-style wordt gebruikt als je een kort tekstgedeelte een ander uiterlijk wil geven.
         SPAN werkt op tekstniveau. Er volgt dus niet automatisch een nieuwe regel.
         <body> <span style="color:red">de roodgekleurde tekst</span> </body>

Submenu WEBSITE | HTML | StyleSheet | Xampp |