Técnicas e processos - HTML / CSS - aula 5

Técnicas e
processos de
produção
Profº Ritielle Souza

Interface - Dreamweaver
Modo código

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>

de Classes
Colocamos a estrutura do CSS dessa forma:
.p1{
font-family:verdana;
background-color:#ffdead;
color:gray;
text-align:center;
width:500px;
} .p1{
color:blue;
text-align:left;
width:500px;
}

de Classes
Colocamos a estrutura do CSS dessa forma:
.p3{
font-family:arial;
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>
<h2 class=“p1”>texto</p>
<p class=“p2”> outro p com as características da classe p2</p>

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-size:15px;
color:red;
text-align:center;
}

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>

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

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;

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.

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.

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.

TABLELESS
#camada1{
position:absolute;
top:100px;
left:50px;
width:170px;
height:100px;
background-color:#99ccff;

TABLELESS
border:2px solid ccff99;
font-style:italic;
z-index:1;
}

TABLELESS
#camada2{
position:absolute;
top:150px;
left:100px;
width:170px;

TABLELESS
height:100px;
background-color:red;
border:2px solid yellow;
text-align:center;
font-weight:bold;
color:white;

TABLELESS
font-style:italic;
z-index:2;
}

TABLELESS
#camada3{
position:absolute;
top:200px;
left:250px;
width:170px;
height:100px;

TABLELESS
text-align:center;
font-weight:bold;
color:white;
font-style:italic;
z-index:3;
}

TABLELESS
 Salve esse arquivo como
camadas.css
 Crie o arquivo
exercício_camadas.html e
coloque o código abaixo

TABLELESS
<html>
<head>
<title>Camadas</title>
<link rel="stylesheet"
href="camadas.css" type="text/css">
</head>
<body>

TABLELESS
<div id="camada1">CAMADA1</div>
<div id="camada2">CAMADA2</div>
<div id="camada3“>CAMADA3</div>
</body>
</html>

Técnicas e processos - HTML / CSS - aula 5

Mais conteúdo relacionado

Mais procurados

Semelhante a Técnicas e processos - HTML / CSS - aula 5

Técnicas e processos - HTML / CSS - aula 5