С помощью HTML-тега «style» вы определяете внешний вид отдельных элементов на сайте. Тег style размещается в HTML в заголовке и перед возможными скриптами и объединяет глобальные стили CSS. Для этого он совместим с различными атрибутами HTML.
Для чего используется тег стиля HTML?
Тег style в HTML позволяет создавать таблицы стилей для всего документа. Цель тега style в HTML — с одной стороны, точно определить внешний вид отдельных элементов сайта и тем самым сделать их единообразными. С другой стороны, его можно использовать вместе с атрибутами HTML для оптимизации сайта для определенных устройств. Тег style используется для размещения кодов CSS в HTML-документе. В этом элементе также можно указать, как должно быть отображено содержимое сайта. Это значительно ускоряет верстку в браузере, поскольку ему не нужно сначала загружать весь файл CSS.
Как устроен тег style в HTML?
В HTML тег style используется внутри заголовка элемента. Также возможно размещение нескольких элементов с тегом style в HTML для одного сайта. Для наиболее быстрой структуры и облегчения отображения соответствующим браузером тег style размещается в HTML перед любыми сценариями сайта. После введения HTML 5 использование атрибута <style type=»text/css»> больше не является обязательным. Однако содержимое всегда размещается между начальным тегом <style> и конечным тегом </style>. Вот пример:
<!DOCTYPE html>
<html>
<head>
<title>An example of the use of the HTML tag style</title>.
<style>
h1 { color: #000000; }
p { color: #0A06EF; }
</style>
</head>
<body>
<h1>A sample headline for your website</h1>
<p>Sample copy for the first paragraph</p>
</body>
</html>Здесь стиль тега HTML заставляет заголовок «A sample headline for your website» отображаться черным цветом, а первый абзац («Sample copy for the first paragraph») — темно-синим в соответствующем документе. Помимо цвета, размер и шрифт также могут быть заданы подобным образом.
Какие атрибуты совместимы со стилем тега HTML?
Некоторые атрибуты могут быть использованы со стилем тега HTML. К ним относятся все глобальные атрибуты и все атрибуты событий. Ниже приведены наиболее распространенные атрибуты для тега style в HTML:
|
Атрибут |
Значение |
Описание |
|
dir |
auto, rtl, ltr |
Универсальный атрибут dir определяет направление написания текста. |
|
высота |
Пиксель |
Атрибут height определяет высоту элемента. |
|
id |
Строка, которая не может быть пустой или содержать пробелы. |
id определяет уникальный идентификатор для элемента HTML. |
|
lang |
Аббревиатура языка |
Универсальный атрибут lang используется для определения языка в документе или элементе. |
|
media |
все, звуковой, шрифт Брайля, портативный, проекционный, печатный, экранный, tty, телевизионный |
Атрибут media определяет, для какого устройства должен быть оптимизирован соответствующий документ. |
|
ширина |
Пиксель |
Атрибут width определяет ширину элемента. |
|
xml:space |
сохранять, по умолчанию |
Атрибут xml:space используется для определения того, как должны интерпретироваться пробелы в исходном тексте. |
Атрибуты scoped и type больше не используются.
Здесь показан пример связывания HTML-тега style с атрибутом:
<style media="screen">
h1 { color: #000000; }
p { color: #0A06EF; }
body { background-color: #FFFFFF; }
</style>Этот код определяет, что для всех экранов заголовок будет черным, текст в абзаце — темно-синим, а фон — белым.
Стиль тега HTML полезен для любого веб-сайта
Независимо от того, давно ли вы создаете веб-сайты или только начинаете изучать CSS, стиль тегов HTML — это простой и полезный инструмент для определения внешнего вида документа и его отдельных элементов. В конечном итоге это облегчит вам создание веб-сайта в аккуратной и хорошо структурированной форме. Если вы также хотите использовать внешние CSS-файлы, используйте для этого тег link.
Вы хотите, чтобы ваш собственный сайт был создан полностью в соответствии с вашими идеями? Нет проблем! IONOS предлагает вам все необходимое с помощью Конструктора сайтов. Создайте свое присутствие в Интернете индивидуально, не имея никаких предварительных знаний, или позвольте нашим опытным специалистам помочь вам.