CSS - Folhas de Estilo em Cascata

Introdução
• Cascading Style Sheets ou Folhas de Estilo em
Cascata
• Linguagem de formatação para documentos
HTML e XHTML
• Separa o estilo do conteúdo
• Criação e manutenção do design ficam mais
fáceis e consistentes

Introdução
• Principais especificações do CSS
– CSS 1 (1996, 1999): continha apenas propriedades
básicas
– CSS 2.1: versão mais utilizada atualmente
– CSS 3: em desenvolvimento, contém novas
propriedades, mas já pode ser utilizada

Introdução
<table width="467" border="1px" >
<tr>
<td width="100" height="40" bgcolor="#666666" bordercolor="#FF0000">Nome</td>
<td width="100" height="40" bgcolor="#666666"bordercolor="#FF0000">Telefone</td>
<td width="100" height="40" bgcolor="#666666"bordercolor="#FF0000">Endereço</td>
<td width="100" height="40" bgcolor="#666666" bordercolor="#FF0000">Cep</td>
</tr>
<tr>
<td width="100" height="40" bgcolor="#666666" bordercolor="#FF0000">Ricardo</td>
<td width="100"height="40"bgcolor="#666666"bordercolor="#FF0000">(21)99999999</td>
<td width="100" height="40" bgcolor="#666666" bordercolor="#FF0000">R. 2, n 3.</td>
<td width="100" height="40" bgcolor="#666666" bordercolor="#FF0000">99999-999</td>
</tr>
</table>

Introdução
<table >
<tr>
<td>Nome</td>
<td>Telefone</td>
<td>Endereço</td>
<td>Cep</td>
</tr>
<tr>
<td>Ricardo</td>
<td>(21)99999999</td>
<td>R. 2, n 3.</td>
<td>99999-999</td>
</tr>
</table>
Table {
Width: 410px;
}
Td {
Width: 100px;
Height: 40px;
Background: #666;
Border: 1px solid #F00
}
Table, tr, td{
Border-collapse: collapse
}

Inserindo o CSS em documento HTML
• Inline
– Insere as definições de estilo diretamente no
elemento (não recomendado)
• <p style=”color: #F00;”>Conteúdo</p>

• Embeded
– O código é embutido diretamente em um arquivo
HTML
• <style type=”text/css”>
p { color: #F00; }
</style>

• Arquivo Externo
– Todas as definições de estilo ficam centralizadas
em um arquivo externo *.css que deve ser linkado
aos arquivos HTML que a utilizarão, dentro da tag
<head>.
<link rel="stylesheet" type="text/css" href="arq.css" />

Por que Folhas de Estilo em Cascata?
• Prioridade e precedência de estilos
• Quando várias regras são aplicadas a uma
elemento, entra em cena as regras de
precedência em cascata:
– Estilo inline (maior precedência)
– Folha de estilo embutida
– Folha de estilo linkada
– Estilo padrão do navegador (menor precedência)

Seletores
seletor { propriedade: valor; }
Seletor que define
o elemento que
receberá o estilo
Declaração
Um atributo que será
alterado (bordas, margem,
fonte, espaçamento, etc.)
Valor da propriedade,
podendo ser numérico,
texto, medida, código, etc.
Bloco de Declarações

Seletores
• Um seletor pode ser:
– Uma tag HTML
ex.: p {...}, div {...}, h1 {...}, etc.
– Uma classe
ex.: .link{...}, .botoes_fundo{...}, etc.
– Um ID
ex.: #topo{...}, #footer{...}, etc.

Seletores
• Um seletor pode ser:
– Seletores mistos
ex.: p.destaque {...}, div#header {...}
– Seletores agrupados
●
ex.: h1, p, div {...}
– Seletores encadeados
ex.: #coluna div p {...}
– Pseudo-classes
ex.: :link, :active, :hover, :visited, :first-child.
– E combinações de todas essas formas

O Box Model
• Padrão de renderização ou apresentação
visual de um box (container de informações)
segundo a formatação CSS.

Principais Propriedades
• Plano de Fundo:
– background-color
– background-image
– background-repeat (repeat, repeat-x, repeat-y, no-
repeat)
– background-attachment (fixed, scroll)
– background-position
– Forma abreviada: background
• background: #FC0 url(imagem.gif) no-
repeat center top;

• Bordas
– border-bottom (<width> <style> <color>)
• border-bottom-color
• border-bottom-style (none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset,
inherit)
• border-bottom-width
– border-left
– border-right
– border-top
– Todas juntas: border
• border-color
• border-style
• border-width
– outline-color
– outline-style
– outline-width
border: 2px solid #FF9900;
border-right-color: #4A7EBB;
border-bottom-color: #4A7EBB;
outline: 1px solid #000000;

• Dimensões
– height
– min-height
– max-height
– width
– min-width
– max-width

• Texto
– Font-style
– Font-variant
– font-weight
– font-size
– line-height
– font-family
– Forma abreviada: font
• font: italic bold 12px/18px Arial,
Helvetica, sans-serif;

• Texto
– color
• color: #036;
– letter-spacing
– text-align (center, left, right, justify)
– text-decoration (none, underline, overline, line-
through, blink)
– text-indent
– text-transform (none, capitalize, uppercase, lowercase)
– white-space (normal, pre, nowrap)

• Lista
– list-style-image (url(“imagem"))
– list-style-position (inside, outside)
– list-style-type (none, circle, disc, square, armenian,
decimal, decimal-leading-zero, georgian, lower-
alpha, lower-greek, lower-latin, lower-roman,
upper-alpha, upper-latin, upper-roman)
– Forma abreviada: list-style
• list-style: inside square
url("/images/blueball.gif");

• Margens
– margin-bottom
– margin-left
– margin-right
– margin-top
– Forma abreviada: margin (top right bottom left)
• margin: 10px 5px 2px 150px;
• margin: 10px auto;

• Espaçamento interno
– padding-bottom
– padding-left
– padding-right
– padding-top
– Forma abreviada: padding (top right bottom left)
• padding: 8px 10px 8px 20px;
• padding: 10px 5px;

• Posicionamento
– float (left, right, none)
– clear (left, right, both, none)
– display (block, inline, inline-block, inline-table, list-item, run-in, table, table-
caption, table-cell, table-column, table-column-group, table-footer-group,
table-header-group, table-row, table-row-group, none)
– overflow (visible, hidden, scroll, auto)
– position (absolute, fixed, relative, static)
– top
– right
– left
– bottom
– visibility (visible, hidden, collapse)
– z-index

• Pseudo-classes
– :active
– :focus
– :hover
– :link
– :visited
– :first-child
– :first-letter
– :after
– :before

CSS - Folhas de Estilo em Cascata

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a CSS - Folhas de Estilo em Cascata

Mais de Mauro Duarte

CSS - Folhas de Estilo em Cascata