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

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a Html com css

Html com css