Latest web development tutorials

Criar CSS

Ao ler uma folha de estilo, o navegador será baseado em seu documento HTML formatado.

Como inserir a folha de estilo

Insira a folha de estilo de três maneiras:

  • folha de estilo externa
  • folha de estilo interna
  • estilo em linha

folha de estilo externa

Quando o estilo é aplicado a muitas páginas necessário, uma folha de estilo externa seria a escolha ideal. No caso de uma folha de estilo externa, você pode alterar um arquivo para alterar a aparência de todo o site. Cada página usa a tag <link> para conectar-se a uma folha de estilo. <Link> tag na (documento) Head:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

O navegador irá ler a partir da declaração de estilo meuestilo.css arquivo de acordo com ela para formatar o documento.

folha de estilo externa pode ser editado em qualquer editor de texto. Os arquivos não podem conter quaisquer tags HTML. folha de estilo deve ser salvo com a extensão .css. Aqui está um exemplo de um arquivo de folha de estilo:

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("../images/back40.gif");}

observação Não deixe espaços entre o valor e as unidades de propriedade. Se você usar o "margin-left: 20 px" em vez "margin-left: 20px", é válida apenas no IE 6, mas ele não funciona no Mozilla / Firefox ou o Netscape na.

folha de estilo interna

Quando um único documento requer um estilo especial, folha de estilo interna deve ser usado. Você pode usar a tag <style> no cabeçalho do documento para definir folha de estilo interna, como este:

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

estilo em linha

Devido ao desempenho e conteúdo misturados, estilos inline vai perder muitas das vantagens de folhas de estilo. Por favor, advertem este método, por exemplo, quando o modelo tem de ser aplicada apenas uma vez em um elemento.

Para usar estilos inline, você precisa usar o atributo de estilo (estilo) na tag relevante. atributo de estilo pode conter qualquer propriedade CSS. Este exemplo mostra como mudar a cor do parágrafo e a margem esquerda:

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

vários estilos

Se alguns atributos são definidos no mesmo seletor em diferentes folhas de estilo, em seguida, o valor da propriedade a partir da folha de estilo mais específica é herdada.

Por exemplo, uma folha de estilo externa tem três propriedades para o seletor h3:

h3
{
color:red;
text-align:left;
font-size:8pt;
}

A folha de estilo interna tem duas propriedades para o seletor h3:

h3
{
text-align:right;
font-size:20pt;
}

Se o estilo tem folhas de estilo internas e folhas de estilo externas ligar esta página, ao mesmo tempo, em seguida, obter h3 é:

color:red;
text-align:right;
font-size:20pt;

Essa é a propriedade de cor será herdada da folha de estilo externa eo arranjo de texto (text-alinhamento) e tamanho da fonte (font-size) serão substituídas pelas regras internas das folhas de estilo.

Vários estilos são laminadas uma

As folhas de estilo permitem que a informação estilo especificado de várias maneiras. Os estilos podem ser especificadas em um único elemento HTML, o primeiro elemento da página HTML, ou em um arquivo CSS externo. Mesmo que várias folhas de estilo externas podem ser referenciadas dentro de um único documento HTML.

A ordem de empilhamento

Quando o mesmo elemento HTML é definida por mais de um estilo, o estilo que vai usá-lo?

Em geral, todos os estilos serão empilhadas em uma nova folha de estilo virtual de acordo com as seguintes regras, onde o número 4 tem a maior prioridade.

  1. navegador padrão
  2. folha de estilo externa
  3. folha de estilo interna (no <head> tag dentro)
  4. de estilo inline (elementos HTML para dentro)

Assim, um estilo inline (dentro de um elemento HTML) tem a prioridade mais alta, o que significa que ele tem precedência sobre a seguinte declaração de estilo: declaração de estilo etiqueta, estilo declaração de estilo folha externa, ou declaração de estilo navegador (valor padrão).

observaçãoDica: Se você usar um arquivo de estilo externo no <head> também é definido o estilo, a folha de estilo vai substituir os arquivos externos estilo interno.