Title css: Атрибут title

Содержание

HTML/Атрибут title (Элемент style)

Синтаксис

(X)HTML

<style rel="..." title="[значение]">
  ...
</style>

Описание

Атрибут / параметр title (от англ. «title» ‒ «название, заглавие») указывает имя таблицы стилей. Из таблиц стилей с одинаковыми именами создаётся альтернативный набор таблиц стилей, то есть все одноимённые таблицы стилей сводятся в одну (не путать альтернативный набор таблиц стилей и «альтернативную» таблицу стилей). Согласно HTML спецификации, при наличии нескольких альтернативных наборов таблиц стилей, браузер должен предоставлять возможность выбора между наборами.

Примечание

Если в style элементе отсутствует данный атрибут, то такой элемент не имеет названия; значение «title» атрибута родительских элементов не применяется (не наследуется) к style элементу.

Поддержка браузерами

Chrome

Поддерж.

^[1][3][4]

Firefox

Поддерж.^[1][3]

Opera

Поддерж.^[1][2]

Maxthon

Поддерж.^[1][3]

IExplorer

Поддерж.^[1][3]

Safari

Поддерж.^[1][3]

iOS

Поддерж.^[1][3]

Android

Поддерж.^[1][3]

[1] ‒ отсутствует инструмент выбора между альтернативными наборами таблиц стилей.
[2] ‒ применяются сразу все альтернативные наборы таблиц стилей.
[3] ‒ применяется только первый набор «предпочтительных» или «альтернативных» таблиц стилей.
[4] ‒ «альтернативные» таблицы стилей применяются только в наборе с «предпочтительными» таблицами стилей.

Спецификация

Верс.	Раздел
HTML
2.0	—
3. 2	~~STYLE and SCRIPT~~
4.01	14.3.2 Specifying external style sheets DTD: `Transitional Strict Frameset`
5.0	4.2.6 The style element The title attribute…
5.1	4.2.6. The style element The title attribute…
XHTML
1.0	Extensible HyperText Markup Language DTD: `Transitional Strict Frameset`
1.1	Extensible HyperText Markup Language

Значения

В качестве значения указывается имя таблицы стилей.

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

Листинг кода

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Параметр title (Элемент style)</title>
<!— Постоянные таблицы стилей —>
<style type=»text/css»> li { color: white; } </style>
<style rel=»stylesheet» type=»text/css»> .persistent { color: green; } </style>

<!— Наборы «предпочтительных» таблиц стилей —>
<style rel=»stylesheet» type=»text/css» title=»Красный»> .preferred1 { color: red; } </style>

<!— Наборы «альтернативных» таблиц стилей —>
<style rel=»alternate stylesheet» type=»text/css» title=»Красный»> p { color: red; } </style>
<style rel=»alternate stylesheet» type=»text/css» title=»Оранжевый»> p { color: orange; } </style>

</head>
<body>
<h2>Пример использования атрибута «title»</h2>
<p>Действующие таблицы стилей:</p>
<ul>
<li>Постоянная</li>
<li>Предпочтительная 1</li>
<li>Предпочтительная 2</li>
<li>Альтернативная 1</li>
<li>Альтернативная 2</li>
</ul>
</body>
</html>

Параметр title (Элемент style)

Атрибут title | HTML | WebReference

Добавляет всплывающую подсказку с текстом, которая появляется при наведении курсора на элемент. Вид такой подсказки зависит от браузера, настроек операционной системы и не может быть изменён напрямую с помощью HTML-кода или стилей.

Синтаксис

title="<текст>"

Значения

Произвольная текстовая строка.

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

Нет.

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Атрибут title</title> </head> <body> <p title=»А вот и я!»>Пример всплывающей подсказки</p> </body> </html>

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

Рис. 1. Вид всплывающей подсказки

Спецификация

Спецификация	Статус
WHATWG HTML Living Standard	Живой стандарт
HTML5.1	Рабочий проект
HTML5	Рекомендация
HTML 4.01 Specification	Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры


4	12	1	4	1	1


1	1	6	1

Браузеры

В таблице браузеров применяются следующие обозначения.

— элемент полностью поддерживается браузером;
— элемент браузером не воспринимается и игнорируется;
— при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

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

См. также

Всплывающая подсказка

Рецепты

Как добавить всплывающую подсказку к тексту?

Элементы HTML

Атрибуты

Значения

Типы элементов

Аудио и видео

Документ

Изображения

Объекты

Скрипты

Списки

Ссылки

Таблицы

Текст

Формы

Фреймы

