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ă • ‎русский • ‎中文(台灣)‎

Professionele websites scheiden de vormgeving van de inhoud. Daar zijn verschillende redenen voor; de meest duidelijke (voor ontwikkelaars) is dat je het uiterlijk van veel pagina's kunt regelen door één bestand te veranderen. Styling informatie bevat: lettertypen, achtergronden, afbeeldingen (die op elke pagina terugkomen), positie en dimensies van elementen op de pagina. Uw HTML bestand bevat: header-informatie, een serie elementen en de tekst van uw website. Omdat u een Joomla!-template maakt, zult u het volgende hebben: 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. Als u wilt dat een stijl de hele pagina omvat, zou u het moeten toepassen op het <body> element. U kunt stijlen toepassen op elk HTML-element, zoals <p>, <table> of <div> elementen. Om de stijl van een specifiek element te regelen heeft het een ID nodig. Om bijvoorbeeld stijlen toe te passen op de <div> die de titel bevat, moet u eerst een ID opnemen in de HTML: <div ID="title">.