Descubra mais sobre CSS
Vamos explorar mais maneiras pelas quais o CSS pode tornar o gerenciamento de seu conteúdo mais fácil e seu conteúdo mais interessante para seus leitores.
Comentários
Tal como acontece com qualquer linguagem de computador, CSS suporta comentários. Para comentar em uma seção de CSS, você usaria /* comment */. O /* identifica o início do comentário e */ marca o fim. Um comentário CSS pode abranger várias linhas de texto. Os comentários são uma ótima maneira de deixar anotações para si ou para outros desenvolvedores ou para fazer anotações enquanto aprende o idioma.
Importante
Os comentários CSS são públicos e acessíveis tanto pelo navegador quanto pelos usuários do seu site. Não armazene informações confidenciais nos comentários.
Os comentários CSS são formatados de forma diferente dos comentários HTML. Os comentários em HTML usam a <!--comment--> sintaxe.
Definindo fontes
Você pode usar CSS para informar ao navegador qual fonte você deseja usar para texto específico. Às vezes você quer usar Arial para legibilidade ou algo mais extravagante para estilo. A imagem a seguir mostra algum texto em Arial e outro texto em uma fonte chamada "Impacto".
A opção mais comum para definir a fonte a ser usada em uma página é font-family.
font-family normalmente é definido como uma lista de fontes, permitindo que o navegador use a primeira fonte listada que ele pode suportar. Por exemplo, uma configuração de tentativas de Tahoma, Verdana, sans-serif usar Tahoma, seguido por Verdana, e finalmente uma fonte genérica sans serif.
Você também pode usar outras opções, como estilo, peso e decoração.
font-style é usado para colocar o texto em itálico definindo o valor como italic.
font-weight suporta diferentes configurações em negrito, sendo bold as mais comuns. E, finalmente, text-decoration é usado para underline, overline, ou line-through texto.
| CSS | Resultado |
|---|---|
font-weight: bold; |
Demonstração |
font-style: italic; |
Demonstração |
text-decoration: line-through; |
|
text-decoration pode parecer diferente das outras opções usadas para modificar a exibição de uma fonte. A principal diferença é que text-decoration é usado para aplicar estilo ao redor ou no texto, mas não modifica a fonte em si. Negrito e itálico estão modificando a fonte.
Nota
O uso de sublinhado em uma página da Web geralmente deve ser evitado porque o texto pode parecer um hiperlink.
Dimensionamento de fontes
O font-size permite que você indique o tamanho da fonte que deseja usar. O CSS oferece a capacidade de usar dimensionamento absoluto ou relativo. O dimensionamento absoluto é normalmente definido em pixels e sempre usa o tamanho especificado. O dimensionamento relativo pode ser baseado no tamanho padrão do navegador e medido em porcentagem ou com base no dimensionamento do elemento de referência.
Nota
O tamanho de fonte padrão para muitos navegadores é de 16 pixels.
O dimensionamento absoluto pode ser medido em pixels e é indicado em CSS usando px. Para definir uma fonte como 14 pixels, você pode usar a diretiva font-size: 14px;.
O tamanho relativo das fontes é normalmente medido usando em ou rem.
em é curto para element e é relativo ao pai (em) ou à raiz (rem). A raiz é o html elemento.
1em ou 1rem é igual ao tamanho do elemento pai ou raiz, enquanto 2em ou 2em seria o dobro do tamanho. Como os tamanhos de tela podem variar, normalmente é melhor usar o tamanho relativo sempre que possível.
Considere os seguintes HTML e CSS como exemplo:
<html>
<body>
<div>Sample text</div>
</body>
</html>
html {
font-size: 18px;
}
div {
font-size: 14px;
}
Se o div elemento 1em for 14 pixels porque o pai é div e definido como 14px, enquanto 1rem seria 18 pixels porque a html raiz está definida como 18px.
1.5em para o div elemento seria de 21 pixels (14 * 1,5 = 21), e 1.5rem seria de 27 pixels (18 * 1,5 = 27). Você pode usar em e rem garantir que o restante da página seja dimensionado à medida que atualiza os tamanhos pai ou raiz.
Cores
A cor da fonte pode ser definida usando a color propriedade.
color pode ser definido como valores RGB (vermelho, verde, azul) ou como uma das muitas cores nomeadas como black ou lightgray.
Os valores RGB em CSS podem ser valores hexadecimais prefixados com um #, ou valores de 0 a 255 dentro da rgb função. Para definir a cor para o tom padrão de marrom, você usaria color: brown;. Para um tom personalizado de roxo, você pode usar color: #7462e0o .
/* named value */
div {
color: brown;
}
/* RGB hex value */
h1 {
color: #7462e0;
}
/* RGB function */
h2 {
color: rgb(105, 6, 19);
}
Importante
A seleção de cores deve sempre considerar aqueles que têm uma deficiência de visão de cores. Você pode usar ferramentas como o Color Safe para ajudar na seleção de cores contrastantes para garantir que seu site seja acessível a todos os usuários.
Como você pode suspeitar, há dezenas de cores nomeadas disponíveis e os valores RGB oferecem um conjunto infinito de opções. Editores como vscode.dev ou Visual Studio Code podem ajudar a identificar os valores de cores disponíveis. Ambos os editores mostram uma visualização de amostra de cores em seu CSS. Se passar o rato sobre a amostra, ser-lhe-á apresentado um seletor de cores que pode utilizar para definir a cor que pretende.
