📚 Respostas das Listas de CSS

Lista 7 e Lista 8 — Seletores e propriedades CSS

Lista 7 — Seletores CSS

Respostas e códigos dos exercícios sobre seletores.

1) O que é um seletor de elemento?

💡 Resposta

O seletor de elemento seleciona todos os elementos HTML de determinado tipo para que uma regra CSS seja aplicada a eles.

Exemplos: p, h1 e img.

💻 Code

p {
    color: blue;
}

h1 {
    font-size: 30px;
}

img {
    width: 50%;
}
2) Qual é a sintaxe do seletor de classe?

💡 Resposta

O seletor de classe é representado por um ponto (.) seguido pelo nome da classe.

💻 Code

.info {
    color: red;
}
3) Qual é a sintaxe utilizada para seletores de ID?

💡 Resposta

O seletor de ID utiliza o símbolo # seguido pelo nome do ID. Um ID deve identificar um único elemento dentro da página.

💻 Code

#principal {
    background-color: gray;
}
4) Explique o funcionamento de um seletor descendente.

💡 Resposta

O seletor descendente seleciona elementos que estão dentro de outro elemento, mesmo que não sejam filhos diretos.

💻 Code

div p {
    color: red;
}
5) Qual é a diferença entre :hover e :focus?

💡 Resposta

:hover é aplicado quando o mouse passa sobre o elemento.

:focus é aplicado quando o elemento recebe foco.

💻 Code

button:hover {
    background-color: gray;
}

input:focus {
    border: 2px solid blue;
}
6) :first-child e :last-child

💡 Resposta

a) A primeira linha da tabela pode ser selecionada com tr:first-child.

b) O último item da lista pode ser selecionado com li:last-child.

💻 Code

tr:first-child {
    background-color: gray;
}

ul li:last-child {
    font-family: Arial;
    font-size: 18px;
}
7) Quais valores podem ser utilizados em :nth-child()?

💡 Resposta

O :nth-child() permite selecionar elementos de acordo com sua posição. Podem ser utilizados números, odd, even e fórmulas como 3n.

💻 Code

li:nth-child(2) {
    color: red;
}

li:nth-child(odd) {
    background-color: gray;
}

li:nth-child(even) {
    background-color: white;
}

li:nth-child(3n) {
    color: blue;
}
8) Diferença entre pseudo-classes e pseudoelementos

💡 Resposta

Pseudo-classes são precedidas por : e representam um estado ou condição de um elemento.

Pseudoelementos são precedidos por :: e permitem selecionar uma parte específica do elemento ou inserir conteúdo.

💻 Code

a:hover {
    color: red;
}

p::first-letter {
    font-size: 30px;
}

p::first-line {
    font-weight: bold;
}

p::before {
    content: "→ ";
}

p::after {
    content: " ✓";
}
9) Para que servem os seletores de atributo?

💡 Resposta

Servem para selecionar elementos com base nos seus atributos HTML ou nos valores desses atributos.

💻 Code

input[type="text"] {
    border: 1px solid black;
}

a[target="_blank"] {
    color: red;
}
10) Escreva os seletores solicitados

💡 Resposta

Os seletores abaixo correspondem às situações solicitadas no exercício.

💻 Code

/* a */
tr:first-child

/* b */
tr td:last-child

/* c */
ol li:nth-child(odd)

/* d */
ul li:nth-child(3n+2)

/* e */
img

/* f */
body

/* g */
.info

/* h */
textarea:hover

/* i */
textarea:focus

/* j */
input[type="reset"]

/* k */
input[type="reset"]:hover

/* l */
td, th

/* m */
.c1, #principal

/* n */
input[type="password"]:focus,
input[type="text"]:first-of-type

/* o */
#conteudo_principal

/* p */
.lateral img

/* q */
p.inicio::first-letter

Lista 8 — Propriedades CSS

Respostas e códigos dos exercícios sobre propriedades CSS.

1) Diferença entre propriedades font e text

💡 Resposta

As propriedades que começam com font estão relacionadas principalmente à fonte do texto.

As propriedades que começam com text estão relacionadas à formatação e apresentação do texto.

💻 Code

p {
    font-size: 20px;
    text-align: center;
}
2) Qual propriedade modifica a cor do texto?

💡 Resposta

A propriedade utilizada é color. Ela pode receber cores por nome, hexadecimal e RGB.

💻 Code

color: red;

color: #ff0000;

color: rgb(255, 0, 0);
3) Qual propriedade modifica a cor de fundo?

💡 Resposta

A propriedade é background-color.

💻 Code

background-color: red;

background-color: #ff0000;

background-color: rgb(255, 0, 0);
4) É possível utilizar transparência nas cores?

