Introdução às CSS com definições externas e internas

Concepção de Websites - Introdução às CSS’s - Hélder Oliveira
Concepção de Websites
Introdução às CSS’s

O que são as CSS’s?
• CSS = Cascade Style Sheets
• Introduzidas no HTML 4
• Separação entre estilo da página e
conteúdos
• Compatível com a maioria dos
browsers

Definição de um estilo
• Sintaxe básica:
<selector>{
<propriedade1>: <valor1>;
<propriedade2>: <valor2>;
}
• Exemplo:
.estilo1{
color: #FF0000;
font-family: “Arial”;
font-size: “Arial”;
}

Tipos de definição de estilos
• Externa
– Uso de um ficheiro próprio
• Interna
– Definição no próprio ficheiro HTML em zona
específica
• Local
– Definição directa na tag (não usa selector)

Definição Externa
• Usa um ficheiro
independente apenas
com definição de
estilos
• Necessária a definição
de uma ligação ao
ficheiro CSS no
cabeçalho HTML
• Permite partilha entre
vários documentos
HTML
INDEX.HTM
<HTML>
<HEAD>
<LINK (…) href=“ESTILOS.CSS”/>
</HEAD>
<BODY>
</BODY>
</HTML>
ESTILOS.CSS
.estilo1{
(…)
}
.estilo2{
(…)
}

Definição Interna
• Uso do mesmo
documento HTML onde
os estilos são aplicados
• Definido, normalmente,
no cabeçalho
• Para definição de estilos
específicos e repetitivos
no mesmo documento
• Melhora a portabilidade
• Não permite partilha com
outros documentos
INDEX.HTM
<HTML>
<HEAD>
<STYLE type=“text/css”>
.estilo1{
(…)
}
.estilo2{
(…)
}
</STYLE>
</H EAD>
<BODY>
</BODY>
</HTML>

Definição Local
• Não usa selector
• Aplicação do estilo
na própria tag
• Usa o atributo “style”
• Usado em situações
pontuais e muito
específicas
• Exemplos:
<p style="color:#FF0000">
Aplicações Informáticas A </p>
<td style=“background-
color:#EEE”> </td>

Selector
• Permite estabelecer a
ligação entre a definição
de um estilo e a tag onde
este será aplicado
• Útil apenas em classes
• Existem 3 tipos
fundamentais:
– Nome da tag
– Identificadores
– Classes
• Exemplos:
td{
(…)
}
#link1{
(…)
}
.texto{
(…)
}

Definição do selector
• Nome da tag
– Assume o mesmo nome da
tag à qual se pretende
aplicar o estilo
– Todas as tags com esse
nome serão afectas
• Exemplo:
td{
(…)
}
body{
(…)
}
a{
(…)
}

• Identificador de
elementos HTML
– Ligação feita com base
no atributo ID de cada
tag
– A indicação do valor do
atributo ID deve ser
precedida de #
• Exemplo
#celula1{
(…)
}
~
<td id=“celula1”></td>

• Classes
– É dado um nome
facultativo ao estilo
– O nome da classe é sempre
precedido de um ponto
(ex: .estilo1)
– Para aplicação na tag usa-
se o atributo class
• Exemplo
.estilo1{
(…)
}
td.estilo2{
(…)
}
<p class=“estilo1”></p>
<td class=“estilo1”></td>
<p class=“estilo2”></p>
<td class=“estilo2”></td>

Prioridades
• Estabelecidas em caso
de redefinição de
propriedades:
1. Externo
2. Interno
3. Local

Questões?

FIM

Introdução às CSS com definições externas e internas

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (8)

Semelhante a Introdução às CSS com definições externas e internas

Semelhante a Introdução às CSS com definições externas e internas (20)

Introdução às CSS com definições externas e internas