Conectar-se

Esqueci minha senha

Últimos assuntos
» O codigo para assistir futebol ao vivo
Herança Css EmptySex Fev 27, 2015 11:39 pm por nicolasmendes

» Site só de Pulblicidade
Herança Css EmptySab Ago 18, 2012 3:13 pm por streamjei

» Código para configurar botão de fechar!
Herança Css EmptySab Ago 18, 2012 12:04 pm por Pika_mestre

» Novo Tipo de Portal
Herança Css EmptyQua Mar 21, 2012 10:21 am por OrigamiLouco

» (TUTORIAL) Como adicionar um livro de visitas para o seu site!!
Herança Css EmptySeg Mar 19, 2012 8:24 pm por Admin

» (TUTORIAL) Como criar um formulário de contato!!
Herança Css EmptySeg Mar 19, 2012 8:08 pm por Admin

» (TUTORIAL) Adicionar twitter!!
Herança Css EmptySeg Mar 19, 2012 7:45 pm por Admin

» Regras para postar os sites!!
Herança Css EmptySeg Mar 19, 2012 9:14 am por Admin

» Faça downloads mais rapidos e em links diretos não espere para baixar!
Herança Css EmptySeg Mar 19, 2012 8:55 am por Admin

Flux RSS


Yahoo! 
MSN 
AOL 
Netvibes 
Bloglines 


Buscar
 
 

Resultados por:
 


Rechercher Busca avançada

Os membros mais ativos do mês

Mundo da Comédia

Sex Fev 24, 2012 2:27 pm por mundo-da-comedia

Quer rir um pouco?
Entao entre http://www.mundodacomedia.com
Onde vc encontra tirinhas piadas imagens e videos engraçadas e muito mais
Aproveitem

Comentários: 0

Conheça Cuba

Ter Jan 31, 2012 5:19 am por Arfisil

Venha conhecer Cuba Espero que gostem




aqui


http://www.box.com/s/zt8ssxzuvxfob7p3uqxb

Comentários: 0

Boas Vindas

Dom Jan 22, 2012 2:30 pm por OrigamiLouco

Olá,

Seja muito bem vindo(a) ao nosso fórum, Aproveite e chame seus amigos , se eles estiverem com duvidas em relação a sites ou blogs , aqui é o lugar certo para ele(a), aqui ele(a) pode tirar a Duvida na mesma hora pois todas as duvidas são respondidas no mesmo dia!


Muito Obrigado Por sua atenção e até Breve!


Comentários: 0

Apresentações importantes

Sab Jan 21, 2012 3:25 pm por Buscaweb

Olá pessoal,

Sou o "Buscaweb", dono do website:http://buscaweb.k6.com.br e venho para ajuda-los!
Qualquer dúvida estarei aqui!
Lembro que devemos tomar cuidado com a lei anti-pirataria dos Estados Unidos da América e remover conteúdo copiado dos nossos sites.

Abraço a todos, Very Happy

Comentários: 0

Vila do Carregado

Sex Jan 20, 2012 8:41 am por Arfisil



Comentários: 1

Minha apresentação

Qua Jan 18, 2012 6:37 pm por Arfisil

Olá chamo-me Arlindo e venho fazer a minha apresentação espero divertir-me neste forum, e logo abaixo o video dos monumentos de Portugual,vejam:

Comentários: 1

Os membros mais ativos da semana

Social bookmarking

Social bookmarking digg  Social bookmarking delicious  Social bookmarking reddit  Social bookmarking stumbleupon  Social bookmarking slashdot  Social bookmarking yahoo  Social bookmarking google  Social bookmarking blogmarks  Social bookmarking live      

Conservar e compartilhar o endereço de Dicas para site ou Blog! em seu site de social bookmarking

Quem está conectado
1 usuário online :: Nenhum usuário registrado, Nenhum Invisível e 1 Visitante

Nenhum

O recorde de usuários online foi de 12 em Sex Nov 09, 2018 11:36 pm
Agosto 2019
DomSegTerQuaQuiSexSab
    123
45678910
11121314151617
18192021222324
25262728293031

Calendário Calendário

Parceiros
Fórum grátis


Herança Css

Ir em baixo

Herança Css Empty Herança Css

Mensagem  Admin em Sab Jan 14, 2012 10:51 am

Introdução.

Para se entender a herança CSS é necessário que se saiba o que é árvore do documento. O conceito de árvore do documento é melhor entendido quando fazemos uma analogia com a árvore genealógica de uma família, que é uma noção bem entendida pela maioria das pessoas.

