EDUCAÇÃO / TECNOLOGIA / UTILIDADE PÚBLICA

Tipos de CSS: Inline, incorporado e Linkado

Definição de tipos de CSS e o uso de tags seletores, classes e identificadores. Veja as várias formas de usar CSS.

CSS - Cascading Style Sheets (Folha de Estilos em Cascata), é uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML. Seu principal benefício é prover a separação entre o formato e o conteúdo de um documento.

[QUEBRA]

O CSS deve ser usado em conjunto e em conformidade com o HTML, deve ser parte obrigatória de todo projeto web. Abaixo mostrei as diversas formas de usar a linguagem de estilo em um website qualquer. Vamos lá:

Declarações

As declarações CSS são escritas da seguinte forma:

color: #ff0000;

  • color - nome da propriedade
  • (:)  separa a propriedade do seu valor
  • #ff0000 - valor da propriedade 
  • (;) finaliza uma instrução CSS

Tipos de CSS

Tipos de CSS não se refere a forma de escrever as declarações e sim o local onde ele é inserido. Se ele estiver junto ao código HTML, chamamos de CSS inline, no início da página HTML ele é incorporado e quando colocado em um arquivo externo, ele é CSS linkado.

Se analisarmos desta forma, podemos dizer que há três tipos de CSS: Inline, incorporado e linkado. Vejamos cada um deles.

CSS Inline

O CSS Inline é aquele que é inserido junto ao código HTML, através do atributo style. Sua aplicação é bastante questionada já que o modelo fica bastante parecido com a antiga formatação via HTML.

<p style="color: #ffff00; font-size: 11px ">

CSS Incorporado

CSS incorporado é aquele que é inserido no início do código HTML dentro da tag. o modelo incorporado é melhor que o inline, mas ainda apresenta deficiências, já que ele terá efeito apenas sobre a página e não poderá ser reaproveitado para outras páginas.

<style type="text/css">
p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #FF0000;
}
</style>

CSS Linkado

CSS linkado é o modelo recomendado, pois neste modelo todo o código CSS fica em um arquivo separado, podendo ser linkado a várias páginas do site. Este é o melhor modelo para promover o reaproveitamento do código.

<link href="estilo.css" rel="stylesheet" type="text/css" media="screen" />

Tipos de aplicação

Quanto a aplicação é possível usar o CSS em quatro tipos de elementos HTML, seletores, tags, classes e identificadores.

Seletores

Seletores são os elementos que o CSS pode formatar. São eles: Tags do HTML, classes (class) e identificadores (ID´s)

Tags

Qualquer tag do HTML poderá ser formatada em CSS, porém, algus recursos não provocarão efeito nenhum. Por exemplo: aplicar cor em uma tag .

Para formatar tags, basta colocar o nome da tag como seletor. Exemplo:

body{
    font-family: Verdana, Arial, Tahoma;
    font-size: 12px;
    background-color: #E3E3E3;
}

Classes

Diferente das tags, as classes não são aplicadas automaticamente no HTML. Uma vez criada, uma classe deverá ser aplicada manualmente no HTML.

A função das classes é fazer formatações específicas onde as definições de tags não são atendidas.

.recuo {
    font-size: 10px;
    color: #ff0000;
}

Identificadores

Os identificadores em CSS correspondem ao ID no HTML, ou seja, quando você criar um ID no HTML significa que ele poderá ser formatado no CSS.

#site{ 
    width: 500px;
    background-color: #ffffff;
}

 

 

Veja também

Comentários

Finalmente encontrei o que desejava... As informações aqui contidas foram muito utéis... Continuem assim, nota 100000000000, valeu mesmo!!!! Muito Obrigada! kcll // ssa
cara meus parabéns seus tutorias são muito bons continua assim! Guilherme // Igarassu-PE
Ótimo! Simples, claro e com exemplos Jean Carlo // Divinópolis-MG
Muito legal o post. Me ajudou bastante!!! Obrigado!!! Higor // João Neiva
© 2008-2017 | LUIS.BLOG.BR | Política de Privacidade | Em Jesus Cristo eu confio