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 m...
Folhas de Estilo – Seletores 
de Classes 
Colocamos a estrutura do CSS dessa forma: 
.p1{ 
font-family:verdana; 
backgroun...
Folhas de Estilo – Seletores 
de Classes 
Colocamos a estrutura do CSS dessa forma: 
.p3{ 
font-family:arial; 
background-...
Folhas de Estilo – Seletor de 
id 
Ao contrário do seletor de classe, o seletor de id é 
aplicado a um único elemento, poi...
Folhas de Estilo – Seletor de 
id 
#p2{ 
font-family:arial; 
font-size:20px; 
color:blue; 
text-align:left; 
} 
No HTML, c...
Dimensionando elementos e 
margens 
Atributos Valores Definição 
height Auto, porcentagem ou 
o valor desejado 
Altura do ...
Mais sobre bordas 
 border-width:thin; 
 border-width:medium; 
 border-width:thick; 
 border-top-width:2px; 
 border-...
TABLELESS 
Tableless é o nome atribuído à metodologia de 
construção de sites sem o uso de tabelas. 
Utiliza-se o XHTML pa...
TABLELESS 
Camada absoluta 
Fica sobre a página, para determinar o 
posicionamento da camada absoluta é 
necessário atribu...
TABLELESS 
 z- index: empilhamento de 
camadas, você pode colocar uma 
camada em cima da outra. 
 Quanto maior o valor d...
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:wh...
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> 
<...
TABLELESS 
<div id="camada1">CAMADA1</div> 
<div id="camada2">CAMADA2</div> 
<div id="camada3“>CAMADA3</div> 
</body> 
</h...
TABLELESS
Próximos SlideShares
Carregando em…5
×

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

248 visualizações

Publicada em

Curso de Design, Anhanguera unidade Brigadeiro

Publicada em: Design
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
248
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
6
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

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

  1. 1. Técnicas e processos de produção Profº Ritielle Souza
  2. 2. Interface - Dreamweaver
  3. 3. Interface - Dreamweaver Modo código
  4. 4. Interface - Dreamweaver
  5. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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.
  15. 15. TABLELESS #camada1{ position:absolute; top:100px; left:50px; width:170px; height:100px; background-color:#99ccff;
  16. 16. TABLELESS border:2px solid ccff99; font-style:italic; z-index:1; }
  17. 17. TABLELESS #camada2{ position:absolute; top:150px; left:100px; width:170px;
  18. 18. TABLELESS height:100px; background-color:red; border:2px solid yellow; text-align:center; font-weight:bold; color:white;
  19. 19. TABLELESS font-style:italic; z-index:2; }
  20. 20. TABLELESS #camada3{ position:absolute; top:200px; left:250px; width:170px; height:100px;
  21. 21. TABLELESS text-align:center; font-weight:bold; color:white; font-style:italic; z-index:3; }
  22. 22. TABLELESS  Salve esse arquivo como camadas.css  Crie o arquivo exercício_camadas.html e coloque o código abaixo
  23. 23. TABLELESS <html> <head> <title>Camadas</title> <link rel="stylesheet" href="camadas.css" type="text/css"> </head> <body>
  24. 24. TABLELESS <div id="camada1">CAMADA1</div> <div id="camada2">CAMADA2</div> <div id="camada3“>CAMADA3</div> </body> </html>
  25. 25. TABLELESS

×