1.1 Cor
CSS (Cascading Style Sheets) fornece várias propriedades para estilizar o texto. Entre elas, as principais são
color, font-size e font-weight. Essas propriedades permitem controlar a cor
do texto, seu tamanho e a espessura da fonte, respectivamente. Vamos dar uma olhada mais de perto em cada uma dessas propriedades.
A propriedade color define a cor do texto. Ela pode ser configurada usando vários formatos de cores, incluindo nomes de cores, valores hexadecimais, RGB, RGBA, HSL e HSLA.
Exemplos de uso
1. Nomes de cores:
p {
color: red;
}
2. Valores hexadecimais:
p {
color: #ff0000;
}
3. RGB e RGBA:
p {
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5); /* Vermelho transparente */
}
4. HSL e HSLA:
p {
color: hsl(0, 100%, 50%);
color: hsla(0, 100%, 50%, 0.5); /* Vermelho transparente */
}
Exemplo de uso em HTML:
p {
color: #3498db; /* Cor azul */
}
<body>
<p>Este texto será azul.</p>
</body>
1.2 Propriedade font-size
A propriedade font-size define o tamanho do texto. O valor pode ser especificado em várias unidades, como
pixels (px), relativas (em, rem, %), derivadas de pixel
(mm, cm, pt, pc), vw e vh
(largura e altura do viewport), entre outras.
Exemplos de uso
1. Pixels:
p {
font-size: 16px;
}
2. Relativas:
%, em, rem
p {
font-size: 150%; /* 150% do tamanho da fonte base */
font-size: 1.5em; /* 1,5 vezes maior que o tamanho da fonte base */
font-size: 1.5rem; /* tamanho relativo ao tamanho da fonte do elemento <html> */
}
3. Unidades de viewport:
p {
font-size: 2vw; /* 2% da largura do viewport */
font-size: 2vh; /* 2% da altura do viewport */
}
Exemplo de uso em HTML:
p {
font-size: 18px; /* Tamanho do texto 18 pixels */
}
<body>
<p>Este texto terá 18 pixels de tamanho.</p>
</body>
1.3 Propriedade font-weight
A propriedade font-weight define a espessura do texto. Os valores podem ser especificados como palavras-chave
(normal, bold, bolder, lighter) ou valores numéricos de
100 a 900, onde 400 corresponde a normal, e
700 corresponde a bold.
Exemplos de uso
1. Palavras-chave:
p {
font-weight: bold;
}
2. Valores numéricos:
p {
font-weight: 300; /* Texto leve */
font-weight: 700; /* Equivalente a bold */
}
Exemplo de uso em HTML:
p {
font-weight: 700; /* Texto em negrito */
}
<body>
<p>Este texto ficará em negrito.</p>
</body>
GO TO FULL VERSION