5. Folhas de Estilo – Seletores
de Classes
Por meio dos seletores de classe, é possível
configurar estilos diferentes no mesmo elemento
de um documento XHTML.
Por exemplo, no mesmo documento teremos
três tipos diferentes de formatação para o
parágrafo. <p>
6. Folhas de Estilo – Seletores
de Classes
Colocamos a estrutura do CSS dessa forma:
.p1{
font-family:verdana;
background-color:#ffdead;
color:gray;
text-align:center;
width:500px;
} .p1{
font-family:verdana;
background-color:#ffdead;
color:blue;
text-align:left;
width:500px;
}
7. Folhas de Estilo – Seletores
de Classes
Colocamos a estrutura do CSS dessa forma:
.p3{
font-family:arial;
background-color:#ffdead;
color:red;
text-align:center;
width:500px;
}
No HTML deve ser colocado dentro da tag <p> e outra tag pode
utilizar as mesmas características de uma classe
<p class=“p1”>texto</p>
<p class=“p2”>texto</p>
<p class=“p3”>texto</p>
<h2 class=“p1”>texto</p>
<p class=“p2”> outro p com as características da classe p2</p>
8. Folhas de Estilo – Seletor de
id
Ao contrário do seletor de classe, o seletor de id é
aplicado a um único elemento, pois os valores do
atributo id não podem aparecer mais de uma vez em
uma página.
Colocamos a estrutura da Folha de Estilo dessa forma:
#p1{
font-family:verdana;
font-size:15px;
color:red;
text-align:center;
}
9. Folhas de Estilo – Seletor de
id
#p2{
font-family:arial;
font-size:20px;
color:blue;
text-align:left;
}
No HTML, chamamos o id da seguinte forma:
<p id=“p1”> texto</p>
<p id=“p2”>texto</p>
10. Dimensionando elementos e
margens
Atributos Valores Definição
height Auto, porcentagem ou
o valor desejado
Altura do elemento
width Altura, porcentagem
ou valor desejado do
comprimento
Largura do elemento
margin-top Valor desejado para a
margem
Margem superior do
elemento
margin-right Valor desejado para a
margem
Margem à direita do
elemento
margin-left Valor desejado para a
margem
Margem à esquerda
elemento
margin-bottom Valor desejado para a
margem
Margem inferior do
elemento
11. Mais sobre bordas
border-width:thin;
border-width:medium;
border-width:thick;
border-top-width:2px;
border-right-width:3px;
border-bottom-width:4px;
border-left-width:5px;
12. TABLELESS
Tableless é o nome atribuído à metodologia de
construção de sites sem o uso de tabelas.
Utiliza-se o XHTML para determinar a estrutura
de dados e as folhas de estilo CSS para a
formatação e exibição dos mesmos.
13. TABLELESS
Camada absoluta
Fica sobre a página, para determinar o
posicionamento da camada absoluta é
necessário atribuir o posicionamento absolute
em position e as quatro propriedades cujo
posicionamento é absoluto: bottom, top, left e
right.
14. TABLELESS
z- index: empilhamento de
camadas, você pode colocar uma
camada em cima da outra.
Quanto maior o valor do atributo
z-index, maior a prioridade de
visualização do elemento.