Tecnologias para Internet - 2014.1 - Aula 4

585 visualizações

Publicada em

Tecnologias para Internet - 2014.1 - Aula 4

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

Nenhuma nota no slide

Tecnologias para Internet - 2014.1 - Aula 4

  1. 1. Tecnologias para Internet Prof.º Thyago Maia Gestão da TI – 2014.1
  2. 2. Objetivos Aula 4: Folhas de Estilo • Introduzir o conceito de folhas de estilo • Apresentar alguns recursos da tecnologia • Definir e apresentar as principais propriedades CSS • Fazer com que o aluno crie seu primeiro projeto Web HTML + CSS 2
  3. 3. Introduçã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 estilo;  Quando um navegador lê uma folha de estilo, o mesmo formata o documento HTML de acordo com as especificações definidas na folha de estilo; 4
  5. 5. Introdução ao CSS • O que é CSS?  Sigla para Cascading Style Sheets;  Estilos definem como os elementos HTML serão apresentados/formatados;  Estilos foram adicionados no HTML 4.0 para resolver um problema:  Separar o conteúdo da sua formatação!  Folhas 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 uma ou mais declarações;  O seletor é normalmente um elemento HTML que irá seguir as especificações definidas nas declarações (h1, body, p, a, etc.); 8 h1 { Color: blue; Font-size: 12px; } Seletor Declaração Propriedade Valor
  9. 9. Introdução ao CSS • Tag usada em um documento HTML para referenciar um arquivo 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 HTML;
  10. 10. Algumas propriedades CSS
  11. 11. Algumas propriedades CSS  A propriedade Background  Utilizada para definir efeitos de fundo em um elemento CSS;  Alguns possíveis efeitos: background-color (cor de fundo), background-image (imagem de fundo), background-repeat (repetição da imagem de fundo); 11 body { background-color: #b0c4de; background-image:url('paper.gif'); }
  12. 12. Algumas propriedades CSS  Formatação de texto com CSS  Utilizamos a propriedade color para setar uma cor no texto de um determinado elemento;  Com CSS, uma cor pode ser especificada com:  Um valor hexadecimal (Ex.: #FF0000)  Um valor RGB (Ex.: rgb(255,0,0))  O nome da cor em inglês (Ex.: red) 12 body { color: blue; }
  13. 13. Algumas propriedades CSS  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); 13 h1 { text-align: right; } P { text-align: center; }
  14. 14. Algumas propriedades CSS  Decoração de textos com CSS  A propriedade text-decoration é usada para setar ou remover decorações em textos; 14 a { text-decoration: none; } h1 { text-decoration: line-through; } h2 { text-decoration: underline; } h3 { text-decoration: overline; }
  15. 15. Algumas propriedades CSS  Transformações de textos  A propriedade text-transform é usada para manter textos em caixa alta ou caixa baixa; 15 p { text-transform: uppercase; } #area { text-transform: lowercase; } #area2 { text-transform: capitalize; }
  16. 16. Algumas propriedades CSS  Indentação  A propriedade text-indent é usada para especificar a indentação da primeira linha de um texto; 16 p { text-indent: 50px; }
  17. 17. Algumas propriedades CSS  Tipos de Fonte  A propriedade font-family é usada para setar o tipo de fonte a ser utilizado em um texto;  Podemos definir vários tipos de fonte para a mesma propriedade.  Caso um ou mais navegadores não suporte um dos tipos listados; 17 p { font-family: “Times new Roman”, Times, Serif; }
  18. 18. Algumas propriedades CSS  Estilos de Fonte  A propriedade font-style é usada para definir o estilo de fonte a ser utilizado em um texto; 18 p { font-style: italic; } #exemplo { font-style: oblique; }
  19. 19. Algumas propriedades CSS  Tamanho de Fonte  A propriedade font-size seta o tamanho do texto; 19 p { font-size: 40px; } #exemplo { font-size: 14px; }
  20. 20. Algumas propriedades CSS  Largura e altura de um elemento  As propriedades width e height (largura e altura) setam, respectivamente, a largura e altura de um determinado elemento; 20 p { width: 240px; height: 100px; }
  21. 21. Algumas propriedades CSS  Bordas  Através da propriedade border (borda) podemos inserir bordas em elementos CSS; 21 p { border: 5px solid red; } #exemplo { border: 1px dotted blue; }
  22. 22. Algumas propriedades CSS  Margens  Através da propriedade margin podemos inserir margens em elementos CSS; 22 #exemplo { margin-top: 100px; margin-bottom: 100px; margin-left: 100px; margin-right: 100px; }
  23. 23. Algumas propriedades CSS  Padding  A propriedade padding define o espaço entre a borda de um elemento e seu conteúdo; 23 #exemplo { padding-top: 100px; padding-bottom: 100px; padding-left: 100px; padding-right: 100px; }
  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 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 para um elemento único;  Seletores id formatam elementos HTML que os invocam a partir do atributo id; 25 /* no css */ #paragrafos { color: red; } <!-- no html --> <p id=“paragrafos” />
  26. 26. Introdução ao CSS  Os seletores class  Seletores class são usados para especificar um estilo para um grupo de elementos;  Seletores class formatam elementos HTML que os invocam a partir do atributo class; 26 /* no css */ .centro { text-align: center; } <!-- no html --> <p class=“centro” />
  27. 27. Introdução ao CSS  Os seletores class  Também podemos especificar que apenas alguns tipos de elementos HTML deverão ser afetados pela classe; 27 /* no css */ p.centro { text-align: center; } <!-- no html --> <p class=“centro” />
  28. 28. Prá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é 18/03/2014; – Critérios de avaliação: • 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 (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 através dos softwares Notepad++, Notepad ou GEdit; – A atividade em questão é individual; 30

×