O documento descreve como HTML e CSS são usados juntos para estruturar e estilizar páginas da web. CSS é usado para definir como os elementos HTML são exibidos, enquanto HTML define o conteúdo da página. Folhas de estilo externas permitem alterar a aparência de todo um site editando um único arquivo CSS.
2. HTML e CSS
• HTML – Utilizado para estruturar paginas web;
• CSS – Utilizado para estilizar paginas web;
• Um depende o outro.
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. 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. 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. 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. 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. 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. 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>
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>
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. 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. 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. 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. 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 pelo
Internet Explorer.
18. Vincular CSS ao HTML
• Quando um navegador lê uma folha de estilo,
ele irá formatar o documento de acordo com
ele.
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. 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. 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. 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. 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. 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. 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. 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. 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. 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 navegador
2. Folha de estilo externa
3. Folha de estilo interna (na seção de cabeçalhoB)
4. Estilo inline (dentro de um elemento HTML)
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.