Como Funciona Folhas de Estilo Css

.
Sumário
a. Introdução
b. Editores
c. NVU-Aparência
HTML d. Estrutura
e. Cores
f. Cores: Códigos
Folhas de estilo - CSS
g. Fontes
Quando se deseja garantir uma formatação homogênea e uniforme em todas as páginas de um site as folhas de estilo em
h. Listas
cascata (Cascading Style Sheets) facilitam muito o trabalho de criação.
i. Imagens
Folha de estilo em cascata é um mecanismo simples para adicionar estilos (exemplos: fontes, cores, espaçamentos) em j. Imagens/Textos
documentos Web. k. Tabelas
l. Links
Ou seja, CSS é um padrão de formatação (Web Standards) para páginas que permite ir além das limitações impostas pelo m. Java Script
HTML. n. Sons
o. Frames
Web Standards é um conjunto de normas, diretrizes, recomendações, notas, artigos, tutoriais e afins de caráter técnico, e
p. Animação
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. q. Publicação
r. Estilo (CSS)
Foi proposto pelo World Wide Web Consortium, W3 Consortium, o qual é uma comissão que define os padrões de s. Extensões FF
programação para a WWW, em duas especificações: CSS1 e CSS2. t. Pecados...
Tabela de cores 1
A CSS 1 foi lançada em 12/1996 e tem aproximadamente 60 propriedades. É um modelo simples de formatação, na maior
Tabela de cores 2
parte para apresentações screen-based. A CSS 2 foi finalizado em 05/1998. Mantém todas as propriedades da CSS1 e
Tabela de cores 3
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="arquivo.css" 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("/nome.do.arquivo.jpg") }
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, em verdana
font-size: 10pt; - em tamanho = 10
background-color: #ffffff; a cor do fundo será branca e a imagem bgdicas.jpg
background-image: url(bgdicas.jpg); será usada como fundo.
}
h4 { parágrafos definidos como títulos 4 terão a cor verde
color:#33ff33; limão e aparecerão em arial, ou, se essa fonte não
font-family: arial; verdana; existir, em verdana, e em tamanho = 11
font-size: 11pt;
}
h3 { parágrafos definidos como títulos 3 terão a cor branca
font-weight: bold; e aparecerão em arial, ou, se essa fonte não existir,
color:#ffffff; em verdana, em negrito e em tamanho = 10
font-family: arial; verdana;
font-size: 10pt;
}
h5 { parágrafos definidos como títulos 5 terão a cor branca
font-style: italic; e aparecerão em arial, ou, se essa fonte não existir,
font-weight: normal; em verdana, em itálico e em tamanho = 10
color:#ffffff;
font-family: arial; verdana;
font-size: 10pt;
}
p{ parágrafos terão a cor branca e aparecerão em arial,
color: #ffffff; ou, se essa fonte não existir, em verdana, em itálico e
font-family: arial; verdana; em tamanho = 10, sem espaço na margem.
font-size: 10pt;
margin:0px;
padding:2px 5px;
} palavra(s) enfatizada(s) terão a cor verde limão e
em { terão estilo normal.
font-style: normal;
color:#33ff33;
}
tr { as linhas das tabelas terão tamanho = 10.
font-size: 10pt;
}
a:link { color:#00ffff; text-decoration: underline } Os links terão a cor #00ffff e serão sublinhados,
a:hover { color:#77ff99; text-decoration: none } quando clicados exibirão a cor #77ff99 e não serão
a:visited { color:#ccffff; text-decoration: underline } 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: 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 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
http://www.icmc.usp.br/ensino/material/html/css.html
Seção CSS da abcDICAS.com.br

http://www.abcdicas.com.br/html/css/csspage.html
CSS para Web Design

http://www.maujor.com/tutorial/intrtut.php
Tutorial e Referência de CSS

http://www.artifice.web.pt/tutoriais/cntd/tut_css1.html
Site sobre CSS e Web Standards

http://www.maujor.com/
Tutorial CSS - Tabela de conteúdos

http://www.pt-br.html.net/tutorials/css/
Este "site", destinado prioritariamente aos alunos de Fátima Conti,

pretende auxiliar quem esteja começando a se interessar por internet,
segue as regras da FDL (Free Documentation Licence),
computadores e programas, estando em permanente construção.
Sugestões e comentários são bem vindos.
Se desejar colaborar, clique aqui.
Agradeço antecipadamente.
Deseja enviar essa página?
Se você usa um programa de correio eletrônico devidamente configurado e tem

um e-mail pop3, clique em "Enviar página" (abaixo) para abrir o programa.
Preencha o endereço do destinatário da mensagem.
E pode acrescentar o que quiser.
(Se não der certo, clique aqui para saber mais).
Enviar página
Se você usa webmail copie o endereço abaixo
http://www.cultura.ufpa.br/dicas/htm/htm-esti.htm
Acesse a página do seu provedor. Abra uma nova mensagem.

Cole o endereço no campo de texto.
Preencha o endereço do destinatário.
E também pode acrescentar o que quiser.
Última alteração: 26 mai 2008

Como Funciona Folhas de Estilo Css

Enviado por

Dados do documento

Descrição original:

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Como Funciona Folhas de Estilo Css

Enviado por

Direitos autorais:

Formatos disponíveis

.

O uso de folhas de estilo permite:

- a utilização de "layers", permitindo a sobreposição de objetos, textos e imagens, em camadas.

Regras das folhas de estilos

Uma regra simples do CSS constitui-se de duas partes:

o elemento de ligação entre o documento HTML e o estilo.

1. Embedding (interno, incorporado, ou embutido)

O código a ser aplicado é:

2. Inline (em Linha)

3. Linking (externo, importado, ligado)

O código a ser aplicado em cada página é:

<LINK REL=StyleSheet HREF="arquivo.css" TYPE="text/css">

Arquivos externos: exemplo de formatação

Como deﬁnir a cor de fundo e ﬁxando a imagem de fundo da página:

body { background-color: #xxxxxx;

a:link { color:#xxxxxx; text-decoration: none }

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

Exemplo de arquivo de estilo externo

Código CSS Signiﬁcado

body { o texto aparecerá

Para ver alguns comandos, parâmetros e unidades em CSS, clique aqui.

Há duas grandes vantagens em usá-lo:

- diminuição drástica no tamanho do código de cada página.

A forma correta de formatar, com estilos

2. Deﬁne-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".

Imediatamente todo o estilo deﬁnido aparecerá no parágrafo selecionado.

Colocação dos elementos em CSS - caixas

Esse esquema representa as diferentes áreas que constituem a caixa de um elemento:

Conteúdo: ﬁca 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

Onde obter mais informação

Seção CSS da abcDICAS.com.br

CSS para Web Design

Tutorial e Referência de CSS

Site sobre CSS e Web Standards

Tutorial CSS - Tabela de conteúdos

Este "site", destinado prioritariamente aos alunos de Fátima Conti,

Deseja enviar essa página?

Se você usa um programa de correio eletrônico devidamente conﬁgurado e tem

Se você usa webmail copie o endereço abaixo

Acesse a página do seu provedor. Abra uma nova mensagem.

Última alteração: 26 mai 2008

Você também pode gostar