Tecnologias para Internet     Prof. Thyago     Prof.º Thyago Maia    Gestão da TI – 2013.1
Aula 3: Folhas de EstiloObjetivos  • Introduzir o conceito de folhas de estilo      p           g  • Apresentar alguns rec...
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 se...
Introdução ao CSS                         ç• O que é CSS?    Sigla para Cascading Style Sheets;      g p               g y...
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         ...
Introdução ao CSS                          ç• Tag usada em um documento HTML para                    q  referenciar um arq...
Algumas propriedades CSSAlgumas propriedades CSS
Algumas propriedades CSS             g     p p  A propriedade Background     Utilizada para definir efeitos de fundo em um...
Algumas propriedades CSS             g     p p  Formatação de texto com CSS     Utilizamos a propriedade color para setar ...
Algumas propriedades CSS                g     p p     Alinhamento de texto com CSS       Utilizamos a propriedade text‐ali...
Algumas propriedades CSS             g     p p  Decoração de textos com CSS     A propriedade text‐decoration é usada para...
Algumas propriedades CSS             g     p p  Transformações de textos     A propriedade text‐transform é usada para    ...
Algumas propriedades CSS              g     p p    Indentação      A propriedade text‐indent é usada para         p p     ...
Algumas propriedades CSS              g     p p    Tipos de Fonte      A propriedade font‐family é usada para setar o     ...
Algumas propriedades CSS              g     p p    Estilos de Fonte      A propriedade font‐style é usada para definir o  ...
Algumas propriedades CSS              g     p p    Tamanho de Fonte      A propriedade font‐size seta o tamanho do texto; ...
Algumas propriedades CSS              g     p p    Largura e altura de um elemento      As propriedades width e height (la...
Algumas propriedades CSS               g     p p    Bordas      Através da propriedade border (borda) podemos             ...
Algumas propriedades CSS             g     p p  Margens     Através da propriedade margin podemos inserir                 ...
Algumas propriedades CSS              g     p p  Padding     A propriedade padding define o espaço entre a        p p     ...
Introdução ao CSS                     çOs seletores id e class  Além dos seletores de elementos HTML, CSS   também permite...
Introdução ao CSS                        ç  Os seletores id    Seletores id são usados para especificar um estilo         ...
Introdução ao CSS                       ç  Os seletores class    Seletores class são usados para especificar um           ...
Introdução ao CSS                       ç  Os seletores class    Também podemos especificar que apenas alguns             ...
Próximos SlideShares
Carregando em…5
×

Tecnologias para Internet - 2013.1 - Aula 3

327 visualizações

Publicada em

Tecnologias para Internet - 2013.1 - Aula 3

Publicada em: Tecnologia
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
327
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
13
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Tecnologias para Internet - 2013.1 - Aula 3

  1. 1. Tecnologias para Internet Prof. Thyago Prof.º Thyago Maia Gestão da TI – 2013.1
  2. 2. Aula 3: Folhas de EstiloObjetivos • Introduzir o conceito de folhas de estilo p g • Apresentar alguns recursos da  tecnologia • Definir e apresentar as principais Definir 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 de  página HTML pode ser definida em uma folha de estilo; Quando um navegador lê uma folha de estilo, o  Q d d lê f lh d il mesmo formata o documento HTML de acordo  com as especificações definidas na folha de  ifi õ d fi id f lh d 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; Estilos foram adicionados no HTML 4.0 para  resolver um problema:  resolver um problema: Separar o conteúdo da sua formatação! Folhas de estilo podem ser armazenadas em  lh d l d d 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 Seletor S l t{ Color: blue; Declaração Font-size: 12 F t i 12px;} Valor Propriedade O seletor é normalmente um elemento HTML  q que irá seguir as especificações definidas nas  g p ç declarações (h1, body, p, a, etc.); 8
  9. 9. Introdução ao CSS ç• Tag usada em um documento HTML para  q referenciar um arquivo CSS:<link rel=“stylesheet” type=“text/css” href=“exemplo css”> rel= stylesheet type= text/css href= exemplo.css >• Tal tag deverá ser declarada entre as tags ( ç p g <head> e </head> (cabeçalho de uma página  HTML;
  10. 10. Algumas propriedades CSSAlgumas propriedades CSS
  11. 11. Algumas propriedades CSS g p p A propriedade Background Utilizada para definir efeitos de fundo em um  p elemento CSS; Alguns possíveis efeitos: background color (cor  Alguns possíveis efeitos: background‐color (cor de fundo), background‐image (imagem de  fundo), background repeat (repetição da imagem  fundo) background‐repeat (repetição da imagem de fundo);body{ background-color: #b0c4de;} 11
  12. 12. Algumas propriedades CSS g 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 CSS g 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{ text-align: center;} 13
  14. 14. Algumas propriedades CSS g p p Decoração de textos com CSS A propriedade text‐decoration é usada para setar p p p ou remover decorações em textos;a { text-decoration: none; }h1 { text-decoration: line-through; } text decoration: line through;h2 { text-decoration: underline; }h3 { text-decoration: overline; }h4 { text-decoration: blink; } 14
  15. 15. Algumas propriedades CSS g 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 CSS g 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 CSS g 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 a  Podemos definir vários tipos de fonte para a mesma propriedade.  Caso um ou mais navegadores não suporte um dos  Caso um ou mais navegadores não suporte um dos tipos listados;p{ font-family: “Times new Roman”, Times, Serif;} 17
  18. 18. Algumas propriedades CSS g 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 CSS g 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 CSS g 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; ;p{ width: 240px; height: 100px; g p ;} 20
  21. 21. Algumas propriedades CSS g 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 CSS g p p Margens Através da propriedade margin podemos inserir  p p g p margens em elementos CSS;#exemplo{ margin-top: 100 i t 100px; margin-bottom: 100px; margin-left: 100px; margin-right: 100 i i ht 100px;} 22
  23. 23. Algumas propriedades CSS g 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{ padding-top: 100 ddi t 100px; padding-bottom: 100px; padding-left: 100px; padding-right: 100 ddi i ht 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 nossos  també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 os  Seletores id formatam elementos HTML que os invocam a partir do atributo id;/* no css */ <!-- no html -->#paragrafos{ <p id=“paragrafos” /> co o : ed; color: red;} 25
  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 os  Seletores class formatam elementos HTML que os invocam a partir do atributo class;/* no css */ <!-- no html -->.centro{text-align: <p class=“centro” />ce te ;center;} 26
  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  p pela classe;;/* no css */ <!-- no html -->p.centro{text-align: <p class=“centro” />ce te ;center;} 27

×