Entendendo hierarquia de classes em Css (iniciante 1)

Olá, amigos webianos.

Vou explicar neste artigo conceitos basicos de hierarquia e implementação para um bom e produtivo desenvolvimento tableless.

Porque devo utilizar um Css?

Utilizando css você terá os seguintes beneficios:

  • Facilidade de manutenção
  • Paginas mais legiveis para sistemas de busca
  • Paginas mais leves e rapidas
  • Reutilização de codigo
  • Facilidade para programar
  • Facilidade ao trabalhar com equipes segmentadas (front e back end), desenvolvimento simultaneo e paralelo

Quais os atributos/propriedades style mais utilizados?

  • color: Black; utilizado para especificar cor do texto.
  • text-align: right; para alinhar o texto.
  • font-size: medium; para definir o tamanho do texto.
  • width: 120px; para definir a largura da tag.
  • height: 50px; para definir a altura da tag.
  • margin: 10px 5px 7px 15pxright bottom left; para colocar margem de “fora” do elemento. o primeiro valor (10px) é para Topo(lado superior), o segundo (5px) para lado direito, o terceiro(7px) para lado inferior e o quarto(15px) para lado esquerdo.
  • padding: 10px 5px 7px 15pxright bottom left; para colocar margem de “dentro” do elemento. o primeiro valor (10px) é para Topo(lado superior), o segundo (5px) para lado direito, o terceiro(7px) para lado inferior e o quarto(15px) para lado esquerdo.
  • font-weight: bold; para colocar o texto em negrito.
  • float: left; para definir a flutuação da tag dentro da pagina.

Quais as diferentes formas de implementar uma classe nas tags?

Para especificar qual classe aquela tag irá herdar usamos:

  1. Definição de tag: Você tem que colocar o nome da tag que usará, abaixo um exemplo onde todas as imagens (tag img) ficarão com largura 50px e altura de 30px;
    <style>
    img {
    width:50px;
    height:30px;

    }
    </style>
    <img src=”http://www.sumata.com.br/sexshop/images/logo.gif&#8221; alt=”Logomarca do site sumata”/>
    No exemplo acima eu usei a tag img, mas vc pode usar qualquer tag visivel(dentro do body) até mesmo a tag BODY, span, div, table,tr,td, ul, il, ol… etc
    Usamos esta forma de implementação ao iniciar sua arquitetura html, pois aqui vc defini o que será padrão e uniformizado em todo seu site.
  2. Identificador de tag: Aqui voce poderá atribuir propriedades especificas para uma unica tag por pagina. No exemplo abaixo, temos duas classes, uma definindo o tamanho de todas as imagens e outra especificando uma determinada tag, que tambem vou utilizar uma imagem para vc entender a questão de hierarquia e prioridade dos tipos de implementação.
    <style>
    img {
    width:50px;
    height:30px;
    }
    #logomarca {
    width:232px;
    height:51px;}
    </style>
    classe por tag: <img src=”http://www.sumata.com.br/sexshop/images/logo.gif&#8221; alt=”Logomarca do site sumata classe por tag”/>
    <br/>
    classe por id: <img id=”logomarca” src=”http://www.sumata.com.br/sexshop/images/logo.gif&#8221; alt=”Logomarca do site sumata classe por id”/>Observe que as duas possuem tag “img”, mas a segunda faz uma sobrecarga de propriedade pois está especificada por um id unico. Assim é notavel que as implementações por ID tem preferencia sobre as implementações por tag. Porém cuidado, este tipo de implementação por ID so pode ser usado por uma unica tag na pagina.
    Nota Mestre: Se estiver usando elemento server=runat no asp.net o proprio Runat irá criar os IDS das tags, assim vc tem que olhar o id gerado pelo .net no codigo fonte html resultante no browser para vc saber o id correto.
  3. Especificação de classe: Como poderiamos sobrecarregar duas imagens com as mesmas propriedade de “#logomarca” ?
    Res.: Usando espeficição de classe na tag, sem usar o ID.
    Observe abaixo, que na criação da classe usamos “.” (ponto) e não “#” tralha. Assim vc poderá reutilizar este quantas vezes quiser.
    <style>

    img {
    width:50px;
    height:30px;
    }
    #logomarca {
    width:232px;
    height:51px;
    }
    .fotopequena {
    width:58px;
    height:60px;
    }
    </style>
    classe por tag: <img src=”http://www.sumata.com.br/sexshop/images/logo.gif&#8221; alt=”Logomarca do site sumata classe por tag”/>
    <br/>
    classe por id: <img id=”logomarca” src=”http://www.sumata.com.br/sexshop/images/logo.gif&#8221; alt=”Logomarca do site sumata classe por id”/>
    <br/>
    Classe por especificação:
    <img class=”fotopequena” src=”https://webmaicon.files.wordpress.com/2010/11/site-imobiliaria-top-negocios-detalhes.png&#8221; alt=”Logomarca do site sumata classe por especificação 1″/>
    <img class=”fotopequena” src=”https://webmaicon.files.wordpress.com/2010/11/site-imobiliaria-top-negocios-detalhes.png&#8221; alt=”Logomarca do site sumata classe por especificação 2″ />

