Основні властивості тексту

1.1 Колір

CSS (Cascading Style Sheets) надає багато властивостей для стилізації тексту. Серед них ключовими є color, font-size і font-weight. Ці властивості дозволяють керувати кольором тексту, його розміром і товщиною шрифту відповідно. Розглянемо кожну з цих властивостей детальніше.

Властивість color задає колір тексту. Воно може бути встановлене за допомогою різних колірних форматів, включаючи назви кольорів, шістнадцяткові значення, RGB, RGBA, HSL і HSLA.

Приклади використання

1. Назви кольорів:

p {
  color: red;
}

2. Шістнадцяткові значення:

p {
  color: #ff0000;
}

3. RGB і RGBA:

p {
  color: rgb(255, 0, 0);
  color: rgba(255, 0, 0, 0.5); /* Прозорий червоний */
}

4. HSL і HSLA:

p {
  color: hsl(0, 100%, 50%);
  color: hsla(0, 100%, 50%, 0.5); /* Прозорий червоний */
}

Приклад використання в HTML:

p {
  color: #3498db; /* Синій колір */
}

<body>
  <p>Цей текст буде синім.</p>
</body>

1.2 Властивість font-size

Властивість font-size задає розмір тексту. Значення може бути вказано в різних одиницях, таких як пікселі (px), у відносних (em, rem, %), "похідних" від пікселя (mm, cm, pt, pc), vw і vh (viewport width і viewport height), і інших.

Приклади використання

1. Пікселі:

p {
  font-size: 16px;
}

2. Відносні:

%, em, rem

p {
  font-size: 150%; /* 150% базового розміру шрифту */
  font-size: 1.5em; /* 1.5 рази більше базового розміру шрифту */
  font-size: 1.5rem; /* розмір відносно розміру шрифту елементу <html> */
}

3. "В'юпортні" одиниці:

p {
  font-size: 2vw; /* 2% від ширини "в'юпорту" */
  font-size: 2vh; /* 2% від висоти "в'юпорту" */
}

Приклад використання в HTML:

p {
  font-size: 18px; /* Розмір тексту 18 пікселів */
}

<body>
  <p>Цей текст буде розміром 18 пікселів.</p>
</body>

1.3 Властивість font-weight

Властивість font-weight задає товщину тексту. Значення можуть бути вказані як ключові слова (normal, bold, bolder, lighter) або числові значення від 100 до 900, де 400 відповідає normal, а 700 відповідає bold.

Приклади використання

1. Ключові слова:

p {
  font-weight: bold;
}

2. Числові значення:

p {
  font-weight: 300; /* Легкий текст */
  font-weight: 700; /* Еквівалент bold */
}

Приклад використання в HTML:

p {
  font-weight: 700; /* Жирний текст */
}

<body>
  <p>Цей текст буде жирним.</p>
</body>