Over CSS pagina-layouts

From Joomla! Documentation

This page is a translated version of the page About CSS page layouts and the translation is 100% complete.

Other languages:
العربية • ‎বাংলা • ‎Deutsch • ‎English • ‎español • ‎فارسی • ‎français • ‎हिन्दी • ‎Bahasa Indonesia • ‎italiano • ‎Nederlands • ‎Nederlands (informeel)‎ • ‎português • ‎português do Brasil • ‎română • ‎русский • ‎中文(台灣)‎

In een professionele website is vormgeving gescheiden van inhoud. Daar zijn verschillende redenen voor. De grootste reden (voor ontwikkelaars) is dat je, door één bestand te veranderen, het uiterlijk van veel pagina's tegelijk kunt regelen. Je kunt de volgende stijlaanpassingen doen: lettertype, achtergronden, afbeeldingen (die op elke pagina terugkomen), positie en dimensies van elementen op de pagina. Je HTML-bestand bevat: header-informatie, een serie elementen en de tekst van je website. In een Joomla!-template staat het volgende: header-informatie, php-code om de rest van de header-informatie op te vragen, een serie elementen, php-code om de moduleposities op te vragen en php-code om de belangrijkste inhoud op te vragen.

Stijl-informatie wordt gecodeerd in CSS (Cascading Style Sheets) en meestal opgeslagen in bestanden met de extensie .css. Een webpagina bevat een link naar het bijbehorende .css-bestand, zodat een browser de juiste stijl-informatie kan vinden om toe te passen op de pagina. CSS kan ook in een HTML-bestand worden opgenomen, tussen <style type="text/css"></style> tags.

Alle CSS-code wordt toegepast op een element van de HTML/XML-pagina. Door een stijl toe te passen op het element <body>, geef je het mee aan de hele pagina. Je kunt stijlen toepassen op elk HTML-element, zoals <p>, <table> of <div> -elementen. Om de stijl van een specifiek element te regelen gebruik je een ID. Bijvoorbeeld: om een titel-element aanpassen op de <div>, neem je eerst een ID op in de HTML: <div ID="title">.