Em uma família o relacionamento entre seus membros é expresso pelo chamado grau de parentesco. Assim, temos indivíduos que são filhos, pais, avós, irmãos, primos, ancestrais, descendentes etc.

Um documento HTML cria o que chamamos de árvore do documento no qual os elementos da marcação se relacionam entre si de maneira idêntica como se relacionam os membros de uma família. Existem elementos HTML pai, filho, irmãos, ancestrais, descendentes, etc.

Considere um documento HTML com a seguinte marcação.
view source
print?
01.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
02."http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
03.<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br">
04.<head>
05.<title>Tutorial CSS - Herança CSS</title>
06.</head>
07.<body>
08.<ul>
09.<li>Item 1</li>
10.<li>Item 2</li>
11.<li>Item 3</li>
12.</ul>
13.</body>
14.</html>

A árvore do documento criada pela marcação XHTML mostrada, esta representada no diagrama a seguir.
HTML
___|____
| |
Heady body
| |
title ul
_____|_____
| | |
li li li




Alguns "graus de parentesco" entre os elementos HTML do documento representados no diagrama são expressos como listado a seguir.

HTML é pai de HEAD e BODY
UL é pai de três LI
TITLE é filho de HEAD
Os três LIs são irmãos
UL, BODY e HTML são ancestrais de LI
TITLE e UL são descendentes de HTML

Tal como ocorre em uma família quando um filho herda uma característica de seu pai ou avô, as propriedades CSS são também herdadas de seus ancestrais, pelos elementos HTML.

Herança.

Considere, como mostrado a seguir, uma regra CSS para definição da cor de um elemento P (parágrafo) que contém um elemento EM (ênfase). Ou seja EM é filho de P.
view source
print?
1....
2.p {color: red;}
3....
4.<p>Texto do parágrafo com um <em>elemento EM</em> nele contido.</p>

A renderização do parágrafo se dá como mostrado a seguir.

Texto do parágrafo com um elemento EM nele contido.

Notar que embora não tenhamos definido explicitamente uma cor para o elemento EM ele foi renderizado na cor vermelha. Isso se deu devido a herança CSS. O que ocorreu foi que o elemento EM herdou a propriedade color de seu elemento-pai P.

E, se quiséssemos que o elemento EM fosse na cor azul? Nesse caso teríamos que anular o efeito da herança, definindo explicitamente a cor azul para EM, como mostrado a seguir.
view source
print?
1....
2.p {color: red;}
3.p em {color: blue;}
4....
5.<p>Texto do parágrafo com um <em>elemento EM</em> nele contido.</p>

A renderização do parágrafo se dá como mostrado a seguir.

Texto do parágrafo com um elemento EM nele contido.

Mas, uma propriedade CSS não está restrita a ser herdada somente do elemento-pai. Ela pode ser herdada de um elemento ancestral. O exemplo a seguir esclarece essa herança.
view source
print?
1....
2.div {color: red;}
3....
4.<div>
5.<p>Texto do parágrafo com um <em>elemento EM</em> nele contido.</p>
6.</div>

A renderização do parágrafo se dá como mostrado a seguir.


Texto do parágrafo com um elemento EM nele contido.


Nesse exemplo a cor vermelha foi definida para o elemento DIV. O elemento EM herdou a cor vermelha definida para seu elemento ancestral DIV. O elemento P, por ser filho de DIV também herdou a cor.
Poderíamos dizer: "A cor passou de avô para pai e de pai para filho".

Mas afinal, qual é a vantagem da herança CSS?
A grande vantagem da herança CSS reside na redução drástica da quantidade de regras de estilos que teremos que escrever diminuindo, e muito, o tamanho e tempo de carregamento da folha de estilos.

Uma marcação HTML sem uma folha de estilos a ela associada será renderizada de acordo com a folha de estilo nativa do navegador, que infelizmente varia de acordo com o navegador. Contudo algumas propriedades CSS são estilizadas nativamente de forma consistente por todos os navegadores, por exemplo, a cor dos textos é a preta, a família das fontes é a serif e o tamanho da fonte é 16px.

Se não houvesse a herança teríamos que escrever uma regra CSS para cada elemento da página, pois aqueles não contemplados por regra CSS renderizariam de acordo com a folha de estilos nativa do navegador. Observe a regra CSS a seguir.
view source
print?
1.body {
2.color: red;
3.font-family: arial, sans-serif;
4.}

