Классы. Включение в HTML
Разработка простых таблиц стилей является довольно простым занятием. Разработчик должен иметь базовые знания по 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. Поэтому данный раздел является информативным, а не нормативным: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" могут быть классифицированы, а на класс можно сослаться через таблицу стилей: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 комментарий эквивалентен пробелу.Спецификации HTML и CSS - это свод правил и рекомендаций для вебразработчиков и производителей по синтаксису и трактовке данных языков веб-документов. Это необходимо для того, чтобы браузеры различных производителей отображали HTML-страницы не только одинаково, но и так, как задумывал автор. Разработкой этих правил занимается Консорциум всемирной паутины (W3C), возглавляемый Тимом Бернерсом-Ли - создателем Интернета, HTML, URL и многих других разработок.
Последняя актуальная на сегодняшний день спецификация по HTML от W3C (на английском).
Последняя актуальная на сегодняшний день спецификация по CSS от W3C (на английском).
Рабочие версии HTML и CSS
Рабочие версии HTML и CSS
- это версии, которые на данный момент еще не закончены и не утверждены окончательно. В них постоянно происходят изменения и дополнения имеющихся материалов: появляются и убираются различные теги, атрибуты, свойства CSS и т.д. Поэтому использовать их данные при создании сайта вы можете только на свой страх и риск, так как не факт, что через какое-то время страницы вашего сайта не перестанут отображаться в браузерах так, как вы планировали, несмотря на то, что многие из них уже частично поддерживают данные рабочих версий.
Рабочая версия HTML 5 от W3C, в которой появились новые теги, атрибуты и возможности. Большой упор делается на семантику кода, введена поддержка API (интерфейса прикладного программирования), благодаря которой, например, можно вставить видео на сайт без использования плагинов. Внешнее оформление HTML-страниц полностью передано под управление CSS. В отличие от предыдущей версии HTML, данная версия не будет иметь разделений на подверсии - только строгий синтаксис. Но при этом она будет иметь обратную совместимость, то есть, чтобы перейти с HTML 4.01 на HTML 5 достаточно будет просто поменять в первой строчке кода страницы.
Рабочая версия CSS 3 от W3C, появилось много новых свойств, различных значени и, соответственно, возможностей. Многое их того, что раньше делалось с помощью изображений и таких инструментов, как JavaScript, теперь можно делать с помощью одного CSS. Например, анимацию, создание теней, закругление углов элементов. При этом CSS 3 также имеет обратную совместимость с CSS 2.1
Прежде чем преступить к изложению материала хотелось бы сказать пару тройку слов о том что вообще такое 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 имя класса определяется через атрибут 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 (Черновик спецификации ) - первая черновая версия стандарта.