Sobre os layouts CSS de página

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

Os sites da Web profissionais separam o estilo do conteúdo. Existem várias razões para isto, a mais óbvia (para um programador) é a possibilidade de controlar o estilo de várias páginas alterando apenas um ficheiro. A informação de estilo inclui: tipos de letra; imagens de fundo; imagens (que se repetem em todas as páginas); posição e dimensões de elementos numa página. O nosso ficheiro HTML fica apenas a conter: a informação de cabeçalho; uma série de elementos; o texto do seu site da Web. Porque está a criar um modelo Joomla!, este irá ter atualmente: alguma informação de cabeçalho; código php para solicitar o resto da informação do cabeçalho; uma série de elementos; código php para solicitar a posição de cada módulo; código php para solicitar o conteúdo principal.

As informações sobre estilos são programadas em CSS, cascading style sheet, e normalmente guardadas em ficheiros com a extensão .css. UM página web contém um link para o ficheiro .css associado para que o browser consiga encontrar a informação sobre o estilo a ser aplicado na página. O código CSS também pode ser inserido dentro do HTML entre as tags <style type="text/css"></style>.

Todo o código CSS é aplicado a um elemento de uma página html/xml. Se você quiser um estilo que abranga toda uma página, provavelmente iriá aplicá-lo no elemento <body>. Pode aplicar estilos a qualquer elemento html, tais como <p>, <table> ou <div>. Para aplicar um estilo a um determinado elemento ele precisa de ter um ID. Por exemplo, para aplicar estilos ao elemento <div> contendo o título, você teria o primeiro que incluir um ID no código html - <div ID="title">.