Front-end com Vue 3

Aparência

Sintaxe Básica do CSS ​

Nesta parte do curso, vamos aprofundar nossa compreensão da sintaxe básica do CSS, explorando os componentes que permitem estilizar e transformar o visual das páginas web. Compreender como os seletores funcionam, juntamente com o uso adequado de propriedades e valores, é fundamental para aplicar estilos eficazes e precisos aos elementos HTML.

Seletores: Identificar Elementos HTML ​

Os seletores CSS são a maneira pela qual escolhemos quais elementos ou grupos de elementos queremos estilizar. Existem vários tipos de seletores, mas vamos focar nos três principais:

  • Seletores de Tag: Estilizam todos os elementos de uma determinada tag HTML. Por exemplo, p { } aplicaria estilos a todos os parágrafos.
  • Seletores de Classe: Utilizados para estilizar elementos que compartilham a mesma classe. São precedidos por um ponto. Por exemplo, .classeExemplo { } estiliza todos os elementos com a classe "classeExemplo".
  • Seletores de ID: Estilizam um elemento específico que possui um ID único. São precedidos por uma hashtag. Por exemplo, #idExemplo { } estiliza o elemento com o ID "idExemplo".

Atividade: Realize exercícios rápidos selecionando elementos com diferentes seletores. Tente aplicar um estilo básico, como alterar a cor do texto, para ver o efeito de cada seletor.

Propriedades e Valores: Modificar os Estilos dos Elementos ​

Depois de selecionar os elementos, usamos propriedades e valores para definir como queremos alterar a aparência desses elementos. As propriedades indicam o aspecto do estilo que queremos modificar (como cor, tamanho da fonte, margem), enquanto os valores especificam como queremos mudar essas propriedades.

  • Cor de Fundo: background-color altera a cor de fundo de um elemento. Exemplo: background-color: blue;
  • Tamanho da Fonte: font-size modifica o tamanho da fonte. Exemplo: font-size: 16px;
  • Layout: Propriedades como margin, padding, e border ajudam a definir o layout e o espaçamento dos elementos.

Demonstração: Vamos alterar a cor de fundo de um elemento, ajustar o tamanho da fonte e modificar o layout usando as propriedades de margem e preenchimento.

Atividade Prática: Aplique estilos a um parágrafo e a um cabeçalho em sua página. Experimente com diferentes cores, tamanhos de fonte e propriedades de layout para ver como esses estilos impactam visualmente os elementos.

Ao completar esta seção, você terá uma base sólida sobre como utilizar seletores para escolher os elementos corretos e como aplicar propriedades e valores para modificar esses elementos. Esta é uma habilidade essencial para qualquer desenvolvedor web, permitindo criar páginas que não apenas funcionam bem, mas também têm uma aparência excelente.