Introdução à CSS
O Que Você Já Deve Saber
Antes de continuar você deve ter algum conhecimento básico do seguinte:
- WWW, HTML e os fundamentos da construção de páginas Web
Se você quer etudar estes assuntos primeiro, antes de começar a ler sobre CSS, você pode encontrar os tutoriais que precisa em W3Schools'
Home Page.
O Que é CSS?
- CSS significa Cascading Style
Sheets (Folhas de Estilo em Cascata)
- Os estilos definem como exibir elementos HTML
- Os estilos são normalmente armazenados em Folhas de Estilo
- Os estilos foram adicionados à HTML 4.0 para resolver um problema
- Folhas de Estilo Externas podem poupar-lhe muito trabalho
- As Folhas de Estilo Externas são armazenadas em arquivos CSS
- Definições de estilo múltiplas irão cascatear (se sobrepor) umas sobre as outras
Demonstração de CSS
Com CSS, seus documentos HTML podem ser exibidos usando diferentes
estilos de saída:
Veja como funcionam
Os Estilos Resolvem um Problema Comum
As tags HTML foram originalmente projetadas para definir o conteúdo de um documento. Elas supostamente diriam "Isto é um título", "Isto é um parágrafo", "Isto é uma tabela", usando tags como <h1>, <p>, <table>, e assim por diante. O projeto do documento estava supostamente aos cuidados dos navegadores, sem usar qualquer tag de formatação.
Conforme os dois maiores navegadores - Netscape e Internet Explorer - continuaram a adicionar novas tags e atributos HTML (como a tag <font> e o atributo color) à epecificação HTML original, tornou-se mais e mais difícil criar sítios Web onde o conteúdo dos documentos HTML [não] estava claramente separado do layout de apresentação do documento.
Para resolver este problema, o World Wide Web Consortium (W3C) - o consórcio para estabelecimento de padrões, sem fins lucrativos, responsável pela padronização da HTML - criou os STYLES em adição à HTML 4.0.
Tanto o Netscape 4.0 quanto o Internet Explorer 4.0 suportam Cascading
Style Sheets.
Folhas de Estilo Podem Poupar Muito Trabalho
Os estilos na HTML 4.0 definem como os elementos HTML são exibidos, assim como a tag font e o atributo color na HTML 3.2. Os estilos são normalmente salvos em arquivos externos aos seus documentos HTML. FOlhas de estilo externas permitem-lhe mudar a aparência e o layout de todas as páginas da sua Web, simplemente editando um único documento CSS. Se você já tentou mudar a fonte e a côr de todos os títulos em todas as suas páginas Web, você entende como a CSS pode poupar-lhe muito trabalho.
A CSS é uma ruptura no design de Web porque ela permite aos desenvolvedores controlar o estilo e o layout de múltiplas páginas Web de uma só vez. Como um desenvolvedor Web você pode definir um estilo para cada elemento HTML e aplica-lo à quantas páginas Web você quiser. Para fazer uma mudança global, simplemente mude o estilo, e todos os elementos na Web serão atualizados automaticamente.
Estilos Múltiplos Cascatearão Uns Sobre os Outros
As Folhas de Estilo permitem que a informação de estilo seja especificada de muitas maneiras. Os estilos podem ser especificados dentro de um único elemento HTML, dentro do elemento <head> de uma página HTML, ou num arquivo CSS externo. Mesmo múltiplas Folhas de Estilo externas podem ser referenciadas dentro de um único documento HTML.
Ordem de Cascata
Qual estilo será usado quando há mais de um estilo especificado para um elemento HTML?
Falando de modo geral pode-se dizer que todos os estilos irão "cascatear" em uma nova Folha de Estilo "virtual" pelas seguintes regras, onde a número quatro tem a prioridade mais alta:
- Padrão do Navegador
- Folha de Estilo Externa
- Folha de Estilo interna (dentro da tag <head>)
- Estilo em linha (Inline) (dentro do elemento HTML)
Assim, um estilo em linha (inline) (dentro de um elemento HTML) tem a mais alta prioridade, o que significa que ele irá anular cada estilo declarado dentro da tag <head>, numa folha de estilo externa, e num navegador (um valor padrão).
| 
HOME
