CSS/HTML5 do Zero: O Guia Essencial para Todos

Ótimo! Agora que você tem uma visão geral das propriedades de texto, como adicionar decorações, espacar letras e palavras, definir a altura da linha e trabalhar com listas, links e barras de navegação em HTML e CSS, vamos aprofundar um pouco cada um desses assuntos.

Listas

As listas em HTML são muito versáteis e podem ser estilizadas com CSS para criar diferentes tipos de layouts e navegações.

Lista Ordenada

<ol>
  <li>Primeiro item</li>
  <li>Segundo item</li>
  <li>Terceiro item
    <ol type="1">
      <li>Subitem 1.1</li>
      <li>Subitem 1.2</li>
    </ol>
  </li>
</ol>

Você pode alterar o tipo de numeração usando type="a", type="A", type="I", ou type="1".

Lista Não Ordenada

<ul>
  <li>Item não ordenado</li>
  <li>Outro item não ordenado</li>
</ul>

As listas não ordenadas não têm numeros ou marcadores automaticamente aplicados. Você pode adicionar seu próprio estilo usando CSS.

Lista Desordenada com Estilos Personalizados

ul {
  list-style-type: none; /* Remove o marcador padrão */
  padding: 0; /* Remove o espaçamento padrão */
}

ul li::before {
  content: "⚫"; /* Adiciona um ícone personalizado antes do item */
  color: #4CAF50; /* Define a cor do ícone */
}

Links

Os links em HTML são marcados com a tag <a href="url">texto</a>. O atributo href define o caminho para onde o link aponta.

Estilização de Links

a:link { /* Link normal */
  color: #000;
}

a:visited { /* Link já visitado */
  color: #551A8B;
}

a:hover { /* Quando o mouse está sobre o link */
  color: #FFC300;
  text-decoration: none;
}

a:active { /* Quando o link é clicado */
  color: #0074D9;
}

Barras de Navegação

As barras de navegação são essenciais para a usabilidade do seu site. Eles devem ser intuitivos e fáceis de navegar.

Criação de uma Barra de Navegação com Lista

<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">Sobre</a></li>
    <li><a href="#services">Serviços</a></li>
    <li><a href="#contact">Contato</a></li>
  </ul>
</nav>

Estilização de uma Barra de Navegação com CSS

nav {
  background-color: #333; /* Cor de fundo da barra de navegação */
  overflow: hidden; /* Garante que o fundo não apareça fora da barra */
}

nav ul {
  list-style-type: none; /* Remove os marcadores da lista */
  padding: 0; /* Remove o espaçamento interno da lista */
  margin: 0; /* Remove o espaçamento externo da lista */
}

nav ul li {
  float: left; /* Flutua cada item para a esquerda */
  width: 20%; /* Define o largura de cada item */
}

nav ul li a {
  display: block; /* Trata cada link como um bloco */
  color: white; /* Define a cor do texto */
  padding: 20px 0; /* Adiciona espaçamento ao redor do texto */
  text-decoration: none; /* Remove o sublinhado padrão dos links */
}

nav ul li a:hover {
  background-color: #551A8B; /* Muda a cor de fundo quando o mouse passa sobre o link */
}

Com essas baseadas em HTML e CSS, você pode criar uma página web com texto bem estilizado, links funcionais e uma barra de navegação atraente. Lembre-se de que a responsividade e a acessibilidade também são aspectos importantes ao projetar sua página. Boa sorte com seu projeto!