Post on 19-May-2015
description
Desenvolvimento WEB com PHP
<style type=“text/css”>
CSS
Cascade Style Sheet
Lista de estilo em cascata
Lista de estilos?
Simplificando...
Conjunto de regras que definem como os elementos da página devem ser exibidos
Entendendo
Uma das recomendações do W3C
Separa a apresentação (layout) da estrutura
Permite controle centralizado do layout
Edição de páginas leves (cache)
Fácil manutenção de grandes sites (projetos)
Portabilidade
Declarando
<style type="text/css"> ... trecho do código ...</style>
<style type="text/css"><!--... trecho do código ...
--></style>
Estrutura do código (regra)
Declaraçãoseletor { propriedade : valor;}
Em qual TAG será aplicada a propriedade - EX: BODY
Propriedade a ser aplicadaEX: BACKGROUND
Valor da propriedade aplicada - EX: #FFFFFF
Métodos de atribuição dos estilos
Método IN-LINE (atributo style)<html> <head> <title> Exemplo </title> </head>
<body style="background-color:#FF0000">
<p> Página com fundo vermelho </p>
</body></html>
Métodos de atribuição dos estilos
Método INTERNO (tag style)<head> <title>Exemplo</title> <style type="text/css"> <!— body { background-color: #FF0000; } --> </style></head>
Métodos de atribuição dos estilos
Método EXTERNO (link para folhas de estilo)<head> <link rel=stylesheet href="estilo.css" type="text/css"></head>
body { background-color: #FF0000;}
Comentários
Método EXTERNO (link para folhas de estilo)... /* este é um comentário em css */
div { background-color: #FF0000; }...
Propriedades
BACKGROUND
background-color (hexa, nome)background-image (url) background-repeat (no-repeat)background-attachment (fixed, scroll)background-position (nome, valor)
background
Propriedades
FONT
font-family (arial, verdana, sans-serif)font-style (italic)font-weight (bold)font-size (px, pt, %)
Propriedades
TEXT
text-indent (recuo de primeira linha)text-align (justify, center)text-decoration (underline)
Seletores
Tag
Classe
ID
Universal
tag {...}
tag.classe {...} ou .classe {...
#id {...}
* {...}
DIV (elemento HTML)
Cria uma divisão lógica no documento... <div> conteúdo </div>...
Composição dos elementos
MARGEM (margin)
BORDA (border)
PREENCHIMENTO (padding)
ÁREA DO CONTEÚDO
Propriedades
MARGEM / BORDA / ESPAÇAMENTO
margin (px,%)
border (solid, dotted)
padding (px)
Propriedades
position : absolute;
top
left
Centralizando um elemento
top : 50%; left : 50%;
top
left
Centralizando um elemento
margin-top : -50%(obj); margin-left : -50%(obj);
top
left
Manipulando imagens
border
width
height
Pseudo-classe
link (links não visitados)
visited (links visitados)
hover (sobre o link)
... a:link { background-color : #ff0000; }...
Botões
text-decoration
display
line-height
cursor
Estilizando
tabelas
formulários
listas (barra de menus)
Flutuação
Modelo de posicionamento (absoluto)
Valores comuns:
- left
- right
...float : left;...
Flutuação
Caixas sem flutuação
002
003
001
Flutuação
Caixa 001 com flutuação a direita (right)
002
003
001
Flutuação
Caixas com flutuação a esquerda (left) menu
001 003002
Layout
Layout...
Dúvidas? Sugestões?
will_magalhaes@yahoo.com.br
Bibliografia
alexandre.chokito@gmail.com will_magalhaes@yahoo.com.br
Livro Criando páginas web com CSS
Sites http://www.w3schools.com http://www.html.net http://www.apostilando.com http://www.tableless.com.br
Slides disponíveis em:
www.slideshare.com/wmagalhaes
JBRIGADO!
</style>