HTML Folhas de estilo - CSS

**HenriPetain** · 18 de Junho 2013

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,

É necessário se cadastrar para acessar o conteúdo.

, 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

É necessário se cadastrar para acessar o conteúdo.

, 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: (não tem ícone de inserir imagem não ?)

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 é:

É necessário se cadastrar para acessar o conteúdo.

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:

É necessário se cadastrar para acessar o conteúdo.

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 é:

É necessário se cadastrar para acessar o conteúdo.

É 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.

[/hr]

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:

É necessário se cadastrar para acessar o conteúdo.

A definição geral de estilo inclui os

É necessário se cadastrar para acessar o conteúdo.

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:

É necessário se cadastrar para acessar o conteúdo.

Pode-se, ainda, definir uma cor de fundo para o link. Exemplo:

É necessário se cadastrar para acessar o conteúdo.

Exemplo de arquivo de estilo externo

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 para cores,

- dar-lhe um nome (Exemplo: arquivo.css) 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="arquivo.css" 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

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

É necessário se cadastrar para acessar o conteúdo.

.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

É necessário se cadastrar para acessar o conteúdo.

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.

Créditos

Eu

Entrar

Quem está por aqui 0 membros estão online

HTML Folhas de estilo - CSS

Posts Recomendados

HenriPetain 2

Link para o comentário

Compartilhar em outros sites

Fóruns

Todas Atividades

Lojinha WC

Informação Importante