Включение в HTML. ID в качестве селектора

Классы применяют, когда необходимо определить стиль для одного или нескольких элементов веб-страницы. Элементы при этом могут быть разными, но иметь частично или полностью похожие элементы оформления. В коде HTML имя класса определяется через атрибут class .

Синтаксис

E.<Имя класса> { Описание правил стиля } .<Имя класса> { Описание правил стиля }

Здесь E — обозначает любой элемент. Имена классов должны начинаться с латинского символа и могут содержать в себе символ дефиса (-) и подчёркивания (_). Использование русских букв в именах классов недопустимо. Чтобы указать в коде HTML, что элемент используется с определённым классом, к тегу добавляется атрибут class .

Обозначения

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Пример

Классы

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

Для исключения засветки экрана дисплея световыми потоками оконные проемы снабжены светорассеивающими шторами.

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

Рис. 1. Вид текста, оформленного с помощью класса

Примечание

Internet Explorer до версии 7 понимает классы, имена которых начинаются с дефиса (-) или символа подчёркивания (_). Остальные браузеры таки имена игнорируют.

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

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

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

Моя предыдущая статья «Чего я ждал от HTML5 и CSS3» затронула достаточно щекотливую тему, но не ответила на вполне резонный вопрос, а что я предлагаю взамен. Поэтому мне в голову пришла идея сделать общественную спецификацию CSS, которая будет отражать современные тенденции развития web-технологий и требования к будущему функционалу. Я приглашаю всех поучаствовать в разработке нашей собственной версии спецификации. Если популярность ее будет достаточно высокой, ее могут принять все разработчики браузеров, а от этого выиграют и web-разработчики, и пользователи.

Первый механизм, который я представляю вашему вниманию называется «направляющие»

Направляющие

Цель данного механизма - упростить управление позиционированием элементов относительно друг друга. Табличное представление данных не позволяет создавать потоковые структуры, когда неизвестно количество элементов в строке, и элементы нужно переносить на следующую строку при изменении ширины контейнера. Строчные блоки (inline-block) не позволяют формировать автоматически подстраиваемые по высоте или ширине блоки. Именно эти проблемы и будет решать механизм направляющих.

Определение направляющих

Направляющие являются блочными элементами нулевой высоты или ширины, в зависимости от типа: горизонтальные или вертикальные. Нельзя управлять ни шириной, ни высотой направляющих, они занимают всегда 100% от ширины или высоты элемента. Направляющие могут иметь margin, padding, border, background, что позволит создавать определенные стилистические приемы.

Описание направляющих

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

$rule1 { /* rule preferences */ }
$rule2 { ... }

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

rule-type

Существуют два типа направляющих: горизонтальные (horizontal) и вертикальные (vertical) . По умолчанию направляющие имеют тип horizontal

Значения свойства: horizontal || vertical
Значение по умолчанию: horizontal

rule-repeat

Это свойство управляет повторением направляющих. По умолчанию для направляющих отключен механизм повторения.

Значения свойства: none || repeat
Значение по умолчанию: none

Механизм повторения необходим для того, чтобы автоматически формировать несколько направляющих с одинаковыми свойствами и идентификацией. Свойство repeat применяется только тогда, когда для горизонтального типа направляющих указан margin-top или margin-bottom или padding-top или padding-bottom , а для вертикальных направляющих, соответственно margin-left или margin-right или padding-left или padding-right .

Количество горизонтальных направляющих рассчитывается по формуле
kh = containerHeight / (ruleMarginTop + rulePaddingTop + rulePaddingBottom + ruleMarginBottom)

Количество вертикальных направляющих рассчитывается по формуле
kv = containerWidth / (ruleMarginLeft + rulePaddingLeft + rulePaddingRight + ruleMarginRight)

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

$myRule {
rule-type: vertical;
rule-repeat: repeat;
margin-right: 10px;
margin-left: 20px;
padding-right: 50px;
}

rule

Для использования направляющих в некотором блоке используется директива rule

Значения свойства: $ruleID[ $ruleID]
Значение по умолчанию: none

Можно использовать одну или две переменные с направляющими разного типа. При использовании двух одинаковых типов направляющих данная директива не применяется.

Использование направляющих

После определения направляющих необходим механизм управления блоками. Для этого необходимо еще одно свойство snap-to , которое будет рассказывать элементам внутри блока с направляющими, как они должны взаимодействовать между собой.

snap-to

Значения свойства: || || none
Значение по умолчанию: none

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

Прилипание к краю аналогично поведению элемента с position: relative.

Я специально опущу более детальное поведение, так как это займет не одну страницу текста, и перейду к примерам

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

Типичная задача - галлерея. Я знаю, что можно использовать inline-block, но добавив еще одну горизонтальную направляющую можно сделать аналог таблицы, что не получится сделать обычными средствами.

