Your SlideShare is downloading. ×
Curso HTML e CSS Part2
Curso HTML e CSS Part2
Curso HTML e CSS Part2
Curso HTML e CSS Part2
Curso HTML e CSS Part2
Curso HTML e CSS Part2
Curso HTML e CSS Part2
Curso HTML e CSS Part2
Curso HTML e CSS Part2
Curso HTML e CSS Part2
Curso HTML e CSS Part2
Curso HTML e CSS Part2
Curso HTML e CSS Part2
Curso HTML e CSS Part2
Curso HTML e CSS Part2
Curso HTML e CSS Part2
Curso HTML e CSS Part2
Curso HTML e CSS Part2
Curso HTML e CSS Part2
Curso HTML e CSS Part2
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Curso HTML e CSS Part2

4,003

Published on

Curso de HTML e CSS - Parte 2

Curso de HTML e CSS - Parte 2

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

No Downloads
Views
Total Views
4,003
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
312
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Curso HTML & CSS > Herbet Ferreira Rodrigues > contato@herbetferreira.com
  • 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. Introdução ao CSS
  • 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. 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. 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. Integrando CSS às Páginas
  • 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. 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. 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. Formatando com CSS
  • 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. 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. 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. 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. Formatanto com CSS > Tamanho de Fontes Utilizando a propriedade {font-size: valor} • •{font-size: 10pt; } •{font-size: 14px; } •{font-size: 20cm; } 16
  • 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. 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. FIM 19
  • 20. Contato > Nome: Herbet Ferreira Rodrigues > E-mail: contato@herbetferreira.com > Material para Download: http://www.herbetferreira.com 20

×