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>
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