Joomla! Amazônia – Seu site de tutorial e curso de Joomla

Manchetes:
Você está aqui: CSS Múltiplas declarações e seletores - CSS

Múltiplas declarações e seletores - CSS

cssVárias declarações de estilo podem ser aplicadas de uma vez a um seletor. As declarações, então, precisam ser separadas por ponto-e-vírgula (;) :

h1 {
font-size: 18pt; color: blue; font-family: Caslon, serif;
}

body  {
background : navy; color : white;
}

Os espaços em branco (espaços, novas-linhas e tabulações) são ignorados pelo browser na hora de interpretar uma folha de estilos e podem ser usados para melhorar a sua legibilidade. As duas linhas acima ficariam mais legíveis da forma:

body {
background : navy;
color : white;
}

h1 {
color: blue;
font-size: 18pt;
font-family: Caslon, serif;
}

Uma declaração só termina com uma fecha-chaves (}) ou com um ponto-e-vírgula (;).Dependendo da propriedade, esta pode ter vários valores separados por vírgulas ou valores compostos com as palavras separadas por espaços:

p {
font: 12pt "Times New Roman" bold;
}
h2 {
font-family: Arial, Helvetica, Sans-serif;
}

As aspas devem ser usadas quando uma palavra que tem espaços precisar ser usada. No exemplo acima, o nome "Times New Roman" deveria ser tratado como o nome de uma fonte distinta, e não como três valores, o que ocorreria se as aspas não estivessem presentes.

Assim como um seletor pode ter várias propriedades definidas para ele, um mesmo conjunto de propriedades pode ser aplicada a um grupo de seletores, separando-os com vírgulas:

h1, h2, h3 {
color: blue;
font-size: 18pt;
font-family: Arial, Helvetica, Sans-serif;
}

As declarações de estilo podem ser aplicadas em quase qualquer descritor HTML - no mundo perfeito! Na prática, muitos browsers ainda têm problemas de compatibilidade, e não implementam a especificação à risca, como veremos adiante.

Ao utilizar folhas de estilo, deve-se respeitar os elementos HTML que possuem descritores finais freqüentemente ignorados, como </p>, </li>, etc. A falta do </p> pode causar o "vazamento" das declarações de estilo para fora do parágrafo em alguns browsers.

< Anterior   Próximo >