14 CSS Introdução

241 visualizações

Publicada em

Aprendendo como usar CSS

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

Nenhuma nota no slide

14 CSS Introdução

  1. 1. PáginasWeb com: HTML, CSS e JavaScript Profª. Marlene da Silva Maximiano de Oliveira & Profª. Alessandra Aparecida da Silva
  2. 2. CSS Cascading Style Sheetes (Folhas de Estilo em Cascata)
  3. 3. CSS • Usamos CSS para fazer layouts de várias páginas ao mesmo tempo sem ter que alterar o HTML das mesmas.
  4. 4. HTML e CSS HTML é responsável pelo trabalho pesado (a estrutura), enquanto CSS dá o toque de elegância (layout).
  5. 5. Benefícios do CSS • Economizar o tempo; • Diminuir o tamanho do código da página web; • A página é carregada mais rapidamente; • Facilidade em manter e fazer alterações na página; • Mais controle no layout da página.
  6. 6. Exemplo <html> <head> <title>Minha primeira páginaCSS </title> <style type="text/css"> h1 {font-size: 30px; font-family: arial} h2 {font-size: 15px; font-family: courier} p {font-size: 8px; font-family: times new roman} </style> </head> <body> <h1>Minha primeira páginaCSS</h1> <h2>Bem vindo à minha primeira páginaCSS</h2> <p>Aqui você verá como funcionaCSS</p> </body> </html>
  7. 7. body {background-color: #FF0000;} Como você pode notar os códigos HTML e CSS são mais ou menos parecidos. O exemplo acima serve também para demonstrar o fundamento do modelo CSS: seletor {propriedade: valor} seletor: Em qual tag será aplicada a propriedade. Por exemplo: body propriedade: A propriedade pode ser como por exemplo: a cor do fundo valor: O valor da propriedade cor do fundo por exemplo: vermelha(“#FF0000”)
  8. 8. Aplicação do CSS O CSS pode ser aplicado de três maneiras distintas: Método 1: In-line (o atributo style) Método 2: Interno (a tag style) Método 3: Externo (link para uma folha de estilos)
  9. 9. Método 1: In-line (o atributo style) Uma maneira de aplicar CSS é pelo uso do atributo style do HTML.Tomando como base o exemplo mostrado anteriormente à cor vermelha para o fundo da página pode ser: <html> <head> <title>Exemplo</title> </head> <body style="background-color: #FF0000;"> <p>Esta é uma página com fundo vermelho</p> </body> </html>
  10. 10. Método 2: Interno (a tag style) Uma outra maneira de aplicar CSS e pelo uso da tag <style> do HTML.Como mostrado: <html> <head> <title>Exemplo</title> <style type="text/css"> body {background-color: #FF0000;} </style> </head> <body> <p>Esta é uma página com fundo vermelho</p> </body> </html>
  11. 11. Método 3: Externo (link para uma folha de estilos) O método recomendado é o de “linkar” para uma folha de estilos externa. Uma folha de estilos externa é um simples arquivo de texto com a extensão .css.Tal como qualquer outro tipo de arquivo você pode colocar uma folha de estilos tanto no servidor como no disco rígido.
  12. 12. Exemplo Vamos supor, por exemplo, que sua folha de estilos tenha sido nomeada de estilo.css e está localizada no mesmo diretório da página. O que você tem a fazer é criar um link no documento HTML (index.html) para a folha de estilos (estilo.css). O link é criado em uma simples linha de código HTML como mostrado a seguir: <link rel="stylesheet" type="text/css" href="estilo.css" />
  13. 13. Exemplo Notar que o caminho para a folha de estilos é indicado no atributo href. Esta linha de código deve ser inserida na seção header do documento HTML, isto é, entre as tags <head> e </head>. Conforme mostrado abaixo: <html> <head> <title>Meu documento</title> <link rel="stylesheet" type="text/css" ref="style/style.css" /> </head> <body>
  14. 14. Vejamos na prática Dentro do editor e crie dois arquivos — um arquivo HTML e um arquivo CSS — com os seguintes conteúdos: Index.html <html> <head> <title>Meu documento</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>Minha primeira folha de estilos</h1> </body> </html>
  15. 15. Vejamos na prática - continuação estilo.css body { background-color: #FF0000; }
  16. 16. Salvando Salve os dois arquivos no mesmo diretório. Lembre-se de salvar os arquivos com a extensão apropriada (".css" e ".html"(ou “htm”). Abra index.html no seu navegador e veja uma página com o fundo vermelho.

×