$rule1 { margin-top: 200px; rule-repeat: repeat; }
#gallery { rule: $rule1; }
#gallery div { snap-to: bottom }

…

Форма, у которой лейблы выровнены с формами по направляющей

$rule1 { margin-left; 150px; rule-type: vertical; }
#form { rule: $rule1; }
#form label { snap-to: right }
#form span { snap-to: left }

Label1

Label2

Label3

Трехколоночный макет можно сделать вот так:

$rule1 { margin-bottom; 100%; rule-repeat: repeat; }
#wrapper { rule: $rule1; }
#wrapper > div { snap-to: top($rule1) bottom($rule1) }

Заключение

У направляющих есть множество «белых пятен» в поведении, которые нужно исследовать, моделировать и изучать. Особенно это касается взаимоотношений прилипших элементов и обычного потока, прилипших и плавающих элементов, как должны себя вести элементы, если они прилипают к левому и нижнему краю сетки направляющих и так далее. Однако одно очевидно, что данный механизм не сильно изменяет уже действующие правила CSS2.1, а только дополняет их. Реализация направляющих, по моему мнению, гораздо более проста для разработчиков браузеров, чем реализация тех же темплейтов отображения в CSS3, а возможностей и динамики в моем способе больше.

Жду вашей критики, замечаний, дополнений.

Прежде чем преступить к изложению материала хотелось бы сказать пару тройку слов о том что вообще такое CSS 3 и чем оно отличается от того CSS что мы изучали ранее? Дело в том, что CSS точно так же как и HTML имеет свою техническую документацию, определённые стандарты по которым вебмастера должны разрабатывать свои веб документы, а разработчики браузеров писать свои программы и хотя эта документация имеет исключительно рекомендательный характер, всё же лучше её придерживаться чтобы разные браузеры и устройства смогли корректно отобразить Ваш сайт.

Так вот различные версии этой документации называют спецификациями и до этого момента мы с Вами изучали CSS согласно спецификации CSS 2.1 - вот Вам заодно ссылка на официальную версию этого документа.. Теперь же мы с Вами будем учится по новой спецификации CSS 3 - которая имеет целый ряд интересных свойств не вошедших в предыдущую версию спецификации. И сразу же стоит отметить, что в данный момент официально спецификация CSS 3 ещё находится в разработке – то есть этот документ ещё не утверждён и пока имеет лишь черновой вариант, однако, несмотря на этот факт CSS 3 уже широко используется вебмастерами и поддерживается современными браузерами.

Почему вообще рождаются новые спецификации?

Да всё просто.. мир не стоит на месте всё меняется, появляются новые технологии, тенденции.. ну и конечно же веяния моды диктуют вебмастерам всё новые и новые требования к дизайну разрабатываемых ими сайтов.. так с течением времени вебмастерам перестаёт хватать тех инструментов которые есть у них в руках и они вынуждены идти на хитрости, придумывать нестандартные решения, перекладывать какие-то задачи на плечи скриптов или фотошопа. Вот например появилась мода скруглять углы у блоков сайта, а простого инструмента - свойства: border-radius в спецификации CSS 2.1 не было.. вот и приходилось тогда ради этой казалось бы мелочи из шкуры вон лезть делая целую кучу лишних "телодвижений" - посмотрите ради любопытства разве оправдан в этом уроке такой раздутый код? Вот и решили люди всё упростить придумав свойство border-radius которое без труда и велоизобретательства скругляет углы у блочных элементов. Так вот собственно и происходит эволюция CSS и думается мне, что появись повальная новая мода ну, например на вогнутые или ромбоподобные углы у блоков так в будущем в какой нибуть последующей спецификации появятся и соответствующие свойства.

Что позволяет делать CSS 3 ?

Помимо того что спецификация CSS 3 может скруглять углы она позволяет делать ещё целый ряд вещей: создавать градиенты, тени, анимацию на страницах сайта, задавать степень прозрачности тех или иных элементов, так же значительно расширяет набор инструментов при работе с фоном, цветом, текстом – в общем нам будет о чем поговорить в этом учебнике!

Какие браузеры поддерживают CSS 3 ?

Большинство новых свойств вошедших CSS 3 поддерживают все современные браузеры: IE9+, Opera 10+, Firefox 3.6+, Chrome 12+, Safari 5+ конечно без нюансов о которых в каждом конкретном случае мы поговорим отдельно не обошлось, однако в целом всё исправно работает.

P.S. Разговаривать в этом учебнике мы будем лишь о новых свойствах CSS 3 не вошедших в спецификою CSS 2.1, однако следует понимать, что CSS 3 помимо новых свойств включает в себя так же всё то, что содержит и CSS 2.1 так что если Вы здесь впервые и учите CSS "с нуля" то рекомендую Вам начать обучение с раздела .