Простой подход к именованию классов CSS — SitePoint

Если вы похожи на меня, то вы тратите слишком много времени на придумывание идеального имени класса для элемента. Вы можете поискать синонимы в Google или представить, каким был бы этот элемент, если бы он был реальным объектом. Вы знаете, что подойдет любое семантическое имя, но попытка придумать идеальное имя того стоит.

Честно говоря, идеальное имя не сильно поможет вашей таблице стилей, но использование методологии CSS может иметь большое значение.

Примеры методологий CSS

OOCSS — это экологически безопасный совет, который поможет вам создавать устойчивые классы с помощью стилей вторичной переработки.

SMACSS — это всеобъемлющий план игры CSS, который научит вас всем необходимым приемам.

Idiomatic CSS — это аналитическая уборщица, организующая все в едином стиле для легкого распознавания и душевного спокойствия.

А БЭМ? Что ж, БЭМ — это золотой стандарт именования классов CSS, по которому сравниваются все схемы именования классов CSS.

Так зачем еще говорить об именах классов?

Подход БЭМ заключается в написании масштабируемого CSS с упором на удобочитаемость и предотвращение коллизий.

Короче говоря, БЭМ означает Block__Element–Modifier. Блок — это элемент, который включает в себя небольшой фрагмент связанных элементов (в SMACSS он называется модулем). Элемент является потомком блока и обычно не существует без наличия блока. Модификатор управляет состоянием блока.

В БЭМ вы пишете обычное имя класса для блока, а для любого элемента копируете имя блока и добавляете имя элемента.

Обычный БЭМ выглядит так:

 
    <р>

Это хорошо, потому что любой поймет, что «block__element» относится к «блоку», и маловероятно, что класс «block__element» использовался где-либо еще в проекте.

Но с этим подходом есть проблема. Вы пишете CSS весь день, и вы не хотите писать длинные имена классов, которые загрязняют вашу чистую разметку.

Title CSS дает вам преимущества БЭМ без добавления каких-либо префиксов или специальных символов к вашим именам классов.

Простой трюк с заголовком CSS

Используя заголовок CSS, вы должны сделать следующее: Для любого глобального класса CSS используйте имя с заглавной буквы (заголовок). Для любого модификатора или класса-потомка используйте строчную букву в начале имени.

Это означает, что с помощью Title CSS вы пишете с большой буквы любое имя класса, на которое будут ссылаться в таблице стилей без родительского класса. Это означает, что даже объекты в OOCSS начинаются с заглавных букв. Различие простое; все, что написано в таблице стилей с заглавной буквы, не должно использоваться снова.

Вот пример того, как будет выглядеть разметка при использовании Title CSS:

 
    <р>

А вот как будет выглядеть соответствующий CSS:

 .Title {}
    .Title.isModified {}
    .Title .descendant {}

Почему Title CSS работает

Идентификаторы блоков или классы «Title» создают область действия для всех классов-потомков внутри блока. Классы-потомки могут повторяться в других основных заголовках без коллизии стилей.

Это не обязательно для работы методологии, но, поскольку имя класса HTML чувствительно к регистру, классы «Title» также могут свободно повторяться как классы-потомки.

Как помогает заголовок CSS?

Используя методологию Title CSS, вы увидите следующие преимущества:

Написание классов CSS более естественным образом.
напоминают письменный язык, например английские предложения, начинающиеся с заглавной буквы.
Более короткие имена классов быстрее набираются и легче сканируются.
Классы регистра заголовков легко заметить в разметке; чтобы увидеть, к какому классу-потомку принадлежит нижний регистр, просто пройдите вверх по узлам для класса Title.

Ловушка и обходной путь

Заголовок CSS может иметь проблемы при использовании блока заголовка для включения других блоков. Если содержащая основную надпись имеет тот же класс селектора потомков, что и та, которую она охватывает, возникнет конфликт, и в этом случае вы должны использовать дочерний комбинатор в основных заголовках, которые действуют как контейнеры.

Чтобы продемонстрировать проблему, ниже приведен пример разметки с присутствующей проблемой:

 
    <заголовок>
    <основной>
        <раздел>
            <дел>
            <дел>
        
        <раздел>
            <дел>
            <дел>

И соответствующий CSS:

 . Container {}
    .Контейнер .header {}
    .Контейнер .тело {}
.Заголовок {}
    .Заголовок .header {}
    .Title .body {}

Обратите внимание, что стили, примененные к элементам .header и .body внутри .Container , также будут применяться к другим элементам .header и .body , вложенным дальше. Чтобы этого избежать, вот решение:

 .Container {}
    .Контейнер > .header {}
    .Container > .body {}

