Your SlideShare is downloading. ×
0
Curso Superior de Tecnologia em Design GráficoDWEB - Design paraWeb                                                5      ...
DWEB - Design para Web / Carlos José                                               Contato                                ...
DWEB - Design para Web / Carlos José                                      Objetivo da Aulan Apresentar os fundamentos da ...
DWEB - Design para Web / Carlos José                                     Agendan  O  que é CSS?n  Sintaxe CSSn  Como in...
DWEB - Design para Web / Carlos José                                        CSS - Cascading Style Sheetsn    O que é CSS?...
DWEB - Design para Web / Carlos José                                      CSS - Cascading Style Sheetsn  Por   que devemo...
DWEB - Design para Web / Carlos José                                     CSS - Cascading Style Sheetsn  Quais      as van...
DWEB - Design para Web / Carlos José                                     CSS + HTML    HTML = conteúdo    CSS = aparência8...
DWEB - Design para Web / Carlos José                                           XHTMLn  Comparando                   o vel...
DWEB - Design para Web / Carlos José                                      Comparando o velho com o novo!                  ...
DWEB - Design para Web / Carlos José                                      Comparando o velho com o novo!                  ...
DWEB - Design para Web / Carlos José                                      Comparando o velho com o novo!                  ...
DWEB - Design para Web / Carlos José                                      Comparando o velho com o novo!                  ...
DWEB - Design para Web / Carlos José                                      HTML - uma estrutura de árvore                  ...
DWEB - Design para Web / Carlos José                                        HTML - uma estrutura de árvore                ...
DWEB - Design para Web / Carlos José                                       CSS - Cascading Style Sheetsn  Regra        CS...
DWEB - Design para Web / Carlos José                                      CSS - Cascading Style Sheetsn  Sintaxe         ...
DWEB - Design para Web / Carlos José                                      CSS - Cascading Style Sheetsn  Sintaxe         ...
DWEB - Design para Web / Carlos José                                          CSS - Cascading Style Sheetsn    Antes de q...
DWEB - Design para Web / Carlos José                                        CSS - Cascading Style Sheetsn    Como inserir...
DWEB - Design para Web / Carlos José                                        CSS - Cascading Style Sheetsn    Como inserir...
DWEB - Design para Web / Carlos José                                      CSS - Cascading Style Sheets                    ...
DWEB - Design para Web / Carlos José                                        CSS - Cascading Style Sheetsn    Como inserir...
DWEB - Design para Web / Carlos José                                      CSS - Cascading Style Sheets<!DOCTYPE html><html...
DWEB - Design para Web / Carlos José                                        CSS - Cascading Style Sheetsn    Como inserir...
DWEB - Design para Web / Carlos José                                        CSS - Cascading Style Sheetsn    Como inserir...
DWEB - Design para Web / Carlos José                                      CSS - Cascading Style Sheets<!DOCTYPE html>     ...
DWEB - Design para Web / Carlos José                                      CSS - Cascading Style Sheets                    ...
DWEB - Design para Web / Carlos José                                      Perguntas                                      ?...
DWEB - Design para Web / Carlos José                                                  Considerações FinaisFonte: Silva, Ma...
Upcoming SlideShare
Loading in...5
×

Unb 2012.1 - dweb - 05 - css3 - fundamentos

233

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
233
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
14
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Unb 2012.1 - dweb - 05 - css3 - fundamentos"

  1. 1. Curso Superior de Tecnologia em Design GráficoDWEB - Design paraWeb 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:21 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
  2. 2. DWEB - Design para Web / Carlos José Contato Carlos José carlosjose.unibratec@gmail.com www.carlosjose.net twitter.com/carlosjoser2n2 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
  3. 3. DWEB - Design para Web / Carlos José Objetivo da Aulan Apresentar os fundamentos da linguagem de formatação CSS.3 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
  4. 4. DWEB - Design para Web / Carlos José Agendan  O que é CSS?n  Sintaxe CSSn  Como inserir CSS em documentos HTMLn  Seletoresn  Medidas4 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
  5. 5. DWEB - Design para Web / Carlos José CSS - Cascading Style Sheetsn  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. 6. DWEB - Design para Web / Carlos José CSS - Cascading Style Sheetsn  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.asp6 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
  7. 7. DWEB - Design para Web / Carlos José CSS - Cascading Style Sheetsn  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. 8. DWEB - Design para Web / Carlos José CSS + HTML HTML = conteúdo CSS = aparência8 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
  9. 9. DWEB - Design para Web / Carlos José XHTMLn  Comparando o velho com o novo! HTML XHTML9 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
  10. 10. DWEB - Design para Web / Carlos José Comparando o velho com o novo! HTML10 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
  11. 11. DWEB - Design para Web / Carlos José Comparando o velho com o novo! XHTML11 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
  12. 12. DWEB - Design para Web / Carlos José Comparando o velho com o novo! HTML12 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
  13. 13. DWEB - Design para Web / Carlos José Comparando o velho com o novo! XHTML13 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
  14. 14. DWEB - Design para Web / Carlos José HTML - uma estrutura de árvore html header body title ul li li li14 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
  15. 15. DWEB - Design para Web / Carlos José HTML - uma estrutura de árvore html Antecessor header body Descendente title ul Descendente li li li15 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
  16. 16. DWEB - Design para Web / Carlos José CSS - Cascading Style Sheetsn  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. 17. DWEB - Design para Web / Carlos José CSS - Cascading Style Sheetsn  Sintaxe CSS Seletor p { color: #ff0000; font-weight: bold; text-align: center; border: 1px solid #ff0000 } Propriedade Valor17 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
  18. 18. DWEB - Design para Web / Carlos José CSS - Cascading Style Sheetsn  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. 19. DWEB - Design para Web / Carlos José CSS - Cascading Style Sheetsn  Antes de qualquer coisa! CSS3 - Fundamentos inline.html incorporado.html externo.html css style.css19 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
  20. 20. DWEB - Design para Web / Carlos José CSS - Cascading Style Sheetsn  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. 21. DWEB - Design para Web / Carlos José CSS - Cascading Style Sheetsn  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. 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 vermelhade 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. 23. DWEB - Design para Web / Carlos José CSS - Cascading Style Sheetsn  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. 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, eterá 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. 25. DWEB - Design para Web / Carlos José CSS - Cascading Style Sheetsn  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. 26. DWEB - Design para Web / Carlos José CSS - Cascading Style Sheetsn  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. 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 ecentralizado, e terá uma borda vermelha de 1 pixel de larguraao 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. 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. 29. DWEB - Design para Web / Carlos José Perguntas ?29 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
  30. 30. DWEB - Design para Web / Carlos José Considerações FinaisFonte: Silva, Maurício Samy., CSS3: Desenvolva Aplicações Web Profissionais com o uso dos poderososrecursos de estilização das CSS3, São Paulo, Novatec Brasil, 2012; http://www.w3schools.com30 Capítulo 5 - CSS3: Fundamentos Monday, 19 de March de 12
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×