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

317 visualizações

Publicada em

Curso 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
317
No SlideShare
0
A partir de incorporações
0
Número de incorporações
4
Ações
Compartilhamentos
0
Downloads
3
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

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

  1. 1. Técnicas e processos de produção Profº Ritielle Souza
  2. 2. Folhas de Estilo - CSS Existem três formas de trabalharmos com folhas de estilos Forma mais usual – CSS Externo Estilo na página <style> Forma menos usual – estilo inline
  3. 3. Sintaxe CSS – Folha de Estilo • Regra CSS é a unidade básica de uma folha de estilo. Uma regra CSS é composta de duas partes: o seletor e a declaração. A declaração compreende uma propriedade e um valor.
  4. 4. Sintaxe CSS – Folha de Estilo • seletor{propriedade:valor} declaração REGRA CSS p{ color:#000000; background-color:#ff0000; font-style:italic; text-align:right; font-family:tahoma; }
  5. 5. Comentários em CSS • /*Este é um comentário em linha*/ Bloco de comentário • /*Este é um bloco de comentários em linhas diferentes contendo muitas informações sobre um trecho da folha de estilos*/
  6. 6. Formatação de Texto Atributos Valor Definição color Valor em hexadecimal ou nome da cor Cor do texto font-family Nome da fonte Tipo da Fonte font-size Valor referente ao tamanho Tamanho da fonte font-weight Normal, bold Estilos de negrito font-style Normal, oblique ou itálico Estilo do texto text-align Left, center, right ou justify Ajuste do alinhamento do texto text-decoration Underline, overline Decoração do texto
  7. 7. Endereço absoluto e relativo Os endereços são os caminhos que usamos para vincular os arquivos e páginas. Estrutura de arquivos
  8. 8. Endereço absoluto e relativo Estrutura de arquivos
  9. 9. TAG IMG Tag img permite inserir imagens em seu arquivo. PARAMETRO: SRC=“caminho” APLICAÇÃO: <img src=“imagem.jpg” /> Caminho relativo <img src=“E:ACADEMICOUNIBEROFerramentas programaveisimagem.jpg” /> Caminho absoluto <img src=“http://site.com.br/imagem.jpg” /> Caminho absoluto
  10. 10. SITE MODELO TREINANDO O CÓDIGO DURANTE A AULA. Encontrar uma imagem no Google Imagens para usar de background do seu site.
  11. 11. Folha de Estilo – Estilo na Página <html> <head> <title> Folhas de Estilo</title> <style type=“text/css”> body{ font-size:20px; font-family:verdana; color:#ff0000; background-color:#fcfccc; font-weight:bold; font-style:italic; background-image:url("imagens/porsche01.jpg"); background-repeat:no-repeat; background-position:center right; background-attachment:fixed; */bgproperties do html*/ }
  12. 12. Folhas de Estilo – Estilo na página h1{ font-size:25px; font-family:arial; color:white; text-align:center; text-decoration:none; background-color:blue; width:400px; } h2{ font-size:18px; font-family:verdana; text-decoration:underline; color:#FFE4B5; text-align:center; word-spacing:5px; }
  13. 13. FOLHAS DE ESTILO – ESTILO NA PÁGINA a:link{ font-size:15px; font-family:verdana; color:orange; text-decoration:none;/*link sem sublinhado*/ width:200px; background-color:black; display:block;/*exibe o conteúdo em bloco*/ } a:visited{ font-size:15px; font-family:verdana; color:orange; text-decoration:none;/*link sem sublinhado*/ width:200px; background-color:black; display:block; }
  14. 14. FOLHAS DE ESTILO – ESTILO NA PÁGINA a:hover{ text-align:center; border-color:orange; border-style:solid; background-image:url("imagens/fundo08.jpg"); } h3{ font-size:25px; font-family:tahoma; color:#ff8fcf; text-align:center; } </style>
  15. 15. FOLHAS DE ESTILO – ESTILO NA PÁGINA <body> Testando estilo para a tag body <h1> Testando estilo para tag h1</h1> <a href="#">Hiperlink1</a> <a href="#">Hiperlink2</a> <a href="#">Hiperlink3</a> <a href="#">Hiperlink4</a> <a href="#">Hiperlink5</a> <a href="#">Hiperlink6</a> <h2> Testando estilo para a tag h2</h2> <h3>Testando estilo para a tag h3</h3> </body> </html>

×