Aula 4 Modelo CSS. Efeito cascata. Ordem em cascata. Declarações normais e importantes. Exemplo. Especificidade de um seletor 30/08/2013

Tamanho: px

Começar a partir da página:

Download "Aula 4 Modelo CSS. Efeito cascata. Ordem em cascata. Declarações normais e importantes. Exemplo. Especificidade de um seletor 30/08/2013"

Luciano Rosa Gesser
8 Há anos
Visualizações:

1 Efeito cascata Aula 4 Modelo CSS Curso: Técnico em Informática / 2º módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme Fontes das folhas de estilo Autor Usuário Agente do usuário (por ex, navegador) Desafio de programar para Web Conflitos Efeito em cascata Ordem em cascata Folha de estilo padrão do navegador Folha de estilo do usuário Folha de estilo do autor Estilo externo Estilo incorporado (seção head) Estilo inline Declaração do autor com!important Declaração do usuário com!important Declarações normais e importantes Autor tem precedência sobre o usuário Para mudar a precedência: important Ex.: p {color: black!important Uma regra!important tem precedência sobre uma regra normal Especificidade de um seletor Considere: <p class= diferente > Um parágrafo qualquer </p> CSS p.diferente {font-size: 12px; p {font-size: 18px; <!DOCTYPE html... > <html> <head> <title> Exercício Seletores</title> <link rel="stylesheet" type="text/css" href="seletores.css" /> </head> <body> <p class="diferente"> Um texto para um parágrafo qualquer que irá testar a especificidade de um seletor </p>... 1

externo Estilo incorporado (seção head) Estilo inline Declaração do autor com!important Declaração do usuário com!

Seletores.css color: red; font-size: 12px; Teste sua solução. Acrescente ao CSS p.diferente{ color: blue; font-size: 22px; As duas regras são aplicadas. Mas qual foi a ordem de cascata?

2 Seletores.css color: red; font-size: 12px; Teste sua solução. Acrescente ao CSS p.diferente{ color: blue; font-size: 22px; As duas regras são aplicadas. Mas qual foi a ordem de cascata? Agora acrescente!important color: red; font-size: 12px!important; A precedência é do seletor mais específico Mas pode haver modificadores Modelo de formatação dos boxes Implica que cada elemento da árvore do documento crie um ou mais boxes (caixas) São características dos boxes: Dimensões, posição, tipo, relacionamento com outros boxes e informações externas. Box Model Fonte: Container Bloco de conteúdo Box retangular Pode conter outros boxes Os boxes descendentes não precisam respeitar os limites do container 2

important; A precedência é do seletor mais específico Mas pode haver modificadores Modelo de formatação dos boxes Implica que cada elemento da árvore do documento crie um ou mais boxes

Elementos nível bloco Parágrafo p Títulos h1 a h6 Elementos descendentes Divida com div Usado para identificar uma divisão do texto de bloco; Pode usar como container Agrupamento lógico Fique em

3 Elementos nível bloco Parágrafo p Títulos h1 a h6 Elementos descendentes Divida com div Usado para identificar uma divisão do texto de bloco; Pode usar como container Agrupamento lógico Fique em linha com span Oferece as mesmas vantagens que o elemento div Usado para elementos em um linha Só podem conter texto e outros elementos em linha Ex.: <div> <span> Texto 1 </span> <span> Texto 1 </span> <body> <div> <p class="diferente"> Um texto para um parágrafo qualquer que irá testar um boxdescedente </p> <p class="diferente"> Outro parágrafo qualquer </p> </body> CSS p { border: 2px solid blue; background-color: white; border:2px solid red; background-color: silver; Teste. 3

4 : Padding No CSS Acrescente no parágrafo: padding: 10px; Acrescente no div padding: 20px; Teste! : Margin Sem margin e sem padding Com margin : Margin Sem margin e sem Com margin padding border: 2px solid blue; border: 2px solid blue; background-color: background-color: white; white; margin:10px; border:2px solid red; border:2px solid red; background-color: background-color: silver; silver; Margin margin-top: 20px; margin-right: 10px; margin-bottom: 5px; margin-left:30px; Ou de forma abreviada margin:20px 10px 5px 30px; Ou ainda para todas as margens margin: 20px; Mesma coisa para padding Largura e altura Largura width Altura height <div> <p class="diferente"> Um texto para um parágrafo qualquer </p> 4

white; white; margin:10px; border:2px solid red; border:2px solid red; background-color: background-color: silver; silver; Margin margin-top: 20px; margin-right: 10px;

CSS body{ margin:0; padding:0; font-size:20px; width: 440px; Height:200px; margin: 45px 40px 5px 50px; padding: 15px 30px 10px 0; background: silver; background: white; margin:20px 20px 20px 40px;

5 CSS body{ margin:0; padding:0; font-size:20px; width: 440px; Height:200px; margin: 45px 40px 5px 50px; padding: 15px 30px 10px 0; background: silver; background: white; margin:20px 20px 20px 40px; padding: 15px 30px 10px 0; Exercício 1 Exercício: resolução <div id="conteudo"> <div id="dotted"> dotted <div id="dashed"> dashed <div id="solid"> solid <div id="groove"> groove <div id="double"> double <div id="ridge"> ridge <div id="inset"> inset <div id="outset"> outset Exercício: resolução CSS? Dica: use a propriedade float right ou left Caracteres especiais Link arts/entities/named_entities/ Caractere Descrição Nome Espaço Copyright Marca Registrada ¼ Fração ¼ ¼ Seção Barra vertical ± Mais ou menos plus-minus sign 5

id="double"> double <div id="ridge"> ridge <div id="inset"> inset <div id="outset"> outset Exercício: resolução CSS?

6 Exercício 2 Exercícios 2: HTML <div id="pagina"> <div id="cabecalho"> <h1> Meu site </h1> <div id="navegacao"> ---- <div id="conteudo > <h1>minha página</h1> <p></p> <div id="banner > <p> </p> <div id="rodape"> Copyright Meu Site 2013 Leitura Complementar Capítulo 4 - SILVA, M. S. Construindo Sites com CSS e (X)HTML. Novatec, 2007 Referências SILVA, M. S. Construindo Sites com CSS e (X)HTML. Novatec, 2007 ROBBINNS, J. N. Aprendendo Web Design: Guia para iniciantes. 3ª ed. Porto Alegre. Bookman, Contato luciana.balieiro@ifnmg.edu.br 6

SILVA, M. S. Construindo Sites com CSS e (X)HTML. Novatec, 2007 Referências SILVA, M. S. Construindo Sites com CSS e (X)HTML. Novatec, 2007 ROBBINNS, J.

Documentos relacionados

Aula 5 Cabeçalhos, Imagens e Links

Roteiro Aula 5 Cabeçalhos, Imagens e Links Efeitos em cabeçalhos Imagens e CSS Links Curso: Técnico em Informática / 2º Módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme Efeitos