Scribd
Carregar
3 visualizações12 páginas

Introdução ao CSS 3: Estilos e Aplicações

O documento apresenta uma introdução ao CSS (Cascading Style Sheets), explicando sua função na definição de estilos para elementos HTML. Ele detalha os tipos de folhas de estilo (externas, internas e inline), a importância da separação entre design e conteúdo, e como aplicar estilos usando classes e IDs. Além disso, aborda o uso de pseudo-classes para estilizar estados específicos de elementos.

Enviado por

elianeedna7
Direitos autorais
© All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
3 visualizações12 páginas

Introdução ao CSS 3: Estilos e Aplicações

O documento apresenta uma introdução ao CSS (Cascading Style Sheets), explicando sua função na definição de estilos para elementos HTML. Ele detalha os tipos de folhas de estilo (externas, internas e inline), a importância da separação entre design e conteúdo, e como aplicar estilos usando classes e IDs. Além disso, aborda o uso de pseudo-classes para estilizar estados específicos de elementos.

Enviado por

elianeedna7
Direitos autorais
© All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd

2º Semestre 2023/24

Sumário
1

Introdução ao CSS
O que é que são os CSS?
2

➢ CSS = Cascading Style Sheets


➢ Guardam os estilos que definem a apresentação dos
elementos HTML

➢ Os elementos HTML foram desenvolvidos


unicamente para definir o conteúdo de um
documento!

➢ Isto significa:

➢ Que podemos alterar o layout de um site simplesmente


através do CSS
Tipos de Folhas de estilos
3

❑ Externas (preferêncial)
▪ Definidas num ficheiro externo e
podem aplicar-se a várias páginas

❑ Internas
▪ Definidas na própria página e podem
aplicar-se apenas a uma página

❑ Nas marcas (inline)


▪ Definidas na própria marca
podem aplicar-se apenas a essa marca
Estilos em Linhas nas Marcas
4

➢ É definida dentro da marca, através do atributo style

➢ Afecta apenas essa marca

➢ Exemplo:

<p style=“color: blue; font-size:10pt”>…</p>


Folhas de Estilos Externas
5

➢ Definidas em ficheiros à parte com extensão .css

➢ Escritas em qualquer editor de texto

➢ Ideais para quando um estilo é aplicado a várias páginas

➢ Definição de um estilo
Um selector
pode ser uma tag (marca)
❖ selector { propriedade: valor } ou uma classe de estilos !!!
Exemplos
body { background-color: cyan }
p { color: blue }
Estes estilos aplicam-se ao
body e a todos os <p>
pode ser uma tag (marca)
Folhas de Estilos Externas
6

➢Permite manter uma separação clara entre o design e o


conteúdo.

➢ É mais facil reutilizar o código CSS se estiver num ficheiro


separado. Em vez de escrevermos o mesmo código CSS em
todas as páginas web temos apenas referenciar o mesmo
num único ficheiro CSS através da tag link

➢Podemos fazer grandes alterações as páginas web com


apenas algumas alterações no ficheiro css
Ligação a uma Folha de Estilos Externas
7

➢ Efectuada através da tag (marca) link

➢ Dentro do head (cabeçalho) do documento HTML

➢ Exemplo:
<head>
<link rel=“stylesheet” type=“text/css” href=”[Link]” />
</head>
8
Exemplos

h1 e h2 têm o mesmo
estilo

body {font-family: Times New Roma, Serif; font-size: 11pt}

h1, h2 {font-family: Arial, sans-serif;font-size: 14pt; color: blue}

a {font-family: Arial;font-family:sans-serif; font-size: 9pt;color: red}


a: hover {font-weight: bold}
Aplicação das classes às marcas (Atributos 9
class e id)

.estilo1 { color: red}


.estilo2 { border: solid 1px}

#estilo3 { color: red}


#estilo4 { border: solid 1px}

<p class=“estilo1”> Parágrafo </p>


<h1 class=“estilo1”>Título</h1>
<table class=“estilo2”>…</table>

<p id=“estilo3”> Parágrafo </p>


<img id=“estilo4” … /> O id deve ser
Errado único dentro de uma
<div id=“estilo4”> … </div>
página
Pseudo - Classes 9

➢ Permitem atribuir estilos a subclasse (sub-estados) de uma dada marca

➢ Utilização:

➢ selector: pseudo-classe { propriedade: valor}

➢ Exemplo:
➢ a: link { text-decoration: none}
➢ a: hover { text-decoration: underline}

O link normal não é sublinhado, mas


quando se mete o ponteiro do rato por cima
fica sublinhado
Dúvidas 10

Você também pode gostar