Fontes (família de fontes, tamanho, peso, estilo)
Explicaremos cada estilos das propriedades relacionadas a fontes, cores, alinhamento, decoração, espaçamento e transformações de texto, e também fornecer exemplos práticos em HTML e CSS.
Família de Fontes:
A propriedade de família de fontes especifica o tipo de fonte a ser usada para exibir o texto. Alguns exemplos comuns de famílias de fontes são “Arial”, “Helvetica”, “Times New Roman” e “Verdana”. É possível fornecer várias opções de fontes, separadas por vírgulas, para permitir que o navegador use uma alternativa caso a fonte principal não esteja disponível. Aqui está um exemplo:
Exemplo visual:
Obs: Perceba que ao digitar ‘font-family:’ em seguida, o próprio Visual Studio Code já te proporciona uma lista de algumas possibilidades. No entanto, isso não é a única forma de aplicar uma fonte. Veja abaixo outro método.
A primeira coisa que você deve fazer é a acessar o site: https://fonts.google.com/, você irá chegará nessa tela:
Perceba que o site mostra várias fontes. Nesse caso, você irá procurar aquela que mais combina com o design do seu site. Vou te mostrar a fonte ‘Alkatra’.
Na barra de pesquisa, digitei a fonte desejada e no campo ‘Custom’, digitei uma frase para ver como ficaria com a fonte que escolhi.
Depois de escolher a sua fonte você clicará na fonte deseja e em seguida faça isso:
Para você que nunca tentou fazer dessa forma, foram selecionadas as espessuras da fonte, como: regular (400), médio (500), semibold (600) e negrito (700). Depois disso, selecionei a opção ‘import’ e copiei o @import url(‘https://fonts.googleapis.com/css2?family=Alkatra:wght@400;500;600;700&display=swap’); No entanto, é importante ressaltar que copiei apenas essa parte, pois nos meus projetos eu crio uma pasta separada para o CSS, outra para o HTML e outra para o JavaScript, dessa forma tudo fica mais organizado.
Exemplo prático em HTML:
Exemplo prático em CSS:
Exemplo visual:
Tamanho de Fonte:
A propriedade de tamanho de fonte define o tamanho do texto. Pode ser especificado em unidades como pixels (px), ems (em), pontos (pt) ou porcentagem (%). Por exemplo:
Exemplo HTML:
Exemplo CSS:
Exemplo visual:
Peso da Fonte:
A propriedade de peso da fonte define a espessura do texto. Os valores comuns são “normal” (padrão), “bold” (negrito) e valores numéricos como 100, 200, 300, …, 900 (onde 400 é o valor normal e 700 é o negrito). Aqui está um exemplo:
Exemplo HTML:
Exemplo CSS:
Exemplo visual:
Estilo de texto:
A propriedade de estilo de fonte define o estilo do texto. Os valores comuns são “normal” (padrão), “italic” (itálico) e “oblique” (inclinado).
Exemplo HTML:
Exemplo CSS:
Exemplo visual:
Cores de Texto:
A propriedade de cor define a cor do texto. Pode ser especificada usando nomes de cores, valores hexadecimais, valores RGB ou HSL.
Exemplo HTML:
Neste exemplo, usamos uma lista não ordenada <ul> para exibir as cores. Cada cor é representada por um item de lista <li> com a classe .color-item. Os estilos CSS definidos para as classes .color-item, .color-name e .color-box são semelhantes ao exemplo anterior.
Você pode adicionar mais itens de lista conforme necessário, fornecendo os valores apropriados para os estilos de cor, nomes, valores hexadecimais, valores RGB e valores HSL.
Exemplo CSS:
Exemplo Visual:
Alinhamento de Texto:
A propriedade de alinhamento de texto define como o texto é alinhado horizontalmente dentro de seu contêiner. Os valores comuns são “left” (esquerda), “center” (centro), “right” (direita) e “justify” (justificado).
Exemplo HTML:
Exemplo CSS:
Exemplo visual:
Algumas dicas de otimização que serão úteis para sua carreira.
Combine seletores: Agrupe regras CSS que se aplicam a elementos semelhantes. Por exemplo, em vez de definir estilos separados para várias classes, agrupe-os em uma única regras.
Minifique o código: Remova espaços em branco, quebras de linha e comentários desnecessários do seu código CSS para reduzir seu tamanho.
Utilize shorthand properties: Em vez de definir todas as propriedades separadamente, use as propriedades abreviadas sempre que possível. Por exemplo, em vez de margin-top, margin-right, margin-bottom e margin-left, você pode usar margin com os valores combinados.
Utilize herança: Aproveite a herança CSS para aplicar estilos a elementos filhos sem a necessidade de definir as mesmas propriedades repetidamente.
Utilize sprites de imagem: Se o seu site usa várias imagens pequenas, combine-as em um único arquivo e utilize posicionamento CSS para exibir a parte relevante da imagem quando necessário.
Utilize pré-processadores CSS: Considere o uso de pré-processadores como Sass ou Less, que fornecem recursos adicionais, como variáveis, mixins e funções, que podem ajudar a reduzir a repetição de código.
Essas são algumas dicas gerais para otimizar seu código CSS e melhorar a eficiência do seu site.
