Cascading Style Sheets

CSS. Cascading Style Sheets. Porque é que eles chamado?

Este é um tutorial sobre o modo como a parte em cascata do CSS trabalha, e como trabalhar com várias classes.

A principal coisa a lembrar é a regra básica trombeta. Qualquer recém-definido propriedades sobrescrever quaisquer propriedades definidas anteriormente. Exemplo:

  p (color: red;) 
  p (color: blue;) 

Após estas duas afirmações em um estilo acabará por resultar na <p> etiqueta com texto azul. Lembrando este princípio básico de "sobreposição" irá mantê-lo no caminho certo. Aqui o mundo real exemplo disto:

 CSS: 

  . Class1 (font-size: 12px; color: # 00ccff; font-weight: bold) 

  . class2 (color: # 800080; text-decoration: underline) 

 HTML: 
   <span class = "class1"> Algo como isso seria bom para <span class = "class2"> enfatizar </ span> 
  importância em uma frase </ span> 

E veja como ele olha: Algo como isso seria bom para enfatizar a importância de uma frase

Não olhando coisa mais bonitas do mundo, mas isso faz toda a ponto. O tamanho da fonte e do tipo de letra peso permanece constante. A cor é substituído quando o "class2" tag é executado, e sublinhar a nova propriedade adicionada como está bem.

Agora um exemplo do uso de múltiplas classes em uma única etiqueta. Para simplificar, vou usar as mesmas tags.

 HTML: 

  <p> Desta vez, estamos utilizando um padrão tipo de letra, e em vez quero enfatizar 
  <span style = "class1 class2"> este ponto </ span> e <span style = "class2 class1"> 
  Neste ponto </ span> tão bem. </ p> 

Veja como ele olha: Desta vez, estamos utilizando um padrão tipo de letra, e em vez quero enfatizar este ponto e este ponto também.

Notar a diferença, e lembre-se da regra básica trombeta. A única propriedade semelhante em ambas as classes é a cor, então o que é o último listado é a única que será mostrado.

Existem algumas tags e regras avançadas que podem modificar a regra básica trombeta, e vou postar sobre esses amanhã.

Stumble it!

Post Info

Esta entrada foi postada no sábado, 22 de dezembro de 2007 e é arquivada sob css, design. Possui 75 visualizações

Tags: css, layout, dicas

Comentários Feed. | Deixe comentário | Deixe Trackback.

Anteriores Postar: Android do Google Phone Live! »
Próximo Post: Blog do Rush »

Mais vistos lugares