CSS - Folhas de Estilo em Cascata

Embed Size (px)

Citation preview

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