CSS  Cascading Style Sheets Folhas de Estilo em Cascata Parte I
<ul><li>CSS é uma linguagem que define a formatação de um documento html. </li></ul>
documento.html documento.css CSS é usado para configurar um estilo. HTML é usado para estruturar conteúdos.
<ul><li>A grande vantagem do uso de CSS é a de separar a marcação HTML, da apresentação do site. </li></ul>
index .html documento .css historia .html produtos .html contato .html cadastro .html
<ul><li>Em outras palavras, vale dizer que o HTML destina-se unicamente a estruturar e marcar o conteúdo, ficando por cont...
<ul><li>Sintaxe </li></ul><ul><li>Seletor {propriedade: valor} </li></ul>É o elemento que  será alvo da regra de estilo. É...
<ul><li>Se por exemplo, você quiser trocar a cor do fundo de um site com 100 páginas, a folha de estilos evita que você ed...
<ul><li><p><font size=“4” face=“georgia” color=“red”> </li></ul><ul><li>texto exemplo</font></p> </li></ul>Esse elemento e...
O certo é em um documento com extensão .css colocar (exemplo de folha de estilo externa): <ul><li>p { </li></ul><ul><li>fo...
Para ligar os dois documentos é  necessário acrescentar na seção head do documento html: documento.html documento.css <hea...
Além do exemplo de folha de estilo externa. Existem mais dois tipos de folhas de estilo. <ul><li>Incorporada  </li></ul><u...
Folha de estilo incorporada  (é colocada no cabeçalho do documento html) <ul><li><html> </li></ul><ul><li><head> <title>Ex...
Folha de estilo In line  (é colocada na própria linha do código html) <ul><li><html>  </li></ul><ul><li><head> <title>Exem...
Upcoming SlideShare
Loading in …5
×

Css – cascading style sheets

1,048 views
960 views

Published on

apresentação em power point

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

  • Be the first to like this

No Downloads
Views
Total views
1,048
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
41
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Css – cascading style sheets

  1. 1. CSS Cascading Style Sheets Folhas de Estilo em Cascata Parte I
  2. 2. <ul><li>CSS é uma linguagem que define a formatação de um documento html. </li></ul>
  3. 3. documento.html documento.css CSS é usado para configurar um estilo. HTML é usado para estruturar conteúdos.
  4. 4. <ul><li>A grande vantagem do uso de CSS é a de separar a marcação HTML, da apresentação do site. </li></ul>
  5. 5. index .html documento .css historia .html produtos .html contato .html cadastro .html
  6. 6. <ul><li>Em outras palavras, vale dizer que o HTML destina-se unicamente a estruturar e marcar o conteúdo, ficando por conta das CSS toda a responsabilidade pelo visual do documento. </li></ul>
  7. 7. <ul><li>Sintaxe </li></ul><ul><li>Seletor {propriedade: valor} </li></ul>É o elemento que será alvo da regra de estilo. É o atributo do elemento HTML ao qual será aplicada a regra. É a característica específica a ser assumida pela Propriedade.
  8. 8. <ul><li>Se por exemplo, você quiser trocar a cor do fundo de um site com 100 páginas, a folha de estilos evita que você edite manualmente uma a uma as páginas para fazer a mudança nos 100 documentos HTML. Usando CSS a mudança se fará em uns poucos segundos. </li></ul>
  9. 9. <ul><li><p><font size=“4” face=“georgia” color=“red”> </li></ul><ul><li>texto exemplo</font></p> </li></ul>Esse elemento e seus atributos estão em desuso. <p>Texto exemplo</p>
  10. 10. O certo é em um documento com extensão .css colocar (exemplo de folha de estilo externa): <ul><li>p { </li></ul><ul><li>font-size: large; </li></ul><ul><li>font-family: georgia, serif; </li></ul><ul><li>color: red; </li></ul><ul><li>} </li></ul>
  11. 11. Para ligar os dois documentos é necessário acrescentar na seção head do documento html: documento.html documento.css <head> <link rel=“stylesheet” type=“text/css” href=“nome do arquivo.css”> </head>
  12. 12. Além do exemplo de folha de estilo externa. Existem mais dois tipos de folhas de estilo. <ul><li>Incorporada </li></ul><ul><li>In line </li></ul>
  13. 13. Folha de estilo incorporada (é colocada no cabeçalho do documento html) <ul><li><html> </li></ul><ul><li><head> <title>Exemplo</title> </li></ul><ul><li><style> </li></ul><ul><li>body {background-color: #FF0000;} </style> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><p>Esta é uma página com fundo vermelho</p> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  14. 14. Folha de estilo In line (é colocada na própria linha do código html) <ul><li><html> </li></ul><ul><li><head> <title>Exemplo</title> </li></ul><ul><li></head> </li></ul><ul><li><body style=&quot;background-color: #FF0000;&quot;> </li></ul><ul><li><p>Esta é uma página com fundo vermelho</p> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>

×