Apresentacao aula5
-
Upload
helder-oliveira -
Category
Documents
-
view
53 -
download
1
Transcript of Apresentacao aula5
![Page 1: Apresentacao aula5](https://reader031.fdocumentos.tips/reader031/viewer/2022013108/559e4d2d1a28abcd588b4696/html5/thumbnails/1.jpg)
Concepção de Websites - Introdução às CSS’s - Hélder Oliveira
Concepção de Websites
Introdução às CSS’s
![Page 2: Apresentacao aula5](https://reader031.fdocumentos.tips/reader031/viewer/2022013108/559e4d2d1a28abcd588b4696/html5/thumbnails/2.jpg)
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
![Page 3: Apresentacao aula5](https://reader031.fdocumentos.tips/reader031/viewer/2022013108/559e4d2d1a28abcd588b4696/html5/thumbnails/3.jpg)
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”;
}
![Page 4: Apresentacao aula5](https://reader031.fdocumentos.tips/reader031/viewer/2022013108/559e4d2d1a28abcd588b4696/html5/thumbnails/4.jpg)
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)
![Page 5: Apresentacao aula5](https://reader031.fdocumentos.tips/reader031/viewer/2022013108/559e4d2d1a28abcd588b4696/html5/thumbnails/5.jpg)
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{
(…)}
![Page 6: Apresentacao aula5](https://reader031.fdocumentos.tips/reader031/viewer/2022013108/559e4d2d1a28abcd588b4696/html5/thumbnails/6.jpg)
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>
![Page 7: Apresentacao aula5](https://reader031.fdocumentos.tips/reader031/viewer/2022013108/559e4d2d1a28abcd588b4696/html5/thumbnails/7.jpg)
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>
![Page 8: Apresentacao aula5](https://reader031.fdocumentos.tips/reader031/viewer/2022013108/559e4d2d1a28abcd588b4696/html5/thumbnails/8.jpg)
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{
(…)
}
![Page 9: Apresentacao aula5](https://reader031.fdocumentos.tips/reader031/viewer/2022013108/559e4d2d1a28abcd588b4696/html5/thumbnails/9.jpg)
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{
(…)
}
![Page 10: Apresentacao aula5](https://reader031.fdocumentos.tips/reader031/viewer/2022013108/559e4d2d1a28abcd588b4696/html5/thumbnails/10.jpg)
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>
![Page 11: Apresentacao aula5](https://reader031.fdocumentos.tips/reader031/viewer/2022013108/559e4d2d1a28abcd588b4696/html5/thumbnails/11.jpg)
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>
![Page 12: Apresentacao aula5](https://reader031.fdocumentos.tips/reader031/viewer/2022013108/559e4d2d1a28abcd588b4696/html5/thumbnails/12.jpg)
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
![Page 13: Apresentacao aula5](https://reader031.fdocumentos.tips/reader031/viewer/2022013108/559e4d2d1a28abcd588b4696/html5/thumbnails/13.jpg)
Concepção de Websites - Introdução às CSS’s - Hélder Oliveira
Questões?
![Page 14: Apresentacao aula5](https://reader031.fdocumentos.tips/reader031/viewer/2022013108/559e4d2d1a28abcd588b4696/html5/thumbnails/14.jpg)
Concepção de Websites - Introdução às CSS’s - Hélder OliveiraFIM