HTML COM CSS Nadijar Casarin
HTML e CSS• HTML – Utilizado para estruturar paginas web;• CSS – Utilizado para estilizar paginas web;• Um depende o outro.
O que é CSS?• CSS significa C cascading S style S sheets ou (Folhas de  Estilo em Cascata)• Os estilos definem como exibir...
Resolvendo um grande problema• HTML nunca foi destinado a conter tags para a  formatação de um documento.• HTML se destina...
Resolvendo um grande problema• Quando tags como <font> e atributos de cor foram  adicionados à especificação HTML 3.2, com...
CSS poupa muito trabalho!• CSS define como elementos HTML devem ser  exibidos.• Estilos são normalmente guardados em  arqu...
Sintaxe CSS• Uma regra CSS tem duas partes principais: um seletor, e  uma ou mais declarações:• O seletor é normalmente o ...
Exemplo CSS• A declaração CSS sempre termina com um ponto  e vírgula, e os grupos de declaração são cercados  por chaves: ...
Sintaxe – Exemplo 01<html><head><style>body {background-color:yellow;}h1 {font-size:36pt;}/*pode ser 36px*/h2 {color:blue;...
Exemplo 01
Sintaxe – Exemplo 02<html><head><style>body {background-color:tan;}h1 {color:maroon;font-size:20pt;}hr {color:navy;}p {fon...
Exemplo 02
Comentários CSS• Comentários são usados para explicar seu código, e pode  ajudá-lo quando você editar o código-fonte em um...
Os Seletores id e classe• Além de definir um estilo para um elemento  HTML, CSS permite que você especifique seus  próprio...
O seletor ID • O seletor id é usado para especificar um estilo   para um elemento único e exclusivo. • O seletor id usa o ...
O seletor de classe• O seletor de classe é usado para especificar um estilo para  um grupo de elementos. Ao contrário do s...
O seletor de classe• Você também pode especificar que somente  determinados elementos HTML devem ser  afetados por uma cla...
Vincular CSS ao HTML• Quando um navegador lê uma folha de estilo,  ele irá formatar o documento de acordo com  ele.
Exemplo com estilo
Exemplo com estilo
Maneiras de inserir CSS• Há três maneiras de inserir uma folha de  estilo:  – Folha de estilo externa  – Folha de estilo i...
Folha de Estilo Externa• Uma folha de estilo externa é ideal quando o  estilo é aplicado a muitas páginas.• Com uma folha ...
Folha de Estilo Externa• Exemplo:   <head>   <link rel="stylesheet" type="text/css" href="mystyle.css">   </head>• Uma fol...
Folha de Estilo Interna• Uma folha de estilo interna deve ser usada quando o  documento tem um estilo único.• Você define ...
Estilos inline• Um estilo Inline perde muitas das vantagens de folhas de  estilo, misturando conteúdo com apresentação. Ut...
Vários Style Sheets• Se algumas propriedades foram definidas para  o mesmo seletor em diferentes folhas de  estilo, os val...
Vários Style Sheets• E uma folha de estilo interna tem estas  propriedades para o seletor h3:  <head>  <style>      h3{tex...
Vários Style Sheets• Se a página com a folha de estilo interna  também possui links para a folha de estilo  externa as pro...
Vários estilos em cascata em Um• Os estilos podem ser especificados:• dentro de um elemento HTML• dentro da seção head de ...
Ordem em cascata• O estilo será usado quando há mais de um estilo  especificado para um elemento HTML?• De modo geral, pod...
• Então, um estilo inline (dentro de um elemento  HTML) tem a prioridade mais alta, o que significa  que ele irá substitui...
Próximos SlideShares
Carregando em…5
×

Html com css

911 visualizações

Publicada em

Aula de Ferramentas para criação de Web Sites

Publicada em: Design
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
911
No SlideShare
0
A partir de incorporações
0
Número de incorporações
4
Ações
Compartilhamentos
0
Downloads
21
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Html com css

  1. 1. HTML COM CSS Nadijar Casarin
  2. 2. HTML e CSS• HTML – Utilizado para estruturar paginas web;• CSS – Utilizado para estilizar paginas web;• Um depende o outro.
  3. 3. O que é CSS?• CSS significa C cascading S style S sheets ou (Folhas de Estilo em Cascata)• Os estilos definem como exibir elementos HTML• Estilos foram adicionados ao HTML 4.0 para resolver um problema• Folhas de estilo externas pode salvar um monte de trabalho• Folhas de estilo externas são armazenados em arquivos CSS
  4. 4. Resolvendo um grande problema• HTML nunca foi destinado a conter tags para a formatação de um documento.• HTML se destina a definir o teor de um documento, tal como: – <h1> Este é um título </ h1> – <p> Este é um parágrafo. </ p>
  5. 5. Resolvendo um grande problema• Quando tags como <font> e atributos de cor foram adicionados à especificação HTML 3.2, começou um pesadelo para os desenvolvedores web.• Desenvolvimento de web sites de grande porte, onde as fontes e informações de cores foram adicionadas para cada página, tornou-se um processo longo e caro.• Para resolver este problema, o World Wide Web Consortium (W3C), criou CSS.• Em HTML 4.0, toda a formatação pode ser removido do documento HTML, e armazenado em um arquivo CSS separado.• Todos os browsers suportam CSS hoje.
  6. 6. CSS poupa muito trabalho!• CSS define como elementos HTML devem ser exibidos.• Estilos são normalmente guardados em arquivos externos.• Css. Folhas de estilo externas permitem que você altere a aparência e o layout de todas as páginas de um site, apenas editando um único arquivo!
  7. 7. Sintaxe CSS• Uma regra CSS tem duas partes principais: um seletor, e uma ou mais declarações:• O seletor é normalmente o elemento HTML que você deseja estilizar.• Cada declaração consiste de uma propriedade e um valor.• A propriedade é o atributo de estilo que você deseja alterar.• Cada propriedade tem um valor.
  8. 8. Exemplo CSS• A declaração CSS sempre termina com um ponto e vírgula, e os grupos de declaração são cercados por chaves: – p {color:red;text-align:center;}• Para tornar a CSS mais legível, você pode colocar uma declaração em cada linha, como esta: –P { color:red; text-align:center; }
  9. 9. Sintaxe – Exemplo 01<html><head><style>body {background-color:yellow;}h1 {font-size:36pt;}/*pode ser 36px*/h2 {color:blue;}p {margin-left:50px;}</style></head><body><h1>Este cabeçalho tem a fonte com tamanho 36 pontos</h1><h2>Este cabeçalho é azul</h2><p>Este parágrafo tem uma margem esquerda de 50 pixels</p></body></html>
  10. 10. Exemplo 01
  11. 11. Sintaxe – Exemplo 02<html><head><style>body {background-color:tan;}h1 {color:maroon;font-size:20pt;}hr {color:navy;}p {font-size:11pt;margin-left:15px;}a:link {color:green;}a:visited {color:yellow;} /*Só funiona em fontes*/a:hover {color:black;}a:active {color:blue;}</style></head><body><h1>Este é um cabeçalho 1</h1><hr><p>Você pode ver que o estilo formatos de folha do texto</p><p><a href="http://www.w3schools.com" target="_blank">This is a link</a></p></body></html>
  12. 12. Exemplo 02
  13. 13. Comentários CSS• Comentários são usados para explicar seu código, e pode ajudá-lo quando você editar o código-fonte em uma data posterior. Os comentários são ignorados pelos navegadores.• Um comentário CSS começa com "/ *", e termina com "* /", como este: /*Este é um comentário*/ p { text-align:center; /*Este é outro comentário*/ color:black; font-family:arial; }
  14. 14. Os Seletores id e classe• Além de definir um estilo para um elemento HTML, CSS permite que você especifique seus próprios selecionadores chamados "id" e "classe".
  15. 15. O seletor ID • O seletor id é usado para especificar um estilo para um elemento único e exclusivo. • O seletor id usa o atributo id do elemento HTML, e é definido com um "#". • A regra de estilo abaixo será aplicada ao elemento com id = "para1": • HTML – <div id="para1"></div> • Css – #para1{text-align:center; color:red;}Obs.: Você NÃO iniciar um nome de ID com um número! Não vai funcionar no Mozilla/ Firefox.
  16. 16. O seletor de classe• O seletor de classe é usado para especificar um estilo para um grupo de elementos. Ao contrário do seletor id, o seletor classe é mais utilizado mais frequentemente.• Isso permite que você defina um estilo particular de muitos elementos HTML com a mesma classe.• O seletor de classe usa o atributo de classe HTML, e é definido com um "."• No exemplo abaixo, todos os elementos HTML com class = "center" será alinhado ao centro: .center {text-align:center;}
  17. 17. O seletor de classe• Você também pode especificar que somente determinados elementos HTML devem ser afetados por uma classe.• No exemplo abaixo, todos os elementos p com class = "center" será alinhado ao centro: p.center {text-align:center;}Obs.: Você NÃO iniciar um nome de classe com um número! Isso só é suportado peloInternet Explorer.
  18. 18. Vincular CSS ao HTML• Quando um navegador lê uma folha de estilo, ele irá formatar o documento de acordo com ele.
  19. 19. Exemplo com estilo
  20. 20. Exemplo com estilo
  21. 21. Maneiras de inserir CSS• Há três maneiras de inserir uma folha de estilo: – Folha de estilo externa – Folha de estilo interna – Estilo inline
  22. 22. Folha de Estilo Externa• Uma folha de estilo externa é ideal quando o estilo é aplicado a muitas páginas.• Com uma folha de estilo externa, você pode mudar o visual de um site inteiro mudando um arquivo.• Cada página tem link para a folha de estilo usando a tag <link>.• A tag <link> vai dentro da seção head:
  23. 23. Folha de Estilo Externa• Exemplo: <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>• Uma folha de estilo externa pode ser escrita em qualquer editor de texto. O arquivo não deve conter qualquer tag html.• Sua folha de estilo deve ser salvo com a extensão .css• Um exemplo de um arquivo de folha de estilo é mostrado abaixo: hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");}
  24. 24. Folha de Estilo Interna• Uma folha de estilo interna deve ser usada quando o documento tem um estilo único.• Você define estilos internos na seção head de uma página HTML, usando a tag <style>, como esta: <head> <style> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </style> </head>
  25. 25. Estilos inline• Um estilo Inline perde muitas das vantagens de folhas de estilo, misturando conteúdo com apresentação. Utilize este método com moderação!• Para usar estilos Inline você usa o atributo de estilo na marca relevante.• O atributo de estilo pode conter qualquer propriedade CSS.• O exemplo mostra como alterar a cor ea margem esquerda de um parágrafo:<p style="color:sienna;margin-left:20px">Este é um parágrafo.</p>
  26. 26. Vários Style Sheets• Se algumas propriedades foram definidas para o mesmo seletor em diferentes folhas de estilo, os valores serão herdados pela folha de estilo mais específico.• Por exemplo, uma folha de estilo externa tem estas propriedades para o seletor h3: h3{color:red; text-align:left; font-size:8pt; }
  27. 27. Vários Style Sheets• E uma folha de estilo interna tem estas propriedades para o seletor h3: <head> <style> h3{text-align:right; font-size:20pt;} </style> </head>
  28. 28. Vários Style Sheets• Se a página com a folha de estilo interna também possui links para a folha de estilo externa as propriedades para h3 serão:<h3 style="color:red; text-align:right; font-size:20pt;">Este é um h3.</h3>• A cor é herdada da folha de estilo externa e o alinhamento de texto e o tamanho da fonte é substituída pela folha de estilo interno.
  29. 29. Vários estilos em cascata em Um• Os estilos podem ser especificados:• dentro de um elemento HTML• dentro da seção head de uma página HTML• em um arquivo CSS externo• Dica: Mesmo múltiplas folhas de estilo externas podem ser referenciadas dentro de um único documento HTML.
  30. 30. Ordem em cascata• O estilo será usado quando há mais de um estilo especificado para um elemento HTML?• De modo geral, podemos dizer que todos os estilos "em cascata" em uma nova folha de estilo "virtual", pelas regras a seguir, o número quatro tem a mais alta prioridade:1. Padrão do navegador2. Folha de estilo externa3. Folha de estilo interna (na seção de cabeçalhoB)4. Estilo inline (dentro de um elemento HTML)
  31. 31. • Então, um estilo inline (dentro de um elemento HTML) tem a prioridade mais alta, o que significa que ele irá substituir um estilo definido dentro da tag <head>, ou em uma folha de estilo externa Nota: Se o link para a folha de estilo externa é colocada após a folha de estilo interna em HTML <head>, a folha de estilo externa irá substituir a folha de estilo interna! Sempre será executada na ordem de colocação.

×