HTML / 8. Каскадные таблицы стилей

Бестеговые стили – тег <span>

До сих пор мы применяли каскадные таблицы стилей для управления внешним видом содержимого определенных тегов. Однако в некоторых случаях вы, возможно, захотите изменить внешний вид только части содержимого тега – обычно текста. Обозначайте эти специальные сегменты тегом <span>.

Тег <span> просто ограничивает некую часть содержимого (в соответствии с обычными правилами вложения тегов, разумеется). Броузер интерпретирует тег <span> как еще один тег физической или логической разметки. Единственное различие, конечно, состоит в том, что действие тега <span>, принимаемое по умолчанию, – оставить текст в покое.Тег <span> был введен в язык HTML, чтобы вы могли применять управление стилями, отображением и событиями к произвольному фрагменту содержимого документа. Что касается определения стиля для тега <span>, то обращайтесь с ним как с любым другим HTML-или XHTML-тегом:

span {color: purple}
span.bigger {font-size: larger}

и используйте его как любой другой HTML-или XHTML-тег стиля:

Ожидается урожай кумкватов <span class=bigger>больший, чем когда-либо</span>!

Подобным образом внешний вид тега <span> может быть определен при помощи встроенного объявления стиля:

Ожидается урожай кумкватов <span style="font-size: larger">больший, чем когда-либо</span>!

Как всякий другой тег физической или логической разметки, <span> может вкладываться в другие теги и содержать их в себе.

Тег <span> также поддерживает (хотя их использование нежелательно) много общепринятых атрибутов. Эти атрибуты позволяют пометить (id) или назвать (title) содержимое тега, изменить характеристики отображения содержимого (class, style), указать используемый язык (lang) и связанное с ним направление отображения текста (dir), кроме того, множество on-атрибутов позволяют реагировать на инициированные пользователем с помощью мыши и/или клавиатуры события, связанные с содержимым тега. Не все они реализованы в популярных в настоящее время броузерах для этого и многих других тегов.

Статьи по HTML на эту тему:

Применение стилей в документах
Стилевые свойства

Вернуться в раздел: HTML / 8. Каскадные таблицы стилей