Concepção de Websites - Introdução às CSS’s - Hélder Oliveira Concepção de Websites Introdução às CSS’s
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Concepção de Websites - Introdução às CSS’s - Hélder Oliveira
Concepção de Websites
Introdução às CSS’s
Concepção de Websites - Introdução às CSS’s - Hélder Oliveira
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
Concepção de Websites - Introdução às CSS’s - Hélder Oliveira
Definição de um estilo
• Sintaxe básica:
<selector>{
<propriedade1>: <valor1>;
<propriedade2>: <valor2>;
}
• Exemplo:
.estilo1{
color: #FF0000;
font-family: “Arial”;
font-size: “Arial”;
}
Concepção de Websites - Introdução às CSS’s - Hélder Oliveira
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)
Concepção de Websites - Introdução às CSS’s - Hélder Oliveira
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{
(…)}
Concepção de Websites - Introdução às CSS’s - Hélder Oliveira
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>
Concepção de Websites - Introdução às CSS’s - Hélder Oliveira
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>
Concepção de Websites - Introdução às CSS’s - Hélder Oliveira
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{
(…)
}
Concepção de Websites - Introdução às CSS’s - Hélder Oliveira
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{
(…)
}
Concepção de Websites - Introdução às CSS’s - Hélder Oliveira
Definição do selector
• 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>
Concepção de Websites - Introdução às CSS’s - Hélder Oliveira
Definição do selector
• 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>
Concepção de Websites - Introdução às CSS’s - Hélder Oliveira
Prioridades
• Estabelecidas em caso de redefinição de propriedades:
1. Externo
2. Interno
3. Local
Concepção de Websites - Introdução às CSS’s - Hélder Oliveira
Questões?
Concepção de Websites - Introdução às CSS’s - Hélder OliveiraFIM
Related Documents
