Css Contextual… será que isso morde ????

.formulario h2 {
color:#FF0000;
}

.texto_principal h2 {
color:#0000FF;
}

Você já escreveu um css contextual ???

Bom pessoal, css contextual não é só você usar um monte de Divs com várias classes, ou usando o Id do objeto para definir seu comportamento visual no navegador.

Um css contextual é quando você se utiliza as mesmas tags html para obter comportamentos visuais diferentes, dependendo do seu “Pai”, vamos a um exemplo mais prático.

quando definimos um css como o que está abaixo.

.formulario h2 {
color:#FF0000
}

.texto_principal h2 {
color:#0000FF
}

Nesse exemplo acima, estamos definindo a mesma Tag (nesse caso h2) duas vezes, e cada uma com comportamento diferentes, ai vem a pergunta mágica, como o navegar vais saber qual ele deve renderizar… e a resposta é mais simples ainda, vai depender do contexto, vai depender dentro de qual Tag o h2 vai se encontrar, vou dar um outro exemplo.

<div class="formulario" >
<h2>Título Formulário</h2>
</div>

<div class="texto_principal">
<h2> Título do Texto Principal </h2>
</div>

Bom pessoal dessa forma não necessitamos ficar escrevendo inúmeras classes para definir os comportamentos, porem teremos que pensar antes de montar uma arquitetura, pois se você tentar sair montando você vai ter muitas dores de cabeça, você deve definir sobre quais Tags e onde deve usá-las, no começo pode parecer difícil, mas é uma das coisas que você depois que aprende, que se acostuma, não consegue viver sem.

Pessoal, por hoje é isso ai, vou tentar escrever algo mais profundo sobre esse assunto depois.

abs – Rafael Martins.


4 Comentários on “Css Contextual… será que isso morde ????”

  1. Diego disse:

    tente colocar o resultado final mesmo que como imagem.

    it’s live!!!

  2. philsouza disse:

    Isso é até uma dica para editores inexperientes de css do wordpress. A maioria já viu o básico do css, mas a parte contextual realmente eles podem se perder. Principalmente os sem muita lógica…

  3. pode deixar diego, vou colocar as imagens e da próxima vez não erro ;-).

    abs – rafael

  4. Diego disse:

    naum foi erro, é so uma maneira de melhorar.

    abs


Deixe um comentário

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 )

Foto do Google

Você está comentando utilizando sua conta Google. 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 )

Conectando a %s