Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Curso HTML e CSS Part2

4,472 views

Published on

Curso de HTML e CSS - Parte 2

Published in: Education, Technology
  • Be the first to comment

Curso HTML e CSS Part2

  1. 1. Curso HTML & CSS > Herbet Ferreira Rodrigues > contato@herbetferreira.com
  2. 2. Sumário > Introdução ao CSS O que é CSS? • CSS surgiu… • Proposta / Aplicação • > Integrando CSS às Páginas > Formatando com CSS • Classes • Alinhamento • Efeito de Texto • Estilos de Fontes • <Span> 2
  3. 3. Introdução ao CSS
  4. 4. Introdução ao CSS >O que é CSS? ”Cascading Style sheetsquot; ou quot;Folhas de • Estilo Encadeadas” é uma tecnologia (linguagem) criada para definir estilos (cores, tipologia, posicionamento, etc ...); CSS facilitam a criação, formatação e • manutenção de páginas Web. Pode ser algo do tipo: body { font-family: • Verdana; font-size: 10pt } 4
  5. 5. Introdução ao CSS >CSS surgiu… Popularização da Web e alto custo de • manutenção para sites cada vez maiores e de layouts complexos. Projetos intranet e internet que exigindo • padronização de conteúdo. Foi criado no final de 1996 e, hoje o Style • Sheets está em sua segunda fase, a fase 2 (maio/98). 5
  6. 6. Introdução ao CSS >Proposta / Aplicação A linguagem HTML preocupa-se em estruturar a • página em blocos de informação (títulos, cabeçalhos, parágrafos, links, metatags, etc...) CSS controla o layout (design de estrutura, cores, • fontes ) Consegue-se então separar o estilo do conteúdo • Boa solução para websites na internet, intranet e • extranet com alto volume de páginas e manutenção constante . 6
  7. 7. Integrando CSS às Páginas
  8. 8. Integrando CSS às Páginas >Referenciando um arquivo externo <html> <head> <link rel=“stylesheet” href=“meuprimeiro.css” type=quot;text/cssquot;> <title>...</title> </head> <body> ... </body> </html> 8
  9. 9. Integrando CSS às Páginas >Definindo dentro da tag <style> <html> <head> <style type=quot;text/cssquot;> <!-- P { font-size: 10pt; font-family: quot;Verdana, Arialquot;; color: #000066 } --> </style> </head> ... 9
  10. 10. Integrando CSS às Páginas > Atributos de estilo inline em algumas tags HTML como <p>, <div>, ou <span> <div style=quot;margin-left: 1in; font-size: 9ptquot;> Este texto irá receber os estilos definidos na tag DIV ... <span style=quot;font-weight: bold; background: #FFFF00quot;> este texto aqui usa a tag span ...</span> </div> 10
  11. 11. Formatando com CSS
  12. 12. Formatanto com CSS > Classes Uma classe poderá armazenar uma série • de propriedades que poderão ser utilizadas para diferentes partes da página HTML. Para isso, teremos que indicar um nome • para a classe para que, posteiormente, possamos utilizá-la. Esse nome desse ser especificado da • seguinte forma: .nome_da_classe { propriedades } 12
  13. 13. Formatanto com CSS > Alinhamento Utilizando a propriedade {text-align: valor} • <style type=“text/css”> .direita { text-align: right } .esquerda { text-align: left } .central { text-align: center } .justificado { text-align: justify } </style> ... <p class=“nome_da_classe”>Texto</p> 13
  14. 14. Formatanto com CSS > Efeitos de sublinha Utilizando a propriedade {text-decoration: • valor} •{ text-decoration: underline } •{ text-decoration: line-through } •{ text-decoration: none } •{ text-decoration: overline } 14
  15. 15. Formatanto com CSS > Família de Fontes Utilizando a propriedade {font-family: • valores} •{font-family: Verdana, Arial, Helvetica, sans-serif; } •{font-style: Georgia, quot;Times New Romanquot;, Times, serif; } 15
  16. 16. Formatanto com CSS > Tamanho de Fontes Utilizando a propriedade {font-size: valor} • •{font-size: 10pt; } •{font-size: 14px; } •{font-size: 20cm; } 16
  17. 17. Formatanto com CSS > Estilo de Fontes Utilizando a propriedade {font-style: valor} • •{font-style: oblique; } •{font-style: italic; } •{font-style: normal; } •{font-weight: bold; } 17
  18. 18. Formatanto com CSS > <Span> e </Span> A tag <span> e </span> é utilizada • para aplicar um alinhamento numa parte do texto, sem iniciar um parágrafo ou quebra de linha. É também muito utilizada para definir as • propriedades de folha de estilo, justamente por sua característica de não iniciar um novo parágrafo ou quebra de linha. <span class=“nome”>Texto</span> <p>Texto com <span style=“font-size: 15px;”>tamanho maior</span>.</p> 18
  19. 19. FIM 19
  20. 20. Contato > Nome: Herbet Ferreira Rodrigues > E-mail: contato@herbetferreira.com > Material para Download: http://www.herbetferreira.com 20

×