Содержание

Тег | 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>. Элемент должен использовать три следующих атрибута. В атрибуте

href указывается абсолютный или относительный URL-адрес файла CSS. Атрибут rel определяет отношение между НТМL-страницей и связанным файлом. При создании ссылки на файл CSS он должен иметь значение stylesheet, показывающее, что присоединяемый таким образом документ содержит таблицу стилей. Атрибут type определяет тип документа, на который указывает ссылка. В нем должно быть указано значение text/css.

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>:

background-color:palegreen, цвет и тип шрифта для заголовков <h2>: color: blue; font-family:verdana, а также размер шрифта, цвет и выравнивание текста по центру для параграфов <p>: font-size:20px; color:red; text-align:center.

Встроенный стиль

Когда необходимо отформатировать отдельный элемент 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), а исходный элемент


Пример

Использование элемента