O elemento body é ancestral de TODOS os elementos que renderizam em uma página web. Assim, eles herdarão do seu ancestral body a cor vermelha (red) e a fonte arial ou, alternativamente, sans-serif.

É claro que você não ficará preso à herança na sua página, pois como vimos anteriomente ao declarar uma regra CSS específica para um elemento da página ela sobrescreve (ou prevalece sobre) a herança.

Propriedades herdadas.


Considere a folha de estilo e marcação HTML mostradas a seguir.
view source
print?
1.p {border:1px solid red;}
2....
3.<p>Texto do parágrafo com um <em>elemento EM</em> nele contido.</p>

Aplicando os conceitos de herança mostrados no item anterior poderíamos afirmar que o elemento EM por ser filho de P receberá por herança uma borda vermelha, conforme mostrado a seguir.

Texto do parágrafo com um elemento EM nele contido.

Imagine que o designer do seu site previu uma borda em torno de toda a página do site e você pretende criar um DIV container para a página e definir para ele a borda prevista. TODOS os elementos da página herdariam a borda e você pode imaginar o caos e tamanho da folha de estilos se tivéssemos que retirar as bordas uma a uma de todos os elementos descendentes.

Não são todas as propriedades CSS que são herdáveis.


Felizmente, o que foi mostrado e afirmado acima não acontece na prática pelo simples fato de que nem todas as propriedades CSS se transmitem por herança.

As seguintes propriedades CSS não são herdadas pelos elementos descendentes: background, border (exceto: border-collapse e border-spacing), clip, content, counter, clue, display, float, height, left, margin, outline, overflow, padding, page-break, pause, play-during, position, right, table-layout, text-decoration, top, unicode-bidi, vertical-align, width, z-index.

Como você pode constatar na listagem mostrada a propriedade border não é herdada. Assim, o exemplo mostrado no início desse item não é real pois o elemento EM não herdará a borda definida para seu elemento-pai P.

Herança para font-size.

A herança funciona para a propriedade font-size? Sim, funciona, mas de uma maneira diferente da maneira como estudamos anteriormente. Se o valor do tamanho de fonte for definido em porcentagem ou em unidade CSS em em lugar de se tomar o valor especificado para herança, toma-se o valor calculado.

Considere a folha de estilo e marcação HTML mostradas a seguir.
view source
print?
1.p {font-size: 150%;}
2....
3.<p>Texto do parágrafo com um <em>elemento EM</em> nele contido.</p>

O tamanho da fonte para os elementos P foi especificado (valor especificado) em 150%. Mas, 150% de quê? Unidade de medida CSS expressa em porcentagem se refere à medida definida para o elemento-pai ou se não houver um elemento-pai, para o elemento ancestral mais próximo. Assim font-size: 150% significa um tamanho de fonte igual a 1,5 vezes o tamanho da fonte do elemento ancestral mais próximo (valor calculado).

Não havendo elemento ancestral com tamanho de fonte definido toma-se o tamanho de fonte padrão do elemento body que é o ancestral mais distante e por padrão, nos navegadores, esse tamanho é igual a 16px.

Assim, no nosso exemplo, o tamanho de fonte para o parágrafo será de 16px x 1,5 = 24px. Como o elemento EM é filho do págrafo, se herdar a propriedade font-size seu tamanho de fonte será 150% x 24px = 36px. nessas condições obteríamos uma renderização como mostrado a seguir.

Texto do parágrafo com um elemento EM nele contido.

Contudo não é isso que acontece. A renderização é com tamanho de fonte constante igual a 24px como mostrado a seguir.

Texto do parágrafo com um elemento EM nele contido.

Isso porque, como dissemos no início desse item, para tamanho de fonte o valor herdado é o valor calculado e não o valor especificado e nesse caso o valor calculado foi 24px.

O mesmo conceito se aplica para definição do tamanho de fonte em unidade CSS em.

Isso é tudo. É assim que funciona a herança CSS. Antes do desenvolvimento de suas folhas de estilo faça um estudo do seu projeto e tire o máximo proveito da herança CSS.[/size][/size]
Admin
Admin
Admin

Mensagens : 81
Data de inscrição : 07/01/2012
Localização : Brasilia

http://juliasilva.no.comunidades.net

Voltar ao Topo Ir em baixo

Voltar ao Topo


 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum