diff --git a/dia-01/01-introducao-css/01-conteudo.md b/dia-01/01-introducao-css/01-conteudo.md index e6e195c..cc8bee2 100644 --- a/dia-01/01-introducao-css/01-conteudo.md +++ b/dia-01/01-introducao-css/01-conteudo.md @@ -1,17 +1,19 @@ -### Introdução ao CSS +# Introdução ao CSS -#### O que é CSS? +Agora que você já aprendeu a estruturar uma página utilizando HTML, chegou o momento de aprender como **estilizar** seus conteúdos e deixá-los visualmente atraentes. Enquanto o HTML cuida da **estrutura** e do **conteúdo**, o CSS cuida do **design** e da **experiência visual** do usuário. Eles trabalham juntos para criar páginas completas e bem apresentadas. + +## O que é CSS? CSS, ou Cascading Style Sheets (Folhas de Estilo em Cascata), é uma linguagem de estilização utilizada para descrever a apresentação de documentos escritos em HTML ou XML. Ele foi criado para possibilitar a separação entre o conteúdo (HTML) e a apresentação (CSS), promovendo uma maior flexibilidade e eficiência no desenvolvimento de páginas web. Através do CSS, é possível controlar vários aspectos visuais dos elementos HTML, como cores, espaçamentos, fontes, tamanhos e layout geral da página. Com CSS, desenvolvedores conseguem criar páginas visualmente atraentes e responsivas, o que melhora a experiência do usuário e facilita o processo de manutenção do site. -#### Vantagens do CSS +## Vantagens do CSS - **Separação de Conteúdo e Estilo**: Com CSS, o conteúdo HTML fica mais organizado e sem estilos embutidos, permitindo que a apresentação da página seja gerida em arquivos externos. - **Reutilização de Código**: As regras CSS podem ser aplicadas a múltiplos elementos e páginas, economizando tempo e esforço. - **Manutenção Facilitada**: Alterar o estilo em um único arquivo CSS reflete automaticamente em todas as páginas que o utilizam. - **Compatibilidade com Diferentes Dispositivos**: Com CSS, é possível criar páginas responsivas, adaptáveis a diferentes resoluções e tamanhos de tela. -#### Sintaxe Básica do CSS +## Sintaxe Básica do CSS A estrutura de uma regra CSS é composta por um **seletor**, uma **propriedade** e um **valor**. ```css @@ -33,7 +35,7 @@ p { ``` No exemplo acima, todas as tags `

` no HTML terão texto na cor azul e tamanho de fonte 16 pixels. -#### Formas de Incluir CSS +## Formas de Incluir CSS O CSS pode ser inserido de três maneiras em um documento HTML: **inline**, **interno** e **externo**. 1. **CSS Inline**: @@ -71,82 +73,4 @@ O CSS pode ser inserido de três maneiras em um documento HTML: **inline**, **in color: blue; font-size: 16px; } - ``` - -#### Cascata e Especificidade -CSS significa **Cascading Style Sheets** (Folhas de Estilo em Cascata), e o termo "cascata" refere-se a como o navegador decide qual regra aplicar em situações onde múltiplas regras podem se sobrepor. As regras seguem uma hierarquia baseada na **especificidade** dos seletores: - -1. **Estilo Inline**: Tem a maior prioridade. -2. **ID**: Seletores de ID (`#id`) têm mais prioridade do que classes e tags. -3. **Classes e Pseudo-Classes**: Seletores de classe (`.classe`) e pseudo-classes (`:hover`, por exemplo) possuem prioridade inferior ao ID. -4. **Elementos**: Seletores de elemento (`p`, `h1`, etc.) têm a prioridade mais baixa. - -**Exemplo de Cascata e Especificidade**: -```html - - -

Texto de exemplo

