Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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...
Nächste SlideShare
Wird geladen in …5
×

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

246 Aufrufe

Veröffentlicht am

Curso Design

Veröffentlicht in: Design
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

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>

×