Применение Таблицы Стилей к документу

Встраивание Таблиц Стилей в документ
Задание стиля для отдельного фрагмента документа
Импорт Таблицы Стилей

Указание нескольких свойств одновременно
Группирование селекторов
Комментирование Таблицы Стилей
Свойства стилей
Свойства background
Обрамление элементов
Свойства списков
Свойства текста
Группирование свойств для упрощения определения стиля
Наследование свойств
Применение контекстных селекторов
Почему Таблицы Стилей называются каскадными

Таблицы стилей предусмотрены рекомендациями W3C и являются стандартным инструментом форматирования Web - страниц, использующим подходы, характерные для настольных издательских систем. Программа Microsoft Internet Explorer 3.0 стала первым браузером, поддерживающим таблицы стилей. Браузер Netscape Navigator поддерживает таблицы стилей, начиная с версии 4.0В2 (Beta 2), доступной с февраля 1997 года.

Подробные сведения о рекомендациях W3C можно получить по адресу: http://www.w3.org/pub/WWW/TR/WD-cssl.html . В стандарте W3C используется термин "каскадные таблицы стилей уровня 1" ("cascading style sheets level 1, CSSI").

Для начала необходимо пояснить, что имеется в виду под названием “таблиц стилей”. Большинство современных текстовых редакторов позволяют пользователю определять стиль, который будет использоваться для форматирования документа. В частности, можно выбрать стиль абзаца с одинарным межстрочным интервалом, шрифтом Courier и левым полем в один дюйм. Этот стиль форматирования может быть в дальнейшем применен к любому числу абзацев этого и других документов. Таблицы стилей НТ

ML действуют точно таким же образом. Ниже приведен краткий список основных функций:

Изменение расстояний между строками, словами и отдельными символами.

Установка левого, правого, верхнего и нижнего полей элемента (блока текста контейнера HTML).

Установка отступа элемента.

Изменение размера, стиля и других атрибутов шрифта элемента.

Установка рамки вокруг элемента.

Включение фонового изображения и фонового цвета в элемент.

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

Существует четыре метода применения таблицы стилей к документу:

Связывание (Linking) - можно связать HTML - документ с таблицей стилей, хранящейся в отдельном файле.

Встраивание (Embedding) - можно встроить таблицу стилей в HTML - документ с помощью контейнера



Тэг

Как было указано ранее, таблицы стилей хранятся в текстовых файлах, удобных для редактирования. Их нетрудно создавать вручную, однако существуют специальные редакторы таблиц стилей, например, популярная программа Мicrosoft FrontPage.

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

,

,

И . Каждое определение называется правилом (rulе). Правило содержит селектор (тэг HTML), за которым следует декларация (определение стиля). Селектор является связующим звеном между определением и тэгом. Ниже приведен пример правила, указывающего стиль для каждого из тэгов заголовка

:

H1 (color: blue}

Декларация заключается в фигурные скобки. Каждая декларация имеет две части: название свойства и присваиваемое ему значение, разделенные двоеточием. В HTML включены десятки свойств (font-size, font-style, color, margin-right и т. д.), о которых будет рассказано ниже. Каждое свойство может принимать несколько значений, одно из которых приписывается ему по умолчанию.

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

HI {color: blue; font-size: 12pt; text-line: center}

В этом примере программа просмотра выведет каждый заголовок первого уровня синим шрифтом размером 12 пунктов и выровняет их по центру окна. Для всех прочих свойств будут использоваться значения по умолчанию (например, свойству font-style будет присвоено значение normal).

Если необходимо определить один и тот же стиль для нескольких тэгов, можно перечислить их в отдельном списке:

Р (font-size: 12pt}
UL {font-size: 12pt}
LI {font-size: 12pt}

HTML позволяет сделать то же самое и в более компактном виде - в одной строке:

Р, UL, LI (font-size: 12pt}

Запятая здесь является обязательным элементом. Если она опущена, смысл правила изменится (см. раздел " " ниже в этой главе).