E agora? como fica a prioridade de hierarquia: definição, identificador ou especificação?

  • 1ª nivel: identificador – sobrecarrega todos os demais, é a prioridade maxima.
  • 2ª nivel: espeficicação – sobrecarga apenas sobre o tipo “definição” (3ª nivel),  intermediaria.
  • 3ª nivel: definição – comum, generica e geral.

Assim se vc colocar id=”#logomarca” e class=”fotopequena”, o browser ira sobrecarregar os atributos de  id=”#logomarca” sobre os atributos repetidos de class=”fotopequena”.

Teste e veja você mesmo:
<img class=”fotopequena” src=”https://webmaicon.files.wordpress.com/2010/11/site-imobiliaria-top-negocios-detalhes.png&#8221; alt=”Logomarca do site com class”/>
<img id=”logomarca” class=”fotopequena” src=”https://webmaicon.files.wordpress.com/2010/11/site-imobiliaria-top-negocios-detalhes.png&#8221; alt=”Logomarca do site  com id e class” />

GOSTOU? Comente e indique para seus amigos…. 🙂

DUVIDAS? mande seu comentário abaixo perguntando sua dúvida.

Espero ter ajudado… em breve vou fazer outro artigo sobre css com mais exemplos e dicas.

Abraços…

CODIGO FONTE COMPLETO DOS TESTES:
<html>
<head>
<style>
img {
width:50px;
height:30px;
}
#logomarca {
width:232px;
height:51px;
}
.fotopequena {
width:58px;
height:60px;
}
</style>
</head>
<body>
classe por tag: <img src=”http://www.sumata.com.br/sexshop/images/logo.gif&#8221; alt=”Logomarca do site sumata classe por tag”/>
<br/>
classe por id: <img id=”logomarca” src=”http://www.sumata.com.br/sexshop/images/logo.gif&#8221; alt=”Logomarca do site sumata classe por id”/>
<br/><br/>

Classe por especificação:
<img src=”https://webmaicon.files.wordpress.com/2010/11/site-imobiliaria-top-negocios-detalhes.png&#8221; alt=”Logomarca do site sumata classe por especificação 1″/>
<img src=”https://webmaicon.files.wordpress.com/2010/11/site-imobiliaria-top-negocios-detalhes.png&#8221; alt=”Logomarca do site sumata classe por especificação 2″ />

<br/><br/>

Classe por especificação + id:

<img src=”https://webmaicon.files.wordpress.com/2010/11/site-imobiliaria-top-negocios-detalhes.png&#8221; alt=”Logomarca do site com class”/>
<img id=”logomarca” src=”https://webmaicon.files.wordpress.com/2010/11/site-imobiliaria-top-negocios-detalhes.png&#8221; alt=”Logomarca do site com id e class” />

</body>

</html>

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s