Тег | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 2.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Спецификация
| HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Тег <style> применяется для определения стилей элементов веб-страницы. Тег <style> необходимо использовать внутри контейнера <head>. Можно задавать более чем один тег <style>.
Синтаксис
<head>
<style type="text/css">
...
</style>
</head>Атрибуты
- media
- Определяет устройство вывода, для работы с которым предназначена таблица стилей.
- type
- Сообщает браузеру, какой синтаксис использовать, чтобы правильно интерпретировать стили.
Закрывающий тег
Обязателен.
Пример
HTML5IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Тег STYLE</title>
<style type="text/css">
h2 {
font-size: 120%;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #333366;
}
</style>
</head>
<body>
<h2>Hello, world!</h2>
</body>
</html>Результат примера показан на рис. 1. Обратие внимание, что цвет текста и начертание шрифта в теге <h2> изменились.
Рис. 1. Вид заголовка после применения стилей
HTML Стили
CSS (Cascading Style Sheets), или каскадные таблицы стилей, используются для описания внешнего вида веб-документа, написанного языком разметки. CSS устанавливает стилевые правила, которые изменяют внешний вид элементов, размещенных на веб-страницах, выполняют тонкую настройку их деталей, таких как цвет, шрифт, размер, границы, фон и местоположение в документе.
Вы можете встроить CSS-код непосредственно в элемент разметки в виде значения атрибута style. Этот атрибут доступен для всех элементов HTML. С помощью CSS можно указать ряд свойств стиля для данного HTML-элемента. Каждое свойство имеет имя и значение, разделенные двоеточием (:). Каждое объявленное свойство отделяется точкой с запятой (;).
Вот как это выглядит для элемента </p>:
Пример: применение стилей к элементу <p>
Текст с атрибутом style
<p>
Текст с атрибутом style</p>Способы добавления CSS стилей
Стандарт CSS предлагает три варианта применения таблицы стилей к веб-странице:
- Внешняя таблица стилей — определение правил таблицы стилей в отдельном файле .css, с последующим подключением этого файла в HTML-документ с помощью тега <link>.
- Внутренняя таблица стилей — определение правил таблицы стилей с использованием тега <style>, который обычно располагается в разделе <head> HTML-документа .
- Встроенный стиль — это способ вставки языка таблицы стилей прямо в начальный тег HTML-элемента.
Давайте познакомимся со всеми тремя способами на конкретных примерах.
Внешняя таблица стилей
Внешняя таблица стилей хранится в отдельном файле с расширением CSS. Это самый эффективный способ, т. к. он полностью отделяет правила форматирования от ваших HTML-страниц. Он также позволяет легко применять одни и те же правила ко многим страницам.
Отдельный файл с таблицей стилей прикрепляется к HTML-документу с помощью тега <link>. Это одинарный тег, который располагается внутри элемента <head>. Элемент должен использовать три следующих атрибута. В атрибуте
CSS, как и HTML, не является языком программирования. Это язык каскадных таблиц стилей, то есть он позволяет выборочно применять нужные стили к элементам в HTML-документах. Например, чтобы выбрать все элементы <p>, т.е. параграфы на HTML-странице и окрасить их текст в красный цвет, вы должны написать на CSS следующее:
p {
color: red;
}
Давайте поместим эти три строки CSS в новый файл в любом текстовом редакторе (например Notepad++), а затем сохраним файл как style.css в папке styles.
Чтобы применять CSS к нашему HTML-документу, вставьте следующую строку в шапку, то есть между тегами <head> и </head>:
<link href="styles/style.css" rel="stylesheet" type="text/css">
Пример: Внешняя таблица стилей
Текст первый
Текст второй
Текст третий
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Внешняя таблица стилей</title>
<link href="styles/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>Текст первый</p>
<p>Текст второй</p>
<p>Текст третий</p>
</body>
</html>
Внутренняя таблица стилей
Данный стиль определяется в самом HTML-документе и обычно располагается в заголовке веб-страницы HEAD. По своей гибкости и возможностям этот способ подключения стилей уступает предыдущему, но также позволяет размещать все стили в одном месте. В данном случае, стили разполагаются прямо в теле HTML-документа. Вы можете включить правила CSS в НТМL-страницу, поместив их внутри элемента <style>, который обычно находится в элементе <head>, но фактически может быть помещен в любом месте документа. Этих тегов на странице может быть несколько.
Тег <style> позволяет записывать внутри себя код в формате CSS:
<style type="text/css">
body {
background-color:palegreen;
}
h2{
color: blue;
font-family:verdana;
}
p{
font-size:20px;
color:red;
}
</style>
Пример: Внутренняя таблица стилей
Текст первый
Текст второй
Текст третий
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Внутренняя таблица стилей</title>
<style type="text/css">
body {
background-color:palegreen;
}
h2{
color: blue;
font-family:verdana;
}
p{
font-size:20px;
color:red;
text-align:center;
}
</style>
</head>
<body>
<h2>Заголовок</h2>
<p>Текст первый</p>
<p>Текст второй</p>
<p>Текст третий</p>
</body>
</html>
В данном примере мы с помощью CSS установили цвет фона для элемента <body>:
Встроенный стиль
Когда необходимо отформатировать отдельный элемент HTML-страницы, описание стиля можно расположить непосредственно внутри открывающего тега при помощи уже специализированного атрибута style. Например:
<p>Параграф</p>Такие стили называют встроенными (inline), или внедренными. Правила, определенные непосредственно внутри открывающего тега элемента перекрывают правила, определенные во внешнем файле CSS, а также правила, определенные в элементе <style>.
В следующем примере к HTML-документу подключены все три рассмотренные стиля форматирования:
Пример: Приоритетность стилей
Текст первый
Текст второй
Текст третий
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Встроенный стиль</title> <link href="styles/style.css" rel="stylesheet" type="text/css"> <style type="text/css"> body { background-color:palegreen; } h2{ color: blue; font-family:verdana; } p{ font-size:20px; color:coral; } </style> </head> <body> <h2>Заголовок</h2> <p>Текст первый</p> <p>Текст второй</p> <p>Текст третий</p> </body> </html>
| Чем ближе описание стиля находится к элементу, тем более высокий приоритет имеет этот стиль при выборе браузером конечного правила оформления. |
Задачи
Выравнивание текста по центру
Используя встроенный стиль к параграфу выровняйте текст по центру.
Задача HTML:
Реши сам »<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Выравнивание текста по центру</title> </head> <body> <p>Это параграф.</p> </body> </html>
Цвет фона страницы
Измените цвет фона всей HTML-страницы на «khaki».
Задача HTML:
Реши сам »<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Цвет фона страницы</title> <style> body {background-color:palegreen;} h2{color: blue;} p{color:coral;} </style> </head> <body> <h2>Заголовок</h2> <p>Параграф</p> </body> </html>
Тип шрифта для страницы
Установите тип шрифта для всех элементов HTML-страницы «verdana».
Задача HTML:
Реши сам »<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Тип шрифта для страницы</title> <style> body {background-color:khaki;} h2{color: blue;} p{color:coral;} </style> </head> <body> <h2>Заголовок</h2> <p>Параграф</p> </body> </html>
Внешняя таблица стилей
В папке styles находится файл со стилями style.css. Подключите стилевой файл (внешняя таблица стилей) к HTML-документу.
Задача HTML:
Реши сам »<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Внешняя таблица стилей</title> </head> <body> <p>Параграф первый</p> <p>Параграф второй</p> <p>Параграф третий</p> </body> </html>
style — Веб-технологии для разработчиков
Краткое описание
HTML-элемент <style> содержит стилевую информацию для документа или его части. По умолчанию стилевые инструкции внутри этого элемента считаются написанными на CSS.
Атрибуты
This element includes the global attributes.
type- Этот атрибут определяет язык стиля в виде MIME-типа (кодировка не указывается). Этот атрибут необязателен, и при отсутствии считается «
text/css». media- К какому виду медиа должен применяться этот стиль. Значение этого атрибута — media query, которое при отсутствии атрибута будет
all. scoped- Если указан этот атрибут, то стиль применяется только внутри своего родительского элемента. Если не указан, то стиль применяется ко всему документу.
title- Specifies alternative style sheet sets.
disabled- If set, disables (does not apply) the style rules, specified within the element, to the
Document.
Примеры
Простая таблица стилей
<style type="text/css">
body {
color:red;
}
</style>
Таблица стилей с ограниченной областью действия
<article>
<div>Атрибут scoped позволяет включить элементы стиля в середине документа.
Внутренние правила применяются только внутри родительского элемента.</div>
<p>Этот текст должен быть чёрным. Если он красный, ваш браузер не поддерживает атрибут scoped.</p>
<section>
<style scoped>
p { color: red; }
</style>
<p>Этот должен быть красным.</p>
</section>
</article>
Live sample
Спецификации
Совместимость браузеров
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Базовая поддержка | (Да) | 1.0 (1.7 или ранее) | (Да) | (Да) | (Да) |
scoped | 20 [1] | 21.0 (21.0)[2] | Нет | Нет | Нет |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Базовая поддержка | (Да) | 1.0 (1.7 или ранее) | (Да) | (Да) | (Да) |
scoped | ? | 25.0 (25.0)[2] | Нет | Нет | Нет |
[1] Поддерживается в Chrome с 20+ по 34 при включённом флаге «Enable <style scoped>» или «experimental WebKit features» в chrome://flags. Удалён в Chrome 35+ из-за сложности кода.
[2] Gecko 20 и более новые реализуют псевдо-классы :scope, но должна быть включена настройка layout.css.scope-pseudo.enabled. This is only the case by default in Nightly and Aurora test versions.
См. также
- Элемент
<link>, позволяющий использовать внешние таблицы стилей.
CSS HTML уроки для начинающих академия
Манипулировать текстом
Цвета, Коробки
Стилизация HTML с CSS
CSS означает каскадные таблицы стилей.
CSS описывает, как HTML-элементы должны отображаться на экране, бумаге или на других носителях.
CSS экономит много работы. Он может контролировать расположение нескольких веб-страниц все сразу.
CSS можно добавлять к элементам HTML тремя способами:
- Встроенный — с помощью атрибута Style в элементах HTML
- Internal -с помощью
<style>элемента в<head>разделе - Внешний — с помощью внешнего CSS-файла
Наиболее распространенным способом добавления CSS является сохранение стилей в отдельных CSS-файлах. Однако, здесь мы будем использовать встроенный и внутренний стиль, потому что это легче продемонстрировать, и проще для вас, чтобы попробовать его самостоятельно.
Совет: Вы можете узнать больше о CSS в нашем учебнике по CSS.
Встроенный CSS
Встроенный CSS используется для применения уникального стиля к одному элементу HTML.
Встроенный CSS использует атрибут style элемента HTML.
В этом примере устанавливается цвет текста элемента <h2> синим цветом:
Пример
<h2>This is a Blue Heading</h2>
Внутренняя CSS
Внутренний CSS используется для определения стиля для одной HTML-страницы.
Внутренняя таблица CSS определена в разделе <head> HTML-страницы в элементе <style> :
Пример
body {background-color: powderblue;}
h2 {color: blue;}
p {color: red;}
<h2>This is a
heading</h2>
<p>This is a paragraph.</p>
</body>
</html>
Тег HTML встроенные стили CSS
Тег <style> HTML содержит встроенные CSS стили страницы.
Внутри тега style размещаются CSS правила, определяющие как будет отображаться страница в браузере (отвечают за стиль каждого элемента страницы).
CSS свойства, описанные в тегах <style>, будут действовать на всю страницу сайта не зависимо от расположения тега style.
Размещать теги <style> можно как в head, так и в body областях HTML документа. Можно использовать несколько HTML тегов style на одной странице.
Вы также можете подключить внешний файл стилей CSS (для этого используйте тег <link>), либо добавить CSS код для конкретного элемента с помощью атрибута style.
Подробнее о том как вставить CSS в HTML смотрите в статье: Подключение стилей CSS к HTML документу. Как подключить CSS файл.
Тег <style> в HTML обычно используется для подключения индивидуальных CSS правил страницы. Определять общие CSS стили сайта лучше через внешний CSS файл с помощью тега <link>.
Синтаксис
<style>CSS стили страницы</style>Пример использования тега <style> в HTML коде
<!DOCTYPE html>
<html>
<head>
<title>Встроенные в HTML документ стили CSS c помощью тега style</title>
<style type="text/css">
.last_news {
margin-bottom: 20px;
font: normal 16px Tahoma, sans-serif;
}
.toolbar .last_news a {
text-decoration: underline;
color: black;
}
</style>
</head>
<body>
<!-- контент страницы -->
</body>
</html>Поддержка браузерами
Атрибуты тега <style>
| Атрибут | Значение | Описание |
|---|---|---|
| media |
media_query |
Определяет условия применения CSS стилей, содержащихся внутри тега (содержит требования к устройству пользователя). Если атрибут не указан, стили из тега будут применены для любого устройства пользователя. |
| type |
media_type |
Определяет тип содержимого тега. В HTML5 единственное поддерживаемое значение: «text/css«. Обязательный атрибут для HTML 4.01. |
Тег <style> также поддерживает глобальные HTML атрибуты.
Атрибут style | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 6.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Описание
Атрибут style применяется для определения стиля элемента с помощью правил CSS.
Синтаксис
style="правила описания стилей"Значения
В качестве значений указываются стилевые правила: вначале следует имя стилевого свойства, затем через двоеточие его значение. Стилевые свойства разделяются между собой точкой с запятой.
Значение по умолчанию
Нет.
Применяется к тегам
<a>, <abbr>, <acronym>, <address>, <applet>, <area>, <b>, <basefont>, <bdo> <bgsound>, <big>, <blockquote>, <body>, <br>, <button>, <caption>, <center>, <cite>, <code>, <col>, <colgroup>, <dd>, <del>, <dfn>, <dir>, <div>, <dl>, <dt>, <em>, <embed>, <fieldset>, <font>, <form>, <frame>, <h2>, <h3>, <h4>, <h5>, <h5>, <h6>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <isindex>, <kbd>, <label>, <legend>, <li>, <link>, <map>, <marquee>, <menu>, <nobr>, <object>, <ol>, <option>, <p>, <plaintext>, <pre>, <q>, <s>, <samp>, <select>, <small>, <span>, <strike>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <u>, <ul>, <var>, <wbr>, <xmp>
Пример
HTML5IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Атрибут style</title>
</head>
<body>
<p><span>L</span>orem ipsum dolor
sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt
ut lacreet dolore magna aliguam erat volutpat.</p>
<p><span>U</span>t wisis enim ad
minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat.</p>
</body>
</html>Результат данного примера показан на рис. 1.
Рис. 1. Стилевое оформление текста с помощью атрибута style
Почему нет?
Принцип работы JavaScript заключается в том, что мы можем создавать сценарии как встроенный блок:
<сценарий>
пусть foo = "бар";
Или, если сценарий должен быть загружен из сети…
С помощью CSS мы можем создать встроенный блок стилей:
<стиль>
.foo {цвет: красный; }
Так почему же не ? Вместо этого у нас .
Гарри Робертс спросил об этом на днях в Твиттере:
Может ли кто-нибудь из историков W3 сказать нам, почему это ``, а не `объявляет блок правил только для этой страницы
-Брюс Лоусон(@brucel)29 ноября 2018 г.
Я вроде как понял.Расположение в документе имеет значение дляsrc,но не для,которое вместо этого относится ко всему документу.Я полагаю,что трещина в этом рассуждении заключается в том,что порядок таблиц стилей имеет значение для специфичности порядка,но я понимаю суть.
W3C позвонил,чтобы подтвердить эту логику:
(2/2),а исходный элемент