Técnicas e
processos de
produção
Profº Ritielle Souza
Interface - Dreamweaver
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>
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;
}
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>
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;
}
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>
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>
TABLELESS
Download