-``` - -Nesse exemplo: -- A regra do ID (`#special`) tem prioridade sobre a classe `.highlight` e o seletor de elemento `p`. -- O texto será exibido em verde, pois o ID tem maior especificidade. - -#### Unidades CSS -CSS oferece várias unidades para definir tamanhos, incluindo: -- **px**: Pixels (medida fixa). -- **em** e **rem**: Medidas relativas ao tamanho da fonte do elemento pai (`em`) ou da raiz (`rem`). -- **%**: Percentual, útil para layouts responsivos. - -Exemplo: -```css -h1 { - font-size: 2em; /* duas vezes o tamanho da fonte do elemento pai */ -} -``` - -#### Seletores Comuns -1. **Seletor de Elemento**: Aplica estilos a todas as instâncias de um elemento HTML específico. - ```css - h1 { - color: blue; - } - ``` - -2. **Seletor de Classe**: Aplica estilos a elementos com uma classe específica. - ```css - .titulo { - font-size: 24px; - color: red; - } - ``` - -3. **Seletor de ID**: Aplica estilos a um elemento com um ID específico. - ```css - #principal { - background-color: yellow; - } - ``` - -#### CSS Responsivo -O CSS também oferece recursos para a criação de layouts responsivos, que se ajustam automaticamente a diferentes tamanhos de tela. Um dos principais métodos para isso são as **Media Queries**. - -Exemplo de Media Query: -```css -@media (max-width: 600px) { - body { - font-size: 14px; - } -} -``` -Neste exemplo, quando a largura da tela for menor que 600px, o tamanho da fonte será ajustado para 14px. \ No newline at end of file + ``` \ No newline at end of file diff --git a/dia-01/02-seletores-basicos/01-conteudo.md b/dia-01/02-seletores-basicos/01-conteudo.md new file mode 100644 index 0000000..899f20c --- /dev/null +++ b/dia-01/02-seletores-basicos/01-conteudo.md @@ -0,0 +1,106 @@ +# Seletores Básicos no CSS + +No CSS, utilizamos **seletores** para escolher quais elementos serão estilizados. Eles permitem aplicar estilos de forma precisa a partes específicas do conteúdo, e cada tipo de seletor permite um nível diferente de customização. + +--- + +## 1. **Seletores de Elemento** + Os seletores de elemento aplicam estilos a todas as instâncias de um elemento HTML específico. + + - **Sintaxe**: + ```css + elemento { + propriedade: valor; + } + ``` + + - **Exemplo**: + ```css + p { + color: black; + font-size: 16px; + } + ``` + Esse código aplica um estilo a todos os parágrafos `

` da página, definindo a cor do texto como preto e o tamanho da fonte como 16px. + + +## 2. **Seletores de Classe** + Os seletores de classe são utilizados para aplicar estilos a um ou mais elementos que possuam a mesma classe. Para selecionar uma classe no CSS, usa-se o ponto (`.`) seguido do nome da classe. + + - **Sintaxe**: + ```css + .nome-da-classe { + propriedade: valor; + } + ``` + + - **Exemplo**: + ```css + .destaque { + color: blue; + font-weight: bold; + } + ``` + + ```html +

Este texto será azul e em negrito.

+ Este texto também será azul e em negrito. + ``` + No exemplo acima, qualquer elemento com a classe `destaque` terá o texto azul e em negrito. + + +## 3. **Seletores de ID** + O seletor de ID é usado para aplicar estilos a um elemento específico. IDs são únicos, ou seja, cada ID deve ser usado apenas uma vez por página. Para declarar um ID, usa-se o símbolo `#` seguido do nome do ID no CSS. + + - **Sintaxe**: + ```css + #nome-do-id { + propriedade: valor; + } + ``` + + - **Exemplo**: + ```css + #principal { + background-color: lightgrey; + padding: 20px; + } + ``` + + ```html +
Este é o conteúdo principal da página.
+ ``` + Esse estilo será aplicado apenas ao elemento com o ID `principal`. + +--- + + +### Quando Usar IDs vs. Classes + +| Critério | ID | Classe | +|---------------------------------|--------------------------------------------|-----------------------------------------| +| **Aplicação** | Elemento único | Múltiplos elementos | +| **Especificidade** | Alta | Moderada | +| **Reutilização** | Não deve ser reutilizado | Pode ser reutilizado | +| **Exemplo de Uso** | Estilos exclusivos de um elemento específico, como um cabeçalho único | Estilos aplicáveis a vários itens, como botões de formulário | + +--- + +## 4. **Seletores de Atributo** +Os **seletores de atributo** são um tipo poderoso de seletor no CSS que permitem aplicar estilos a elementos HTML com base em atributos específicos, como `type`, `href`, `title`, entre outros. Esses seletores são especialmente úteis quando se deseja estilizar campos de formulários, links, ou qualquer elemento que possua atributos específicos, sem precisar adicionar classes ou IDs adicionais. + + - **Sintaxe**: + ```css + elemento[atributo="valor"] { + propriedade: valor; + } + ``` + + - **Exemplo**: + ```css + input[type="text"] { + border: 1px solid black; + padding: 5px; + } + ``` + Esse estilo será aplicado a todos os campos de entrada (``) do tipo `text`. \ No newline at end of file diff --git a/dia-01/02-seletores-basicos/02-exercicios.md b/dia-01/02-seletores-basicos/02-exercicios.md new file mode 100644 index 0000000..ff9eaf5 --- /dev/null +++ b/dia-01/02-seletores-basicos/02-exercicios.md @@ -0,0 +1,29 @@ +# Exercícios: Seletores Básicos + +## Exercício 1: Seletores de Elemento +1. Utilize como base o arquivo HTML disponilizado em [./_assets/01-exercicio1-boilerplate.html](./_assets/01-exercicio1-boilerplate.html). +2. No arquivo CSS, use seletores de elemento para definir: + - A cor do texto (`color`) de todos os `

` como azul. + - O tamanho da fonte (`font-size`) de todos os `

` como 18px. + - O fundo (`background-color`) de todos os `

` como amarelo. + +## Exercício 2: Seletores de Classe +1. Utilize como base o arquivo HTMl disponilizado em [./_assets/02-exercicio2-boilerplate.html](./_assets/02-exercicio2-boilerplate.html). +2. No CSS, defina um estilo para a classe `highlight` que: + - Aplique um fundo (`background-color`) laranja. + - Defina a cor do texto (`color`) como branco. + +## Exercício 3: Seletores de ID +1. Utilize como base o arquivo HTMl disponilizado em [./_assets/03-exercicio3-boilerplate.html](./_assets/03-exercicio3-boilerplate.html). +2. No CSS, aplique estilos ao ID `main-content` que: + - Definam uma borda (`border`) sólida de 2px preta. + - Apliquem um padding (`padding`) de 20px. + - Mudam a cor do texto (`color`) para cinza. + + +## Exercício 4: Seletores de Atributo +1. Utilize como base o arquivo HTML disponilizado em [./_assets/04-exercicio4-boilerplate.html](./_assets/04-exercicio4-boilerplate.html). +2. No CSS, use seletores de atributo para definir: + - A borda (`border`) de todos os campos de texto como 1px sólido azul. + - A cor de fundo (`background-color`) de todos os campos de email como verde claro. + diff --git a/dia-01/02-seletores-basicos/03-exercicio1-corrigido.css b/dia-01/02-seletores-basicos/03-exercicio1-corrigido.css new file mode 100644 index 0000000..7482af2 --- /dev/null +++ b/dia-01/02-seletores-basicos/03-exercicio1-corrigido.css @@ -0,0 +1,11 @@ +h1 { + color: blue; +} + +p { + font-size: 18px; +} + +h2 { + background-color: yellow; +} diff --git a/dia-01/02-seletores-basicos/04-exercicio2-corrigido.css b/dia-01/02-seletores-basicos/04-exercicio2-corrigido.css new file mode 100644 index 0000000..6e3dca6 --- /dev/null +++ b/dia-01/02-seletores-basicos/04-exercicio2-corrigido.css @@ -0,0 +1,4 @@ +.highlight { + background-color: orange; + color: white; +} \ No newline at end of file diff --git a/dia-01/02-seletores-basicos/05-exercicio3-corrigido.css b/dia-01/02-seletores-basicos/05-exercicio3-corrigido.css new file mode 100644 index 0000000..f0a2641 --- /dev/null +++ b/dia-01/02-seletores-basicos/05-exercicio3-corrigido.css @@ -0,0 +1,5 @@ +#main-content { + border: solid 2px black; + padding: 20px; + color: gray; +} diff --git a/dia-01/02-seletores-basicos/06-exercicio4-corrigido.css b/dia-01/02-seletores-basicos/06-exercicio4-corrigido.css new file mode 100644 index 0000000..b7d2863 --- /dev/null +++ b/dia-01/02-seletores-basicos/06-exercicio4-corrigido.css @@ -0,0 +1,7 @@ +input[type="text"] { + border: 1px solid blue; +} + +input[type="email"] { + background-color: lightgreen; +} diff --git a/dia-01/02-seletores-basicos/_assets/01-exercicio1-boilerplate.html b/dia-01/02-seletores-basicos/_assets/01-exercicio1-boilerplate.html new file mode 100644 index 0000000..0f14fc7 --- /dev/null +++ b/dia-01/02-seletores-basicos/_assets/01-exercicio1-boilerplate.html @@ -0,0 +1,17 @@ + + + + + + Exercício 1 - Seletores de Elemento + + + +

Este é um título H1

+

Este é um título H2

+

Este é um parágrafo 1.

+

Este é um parágrafo 2.

+

Outro H1 para testar

+

Outro H2 para testar

+ + diff --git a/dia-01/02-seletores-basicos/_assets/02-exercicio2-boilerplate.html b/dia-01/02-seletores-basicos/_assets/02-exercicio2-boilerplate.html new file mode 100644 index 0000000..a81103c --- /dev/null +++ b/dia-01/02-seletores-basicos/_assets/02-exercicio2-boilerplate.html @@ -0,0 +1,21 @@ + + + + + + Exercício de Classes + + + + +
Div com classe highlight
+
Div sem classe
+ +

Parágrafo com classe highlight

+

Parágrafo sem classe

+ + Span com classe highlight + Span sem classe + + + diff --git a/dia-01/02-seletores-basicos/_assets/03-exercicio3-boilerplate.html b/dia-01/02-seletores-basicos/_assets/03-exercicio3-boilerplate.html new file mode 100644 index 0000000..26a32a6 --- /dev/null +++ b/dia-01/02-seletores-basicos/_assets/03-exercicio3-boilerplate.html @@ -0,0 +1,16 @@ + + + + + + Exercício de IDs + + + + +
+ Este é o conteúdo principal. +
+ + + \ No newline at end of file diff --git a/dia-01/02-seletores-basicos/_assets/04-exercicio4-boilerplate.html b/dia-01/02-seletores-basicos/_assets/04-exercicio4-boilerplate.html new file mode 100644 index 0000000..e56384a --- /dev/null +++ b/dia-01/02-seletores-basicos/_assets/04-exercicio4-boilerplate.html @@ -0,0 +1,29 @@ + + + + + + Exercício de Seletores de Atributo + + + + +
+ + + + + + + + + + + + + + +
+ + + diff --git a/dia-01/02-seletores/01-conteudo.md b/dia-01/02-seletores/01-conteudo.md deleted file mode 100644 index 7663bf7..0000000 --- a/dia-01/02-seletores/01-conteudo.md +++ /dev/null @@ -1,223 +0,0 @@ -### Seletores CSS - -No CSS, **seletores** são utilizados para identificar os elementos HTML aos quais queremos aplicar estilos específicos. Esses seletores são essenciais para controlar o design e a aparência de uma página de maneira precisa, e cada tipo de seletor permite um nível de customização diferente. Vamos explorar os principais seletores CSS, com definições, exemplos, e práticas recomendadas. - ---- - -#### 1. **Seletores de Elemento** - Os seletores de elemento aplicam estilos a todas as instâncias de um elemento HTML específico. - - - **Sintaxe**: - ```css - elemento { - propriedade: valor; - } - ``` - - - **Exemplo**: - ```css - p { - color: black; - font-size: 16px; - } - ``` - Esse código aplica um estilo a todos os parágrafos `

` da página, definindo a cor do texto como preto e o tamanho da fonte como 16px. - ---- - -#### 2. **Seletores de Classe** - Os seletores de classe são utilizados para aplicar estilos a um ou mais elementos que possuam a mesma classe. Para declarar uma classe, usa-se o ponto (`.`) seguido do nome da classe no CSS. - - - **Sintaxe**: - ```css - .nome-da-classe { - propriedade: valor; - } - ``` - - - **Exemplo**: - ```css - .destaque { - color: blue; - font-weight: bold; - } - ``` - - ```html -

Este texto será azul e em negrito.

- Este texto também será azul e em negrito. - ``` - No exemplo acima, qualquer elemento com a classe `destaque` terá o texto azul e em negrito. - ---- - -#### 3. **Seletores de ID** - O seletor de ID é usado para aplicar estilos a um elemento específico. IDs são únicos, ou seja, cada ID deve ser usado apenas uma vez por página. Para declarar um ID, usa-se o símbolo `#` seguido do nome do ID no CSS. - - - **Sintaxe**: - ```css - #nome-do-id { - propriedade: valor; - } - ``` - - - **Exemplo**: - ```css - #principal { - background-color: lightgrey; - padding: 20px; - } - ``` - - ```html -
Este é o conteúdo principal da página.
- ``` - Esse estilo será aplicado apenas ao elemento com o ID `principal`. - ---- - -#### 4. **Seletores de Atributo** - Os seletores de atributo permitem aplicar estilos a elementos que possuem um atributo específico. Eles são especialmente úteis para estilizar elementos como links e campos de formulário. - - - **Sintaxe**: - ```css - elemento[atributo="valor"] { - propriedade: valor; - } - ``` - - - **Exemplo**: - ```css - input[type="text"] { - border: 1px solid black; - padding: 5px; - } - ``` - Esse estilo será aplicado a todos os campos de entrada (``) do tipo `text`. - ---- - -#### 5. **Seletores Combinados** - Combinadores são usados para aplicar estilos baseados na relação entre elementos. Os principais combinadores incluem **descendentes**, **filhos**, **irmãos adjacentes**, e **irmãos gerais**. - - - **Seletor Descendente**: Seleciona elementos descendentes de outro elemento. - - ```css - div p { - color: grey; - } - ``` - - - **Seletor de Filho Direto**: Seleciona apenas filhos diretos de um elemento. - - ```css - div > p { - color: blue; - } - ``` - - - **Seletor de Irmão Adjacente**: Seleciona o elemento imediatamente após um outro elemento. - - ```css - h1 + p { - font-size: 18px; - } - ``` - - - **Seletor de Irmãos Gerais**: Seleciona todos os elementos que são irmãos de um elemento. - - ```css - h1 ~ p { - color: red; - } - ``` - ---- - -#### 6. **Pseudo-classes** - As pseudo-classes permitem aplicar estilos baseados no estado de um elemento, como o hover de um botão ou o foco de um campo de formulário. - - - **Exemplo**: - ```css - a:hover { - color: red; - } - input:focus { - border-color: blue; - } - ``` - - No exemplo, o link muda para vermelho ao passar o mouse, e a borda do campo de entrada muda para azul quando ele está em foco. - ---- - -#### 7. **Pseudo-elementos** - Pseudo-elementos permitem estilizar uma parte específica de um elemento. Os principais pseudo-elementos incluem `::before`, `::after`, `::first-line`, e `::first-letter`. - - - **Exemplo**: - ```css - p::first-line { - font-weight: bold; - } - p::before { - content: "Nota: "; - font-weight: bold; - } - ``` - Aqui, a primeira linha de cada parágrafo estará em negrito, e o texto "Nota:" será inserido antes do conteúdo de cada `

