CSS Inleiding

Benodigde basiskennis

Voordat je doorgaat, moet je een basisverstand van de volgende kennis hebben:

  • HTML
  • XHTML

Als je deze projecten graag eerst wilt leren, raad ik je aan om Home Bezoek gerelateerde tutorials.

CSS Overzicht

  • CSS staat voor opgestapelde stijlen (Cascading Style Sheets)
  • StijldefinitiesHoe te weergeven HTML-elementen
  • Stijlen worden meestal opgeslagen inStijlbladenIn
  • Stijlen toevoegen aan HTML 4.0 was omOplossen van het probleem van het scheiden van inhoud en weergave
  • Externe stijltableauKunnen aanzienlijk de efficiëntie verhogen
  • Externe stijlbladen worden meestal opgeslagen in CSS-bestandenIn
  • Meerdere stijldefinities kunnenLagereVoor een

Stijlen lossen een algemeen probleem op

HTML-tags werden oorspronkelijk ontworpen om documentinhoud te definiëren. Door het gebruik van tags zoals <h1>, <p>, <table> was het doel van HTML om informatie zoals 'dit is een titel', 'dit is een paragraaf', 'dit is een tabel' uit te drukken. De lay-out van het document werd gedaan door de browser, zonder enige vorm van formatteringstags te gebruiken.

Vanwege de voortdurende toevoeging van nieuwe HTML-tags en eigenschappen (zoals font-tags en kleur-eigenschappen) door de twee belangrijkste browsers (Netscape en Internet Explorer) aan de HTML-norm, wordt het steeds moeilijker om sites te maken waarbij de inhoud duidelijk gescheiden is van de weergave.

Om dit probleem op te lossen, nam de World Wide Web Consortium (W3C), een niet-commerciële standaardisatiebond, de taak op om HTML te standaardiseren en creëerde naast HTML 4.0 ook stijlen (Style).

Alle主流 browsers ondersteunen het opzetten van stijlen.

Stijlbladen verhogen aanzienlijk de efficiëntie.

Stijlbladen definiëren hoe HTML-elementen worden weergegeven, net als de rol van de font-tag en de kleur-eigenschappen in HTML 3.2. Stijlen worden meestal opgeslagen in externe .css-bestanden. Door slechts een eenvoudig CSS-document te wijzigen, kun je tegelijkertijd de lay-out en het uiterlijk van alle pagina's op de site wijzigen.

Omdat het mogelijk is om tegelijkertijd de stijl en lay-out van meerdere pagina's te controleren, kan CSS worden beschouwd als een doorbraak in het veld van WEB-design. Als websiteontwikkelaar kun je stijlen definiëren voor elke HTML-element en deze toepassen op zoveel pagina's als je wilt. Voor een globale update is het genoeg om de stijl te wijzigen, waarna alle elementen op de website automatisch worden bijgewerkt.

Meerdere stijlen worden gecascadeerd tot een

Stijltabellen staan toe om stijlinformatie op meerdere manieren vast te leggen. Stijlen kunnen worden gedefinieerd in een enkel HTML-element, in de kop van een HTML-pagina, of in een externe CSS-bestand. Het is zelfs mogelijk om meerdere externe stijltabellen binnen dezelfde HTML-document te refereren.

Cascaderegel

Wanneer dezelfde HTML-element wordt gedefinieerd door meerdere stijlen, welke stijl wordt dan gebruikt?

Over het algemeen, worden alle stijlen gecascadeerd naar een nieuwe virtuele stijltabel volgens de onderstaande regels, waarbij het getal 4 de hoogste prioriteit heeft.

  1. Browser standaardinstellingen
  2. Externe stijltableau
  3. Interne stijltableau (geplaatst binnen de <head>-tag)
  4. Inline stijlen (binnen HTML-elementen)

Daarom hebben inline stijlen (binnen HTML-elementen) de hoogste prioriteit, wat betekent dat ze prioriteit hebben boven de volgende stijlverklaringen: stijlverklaringen in de <head>-tag, stijlverklaringen in een externe stylesheet of stijlverklaringen in de browser (standaardwaarden).