С селектором, использующим дочерний комбинатор ( > ), стили будут применяться только к непосредственным дочерним элементам, а не к дополнительным вложенным элементам с теми же именами классов.

Несколько слов о Sass

Препроцессоры обеспечивают отличный способ написания CSS для заголовков. Возможность вложения позволяет легко идентифицировать блоки заголовков в таблице стилей.

Вот пример CSS-заголовка в SCSS:

 .Title {
    &.модификатор {}
    . потомок {}
    > .tightlyBound {}
}

Обратная связь?

Как предполагают BEM, SMACSS и OOCSS, важно, чтобы блоки или модули были небольшими. Включение только тех элементов, которые тесно связаны с классом Title, повышает производительность и удобство сопровождения.

Если у вас есть какие-либо замечания или отзывы о CSS для заголовков, буду рад услышать их в комментариях. И если вы хотите получить больше информации или хотите сотрудничать, обязательно ознакомьтесь с репозиторием GitHub для Title CSS.

Заголовок и подзаголовок | Bulma: бесплатная современная CSS-инфраструктура с открытым исходным кодом на основе Flexbox

Имеется 2 типа позиции:

название
подзаголовок

Заголовок

Подзаголовок

  Заголовок 
 Подзаголовок

Размеры #

Доступны 6 размеров :

Название 1

Название 2

Название 3 (размер по умолчанию)

Название 4

Название 5

Заголовок 6

  Заголовок 1 
 Название 2 
 Название 3 
 Название 4 
 Название 5 
 Название 6

Подзаголовок 1

Подзаголовок 2

Подзаголовок 3

Подзаголовок 4

Подзаголовок 5 (размер по умолчанию)

Подзаголовок 6

 Подзаголовок 1 
 Подзаголовок 2 
 Подзаголовок 3 
 Подзаголовок 4 
 Подзаголовок 5 
 Подзаголовок 6

Когда вы объединяете заголовок и подзаголовок, они сближаются.

Как правило, рекомендуется использовать разницу в размере два . Поэтому, если вы используете заголовок is-1 , объедините его с подзаголовком is-3 .

Заголовок 1

Подзаголовок 3

Заголовок 2

Подзаголовок 4

Заголовок 3

Подзаголовок 5

Заголовок 1

Подзаголовок 3

Название 2

Подзаголовок 4

Заголовок 3

Подзаголовок 5

Новый!

Вы можете сохранить нормальный интервал между заголовками и субтитрами, если используете модификатор is-spaced для первого элемента.

Заголовок 1

Подзаголовок 3

Заголовок 2

Подзаголовок 4

Заголовок 3

Подзаголовок 5

Заголовок 1

Подзаголовок 3

Название 2

Подзаголовок 4

Заголовок 3

Подзаголовок 5

Переменные #

Имя

Тип

Значение

Расчетное значение

Вычисляемый тип

 $title-color

переменная

 $text-strong

 hsl(0, 0%, 21%)

color

 $title-family

логическое значение

 $title-size

переменная

 $size-3

размер

 $title-weight

переменная

 $weight-semibold

font-weight

$title-line-height 900 25

безразмерный

 $title-strong-color

строка

 наследовать

 $title-strong-weight

строка

 наследовать

 $title-sub-size

размер

0.

Title css: Атрибут title | htmlbook.ru

HTML/Атрибут title (Элемент style)

Синтаксис

Описание

Примечание

Поддержка браузерами

Спецификация

Значения

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

Атрибут title | HTML | WebReference

Синтаксис

Значения

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

Пример

Спецификация

Браузеры

См. также

Рецепты

Элементы HTML

Атрибуты

Значения

Типы элементов

Простой подход к именованию классов CSS — SitePoint

Примеры методологий CSS

Так зачем еще говорить об именах классов?

Простой трюк с заголовком CSS

Почему Title CSS работает

Как помогает заголовок CSS?

Ловушка и обходной путь

Несколько слов о Sass

Обратная связь?

Заголовок и подзаголовок | Bulma: бесплатная современная CSS-инфраструктура с открытым исходным кодом на основе Flexbox

Заголовок

Подзаголовок

Размеры #

Заголовок 1

Название 2

Название 3

Название 4

Название 5

Название 6

Подзаголовок 1

Подзаголовок 2

Подзаголовок 3

Подзаголовок 4

Подзаголовок 5

Подзаголовок 6

Переменные #

Добавить комментарий Отменить ответ