Tecnologias para Internet - Aula 4

824 visualizações

Publicada em

Tecnologias para Internet - Aula 4

Publicada em: Tecnologia
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
824
No SlideShare
0
A partir de incorporações
0
Número de incorporações
9
Ações
Compartilhamentos
0
Downloads
24
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Tecnologias para Internet - Aula 4

  1. 1. Profº Thyago Maia Tecnologias para Internet Aula 4
  2. 2. Sumário  Camada de Apresentação  Introdução a CSS
  3. 3. Introdução ao HTML  Estilos HTML  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;  Existem 3 formas para inserir uma folha de estilo:  Folha de estilo externa;  Folha de estilo interna;  Estilos “em linha”;
  4. 4. Introdução ao HTML  Folha de estilo interna  Pode ser usada se um documento HTML possui um único estilo;  Estilos internos são definidos entre as tags <head> e </head>, através da tag <style>; <html> <head> <style type="text/css"> body {background-color:yellow;} p {color:blue;} </style> </head> <body> ...
  5. 5. Introdução ao HTML  Folha de estilo externa  Ideal quando o mesmo estilo é aplicado em várias páginas;  Podemos mudar o estilo de 50 páginas HTML, por exemplo, a partir de um único arquivo; <html> <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> <body> ...
  6. 6. Introdução ao HTML  Estilos “em linha”  Estilos aplicáveis em um elemento simples;  Para utilizar estilos “em linha”, definimos o atributo style em uma tag específica;  O valor do atributo poderá conter qualquer propriedade CSS; <html> <body> <p style=“margin-left: 20px”> Parágrafo com 20 pixels de margem esquerda </p> </body> </html>
  7. 7. Introdução a CSS  O que é CSS?  Sigla para Cascading Style Sheets;  Estilos definem como os elementos HTML serão apresentados;  Estilos foram adicionados no HTML 4.0 para resolver um problema:  Separar o conteúdo da sua formatação!  Folhas de estilo externas salvam tempo de trabalho;  Folhas de estilo externas são armazenadas em arquivos .css;
  8. 8. Introdução a 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.); h1 { Color: blue; Font-size: 12px; } Seletor Declaração Propriedade Valor
  9. 9. Introdução a 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;
  10. 10. Introdução a 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; /* no css */ #paragrafos { color: red; } <!-- no html --> <p id=“paragrafos” />
  11. 11. Introdução a 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; /* no css */ .centro { text-align: center; } <!-- no html --> <p class=“centro” />
  12. 12. Introdução a CSS  Os seletores class  Também podemos especificar que apenas alguns tipos de elementos HTML deverão ser afetados pela classe; /* no css */ p.centro { text-align: center; } <!-- no html --> <p class=“centro” />
  13. 13. Introdução a 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); body { background-color: #b0c4de; }
  14. 14. Introdução a 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) body { color: blue; }
  15. 15. Introdução a 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); h1 { text-align: right; } P { text-align: center; }
  16. 16. Introdução a CSS  Decoração de textos com CSS  A propriedade text-decoration é usada para setar ou remover decorações em textos; a { text-decoration: none; } h1 { text-decoration: line-through; } h2 { text-decoration: underline; } h3 { text-decoration: overline; } h4 { text-decoration: blink; }
  17. 17. Introdução a CSS  Transformações de textos  A propriedade text-transform é usada para manter textos em caixa alta ou caixa baixa; p { text-transform: uppercase; } #area { text-transform: lowercase; } #area2 { text-transform: capitalize; }
  18. 18. Introdução a CSS  Indentação  A propriedade text-indent é usada para especificar a indentação da primeira linha de um texto; p { text-indent: 50px; }
  19. 19. Introdução a 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; p { font-family: “Times new Roman”, Times, Serif; }
  20. 20. Introdução a CSS  Estilos de Fonte  A propriedade font-style é usada para definir o estilo de fonte a ser utilizado em um texto; p { font-style: italic; } #exemplo { font-style: oblique; }
  21. 21. Introdução a CSS  Tamanho de Fonte  A propriedade font-size seta o tamanho do texto; p { font-size: 40px; } #exemplo { font-size: 14px; }
  22. 22. Introdução a 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; p { width: 240px; height: 100px; }
  23. 23. Introdução a CSS  Bordas  Através da propriedade border (borda) podemos inserir bordas em elementos CSS; p { border: 5px solid red; } #exemplo { border: 1px dotted blue; }
  24. 24. Introdução a CSS  Margens  Através da propriedade margin podemos inserir margens em elementos CSS; #exemplo { margin-top: 100px; margin-bottom: 100px; margin-left: 100px; margin-right: 100px; }
  25. 25. Introdução a CSS  Padding  A propriedade padding define o espaço entre a borda de um elemento e seu conteúdo; #exemplo { padding-top: 100px; padding-bottom: 100px; padding-left: 100px; padding-right: 100px; }

×