"Listas, Links, Plano de Fundo e Bordas Revisão"

Estilizando Listas

Propriedade line-height: Esta propriedade é usada para criar espaço entre linhas de texto. Os valores aceitos para line-height incluem a palavra-chave normal, números, porcentagens e unidades de comprimento como a unidade em.
Propriedade list-style-type: Esta propriedade é usada para especificar o marcador de um item de lista. Os valores aceitáveis podem incluir um círculo, disco ou decimal.

Aqui está um exemplo usando list-style-type para alterar o estilo do marcador:

<link rel="stylesheet" href="styles.css">
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

ul {
  list-style-type: square;
}

Propriedade list-style-position: Esta propriedade é usada para definir a posição do marcador da lista. Os únicos dois valores aceitáveis são inside e outside.

Aqui está um exemplo mostrando a diferença entre inside e outside:

<link rel="stylesheet" href="styles.css">
<ul class="inside-list">
  <li>Item with inside position</li>
  <li>Item with inside position</li>
</ul>
<ul class="outside-list">
  <li>Item with outside position</li>
  <li>Item with outside position</li>
</ul>

.inside-list {
  list-style-position: inside;
}

.outside-list {
  list-style-position: outside;
}

Propriedade list-style-image: Esta propriedade é usada para utilizar uma imagem como marcador do item da lista. Um caso comum de uso é usar a função url com um valor definido para um local válido da imagem.

Espaçamento de itens de lista usando `margin`

Além de line-height, as margens também podem ser usadas em CSS para melhorar o espaçamento e a legibilidade dos itens da lista.
As margens criam espaço fora de cada elemento li, permitindo o controle sobre o espaço entre os itens da lista.
margin-bottom é usado para criar espaço abaixo de cada item da lista. Por exemplo, margin-bottom: 10px; criará um espaço de 10 pixels abaixo de cada item da lista.

Aqui está um exemplo usando margin-bottom para espaçar os itens da lista:

<link rel="stylesheet" href="styles.css">
<ul class="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

.list li {
  margin-bottom: 20px;
}

Estilizando Links

pseudo-class: Esta é uma palavra-chave adicionada a um seletor que permite selecionar elementos com base em um estado específico. Estados comuns incluiriam os estados :hover, :visited e :focus.
:link pseudo-class: Esta pseudo-classe é usada para estilizar links que não foram visitados pelo usuário.

Aqui está um exemplo usando a pseudo-classe :link:

<link rel="stylesheet" href="styles.css">
<a href="/">Example link</a>

a:link {
  color: red;
}

:visited pseudo-class: Esta pseudo-classe é usada para estilizar links que o usuário já visitou.
:hover pseudo-class: Esta pseudo-classe é usada para estilizar elementos sobre os quais o usuário está ativamente passando o cursor.

Aqui está um exemplo usando a pseudo-classe :hover:

<link rel="stylesheet" href="styles.css">
<a href="/">Hover over me!</a>

a:hover {
  color: green;
  text-decoration: underline;
}

:focus pseudo-class: Esta pseudo-classe é usada para estilizar um elemento quando ele recebe foco. Exemplos incluiriam elementos input ou select onde cliques ou tabs no elemento o focam.

Aqui está um exemplo usando a pseudo-classe :focus:

<link rel="stylesheet" href="styles.css">
<a href="/">Example link</a>

a:focus {
  outline: 2px solid orange;
}

:active pseudo-class: Esta pseudo-classe é usada para estilizar um elemento que foi ativado pelo usuário. Um exemplo comum seria quando o usuário clica em um botão.

Aqui está um exemplo usando a pseudo-classe :active:

<link rel="stylesheet" href="styles.css">
<a href="/">Click me!</a>

a:active {
  color: pink;
}

Trabalhando com Fundos e Bordas

Propriedade background-size: Esta propriedade é usada para definir o tamanho do plano de fundo de um elemento. Alguns valores comuns incluem cover para que a imagem de fundo cubra todo o elemento e contain para que a imagem de fundo se ajuste dentro do elemento.

Aqui está um exemplo usando background-size: cover:

