Curso: Informática de Gestão
Turma: IG1 | IG2
Turno: Tarde
OBJECTIVOS DA AULA: #
- Compreender o conceito de CSS;
- Identificar as forma de aplicação do CSS;
- Utilizar seletores corretamente;
- Aplicar propriedades fundamentais de estilo;
- Organizar layouts com flexbox;
- Introduzir conceitos de responsividade;
- Desenvolver boas práticas de organização do código.
O QUE É O CSS?: #
CSS (Cascading Style Sheets) é a linguagem utilizada para definir a aparência visual de páginas web. Enquanto o HTML organiza o conteúdo, o CSS melhora o design, tornando o site mais profissional e organizado. HTML = Estrutura | CSS = Estilo/Design
ESTRUTURA DE UMA REGRA CSS: #
Uma regra CSS é composta por:
- Seletor;
- Propriedade;
- Valor.
Exemplo prático:
p {
color: blue;
font-size: 18px;
}Neste exemplo, todos os parágrafos terão cor azul e tamanho de 18px.
FORMAS DE APLICAR CSS: #
1) Inline – dentro da própria tag HTML.
2) Interno – dentro da tag <style> no <head>.
3) Externo – utilizando ficheiro .css (forma recomendada).
Exemplo de ligação externa:
<link rel="stylesheet" href="style.css">
SELETORES CSS: #
a) Seletor por elemento:
h1 { color: green; }
b) Seletor por classe:
.titulo { color: red; }
c) Seletor por ID:
#principal { background-color: yellow; }MODELO DE CAIXA (BOX MODEL): #
Todos os elementos HTML funcionam como uma caixa composta por:
- Conteúdo
- Padding (espaço interno)
- Border (borda)
- Margin (espaço externo)
Exemplo:
div {
margin: 20px;
padding: 15px;
border: 2px solid black;
}
TIPOGRAFIA: #
Principais propriedades:
- font-family
- font-size
- font-weight
- text-align
- line-height
Exemplo:
h1 {
font-size: 28px;
text-align: center;
}
FLEXBOX: #
Flexbox é um sistema moderno para organizar elementos em linha ou coluna.
Ativação: display: flex;
Principais propriedades:
- justify-content – alinhamento horizontal
- align-items – alinhamento vertical
- flex-direction – linha ou coluna
- gap – espaçamento entre elementos
Exemplo:
nav {
display: flex;
justify-content: space-between;
}
MEDIA QUERIES (RESPONSAVILIDADE): #
Media queries permitem adaptar o site para diferentes tamanhos de ecrã.
Exemplo:
@media (max-width: 768px) {
nav {
flex-direction: column;
}
}
BOAS PRÁTICAS EM CSS: #
✔ Utilizar CSS externo
✔ Organizar o código por secções
✔ Comentar o código
✔ Evitar repetição desnecessária
✔ Testar em diferentes dispositivos
