Unb   2012.1 - dweb - 05 - css3 - fundamentos
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Unb 2012.1 - dweb - 05 - css3 - fundamentos

  • 470 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
470
On Slideshare
470
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
13
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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 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