`. - ---- - -#### 8. **Seletores Universais** - O seletor universal (`*`) aplica estilos a todos os elementos da página. É útil para resetar margens e paddings. - - - **Exemplo**: - ```css - * { - margin: 0; - padding: 0; - box-sizing: border-box; - } - ``` - Isso define margens e paddings como zero para todos os elementos, útil ao aplicar um reset de CSS. - ---- - -#### 9. **Seletores de Grupo** - Os seletores de grupo aplicam o mesmo estilo a vários elementos, separados por vírgulas. - - - **Exemplo**: - ```css - h1, h2, h3 { - color: purple; - font-family: Arial, sans-serif; - } - ``` - ---- - -#### 10. **Especificidade e Importância** - No CSS, **especificidade** e a **importância** determinam a prioridade dos estilos aplicados. - - - **Ordem de Especificidade**: - 1. Estilos inline têm a maior prioridade. - 2. IDs têm mais prioridade que classes. - 3. Classes, pseudo-classes, e atributos têm prioridade inferior aos IDs. - 4. Seletores de elementos têm a menor prioridade. - - - **Exemplo de Especificidade**: - ```css - /* Prioridade baixa */ - p { color: black; } - - /* Prioridade maior que o seletor de elemento */ - .texto { color: blue; } - - /* Prioridade maior que o seletor de classe */ - #principal { color: green; } - - /* Texto ficará verde pois o ID tem maior especificidade */ -

Texto

- ``` - ---- \ No newline at end of file diff --git a/dia-01/03-seletores-combinados/01-conteudo.md b/dia-01/03-seletores-combinados/01-conteudo.md new file mode 100644 index 0000000..27b6c7f --- /dev/null +++ b/dia-01/03-seletores-combinados/01-conteudo.md @@ -0,0 +1,126 @@ +# Seletores Combinados e Agrupados + +Agora que você já conhece os **seletores básicos** do CSS (elemento, classe e ID), chegou o momento de aprender como combiná-los para criar estilos mais precisos e eficientes. +Essas combinações permitem selecionar elementos com base em **relações hierárquicas**, **múltiplas condições** ou **agrupamentos**, tornando o código mais limpo e poderoso. + +--- + +## 1. **Seletores de Grupo** +Os **seletores de grupo** permitem aplicar o mesmo conjunto de estilos a múltiplos elementos HTML ao mesmo tempo. Isso não apenas reduz a repetição de código, mas também facilita a manutenção do CSS. Os seletores de grupo são separados por vírgulas e funcionam de forma similar a selecionar um único elemento, mas abrangem vários elementos simultaneamente. +- **Sintaxe** + ```css + seletor1, seletor2, seletor3 { + propriedade: valor; + } + ``` + +- **Exemplo** + ```css + h1, h2, h3 { + color: purple; + font-family: Arial, sans-serif; + } + ``` +Neste exemplo, todos os elementos `

`, `

`, e `

