Efeito
Cascata e Herança:
“O Efeito Cascata do CSS é controlado pela especificidade e pela herança
das propriedades.” (EIS, Diego) http://tableless.com.br
O CSS (Cascading Style
Sheet), já nos sugere através de seu nome, que o código e suas folhas são no estilo
cascata, mas o que isso significa?
O Estilo Cascata é uma forma
de organização de todo o código CSS, uma parte importante do Estilo Cascata é a
Herança de seus elementos. Essa
forma de organização divide os elementos em dois tipos: ‘elementos pai’ e
‘elementos filhos’, de forma que, ao dar determinada característica para algum
elemento, outros elementos que dependem deste primeiro herdarão essa
característica, dessa forma você poupa tempo e não tem a necessidade de ficar
procurando vários elementos espalhados pelo código quando quiser fazer alguma
alteração específica no estilo do seu site.
Exemplo:
div{
color: red;
}
/*Foi
criada uma div e lhe atribuí a cor vermelha, no HTML eu incluí um texto dentro
de uma tag <p> que foi inserida dentro da <div>. Automaticamente
esse texto adquiriu a cor vermelha, este fato decorreu da herança de
propriedade do CSS.*/
Exemplo
prático:
Veja no html:
Veja no CSS:
Resultado na tela do navegador:
Mas existem também
propriedades que não são herdadas pelos filhos, geralmente são propriedades que
estão relacionadas a formatação de caixa, por exemplo: height, width,
margin, padding e por aí vai.
Especificidade:
A especificidade define os detalhes dos elementos, por exemplo, ao
definir no body as propriedades font-family,
font-size e font-color, essas propriedades são herdadas por todos
os elementos do arquivo. Com isso o texto ficará padronizado, entretanto,
suponhamos que você queira diferenciar em algum aspecto algumas palavras que
estão em ênfase no seu texto, a especificidade entra aí.
Exemplo:
No documento html eu adicionei uma passagem do grande texto
“Lorem Ipsum”, decidi enfatizar algumas palavras que são cognatas do nosso português.
Utilizando somente o <em>,
as palavras que estiverem dentro dele aparecerão em itálico.
Usei então o CSS para especificar que as palavras que
estiverem entre a tag <em> terão o background amarelo.
Resultado: Além de ter ficado em itálico, as palavras
ainda ficaram com um efeito de marca-texto, algo mais detalhado que o
convencional. A especificidade está aqui pra adicionar detalhes singelos, mas
que gerem boas alterações visuais na página, em muitos casos isso facilitem a
leitura.
Link e @import:
A tag link e o @import são duas formas distintas que
tem o mesmo objetivo: carregar um estilo css para uma ou mais páginas de um
site.
Esses dois métodos, embora tenham a mesma finalidade, não têm
as mesmas vantagens.
Link: A tag link do HTML vai dentro da tag
<head> e é melhor interpretada
pelos browsers e isso gera maior um desempenho.
Exemplo
de sintaxe:
<head>
<link rel=”stylesheet” type=”text/css” a href=”estilo.css”>
</head>
@import: Diferente do link, é um código CSS e
deve ser colocado entre as tags <style>
que vão dentro do <head> do seu
documento HTML, dessa forma, o CSS é inserido de forma embutida, embora esteja
em um arquivo externo, para cada página é necessário criar um @import.
Exemplo de sintaxe:
<head>
<style>
@import url(estilo.css);
</style>
</head>
Fonte de
pesquisa: http://www.tableless.com.br
0 comentários:
Postar um comentário