Construindo layout de sites com CSS
CSS
Introduo
Cascading Style Sheets ou Folhas de Estilo em Cascata
Linguagem de formatao para documentos HTML e XHTML
Separa o estilo do contedo
Criao e manuteno do design ficam mais fceis e consistentes
Introduo
Principais especificaes do CSS
CSS 1 (1996, 1999): continha apenas propriedades bsicas
CSS 2.1: verso mais utilizada atualmente
CSS 3: em desenvolvimento, contm novas propriedades, mas j pode ser utilizada
Introduo
Nome Telefone Endereo Cep
Ricardo(21)99999999R. 2, n 3.99999-999
Introduo
Nome Telefone Endereo Cep
Ricardo (21)99999999 R. 2, n 3. 99999-999
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 definies de estilo diretamente no elemento (no recomendado)
Contedo
Inserindo o CSS em documento HTML
Embeded
O cdigo embutido diretamente em um arquivo HTML
p { color: #F00; }
Inserindo o CSS em documento HTML
Arquivo Externo
Todas as definies de estilo ficam centralizadas em um arquivo externo *.css que deve ser linkado aos arquivos HTML que a utilizaro, dentro da tag .
Por que Folhas de Estilo em Cascata?
Prioridade e precedncia de estilos
Quando vrias regras so aplicadas a uma elemento, entra em cena as regras de precedncia em cascata:
Estilo inline (maior precedncia)
Folha de estilo embutida
Folha de estilo linkada
Estilo padro do navegador (menor precedncia)
Seletores
seletor { propriedade: valor; }
Seletor que defineo elemento quereceber o estilo
DeclaraoUm atributo que seralterado (bordas, margem,fonte, espaamento, etc.)
Valor da propriedade,podendo ser numrico,texto, medida, cdigo, etc.
Bloco de Declaraes
Seletores
Um seletor pode ser:
Uma tag HTML ex.: p {...}, div {...}, h1 {...}, etc.
Uma classeex.: .link{...}, .botoes_fundo{...}, etc.
Um IDex.: #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 combinaes de todas essas formas
O Box Model
Padro de renderizao ou apresentao visual de um box (container de informaes) segundo a formatao CSS.
O Box Model
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;
Principais Propriedades
Bordas
border-bottom ( )
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: borderborder-color
border-style
border-width
outline-color
outline-style
outline-width
border: 2px solid #FF9900;border: 2px solid #FF9900;border-right-color: #4A7EBB;border-bottom-color: #4A7EBB;
border: 2px solid #FF9900;outline: 1px solid #000000;
Principais Propriedades
Dimenses
height
min-height
max-height
width
min-width
max-width
Principais Propriedades
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;
Principais Propriedades
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)
Principais Propriedades
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");
Principais Propriedades
Margens
margin-bottom
margin-left
margin-right
margin-top
Forma abreviada: margin (top right bottom left)
margin: 10px 5px 2px 150px;
margin: 10px auto;
Principais Propriedades
Espaamento interno
padding-bottom
padding-left
padding-right
padding-top
Forma abreviada: padding (top right bottom left)
padding: 8px 10px 8px 20px;
padding: 10px 5px;
Principais Propriedades
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
Principais Propriedades
Principais Propriedades
Principais Propriedades
Pseudo-classes
:active
:focus
:hover
:link
:visited
:first-child
:first-letter
:after
:before
Clique para editar o formato do texto do ttuloClique para editar o estilo do ttulo mestre
04/09/15
Clique para editar o formato do texto do ttuloClique para editar o estilo do ttulo mestre
Clique para editar o formato do texto da estrutura de tpicos2. Nvel da estrutura de tpicos3. Nvel da estrutura de tpicos4. Nvel da estrutura de tpicos5. Nvel da estrutura de tpicos6. Nvel da estrutura de tpicos
7. Nvel da estrutura de tpicosClique para editar os estilos do texto mestre
Segundo nvel
Terceiro nvel
Quarto nvel
Quinto nvel
04/09/15
Top Related