Embed Size (px)
Citation preview
Técnicas e processos de
produção
Profº Ritielle Souza
Interface - Dreamweaver
Interface - Dreamweaver
Modo código
Interface - Dreamweaver
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>
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>
TABLELESS
