Internet I - Aula 04 - Coisando o HTML com o CSS

298 visualizações

Publicada em

Aula 04 de Internet I, ensinando a usar CSS para definir estilos no HTML.

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

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

Nenhuma nota no slide

Internet I - Aula 04 - Coisando o HTML com o CSS

  1. 1. Internet I “Coisando” o HTML com o CSS Prof. Manoel Afonso
  2. 2. O que é CSS? É pra temperar comida?  CSS é a sigla de Cascade Style Sheet, folha de estilos em cascata. É uma linguagem que aplica formatações de estilo e de layout a documentos HTML.  CSS é capaz de definir como os elementos HTML serão exibidos na página.  Assim com o HTML, você não programa em CSS;
  3. 3. Porque e como usar essa nova coisa?  Porque:  Depois de a tag <font> ter sido incluída no HTML, os desenvolvedores passaram a aplicar cores, tamanhos e diversos outros estilos aos textos das páginas. No entanto, como um site pode conter muitas páginas, a alteração de cor de um texto que precisasse ser feita em todo o site necessitava de manutenção em todas as páginas, gastando muito tempo.  Como:  Assim como o HTML há diversos editores (IDEs) que trabalham com documentos CSS, geralmente são os mesmos do HTML:  Aptana Studio;  Bloco de Notas;  Notepad++;
  4. 4. Entendendo  As declarações, que ficam dentro de chaves { }, consistem de uma propriedade e um valor.  A propriedade é o atributo de estilo que será alterado: color e font-size, no exemplo acima.  O valor da propriedade é o que vai alterar, de fato, o elemento: blue e 12px.
  5. 5. E o código?  No exemplo de código abaixo, por exemplo, o elemento <p> está sendo estilizado: o atributo color (cor do texto) recebeu o valor red (vermelho), e o atributo text-align (alinhamento do texto) recebeu o valor center (centralizado).  O código CSS jamais irá conter tags. Os seletores referem-se apenas ao nome da tag. O seletor p, por exemplo, referencia a tag <p>
  6. 6. Tipos de CSS  Há, basicamente, três maneiras diferentes de inserir CSS a uma página HTML:  Código CSS inline;  Código CSS interno;  Arquivo CSS externo;
  7. 7. Código CSS inline  Para aplicar estilos inline, utiliza-se o atributo style no elemento que se pretende estilizar. Esse atributo pode conter qualquer propriedade CSS, por exemplo:
  8. 8. Código CSS interno  Códigos CSS internos devem ser declarados na seção <head> do arquivo HTML utilizando a tag <style>
  9. 9. Arquivo CSS externo  Os arquivos CSS externos são ideais para aplicar estilos a muitas páginas. Também são a maneira mais correta de se desenvolver sites, pois seguem os Web Standards que recomendam a separação de códigos.  Para utilizar arquivos CSS externos em uma página HTML, o documento HTML deve conter um link para o arquivo de estilos, utilizando a tag <link> na seção <head>  O href está referenciando outro documento que está na mesma pasta que o nosso HTML;
  10. 10. Larga as dúvida ae pá nóis!
  11. 11. Exercícios  1) Construa uma página HTML utilizando tudo que foi mostrado na ultima aula para um dos itens:  Sertanejo;  Gospel;  Heavy Metal;  Rock;  Pop;  Reggae;  PS: Sim, é para HOJE!

×