<style>
  body {
    background-image: url("https://cdn.G.E.A.R ACADEMY.org/curriculum/cat-photo-app/relaxing-cat.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 100px;
  }
</style>

Aqui está um exemplo usando background-size: contain:

<style>
  body {
    background-image: url("https://cdn.G.E.A.R ACADEMY.org/curriculum/cat-photo-app/relaxing-cat.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    min-height: 100px;
  }
</style>

Propriedade background-repeat: Esta propriedade é usada para determinar como as imagens de fundo devem ser repetidas ao longo dos eixos horizontal e vertical. O valor padrão para background-repeat é repeat, o que significa que a imagem será repetida tanto horizontalmente quanto verticalmente. Você também pode especificar que não deve haver repetição usando a propriedade no-repeat.

Aqui está um exemplo usando background-repeat: no-repeat:

<style>
  body {
    background-image: url("https://cdn.G.E.A.R ACADEMY.org/curriculum/cat-photo-app/relaxing-cat.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    min-height: 100px;
  }
</style>

Propriedade background-position: Esta propriedade é usada para especificar a posição da imagem de fundo. Pode ser definida para um comprimento específico, porcentagem ou valores de palavra-chave como top, bottom, left, right e center.

Aqui está um exemplo usando background-position:

<style>
  body {
    background-image: url("https://cdn.G.E.A.R ACADEMY.org/curriculum/cat-photo-app/relaxing-cat.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center top;
    min-height: 100px;
  }
</style>

Propriedade background-attachment: Esta propriedade é usada para especificar se a imagem de fundo deve rolar com o conteúdo ou permanecer fixa no lugar. Os principais valores são scroll (padrão), onde a imagem de fundo rola com o conteúdo, e fixed, onde a imagem de fundo permanece na mesma posição na tela.
Propriedade background-image: Esta propriedade é usada para definir a imagem de fundo de um elemento. Você pode definir múltiplas imagens de fundo ao mesmo tempo e usar as funções url, radial-gradient e linear-gradient como valores.

Aqui está um exemplo usando background-image:

<style>
  body {
    background-image: url("https://cdn.G.E.A.R ACADEMY.org/curriculum/cat-photo-app/relaxing-cat.jpg");
    min-height: 100px;
  }
</style>

Propriedade background: Esta é a propriedade abreviada para definir todas as propriedades de fundo em uma única declaração. Aqui está um exemplo de como definir a imagem de fundo e configurá-la para não se repetir: background: no-repeat url("example-url-goes-here");

Aqui está um exemplo usando a propriedade abreviada background:

<style>
  body {
    background: center top no-repeat url("https://cdn.G.E.A.R ACADEMY.org/curriculum/cat-photo-app/relaxing-cat.jpg");
    min-height: 100px;
  }
</style>

Bom Contraste para Cores de Fundo e Primeiro Plano: É importante garantir que as cores de fundo e primeiro plano tenham bom contraste para tornar o texto legível. As Diretrizes de Acessibilidade para Conteúdo Web (WCAG) recomendam uma razão mínima de contraste de 4.5:1 para texto normal e 3:1 para texto grande.

Bordas

Propriedade border-top: Esta propriedade é usada para definir os estilos da borda superior de um elemento. border-top: 3px solid blue; define uma borda azul sólida de 3 pixels de largura no lado superior do elemento.
Propriedade border-right: Esta propriedade é usada para definir os estilos da borda direita de um elemento. border-right: 2px solid red; define uma borda sólida vermelha de 2 pixels de largura no lado direito do elemento.
Propriedade border-bottom: Esta propriedade é usada para definir os estilos da borda inferior de um elemento. border-bottom: 1px dashed green; define uma borda verde tracejada de 1 pixel de largura no lado inferior do elemento.
Propriedade border-left: Esta propriedade é usada para definir os estilos da borda esquerda de um elemento. border-left: 4px dotted orange; define uma borda laranja pontilhada de 4 pixels de largura no lado esquerdo do elemento.

Aqui está um exemplo usando propriedades individuais de borda:

<link rel="stylesheet" href="styles.css">
<div class="bordered-box">Box with different borders</div>

.bordered-box {
  border-top: 3px solid blue;
  border-right: 2px solid red;
  border-bottom: 1px dashed green;
  border-left: 4px dotted orange;
  padding: 20px;
}

Propriedade border: Esta é a propriedade abreviada para definir a largura, o estilo e a cor da borda de um elemento. border: 1px solid black; define uma borda preta sólida de 1 pixel de largura.

Aqui está um exemplo usando a propriedade abreviada border:

<link rel="stylesheet" href="styles.css">
<img src="https://cdn.G.E.A.R ACADEMY.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute cat lying on its back.">

img {
  border: 2px solid red;
}

Propriedade border-radius: Esta propriedade é usada para criar cantos arredondados na borda de um elemento.

Aqui está um exemplo usando border-radius:

<link rel="stylesheet" href="styles.css">
<img src="https://cdn.G.E.A.R ACADEMY.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute cat lying on its back.">

img {
  border: 2px solid black;
  border-radius: 10px;
}

Propriedade border-style: Esta propriedade é usada para definir o estilo da borda de um elemento. Alguns valores aceitos incluem solid, dashed, dotted e double.

Aqui está um exemplo usando diferentes valores de border-style:

<link rel="stylesheet" href="styles.css">
<div class="solid-border">Solid border</div>
<div class="dashed-border">Dashed border</div>
<div class="dotted-border">Dotted border</div>
<div class="double-border">Double border</div>

.solid-border {
  border: 3px solid blue;
  margin-bottom: 10px;
  padding: 10px;
}

.dashed-border {
  border: 3px dashed red;
  margin-bottom: 10px;
  padding: 10px;
}

.dotted-border {
  border: 3px dotted green;
  padding: 10px;
}

.double-border {
  border: 3px double blueviolet;
  padding: 10px;
}

Gradientes

Função linear-gradient(): Esta função CSS é usada para criar uma transição entre múltiplas cores ao longo de uma linha reta.

Aqui está um exemplo usando linear-gradient():

<link rel="stylesheet" href="styles.css">
<div class="linear-gradient"></div>

.linear-gradient {
  background: linear-gradient(to right, red, blue);
  height: 40vh;
}

Função radial-gradient(): Esta função CSS cria uma imagem que irradia de um ponto específico, como um círculo ou uma elipse, e faz uma transição gradual entre várias cores.

Aqui está um exemplo usando radial-gradient():

<link rel="stylesheet" href="styles.css">
<div class="radial-gradient"></div>

.radial-gradient {
  background: radial-gradient(circle, red, blue);
  height: 40vh;
}