CSS, или каскадные таблицы стилей, – это то, что используется в современном дизайне веб-сайтов для визуального оформления страницы. В то время как HTML создает структуру страницы, а Javascript может обрабатывать поведение, внешний вид веб-сайта является доменом CSS. Когда дело доходит до этих стилей, они чаще всего применяются с использованием внешних таблиц стилей, но вы также можете применять стили CSS к одному конкретному элементу, используя так называемые «встроенные стили».
Встроенные стили – это стили CSS, которые применяются непосредственно в HTML страницы. У этого подхода есть как преимущества, так и недостатки. Сначала давайте посмотрим, как именно написаны эти стили.
Как написать встроенный стиль
Чтобы создать встроенный стиль CSS, вы начинаете с написания своего свойства стиля, аналогичного тому, которое вы делаете в таблице стилей, но оно должно быть всего одной строкой. Разделяйте несколько свойств точкой с запятой, как в таблице стилей.
фон: #ccc; цвет: #fff; рамка: сплошная черная 1px;
Поместите эту линию стилей внутрь атрибута стиля элемента, который вы хотите стилизовать. Например, если вы хотите применить этот стиль к абзацу в вашем HTML, этот элемент будет выглядеть следующим образом:
<До>
В этом примере этот конкретный абзац будет отображаться со светло-серым фоном (это то, что будет отображаться в #ccc), черным текстом (из цвета # 000) и со сплошной черной рамкой в 1 пиксель вокруг всех четырех сторон абзаца ,
Преимущества встроенных стилей
Благодаря каскаду каскадных таблиц стилей встроенные стили имеют наивысший приоритет или специфичность в документе. Это означает, что они будут применяться независимо от того, что еще продиктовано вашей внешней таблицей стилей (за исключением всех стилей, которым дана! Важная декларация этого листа, но это не то, что следует делать на рабочих сайтах, если можно избежать). Единственные стили, которые имеют более высокий приоритет, чем встроенные, – это пользовательские стили, применяемые самими читателями. Если у вас возникли проблемы с применением ваших изменений, попробуйте установить встроенный стиль элемента. Если ваши стили по-прежнему не отображаются с использованием встроенного стиля, вы знаете, что происходит что-то еще.
Встроенные стили легко и быстро добавить, и вам не нужно беспокоиться о написании правильного селектора CSS, поскольку вы добавляете стили непосредственно к элементу, который хотите изменить (этот элемент по существу заменяет селектор, который вы бы написали во внешней таблице стилей ). Вам не нужно создавать целый новый документ (как с внешними таблицами стилей) или редактировать новый элемент в заголовке документа (как с внутренними таблицами стилей). Вы просто добавляете атрибут стиля, действительный почти для каждого элемента HTML. Это все причины, по которым у вас может возникнуть искушение использовать встроенные стили, но вы также должны знать о некоторых очень существенных недостатках этого подхода.
Недостатки встроенных стилей
Поскольку встроенные стили являются наиболее специфичными в каскаде, они могут перевешивать вещи, которые вы не намеревались. Они также сводят на нет один из самых мощных аспектов CSS – возможность стилизовать множество веб-страниц из одного центрального файла CSS, чтобы упростить управление будущими обновлениями и изменениями стиля.
Если бы вам пришлось использовать только встроенные стили, ваши документы быстро стали бы раздутыми и их было бы очень сложно поддерживать. Это потому, что встроенные стили должны применяться к каждому элементу, на котором вы хотите их использовать. Поэтому, если вы хотите, чтобы все ваши абзацы имели семейство шрифтов «Arial», вы должны добавить встроенный стиль к каждому тегу
в вашем документе. Это добавляет как работу по техническому обслуживанию для дизайнера, так и время загрузки для читателя, поскольку вам нужно будет изменить это на каждой странице вашего сайта, чтобы изменить это семейство шрифтов. Кроме того, если вы используете отдельную таблицу стилей, вы можете изменить ее в одном месте, и каждая страница получит это обновление. По правде говоря, это шаг назад в веб-дизайне – назад времена тегов!
Еще один недостаток встроенных стилей заключается в том, что с ними невозможно стилизовать псевдоэлементы и -классы. Например, с помощью внешних таблиц стилей вы можете стилизовать цвет посещенного, наведения, активного и цвета ссылки тега привязки, но с помощью встроенного стиля все, что вы можете стилизовать, это сама ссылка, потому что к этому прикреплен атрибут стиля ,
В конечном счете, мы рекомендуем не использовать встроенные стили для своих веб-страниц, поскольку они вызывают проблемы и заставляют страницы работать намного больше. Единственный раз, когда мы используем их, это когда мы хотим быстро проверить стиль во время разработки. Как только мы подходим к этому единственному элементу, мы перемещаем его в нашу внешнюю таблицу стилей.
