Your SlideShare is downloading. ×
0
Tecnologias para Internet
Prof.º Thyago MaiaProf.  Thyago Maia
Gestão da TI – 2013.2
Aula 3: Folhas de Estilo
Objetivos
• Introduzir o conceito de folhas de estilo
• Apresentar alguns recursos da p g
tecnolo...
Introdução ao CSSIntrodução ao CSS
Introdução ao CSSç
Folha de Estilo
A partir do HTML 4.0, toda formatação de uma 
página HTML pode ser definida em uma folh...
Introdução ao CSSç
• O que é CSS?
Sigla para Cascading Style Sheets;g p g y ;
Estilos definem como os elementos HTML serão...
Arquitetura de Sistemas Web
• Qual camada o CSS se enquadra?  
6
Arquitetura de Sistemas Web
• Qual camada o CSS se enquadra?  
7
Introdução ao CSSç
• Sintaxe CSS
Uma regra CSS possui duas partes: Um seletor e g p p
uma ou mais declarações;
h1 S l th1
...
Introdução ao CSSç
• Tag usada em um documento HTML para 
referenciar um arquivo CSS:q
<link rel=“stylesheet” type=“text/c...
Algumas propriedades CSSAlgumas propriedades CSS
Algumas propriedades CSSg p p
A propriedade Background
Utilizada para definir efeitos de fundo em um p
elemento CSS;
Algun...
Algumas propriedades CSSg p p
Formatação de texto com CSS
Utilizamos a propriedade color para setar uma p p p
cor no texto...
Algumas propriedades CSSg p p
Alinhamento de texto com CSS
Utilizamos a propriedade text‐align para definir o 
alinhamento...
Algumas propriedades CSSg p p
Decoração de textos com CSS
A propriedade text‐decoration é usada para setarp p p
ou remover...
Algumas propriedades CSSg p p
Transformações de textos
A propriedade text‐transform é usada para p p p
manter textos em ca...
Algumas propriedades CSSg p p
Indentação
A propriedade text‐indent é usada para p p p
especificar a indentação da primeira...
Algumas propriedades CSSg p p
Tipos de Fonte
A propriedade font‐family é usada para setar o p p y p
tipo de fonte a ser ut...
Algumas propriedades CSSg p p
Estilos de Fonte
A propriedade font‐style é usada para definir o p p y p
estilo de fonte a s...
Algumas propriedades CSSg p p
Tamanho de Fonte
A propriedade font‐size seta o tamanho do texto;p p ;
p
{
font-size: 40px;
...
Algumas propriedades CSSg p p
Largura e altura de um elemento
As propriedades width e height (largura e altura) p p g ( g ...
Algumas propriedades CSSg p p
Bordas
Através da propriedade border (borda) podemos p p ( ) p
inserir bordas em elementos C...
Algumas propriedades CSSg p p
Margens
Através da propriedade margin podemos inserir p p g p
margens em elementos CSS;
#exe...
Algumas propriedades CSSg p p
Padding
A propriedade padding define o espaço entre a p p p g p ç
borda de um elemento e seu...
Introdução ao CSSç
Os seletores id e class
Além dos seletores de elementos HTML, CSS 
também permite que nós criemos nosso...
Introdução ao CSSç
Os seletores id
Seletores id são usados para especificar um estilo p p
para um elemento único;
Seletore...
Introdução ao CSSç
Os seletores class
Seletores class são usados para especificar um p p
estilo para um grupo de elementos...
Introdução ao CSSç
Os seletores class
Também podemos especificar que apenas alguns p p q p g
tipos de elementos HTML dever...
Prática em LaboratórioPrática em Laboratório
OBS.: Todas as atividades deverão ser enviadas para o e‐mail 
provas@thyagoma...
Prática em Laboratório
• Faça uma folha de estilo que padronize a 
formatação do documento HTML criado na ç
atividade prát...
Prática em Laboratório
• Faça uma folha de estilo que padronize a 
formatação do documento HTML criado na ç
atividade prát...
Prática em Laboratório
• Faça um Front‐End para um sistema Web 
fictício através da criação de formulários ç
HTML. (0,0 a ...
Prática em Laboratório
• Faça um Front‐End para um sistema Web fictício 
através da criação de formulários HTML. (0,0 a 5,...
Upcoming SlideShare
Loading in...5
×

Tecnologias para Internet - 2013.2 - Aula 3

214

Published on

Tecnologias para Internet - 2013.2 - Aula 3

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
214
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Tecnologias para Internet - 2013.2 - Aula 3"

  1. 1. Tecnologias para Internet Prof.º Thyago MaiaProf.  Thyago Maia Gestão da TI – 2013.2
  2. 2. Aula 3: Folhas de Estilo Objetivos • Introduzir o conceito de folhas de estilo • Apresentar alguns recursos da p g tecnologia • Definir e apresentar as principaisDefinir e apresentar as principais  propriedades CSS • Fazer com que o aluno crie seu• Fazer com que o aluno crie seu  primeiro projeto Web HTML + CSS  2
  3. 3. Introdução ao CSSIntrodução ao CSS
  4. 4. Introdução ao CSSç Folha de Estilo A partir do HTML 4.0, toda formatação de uma  página HTML pode ser definida em uma folha depágina HTML pode ser definida em uma folha de  estilo; Q d d lê f lh d ilQuando um navegador lê uma folha de estilo, o  mesmo formata o documento HTML de acordo  ifi õ d fi id f lh dcom as especificações definidas na folha de  estilo; 4
  5. 5. Introdução ao CSSç • O que é CSS? Sigla para Cascading Style Sheets;g p g y ; Estilos definem como os elementos HTML serão  apresentados/formatados;apresentados/formatados; Estilos foram adicionados no HTML 4.0 para  resolver um problema:resolver um problema:  Separar o conteúdo da sua formatação! lh d l d dFolhas de estilo podem ser armazenadas em  arquivos .css ao serem definidas em documentos  HTML; 5
  6. 6. Arquitetura de Sistemas Web • Qual camada o CSS se enquadra?   6
  7. 7. Arquitetura de Sistemas Web • Qual camada o CSS se enquadra?   7
  8. 8. Introdução ao CSSç • Sintaxe CSS Uma regra CSS possui duas partes: Um seletor e g p p uma ou mais declarações; h1 S l th1 { Color: blue; F t i 12 Seletor Declaração Font-size: 12px; } Propriedade Valor O seletor é normalmente um elemento HTML  que irá seguir as especificações definidas nas q g p ç declarações (h1, body, p, a, etc.); 8
  9. 9. Introdução ao CSSç • Tag usada em um documento HTML para  referenciar um arquivo CSS:q <link rel=“stylesheet” type=“text/css” href=“exemplo css”><link rel= stylesheet type= text/css href= exemplo.css > • Tal tag deverá ser declarada entre as tags <head> e </head> (cabeçalho de uma página ( ç p g HTML;
  10. 10. Algumas propriedades CSSAlgumas propriedades CSS
  11. 11. Algumas propriedades CSSg p p A propriedade Background Utilizada para definir efeitos de fundo em um p elemento CSS; Alguns possíveis efeitos: background‐color (corAlguns possíveis efeitos: background color (cor  de fundo), background‐image (imagem de  fundo) background‐repeat (repetição da imagemfundo), background repeat (repetição da imagem  de fundo); body { background-color: #b0c4de; 11 }
  12. 12. Algumas propriedades CSSg p p Formatação de texto com CSS Utilizamos a propriedade color para setar uma p p p cor no texto de um determinado elemento; Com CSS uma cor pode ser especificada com:Com CSS, uma cor pode ser especificada com: Um valor hexadecimal (Ex.: #FF0000) Um valor RGB (Ex : rgb(255 0 0))Um valor RGB (Ex.: rgb(255,0,0)) O nome da cor em inglês (Ex.: red) body { color: blue; 12 }
  13. 13. Algumas propriedades CSSg p p Alinhamento de texto com CSS Utilizamos a propriedade text‐align para definir o  alinhamento horizontal em textos; O texto pode ser centralizado (center), alinhado a  esquerda ou direita (left ou right) ou justificado (justify); h1 { text-align: right; } P { 13 text-align: center; }
  14. 14. Algumas propriedades CSSg p p Decoração de textos com CSS A propriedade text‐decoration é usada para setarp p p ou remover decorações em textos; a { text-decoration: none; }{ ; } h1 { text-decoration: line-through; } h2 { text-decoration: underline; } h3 { text-decoration: overline; }{ ; } 14
  15. 15. Algumas propriedades CSSg p p Transformações de textos A propriedade text‐transform é usada para p p p manter textos em caixa alta ou caixa baixa; p { text-transform: uppercase; } #area { text-transform: lowercase; } #area2 { text-transform: capitalize; } 15
  16. 16. Algumas propriedades CSSg p p Indentação A propriedade text‐indent é usada para p p p especificar a indentação da primeira linha de um  texto;; p { text-indent: 50px; } 16
  17. 17. Algumas propriedades CSSg p p Tipos de Fonte A propriedade font‐family é usada para setar o p p y p tipo de fonte a ser utilizado em um texto; Podemos definir vários tipos de fonte para aPodemos definir vários tipos de fonte para a  mesma propriedade.  Caso um ou mais navegadores não suporte um dosCaso um ou mais navegadores não suporte um dos  tipos listados; p { font-family: “Times new Roman”, Times, Serif; } 17 }
  18. 18. Algumas propriedades CSSg p p Estilos de Fonte A propriedade font‐style é usada para definir o p p y p estilo de fonte a ser utilizado em um texto; p { font-style: italic; } #exemplo { font-style: oblique; } 18
  19. 19. Algumas propriedades CSSg p p Tamanho de Fonte A propriedade font‐size seta o tamanho do texto;p p ; p { font-size: 40px; } #exemplo { font-size: 14px; } 19
  20. 20. Algumas propriedades CSSg p p Largura e altura de um elemento As propriedades width e height (largura e altura) p p g ( g ) setam, respectivamente, a largura e altura de um  determinado elemento;; pp { width: 240px; height: 100px;g p ; } 20
  21. 21. Algumas propriedades CSSg p p Bordas Através da propriedade border (borda) podemos p p ( ) p inserir bordas em elementos CSS; p { border: 5px solid red; } #exemplo { border: 1px dotted blue; } 21
  22. 22. Algumas propriedades CSSg p p Margens Através da propriedade margin podemos inserir p p g p margens em elementos CSS; #exemplo { i t 100margin-top: 100px; margin-bottom: 100px; margin-left: 100px; i i ht 100margin-right: 100px; } 22
  23. 23. Algumas propriedades CSSg p p Padding A propriedade padding define o espaço entre a p p p g p ç borda de um elemento e seu conteúdo; #exemplo { ddi t 100padding-top: 100px; padding-bottom: 100px; padding-left: 100px; ddi i ht 100padding-right: 100px; } 23
  24. 24. Introdução ao CSSç Os seletores id e class Além dos seletores de elementos HTML, CSS  também permite que nós criemos nossostambém permite que nós criemos nossos  próprios seletores, chamados id e class; 24
  25. 25. Introdução ao CSSç Os seletores id Seletores id são usados para especificar um estilo p p para um elemento único; Seletores id formatam elementos HTML que osSeletores id formatam elementos HTML que os  invocam a partir do atributo id; /* no css */ #paragrafos <!-- no html --> #paragrafos { color: red; <p id=“paragrafos” /> 25 co o : ed; }
  26. 26. Introdução ao CSSç Os seletores class Seletores class são usados para especificar um p p estilo para um grupo de elementos; Seletores class formatam elementos HTML que osSeletores class formatam elementos HTML que os  invocam a partir do atributo class; /* no css */ .centro { <!-- no html --> { text-align: center; <p class=“centro” /> 26 ce te ; }
  27. 27. Introdução ao CSSç Os seletores class Também podemos especificar que apenas alguns p p q p g tipos de elementos HTML deverão ser afetados  pela classe;p ; /* no css */ p.centro { <!-- no html --> { text-align: center; <p class=“centro” /> 27 ce te ; }
  28. 28. Prática em LaboratórioPrática em Laboratório OBS.: Todas as atividades deverão ser enviadas para o e‐mail  provas@thyagomaia.net
  29. 29. Prática em Laboratório • Faça uma folha de estilo que padronize a  formatação do documento HTML criado na ç atividade prática 01. (0,0 a 2,0 pontos) – Data de entrega: Até 09/09/2013;– Data de entrega: Até 09/09/2013; – Critérios de avaliação: b d d f• Substituição das tags HTML de formatação por  seletores CSS. Tal substituição será classificada como: Total: Toda a formatação foi definida no arquivo CSS criado– Total: Toda a formatação foi definida no arquivo CSS criado  (2,0 pontos); – Parcial: O CSS define parte da formatação do documento  HTML. Algumas tags HTML ainda formatam parte do  conteúdo (0,0 a 1,5 pontos); 29
  30. 30. Prática em Laboratório • Faça uma folha de estilo que padronize a  formatação do documento HTML criado na ç atividade prática 01. (0,0 a 2,0 pontos) – O(s) arquivo(s) CSS deverão ser editados APENAS– O(s) arquivo(s) CSS deverão ser editados APENAS  através dos softwares Notepad++, Notepad ou  GEdit;GEdit; – A atividade em questão é individual;  30
  31. 31. Prática em Laboratório • Faça um Front‐End para um sistema Web  fictício através da criação de formulários ç HTML. (0,0 a 5,0 pontos) – Data de entrega: Até 09/09/2013;– Data de entrega: Até 09/09/2013; – Critérios de avaliação: d “ ” d á (l k• Presença de um “menu” em cada página HTML (links  que direcionam o usuário para cada página do sistema  fictício); (0 0 a 1 0 ponto)fictício); (0,0 a 1,0 ponto) • Os formulários criados refletem totalmente ou  parcialmente o Front‐End para o sistema Webparcialmente o Front End para o sistema Web  proposto; (0,0 a 1,0 ponto) 31
  32. 32. Prática em Laboratório • Faça um Front‐End para um sistema Web fictício  através da criação de formulários HTML. (0,0 a 5,0  pontos) • Uso de CSS no Front‐End; (0,0 a 1,0 ponto) • Formatação; (0,5 pontos) • Organização do código; (0,0 a 1,0 ponto) • Pesquisa (o aluno pesquisou e utilizou tags não  apresentadas em sala de aula); (0,5 pontos) • O(s) arquivo(s) CSS deverão ser editados APENAS  através dos softwares Notepad++, Notepad ou GEdit; – A atividade em questão poderá ser feita em grupos de até  3 alunos; 32
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×