2. Agenda Introdução Inserindo o CSS em documentos HTML Por que Folhas de Estilo em Cascata? Seletores Propriedades O Box Model Na Prática: estilizando um documento XHTML com CSS Diretrizes para melhorar o desenvolvimento de layouts O que vem por aí com o CSS 3
3. Agenda Introdução Inserindo o CSS em documentos HTML Por que Folhas de Estilo em Cascata? Seletores Propriedades O Box Model Na Prática: estilizando um documento XHTML com CSS Diretrizes para melhorar o desenvolvimento de layouts O que vem por aí com o CSS 3
4. Introdução Cascading Style Sheets ou Folhas de Estilo em Cascata Linguagem de formatação para documentos HTML e XHTML Separa o estilo do conteúdo Criação e manutenção do design ficam mais fáceis e consistentes
5. Introdução Principais especificações do CSS CSS 1 (1996, 1999): continha apenas propriedades básicas CSS 2.1: versão mais utilizada atualmente CSS 3: em desenvolvimento, contém novas propriedades, mas já pode ser utilizada
8. Agenda Introdução Inserindo o CSS em documentos HTML Por que Folhas de Estilo em Cascata? Seletores Propriedades O Box Model Na Prática: estilizando um documento XHTML com CSS Diretrizes para melhorar o desenvolvimento de layouts O que vem por aí com o CSS 3
9. Inserindo o CSS em documento HTML Inline Insere as definições de estilo diretamente no elemento (não recomendado) <p style=”color: #F00;”>Conteúdo</p> Embeded O código é embutido diretamente em um arquivo HTML <style type=”text/css”> p { color: #F00; } </style> Arquivo Externo Todas as definições de estilo ficam centralizadas em um arquivo externo *.css que deve ser linkado aos arquivos HTML que a utilizarão, dentro da tag <head>. <link rel="stylesheet" type="text/css" href="structure.css" />
10. Agenda Introdução Inserindo o CSS em documentos HTML Por que Folhas de Estilo em Cascata? Seletores Propriedades O Box Model Na Prática: estilizando um documento XHTML com CSS Diretrizes para melhorar o desenvolvimento de layouts O que vem por aí com o CSS 3
11. Por que Folhas de Estilo em Cascata? Prioridade e precedência de estilos Quando várias regras são aplicadas a uma elemento, entra em cena as regras de precedência em cascata: Estilo inline (maior precedência) Folha de estilo embutida Folha de estilo linkada Estilo padrão do navegador (menor precedência)
12. Agenda Introdução Inserindo o CSS em documentos HTML Por que Folhas de Estilo em Cascata? Seletores Propriedades O Box Model Na Prática: estilizando um documento XHTML com CSS Diretrizes para melhorar o desenvolvimento de layouts O que vem por aí com o CSS 3
13. Seletores seletor{propriedade: valor; } Seletor que define o elemento que receberá o estilo Um atributo que será alterado (bordas, margem, fonte, espaçamento, etc.) Valor da propriedade, podendo ser numérico, texto, medida, código, etc. Declaração Bloco de Declarações
14. Seletores Um seletor pode ser: Uma tag HTML (ex.: p {...}, div {...}, h1 {...}, etc.) Uma classe Definição de estilo que pode ser utilizada por mais de um elemento na mesma página, criando assim uma categoria . Começam sempre com um ponto e são utilizadas no atributo class do HTML Um ID constitui uma definição/identificação única e só pode ser utilizada para apenas um elemento em cada página. Começam com # e são utilizados na propriedade id do HTML
15. Seletores Um seletor pode ser: Seletores mistos (ex.: p.destaque {...}, div#header {...}) Seletores agrupados (ex.: h1, p, div {...} ) Se vários elementos possuem as mesmas propriedades, pode-se aplicá-las em uma única declaração, separando os seletores com vírgula Seletores encadeados (ex.: #coluna div p {...}) Também chamados de seletores contextuais, definem uma regra para especificar o estilo de um elemento dentro de outros elementos Pseudo-classes (ex.: :link, :active, :hover, :visited, :first-child, etc.) E combinações de todas essas formas
16. Agenda Introdução Inserindo o CSS em documentos HTML Por que Folhas de Estilo em Cascata? Seletores Propriedades O Box Model Na Prática: estilizando um documento XHTML com CSS Diretrizes para melhorar o desenvolvimento de layouts O que vem por aí com o CSS 3
17. Principais Propriedades Plano de Fundo: background-color background-image background-repeat (repeat, repeat-x, repeat-y, no-repeat) background-attachment (fixed, scroll) background-position Forma abreviada: background background: #FC0 url(imagem.gif) no-repeat center top;
29. Agenda Introdução Inserindo o CSS em documentos HTML Por que Folhas de Estilo em Cascata? Seletores Propriedades O Box Model Na Prática: estilizando um documento XHTML com CSS Diretrizes para melhorar o desenvolvimento de layouts O que vem por aí com o CSS 3
30. O Box Model Padrão de renderização ou apresentação visual de um box (container de informações) segundo a formatação CSS.
32. O Box Model Se uma div possuir largura e altura de 200 pixels e paddingde 10 pixels em todas as direções, o navegador irá mostrar uma caixa com 220 pixels de largura e altura
33. Agenda Introdução Inserindo o CSS em documentos HTML Por que Folhas de Estilo em Cascata? Seletores Propriedades O Box Model Na Prática: estilizando um documento XHTML com CSS Diretrizes para melhorar o desenvolvimento de layouts O que vem por aí com o CSS 3
34. Na Prática Iremos estilizar um documento HTML pronto utilizando as propriedades CSS
39. Na Prática Baixar os arquivos do minicurso em http://www.talitapagani.com/material/site_minicurso.zip e descompactar na sua máquina Abrir o Dreamweaver Ctrl+N para criar um nova arquivo do tipo CSS
40. Na Prática Salve o arquivo com o nome estilo.css na mesma pasta do arquivo index.html Abrir o arquivo index.html no Firefox, no Internet Explorer e no IETester
52. Agenda Introdução Inserindo o CSS em documentos HTML Por que Folhas de Estilo em Cascata? Seletores Propriedades O Box Model Na Prática: estilizando um documento XHTML com CSS Diretrizes para melhorar o desenvolvimento de layouts O que vem por aí com o CSS 3
53. Diretrizes para melhorar o desenvolvimento de layouts Construa o layout por etapas e ao concluir a etapa teste em diferentes navegadores Desenvolva para os navegadores modernos e depois adapte para os antigos Valide seu código HTML e CSS Evite hacks para determinados navegadores Modularizar CSS quando necessário @import url(“estilo.css”) Múltiplas folhas de estilo
54. Agenda Introdução Inserindo o CSS em documentos HTML Por que Folhas de Estilo em Cascata? Seletores Propriedades O Box Model Na Prática: estilizando um documento XHTML com CSS Diretrizes para melhorar o desenvolvimento de layouts O que vem por aí com o CSS 3
55. O que vem por aí com CSS3 Maior controle de formas e efeitos Maior independência do uso de imagens, principalmente PNG para criar transparências Estilizar elementos de acordo com determinados atributos da tag HTML Concentrar a formatação cada vez mais apenas no CSS, diminuindo o uso de imagens e scripts
56. O que vem por aí com CSS3 Cantos arredondados: border-radius #div1 { border: 1px solid #699; -moz-border-radius: 20px; -webkit-border-radius: 20px; }
57. O que vem por aí com CSS3 Sombras em elementos de bloco: box-shadow #div2 { border: 1px solid #699; -moz-box-shadow: 5px 5px 5px #b6ebf7; -webkit-box-shadow: 5px 5px 5px #b6ebf7; }
58. O que vem por aí com CSS3 Sombras em textos: text-shadow p.shadow { text-shadow: 2px 2px2px #000; }
59. O que vem por aí com CSS3 Transparência: opacity e rgba #div3 { background-color: rgba(110, 142, 185, .4); } #div3 { background-color: #6e8eb9; opacity: 0.4; }
60. O que vem por aí com CSS3 Colunas: column-count, column-gap, column-rule #div4 { /* borda inserida para facilitar o entedimento */ border: 1px solid #699; -moz-column-count: 2; -moz-column-gap: 20px; -moz-column-rule: 1px solid #6e8eb9; -webkit-column-count: 2; -webkit-column-gap: 20px; -webkit-column-rule: 1px solid #6e8eb9; }
61. O que vem por aí com CSS3 Múltiplos backgrounds: separar os backgrounds por vírgula #div5 blockquote{ background: url(aspas1.gif) no-repeat 0 0, url(aspas2.gif) no-repeat 100% 100%; }
62. O que vem por aí com CSS3 Background com gradiente: linear-gradient, gradient #div8 { background: -moz-linear-gradient(bottom, #b6ebf7, #fff 50%); background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #b6ebf7), color-stop(0.20, #fff)); }
63. O que vem por aí com CSS3 Rotacionar elementos: transform #div9 { -moz-transform: rotate(2deg); -webkit-transform: rotate(2deg); }
64. O que vem por aí com CSS3 Seletores por atributos elemento[atributo=valor] input[type=“text”] div[title=“abc”] :not() div.teste :not(span) tabletrtd :not(:last-child) :last-child ol.teste li:last-child :empty p:empty E muitos outros
65. Referências MACEDO, Marcelo da Silva. Construindo sites adotando padrões Web. Rio de Janeiro: Editora Ciência Moderna Ltda., 2004. SILVA, Maurício Samy. Criando sites com HTML: sites de alta qualidade com HTML e CSS. São Paulo: Novatec Editora, 2008. VISIE. Campus Online. Textos sobre Tableless.
66. Referências e sites interessantes Tablelesswww.tableless.com.br CSS no Lanchewww.cssnolanche.com.br Maujorwww.maujor.com Pinceladas da Webwww.pinceladasdaweb.com.br W3Schoolshttp://www.w3schools.com/
67. Referências e sites interessantes CSS3.infowww.css3.info 10 Efeitos com Propriedades CSS http://www.kadunew.com/blog/css/10-efeitos-com-propriedades-css3