Html com css

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 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

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>

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.

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!

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.

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;
}

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>

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>

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;
}

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".

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.

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;}

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.

Vincular CSS ao HTML

• Quando um navegador lê uma folha de estilo,
ele irá formatar o documento de acordo com
ele.

Maneiras de inserir CSS

• Há três maneiras de inserir uma folha de
estilo:
– Folha de estilo externa
– Folha de estilo interna
– Estilo inline

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:

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;}
body {background-image:url("images/back40.gif");}

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;}
body {background-image:url("images/back40.gif");}
</style>
</head>

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>

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; }

• E uma folha de estilo interna tem estas
propriedades para o seletor h3:

<head>
<style>
h3{text-align:right; font-size:20pt;}
</style>
</head>


• 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.

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.

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)

• 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.

Html com css

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (10)

Similar a Html com css

Similar a Html com css (20)

Último

Último (9)

Html com css