контролирует, показывается ли элемент в блочном или встроенном виде.
>Текст показан встроенным,
>в виде блока, и
>вообще не виден.
Блочный элемент выводится отдельным блоком, а последний вообще не виден – >display: none
отключает показ элементов. Таким образом можно прятать элементы. Обычно это предпочтительно полному удалению их из документа, потому что их легче потом при необходимости снова показать.
Код JavaScript может напрямую действовать на стиль элемента через свойство узла >style
. В нём содержится объект, имеющий свойства для всех свойств стилей. Их значения – строки, в которые мы можем писать для смены какого-то аспекта стиля элемента.
>
> Красотень
>
>
> var para = document.getElementById("para");
> console.log(para.style.color);
> para.style.color = "magenta";
>
Некоторые имена свойств стилей содержат дефисы, например >font-family
. Так как с ними неудобно было бы работать в JavaScript (пришлось бы писать >style[«font-family»]
), названия свойств в объекте стилей пишутся без дефиса, а вместо этого в них появляются прописные буквы: >style.fontFamily
.
Система стилей в HTML называется CSS (Cascading Style Sheets, каскадные таблицы стилей). Таблица стилей – набор стилей в документе. Его можно писать внутри тега >
:
>
> strong {
> font-style: italic;
> color: gray;
> }
>
>Теперь текст тега strong наклонный и серый.
«Каскадные» означает, что несколько правил комбинируются для получения окончательного стиля документа. В примере на стиль по умолчанию для >
, который делает текст жирным, накладывается правило из тега >
, по которому добавляется >font-style
и цвет.
Когда значение свойства определяется несколькими правилами, приоритет остаётся у более поздних. Если бы стиль текста в >
включал правило >font-weight: normal
, конфликтующее со стилем по умолчанию, то текст был бы обычный, а не жирный. Стили, которые применяются к узлу через атрибут >style
, имеют наивысший приоритет.
В CSS возможно задавать не только название тегов. Правило для >.abc
применяется ко всем элементам, у которых указан класс >“abc”
. Правило для >\#xyz
применяется к элементу с атрибутом >id
равным >“xyz”
(атрибуты >id
необходимо делать уникальными для документа).
>.subtle {
> color: gray;
> font-size: 80%;
>}
>#header {
> background: blue;
> color: white;
>}
>/* Элементы p, у которых указаны классы a и b, а id задан как main */