CSS<br />Introdução a MicroinformáticaTurma J<br />
O que é CSS?<br /><ul><li>Cascading Style Sheets (Folhas de Estilos em Cascata)
Arquivocomplementarao HTML, queforneceformas de apresentação do conteúdo
Muitoútilpara sites com muitaspáginasquepossuem as mesmaspropriedades
Assimcomo o HTML, podeser escritoemeditores de texto simples, comoBloco de Notas
Aosalvar o arquivo, é precisosalvarcomoformato".css"</li></li></ul><li>Tipos de Folhas de Estilo<br />Folha de EstiloExter...
Tipos de Folhas de Estilo<br />Folha de EstiloExterna<br />Vinculação ao arquivo de estilo por link<br />		<head>		...		<l...
Tipos de Folhas de Estilo<br />Folha de EstiloExterna<br />Vinculação ao arquivo de estilo por importação<br />		<head>		....
Tipos de Folhas de Estilo<br />Folha de EstiloExterna<br />Vinculação ao arquivo de estilo por importação<br />		<head>		....
Tipos de Folhas de Estilo<br />Folha de EstiloInterna<br />As definições do estilosãofeitasnaprópriapágina HTML, e nesseca...
Tipos de Folhas de Estilo<br />Folha de Estilo Inline<br />O estilo é definidoem um elementoespecíficoparafuncionarapenasn...
As regras CSS<br />O código de uma folha de estilos é constituído de comandos denominados regras CSS<br />Uma regra CSS é ...
As regras CSS<br />Seletores do tipo elemento HTML:<br />body {<br />background-color: #0000FF;<br />margin: 20px;<br />pa...
As regras CSS<br />Seletores do tipo classe:<br />p.estilo1 {<br />color: white;<br />text-align: center;<br />font-size: ...
As regras CSS<br />Seletores do tipo classe:<br />...<br /><body><br />	<p class=“estilo1”>Esse parágrado tem estilo 1</p>...
Próximos SlideShares
Carregando em…5
×

CSS

557 visualizações

Publicada em

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
557
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
19
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

CSS

  1. 1. CSS<br />Introdução a MicroinformáticaTurma J<br />
  2. 2. O que é CSS?<br /><ul><li>Cascading Style Sheets (Folhas de Estilos em Cascata)
  3. 3. Arquivocomplementarao HTML, queforneceformas de apresentação do conteúdo
  4. 4. Muitoútilpara sites com muitaspáginasquepossuem as mesmaspropriedades
  5. 5. Assimcomo o HTML, podeser escritoemeditores de texto simples, comoBloco de Notas
  6. 6. Aosalvar o arquivo, é precisosalvarcomoformato".css"</li></li></ul><li>Tipos de Folhas de Estilo<br />Folha de EstiloExterna<br /> O estilo é linkado ou importado de um arquivo separado. Assim, as alterações de um mesmo elemento presente em várias páginas são editadas em um único arquivo.<br />
  7. 7. Tipos de Folhas de Estilo<br />Folha de EstiloExterna<br />Vinculação ao arquivo de estilo por link<br /> <head> ... <link rel="stylesheet" type="text/css" href="arquivo.css"> ... </head><br />
  8. 8. Tipos de Folhas de Estilo<br />Folha de EstiloExterna<br />Vinculação ao arquivo de estilo por importação<br /> <head> ... <style type="text/css"> @import url("arquivo.css"); </style> ... </head><br />
  9. 9. Tipos de Folhas de Estilo<br />Folha de EstiloExterna<br />Vinculação ao arquivo de estilo por importação<br /> <head> ... <style type="text/css"> @import url("arquivo.css"); </style> ... </head><br />
  10. 10. Tipos de Folhas de Estilo<br />Folha de EstiloInterna<br />As definições do estilosãofeitasnaprópriapágina HTML, e nessecaso, o estilosófuncionanela<br /> <head> ... <style type="text/css"> body {background-color: #000000;} </style> ...</head><br />
  11. 11. Tipos de Folhas de Estilo<br />Folha de Estilo Inline<br />O estilo é definidoem um elementoespecíficoparafuncionarapenasnele<br /> <elemento style="código CSS"><br />
  12. 12. As regras CSS<br />O código de uma folha de estilos é constituído de comandos denominados regras CSS<br />Uma regra CSS é formada de um seletor que antecede as chaves e de uma declaração que fica dentro das chaves<br />A declaração é constituída de propriedade e valor separados por dois-pontos<br />seletor {<br /> propriedade1: valor;<br /> propriedade2: valor;<br /> }<br />
  13. 13. As regras CSS<br />Seletores do tipo elemento HTML:<br />body {<br />background-color: #0000FF;<br />margin: 20px;<br />padding-top: 10px;<br />font-size: large;<br />color: yellow;<br />}<br />p {color: white;}<br />
  14. 14. As regras CSS<br />Seletores do tipo classe:<br />p.estilo1 {<br />color: white;<br />text-align: center;<br />font-size: 30px;<br />}<br />p.estilo2 {color: yellow; font-size: 50px;}<br />
  15. 15. As regras CSS<br />Seletores do tipo classe:<br />...<br /><body><br /> <p class=“estilo1”>Esse parágrado tem estilo 1</p><br /><p class=“estilo2”>Esse parágrafo tem estilo 2</p><br /></body><br />...<br />
  16. 16. As regras CSS<br />Seletores do tipo id:<br />#topo {background-color: black; text-align: center; font-size: 50px;<br />color: white;}<br />#menu {width: 30%; float: left; background-color: green;<br />font-size: 30px;}<br />#corpo {width: 70%; float: right; font-size: 20px;}<br />
  17. 17. As regras CSS<br />Seletores do tipo id:<br /> <body><br /> <div id="topo">TOPO</div><br /> <div id="menu"><br /> <ul><br /> <a href="#"><li>Home</li></a><br /> <a href="#"><li>Página 1</li></a><br /> <a href="#"><li>Página 2</li></a><br /> </ul><br /> </div><br /> <div>Corpo da página com conteúdo principal.</div><br /></body><br />
  18. 18. As regras CSS<br />Agrupamento de seletores:<br />h1, h2, h3 {<br />color: blue;<br />font-weight: bold;<br />}<br /> h4, h5, h6 {<br />color: green;<br />}<br />

×