Home » Tecnologia
Tipos de CSS: Inline, incorporado e Linkado
Definição de CSS e o uso de seletores tags, classes e identificadores
Gostou? Recomende:
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.
O CSS deve ser usado em conjunto e em conformidade com o HTML, deve ser parte obrigatória de todo projeto web.
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;
}
Participe do Simulado de HTML
Veja também:
Compartilhe com seus amigos:
// Comentários
kcll // ssa // 18/08/2009 10:29:00
Finalmente encontrei o que desejava... As informações aqui contidas foram muito utéis...
Continuem assim, nota 100000000000, valeu mesmo!!!!
Muito Obrigada!
Guilherme // Igarassu-PE // 27/05/2010 14:05:00
cara meus parabéns seus tutorias são muito bons continua assim!
Jean Carlo // Divinópolis-MG // 01/02/2011 13:56:00
Ótimo! Simples, claro e com exemplos
Higor // João Neiva // 21/05/2011 14:43:00
Muito legal o post. Me ajudou bastante!!! Obrigado!!!