💡 Resposta

Sim. É possível utilizar valores como rgba(), em que o último valor representa a transparência/opacidade.

💻 Code

color: rgba(255, 0, 0, 0.5);

background-color: rgba(0, 0, 255, 0.5);
5) O que faz a propriedade font-size?

💡 Resposta

A propriedade font-size determina o tamanho da fonte do texto. Pode utilizar valores como px, em, rem e porcentagem.

💻 Code

p {
    font-size: 18px;
}

h1 {
    font-size: 2em;
}

div {
    font-size: 150%;
}
6) Como deixar o texto itálico e negrito?

💡 Resposta

Para itálico utilizamos font-style. Para negrito utilizamos font-weight.

💻 Code

font-style: normal;
font-style: italic;
font-style: oblique;

font-weight: normal;
font-weight: bold;

font-weight: 400;
font-weight: 700;
7) Como trocar a fonte da página?

💡 Resposta

Utilizamos a propriedade font-family. Podemos informar várias fontes, criando um fallback.

💻 Code

body {
    font-family: Arial, Helvetica, sans-serif;
}
8) Como fazer sublinhado, riscado e sobrelinha?

💡 Resposta

Utilizamos a propriedade text-decoration.

underline = sublinhado.

line-through = texto riscado.

overline = linha acima.

none = remove a decoração.

💻 Code

text-decoration: underline;

text-decoration: line-through;

text-decoration: overline;

text-decoration: none;
9) Como trocar o alinhamento do texto?

💡 Resposta

Utilizamos a propriedade text-align.

left = esquerda.

right = direita.

center = centralizado.

justify = justificado.

💻 Code

p {
    text-align: left;
}

p {
    text-align: right;
}

p {
    text-align: center;
}

p {
    text-align: justify;
}
10) Propriedades para imagens de fundo

💡 Resposta

background-image define a imagem de fundo.

background-repeat controla a repetição.

background-position define a posição.

background-size define o tamanho.

background-attachment define o comportamento durante a rolagem.

💻 Code

background-image: url("imagem.png");

background-repeat: no-repeat;

background-position: center;

background-size: cover;

background-attachment: fixed;
11) Diferenças entre padding, margin e border

💡 Resposta

Padding: espaço entre o conteúdo e a borda.

Border: borda que envolve o elemento.

Margin: espaço externo entre o elemento e outros elementos.

💻 Code

div {
    padding: 20px;
    border: 2px solid black;
    margin: 20px;
}
12) Propriedades de altura e largura

💡 Resposta

A propriedade de largura é width.

A propriedade de altura é height.

💻 Code

div {
    width: 500px;
    height: 300px;
}
13) Como flexibilizar largura ou altura?

💡 Resposta

Podemos utilizar min-width, max-width, min-height e max-height.

💻 Code

div {
    width: 80%;
    max-width: 1000px;
}

div {
    width: 100%;
    min-width: 300px;
}
14) Quais propriedades são condensadas por border, padding e margin?

💡 Resposta

border pode condensar border-width, border-style e border-color.

padding pode condensar padding-top, padding-right, padding-bottom e padding-left.

margin pode condensar margin-top, margin-right, margin-bottom e margin-left.

💻 Code

border: 2px solid red;

padding: 10px;

margin: 10px;
15) Como centralizar um elemento com margin: auto?

💡 Resposta

O elemento precisa ter largura menor que 100% para existir espaço sobrando nas laterais.

A declaração margin: auto distribui automaticamente o espaço disponível.

Já margin: 0 auto define as margens superior e inferior como 0 e as laterais como automáticas.

💻 Code

div {
    width: 50%;
    margin: auto;
}
16) Montando regras CSS

💡 Resposta

a) As imagens dentro dos parágrafos da classe "exemplo" terão 30% da largura e borda tracejada cinza de 5px.

b) O corpo terá a imagem de fundo indicada, cobrindo toda a área, sem repetição e permanecendo fixa durante a rolagem.

c) As linhas pares terão fundo rgb(227,56,243) e texto branco. As ímpares terão fundo branco e texto rgb(227,56,243).

💻 Code

/* a) */
p.exemplo img {
    width: 30%;
    border: 5px dashed gray;
}

/* b) */
body {
    background-image:
        url("http://recursosweb.com.br/imagens/fundo1.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* c) */
tr:nth-child(even) {
    background-color: rgb(227, 56, 243);
    color: white;
}

tr:nth-child(odd) {
    background-color: white;
    color: rgb(227, 56, 243);
}

tr {
    padding: 3px;
    font-size: 15px;
    border-bottom: 2px solid rgb(46, 222, 222);
    text-align: center;
}