Синтаксис атрибута

Значения атрибута

Пример использования атрибута

Использование атрибута style в HTML документе:

 
Это заголовок
 
Это параграф.
 

Атрибут style

Атрибут style применяется для определения стиля элемента с помощью правил CSS.

Синтаксис

style="правила описания стилей"

Значения

В качестве значений указываются стилевые правила: вначале следует имя стилевого свойства, затем через двоеточие его значение. Стилевые свойства разделяются между собой точкой с запятой.

Значение по умолчанию

Применяется к тегам

Пример

HTML5 IE Cr Op Sa Fx

      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
 
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
  

Результат данного примера показан на рис. 1.

Рис. 1. Стилевое оформление текста с помощью атрибута style

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Типы тегов

HTML5

Блочные элементы

Строчные элементы

Универсальные элементы

Нестандартные теги

Осуждаемые теги

Видео

Документ

Звук

Изображения

Объекты

Скрипты

Списки

Ссылки

Таблицы

Текст

Форматирование

Формы

Фреймы

Встроенные стили, атрибут style

Мы уже знаем, что хорошим тоном считается подключать стили через тег :

Но есть ещё один способ подключения стилей — встраивание прямо в документ вместо подключения по ссылке. Стили подключатся либо внутри тега , либо прописываются в значении атрибута style самих HTML-элементов.

Вариант подключения стилей в теге используется чаще всего для оптимизации загрузки страницы, ведь в таком случае браузер не будет отправлять дополнительных запросов на сервер. Тег обычно размещают внутри . Например:

Второй вариант встраивания стилей — содержимое атрибута style . Свойства и значения, прописанные таким образом, применятся точечно к одному элементу:

</div>

Обычно использование этого способа считается плохой практикой. Но иногда в виде исключения бывает удобнее воспользоваться встраиванием стилей в атрибут style , чем писать отдельные CSS-правила. Например, когда нужно управлять стилями именно из разметки, и создавать отдельные классы при этом будет излишне. Так бывает, когда какие-то стилевые параметры устанавливаются с помощью сторонних программ или другими людьми, например, через CMS.

Давайте подробнее разберём пример со style=»width: 50%;» . Предположим, что нужно иметь возможность управлять в разметке шириной с помощью свойства width в диапазоне от 0% до 100% . Чтобы сделать это через CSS, пришлось бы создать 100 классов, и применять их, например:

.width-0 < width: 0% >.width-1 < width: 1% >.width-2 < width: 2% >/* и так далее… */

Намного удобнее будет сделать точечное встраивание стиля с шириной в атрибут style .

Давайте и воспользуемся этим приёмом для стилизации прогресса навыков.

А промежуточное состояние нашего сайта уже доступно по этой ссылке.

Перейти к заданию

• index.html Сплит-режим
• style.css Сплит-режим