| Sintaxe da classe do CSS
|
|
Usando um ponto (.) seguido pelo nome da classe, voc� declara uma classe do CSS. Voc� comp�e o nome da classe voc� mesmo. Se voc� quiser incorporar as propriedades/valores a sua classe, voc� pode atribui-la ap�s o nome da classe.
|
|
.class-name { property:value; }
|
|
|
Voc� pode prefixar o ponto com o nome do elemento do HTML se voc� quiser usar o mesmo nome da classe para elementos m�ltiplos, mas cada um com um estilo diferente.
|
|
html-element-name.class-name { property:value; }
|
|
|
Voc� poderia definir classes da folha do estilo para cada um, se voc� quisesse um par�grafo roxo da pia batismal e um par�grafo azul da pia batismal.
|
.purple {
font-family: verdana, arial, helvetica, sans-serif;
size: 12pt;
color: #003399;
}
.blue {
font-family: verdana, arial, helvetica, sans-serif;
size: 12pt;
color: #663399;
}
|
|
|
Aplicar ent�o isto aos par�grafos diferentes usando-se depois do c�digo:
|
<p
class="purple">The
purple paragraph text
will go here.</p>
<p
class="blue">The
blue paragraph
text will go
here.</p>
|
|
| O Tag do <span>
|
|
Usando o Tag do <span>, voc� pode tamb�m aplicar este �s se��es do HTML como esta: |
|
<p
class="purple">This
text will be purple
until you get to
<span
class="blue">these
words, which are
blue</span> and
then the text
carries on being
purple.</p>
|
|
|
Se voc� desejar indicar o c�digo em um diferente colorir dependendo de sua l�ngua:
|
code.html { color: #4b0082 }
code.css { color: #191970 }
|
|
|
Por exemplo, usando o class~= " pastoral ", n�s podemos atribuir a informa��o do estilo a todos os elementos como segue:
|
|
*.pastoral { color: green } /* all elements with class~=pastoral */
|
|
| O seguinte atribui o estilo somente aos elementos H2 com o class~= " pastoral ":
|
|
H2.pastoral { color: green } /* H1 elements with class~=pastoral */
|
|
| Dado estas r�guas, o primeiro exemplo H2 abaixo n�o teria o texto verde, quando o segundo:
|
<H2>Not green</H2>
<H2 class="pastoral">Very green</H2>
|
|
|
Sem um elemento associado, voc� pode declarar classes como segue:
|
|
.note { font-size: small }
|
|
| Exemplo da classe do CSS
|
<head>
<style type="text/css">
h1.css-section { color:#999999;}
p.css-section { color:#000099; }
</style>
</head>
<body>
<h1 class="css-section">CSS Class</h1>
<p class="css-section">CSS classes can be very useful</p>
</body>
|
|
|
|
|
Classe do CSS
As classes do CSS podem ser muito �teis
|
|
