1 Monday, 19 de March de 12 Capítulo 5 - CSS3: Fundamentos
Curso Superior de Tecnologia em Design Gráfico
“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
5 CSS3: Fundamentos
DWEB - Design para Web
DWEB - Design para Web / Carlos José
2 Monday, 19 de March de 12 Capítulo 5 - CSS3: Fundamentos
Contato
Carlos José
[email protected] www.carlosjose.net
twitter.com/carlosjoser2n
DWEB - Design para Web / Carlos José
3 Monday, 19 de March de 12 Capítulo 5 - CSS3: Fundamentos
Objetivo da Aula
n Apresentar os fundamentos da linguagem de formatação CSS.
DWEB - Design para Web / Carlos José
4 Monday, 19 de March de 12 Capítulo 5 - CSS3: Fundamentos
Agenda
n O que é CSS? n Sintaxe CSS n Como inserir CSS em documentos HTML n Seletores n Medidas
DWEB - Design para Web / Carlos José
5 Monday, 19 de March de 12 Capítulo 5 - CSS3: Fundamentos
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.
DWEB - Design para Web / Carlos José
6 Monday, 19 de March de 12 Capítulo 5 - CSS3: Fundamentos
CSS - Cascading Style Sheets
n Por que devemos utilizar CSS? î CSS apesar 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
DWEB - Design para Web / Carlos José
7 Monday, 19 de March de 12 Capítulo 5 - CSS3: Fundamentos
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.
DWEB - Design para Web / Carlos José
8 Monday, 19 de March de 12 Capítulo 5 - CSS3: Fundamentos
CSS + HTML
HTML = conteúdo CSS = aparência
DWEB - Design para Web / Carlos José
9 Monday, 19 de March de 12 Capítulo 5 - CSS3: Fundamentos
XHTML
n Comparando o velho com o novo!
HTML XHTML
DWEB - Design para Web / Carlos José
10 Monday, 19 de March de 12 Capítulo 5 - CSS3: Fundamentos
Comparando o velho com o novo!
HTML
DWEB - Design para Web / Carlos José
11 Monday, 19 de March de 12 Capítulo 5 - CSS3: Fundamentos
Comparando o velho com o novo!
XHTML
DWEB - Design para Web / Carlos José
12 Monday, 19 de March de 12 Capítulo 5 - CSS3: Fundamentos
Comparando o velho com o novo!
HTML
DWEB - Design para Web / Carlos José
13 Monday, 19 de March de 12 Capítulo 5 - CSS3: Fundamentos
Comparando o velho com o novo!
XHTML
DWEB - Design para Web / Carlos José
14 Monday, 19 de March de 12 Capítulo 5 - CSS3: Fundamentos
HTML - uma estrutura de árvore
html
header
title
body
ul
li li li
DWEB - Design para Web / Carlos José
15 Monday, 19 de March de 12 Capítulo 5 - CSS3: Fundamentos
HTML - uma estrutura de árvore
html
header
title
body
ul
li li li
Antecessor
Descendente
Descendente
DWEB - Design para Web / Carlos José
16 Monday, 19 de March de 12 Capítulo 5 - CSS3: Fundamentos
CSS - Cascading Style Sheets
n Regra CSS î Escrever regras 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!
DWEB - Design para Web / Carlos José
17 Monday, 19 de March de 12 Capítulo 5 - CSS3: Fundamentos
n Sintaxe CSS
CSS - Cascading Style Sheets
p { color: #ff0000; font-weight: bold; text-align: center; border: 1px solid #ff0000 }
Seletor
Propriedade Valor
DWEB - Design para Web / Carlos José
18 Monday, 19 de March de 12 Capítulo 5 - CSS3: Fundamentos
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*/
DWEB - Design para Web / Carlos José
19 Monday, 19 de March de 12 Capítulo 5 - CSS3: Fundamentos
CSS - Cascading Style Sheets
n Antes de qualquer coisa!
CSS3 - Fundamentos
inline.html
incorporado.html
externo.html
css
style.css
DWEB - Design para Web / Carlos José
20 Monday, 19 de March de 12 Capítulo 5 - CSS3: Fundamentos
CSS - Cascading Style Sheets
n Como inserir um CSS num documento HTML î Existem 3 formas:
n Estilos inline; n Estilos incorporados; n Estilos externos.
DWEB - Design para Web / Carlos José
21 Monday, 19 de March de 12 Capítulo 5 - CSS3: Fundamentos
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.
DWEB - Design para Web / Carlos José
22 Monday, 19 de March de 12 Capítulo 5 - CSS3: Fundamentos
CSS - Cascading Style Sheets
<!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>
inline.html
DWEB - Design para Web / Carlos José
23 Monday, 19 de March de 12 Capítulo 5 - CSS3: Fundamentos
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.
DWEB - Design para Web / Carlos José
24 Monday, 19 de March de 12 Capítulo 5 - CSS3: Fundamentos
CSS - Cascading Style Sheets <!DOCTYPE html> <html> <head> <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>
incorporado.html
DWEB - Design para Web / Carlos José
25 Monday, 19 de March de 12 Capítulo 5 - CSS3: Fundamentos
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.
DWEB - Design para Web / Carlos José
26 Monday, 19 de March de 12 Capítulo 5 - CSS3: Fundamentos
CSS - Cascading Style Sheets
n Como inserir um CSS num documento HTML î Estilos externos;
n Os atributos 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.
DWEB - Design para Web / Carlos José
27 Monday, 19 de March de 12 Capítulo 5 - CSS3: Fundamentos
CSS - Cascading Style Sheets
<!DOCTYPE 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>
externo.html
DWEB - Design para Web / Carlos José
28 Monday, 19 de March de 12 Capítulo 5 - CSS3: Fundamentos
CSS - Cascading Style Sheets
@charset "utf-8"; /* CSS Document */ p { color: #ff0000; font-weight: bold; text-align: center; border: 1px solid #ff0000; }
style.css
DWEB - Design para Web / Carlos José
29 Monday, 19 de March de 12 Capítulo 5 - CSS3: Fundamentos
Perguntas
?
DWEB - Design para Web / Carlos José
30 Monday, 19 de March de 12 Capítulo 5 - CSS3: Fundamentos
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
Top Related