Prof Silvano Oliveira Fundamentos de Desenvolvimento Web Folhas de Estilo em Cascata Prof Silvano Oliveira
Definição CSS = Cascade Style Sheet = Folha de Estilo em Cascata CSS = Cascade Style Sheet = Folha de Estilo em Cascata Do site do W3C: Do site do W3C: “Folhas de estilo em cascata é um mecanismo simples para adicionar estilos (por exemplo: fontes, cores, espaçamentos) aos documentos web” “Folhas de estilo em cascata é um mecanismo simples para adicionar estilos (por exemplo: fontes, cores, espaçamentos) aos documentos web” CSS - Folhas de Estilo2
Prof Silvano Oliveira Finalidade Devolver à (X)HTML o proposito inicial da linguagem: marcação e estruturação de documentos. Devolver à (X)HTML o proposito inicial da linguagem: marcação e estruturação de documentos. “(X)HTML para estruturar e CSS para apresentar” CSS - Folhas de Estilo3
Prof Silvano Oliveira Histórico Até 1993: estilização mínima feita pela próprio navegador Até 1993: estilização mínima feita pela próprio navegador – Folha de estilo padrão Mosaic (1993): permite controle de fontes e cores Mosaic (1993): permite controle de fontes e cores 1994: primeira proposta das CSS 1994: primeira proposta das CSS 1996: CSS1 como recomendação oficial W3C 1996: CSS1 como recomendação oficial W3C CSS - Folhas de Estilo4
Prof Silvano Oliveira Estilos dentro do HTML Cor de Fundo Isto é um cabeçalho Isto é um parágrafo. Isto é um cabeçalho Isto é um parágrafo. CSS - Folhas de Estilo5
Prof Silvano Oliveira Estilos dentro do HTML Cor do Texto Cor do Texto<body> Isto é um cabeçalho Isto é um parágrafo. Isto é um cabeçalho Isto é um parágrafo. </body> Tipo da fonte Tipo da fonte<body> Isto é um cabeçalho Isto é um parágrafo. Isto é um cabeçalho Isto é um parágrafo. </body> CSS - Folhas de Estilo6
Prof Silvano Oliveira Estilos dentro do HTML Tamanho da fonte Tamanho da fonte Isto é um cabeçalho Isto é um parágrafo. Isto é um cabeçalho Isto é um parágrafo. Alinhamento da fonte Alinhamento da fonte Isto é um cabeçalho Isto é um parágrafo. Isto é um cabeçalho Isto é um parágrafo. CSS - Folhas de Estilo7
Prof Silvano Oliveira Sintaxe CSS Regra CSS Regra CSS seletor {propriedade: valor} CSS - Folhas de Estilo8 Regra CSS Declaração Exemplos: body{background-color: blue} OU body{background-color: ligthgrey}
Prof Silvano Oliveira Regra CSS Seletor : é o alvo da CSS, define onde será aplicada a regra CSS Seletor : é o alvo da CSS, define onde será aplicada a regra CSS Declaração: determina os parâmetros da estilização Declaração: determina os parâmetros da estilização – Propriedade : define qual propriedade do elemento será estilizado – Valor : é a quantificação ou qualificação da propriedade CSS - Folhas de Estilo9
Prof Silvano Oliveira Prioridade dos estilos As folhas de estilos podem ser inseridas de três formas: As folhas de estilos podem ser inseridas de três formas: 1. Escrita diretamente na tag. 2. Escrita no cabeçalho da página web. 3. Escrita em um arquivo externo, sendo acessado pela página web. A ordem de prioridade é 1 – 2 – 3 CSS - Folhas de Estilo10
Prof Silvano Oliveira CSS inline (embutida) Cabeçalho estilizado Cabeçalho estilizado Parágrafo interessante Parágrafo interessante Colocar a cor da fonte do h2 como branco Colocar a cor da fonte do h2 como branco CSS - Folhas de Estilo11
Prof Silvano Oliveira Onde colocar isso? <head> Exercício CSS Exercício CSS h1 { h1 { text-align: center } </head><body> Cabeçalho estilizado Cabeçalho estilizado Parágrafo interessante Parágrafo interessante </body> CSS - Folhas de Estilo12
Prof Silvano Oliveira Seletores podem compartilhar declarações <head> Exercício CSS Exercício CSS h1, h2 { h1, h2 { text-align: center } </head><body> Cabeçalho estilizado Cabeçalho estilizado Parágrafo interessante Parágrafo interessante </body> CSS - Folhas de Estilo13
Prof Silvano Oliveira Uma declaração pode definir mais de uma propriedade <head> Exercício CSS Exercício CSS h1, h2{ h1, h2{ text-align: center; color: red; } </head><body> Cabeçalho H1 Cabeçalho H1 Cabeçalho estilizado Cabeçalho estilizado Parágrafo interessante Parágrafo interessante </body> CSS - Folhas de Estilo14
Prof Silvano Oliveira Uma declaração pode definir mais de uma propriedade <head> Exercício CSS Exercício CSS h1, h2{ h1, h2{ text-align: center; color: red; } p {font-size: 30px; } </head><body> Cabeçalho H1 Cabeçalho H1 Cabeçalho estilizado Cabeçalho estilizado Parágrafo interessante Parágrafo interessante </body> CSS - Folhas de Estilo15
Prof Silvano Oliveira Reutilizando folhas de estilo CSS - Folhas de Estilo16 h1, h2{text-align: center; h1, h2{text-align: center; color: red;} color: red;} h1 { h1 { color: sienna; color: sienna; font-family: arial font-family: arial } h2 {margin-left: 80px} h2 {margin-left: 80px} ol { ol { color: blue; color: blue; font-family: verdana font-family: verdana }</style> h1, h2{text-align: center; color: red;} color: red;} h1 { h1 { color: sienna; color: sienna; font-family: arial font-family: arial } h2 {margin-left: 80px} h2 {margin-left: 80px} ol { ol { color: blue; color: blue; font-family: verdana font-family: verdana } estilo.css
Prof Silvano Oliveira Reutilizando folhas de estilo <head> Exercício CSS Exercício CSS CSS - Folhas de Estilo17
Prof Silvano Oliveira Comentários em Arquivos CSS /* formata a tag de cabeçalhos */ h1, h2 { h1, h2 { text-align: center; /* texto centralizado */ color: red; /* texto com cor vermelha */ } CSS - Folhas de Estilo18
Prof Silvano Oliveira Mais exemplos em estilo.css CSS - Folhas de Estilo19 h1 { color: sienna; color: sienna; font-family: arial font-family: arial} h2 {margin-left: 80px} ol { color: blue; color: blue; font-family: verdana font-family: verdana}
Prof Silvano Oliveira Exemplo estilo.css <head> Exercício CSS Exercício CSS </head><body> Cabeçalho H1 Cabeçalho H1 Cabeçalho estilizado Cabeçalho estilizado Parágrafo interessante Parágrafo interessante <ol> Primeira opção Primeira opção Segunda opção Segunda opção </ol></body> CSS - Folhas de Estilo20
Prof Silvano Oliveira Exercício 2 Criar uma tabela com 4 imagens da internet, onde as mesmas deverão apontar para os seguintes links, e que tenha um cabeçalho e borda de tamanho 1px: CSS - Folhas de Estilo21ANIMAIS
Prof Silvano Oliveira Exercício 2 Dicas: Usar regras do CSS no cabeçalho Usar regras do CSS no cabeçalho img { height: 200px; width: 200px; } img { max-height: 200px; max-width: 200px; height: auto; width: auto; }... CSS - Folhas de Estilo22
Prof Silvano Oliveira Perguntas??? CSS - Folhas de Estilo23
Prof Silvano Oliveira Sítios na Internet ➔ ➔ ➔ CSS - Folhas de Estilo24