Naam:  Wachtwoord:        Wachtwoord? Naam?   |   Register
Home CSS Implementeren CSS

Implementeren CSS

PDF Afdrukken E-mail
Webdesign - CSS

Het implementeren van Style sheets

Om een style sheet te kunnen gebruiken moet die op één of andere manier worden verbonden met het HTML-document. Hiervoor zijn vier mogelijkheden, te weten external style sheet, embedded style sheet, inline style sheet en imported style sheet.

External style sheet:
Een bestand dat geheel los staat van het HTML-document. In dit bestand staat alle door u gewenste CSS-code. Het bestand slaat u op met de extensie .CSS, bijvoorbeeld STYLE1.CSS. Om de style sheet te kunnen gebruiken moet u in ieder HTML-document een verwijzing opnemen naar dit bestand. U doet dit als volgt:

<HEAD>
<STYLE rel=stylesheet href="/style1.css" type="text/css">
</HEAD>

Het voordeel van deze manier is dat u altijd maar te maken heeft met één bestand en de rest van site met rust kunt laten. Werken met externe style sheets is dan ook een zeer veilige manier om op een later moment de site aan te passen.

Embedded style sheet:
Hiermee kunt u een bepaalde style toekennen aan één specifiek document. De CSS-code wordt geplaatst tussen de <STYLE> tags die worden genesteld in de <HEAD> tags.

<HEAD>
<STYLE type="text/css">
< ! --
CSS-code
-- >
</STYLE>
</HEAD>

De rules in de style sheet worden geschreven als HTML-commentaar, zodat oudere browsers hiervan geen problemen ondervinden.

Inline style sheet:
Een bepaalde style die gekoppeld is aan één enkel HTML-element. In dat geval wordt de style genoteerd in de start-tag van het HTML-element.

<H1 style="margin-left: 25%">Vijfentwintig procent inspringen</H1>

Er zijn twee belangrijke reden waarom u deze mogelijkheid beter niet kan aanleren. De eerste reden is dat u later veel tijd kwijt bent aan het aanpassen van de HTML-pagina's. U moet immers alle code nalopen en veranderen. Als u alle code in één document heeft staan kunt u dit document voor meerdere HTML-pagina's gebruiken en dat spaart tijd. De tweede reden is dat u de inhoud niet losmaakt van de grafische presentatie en daar was CSS nu net voor bedoeld.

Imported style sheet:
Zoals al eerder aangegeven is het mogelijk om verschillende style sheets met elkaar te combineren. Het voordeel hiervan is dat iedere afdeling kan werken aan zijn eigen project. Aan het eind worden alle style sheets verzameld en geïntegreerd in één bepalende style sheet, waarnaar wordt verwezen in de HTML-pagina's. Om andere style sheets te kunnen importeren wordt gebruikt gemaakt van de notatie @import binnen de style-tags.

<LINK rel=stylesheet href="/hoofddocument.css" type="text/css">
<STYLE type="text/css">
<!--
@import "afdeling1.css";
@import "verkoop1.css";
@import "support1.css";
</STYLE>

U kunt eindeloos door importeren, want VERKOOP.CSS kan ook weer gebruikmaken van geïmporteerde style sheets. Bij het importeren geldt wel één zeer belangrijke regel. Bij conflicten gaat de style sheet die eerder in de rij staat voor.

Deel dit bericht met anderen

Submit to Delicious Submit to Digg Submit to Facebook Submit to Google Bookmarks Submit to Stumbleupon Submit to Technorati Submit to Twitter Submit to LinkedIn

Commentaar (0)add comment


Schrijf commentaar

feedToon/Verberg commentaar formulier
kleiner | groter
password
 

busy
 

Lente Actie!

Omdat het lente is, vieren we feest! We geven daarom alleen in de lente 50 euro korting op alle basistrainingen van Avid Studio, Magix Video deluxe, Sony Vegas Movie Studio en Adobe Premiere Elements.

U betaalt dus geen 149 euro per trainingsdag, maar 99 euro. Schrijf je snel in, want er zijn maar een beperkt aantal plaatsen beschikbaar!

Cursussen en trainingen

Dvscene geeft trainingen en cursussen in het trainingscentrum van Iscenes multimedia.

Er zijn verschillende cursussen per pakket voor beginners en gevorderden.  U kunt zich inschrijven voor de volgende cursussen en trainingen:

 

 

 

Dvscene.nl is onderdeel van Iscenes multimedia specialist in videomontage-, cms- en cameratrainingen. Copyright © 2012. Dvscene.nl.