Разработка простых таблиц стилей является довольно простым занятием. Разработчик должен иметь базовые знания по HTML и по полиграфической терминологии. Например для определения цвета элементов "H1" как синий, достаточно сказать: H1 { color: blue } Приведенный пример является простым правилом CSS. Правило состоит из двух основных частей: селектора ("H1") и определения ("color: blue"). Определение в свою очередь тоже состоит из двух частей: свойства ("color") и значения ("blue"). В то время, как приведенный пример пытается повлиять только на одно из свойств, необходимых для построения HTML документа, он уже является таблицей стилей. Скомбинированный с другими таблицами стилей (одним из фундаментальных свойств CSS является комбинирование таблиц стилей) он будет определять конечный вид всего документа.Селектор является связью между HTML документом и таблицей стилей, полный набор типов элементов содержит все возможные селекторы. Типы элементов определены в спецификации HTML .Cвойство "color" является одним из порядка 50 свойств, которые определяют вид HTML документа. Список свойств и их возможных значений определяется в данной спецификации.Авторам HTML необходимо определять свою таблицу стилей только в том случае, если они хотят предложить специфический стиль для своих документов. Каждый UA должен иметь таблицу стилей по умолчанию, которая представляет документы в приемлемом, но может быть достаточно простом виде. П приложении А приведена примерная таблица стилей для представления HTML документов так, как это предлагается в спецификации HTML 2.0 .Формальная грамматика языка CSS1 определена в приложении B.

1.1 Включение в HTML

Для того, чтобы таблица стилей влияла на вид документа, UA должен знать о ее существовании. Спецификация HTML определяет способы включения таблиц стилей в HTML. Поэтому данный раздел является информативным, а не нормативным: title

Headline is blue

While the paragraph is green. Данный пример демонстрирует четыре способа объединения стиля с HTML: используя элемент "LINK" для связи с внешней таблицей стилей, используя элемент "STYLE" внутри элемента "HEAD", импортируя таблицу стилей с помощью нотации CSS "@import" и используя атрибут "STYLE" в элементе внутри секции "BODY". Последний способ смешивает стиль с содержимым и поэтому теряет соответствующие достоинства традиционных таблиц стилей.Элемент "LINK" ссылается на альтернативную таблицу стилей, которую может выбрать читатель, в то время как импортируемые таблицы стилей автоматически объединяются с остальной частью таблицы стилей.Традиционно UA игнорировали неизвестные теги. Как результат старые UA будут игнорировать элемент "STYLE", но его содержимое будет считаться, как часть тела документа и будет отображаться в документе. В течение переходного периода содержимое элемента "STYLE" можно "прятать", используя комментарии SGML:

В связи с тем, что элемент "STYLE" определен, как "CDATA" в DTD , интерпретаторы SGML не будут считать таблицу стилей комментарием, который надо удалить.

1.2 Группирование

Для уменьшения размера таблицы стилей можно группировать селекторы в разделенные запятыми списки: H1, H2, H3 { font-family: helvetica }

Точно также можно группировать определения:

H1 { font-weight: bold; font-size: 12pt; line-height: 14pt; font-family: helvetica; font-variant: normal; font-style: normal; } В дополнение к этому некоторые свойства имеют собственный синтаксис группировки: H1 { font: bold 12pt/14pt helvetica }

что эквивалентно предыдущему примеру.

1.3 Наследование

В первом примере цвет элементов "H1" был установлен в синий. Представьте, что есть элемент "H1" с элементом внутри:

The headline is important!

