HTML
Folhas de estilo - CSS
Quando se deseja garantir uma formatação homogênea e uniforme em todas as páginas de um
site as folhas de estilo em cascata (Cascading Style Sheets) facilitam muito o trabalho de
criação.
Folha de estilo em cascata é um mecanismo simples para adicionar estilos (exemplos: fontes,
cores, espaçamentos) em documentos Web.
Ou seja, CSS é um padrão de formatação (Web Standards) para páginas que permite ir além
das limitações impostas pelo HTML.
Web Standards é um conjunto de normas, diretrizes, recomendações, notas, artigos, tutoriais e
afins de caráter técnico, e destinados a orientar fabricantes, desenvolvedores e projetistas para
o uso de práticas que possibilitem a criação de uma Web acessível a todos,
independentemente dos dispositivos usados ou de suas necessidades especiais.
Foi proposto pelo World Wide Web Consortium, W3 Consortium, o qual é uma comissão que
define os padrões de programação para a WWW, em duas especificações: CSS1 e CSS2.
A CSS 1 foi lançada em 12/1996 e tem aproximadamente 60 propriedades. É um modelo
simples de formatação, na maior parte para apresentações screen-based. A CSS 2 foi
finalizado em 05/1998. Mantém todas as propriedades da CSS1 e introduziu 70 propriedades
novas.
O uso de folhas de estilo permite:
- maior versatilidade na programação do layout de páginas, sem aumentar o seu tamanho em
Kb´s.
- maior controle sobre os atributos de uma página, como tamanho e cor das fontes,
espaçamento entre linhas e caracteres, margem do texto, caixas de texto, botões de formulário,
entre outros.
- a utilização de "layers", permitindo a sobreposição de objetos, textos e imagens, em camadas.
- modificar rapidamente todo o "layout" de um "site", ou de um certo grupo de formatação
(Exemplo: alterar a cor de todos os links).
Regras das folhas de estilos
Exemplicaando com o comando que diz que parágrafos definidos como título 3 terão a cor
amarela, nesse tom: H3 { color:#00ffff }
Nesse comando CSS existe uma regra, ou seja, uma indicação do aspecto de um ou mais
elementos. Essa REGRA configura a cor de todos os títulos H3 do arquivo.
Uma regra simples do CSS constitui-se de duas partes:
em que: Seletor: é a parte antes das chaves e Declaração: a parte entre as chaves.
O seletor
o elemento de ligação entre o documento HTML e o estilo.
O seletor especifica qual(is) elemento(s) são afetados pela declaração. A declaração configura
o efeito que o seletor terá. No exemplo acima, o seletor H3 e a declaração é "color: 00ffff".
É importante notar que com essa regra aplicada ao documento HTML, todos os elementos H3
serão afetados, ou seja, eles terão a cor marela, pois a propriedade "color" afeta apenas a cor
da fonte.
A declaração
Uma declaração também tem duas partes, separadas por dois pontos.
parte antes dos dois pontos e Valor: a parte depois dos dois pontos.
é uma qualidade ou uma característica que um elemento deve possuir. No exemplo essa
característica é a cor. O valor define exatamente a característica. No exemplo é amarela.
Deve-se ressaltar que as chaves - { } - e os dois pontos - : - são absolutamente necessários
para que os navegadores possam distinguir o seletor, a propriedade e o valor.
Modos de aplicar
Há alguns modos de aplicar as folhas de estilo:
1. Embedding (interno, incorporado, ou embutido)
Os comandos CSS ficam dentro de cada página HTML. Permite que uma página possa utilizar
uma formatação diferente das outras de um "site". O comando STYLE deve estar entre
<HEAD> e </HEAD>.
O código a ser aplicado é:
<STYLE TYPE="text/css">
<!-
.........
Os comandos CSS ficam nesta área
.........
->
</STYLE>
2. Inline (em Linha)
Os comandos de um certo estilo ficam diretamente no elemento HTML que se deseja alterar.
Possibilita que só aquele elemento seja estilizado, sem alterar todos os outros da página.
Pode-se colocar quantos comandos dentro de cada página HTML e pode-se utilizar comandos
CSS InLine, inclusive se os modos embedding ou linking estiverem sendo usados.
Exemplo: Eis um CSS Inline em um tag parágrafo, que determina que fique indentado em 3cm,
na cor amarela e na fonte verdana:
Texto modificado
O código usado foi:
<p style="text-indent: 3cm; color: rgb(255, 255, 0); font-family: Verdana, Arial;"><b>Texto
modificado</b></p>
Notar que se a fonte Verdana não estiver instalada no computador do leitor será usada a fonte
Arial).
3. Linking (externo, importado, ligado)
Criar um arquivo texto, com todos os estilos a serem aplicados. Salvar com o fomato .css.
A ligação do arquivo externo, ___.css com as páginas HTML será feita por meio de um
comando inserido na seção <HEAD> de cada página HTML que se desejar estilizar.
O código a ser aplicado em cada página é:
<LINK REL=StyleSheet HREF="[Link]" TYPE="text/css">
É importante observar que uma folha de estilo externa é ideal para ser aplicada a
várias páginas, pois alterando-se apenas o arquivo .css pode-se alterar a aparência
de um "site" inteiro fácil e rapidamente.
Precedência
Qual estilo será aplicado quando há mais de um estilo especificado para um elemento HTML?
Evidentemente, quando se usa diferentes modos de estilo (exemplo: Inline e Linking) as
especificações podem entrar em conflito.
Então, o navegador tem que decidir qual dos valores deve usar. Essa escolha é feita com base
numa ordem de precedência (ou seja, é precisamente o que se quer dizer com cascading style
sheets - "folhas de estilo em cascata").
Ordem de precedência
1. Estilo inline (dentro de um elemento HTML)
2. Folha de estilo Incorporada (definida na tag < head> do documento);
3. Folha de estilo Externa (importada e linkada);
4. Estilo padrão (default) do navegador
É importante lembrar esta ordem de precedência para que se saiba qual valor de estilo
sobrepujará os outros. Assim sendo, um estilo inline tem a prioridade mais elevada, o que
significa que prevalecerá sobre aquele definido na tag <head>. Esse, por sua vez, sobrepujará
o definido em uma Folha de Estilo Externa, e esse sobre o formato que o navegador especifica.
Arquivos externos: exemplo de formatação
É muito útil definir a apresentação geral do documento (fundo, cor e fonte de texto e a
apresentação dos links) em um arquivo externo, pois bastará modificá-lo que todas as páginas
do "site" serão alteradas.
Como definir a cor de fundo e fixando a imagem de fundo da página:
body { background-color: #xxxxxx;
background-image: url("/[Link]") }
background-repeat: no-repeat;
background-attachment: fixed }
A definição geral de estilo inclui os 3 tipos possíveis de links:
a:link { color:#xxxxxx }
a:hover { color:#xxxxxx }
a:visited { color:#xxxxxx }
Além da cor, pode-se indicar se o link deve ser sublinhado ou não (underline) ou não (none) por
meio do atributo text-decoration. O link também pode aparecer riscado (line-through).
Abaixo, define-se o link não sublinhado, o efeito de "mouse-over" sublinhado e o link visitado
com efeito de texto riscado:
a:link { color:#xxxxxx; text-decoration: none }
a:hover { color:#xxxxxx; text-decoration: underline }
a:visited { color:#xxxxxx; text-decoration: line-through }
Pode-se, ainda, definir uma cor de fundo para o link. Exemplo:
a:hover { color:#xxxxxx; text-decoration: none; background:#xxxxxx }
Exemplo de arquivo de estilo externo
Um exemplo de folha de estilo com definições para o documento (cor do texto, fonte, tamanho
da fonte, cor do fundo, imagem do fundo, definição de 3 tipos de títulos, definição de
parágrafos, definação de enfatizado e cores e presença/ausência de sublinhado nos 3 tipos de
links), seria:
Código CSS Significado
body { o texto aparecerá
color: #000000; - em cor preta
font-family: arial; verdana; - em arial, ou, se essa fonte não existir,
font-size: 10pt; em verdana
background-color: #ffffff; - em tamanho = 10
background-image: url([Link]); a cor do fundo será branca e a imagem
} [Link] será usada como fundo.
h4 {
color:#33ff33; parágrafos definidos como títulos 4 terão
font-family: arial; verdana; a cor verde limão e aparecerão em arial,
font-size: 11pt; ou, se essa fonte não existir, em verdana,
} e em tamanho = 11
h3 {
font-weight: bold;
color:#ffffff; parágrafos definidos como títulos 3 terão
font-family: arial; verdana; a cor branca e aparecerão em arial, ou,
font-size: 10pt; se essa fonte não existir, em verdana, em
} negrito e em tamanho = 10
h5 {
font-style: italic;
font-weight: normal;
color:#ffffff; parágrafos definidos como títulos 5 terão
font-family: arial; verdana; a cor branca e aparecerão em arial, ou,
font-size: 10pt; se essa fonte não existir, em verdana, em
} itálico e em tamanho = 10
p{
color: #ffffff;
font-family: arial; verdana;
font-size: 10pt;
margin:0px; parágrafos terão a cor branca e
padding:2px 5px; aparecerão em arial, ou, se essa fonte
} não existir, em verdana, em itálico e em
em { tamanho = 10, sem espaço na margem.
font-style: normal;
color:#33ff33;
}
tr { palavra(s) enfatizada(s) terão a cor verde
font-size: 10pt; limão e terão estilo normal.
}
a:link { color:#00ffff; text-decoration:
underline }
a:hover { color:#77ff99; text-decoration: as linhas das tabelas terão tamanho = 10.
none }
a:visited { color:#ccffff; text-decoration:
underline } Os links terão a cor #00ffff e serão
sublinhados, quando clicados exibirão a
cor #77ff99 e não serão sublinhados.
os links visitados terão a cor#ccffff e serão
sublinhados.
Como usar
Basta salvar o conteúdo da primeira coluna acima, a partir de body, em um arquivo separado,
- substituir os códigos das cores e tamanhos e estilos da fonte pelos desejados.
usando o código hexadecimal para cores,
- dar-lhe um nome (Exemplo: [Link]) e
- colocá-lo junto com as páginas HTML.
Evidentemente, o nome do arquivo deve ser o mesmo que consta em <LINK REL=StyleSheet
HREF="[Link]" TYPE="text/css">
Note que se desejar modificar algo depois, no site todo, como o tamanho ou tipo da fonte, a cor
ou a figura do fundo, bastará modificar esse arquivo!
Para ver alguns comandos, parâmetros e unidades em CSS, clique aqui.
Importância do CSS
O CSS, no modo Linking, ou seja, quando se cria um outro arquivo, independente, só para as
regras de estilo, realmente representa uma ruptura no ato de criar páginas. E uma enorme
facilidade quando se deseja alterar a aparência dos sites.
Há duas grandes vantagens em usá-lo:
- separação entre formatação e conteúdo com conseqüente facilidade para atualização do site
e
- diminuição drástica no tamanho do código de cada página.
Ou seja, com o seu uso, os elementos (tags) HTML ficam destinados exclusivamente para
marcar e estruturar o conteúdo do documento.
Assim, não se deve usar qualquer elemento HTML para alterar o visual, ou seja, para estilizar o
conteúdo.
A estilização será feita em um arquivo independente que, inclusive, pode ser construído como
um arquivo txt no Metapad (ou Notepad) e depois renomeado com terminação .css, em que se
declarará todas as regras de estilo, as propriedades e valores de estilização para os elementos
do documento HTML.
A forma correta de formatar, com estilos
O World Wide Web Consortium Consortium (W3C) removeu o elemento <font> das suas
recomendações HTML 4 e XHTML. Nas versões modernas do HTML todo o arranjo gráfico e
formatações se obtêm recorrendo apenas a estilos CSS.
Títulos e Sub-títulos
Pode-se definir até 6 tipos de títulos, de <h1> até <h6>, definindo exatamente o seu formato.
Por exemplo:
h1 { color: #000000; background: #ffffff } - torna todos os títulos de nível 1, ou seja, que
estiverem entre <h1>... e... </h1> de uma página, na cor preto, sobre um fundo na cor branca;
Da mesma forma, os outros títulos podem ser definidos, no tamanho, cor e estilo desejados.
Aplicação de títulos
1. Escolhe-se como serão os parágrafos de título ( tipo, estilo, tamanho e cor da fonte ). O
máximo possível são 6 tipos diferentes.
2. Define-se no arquivo css como será cada parágrafo.
3. Seleciona-se o parágrafo desejado.
4. Clica-se no menu "Format" e em "Paragraph".
5. Assinalar o tipo de parágrafo escolhido, entre os 6 tipos de títulos, de 1 a 6, que
correspondem a <h1> até <h6>.
Imediatamente todo o estilo definido aparecerá no parágrafo selecionado.
Ênfase
1. Escolhe-se como será o formato da(s) palavra(s) a ser enfatizadas(s): ( tipo, estilo, tamanho
e cor da fonte ).
2. Define-se no arquivo css como será todo o estilo da ênfase
3. Seleciona-se (s) palavra(s) desejada(s).
4. Clica-se no menu "Formatar" e em "Estilo do texto".
5. Assinalar "Emphasis". No código fonte a palavra aparecerá entre <em> e </em>.
Imediatamente o estilo definido aparecerá apenas na(s) palavra(s) selecionada(s).
Colocação dos elementos em CSS - caixas
Todos os elementos que podem ser vistos numa página ocupam uma certa área na página,
que tem a forma de um retângulo, e que é chamada de caixa. A caixa de um elemento contém
tudo aquilo que lhe diz respeito: conteúdo, linhas de contorno, margens e espaço em branco.
Esse esquema representa as diferentes áreas que constituem a caixa de um elemento:
Conteúdo: fica na parte mais interna.
Padding: espaço que pode existir entre o
conteúdo e suas bordas.
Border: designa o limite do elemento
Margin: pode existir e separa o elemento
de outros da mesma página
Largura do elemento: é determinada pela
largura do conteúdo
Largura da caixa: é determinada pela
soma das larguras do conteúdo, mais as
larguras ocupadas pelas linhas de
contorno (border), pelo espaço em branco
(padding) e pelas larguras das margens.
Onde obter mais informação
Folhas de Estilo
[Link]
Seção CSS da [Link]
[Link]
CSS para Web Design
[Link]
Tutorial e Referência de CSS
[Link]
Site sobre CSS e Web Standards
[Link]
Tutorial CSS - Tabela de conteúdos
[Link]