Super CSS

845 visualizações

Publicada em

0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
845
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
22
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Super CSS

  1. 1. O que é CSS? <ul><li>CSS do inglês C ascading  S tyle  S heet </li></ul><ul><li>Folha de estilo em cascata. </li></ul><ul><li>CSS nível 2.1 (Atual) </li></ul><ul><li>Recomendação W3C, 1998 </li></ul><ul><li>CSS nível 3 (Em desenvolvimento) </li></ul>Capacitação para Web - CSS Pet Informática - UEM “ Folha de estilo em cascata é um mecanismo simples para adicionar estilos (p.ex., fontes, cores, espaçamentos) aos documentos Web.”
  2. 2. Por que CSS? <ul><li>Separa a marcação HTML do site. </li></ul><ul><li>(Estrutura e Visual) </li></ul><ul><li>Ajuda a melhorar a acessiblidade. </li></ul><ul><li>Ajuda a melhorar a manutenção. </li></ul>Capacitação para Web - CSS Pet Informática - UEM “ O HTML estrutura e marca o conteúdo, já o CSS fica com a responsabilidade sobre a parte visual do documento”
  3. 3. Sintaxe do CSS body { background-color: #000000; } h1 { color: red; text-align: center; } Capacitação para Web - CSS Pet Informática - UEM Propriedade Valor Seletor Declaração Declaração
  4. 4. O box model! Capacitação para Web - CSS Pet Informática - UEM p { width:100px; background-color:#f2f2f2; font-family:Arial; font-size:11px; font-color:#666666; padding:10px; margin-top: 10px; margin-left: 10px; margin-right: 10px; margin: bottom: 10px; border: solid 1px #cccccc; }
  5. 5. Tipos de Seletores <ul><li>tag </li></ul><ul><ul><li>Pré-definida pela linguagem utilizada. </li></ul></ul><ul><ul><li>Ex: <h1>, <p>, <strong> </li></ul></ul><ul><li>.class </li></ul><ul><ul><li>Definido pelo utilizador, especialmente usado para definição de estilos repetitívos. </li></ul></ul><ul><ul><li>Ex: p.minhaclasse, p.classetexto </li></ul></ul><ul><li>#id </li></ul><ul><ul><li>Também definido pelo utilizador, adequado para definição de estilos únicos!! </li></ul></ul><ul><ul><li>Ex: #meuDiv, #rodapé </li></ul></ul>Capacitação para Web - CSS Pet Informática - UEM
  6. 6. Utilizando o CSS <ul><li>No HTML </li></ul><ul><ul><li><head> </li></ul></ul><ul><ul><li><style type=“text/css”> </li></ul></ul><ul><ul><li>body { font-family:Verdana; font-size: 10px; background-color:#666666; } </style> </li></ul></ul><ul><ul><li></head> </li></ul></ul><ul><li>Na TAG </li></ul><ul><ul><li><p style=“color:red;”>Ronaldo</p> </li></ul></ul><ul><li>Por arquivo externo </li></ul><ul><ul><li><head> </li></ul></ul><ul><ul><li><link type=“text/css” rel=“stylesheet” href=“minhafolha.css”> </li></ul></ul><ul><ul><li></head> </li></ul></ul>Capacitação para Web - CSS Pet Informática - UEM
  7. 7. Brincando com CSS <ul><li>O poder do CSS!! </li></ul><ul><li>http:// www.csszengarden.com / </li></ul><ul><li>ESPN </li></ul><ul><li>G1 </li></ul><ul><li>Orkut / YouTube / UEM </li></ul><ul><li>Google </li></ul><ul><li>Referências Utilizadas </li></ul><ul><li>http://www.maujor.com/ </li></ul><ul><li>http://www.smashingmagazine.com </li></ul>Capacitação para Web - CSS Pet Informática - UEM

×