Front-end com Vue 3

Aparência

Aplicando CSS ​

Nesta parte do nosso curso, vamos aprofundar como aplicar CSS ao nosso HTML para transformar a estética e a funcionalidade das páginas web. Existem três métodos principais para incorporar CSS em documentos HTML: CSS Interno, CSS Externo e CSS Inline. Cada método tem suas próprias vantagens e situações ideais de uso, e entender quando e como usar cada um é essencial para qualquer desenvolvedor web.

CSS Interno: Usando a tag <style> dentro do <head> ​

O CSS interno é colocado diretamente dentro de um documento HTML usando a tag <style>, geralmente localizada dentro do <head> da página. Este método é útil para estilos específicos de uma única página, permitindo que você mantenha o HTML e o CSS juntos para uma visão rápida.

Exercício: Estilizar um pequeno documento HTML usando CSS interno. ​

html
<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <title>Exemplo de CSS Interno</title>
    <style>
      body {
        background-color: #f0f0f0;
      }
      h1 {
        color: blue;
      }
      p {
        font-family: Arial, sans-serif;
      }
    </style>
  </head>
  <body>
    <h1>Olá, Mundo!</h1>
    <p>Este é um exemplo de uso de CSS interno.</p>
  </body>
</html>

O CSS externo é mantido em um arquivo separado (comumente com a extensão .css) e vinculado ao documento HTML através da tag <link>. Este método é excelente para manter a consistência em todo o site e facilita a manutenção do código.

Demonstração e Atividade: Criar e vincular uma folha de estilos externa. ​

  • Demonstração: Crie um arquivo chamado estilos.css e adicione regras de estilo.
  • Atividade: Os alunos criam sua própria folha de estilos externa e a vinculam a um documento HTML.
html
<!-- Dentro do <head> do seu documento HTML -->
<link rel="stylesheet" href="estilos.css" />
css
/* No arquivo estilos.css */
body {
  background-color: #fff;
}
h1 {
  color: green;
}

CSS Inline: Usando o atributo style diretamente em tags HTML ​

O CSS inline é aplicado diretamente a um elemento HTML específico, usando o atributo style. Este método tem a vantagem de ser rápido para testes ou alterações menores, mas pode tornar o código confuso e difícil de manter se usado extensivamente.

Discussão e Exercício Rápido: Uso e limitações do CSS inline. ​

  • Discussão: Explore quando o CSS inline pode ser útil (e.g., testes rápidos, estilos únicos para um elemento) e quando deve ser evitado em favor de métodos mais escaláveis.
  • Exercício Rápido: Aplicar um estilo inline a um elemento.
html
<p style="color: red;">Este texto será exibido em vermelho.</p>

Ao concluir esta seção, você terá uma compreensão prática de como aplicar estilos CSS usando diferentes métodos e saberá escolher o método mais adequado para cada situação. A habilidade de aplicar CSS de maneira eficaz é fundamental para criar páginas web visualmente atraentes e funcionalmente ricas.