Técnicas e processos 
de produção 
Profº Ritielle Souza
Folhas de Estilo - CSS 
Existem três formas de trabalharmos com 
folhas de estilos 
Forma mais usual – CSS Externo 
Esti...
Sintaxe CSS – Folha de Estilo 
• Regra CSS é a unidade básica de uma folha de 
estilo. Uma regra CSS é composta de duas 
p...
Sintaxe CSS – Folha de Estilo 
• seletor{propriedade:valor} 
declaração 
REGRA CSS 
p{ 
color:#000000; 
background-color:#...
Comentários em CSS 
• /*Este é um comentário em linha*/ 
Bloco de comentário 
• /*Este é um bloco de comentários em linhas...
Formatação de Texto 
Atributos Valor Definição 
color Valor em hexadecimal 
ou nome da cor 
Cor do texto 
font-family Nome...
Endereço absoluto e relativo 
Os endereços são os caminhos que usamos para vincular os arquivos e 
páginas. 
Estrutura de ...
Endereço absoluto e relativo 
Estrutura de 
arquivos
TAG IMG 
Tag img permite inserir imagens em seu arquivo. 
PARAMETRO: SRC=“caminho” 
APLICAÇÃO: 
<img src=“imagem.jpg” /> 
...
SITE MODELO 
TREINANDO O CÓDIGO DURANTE A AULA. 
Encontrar uma imagem no Google Imagens para usar de 
background do seu si...
Folha de Estilo – Estilo na Página 
<html> 
<head> 
<title> Folhas de Estilo</title> 
<style type=“text/css”> 
body{ 
font...
Folhas de Estilo – Estilo na página 
h1{ 
font-size:25px; 
font-family:arial; 
color:white; 
text-align:center; 
text-deco...
FOLHAS DE ESTILO – ESTILO NA PÁGINA 
a:link{ 
font-size:15px; 
font-family:verdana; 
color:orange; 
text-decoration:none;/...
FOLHAS DE ESTILO – ESTILO NA PÁGINA 
a:hover{ 
text-align:center; 
border-color:orange; 
border-style:solid; 
background-i...
FOLHAS DE ESTILO – ESTILO NA PÁGINA 
<body> 
Testando estilo para a tag body 
<h1> Testando estilo para tag h1</h1> 
<a hr...
Próximos SlideShares
Carregando em…5
×

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

328 visualizações

Publicada em

Curso Design - Anhanguera Unidade Brigadeiro

Publicada em: Design
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

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>

×