Curso HTML & CSS
       > Herbet Ferreira Rodrigues
      > contato@herbetferreira.com
Sumário

> Introdução ao CSS
          O que é CSS?
      •

          CSS surgiu…
      •

          Proposta / Aplicação...
Introdução ao CSS
Introdução ao CSS

>O que é CSS?
        ”Cascading Style sheetsquot; ou quot;Folhas de
    •
        Estilo Encadeadas” é...
Introdução ao CSS

>CSS surgiu…
        Popularização da Web e alto custo de
    •
        manutenção para sites cada vez ...
Introdução ao CSS

>Proposta / Aplicação
        A linguagem HTML preocupa-se em estruturar a
    •
        página em bloc...
Integrando CSS às Páginas
Integrando CSS às Páginas

>Referenciando um arquivo externo
 <html>
 <head>
     <link rel=“stylesheet” href=“meuprimeiro...
Integrando CSS às Páginas

>Definindo dentro da tag <style>

  <html>
  <head>
  <style type=quot;text/cssquot;>
  <!--
  ...
Integrando CSS às Páginas
> Atributos de estilo inline em algumas tags HTML como
  <p>, <div>, ou <span>

   <div style=qu...
Formatando com CSS
Formatanto com CSS

> Classes
        Uma classe poderá armazenar uma série
    •
        de propriedades que poderão ser
...
Formatanto com CSS

> Alinhamento
            Utilizando a propriedade {text-align: valor}
        •



  <style type=“tex...
Formatanto com CSS

> Efeitos de sublinha
         Utilizando a propriedade {text-decoration:
     •
         valor}

    ...
Formatanto com CSS

> Família de Fontes
        Utilizando a propriedade {font-family:
    •
        valores}

          •...
Formatanto com CSS

> Tamanho de Fontes
        Utilizando a propriedade {font-size: valor}
    •



          •{font-size...
Formatanto com CSS

> Estilo de Fontes
         Utilizando a propriedade {font-style: valor}
     •



           •{font-s...
Formatanto com CSS

> <Span> e </Span>
        A tag <span> e </span> é utilizada
    •
        para aplicar um alinhament...
FIM

      19
Contato

> Nome: Herbet Ferreira Rodrigues

> E-mail: contato@herbetferreira.com

> Material para Download: http://www.her...
Upcoming SlideShare
Loading in...5
×

Curso HTML e CSS Part2

4,093

Published on

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,093
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
322
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×