Folhas de Estilo – CSS (“Cascading Style Sheets”)
Conceitos Básicos
Sintaxe
Seletores
Folhas de estilo externas
Folhas de estilo incorporadas
Folhas de estilo inline
Elementos para aplicação de estilos
A colocação dos elementos em CSS baseia-se em caixas
Pseudo-classes
Pseudo-elementos
Exemplos de aplicação da linguagem CSS
“Style sheets” permitem desenvolvedores Web anexar formatações de textos, cores e espaçamentos em documentos HTML a serem aplicadas em um conjunto de elementos.
Top...
A sintaxe do CSS é dividida em duas partes: seletor e declaração.
A declaração em Cascading Style Sheets é uma propriedade e seu correspondente valor, onde se define o código do estilo a ser usado.
Ex: H1 { color: blue}
Declaração CSS simples, que aplica cor azul ao elemento HTML H1,
onde H1 é um seletor e { color: blue} é a declaração.
A declaração também é dividida em duas partes: propriedade (que neste exemplo é color) e valor (blue é o valor da propriedade color).
Portanto, em geral a sintaxe CSS segue a regra:
seletor { propriedade1: valor; propriedade2: valor ...}
seletor: é a ligação entre o documento HTML e a folha de estilo CSS. Descreve o elemento ao qual o estilo será aplicado.
propriedade: refere-se ao tipo do estilo que você irá usar. Por exemplo, para aplicar um estilo no tamanho da fonte você utilizará a propriedade font-size.
valor: é a configuração aplicada à propriedade. Por exemplo, você pode utilizar para tamanho da fonte 20pt(20 pontos), ou para a cor red.
propriedade:valor – é a declaração. Podendo declarar diversas propriedades, basta separá-las por ponto-e-vírgula(;).
Ex: <style type=“text/css”>
p{ font-family: verdana; color: red }
</style>
Neste exemplo o texto aparecerá vermelho com fonte Verdana.
Obs: Quebras de linha e espaços em branco são ignorados. Por isso, utilize-os para organizar suas declarações:
<style type=“text/css”>
p{
font-family: verdana;
color: red }
</style>
Top...
Seletor que utiliza o próprio elemento HTML para declarar o estilo a ser aplicado.
Ex.:
BODY {
color: black;
background: url(texture.gif) white;
}
P { font-size: 10pt }
h1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: Helvetica
}
Para reduzir o tamanho do código da folha de estilo, você pode declarar um grupo de seletores, apenas separando-os por vírgula:
h1, h2, h3 { font-family: helvetica }
De forma similar para as propriedades:
h1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: helvetica }
Equivale a:
h1 { font: bold 12pt/14pt helvetica }
Seletor de classe
Para aumentar os recursos de estilo para os elementos, pode-se adicionar novos atributos ao HTML. Definir uma classe é personalizar uma tag HTML. Basta utilizar um ponto seguido do nome da classe após o elemento (seletor).
Ex: <style type=“text/css”
elemento.NomedaClasse {propriedade: valor; ... }
</style>
onde:
elemento – é o seletor(as tags HTML).
.NomedaClasse – é o nome que você escolheu para a classe.
Ex: <html><head>
<style type="text/css">
A.meulink {color: blue; text-decoration: none }
</style>
</head><body>
<A CLASS="meulink" href="http://www.exemplo.com.br/"> Link1</A>
<A href="http://www.exemplo.com.br/"> Link2</A>
</body></html>
ou ainda, pode definir uma classe sem especificar na declaração a que elemento ela está associada, podendo utilizá-la com qualquer elemento que suporte a propriedade definida:
Ex: <html><head>
<style type="text/css">
.texto1 {color: blue; text-decoration: none }
.texto2 {color: red; text-decoration: underline }
.meuestilo { font-family: arial, color: red }
</style>
</head><body>
<A CLASS="texto1" href="0http://www.exemplo.com.br"> Link1</A>
<A CLASS="texto2" href="pagina2.html"> Link2</A>
<h1 class="meuestilo"> Um cabeçalho com meu estilo</h1>
<p class=“meuestilo”> Um cabeçalho com meu estilo</p>
</body></html>
Seletor de ID
Usado para garantir um único valor sobre o documento. É precedido pelo sinal de “#”.
Ex: <style type=“text/css”
#identificador {letter-spacing: 0.3em }
h1#identificador {letter-spacing: 0.5em }
</style>
<h1 ID=“identificador”>Texto espaçado</h1>
Top...
Indicado quando pretende-se utilizar os mesmos estilos para várias páginas.
Um arquivo texto à parte com a extensão .css é definido. Para inseri-lo num documento HTML basta referenciá-lo com o elemento LINK.
Ex: crie o arquivo “estilo1.css”
h1 {
font-family: “comics sans ms”;
font-size: 36pt;
color: blue }
p {
font-family: “arial”;
font-size: 15pt;
color: red;
margin-left: 5pt }
Agora para utilizá-lo, acrescente-o na linha de cabeçalho em cada documento HTML:
<link rel= "stylesheet" type="text/css" href="estilo1.css">
onde:
rel= “stylesheet” – informa ao navegador para encontrar uma folha de estilo.
type=“text/css”- informa ao navegador em que formato deve receber o estilo.
href= “estilo1.css”- informa ao navegador onde está o arquivo com as definições da folha de estilo.
Ex: <html>
<head>
<link rel= "stylesheet" type="text/css" href="estilo1.css">
</head>
<body>
<h1>cabeçalho nível 1</h1>
<p>...parágrafo<?p>
</body>
</html>
Top...
Indicadas quando as definições são usadas por um único documento. É definido no cabeçalho do documento HTML, dentro do elemento <style>. As declarações afetam somente a página atual.
Ex: <style type= “text/css”>
<!- -
... aqui vai a declaração do seu estilo...
- ->
</style>
Ex1: <head>
<style type= “text/css”>
p {
background-color: #ffffff;
font-family: “arial”;
font-size: 14pt }
</style>
</head>
<body>
<p>Exemplo</p>
Top...
Indicada quando o estilo é aplicado apenas uma única vez. O estilo é definido dentro da própria tag HTML.
Sintaxe: <TAG_HTML STYLE="estilos css">
onde:
TAG_HTML – é a tag HTML em questão.
“estilos css” – é a definição dos estilos.
Ex: <body>
<a style="color: green; text-decoration: none" href= http://www.exemplo.com.br>
</body>
Top...
Elementos para aplicação de estilos
<DIV>
As tags <div></div> são utilizadas na formatação de um trecho do documento, consideradas uma divisão. Insere uma seção no documento.
<SPAN>
Usa-se para alterar as definições de estilo apenas numa pequena parte do texto.
Top...
A colocação dos elementos em CSS baseia-se em caixas
Todo e qualquer elemento que pode ser visto numa página da Web ocupa uma determinada área na página. Essa área tem a forma de um retângulo, que designamos por 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. O gráfico que pode ver a seguir representa as diversas áreas que constituem a caixa de um elemento.
As pseudo-classes permitem-nos associar efeitos especiais a selectores CSS ou a partes de selectores. Sintaxe:
selector:pseudo-classe { propriedade: valor }
ou
selector.classe:pseudo-classe { propriedade: valor }
Pseudo-classe W3C Finalidade
active CSS1 Define o estilo a aplicar a um link seleccionado
hover CSS1 Define o estilo a aplicar a um link quando o ponteiro do rato está sobre ele
link CSS1 Define o estilo a aplicar a um link que ainda não foi visitado
visited CSS1 Define o estilo a aplicar a um link que já foi visitado
first-child CSS2 Define o estilo as aplicar ao primeiro dos elementos que se encontram dentro de um outro elemento (primeiro descendente.)
lang CSS2 Permite definir atributos estilísticos diferentes para aplicar ao texto escrito numa determinada língua
Os pseudo-elementos são usados em CSS para adicionar efeitos a alguns selectores ou a partes de selectores. Sintaxe:
selector:pseudo-elemento { propriedade: valor }
ou
selector.classe:pseudo-elemento { propriedade: valor }
Pseudo-elementos W3C Finalidade
first-letter CSS1 Define um estilo especial para a primeira letra de um texto.
first-line CSS1 Define um estilo especial para a primeira linha de um texto.
before CSS2 Insere algum conteúdo antes de um elemento
after CSS2 Insere algum conteúdo depois de um elemento
Exemplos de aplicação da linguagem css.
Propriedades
1. Fundos (background)
| Propriedade | Descrição | Valores | W3C |
|---|---|---|---|
Oferece-nos uma forma abreviada para escrever todas as propriedades do fundo de um elemento numa única declaração. |
background-color background-image background-repeat background-attachment background-position |
CSS1 |
|
A propriedade background-attachment indica se a imagem de fundo deve permanecer imóvel na janela do browser ou se acompanha o deslizamento (scroll) da página. |
scroll fixed |
CSS1 |
|
Define a cor de fundo de um elemento. |
color-rgb color-hex color-name transparent |
CSS1 |
|
Define uma imagem para ser usada como fundo no elemento. |
url none |
CSS1 |
|
Define o local onde se começa a desenhar a imagem de fundo. |
top left top center top right center left center center center right bottom left bottom center bottom right x-% y-% x-pos y-pos |
CSS1 |
|
Estabelece se a imagem de fundo deve repetir-se (formando um mosaico) ou não e as direções da repetição. |
repeat repeat-x repeat-y no-repeat |
CSS1 |
2 . Linhas de borda (border)
| Propriedade | Descrição | Valores | W3C |
|---|---|---|---|
Oferece uma forma abreviada para escrever numa única declaração todos os parâmetros relativos às linhas de fronteira. |
border-width border-style border-color |
CSS1 |
|
Oferece-nos uma forma abreviada para escrever todas as propriedades da linha de fronteira do lado de baixo numa única declaração. |
border-bottom-width border-style border-color |
CSS1 |
|
Define a cor da linha de fronteira de baixo |
border-color |
CSS2 |
|
Define o estilo da linha de fronteira de baixo |
border-style |
CSS2 |
|
Define a espessura da linha de fronteira de baixo |
thin medium thick comprimento |
CSS1 |
|
Define a cor das quatro linhas de fronteira. Aceita de um a quatro valores. |
cor |
CSS1 |
|
Oferece-nos uma forma abreviada para escrevermos todas as propriedades da linha de fronteira do lado esquerdo numa única operação. |
border-left-width border-style border-color |
CSS1 |
|
Define a cor da linha de fronteira do lado esquerdo. |
border-color |
CSS2 |
|
Define o estilo da linha de fronteira do lado esquerdo. |
border-style |
CSS2 |
|
Define a espessura da linha de fronteira do lado esquerdo. |
thin medium thick comprimento |
CSS1 |
|
Oferece-nos uma forma abreviada para escrevermos todas as propriedades da linha de fronteira do lado direito numa única declaração. |
border-right-width border-style border-color |
CSS1 |
|
Define a cor da linha de fronteira do lado direito. |
border-color |
CSS2 |
|
Define o estilo da linha de fronteira do lado direito. |
border-style |
CSS2 |
|
Define a espessura da linha de fronteira do lado direito. |
thin medium thick comprimento |
CSS1 |
|
A propriedade border-style define o estilo das quatro linhas de fronteira. Aceita de um a quatro valores. |
none hidden dotted dashed solid double groove ridge inset outset |
CSS1 |
|
Oferece-nos uma forma abreviada para escrevermos todas as propriedades da linha de fronteira do lado de cima numa única declaração. |
border-top-width border-style border-color |
CSS1 |
|
Define a espessura da linha de fronteira superior. |
border-color |
CSS2 |
|
Define o estilo da linha de fronteira superior. |
border-style |
CSS2 |
|
Define a espessura da linha de fronteira superior. |
thin medium thick comprimento |
CSS1 |
|
Oferece-nos uma forma abreviada para definirmos as espessuras de todas as linhas de fronteira. Aceita de um a quatro valores. |
thin medium thick comprimento |
CSS1 |
3. Propriedades de classificação
| Propriedade | Descrição | Valores | W3C |
|---|---|---|---|
Define os lados de um elemento dentro do qual não são permitidos elementos flutuantes |
left right both none |
CSS1 |
|
Especifica o tipo de cursor a apresentar |
url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help |
CSS2 |
|
Indica se um elemento deve ser apresentado e a forma como deve ser apresentado. |
none inline block list-item run-in compact marker table inline-table table-row-group table-header-group table-footer-group table-row table-column-group table-column table-cell table-caption |
CSS1 |
|
Define o lugar onde uma imagem ou bloco deve aparecer dentro de outro elemento. |
left right none |
CSS1 |
|
Coloca um elemento numa destas posições: estática, relativa, absoluta ou fixa. |
static relative absolute fixed |
CSS2 |
|
Indica se um elemento deve estar visível ou invisível. |
visible hidden collapse |
CSS2 |
4. Controle dos tamanhos dos elementos
| Propriedade | Descrição | Valores | W3C |
|---|---|---|---|
Define a altura de um elemento |
auto comprimento % |
CSS1 |
|
Define a distância entre as linhas |
normal número comprimento % |
CSS1 |
|
Define a altura máxima de um elemento |
none comprimento % |
CSS2 |
|
Define a largura máxima de um elemento |
none comprimento % |
CSS2 |
|
Define a altura mínima de um elemento |
comprimento % |
CSS2 |
|
Define a largura mínima de um elemento |
comprimento % |
CSS2 |
|
Define a largura de um elemento |
auto % comprimento |
CSS1 |
5. Tipos de letra (font)
| Propriedade | Descrição | Valores | W3C |
|---|---|---|---|
Este propriedade oferece-nos uma forma abreviada para definir numa única declaração todas as propriedades relativas ao tipo de letra. |
font-style font-variant font-weight font-size/line-height font-family caption icon menu message-box small-caption status-bar |
CSS1 |
|
A propriedade font-family consiste numa lista com os tipos de letra que o browser pode escolher para escrever os textos. A lista está ordenada de forma prioritária: a primeira escolha aparece primeiro, a seguir vem a segunda escolha e assim sucessivamente. O browser escolhe o primeiro tipo que é capaz de usar. Os nomes dos tipos de letra podem ser nomes de família ou nomes genéricos. |
family-name generic-family |
CSS1 |
|
Define o tamanho a aplicar a um tipo de letra. |
xx-small x-small small medium large x-large xx-large smaller larger comprimento % |
CSS1 |
|
Se o tipo de letra (font) escolhido não estiver disponível, o browser vê-se obrigado a usar um outro tipo diferente. A propriedade font-size-adjust especifica o "aspect value" do tipo de letra escolhido para que o browser possa substituí-lo por um outro tipo que esteja acessível preservando a altura da letra "x" e mantendo a legibilidade do texto. |
none número |
CSS2 |
|
A propriedade font-stretch provoca uma expansão ou uma contração horizontais no tamanho da letra. |
normal wider narrower ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded |
CSS2 |
|
Define o estilo a aplicar ao tipo de letra. |
normal italic oblique |
CSS1 |
|
Escreve o texto usando um tipo de letra "small-caps" ou o tipo normal. |
normal small-caps |
CSS1 |
|
Define a espessura do traço com que são desenhadas a letras. |
normal bold bolder lighter 100 200 300 400 500 600 700 800 900 |
CSS1 |
6. Gerar conteúdos
| Propriedade | Descrição | Valores | W3C |
|---|---|---|---|
Gera conteúdos e insere-os no documento. Usa-se em conjunto com os pseudo-elementos :before e :after |
string url counter(name) counter(name, list-style-type) counters(name, string) counters(name, string, list-style-type) attr(X) open-quote close-quote no-open-quote no-close-quote |
CSS2 |
|
Define quanto se deve incrementar o contador por cada ocorrência de um selector. |
none número identificador |
CSS2 |
|
Define o valor a dar ao contador sempre que ocorre um selector. |
none número identificador |
CSS2 |
|
Define o estilo das aspas. |
none string string |
CSS2 |
7. Listas e marcadores
| Propriedade | Descrição | Valores | W3C |
|---|---|---|---|
Este propriedade oferece-nos uma forma abreviada para definir numa única declaração todas as propriedades relativas a uma lista. |
list-style-type list-style-position list-style-image |
CSS1 |
|
Define uma imagem como marcador de item numa lista |
none url |
CSS1 |
|
Define o local em que o marcador deve ser colocado na lista. |
inside outside |
CSS1 |
|
Define o tipo de marcador a usar. |
none disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha |
CSS1 |
|
marker-offset |
auto comprimento |
CSS2 |
8. Margens
| Propriedade | Descrição | Valores | W3C |
|---|---|---|---|
Propriedade que nos oferece uma forma abreviada para definir numa única declaração todas as propriedades relativas às quatro margens de um elemento. |
margin-top margin-right margin-bottom margin-left |
CSS1 |
|
Define a margem inferior de um elemento. |
auto comprimento % |
CSS1 |
|
Define a margem esquerda de um elemento. |
auto comprimento % |
CSS1 |
|
Define a margem direita de um elemento. |
auto comprimento % |
CSS1 |
|
Define a margem superior de um elemento. |
auto comprimento % |
CSS1 |
9. Linhas de contorno
| Propriedade | Descrição | Valores | W3C |
|---|---|---|---|
Oferece-nos uma forma abreviada para definir todas as propriedades do contorno numa única declaração. |
outline-color outline-style outline-width |
CSS2 |
|
Define a cor do contorno de um elemento. |
color invert |
CSS2 |
|
Define o estilo do contorno de um elemento. |
none dotted dashed solid double groove ridge inset outset |
CSS2 |
|
Define a espessura da linha de contorno de um elemento |
thin medium thick comprimento |
CSS2 |
10. Espaço em branco dentro de um elemento (padding)
| Propriedade | Descrição | Valores | W3C |
|---|---|---|---|
Propriedade que nos oferece uma forma abreviada para definir numa única declaração todos os aspectos dos espaçamentos entre o conteúdo de um elemento e os seus limites. |
padding-top padding-right padding-bottom padding-left |
CSS1 |
|
Define o espaço que separa o conteúdo de um elemento do seu limite inferior. |
comprimento % |
CSS1 |
|
Define o espaço que separa o conteúdo de um elemento do seu limite esquerdo. |
comprimento % |
CSS1 |
|
Define o espaço que separa o conteúdo de um elemento do seu limite direito. |
comprimento % |
CSS1 |
|
Define o espaço que separa o conteúdo de um elemento do seu limite superior. |
comprimento % |
CSS1 |
11. Posicionamento
| Propriedade | Descrição | Valores | W3C |
|---|---|---|---|
Define a distância (para baixo ou para cima) a que deve ficar o limite de baixo de um elemento relativamente ao limite de baixo do elemento que o contém. |
auto % comprimento |
CSS2 |
|
Define a forma de um elemento. O elemento é recortado na forma desejada e depois mostrado. |
shape auto |
CSS2 |
|
Define a distância (para a esquerda ou para a direita) a que deve ficar o limite esquerdo de um elemento relativamente ao limite esquerdo do elemento que o contém. |
auto % comprimento |
CSS2 |
|
Define o que acontece quando o conteúdo de um elemento excede a sua área. |
visible hidden scroll auto |
CSS2 |
|
Define a distância (para a esquerda ou para a direita) a que deve ficar o limite direito de um elemento relativamente ao limite direito do elemento que o contém. |
auto % comprimento |
CSS2 |
|
Define a distância (para baixo ou para cima) a que deve ficar o limite de cima de um elemento relativamente ao limite de cima do elemento que o contém. |
auto % comprimento |
CSS2 |
|
Define o alinhamento vertical de um elemento. |
baseline sub super top text-top middle bottom text-bottom comprimento % |
CSS1 |
|
Define a ordem de apresentação (prioridade) dos elementos no caso de existir sobreposição entre eles. |
auto número |
CSS2 |
12. Formatação de tabelas
| Propriedade | Descrição | Valores | W3C |
|---|---|---|---|
Define o modelo da linha de fronteira de uma tabela. |
collapse separate |
CSS2 |
|
border-spacing |
Define a distância entre as linhas de fronteira de células adjacentes (aplicável apenas quando se usa o modelo "separated borders" para as linhas de fronteira da tabela) |
comprimento |
CSS2 |
caption-side |
Define a posição da legenda na tabela. |
top bottom left right |
CSS2 |
empty-cells |
Indica se as células que não têm conteúdo visível devem ter linhas de fronteira ou não (aplicável apenas quando se usa o modelo "separated borders" para as linhas de fronteira da tabela.) |
show hide |
CSS2 |
table-layout |
Escolhe o algoritmo a usar para desenhar a tabela. |
auto fixed |
CSS2 |
13. Formatação de texto
| Propriedade | Descrição | Valores | W3C |
|---|---|---|---|
Define a cor do texto. |
cor |
CSS1 |
|
Define a direção de escrita do texto. |
ltr rtl |
CSS2 |
|
Aumenta ou diminui o espaço entre os caracteres. |
normal comprimento |
CSS1 |
|
Alinha o texto dentro de um elemento. |
left right center justify |
CSS1 |
|
Adiciona pormenores decorativos ao texto. |
none underline overline line-through blink |
CSS1 |
|
Desloca para a direita ou para a esquerda a primeira letra da primeira linha do texto. |
comprimento % |
CSS1 |
|
Controla as letras de um elemento. |
none capitalize uppercase lowercase |
CSS1 |
|
unicode-bidi |
normal embed bidi-override |
CSS2 |
|
Define a forma como é tratado o espaço em branco dentro de um elemento. |
normal pre nowrap |
CSS1 |
|
Aumenta ou diminui o espaço entre as palavras. |
normal comprimento |
CSS1 |