Если для элемента "EM" не было определено никакого цвета, то Emированный "is" унаследует цвет родительского элемента, т.е. он также будет отображен синим цветом. Другие свойства стиля также наследуются, например "font-family" и "font-size".Для определения свойства стиля по умолчанию для документа, можно задать это свойство у элемента, от которого наследуются все остальные видимые элементы. В HTML документах элемент "BODY" выполняет эту функцию: BODY { color: black; background: url(texture.gif) white; } Этот пример сработает даже если автор опустил тэг "BODY" (что является допустимым) благодаря тому, что браузер вставит пропущенный тэг. Предыдущий пример устанавливает цвет текста в черный, а фон - содержащий картинку. Фон будет белым в том случае, если картинка будет недоступна. (См. подробности в главе 5.3)Некоторые свойства стилей не наследуются от родительских элементов дочерними элементами. В большинстве случаев интуитивно понятно в каких случаях возникает такая ситуация. Например свойство "background" не наследуется, но фон родительского элемента по умолчанию будет просвечивать сквозь.
Часто значение свойства указывается в процентах от другого свойства:
P { font-size: 10pt } P { line-height: 120% } /* relative to "font-size", i.e. 12pt */ Для любого свойства, значения которого могут указываться в процентах, определено свойство на которое оно ссылается. Дочерние элементы "P" унаследуют вычисленное а не процентное значение "line-height" (12pt).
1.4 Класс в качестве селектора
Для увеличения гибкости контроля над элементами, в HTML добавлен новый атрибут "CLASS". Все элементы внутри элемента "BODY" могут быть классифицированы, а на класс можно сослаться через таблицу стилей: Title
Way too green
К классифицированным элементам применяются нормальные правила наследования, они наследуют значения своих родителей в структуре документа.Можно адресовать все элементы одного класса опустив имя тэга в селекторе: .pastoral { color: green } /* all элементы with CLASS pastoral */ Для каждого селектора можно определить только один класс. "P.pastoral.marine" таким образом является неправильным селектором в CSS1. (Контекстные селекторы, описанные ниже, могут определять один класс для одного простого селектора).CSS предоставляет настолько большие возможности для использования атрибута CLASS, что во многих случаях не важно у какого элемента HTML устанавливается класс - можно заставить любой элемент эмулировать любой другой элемент. Но не рекомендуется полагаться на такую возможность, т.к. это лишает документ структуры, которая имеет универсальное значение (элементы HTML). Структура основанная на классах имеет узкое применение только в тех случаях, когда значения классов оговорены с обеих сторон.
1.5 ID в качестве селектора
HTML также теперь определяет атрибут "ID", который гарантированно имеет уникальное значение в документе. Таким образом он имеет особое значение, как селектор таблицы стилей, и может адресоваться с помощью "#": #z98y { letter-spacing: 0.3em } H1#z98y { letter-spacing: 0.5em }
Wide text
В приведенном примере первый селектор соответствует элементу "P" благодаря "ID" атрибута. Второй селектор определяет как тип элемента ("H1"), так и значение ID, и, поэтому, не соответствует элементу "P".Используя ID в качестве селектора, можно устанавливать свойства поэлементно. В то время как таблицы стилей были разработаны для визуализации структуры документа, это свойство позволяет авторам создавать документы, которые корректно отображаются на холсте без использования структурных элементов HTML. Такое использование таблиц стилей не приветствуется.
1.6 Контекстные селекторы
Наследование значительно уменьшает количество напечатанного текста CSS дизайнерами. Вместо того, чтобы указывать все свойства стилей, можно установить значения по умолчанию, а затем указать исключения. Для того, чтобы элементы "EM" внутри "H1" имели другой текст, можно было бы указать: H1 { color: blue } EM { color: red } Когда данная таблица стилей будет использована, весь текст внутри "EM", как внутри, так и вне "H1" станет красным. Очевидно, хотелось, чтобы только те элементы "EM", которые заключены в "H1" стали красными. Этого можно достигнуть, указав: H1 EM { color: red } В этом случае селектор является маской поиска в стеке открытых элементов, а такой селектор называется контекстным селектором. Контекстные селекторы состоят из простых селекторов, разделенных пробелом (все описываемые до этого селекторы являлись простыми селекторами). Описанные правила применяются только к элементу, который соответствует последнему простому селектору (в данном случае элемент "EM"), и только в том случае, если результат поиска является положительным. Контекстные селекторы в CSS1 описывают только наследственные взаимосвязи, в то время как последующие версии могут описывать м другие виды связи. UL LI { font-size: small } UL UL LI { font-size: x-small } В этом случае первый селектор соответствует элементам "LI" в как минимум одним предком "UL". Второй селектор соответствует подмножеству первого, т.е. элементы "LI" с как минимум двумя предками "UL". Конфликт разрешается тем, что второй селектор является более специфичным в связи с более длинной маской поиска. См. подробнее о порядке каскадирования (раздел 3.2).Контекстные селекторы могут содержать тип элемента, атрибуты CLASS, атрибуты ID или их комбинацию: DIV P { font: small sans-serif } .reddish H1 { color: red } #x78y CODE { background: blue } DIV.sidenote H1 { font-size: large } Первый селектор соответствует элементам "P", которые среди предков имеют "DIV". Второй селектор соответствует всем элементам "H1" которые имеют предка класса "reddish". Третий селектор соответствует всем элементам "CODE", которые являются наследниками элемента с "ID=x78y". Четвертый селектор соответствует всем элементам "H1", которые имеют предка "DIV" с классом "sidenote".
Можно группировать несколько контекстных селекторов:
H1 B, H2 B, H1 EM, H2 EM { color: red }
что эквивалентно:
H1 B { color: red } H2 B { color: red } H1 EM { color: red } H2 EM { color: red }
1.7 Комментарии
Текстовые комментарии в таблицах стилей оформляются так же как и в языке Си : EM { color: red } /* red, really red!! */ Комментарии не могут вкладываться друг в друга. Для обработчика CSS1 комментарий эквивалентен пробелу.