По мере усложнения таблицы стилей, скорее всего, понадобится включить в нее дополнительные сведения о назначении того или иного правила. Комментарии располагаются между символами /* и */ и игнорируются программами просмотра, например:

BODY {margin-left: lin} /* Отступ на 1 дюйм */
H1 {margin-left: -lin} /* Сдвиг влево на 1 дюйм */
Н2 (margin-left: -lin} /* Сдвиг влево на 1 дюйм */

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

В таблице приведен обзор свойств таблиц стилей HTML.. В колонке "Категория" показано, может ли то или иное свойство объединяться в группу с другими свойствами. В третьей колонке приведены сведения о том, наследуется или нет свойство подчиненными тэгами (о наследовании свойств см. раздел " ").

		Наследование
		Таблицы стилей HTML позволяют украшать фон элемента страницы цветом или изображением. Необходимо заметить, что здесь и далее речь пойдет об использовании свойств не для всей страницы, а для отдельного элемента. Например, если определяется фон для тэга , то это фон будет только у тэгов всей страницы: U L {background-image: URL(http://www.myserver.com/images/watermark.gif)} Рекомендации W3C дают возможность определять рамки, поля и свободное пространство для элементов страницы. Можно, например, заключить заголовок в рамку или изменить поля в тэге абзаца <Р> так, чтобы организовать отступ для всех абзацев текста. Для этих целей можно использовать следующие группы свойств: border - используются для определения рамки, расположенной слева, справа, сверху и снизу от элемента. Можно устанавливать ширину, цвет и стиль рамки. margin - используются для определения полей, расположенных слева, справа, сверху и снизу от элемента. Можно также устанавливать ширину полей. padding - применяются для того, чтобы указать свободное пространство между рамкой и содержимым элемента. Эти свойства применяются для указания способов вывода списков. С их помощью можно изменить позицию маркера (свойство list-style-position), стиль или изображение маркера (свойства list-style-type и list-style-image). Свойства списков наследуются, т. е. если определено свойство в тэге , оно будет действительно для всех тэгов контейнера UL . Свойства дают вам полный контроль того, как программа просмотра выводит текст. С их помощью можно управлять цветом, размером, шрифтом, межстрочным интервалом и т, д. Ниже будут подробно описаны все свойства текста. Многие из описанных выше свойств могут группироваться друг с другом. Так, вместо правила H1 (font-weight: bold; font-style: normal; font-size: 12pt; font-family: serif) можно записать более краткую формулировку: H1 (font: bold normal 12pt serif} Таблицы стилей HTML позволяют группировать свойства border, background, font, list, margin и padding. Рассмотрим каждую из групп в отдельности. Группа свойств border Группировать свойства border можно пятью различными способами. Можно определить свойства для отдельной стороны рамки, используя border-top, border-right, border-bottom И border-left, либо определить всю рамку сразу при помощи border. С каждым из этих свойств можно указать ширину, стиль и цвет рамки, например: b order-top: thin dotted black Группа свойств background В группе свойств background можно указать значения для color, image, repeat, attachment и position, например: background: white URL(http://www.myserver.com/image/bg.gif) repeat-x fixed top left Группа свойств font Группе font можно дать значения weight, style, size и family, например: font: bold normal 12pt times, serif Группа свойств list Свойства группируются при помощи свойства list-style. Возможно указание изображения для маркера, типа и позиции маркера, например: list-style: square URL(http://www.myserver.com/images/marker.gif) inside Группа свойств margin Группе margin можно определить ширину для каждого из полей top, right, bottom и left, например: margin: .5in 1in .5in 1in Если будет указано только одно значение, программа просмотра сделает ширину других полей такой же. Если не указать одно или два значения, поля с неуказанным значением будут такой же ширины, как противоположные поля. Например, если опустить последнее значение (left), ширина левых полей будет равна ширине правых полей, т. е. 1 дюйму. Группа свойств padding В Группе padding можно указать значения для top, right, bottom и left, например: padding: .25in .25in .25in .25in Если будет указано только одно значение, программа просмотра назначит отсутствующим значениям такую же величину. Если не указать одно или два значения, свободные пространства с неуказанными значениями будут такой же ширины, как и им противоположные. Например, если опустить последнее значение (left), свободное пространство между левой стороной рамки и содержимым элемента будет таким же, как и пространство с правой стороны. В HTML подчиненные тэги наследуют некоторые свойства родительских тэгов. Например, все тэги контейнера (< P > и ) будут обладать некоторыми свойствами тэга . Точно так же тэг наследует свойства тэга . Рассмотрим следующий код: Hello. This is a paragraph of text. This is emphasized Таблица стилей этого документа устанавливает цвет в тэге < P > синим, однако, цвет для тэга явно не определен (по умолчанию - это черный цвет). Здесь не о чем беспокоиться, так как этот тэг находится в родительском контейнере И наследует таким образом синий цвет. Иногда возникает необходимость определения двух (и более) стилей для одного тэга. Например, может понадобиться указание двух стилей для тэга : один для случая, когда он подчинен тэгу , и второй, когда он подчинен тэгу . Это возможно сделать с помощью контекстных селекторов. Контекстный селектор определяет точную последовательность тэгов, для которых будет применен тот или иной стиль. Другими словами, можно указать, что какой-то стиль должен применяться, например, в тэге только в том случае, если этот тэг является подчиненным тэгу : OL LI (list-style-type: decimal} Для того же тэга можно определить другой стиль, действительный только в случае подчиненности тэгу : UL LI {list-style-type: square} Необходимо заметить, что список селекторов не разделен запятыми. В противном случае всем тэгам списка будет приписан один и тот же стиль. В рекомендациях W3C таблицы стилей называются "каскадными таблицами стилей" потому, что для верстки Web - страницы можно применять не одну, а сразу несколько таблиц. При этом программа просмотра сама определяет последовательность использования таблиц и разрешает конфликты между ними по принципу каскадирования. Например, таблица стилей для страницы может быть определена не только ее автором, но и читателем, и тогда правила каскадирования решают, какая из таблиц стилей будет иметь силу. Kак это работает? Каждому правилу браузер приписывает весовой коэффициент. При интерпретации каждого тэга программа просматривает все правила этого тэга и сортирует их по величине весового коэффициента. Выигрывает самое "весомое" правило. Существуют следующие общие принципы разрешения конфликтов между таблицами стилей: Старшинство типов таблиц стилей в документе (по убыванию): текущее задание стиля (inline), встраивание (embedding), связывание (linking). Также можно изменить весовой коэффициент правила при помощи служебного слова important. В следующем примере значение red свойства color и значение sans-serif свойства font-family помечены этим служебным словом, и поэтому программа просмотра не должна их переопределять. Однако если вступают в конфликт два таких правила, противоречие решается согласно принципам, изложенным выше. H1 (color: red ! important font-weight: bold font-family: sans-serif ! important} Классом называется определение нескольких стилей одного элемента, каждый из которых может использоваться в нужном месте страницы. Например, можно определить три вариации стиля заголовка H1 . Определение вариаций похоже на указание стиля, только к названию тэга добавляется произвольное имя класса, отделенное точкой: H1 blue (color: blue} H1 .red (color: red} H1 .black (color: black} Теперь, включая в документ тэг , можно указать в нем конкретный стиль при помощи атрибута CLASS : Red Heading

Для чего нужны таблицы стилей?

Вы создавали предыдущие страницы, так как их создавали раньше до появления каскадных таблиц стилей или CSS (Cascading Style Sheets).

Основные проблемы, с которыми сталкивались разработчики сайтов до появления CSS:

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

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

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

С помощью CSS эти проблемы можно решить.

Способы применения CSS

Существует три способа применения таблиц стилей:

Внутренние таблицы стилей (Inline Style Sheets) - при помощи специального атрибута помещаются прямо в HTML теги.
Пример HTML:

Пример CSS:

Как можно заметить, код Inline Style Sheet получился больше чем HTML. Поэтому ISS следует использовать, только если необходимо задать определенному элементу свой индивидуальный стиль.
При помощи дополнительного атрибута style мы можем определить нужные нам стилевые параметры в любом теге. Это самый легкий способ, и действует он в пределах лишь одного тега. Но представьте, насколько вырастет размер файла, и насколько неудобно будет его исправлять, если мы будем указывать стиль у каждого тега.

Глобальные таблицы стилей (Global Style Sheets) - определяют стиль элементов во всем документе.
Для этого используется тег

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

Внешние таблицы стилей

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

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

Импорт таблиц стилей

Существует и другой способ импорта внешних таблиц стилей в файлы HTML - оператор @import . Он вставляется во вложенную таблицу стилей, таким же образом, как показанный выше вложенный код CSS . Синтаксис выглядит следующим образом:

Двумя фундаментальными концепциями CSS являются наследование и каскадирование . Наследование связано с тем, как элемент в разметке HTML наследует свойства своих элементов предков (в которых он содержится) и передает их своим потомкам, в то время как каскадирование имеет дело с объявлениями CSS , которые применяются к документу, и как конфликтующие правила переопределяют друг друга.

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

Наследование в CSS является механизмом, с помощью которого определенные свойства передаются от элемента предка его элементам потомкам.

Используя наследование можно, например, определить свойства шрифта для элементов html или body , и они будут унаследованы всеми другими элементами. Можно определить цвета фона и переднего плана для определенного контейнерного элемента, и цвет переднего плана будет автоматически унаследован элементами потомками в этом контейнере.

Каждый элемент в документе HTML будет наследовать все наследуемые свойства своего предка, за исключением корневого элемента (html ), который не имеет предка.

Каскадирование

Каскадирование - это механизм, который управляет конечным результатом, в случае когда несколько конфликтующих объявлений CSS применяются к одному элементу. Имеется три основные концепции, которые управляют порядком, в котором применяются объявления CSS :

• Важность
• Специфичность
• Порядок исходного кода

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

Важность

Важность объявления CSS зависит от того, где оно определено. Конфликтующие объявления будут применяться в следующем порядке, более поздние будут переопределять предыдущие:

• Таблицы стилей агента пользователя
• Обычные объявления в таблицах стиля пользователя
• Обычные объявления в таблицах стиля автора
• Важные объявления в таблицах стиля автора
• Важные объявления в таблицах стиля пользователя

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

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

Таблица стилей автора является тем, что обычно и называется " таблица стилей ". Это таблица стилей , которую автор документа (или, более вероятно, дизайнер сайта) написал и присоединил (или включил).

Для того чтобы превратить обычное объявление в важное за ним необходимо разместить директиву !important . Как можно видеть, важные объявления в таблице стилей пользователя будут перекрывать все остальное, что вполне логично.

Используемое по умолчанию в браузере представление будет применяться только в том случае, если эти объявления не переопределены какими-либо правилами таблицы стилей пользователя или таблицы стилей автора, так как таблица стилей агента пользователя имеет наименьший приоритет.

Специфичность

Специфичность опеределяют как меру того, насколько конкретным является селектор некоторого правила. Селектор с низкой специфичностью может соответствовать многим элементам (такой как *, который соответствует каждому элементу в документе), в то время как селектор с высокой специфичностью может соответствовать только одному элементу на страницу (такой как #nav , который соответствует только элементу с id совпадающим с nav ).

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

Специфичность имеет четыре компоненты, которые можно обозначить как a , b , c и d . Компонента a является наиболее разграничивающим, d - наименее.

• Компонента a определяется очень просто: это 1 для объявления атрибута style , иначе это 0 .
• Компонента b является числом селекторов id в селекторе (тех, которые начинаются с #).
• Компонента c является числом селекторов атрибутов , включая селекторы классов - и псевдо-классов.
• Компонента d является числом типов элементов и псевдо-элементов в селекторе.

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

В таблице приведены некоторые примеры.

Селектор	a	b	c	d	Специфичность
h1	0	0	0	1	0,0,0,1
.foo	0	0	1	0	0,0,1,0
#bar	0	1	0	0	0,1,0,0
html>head+body ul#nav *.home a:link	0	1	2	5	0,1,2,5

Стоит отметить, что соединяющие символы (такие как > , + и

Точное расположение объектов на странице относительно друг друга является, пожалуй, одной из самых сложных задач для веб-мастера. Написать HTML-код страницы так, чтобы все графические изображения и текстовые блоки были на своих местах не только на компьютере веб-мастера, но и у всех посетителей сайта, — настоящее искусство. Максимально крупный кегль, выставленный пользователем в своем браузере, может великолепное творение превратить в беспорядочное нагромождение теста и картинок.

Каскадные таблицы стилей (Cascading Style Sheets), декларируемые как средство полного контроля над HTML-разметкой, представляются в свете рассматриваемой проблемы, как хороший инструмент для организации точного расположения объектов на странице. CSS позволяют переопределить все свойства любого тега, назначаемые по умолчанию. Становится возможным выполнять выравнивание текстового блока относительно страницы и других текстовых блоков.

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

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

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

Остановимся подробнее на способах применения CSS. Существует четыре способа применения стилей:

1. Переопределение стиля в элементе разметки
2. Размещение описания стиля в заголовке документа с использованием тега style
3. Размещение ссылки на внешнее описание через тег link
4. Импорт стиля в документ

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

Переопределить стандартный элемент разметки или создать собственный с требуемыми свойствами отображения можно с помощью парного тега style, находящегося в заголовке документа перед тегом body. Также с помощью тега style создаются произвольные классы. Их использование допускает однократно задать одинаковые свойства отображения для разных тегов. Удобно, например, задавать одинаковый шрифт для текста и находящихся в нем гиперссылок. Если при этом не задан цвет и стиль подчеркивания, то эти параметры останутся для гиперссылок прежними и они останутся выделенными среди обычного текста.

Когда одни и те же стили используются на нескольких или всех страницах сайта, не обязательно определять их в каждом html-документе. Достаточно сохранить их в отдельном файле и ссылаться на него в каждом документе с помощью тега link, стоящего в элементе head (до тега body). Атрибут rel при этом должен иметь значение «stylesheet».

Возможно также произвести импорт стиля в документ. Отличие от ссылки на внешнее описание в том, что импорт стиля может быть произведен внутрь элемента style или внутрь внешнего файла с описанием стилей, задаваемого в теге link. Таким образом можно создать внешний файл для внешнего файла. Инструкция импорта стиля ставится перед всеми остальными описателями стилей, что делает возможным легко переопределить импортируемый стиль.

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

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

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

Каскадные таблицы стилей — перспективная технология. Но многие веб-мастеры пока еще ограничиваются только применением CSS для изменения цвета гиперссылки при подведении к ней указателя мыши.

Хорошо Плохо

CSS (Cascading Style Sheets), или каскадные таблицы стилей , используются для описания внешнего вида документа, написанного языком разметки. Обычно CSS-стили используются для создания и изменения стиля элементов веб-страниц и пользовательских интерфейсов, написанных на языках HTML и XHTML, но также могут быть применены к любому виду XML-документа, в том числе XML, SVG и XUL.

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

Объявление стиля состоит из двух частей: элемента веб-страницы — селектора , и команды форматирования — блока объявления . Селектор сообщает браузеру, какой именно элемент форматировать, а в блоке объявления (код в фигурных скобках) перечисляются форматирующие команды — свойства и их значения.


Рис. 1. Структура объявления CSS-стиля

Виды каскадных таблиц стилей и их специфика

1. Виды таблиц стилей

1.1. Внешняя таблица стилей

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

К каждой веб-странице можно присоединить несколько таблиц стилей, добавляя последовательно несколько тегов , указав в атрибуте тега media назначение данной таблицы стилей. rel="stylesheet" указывает тип ссылки (ссылка на таблицу стилей).

Атрибут type="text/css" не является обязательным по стандарту HTML5, поэтому его можно не указывать. Если атрибут отсутствует, по умолчанию используется значение type="text/css" .

1.2. Внутренние стили

Внутренние стили встраиваются в раздел HTML-документа и определяются внутри тега . Внутренние стили имеют приоритет над внешними, но уступают встроенным стилям (заданным через атрибут style).

...

1.3. Встроенные стили

Когда мы пишем встроенные стили , мы пишем CSS-код в HTML-файл, непосредственно внутри тега элемента с помощью атрибута style:

Обратите внимание на этот текст.

Такие стили действуют только на тот элемент, для которого они заданы.

1.4. Правило @import

Правило @import позволяет загружать внешние таблицы стилей. Чтобы директива @import работала, она должна располагаться в таблице стилей (внешней или внутренней) перед всеми остальными правилами:

Правило @import также используется для подключения веб-шрифтов:

@import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);

2. Виды селекторов

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

2.1. Универсальный селектор

Соответствует любому HTML-элементу. Например, * {margin: 0;} обнулит внешние отступы для всех элементов сайта. Также селектор может использоваться в комбинации с псевдоклассом или псевдоэлементом: *:after {CSS-стили} , *:checked {CSS-стили} .

2.2. Селектор элемента

Селекторы элементов позволяют форматировать все элементы данного типа на всех страницах сайта. Например, h1 {font-family: Lobster, cursive;} задаст общий стиль форматирования всех заголовков h1 .

2.3. Селектор класса

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

и задать стиль для указанного класса. Стили, созданные с помощью класса, можно применять к другим элементам, не обязательно данного типа.

Инструкция пользования персональным компьютером

.headline { text-transform: uppercase; color: lightblue; }

2.4. Селектор идентификатора

Селектор идентификатора позволяет форматировать один конкретный элемент. Идентификатор id должен быть уникальным и на одной странице может встречаться только один раз.

#sidebar { width: 300px; float: left; }

2.5. Селектор потомка

Селекторы потомков применяют стили к элементам, расположенным внутри элемента-контейнера. Например, ul li {text-transform: uppercase;} — выберет все элементы li , являющиеся потомками всех элементов ul .

Если нужно отформатировать потомки определенного элемента, этому элементу нужно задать стилевой класс:

p.first a {color: green;} — данный стиль применится ко всем ссылкам, потомкам абзаца с классом first ;

p .first a {color: green;} — если добавить пробел, то будут стилизованы ссылки, расположенные внутри любого тега класса.first , который является потомком элемента

First a {color: green;} — данный стиль применится к любой ссылке, расположенной внутри другого элемента, обозначенного классом.first .

2.6. Дочерний селектор

Дочерний элемент является прямым потомком содержащего его элемента. У одного элемента может быть несколько дочерних элементов, а родительский элемент у каждого элемента может быть только один. Дочерний селектор позволяет применить стили только если дочерний элемент идёт сразу за родительским элементом и между ними нет других элементов, то есть дочерний элемент больше ни во что не вложен.
Например, p > strong — выберет все элементы strong , являющиеся дочерними по отношению к элементу p .

2.7. Сестринский селектор

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

h1 + p — выберет все первые абзацы, идущие непосредственно за любым тегом

, не затрагивая остальные абзацы;

h1 ~ p — выберет все абзацы, являющиеся сестринскими по отношению к любому заголовку h1 и идущие сразу после него.

2.8. Селектор атрибута

Селекторы атрибутов выбирают элементы на основе имени атрибута или значения атрибута:

[атрибут] — все элементы, содержащие указанный атрибут, — все элементы, для которых задан атрибут alt ;

селектор[атрибут] — элементы данного типа, содержащие указанный атрибут, img — только картинки, для которых задан атрибут alt ;

селектор[атрибут="значение"] — элементы данного типа, содержащие указанный атрибут с конкретным значением, img — все картинки, название которых содержит слово flower ;

селектор[атрибут~="значение"] — элементы частично содержащие данное значение, например, если для элемента задано несколько классов через пробел, p — абзацы, имя класса которых содержит feature ;

селектор[атрибут|="значение"] — элементы, список значений атрибута которых начинается с указанного слова, p — абзацы, имя класса которых feature или начинается на feature ;

селектор[атрибут^="значение"] — элементы, значение атрибута которых начинается с указанного значения, a — все ссылки, начинающиеся на http:// ;

селектор[атрибут$="значение"] — элементы, значение атрибута которых заканчивается указанным значением, img — все картинки в формате png ;

селектор[атрибут*="значение"] — элементы, значение атрибута которых содержит в любом месте указанное слово, a — все ссылки, название которых содержит book .

2.9. Селектор псевдокласса

Псевдоклассы — это классы, фактически не прикрепленные к HTML-тегам. Они позволяют применить CSS-правила к элементам при совершении события или подчиняющимся определенному правилу. Псевдоклассы характеризуют элементы со следующими свойствами:

:hover — любой элемент, по которому проводят курсором мыши;

:focus — интерактивный элемент, к которому перешли с помощью клавиатуры или активировали посредством мыши;

:active — элемент, который был активизирован пользователем;

:valid — поля формы, содержимое которых прошло проверку в браузере на соответствие указанному типу данных;

:invalid — поля формы, содержимое которых не соответствует указанному типу данных;

:enabled — все активные поля форм;

:disabled — заблокированные поля форм, т.е., находящиеся в неактивном состоянии;

:in-range — поля формы, значения которых находятся в заданном диапазоне;

:out-of-range — поля формы, значения которых не входят в установленный диапазон;

:lang() — элементы с текстом на указанном языке;

:not(селектор) — элементы, которые не содержат указанный селектор — класс, идентификатор, название или тип поля формы — :not() ;

:target — элемент с символом # , на который ссылаются в документе;

:checked — выделенные (выбранные пользователем) элементы формы.

2.10. Селектор структурных псевдоклассов

Структурные псевдоклассы отбирают дочерние элементы в соответствии с параметром, указанным в круглых скобках:

:nth-child(odd) — нечётные дочерние элементы;

:nth-child(even) — чётные дочерние элементы;

:nth-child(3n) — каждый третий элемент среди дочерних;

:nth-child(3n+2) — выбирает каждый третий элемент, начиная со второго дочернего элемента (+2) ;

:nth-child(n+2) — выбирает все элементы, начиная со второго;

:nth-child(3) — выбирает третий дочерний элемент;

:nth-last-child() — в списке дочерних элементов выбирает элемент с указанным местоположением, аналогично с:nth-child() , но начиная с последнего, в обратную сторону;

:first-child — позволяет оформить только самый первый дочерний элемент тега;

:last-child — позволяет форматировать последний дочерний элемент тега;

:only-child — выбирает элемент, являющийся единственным дочерним элементом;

:empty — выбирает элементы, у которых нет дочерних элементов;

:root — выбирает элемент, являющийся корневым в документе — элемент html .

2.11. Селектор структурных псевдоклассов типа

Указывают на конкретный тип дочернего тега:

:nth-of-type() — выбирает элементы по аналогии с:nth-child() , при этом берёт во внимание только тип элемента;

:first-of-type — выбирает первый дочерний элемент данного типа;

:last-of-type — выбирает последний элемент данного типа;

:nth-last-of-type() — выбирает элемент заданного типа в списке элементов в соответствии с указанным местоположением, начиная с конца;

:only-of-type — выбирает единственный элемент указанного типа среди дочерних элементов родительского элемента.

2.12. Селектор псевдоэлемента

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

:first-letter — выбирает первую букву каждого абзаца, применяется только к блочным элементам;

:first-line — выбирает первую строку текста элемента, применяется только к блочным элементам;

:before — вставляет генерируемое содержимое перед элементом;

:after — добавляет генерируемое содержимое после элемента.

3. Комбинация селекторов

Для более точного отбора элементов для форматирования можно использовать комбинации селекторов:

img:nth-of-type(even) — выберет все четные картинки, альтернативный текст которых содержит слово css .

4. Группировка селекторов

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

H1, h2, p, span { color: tomato; background: white; }

5. Наследование и каскад

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

5.1. Наследование

Наследование является механизмом, с помощью которого определенные свойства передаются от предка к его потомкам. Спецификацией CSS предусмотрено наследование свойств, относящихся к текстовому содержимому страницы, таких как color , font , letter-spacing , line-height , list-style , text-align , text-indent , text-transform , visibility , white-space и word-spacing . Во многих случаях это удобно, так как не нужно задавать размер шрифта и семейство шрифтов для каждого элемента веб-страницы.

Свойства, относящиеся к форматированию блоков, не наследуются. Это background , border , display , float и clear , height и width , margin , min-max-height и -width , outline , overflow , padding , position , text-decoration , vertical-align и z-index .

Принудительное наследование

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

Как задаются и работают CSS-стили

1) Стили могут наследоваться от родительского элемента (наследуемые свойства или с помощью значения inherit);

2) Стили, расположенные в таблице стилей ниже, отменяют стили, расположенные в таблице выше;

3) К одному элементу могут применяться стили из разных источников. Проверить, какие стили применяются, можно в режиме разработчика браузера. Для этого над элементом нужно щёлкнуть правой кнопкой мыши и выбрать пункт «Посмотреть код» (или что-то аналогичное). В правом столбце будут перечислены все свойства, которые заданы для этого элемента или наследуются от родительского элемента, а также файлы стилей, в которых они указаны, и порядковый номер строки кода.


Рис. 2. Режим разработчика в браузере Google Chrome

4) При определении стиля можно использовать любую комбинацию селекторов — селектор элемента, псевдокласса элемента, класса или идентификатора элемента.