` terão a cor do texto roxa e a fonte Arial. Se um desses elementos for alterado no futuro, a alteração será refletida em todos os elementos agrupados, facilitando a manutenção. + +## 2. **Seletores Combinados** +Combinadores são usados para aplicar estilos baseados na relação entre elementos. Os principais combinadores incluem **descendentes**, **filhos**, **irmãos adjacentes**, e **irmãos gerais**. + +### 2.1 **Seletor Descendente (` `)**: +Estiliza elementos que são descendentes (não necessariamente filhos diretos) de um elemento pai específico. Ele aplica estilos a qualquer elemento que esteja dentro de um contêiner maior, independentemente da profundidade. + +- **Sintaxe**: + + ```css + pai elemento { + propriedade: valor; + } + ``` + +- **Exemplo**: + ```css + div p { + color: blue; + } + ``` + Neste exemplo, todos os parágrafos (`

`) dentro de qualquer `div` terão o texto na cor azul, não importa quantos níveis de aninhamento existam entre eles. + + + +### 2.2 **Seletor de Filho Direto (`>`)**: +Seleciona apenas filhos diretos de um elemento. + +- **Sintaxe**: + ```css + pai > filho { + propriedade: valor; + } + ``` + +- **Exemplo**: + ```css + div > p { + color: red; + } + ``` + Neste exemplo, apenas os `

` que são filhos diretos de uma `

` terão o texto em vermelho. + + +### 2.3 **Seletor de Irmão Adjacente (`+`)**: +O seletor adjacente aplica estilos ao primeiro elemento que aparece imediatamente após outro elemento. Esse seletor é útil quando você quer estilizar elementos que seguem imediatamente outro. + +- **Sintaxe**: + ```css + elemento1 + elemento2 { + propriedade: valor; + } + ``` + +- **Exemplo**: + ```css + h1 + p { + color: green; + } + ``` + Neste caso, o parágrafo (`

`) que aparece imediatamente após um `

` terá o texto na cor verde. + +### 2.4 **Seletor de Irmãos Gerais (`~`)**: +O seletor de irmãos gerais estiliza todos os elementos que aparecem após um elemento específico, desde que sejam "irmãos" no mesmo nível hierárquico do DOM. + +- **Sintaxe**: + ```css + elemento1 ~ elemento2 { + propriedade: valor; + } + ``` + +- **Exemplo**: + ```css + h1 ~ p { + color: purple; + } + ``` + Neste exemplo, todos os parágrafos (`

`) que aparecem após um `

`, no mesmo nível hierárquico, terão o texto em roxo. + +## 3. Seletor Universal + +O seletor universal (`*`) aplica estilos **a todos os elementos** de um documento. +Ele é útil para **resetar ou padronizar estilos** globais, porém é importante usá-lo com cautela, pois ele pode afetar a performance do seu site. + +- **Exemplo:** + ```css + * { + margin: 0; + padding: 0; + box-sizing: border-box; + } + ``` + +- Esse exemplo zera as margens e espaçamentos de todos os elementos, garantindo um comportamento mais previsível ao construir o layout. + +É comum usar o seletor universal em conjunto com outros seletores para limitar seu escopo. Por exemplo, você pode aplicar estilos a todos os elementos dentro de um contêiner específico: + +```css +.container * { + font-family: Arial, sans-serif; /* Aplica a fonte apenas aos elementos dentro da classe .container */ +} diff --git a/dia-01/03-seletores-combinados/02-exercicios.md b/dia-01/03-seletores-combinados/02-exercicios.md new file mode 100644 index 0000000..506154b --- /dev/null +++ b/dia-01/03-seletores-combinados/02-exercicios.md @@ -0,0 +1,8 @@ +# Exercício: Seletores de Grupo, Combinados e Universal + +1. Utilize como base o arquivo HTML disponibilizado em [./_assets/01-exercicio1-boilerplate.html](./_assets/01-exercicio1-boilerplate.html). +2. No CSS, defina os seguintes estilos: + - Aplique uma margem (`margin`) um padding (`padding`) de `0` a todos os elementos. + - Todos `

` e `

` devem ter o texto centralizado (`text-align`) e uma cor de texto (`color`) azul. + - Todos os `
  • ` dentro de uma `