CSS
CSS (Cascading SyleSheets ou Folhas de Estilos em Cascata) é uma tecnologia padronizada pela W3C (nasceu em meados de 1996), que não é parte do HTML padrão, mas sim um conjunto de novas tags que ajudam a ter um melhor controle sobre o layout e o gerenciamento do site.
Por que usar CSS em páginas Web?
Todo documento escrito utiliza certos elementos de design para formatar seções de texto a fim de manter a mesma aparência, seguindo assim um padrão.
As Folhas de Estilos em Cascata permitem uma versatibilidade maior na programação do layout de páginas Web sem aumentar o seu tamanho em Kb, pois oferece várias possibilidades que antes eram conseguidas com a utilização de gifs e jpgs. Basicamente, o CSS permite ao designer um controle maior sobre os atributos tipográficos de uma home page, como tamanho e cor das fontes, espaçamento entre linhas e caracteres, margem do texto, entre outros.
Devido às grandes vantagens advindas do uso do CSS, a maioria dos grandes sites está usando-a em suas páginas.
Versões e compatibilidade
Como já mencionado, existe um grupo voltado para buscar um mínimo de padronização na Internet, especificamente na World Wide Web.
Este grupo é chamado Word Wide Web Consortium ou W3C e pode ser encontrado no endereço www.w3.org.
Os níveis de CSS são: Nível 1 e Nível 2. A diferença básica é que na CSS 2 foi implementado o recurso de posicionamento e colocação de elementos em camadas, permitindo a sobreposição de texto sobre texto ou texto sobre figuras.
O W3C recomenda em muitos casos que as folhas de estilo sejam usadas em vez das tags padrão do HTML e isso pode ser verificado na própria documentação da HTML quando se encontra uma tag ou parâmetro marcado com "deprecated".
O CSS é suportado pelos browsers Microsoft Internet Explorer e Netscape Navigator, nas versões 4 ou posteriores. É importante deixar bem claro que, embora seja essa uma especificação padrão do W3C, nem todos os browsers e versões apresentam os mesmos resultados e também podem não ter alguma característica implementada.
Assim, torna-se importante ainda o uso dos principais browsers do mercado para testar os recursos do CSS.
Conceitos básicos
Para que uma folha de estilo possa definir a aparência de um documento, o browser precisa saber que ela existe. A tag <style> e </style> determinam o início da style sheet.
Cada estilo que você cria é definido como uma regra CSS. Cada regra deve utilizar a seguinte sintaxe:
- Elemento {atributo1:valor;atributo2:valor...}
- Elemento - descreve o elemento de design ao qual o estilo será aplicado. A mesma tag HTML, mas sem os sinais de maior e menor. Também podem ser utilizadas classes personalizadas.
- Atributo - O aspecto específico do elemento usado como estilo. Deve ser um nome de atributo CSS válido, como o atributo font-size.
- Valor: a configuração aplicada ao atributo. Deve ser uma configuração válida para atributo em questão, como 20pt para font-size.
Exemplo:
<style type="text/css"> <!-- p (text-decoration: underline;} --> </style>Métodos de uso das folhas de estilo
Existem quatro (4) maneiras para incluir estilos CSS às páginas:
- Estilo In-Line: método utilizado para aplicar o estilo em elementos individuais na página. Normalmente utilizado em casos de exceções a uma regra já declarada.
- Folhas de Estilo incorporadas: método utilizado para aplicar estilo em qualquer elemento da página, por serem incorporados a tag <head>.
- Folhas de estilo externas: método que permite usar uma folha de estilo em várias páginas HTML.
- Importação de estilo: método que permite importar uma folha de estilo de outro arquivo. A importação de um style sheet é parecida com o método anterior, a diferença é que você não pode combinar o método de link com outros métodos de inserções de estilos, mas a importação pode ser combinada.
Estilo in line
Método utilizado para aplicar o estilo em elementos individuais na página. Este estilo é definido no corpo do código HTML através do atributo STYLE.Exemplo de método In-LineExemplo:<html> <head> </head> <body> <h1 style="font-family:Impact;background:yellow;color:red"> Este é um titulo HTML usando CSS</h1> <p style="color:green">Cascading Style Sheet</p> </body> </html>
Nenhum comentário:
Postar um comentário