div {border: 1px solid #eee;} #wrap {width: 500px;} .box {float: left;} .clear {clear: both;}

5.2. Каскад

Каскадирование — это механизм, который управляет конечным результатом в ситуации, когда к одному элементу применяются разные CSS-правила. Существует три критерия, которые определяют порядок применения свойств — правило!important , специфичность и порядок, в котором подключены таблицы стилей.

Правило!important

Вес правила можно задать с помощью ключевого слова!important , которое добавляется сразу после значения свойства, например, span {font-weight: bold!important;} . Правило необходимо размещать в конец объявления перед закрывающей скобкой, без пробела. Такое объявление будет иметь приоритет над всеми остальными правилами. Это правило позволяет отменить значение свойства и установить новое для элемента из группы элементов в случае, когда нет прямого доступа к файлу со стилями.

Специфичность

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

для id добавляется 0, 1, 0, 0 ;
для class добавляется 0, 0, 1, 0 ;
для каждого элемента и псевдоэлемента добавляется 0, 0, 0, 1 ;
для встроенного стиля, добавленного непосредственно к элементу — 1, 0, 0, 0 ;
универсальный селектор не имеет специфичности.

H1 {color: lightblue;} /*специфичность 0, 0, 0, 1*/ em {color: silver;} /*специфичность 0, 0, 0, 1*/ h1 em {color: gold;} /*специфичность: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/ div#main p.about {color: blue;} /*специфичность: 0, 0, 0, 1 + 0, 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ .sidebar {color: grey;} /*специфичность 0, 0, 1, 0*/ #sidebar {color: orange;} /*специфичность 0, 1, 0, 0*/ li#sidebar {color: aqua;} /*специфичность: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/

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

Порядок подключённых таблиц

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