В то время как HTML имеет теги, CSS имеет селекторы. Селекторы — это имена, присваиваемые стилям во внутренних и внешних таблицах стилей. В этом руководстве для начинающих по CSS мы сосредоточимся на HTML-селекторах, которые являются просто названиями HTML-тегов и используются для изменения стиля определённого типа элемента.
Для каждого селектора внутри фигурных скобок есть “свойства”, которые просто принимают форму таких слов, как color, font-weight или background-color.
После двоеточия свойству присваивается значение (БЕЗ знака “равно”). Для разделения свойств используются точки с запятой.
body {
font-size: 14px;
color: navy;
}При этом будут применены заданные значения к свойствам font-size и color к селектору body.
Таким образом, в принципе, когда это применяется к HTML-документу, текст между тегами body (который является содержимым всего окна) будет иметь размер 14 пикселей и тёмно-синий цвет.
Длины и проценты
В CSS используется множество специфичных для свойств единиц измерения значений, но есть некоторые общие единицы измерения.
px (например, font-size: 12px) ─ единица измерения для пикселей.
em (например, font-size: 2em) ─ единица измерения вычисляемого размера шрифта. Так, например, “2em” в два раза превышает текущий размер шрифта.
pt (например, font-size: 12pt) ─ единица измерения в точках, обычно для измерений на печатных носителях.
% (например, width: 80%) ─ это единица измерения в процентах.
Другие единицы измерения включают pc (пиктограммы), cm (сантиметры), mm (миллиметры) и in (дюймы).
Когда значение равно нулю, вам не нужно указывать единицу измерения. Например, если бы вы хотели не указывать границу, это было бы border: 0.
В данном случае “px” на самом деле не обязательно означает пиксели ─ маленькие квадратики, из которых состоит дисплей компьютера. Современные браузеры позволяют пользователям увеличивать и уменьшать масштаб страницы, так что, даже если вы укажете, например, font-size: 12px или height: 200px, хотя они будут иметь подлинный указанный размер в браузере без увеличения, они всё равно будут увеличиваться и уменьшаться в размере в зависимости от предпочтений пользователя. Это хорошая вещь. Поверьте мне.
Страницы в тему:
- Следующая страница: Цвета
- Предыдущая страница: Применение CSS
