1. Curso Superior de Tecnologia em Design Gráfico
DWEB - Design para
Web
5 CSS3:
Fundamentos
“E não vos conformeis com este século, mas transformai-vos pela renovação da vossa mente, para que
experimenteis qual seja a boa, agradável e perfeita vontade de Deus..” Romanos 12:2
1 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
2. DWEB - Design para Web / Carlos José
Contato
Carlos José
carlosjose.unibratec@gmail.com
www.carlosjose.net
twitter.com/carlosjoser2n
2 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
3. DWEB - Design para Web / Carlos José
Objetivo da Aula
n Apresentar os fundamentos da
linguagem de formatação CSS.
3 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
4. DWEB - Design para Web / Carlos José
Agenda
n O que é CSS?
n Sintaxe CSS
n Como inserir CSS em documentos HTML
n Seletores
n Medidas
4 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
5. DWEB - Design para Web / Carlos José
CSS - Cascading Style Sheets
n O que é CSS?
î CSSé a sigla para Cascading Style Sheets, que pode ser
traduzida para Folhas de Estilo em Cascata.
n A especificação CSS1 foi criada em 1996 pela W3C (World Wide
Web Consortium www.w3c.org), com o objetivo de substituir as
marcações HTML de formatação, separando assim a camada de
apresentação (CSS) e a camada de informação (xHTML).
î CSS
é uma linguagem simples e de fácil aprendizagem
para a criação de layouts para web sites.
n É trabalho do CSS controlar cores, tamanho, tipografia e
posicionamento dos elementos em um site.
5 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
6. DWEB - Design para Web / Carlos José
CSS - Cascading Style Sheets
n Por que devemos utilizar CSS?
î CSSapesar de simples e de fácil aprendizagem,
é uma poderosa e precisa linguagem de
formatação, que reduz drasticamente o
consumo de banda do usuário pelo site.
n É uma linguagem padronizada pela W3C e é bem
suportada por todos os navegadores modernos.
n Segue o link oficial com todas as referências do CSS
î http://www.w3schools.com/css/css_reference.asp
6 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
7. DWEB - Design para Web / Carlos José
CSS - Cascading Style Sheets
n Quais as vantagens em se usar CSS?
î Separando a formatação do conteúdo, a
manutenção do site torna-se mais fácil.
î Alterações no layout podem ser feitas sem a
necessidade de se alterar o documento HTML, e
o contrário também é verdadeiro;
î Separar a formatação do conteúdo torna o site
mais acessível.
7 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
8. DWEB - Design para Web / Carlos José
CSS + HTML
HTML = conteúdo
CSS = aparência
8 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
9. DWEB - Design para Web / Carlos José
XHTML
n Comparando o velho com o novo!
HTML XHTML
9 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
10. DWEB - Design para Web / Carlos José
Comparando o velho com o novo!
HTML
10 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
11. DWEB - Design para Web / Carlos José
Comparando o velho com o novo!
XHTML
11 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
12. DWEB - Design para Web / Carlos José
Comparando o velho com o novo!
HTML
12 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
13. DWEB - Design para Web / Carlos José
Comparando o velho com o novo!
XHTML
13 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
14. DWEB - Design para Web / Carlos José
HTML - uma estrutura de árvore
html
header body
title ul
li li li
14 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
15. DWEB - Design para Web / Carlos José
HTML - uma estrutura de árvore
html
Antecessor
header body
Descendente
title ul
Descendente
li li li
15 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
16. DWEB - Design para Web / Carlos José
CSS - Cascading Style Sheets
n Regra CSS
î Escreverregras de CSS é muito simples.
A sintaxe segue o seguinte modelo:
seletor {propriedade: valor; propriedade: valor}
seletor {
propriedade: valor;
propriedade: valor
}
Quando existir mais de uma propriedade, costuma-se endentar a declaração
para facilitar a leitura!
16 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
17. DWEB - Design para Web / Carlos José
CSS - Cascading Style Sheets
n Sintaxe CSS
Seletor
p {
color: #ff0000;
font-weight: bold;
text-align: center;
border: 1px solid #ff0000
}
Propriedade Valor
17 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
18. DWEB - Design para Web / Carlos José
CSS - Cascading Style Sheets
n Sintaxe CSS
î Comentário em CSS
n Deve-se usar os delimitadores /* */, e deve ser usado
para fazer comentário de uma única linha de texto ou
de um bloco de texto.
/* inicio da formatacao*/
seletor {
propriedade: valor;
propriedade: valor
}
/*fim*/
18 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
19. DWEB - Design para Web / Carlos José
CSS - Cascading Style Sheets
n Antes de qualquer coisa!
CSS3 - Fundamentos
inline.html
incorporado.html
externo.html
css
style.css
19 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
20. DWEB - Design para Web / Carlos José
CSS - Cascading Style Sheets
n Como inserir um CSS num documento HTML
î Existem 3 formas:
n Estilos inline;
n Estilos incorporados;
n Estilos externos.
20 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
21. DWEB - Design para Web / Carlos José
CSS - Cascading Style Sheets
n Como inserir um CSS num documento HTML
î Estilos inline;
n Folhas de estilo inline são declaradas diretamente na
marcação HTML que se quer formatar, através do
atributo style.
n Sua formatação só é válida para aquele elemento em
particular.
n Seu uso deve ser extremamente limitado ou restrito a
poucas páginas, pois essa técnica retira toda a
flexibilidade do CSS: quaisquer mudanças na
formatação deverá ser feita diretamente na marcação
que se deseja mudar.
21 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
22. DWEB - Design para Web / Carlos José
CSS - Cascading Style Sheets
inline.html
<!DOCTYPE html>
<html>
<head>
<meta charset=“utf-8” />
<title>CSS3 - Fundamentos</title>
</head>
<body>
<h1>CSS3 - Fundamentos</h1>
<p style="color:#ff0000;font-weight:bold;text-align:center;
border:1px solid #ff0000">O texto deste parágrafo será
vermelho, negrito e centralizado, e terá uma borda vermelha
de 1 pixel de largura ao redor dele.</p>
<p>O texto deste parágrafo está sem formatação.</p>
</body>
</html>
22 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
23. DWEB - Design para Web / Carlos José
CSS - Cascading Style Sheets
n Como inserir um CSS num documento HTML
î Estilos incorporados;
n Folhas de estilo incorporados só são válidas para
apenas um documento específico.
n A especificação do CSS é feita dentro do elemento
<head>, através da marcação <style>.
n Os atributos possíveis para a marcação <style> são:
î type: especifica o tipo de conteúdo dentro do elemento.
Seu valor para CSS é text/css;
î media: especifica o tipo de mídia ao qual serão aplicados os
estilos.
23 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
24. DWEB - Design para Web / Carlos José
CSS - Cascading Style Sheets
<!DOCTYPE html>
<html>
<head> incorporado.html
<meta charset=“utf-8” />
<title>CSS3 - Fundamentos</title>
<style type=“text/css”>
p{
color:#ff0000;
font-weight:bold;
text-align:center;
border:1px solid #ff0000"
}
</style>
</head>
<body>
<h1>CSS3 - Fundamentos</h1>
<p>O texto deste parágrafo será vermelho, negrito e centralizado, e
terá uma borda vermelha de 1 pixel de largura ao redor dele.</p>
<p>O texto deste parágrafo também está com a formatação.</p>
</body>
</html>
24 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
25. DWEB - Design para Web / Carlos José
CSS - Cascading Style Sheets
n Como inserir um CSS num documento HTML
î Estilos externos;
n É um simples arquivo de texto, mas com extensão css, onde
ficam contidas as declarações das regras de estilo.
n Este arquivo é vinculado a um ou mais documentos XHTML
através da marcação <link>, que deve ser escrita dentro do
cabeçalho do documento, ou seja, dentro da marcação
<head></head>.
n Esta é a melhor forma de se inserir CSS em um site.
n Toda a formatação do site ficará contida em um único arquivo, e
qualquer alteração neste arquivo, mudará a formatação em
todos os demais documentos do site.
25 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
26. DWEB - Design para Web / Carlos José
CSS - Cascading Style Sheets
n Como inserir um CSS num documento HTML
î Estilos externos;
n Osatributos possíveis para a marcação <link > para
CSS são:
î rel: especifica o tipo de relação existente entre o documento
atual e o documento para qual a marcação <link /> está
apontando.
§ O valor declarado para este atributo será: stylesheet.
î type: especifica o tipo de conteúdo dentro do elemento.
§ Seu valor para CSS é: text/css;
î href: deve indicar o local em que o arquivo CSS está
armazenado.
§ Seu valor deve ser uma URL.
26 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
27. DWEB - Design para Web / Carlos José
CSS - Cascading Style Sheets
<!DOCTYPE html> externo.html
<html>
<head>
<meta charset=“utf-8” />
<title>CSS3 - Fundamentos</title>
<link rel=“stylesheet” type=“text/css” href=“css/
style.css”/>
</head>
<body>
<h1>CSS3 - Fundamentos</h1>
<p>O texto deste parágrafo será vermelho, negrito e
centralizado, e terá uma borda vermelha de 1 pixel de largura
ao redor dele.</p>
<p>O texto deste parágrafo também está com a formatação.</p>
</body>
</html>
27 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
28. DWEB - Design para Web / Carlos José
CSS - Cascading Style Sheets
style.css
@charset "utf-8";
/* CSS Document */
p {
color: #ff0000;
font-weight: bold;
text-align: center;
border: 1px solid #ff0000;
}
28 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
29. DWEB - Design para Web / Carlos José
Perguntas
?
29 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
30. DWEB - Design para Web / Carlos José
Considerações Finais
Fonte: Silva, Maurício Samy., CSS3: Desenvolva Aplicações Web Profissionais com o uso dos poderosos
recursos de estilização das CSS3, São Paulo, Novatec Brasil, 2012; http://www.w3schools.com
30 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12