Neste laboratório, vamos nos colocar no lugar de Alex, um desenvolvedor web em ascensão encarregado de criar um site envolvente e estiloso para um novo serviço para animais de estimação. O objetivo é apresentar os serviços oferecidos, introduzir a equipe e fornecer uma maneira fácil para potenciais clientes entrarem em contato. A cena se passa em uma cidade movimentada, onde a posse de animais de estimação está em alta e a demanda por serviços de cuidados com animais de estimação de qualidade está crescendo. A missão de Alex é projetar um site que se destaque nesse mercado competitivo, usando técnicas e seletores CSS fundamentais para criar uma experiência visualmente atraente e amigável.
Em seguida, passaremos por 5 laboratórios para completar o CSS para "Pet's House".
Seletores CSS
Abrimos uma página web, pressionamos F12 no teclado para abrir as ferramentas de desenvolvedor, podemos ver duas partes, Elementos e Estilos.
Se você estudou HTML, deve saber que os elementos são as diferentes tags HTML usadas para o layout da página, enquanto os estilos são o CSS da página.
Podemos usar CSS para alterar a cor, tamanho, forma, etc. dos elementos HTML, bem como para animá-los.
Conhecendo a utilidade do CSS, então precisamos pensar em um problema, a página tem tantos elementos, como adicionamos um estilo específico ao local especificado do elemento?
Podemos usar seletores CSS para selecionar os elementos que queremos estilizar e, em seguida, usar a propriedade CSS para especificar o estilo que queremos aplicar.
Vamos começar com o seletor CSS mais básico.
Um seletor CSS é a primeira parte de uma Regra CSS. É um padrão de elementos e outros termos que dizem ao navegador quais elementos HTML devem ser selecionados para que os valores da propriedade CSS dentro da regra sejam aplicados a eles. O elemento ou elementos que são selecionados pelo seletor são referidos como o assunto do seletor.
Existem muitos tipos de seletores CSS, e os mais básicos são:
Seletores de tipo
Seletores de classe
Seletores de ID
Seletor Descendente (Descendant Selector)
Seletor Universal (Universal Selector)
Seletores de tipo
Se você precisar definir um estilo uniforme para um determinado tipo de tag em uma página, você deve usar um seletor de tag, onde a palavra-chave do seletor de tag é nomeada após a tag.
Por exemplo, se você deseja definir a cor da fonte de todas as tags <p> em uma página para vermelho, você usaria a seguinte regra CSS:
Seletores de classe
Ao definir um seletor de classe, você deve defini-lo com um ponto e um nome de classe, e ao usar esse seletor de classe, você deve adicionar o atributo class="nome-da-classe" à tag do elemento que usa esse seletor de classe (sem o ponto) para indicar que a tag usa o seletor de classe especificado.
Por exemplo, se você deseja definir o tamanho da fonte de um elemento HTML com class="text-paragraph" para 50 pixels, você usaria a seguinte regra CSS:
Seletores de ID
O seletor de ID especifica um estilo particular para elementos HTML marcados com um ID específico.
Ao definir um seletor de ID, você deve definir o seletor com um sinal "#" e um nome de ID, e ao usar o seletor de ID, você deve adicionar o atributo id="nome do id" (sem o sinal "#") ao elemento da tag HTML para especificar o ID desse elemento HTML, que é único no documento HTML.
Por exemplo, se você deseja definir a cor da fonte de um elemento HTML com id="list-option" para azul, você usaria a seguinte regra CSS:
Seletor Descendente
O seletor descendente seleciona todos os elementos de uma tag dentro da tag, incluindo filhos e outros descendentes.
Ao usar seletores descendentes, o nome da tag pai e o nome da tag descendente devem ser separados por um espaço para identificar os elementos descendentes dentro de uma tag.
Por exemplo, definimos a cor do texto aqua para <span>, um filho do elemento <div>.
Seletor Universal
O seletor universal seleciona todos os elementos em um documento HTML. Ao usar seletores universais, você deve usar um sinal "*".
Por exemplo, vamos definir o tamanho do texto para 50 pixels para todos os elementos.
Agora que sabemos como usar seletores, vamos aprender como usar diferentes atributos de estilo.
Como você pode ver, diferentes partes da página têm cores de fundo diferentes. Em CSS, você pode definir a cor de fundo de um elemento usando background-color.
No site Pet, as cores de fundo no cabeçalho, seção sobre, seção de contato, rodapé são rgb(233, 174, 87) e rgb(239, 206, 157), e a cor da fonte na seção sobre, seção de contato, rodapé é #fff, então precisamos definir as cores de fundo e da fonte abaixo.
background-color é usado para definir a cor de fundo.
Agora você pode ver que alguns dos elementos são muito grandes, como o logotipo, e usamos height para definir a altura do elemento e width para definir a largura do elemento.
A propriedade CSS max-width define a largura máxima de um elemento. Ela impede que o valor usado da propriedade width se torne maior do que o valor especificado por max-width.
A propriedade CSS max-height define a altura máxima de um elemento. Ela impede que o valor usado da propriedade height se torne maior do que o valor especificado para max-height.
O estilo padrão de uma lista não ordenada é que cada item da lista tenha um ponto. Usamos a propriedade list-style para remover o ponto antes do item da lista.
O elemento a é sublinhado por padrão, e usamos a propriedade text-decoration para remover o sublinhado.
a {
color: grey;
text-decoration: none;
}
Transformação de Texto (Text Transform)
A navegação, o rodapé e o título de cada área em uma página de animais de estimação estão em letras maiúsculas, e usamos a propriedade text-transform para alterar a capitalização do texto.
A propriedade CSS text-transform especifica como capitalizar o texto de um elemento. Ela pode ser usada para fazer o texto aparecer em letras maiúsculas ou minúsculas, ou com cada palavra capitalizada.
Ao definir o tamanho da fonte, usamos diferentes unidades. Geralmente, existem cinco tipos de unidades, conforme segue:
Unidade
Tipo
Descrição
px
Absoluta
Uma unidade de tamanho fixo
em
Relativa
Calculada com base no font-size do elemento pai
rem
Relativa
Calculada com base no font-size do elemento raiz
vw
Relativa
Porcentagem da largura da viewport
vh
Relativa
Porcentagem da altura da viewport
Alinhamento de Texto (Text Align)
Na página de animais de estimação, para centralizar o texto do título, podemos usar a propriedade text-align para definir a posição da exibição do texto.
A propriedade font-weight é usada para definir a espessura do texto.
body {
font-weight: 400;
font-size: 1.2vw;
}
form .btn {
text-align: center;
background-color: #e6e8e8;
color: #000;
font-weight: 700;
}
Espaçamento entre Letras (Letter Spacing)
Na página de animais de estimação, podemos observar que há uma certa quantidade de espaço entre os caracteres. Usando a propriedade letter-spacing, podemos definir o espaçamento entre os caracteres do texto.
A propriedade CSS letter-spacing define o comportamento de espaçamento horizontal entre os caracteres do texto. Este valor é adicionado ao espaçamento natural entre os caracteres ao renderizar o texto.
Neste laboratório, você embarcou na jornada de criação de um site para "Pet's House" com Alex. Você configurou o espaço de trabalho do projeto, aplicou estilos CSS fundamentais e experimentou vários seletores CSS para aprimorar a navegação do site. Por meio dessas etapas, você adquiriu experiência prática com os fundamentos e seletores do CSS, habilidades cruciais para qualquer aspirante a desenvolvedor web. Este laboratório estabeleceu a base para conceitos e técnicas de desenvolvimento web mais avançados que você explorará em projetos futuros.
