Curso HTML e CSS Part2
•
4 recomendaciones•1,342 vistas
O documento apresenta um curso sobre HTML e CSS, introduzindo o que é CSS, como foi criado e sua proposta. Explica como integrar CSS às páginas e formatar conteúdo utilizando propriedades como classes, alinhamento, estilos de fontes e a tag <span>. Fornece detalhes sobre o contato do autor.
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Destacado
Destacado (20)
Similar a Curso HTML e CSS Part2
Similar a Curso HTML e CSS Part2 (20)
Último
Último (20)
Curso HTML e CSS Part2
- 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
- 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
- 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