belarusweb.net - веб-программирование для новичков: HTML,CSS, JavaScript, PHP, MySQL и др.

# §1. Введение в CSS

1.1. Для чего нужен CSS? В процессе изучения языка гипертекстовой разметки HTML мы уже упоминали о каскадных таблицах стилей, в частности отметили, что в то время как HTML используется главным образом для логической разметки html-документа, CSS отвечает за его внешний вид. Что же такое CSS?

CSS (от англ. Cascading Style Sheets) – каскадные таблицы стилей) – формальный язык, предназначенный для описания внешнего вида html-документов.

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

- появляется возможность хранить коды HTML и CSS в разных местах или даже файлах, что значительно облегчает их разработку и последующую поддержку, а также позволяет разделить работу дизайнера и программиста;
- хранение таблиц стилей CSS в отдельном файле несколько ускоряет загрузку страниц, т.к. при первом же использовании файл с таблицами кэшируется браузером (т.е. помещается в специально отведенное браузером место на локальном диске для быстрого последующего доступа к нему) и при последующем обращении к таблицам браузер не закачивает файл с ними заново по сети, а берет из кэша;
- отпадает необходимость применения тегов HTML не по своему прямому назначению; например, для того, чтобы отобразить текст курсивом, не нужно больше использовать тег <em> или ему подобный, нарушая логическую разметку страницы, поскольку теперь имеется возможность применить соответствующее свойство CSS;
- появляется возможность применения одних и тех же стилей сразу к нескольким элементам, в том числе и к тем, которые расположенны на разных страницах, а это, в свою очередь, приводит также и к сокращению объема кода;
- CSS позволяет применять к одному и тому же документу разные стили в зависимости от типа устройств вывода: монитора, телефона, принтера и т.д.;
- в CSS имеется значительно больше возможностей по оформлению внешнего вида элементов веб-страницы, чем в HTML предыдущих версий, а тем более в HTML 5, из которого практически полностью убрали соответствующие атрибуты.

Кстати, чтобы иметь возможность не на словах, а на реальном примере убедиться в возможностях CSS, достаточно посетить известный проект 'CSS Zen Garden', на котором представлено более 200 вариантов совершенно разного дизайна на основе всего лишь одного html-документа (смотреть).

1.2. Синтаксис CSS. Каскадные таблицы стилей представляют собой набор правил, которыми описывается внешний вид html-элементов. Каждое из таких правил сообщает браузеру, к каким элементам он должен применить правило и каким образом он должен изменить внешний вид этих элементов. Например, если правило сообщает браузеру, что он должен отобразить текст абзацев красным цветом и полужирным начертанием, то на экране мы увидим соответствующее изменение (см. пример 1.1).

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>Синтаксис CSS</title>

    		<!-- Для записи правила CSS воспользуемся элементом 'style' -->
    		<style>
    			/*-- Правило указывает браузеру, что он должен использовать для */
    			/* всех абзацев шрифт красного цвета полужирного начертания */

    			p{color: red; font-weight: bold;}
    		</style>
    	</head>
    	<body>
    		<p>
    			Мой текст имеет красный цвет и полужирное начертание.
    		</p>

    		<p>
    			Текст всех абзацев, а не только твой!
    		</p>

    		<div>
    			Ко мне это правило не относится, ведь я же не абзац.
    		</div>
    	</body>
    </html>

Пример 1.1. Код страницы, содержащей правило CSS

Для размещения правила CSS мы использовали служебный элемент 'style'. При составлении правил используется следующий синтаксис: сперва записывают селектор, который указывает браузеру, на какие элементы будет распространяться данное правило (в нашем случае – это абзацы); затем в фигурных скобках располагают блок объявлений (стиль), состоящий из одного или нескольких объявлений применяемых css-свойств, каждое из которых представляет собой пару 'свойство: значение;', где имя свойства отделяется от значения двоеточием ':', а каждая пара отделяется друг от друга точкой с запятой ';'. Разрешается применять один и тот же стиль сразу для нескольких селекторов, в этом случае селекторы перечисляются через запятую.

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

    /* Селекторы перечисляем через запятую */
    	/* и для читабельности кода отделяем пробелами. */

    	em, span, p{
    	color: red;			 /* Каждое объявление свойства */
    	font-weight: bold;	 /* делаем на новой строке. */
    	text-align: center;
    	padding-right: 10px;	 /* Имя css-свойства отделяем от  */
    	overflow: hidden;	 	/* его значения еще и пробелом. */
    	font-style: italic;
    	}

    		/* Не ленитесь писать комментарии! */

Пример 1.2. Форматирование кода CSS

Согласитесь, если бы мы записали даже этот небольшой фрагмент кода CSS без пробелов и в одну строчку, читабельность кода значительно упала бы. Поэтому, как и в случае с кодом HTML, старайтесь придерживаться установленного порядка форматирования кода и, по возможности, снабжайте код комментариями. Комментарии в CSS начинаются с символов ' /* ' и заканчиваются символами ' */ '. Функции комментариев аналогичны таковым в HTML.

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

1.3. Подключение CSS к html-документу. Для того, чтобы правила CSS могли быть применены к требуемым элементам html-документа, сперва необходимо связать их с этим документом и, в частности, с самим элементом. В процессе изучения языка HTML мы уже касались этого вопроса при изучении элементов 'style' и 'link', а также атрибутов style, class и id. Теперь же повторим все еще раз и в одном месте, но сперва рассмотрим подробнее понятие таблицы стилей.

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

Подключение таблиц стилей к 'html'-документу показано в примере 1.3.

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>Подключение таблиц стилей к документу</title>

      <!-- Подключаем к странице две внешние таблицы стилей -->
      <link href="http://localhost/test/css/style_1.css" rel="stylesheet">
      <link href="http://localhost/test/css/style_2.css" rel="stylesheet">

    	<!-- Первая внутренняя таблица стилей (для всех устройств) -->
    	<style type="text/css">
    		/* Подключаем еще одну внешнюю таблицу стилей */
    		@import "http://localhost/test/css/style_3.css";

    		p{
    		background-color: yellow;
    		color: blue;
    		}
    	</style>

    	<!-- Вторая внутренняя таблица стилей для распечатки документа -->
    	<style type="text/css" media="print">
    		p{
    		background-color: white;
    		color: black;
    		}
    	</style>
    </head>
    <body>
      <!-- А здесь использован встроенный стиль -->
      <p>
    	К данному <span style="color: red; font-weight: bold;">абацу</span>
    	применяется одна из встроенных таблиц стилей в зависимости от
    	устройства вывода информации.
      </p>

     <!-- Подключили класс (правило) из какой-то внешней таблицы стилей -->
     <a href="http://localhost/test/index.html" class="my_links">Домой</a>

    </body>
    </html>

Пример 1.3. Подключение таблиц стилей CSS к html-документу

Внешняя таблица стилей представляет собой обычный текстовый файл, в котором перечисляются все необходимые правила CSS. Для того чтобы подключить ее к требуемому html-документу, следует указать путь к файлу в качестве значения атрибута href служебного элемента 'link'. Также можно воспользоваться правилом @import, которое должно располагаться внутри контейнера 'style' или во внешней таблице стилей. Оно служит для импорта содержимого css-файла, указанного в значении данного свойства, в текущую таблицу стилей. Путь к файлу, содержащему внешнюю таблицу стилей, в этом случае указывается в формате '@import url ("path");' (кавычки разрешается опускать) или же просто в кавычках после имени свойства: '@import "path";'. При этом все правило, как и положено, должно заканчиваться точкой с запятой ';' (см. пример 1.3). После подключения к документу, внешняя таблица стилей становится доступна в пределах всего документа.

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

Стоит отдельно отметить, что внутри элемента 'style' действует синтаксис CSS, поэтому применение тегов и комментариев HTML в этой части документа запрещены.

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

1.4. Виды селекторов. Как было сказано немного выше, селекторы предназначены для нахождения (выборки) элементов, к которым браузеру следует применять данный стиль. Если одно и тоже правило используется для нескольких селекторов, то они отделяются друг от друга запятой. Селекторы играют важную роль и в JavaScript, где они используются для поиска нужных html-элементов.

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

- универсальный селектор – выбираются все элементы, а сам селектор имеет вид звездочки, например,
  `*` `{блок объявлений}` (см. пример 1.4);

      /* Универсальный селектор выбирает все элементы */

      	*{
      	color: red;
      	font-weight: bold;
      	}

  Пример 1.4. Использование универсального селектора

- селектор элементов – выбираются все элементы указанного вида, а если их несколько, то виды элементов перечисляются через запятую, например, `span` `{блок объявлений}` или сразу для нескольких видов элементов `span, div, p` `{блок объявлений}` (см. пример 1.5);

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

      	/* задаем шрифт указанных элементов*/
      	span, div, p{
      	color: red;
      	font-weight: bold;
      	}

      	/* а для этих дополнительно еще и фон */
      	div, p{
      	background-color: grey;
      	}

  Пример 1.5. Использование селектора элементов

- селектор классов – выбираются все элементы, у которых в качестве значения атрибута class указано имя селектора; сам селектор классов начинается с точки, после которой следует имя селектора (класса), например, `.my_class` `{блок объявлений}` (см. пример 1.6);

      /* Селектор классов выбирает элементы   */
      	/* с соответствующим значением атрибута class, */
      	/* как, например,  абзац  */

      	.my_class{
      	color: red;
      	font-weight: bold;
      	}

  Пример 1.6. Использование селектора классов

- селектор идентификаторов – выбирается элемент с соответствующим значением атрибута id; сам селектор начинается со знака решетки ' # ', после которого следует идентификатор (т.е. значение атрибута id), например, `#my_id` `{блок объявлений}` (см. пример 1.7);

      /* Селектор идентификаторов выбирает элемент   */
      	/* с соответствующим значением атрибута id, */
      	/* как, например,  абзац  */

      	#my_id{
      	color: red;
      	font-weight: bold;
      	}

      	/* Его отличие от селектора классов в том, что он */
      	/* применяется только к одному элементу на странице. */

  Пример 1.7. Использование селектора идентификаторов

- селектор атрибутов – элементы выбираются по значению атрибутов, а сам селектор берется в квадратные скобки; если селектор применяется к конкретному виду элементов, например, абзацам, то он пишется сразу же после имени элемента без пробела; данный тип селекторов обладает мощным инструментом поиска по шаблону, например:
  - [атрибут] – выбираются все элементы, у которых присутствует такой атрибут вне зависимости от его значения, например, `[title]` `{блок объявлений}` (см. пример 1.8);
  - [атрибут="значение"] – выбираются все элементы, у которых данный атрибут имеет указанное в селекторе значение (здесь и далее учитывается также и регистр символов!), например, `[title="Очень большое животное."]` `{блок объявлений}`;
  - [атрибут^="значение"] – выбираются все элементы, у которых значение данного атрибута начинается на подстроку (фрагмент строки), указанную в селекторе, например, `[title^="Очень бол"]` `{блок объявлений}`;

      /* Селектор атрибутов выбирает элементы   */
      	/* в соответствии с заданным шаблоном */

      	/* Этот стиль будет применен ко всем html-элементам, */
      	/* у которых задан атрибут title, например, */
      	/* к абзацу  абзац  или */
      	/* к абзацу  абзац  */
      	[title]{
      	color: red;
      	font-weight: bold;
      	}

      	/* Стиль будет применен ко всем html-элементам, */
      	/* у которых атрибут title="Очень большое животное", */
      	/*  например, к абзацу  */
      	/*   абзац  */
      	[title="Очень большое животное"]{
      	color: red;
      	font-weight: bold;
      	}

      	/* А этот стиль будет применен ко всем html-элементам, */
      	/* у которых атрибут title начинается на подстроку */
      	/* "Очень бол",  например, к абзацу  */
      	/*   абзац  */
      	[title^="Очень бол"]{
      	color: red;
      	font-weight: bold;
      	}

  Пример 1.8. Использование селектора атрибутов

  - [атрибут$="значение"] – выбираются все элементы, у которых значение данного атрибута заканчинается на подстроку, указанную в селекторе, например, `[title$="тное."]` `{блок объявлений}` (см. пример 1.9);
  - [атрибут~="значение"] – выбираются все элементы, у которых значение данного атрибута содержит подстроку, отделенную пробелами от остальной части, или отдельное слово и указанную в селекторе, например, `[title~="большое"]` `{блок объявлений}`;
  - [атрибут*="значение"] – выбираются все элементы, у которых значение данного атрибута содержит подстроку, указанную в селекторе, например, `[title*="ивотн"]` `{блок объявлений}`;

      /* Селектор атрибутов выбирает элементы   */
      	/* в соответствии с заданным шаблоном */

      	/* Этот стиль будет применен ко всем html-элементам, */
      	/* у которых атрибут title заканчинается на подстроку */
      	/* "тное.",  например, к абзацу  */
      	/*   абзац  */
      	[title$="тное."]{
      	color: red;
      	font-weight: bold;
      	}

      	/* Стиль будет применен ко всем html-элементам, */
      	/* у которых атрибут title содержит подстроку */
      	/* "большое", отделенную пробелами от остального */
      	/* содержимого, например, к абзацу   */
      	/*  абзац  */
      	[title~="большое"]{
      	color: red;
      	font-weight: bold;
      	}

      	/* А этот стиль будет применен ко всем html-элементам, */
      	/* у которых атрибут title содержит подстроку */
      	/* "ивотн",  например, к абзацу  */
      	/*   абзац  */
      	[title*="ивотн"]{
      	color: red;
      	font-weight: bold;
      	}

  Пример 1.9. Еще один вариант использования селектора атрибутов

- контекстный селектор – выбираются все элементы требуемого вида, которые находятся внутри указанных в селекторе элементов-родителей (в селекторе вложенный элемент пишется через пробел после элемента-родителя), например, если задано правило `div p span` `{блок объявлений}`, то стиль будет применен ко всем элементам 'span', которые находятся внутри абзацев, в свою очередь находящихся внутри элемента 'div' (см. пример 1.10);

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

      <!DOCTYPE html>
      <html>
      <head>
      	<meta charset="utf-8">
      	<title>Контекстный селектор</title>
      	<style>
      		/* Контекстный селектор выбирает элементы, */
      		/* вложенные в элементы-родители */

      		div p span{
      		color: red;
      		font-weight: bold;
      		}
      	</style>
      </head>
      <body>
      	<!-- Здесь span  вложен в абзац, а тот в элемент 'div' -->
      	<div>
      		<p>
      			<span>Мой текст имеет красный цвет и
      			полужирное начертание</span>.
      		</p>
      	</div>

      	<span>
      		Ко мне это правило не относится, ведь я же
      		вложен только в тело документа.
      	</span>
      </body>
      </html>

  Пример 1.10. Использование контекстного селектора

- селектор дочерних элементов – выбираются элементы требуемого вида, которые являются дочерними по отношению к указанному в селекторе элементу, например, `p`>`span` `{блок объявлений}` (см. пример 1.11);

      <!DOCTYPE html>
      <html>
      <head>
      	<meta charset="utf-8">
      	<title>Селектор дочерних элементов</title>
      	<style>
      		p>span{
      		color: orange;
      		font-weight: bold;
      		}
      	</style>
      </head>
      <body>
      	<p>
      		<!-- Здесь 'span'  является дочерним, т.к. находится -->
      		<!-- непосредственно внутри элемента 'p'. -->
      		<span>Мой текст имеет оранжевый цвет и
      		полужирное начертание</span>. <br>

      		<em>
      			<span>Ко мне это правило не относится,
      			т.к. мой родитель элемент 'em'.</span><br>
      		</em>

      		<!-- Здесь 'span' тоже является дочерним. -->
      		<span>Зато я &ndash; тоже дочерний для 'p'.</span>
      	</p>
      </body>
      </html>

  Пример 1.11. Использование селектора дочерних элементов

- селектор соседних элементов – выбираются элементы требуемого вида, которые идут после указанного в селекторе элемента, например, `p`+`span` `{блок объявлений}`, здесь будут выбраны все элементы 'span', которые идут после элементов 'p' (см. пример 1.12).

      <!DOCTYPE html>
      <html>
      <head>
      	<meta charset="utf-8">
      	<title>Селектор соседних элементов</title>
      	<style>
      		br+em{
      		color: orange;
      		}
      	</style>
      </head>
      <body>
      	<span>Текст...</span> <br>
      <!-- Элемент 'em' расположен после элемента 'br' -->
      	<em>Курсив оранжевого цвета.</em>
      </body>
      </html>

  Пример 1.12. Использование селектора соседних элементов

- селектор псевдоклассов – напоминает селектор классов, но в отличие от классов, псевдоклассы в разметке html-документа не указываются и отделяются от указанного в селекторе элемента двоеточием ' : '; выбираются элементы необходимого вида, которые соответствуют требованиям указанного в селекторе псевдокласса:
  - :link – выбираются все непосещенные ссылки, например, `a``:link` `{блок объявлений}` (см. пример 1.13);
  - :visited – выбираются все посещенные ссылки, например, `a``:visited` `{блок объявлений}`;
  - :active – выбирается активный в данный момент элемент требуемого вида (таковым он становится в момент нажатия на него), например, `span``:active`, `a``:active` `{блок объявлений}`;

      <!DOCTYPE html>
      <html>
      <head>
      	<meta charset="utf-8">
      	<title>Селектор псевдоклассов</title>
      	<style>
      		span:active{
      		color: orange;
      		}

      		a:link{
      		color: violet;
      		}

      		a:visited{
      		color: red;
      		}
      	</style>
      </head>
      <body>
      	<span>Надо мною нажата кнопка мыши, поэтому текст оранжевый. <br>
      	Отпусти, и я опять стану прежним.</span><br> <br>

      	<a href="http://www.belarusweb.net">Меня уже посещали.</a>
      	<br><br><a href="http://www.belarusweb.net">А меня еще нет.</a>
      </body>
      </html>

  Пример 1.13. Использование селектора псевдоклассов (пример №1)

  - :hover – выбирается элемент требуемого вида, на который наведен курсор мыши, например, `span``:hover` `{блок объявлений}` (см. пример 1.14);
  - :focus – выбирается элемент требуемого вида, который в данный момент находится в фокусе, например, `span``:focus` `{блок объявлений}`;
  - :target – выбираются все элементы требуемого вида, которые используются в качестве якорей; стиль к ним применяется после перехода по соответствующей ссылке, например, `span``:target` `{блок объявлений}`;

      <!DOCTYPE html>
      <html>
      <head>
      	<meta charset="utf-8">
      	<title>Селектор псевдоклассов</title>
      	<style>
      		a:hover{
      		color: green;
      		}

      		span:focus{
      		color: red;
      		}

      		span:target{
      		color: orange;
      		}
      	</style>
      </head>
      <body>
      	<span id="span_1">Мой текст становится оранжевым, когда
      	ко мне был совершен переход по первой ссылке.</span><br><br>

      	<span id="span_2">Мой текст становится оранжевым, когда
      	ко мне был совершен переход по второй ссылке.</span><br><br>

      	<a href="#span_1">Я первая ссылка. Я становлюсь зеленой
      	при наведении на меня курсора мыши.</a><br><br>

      	<a href="#span_2">Я вторая ссылка и тоже становлюсь зеленой
      	при наведении на меня курсора мыши.</a><br><br>

      	<br><span contenteditable>Когда я в фокусе, мой текст имеет
      	красный цвет.</span>
      </body>
      </html>

  Пример 1.14. Использование селектора псевдоклассов (пример №2)

  - :enabled – выбираются все элементы формы требуемого вида, у которых атрибут disabled отсутствует (элемент доступен), например, `button``:enabled` `{блок объявлений}` (см. пример 1.15);
  - :disabled – выбираются все элементы формы требуемого вида, у которых атрибут disabled присутствует (элемент заблокирован), например, `button``:disabled` `{блок объявлений}`;
  - :checked – выбираются все элементы требуемого вида, которые выбраны пользователем или выбраны по умолчанию при помощи атрибута checked, например, `input``:checked` `{блок объявлений}`;

      <!DOCTYPE html>
      <html>
      <head>
      	<meta charset="utf-8">
      	<title>Селектор псевдоклассов</title>
      	<style>
      		button:enabled{
      		color: green;
      		}

      		button:disabled{
      		color: red;
      		}

      		/* Выбранное окошко выделим оранжевой рамкой */
      		input:checked{
      		outline: 3px;
      		outline-color: orange;
      		outline-style: solid;
      		}
      	</style>
      </head>
      <body>
      	<form action="http://localhost/test/php/script_1.php" method="POST">

      		<label for="first">1 вариант</label>
      		<input type="checkbox" checked name="first" value="1" id="first">

      		&nbsp;<label for="second">2 вариант</label>
      		<input type="checkbox" name="second" value="2" id="second">

      		&nbsp;<label for="third">3 вариант</label>
      		<input type="checkbox" name="third" value="3" id="third"><br><br>

      <!-- Цвет надписи будет красным, т.к. присутствует атрибут 'disabled' -->
      		<button type="reset" disabled>Сброс</button> &nbsp;

      <!-- Цвет надписи будет зеленым, т.к. атрибут 'disabled' отсутствует -->
      		<button type="submit">Отправить</button>
      	</form>
      </body>
      </html>

  Пример 1.15. Использование селектора псевдоклассов (пример №3)

  - :lang(язык) – выбираются все элементы требуемого вида, у которых атрибут lang имеет значение языка, указанного в селекторе, например, `p``:lang(en)` `{блок объявлений}` (см. пример 1.16);
  - :empty – выбираются все пустые элементы требуемого вида, например, `span``:empty` `{блок объявлений}`;

      <!DOCTYPE html>
      <html>
      <head>
      	<meta charset="utf-8">
      	<title>Селектор псевдоклассов</title>
      	<style>
      		p:lang(en){
      		color: green;
      		}

      		p:lang(ru){
      		color: red;
      		}

      		span:empty{
      		padding-left: 5px;   /* Отступ слева */
      		background-color: orange;
      		}
      	</style>
      </head>
      <body>
      	<p lang="en">
      		I am english text.<span></span>
      	</p>

      	<p lang="ru">
      		Я русский текст.<span></span>
      	</p>
      </body>
      </html>

  Пример 1.16. Использование селектора псевдоклассов (пример №4)

  - :root – выбирает корневой элемент, которым в html-документе является элемент 'html', например, `:root` `{блок объявлений}`;
  - :nth-child(значение) – выбираются дочерние элементы требуемого вида, у которых порядковый номер следования внутри родительского элемента соответствует значению, указанному в селекторе; в скобках могут быть указаны значения:
    - odd – выбираются дочерние элементы требуемого вида с нечетными порядковыми номерами относительно своего родителя, например, если задано правило `span``:nth-child(odd)` `{блок объявлений}`, то в документе будут выбраны все дочерние элементы 'span', которые имеют нечетные порядковые номера (1, 3, 5 и т.д.) относительно своего родительского элемента (см. пример 1.17);
    - even – выбираются дочерние элементы требуемого вида с четными порядковыми номерами относительно своего родителя, например, если задано правило `span``:nth-child(even)` `{блок объявлений}`, то в документе будут выбраны все дочерние элементы 'span', которые имеют четные порядковые номера (2, 4, 6 и т.д.) относительно своего родительского элемента;

        <!DOCTYPE html>
        <html>
        <head>
        	<meta charset="utf-8">
        	<title>Селектор псевдоклассов</title>

        	<!-- Выбираем дочерние по отношению к своему родителю (в данном -->
        	<!-- случае к элементу 'p') элементы 'span' с нечетными  -->
        	<!-- порядковыми номерами: 1, 3, 5 и т.д. -->
        	<style>
        		span:nth-child(odd){
        		color: red;
        		}
        	</style>
        	<!-- А здесь с четными порядковыми номерами: 2, 4, 6 и т.д. -->
        	<style>
        		span:nth-child(even){
        		color: blue;
        		}
        	</style>
        </head>
        <body>
        	<p>
        		<!-- Не забываем, что 'br' тоже является элементом -->
        		<span>1 дочерний элемент.</span>
        		<span>2 дочерний элемент.</span>
        		<br><span>4 дочерний элемент.</span>
        		<span>5 дочерний элемент.</span><br>
        		<span>7 дочерний элемент. </span>
        		<span>8 дочерний элемент.</span><br>
        		<span>10 дочерний элемент.</span>
        	</p>
        </body>
        </html>

    Пример 1.17. Использование селектора псевдоклассов (пример №5)

    - n – выбираются дочерние элементы требуемого вида с указанным порядковым номером n относительно своего родителя, при чем нумерация начинается с единицы, например, если задано правило `span``:nth-child(3)` `{блок объявлений}`, то в документе будут выбраны все дочерние элементы 'span', которые имеют порядковый номер 3 относительно своего родительского элемента (см. пример 1.18);
    - an+b – выбираются дочерние элементы требуемого вида, порядковый номер которых относительно своего родителя вычисляется по формуле an+b, где a и b – целые числа, задаваемые в качестве значений, а n – счетчик, который автоматически принимает значения 0, 1, 2 и т.д., например, если задано правило `span``:nth-child(3n+4)` `{блок объявлений}`, то в документе будут выбраны все дочерние элементы 'span', которые имеют порядковые номера 4, 7, 10 и т.д. относительно своего родительского элемента;

        <!DOCTYPE html>
        <html>
        <head>
        	<meta charset="utf-8">
        	<title>Селектор псевдоклассов</title>

        	<!-- Выбираем дочерние по отношению к своему родителю (в данном -->
        	<!-- случае к элементу 'body') элементы 'span' с порядковыми  -->
        	<!-- номерами 3*0+1=1, 3*1+1=4, 3*2+1=7 и т.д. -->
        	<style>
        		span:nth-child(3n+1){
        		color: red;
        		}

        		/* Стиль применяется к 3-му дочернему элементу 'span' */
        		span:nth-child(3){
        		color: blue;
        		}
        	</style>
        </head>
        <body>
        	<!-- Не забываем, что 'br' тоже является элементом -->
        	<span>1 дочерний элемент.</span><br>
        	<span>3 дочерний элемент.</span><br>
        	<span>5 дочерний элемент.</span><br>
        	<span>7 дочерний элемент.</span><br>
        	<span>9 дочерний элемент.</span><br>
        	<span>11 дочерний элемент.</span><br>
        	<span>13 дочерний элемент.</span><br>
        </body>
        </html>

    Пример 1.18. Использование селектора псевдоклассов (пример №6)

  - :nth-last-child(значение) – выбираются дочерние элементы требуемого вида, у которых порядковый номер следования внутри родительского элемента отсчитывается от конца родительского элемента (от закрывающего тега) и соответствует значению, указанному в селекторе; в скобках могут быть указаны те же значения, что и в случае псевдокласса :nth-child, т.е. odd, even, n или an+b, например, если задано правило `span``:nth-last-child(3n+4)` `{блок объявлений}`, то в документе будут выбраны все дочерние элементы 'span', которые имеют порядковые номера 4, 7, 10 и т.д., отсчитываемые относительно конца своего родительского элемента (см. пример 1.19);

      <!DOCTYPE html>
      <html>
      <head>
      	<meta charset="utf-8">
      	<title>Селектор псевдоклассов</title>

      	<!-- Выбираем дочерние по отношению к своему родителю (в данном -->
      	<!-- случае к элементу 'body') элементы 'span' с порядковыми  -->
      	<!-- номерами считая с конца 3*0+1=1, 3*1+1=4, 3*2+1=7 и т.д., -->
      	<!--  что соответствует номерам 10, 7, 4, 1 начиная с начала -->
      	<style>
      		span:nth-last-child(3n+1){
      		color: red;
      		}

      		/* Стиль применяется к 3-му дочернему элементу 'span' */
      		/* с конца, т.е. к 8-му с начала */
      		span:nth-last-child(3){
      		color: blue;
      		}
      	</style>
      </head>
      <body>
      	<!-- Не забываем, что 'br' тоже является элементом -->
      		<span>1 дочерний элемент.</span>
      		<span>2 дочерний элемент.</span>
      		<br><span>4 дочерний элемент.</span>
      		<span>5 дочерний элемент.</span><br>
      		<span>7 дочерний элемент. </span>
      		<span>8 дочерний элемент.</span><br>
      		<span>10 дочерний элемент.</span>
      </body>
      </html>

  Пример 1.19. Использование селектора псевдоклассов (пример №7)

  - :first-child – выбираются первые дочерние элементы требуемого вида (порядковый номер n=1) относительно своего родительского элемента, например, если задано правило `span``:first-child` `{блок объявлений}`, то в документе будут выбраны все первые дочерние элементы 'span' относительно своих родительских элементов (см. пример 1.20);
  - :last-child – выбираются последние дочерние элементы требуемого вида относительно своего родительского элемента, например, если задано правило `span``:last-child` `{блок объявлений}`, то в документе будут выбраны все последние дочерние элементы 'span' относительно своих родительских элементов;
  - :only-child – выбираются дочерние элементы требуемого вида, которые являются единственными дочерними элементами для своего родительского элемента, например, если задано правило `span``:only-child` `{блок объявлений}`, то в документе будут выбраны все дочерние элементы 'span', которые являются единственными дочерними элементами для своего родительского элемента;

      <!DOCTYPE html>
      <html>
      <head>
      	<meta charset="utf-8">
      	<title>Селектор псевдоклассов</title>

      	<style>
      		span:first-child{
      		color: orange;
      		}

      		span:last-child{
      		color: blue;
      		}

      		span:only-child{
      		color: red;
      		}
      	</style>
      </head>
      <body>
      	<p>
      		<span>Первый дочерний элемент.</span><br>
      		<span>3 дочерний элемент.</span><br>
      		<span>Последний дочерний элемент.</span>
      	</p>

      	<p>
      		<span>Единственный дочерний элемент.</span>
      	</p>
      </body>
      </html>

  Пример 1.20. Использование селектора псевдоклассов (пример №8)

  - :nth-of-type(значение) – выбираются дочерние элементы требуемого вида без учета (подсчета) любых других дочерних элементов, у которых порядковый номер следования внутри родительского элемента соответствует значению, указанному в селекторе; в скобках могут быть указаны те же значения, что и в случае псевдокласса :nth-child, т.е. odd, even, n или an+b, например, если задано правило `span``:nth-of-type(3n+4)` `{блок объявлений}`, то в документе будут выбраны все дочерние элементы 'span', которые имеют порядковые номера 4, 7, 10 и т.д., но с учетом того, что другие дочерние элементы как бы отсутствуют и в расчет не берутся (см. пример 1.21);
  - :nth-last-of-type(значение) – выбираются дочерние элементы требуемого вида без учета (подсчета) любых других дочерних элементов, у которых порядковый номер следования внутри родительского элемента отсчитывается от конца родительского элемента (от закрывающего тега) и соответствует значению, указанному в селекторе; в скобках могут быть указаны те же значения, что и в случае псевдокласса :nth-child, т.е. odd, even, n или an+b, например, если задано правило `span``:nth-last-of-type(3n+1)` `{блок объявлений}`, то в документе будут выбраны все дочерние элементы 'span', которые имеют порядковые номера 1, 4, 7 и т.д., отсчитываемые относительно конца своего родительского элемента, но с учетом того, что другие дочерние элементы как бы отсутствуют и в расчет не берутся;

      <!DOCTYPE html>
      <html>
      <head>
      	<meta charset="utf-8">
      	<title>Селектор псевдоклассов</title>
      	<!-- Выбираем дочерние по отношению к своему родителю (в данном -->
      	<!-- случае к элементу 'p') элементы 'span' с нечетными  -->
      	<!-- порядковыми номерами 1, 3, 5 и т.д., но при этом  -->
      	<!-- !!! не считаем остальные дочерние элементы !!!  -->
      	<style>
      		span:nth-of-type(2n+1){
      		color: orange;
      		}
      	</style>
      	<style>
      		/* Применяем к первому дочернему 'em' с конца */
      		/* !!! не считаем остальные дочерние элементы !!! */
      		em:nth-last-of-type(1){
      		color: blue;
      		}
      	</style>
      </head>
      <body>
      	<p>
      		<!-- !!! Элементы 'br' и 'b' не считаем !!!  -->
      		<span>1 дочерний элемент 'span'.</span><br>
      		<b>Меня не считаем, т.к. я не 'span'!</b><br>
      		<span>2 дочерний элемент 'span'.</span><br>
      		<span>3 дочерний элемент 'span'.</span>
      	</p>
      	<p>
      		<em>1 дочерний элемент 'em'.</em><br>
      		<em>2 дочерний элемент 'em'.</em><br>
      		<b>Я &ndash; элемент 'b'.</b><br>
      	</p>
      </body>
      </html>

  Пример 1.21. Использование селектора псевдоклассов (пример №9)

  - :first-of-type – выбираются первые дочерние элементы требуемого вида (порядковый номер n=1) относительно своего родительского элемента, но без учета (подсчета) любых других видов дочерних элементов, например, если задано правило `span``:first-of-type` `{блок объявлений}`, то в документе будут выбраны все первые дочерние элементы 'span' относительно своих родительских элементов, но с учетом того, что другие дочерние элементы как бы отсутствуют и в расчет не берутся (см. пример 1.22);
  - :last-of-type – выбираются последние дочерние элементы требуемого вида относительно своего родительского элемента, но без учета (подсчета) любых других видов дочерних элементов, например, если задано правило `span``:last-of-type` `{блок объявлений}`, то в документе будут выбраны все последние дочерние элементы 'span' относительно своих родительских элементов, но с учетом того, что другие дочерние элементы как бы отсутствуют и в расчет не берутся;
  - :only-of-type – выбираются дочерние элементы требуемого вида, которые являются единственными дочерними элементами для своего родительского элемента данного вида (при этом дочерние элементы других видов могут присутствовать), например, если задано правило `span``:only-of-type` `{блок объявлений}`, то в документе будут выбраны все дочерние элементы 'span', которые являются единственными дочерними элементами данного вида для своего родительского элемента;

      <!DOCTYPE html>
      <html>
      <head>
      	<meta charset="utf-8">
      	<title>Селектор псевдоклассов</title>
      	<!-- Выбираем первые и последние дочерние элементы 'span'.-->
      	<!--  При этом не считаем остальные дочерние элементы.  -->
      	<style>
      		span:first-of-type{
      		color: red;
      		}
      		span:last-of-type{
      		color: blue;
      		}
      	</style>
      	<!-- Применяем только, если 'em' единственный дочерний  -->
      	<!-- элемент данного вида. При этом могут присутствовать -->
      	<!-- дочерние элементы других видов. -->
      	<style>
      		em:only-of-type{
      		color: orange;
      		}
      	</style>
      </head>
      <body>
      	<p>
      		<!-- !!! Элементы 'br' и 'b' не считаем !!!  -->
      		<span>1 дочерний элемент 'span'.</span><br>
      		<b>Меня не считаем, т.к. я не 'span'!</b><br>
      		<span>2 дочерний элемент 'span'.</span><br>
      		<span>3 дочерний элемент 'span'.</span>
      	</p>
      	<p>
      		<em>Единственный дочерний элемент 'em'.</em><br>
      		<b>Я &ndash; элемент 'b'.</b><br>
      	</p>
      </body>
      </html>

  Пример 1.22. Использование селектора псевдоклассов (пример №10)

  - :not(селектор) – выбираются все элементы требуемого вида, которые не подходят под шаблон указанного в скобках селектора; при этом нельзя использовать в качестве значения в скобках сам псевдокласс и псевдоэлементы; например, если задано правило `span``:not([contenteditable])` `{блок объявлений}`, то в документе будут выбраны все элементы 'span', у которых отсутствует атрибут contenteditable (см. пример 1.23).

      <!DOCTYPE html>
      <html>
      <head>
      	<meta charset="utf-8">
      	<title>Селектор псевдоклассов</title>
      	<!-- Выбираем все элементы 'span', у которых -->
      	<!-- не задан атрибут 'contenteditable'.  -->
      	<style>
      		span:not([contenteditable]){
      		color: red;
      		}
      	</style>
      </head>
      <body>
      	<span>Нередактируемый элемент 'span'.</span><br>
      	<span contenteditable>Редактируемый элемент 'span'.</span><br>
      	<span>Опять нередактируемый элемент 'span'.</span>
      </body>
      </html>

  Пример 1.23. Использование селектора псевдоклассов (пример №11)

- селектор псевдоэлементов – выбираются элементы требуемого вида, явно не указанные в дереве элементов html-документа и соответствующие требованиям указанного в селекторе псевдоэлемента, который отделяется от элемента двумя двоеточиями ' :: '; применяются следующие псевдоэлементы:
  - ::first-letter – выбирается первая буква элементов требуемого вида, у которых свойство display имеет одно из значений: block, inline-block, list-item, table-cell или table-caption, при этом первая буква элементов с {display: inline-block|table-cell} не должна быть в тоже время и первой буквой родительского элемента; кроме того, к псевдоэлементу могут применяться только свойства, относящиеся к шрифтам, тексту, полям, границам, отступам, цвету и фону, хотя в зависимости от браузера могут применяться и некоторые другие свойства; например, если задано правило `p``::first-letter` `{блок объявлений}`, то данный стиль будет применен ко всем первым буквам абзацев (см. пример 1.24);
  - ::first-line – выбираются первые строки блочных элементов требуемого вида, которые отсчитываются от начала текста до принудительного либо автоматического перевода текста на новую строку, при этом ширина строки может меняться в зависимости от ширины блочного элемента, но стиль первой строки будет оставаться постоянным вплоть до перевода на новую строку; к псевдоэлементу могут применяться только свойства, относящиеся к шрифтам, тексту, цвету и фону, хотя в зависимости от браузера могут применяться и некоторые другие свойства; например, если задано правило `p``::first-line` `{блок объявлений}`, то данный стиль будет применен ко всем первым строкам абзацев;

      <!DOCTYPE html>
      <html>
      <head>
      	<meta charset="utf-8">
      	<title>Селектор псевдоэлементов</title>
      	<style>
      		div::first-letter{
      		color: red;
      		}

      		p::first-line{
      		color: blue;
      		}
      	</style>
      </head>
      <body>
      	<div>
      		Первая буква блока будет красной.<br>
      		Весь остальной текст будет обычным.
      	</div>

      	<p>
      		А у меня будет синей вся первая строка.<br>
      		А я не синяя, т.к. вторая.
      	</p>
      </body>
      </html>

  Пример 1.24. Использование селектора псевдоэлементов (пример №1)

  - ::before – выбираются элементы требуемого вида, перед которыми вставляется предопределенное содержимое, указанное в качестве значения стилевого свойства content; например, `p``::before` `{блок объявлений}` (см. пример 1.25);
  - ::after – выбираются элементы требуемого вида, после которых вставляется предопределенное содержимое, указанное в качестве значения стилевого свойства content; например, `p``::after` `{блок объявлений}`.

      <!DOCTYPE html>
      <html>
      <head>
      	<meta charset="utf-8">
      	<title>Селектор псевдоэлементов</title>
      	<style>
      	/* Вставим перед элементами красные звездочки. */
      		div::before, p::before{
      		content: "***";
      		color: red;
      		}

      	/* Вставим после элементов синие звездочки. */
      		p::after, div::after{
      		content: "***";
      		color: blue;
      		}
      	</style>
      </head>
      <body>
      	<div>
      		Первая буква блока будет красной.<br>
      		Весь остальной текст будет обычным.
      	</div>

      	<p>
      		А у меня будет синей вся первая строка.<br>
      		А я не синяя, т.к. вторая.
      	</p>
      </body>
      </html>

  Пример 1.25. Использование селектора псевдоэлементов (пример №2)

Очень важной особенностью перечисленных видов селекторов является возможность их комбинирования между собой практически в любых вариациях. Приведем в качестве примеров несколько комбинаций селекторов разных видов: p.my_class:hover `{блок объявлений}` – стиль будет применен ко всем параграфам, у которых задан атрибут class="my_class", при наведении на них курсора мыши; .list_1 a:visited `{блок объявлений}` – этот стиль будет применен ко всем посещенным ссылкам, которые находятся внутри элементов с атрибутом class="list_1"; p[class*="back"] > strong span[contenteditable]:focus `{блок объявлений}` – этот стиль будет применяться к каждому элементу span, у которого имеется атрибут contenteditable, он находится в данный момент в фокусе и является вложенным в элемент strong, который является дочерним по отношению к элементу p, имеющему атрибут class, в значении которого присутствует подстрока 'back'. Следует обязательно попрактиковаться в составлении селекторов. Для этого можно воспользоваться нашим разделом 'Задачник'.

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

1.5. Наследование, каскадирование и приоритетность стилей CSS. Все свойства CSS делятся на те, которые наследуются элементами-потомками от своих элементов-предков, и те, которые не наследуются. Так, например, если для параграфа задать границу (сформировать рамку), то все вложенные в него элементы (элементы-потомки) не унаследуют это свойство CSS, поскольку в данном случае наследование не имеет положительного эффекта. Согласитесь, не совсем разумно было бы переопределять для каждого элемента-потомка унаследованные от абзаца-родителя границы. Но, если мы зададим для абзаца, например, синий цвет шрифта, то он будет унаследован всеми элементами потомками до тех пор, пока мы не переопределим его в случае необходимости для конкретного элемента, а это эффективнее, чем определять шрифт отдельно для каждого элемента-потомка. Посмотреть, какие стилевые свойства наследуются, а какие нет, можно на официальном сайте W3C (смотреть таблицу свойств CSS).

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

Давайте для начала рассмотрим простейший случай, показанный в примере 1.26.

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Наследование стилей</title>
    	<style>
    		p{
    		color: red;		  /* Цвет шрифта */
    		background-color: black;    /* Фон */
    		}

    	/* Для абзацев с атрибутом class="yellow_back"
    	добавляем ширину и переопределяем фон */
    		p.yellow_back{
    		background-color: yellow;
    		width: 200px;  	 /* Ширина абзаца */
    		}
    	</style>
    </head>
    <body>
    	<p>
    		Текст простого абзаца.
    	</p>

    	<p class="yellow_back">
    		Текст абзаца с классом.
    	</p>

    	<p class="yellow_back" style="color: blue; width: 400px;">
    		Переопределяем и цвет шрифта, и ширину абзаца.
    	</p>
    </body>
    </html>

Пример 1.26. Простейший случай каскадности стилей CSS

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

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

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

Расчет специфичности селектора производится при помощи трех чисел (a, b, c). Происходит это следующим образом:

- числу a присваивается количество идентификаторов в селекторе;
- числу b присваивается суммарное количество классов, атрибутов и псевдоклассов в селекторе;
- числу c присваивается суммарное количество элементов и псевдоэлементов.

После подсчета чисел у всех сравниваемых селекторов, селектором с большей специфичностью будет считаться тот, у которого больше число a, в независимости от величины чисел b и c. Если же у сравниваемых селекторов число a окажется одинаковым, будет сравниваться их число b, а в случае необходимости и число c (см. пример 1.27).

    /* Запишем пример кода html */

    	/*
    			Текст...

    	*/

    	/* Здесь а=1, т.к. в селекторе есть 1 идентификатор; */
    	/* b=0, т.к. есть 0 классов, 0 атрибутов и 0 псевдоклассов; */
    	/* с=0, т.к. есть 0 элементов и 0 псевдоэлементов; */
    	/* т.о. специфичность равна (1,0,0). */
    	#m_id{
    	color: blue;
    	}

    	/* Здесь а=0, т.к. в селекторе отсутствуют идентификаторы; */
    	/* b=3, т.к. есть 1 класс, 1 атрибут и 1 псевдокласс; */
    	/* с=2, т.к. присутствуют два элемента: 'p' и 'em'; */
    	/* т.о. специфичность равна (0,3,2). */

    	p.my_class em[title="Город"]:hover{
    	color: red;
    	}

    	/* Значит цвет текста в примере кода будет синим, т.к.
    	во втором правиле число а=0, а в первом правиле а=1. */

    	/* А вот если бы специфичности селекторов были равны,
    	то приоритет имел бы стиль нижнего правила. */

Пример 1.27. Сравнение специфичности селекторов

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

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

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

- Стили, унаследованные элементами-потомками от своих родителей, обладают самым низким приоритетом.
- Стили, заданные во внешних таблицах обладают большим приоритетом. При этом правила, которые идут в коде внешней таблицы стилей ниже (т.е. встречаются позже) имеют больший приоритет перед правилами, которые встречаются в коде этой таблицы выше (т.е. раньше). Кроме того, из нескольких внешних таблиц стилей большим приоритетом обладают таблицы, подключенные к документу при помощи элемента 'link' ниже в коде этого документа. Соответственно, если таблица подключена в коде документа выше, то приоритет ее стилей будет ниже.
- Стили внутренних таблиц (расположены внутри контейнеров 'style') имеют приоритет перед стилями внешних таблиц, но только если они расположены в коде ниже, чем элемент 'link', при помощи которого была подключена внешняя таблица стилей. Опять же, правила, которые идут в коде внутренней таблицы стилей ниже имеют больший приоритет перед правилами, которые встречаются в коде этой таблицы выше. Кроме того, если в документе используется несколько внутренних таблиц стилей, т.е. имеется несколько элементов 'style', то большим приоритетом обладают стили тех таблиц, которые расположены в коде документа ниже.
- Еще большим приоритетом обладают встроенные стили, которые преобладают над правилами с любой специфичностью селекторов. Действительно, куда уже конкретнее, если стиль расположен в открывающем теге элемента.

Отдельно следует сказать про служебный параметр !important, который указывается в случае необходимости во внутренних и внешних таблицах стилей после значения css-свойства через пробел, например, p {color: green !important;}. Свойство стиля, в котором указан данный параметр, обладает наибольшим приоритетом в независимости от расположения таблицы стилей в коде документа или же самого правила внутри таблицы стилей, но только в ситуации, когда специфичности стилей равны (при этом не следует забывать, что специфичность встроенного стиля следует считать наивысшей в любом случае!). Опять же, если свойств с таким параметром несколько, да еще и специфичности соответствующих селекторов одинаковы, то приоритет будет определяться по виду стиля, расположению таблиц стилей или же, если они окажутся в одной и той же таблице стилей, сравнению их расположения в коде этой таблицы.

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

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

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

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

К абсолютным единицам измерения относятся:

- cm (от англ. centimeter – сантиметр),
- mm (от англ. millimeter – миллиметр),
- in (от англ. inch – дюйм) – один дюйм равен 2,54cm,
- pt (от англ. point – пункт) – один пункт равен 1/72 дюйма или 0,353mm,
- pc (от англ. pica – пика) – одна пика равна 12 пунктам.

Абсолютные единицы используются довольно редко, в основном для стилей, которые используются при выводе текста html-документов на печатные носители информации. Пункты, кроме того, широко используются в текстовых редакторах. Использование абсолютных единиц показано в примере 1.28.

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Абсолютные единицы измерения</title>
    	<style>
    		.cm{font-size: 1cm;}
    		.mm{font-size: 5mm;}
    		.in{font-size: 0.5in;}
    		.pt{font-size: 12pt;}
    		.pc{font-size: 1pc;}
    	</style>
    </head>
    <body>
    	<span class="cm">Один сантиметр.</span><br>
    	<span class="mm">Пять миллиметров.</span><br>
    	<span class="in">Половина дюйма.</span><br>
    	<span class="pt">12 пунктов.</span><br>
    	<span class="pc">Одна пика (12 пунктов).</span>
    </body>
    </html>

Пример 1.28. Применение абсолютных единиц измерения

Для вывода информации на экран в основном используются относительные единицы измерения, к которым относятся (см. примеры 1.29 и 1.30):

- px (от англ. pixel – пиксель) – 1px представляет собой одну элементарную точку на экране, размеры которой зависят от технических характеристик устройства вывода, например, размеров зерна монитора или экрана смартфона, а также заданного разрешения экрана, например, квадрат со стороной в 100px будет иметь различную длину сторон в миллиметрах, если на одном и том же экране монитора установить сначала разрешение 1366х768 пикселей, а затем изменить на 800х600 пикселей, т.к. при этом браузер станет выделять под один пиксель больше места (зерен экрана);
- em – 1em равен высоте (размеру) текущего шрифта родительского элемента, например, если размер шрифта родительского элемента равен 15px, а размер шрифта текущего элемента указан как 2еm, то абсолютный размер шрифта текущего элемента составит 30px; недостатком данной единицы измерения является зависимость от размеров шрифтов всех его родительских элементов, что в итоге может привести к определенным трудностям в расчетах и неточностям в вычислениях;
- rem (от англ. root em) – 1rem равен высоте (размеру) шрифта корневого элемента, т.е. самого элемента 'html', от которого шрифт наследуется телом документа 'body'; данная единица измерения обладает преимуществами перед единицами em и процентами, т.к. рассчитывается на основе размера шрифта только у одного элемента 'body' и не зависит от размеров шрифтов других родительских элементов;
- % – определяет величину свойства текущего элемента в процентах от величины такого же свойства родительского элемента, например, если ширина родительского блока равна 100mm, а ширина текущего элемента задана как 150%, то его реальная ширина составит 150mm;
- ex – 1ex равен высоте символа 'x' в нижнем регистре текущего шрифта элемента, используется редко;
- ch – 1ch равен ширине символа '0' (ноль) текущего шрифта элемента, используется редко;

    <!DOCTYPE html>

    <!-- Зададим размер шрифта для документа -->
    <html style="font-size: 16px;">
    <head>
    	<meta charset="utf-8">
    	<title>Относительные единицы измерения</title>
    	<style>
    		.px{font-size: 10px;}
    		.em{font-size: 1.0em;}
    		.rem{font-size: 1.0rem;}
    		.percent{font-size: 100%;}
    		.ex{font-size: 2ex;}
    		.ch{font-size: 2ch;}
    	</style>
    </head>
    <body>
    	<!-- Переопределим размер шрифта для абзаца -->
    	<p style="font-size: 24px;">
    		<!-- Пиксели можно отнести и к абсолютным единицам шрифта -->
    		<span class="px">10 пикселей.</span><br>

    		<!-- Расчет ведется относительно шрифта элемента 'html' -->
    		<span class="rem">1.0rem или 16*1.0=16 пикселей.</span><br>

    		<!-- Расчет ведется относительно шрифта абзаца -->
    		<span class="em">1.0em или 24*1.0=24 пикселя.</span><br>
    		<span class="percent">100% равно 24 пикселям. Символы 'x', '0'.</span>

    		<!-- Расчет ведется относительно символов 'x', '0' шрифта абзаца -->
    		<br><span class="ex">2ex.</span><br>
    		<span class="ch">2ch.</span>
    	</p>
    </body>
    </html>

Пример 1.29. Применение относительных единиц px, em, rem, %, ex, ch

- vw (от англ. view width – ) – 1vw равен 1% от ширины области просмотра окна браузера; данная единица позволяет масштабировать размеры элемента на лету в зависимости от ширины области просмотра, что особенно удобно для экранов планшетов и смартфонов;
- vh (от англ. view height – ) – 1vh равен 1% от высоты области просмотра окна браузера; данная единица позволяет масштабировать размеры элемента на лету в зависимости от высоты области просмотра, что особенно удобно для экранов планшетов и смартфонов;
- vmin – 1vmin равен 1% от минимального значения ширины или высоты области просмотра, т.е., если в данный момент ширина области просмотра окна браузера меньше высоты области просмотра, то будет взят 1% от ширины; можно сказать, что 1vmin равен 1vh или 1vw в зависимости от того, что меньше в данный момент;
- vmax – 1vmax равен 1% от высоты максимального значения ширины или высоты области просмотра, т.е., если в данный момент ширина области просмотра окна браузера больше высоты области просмотра, то будет взят 1% от ширины; можно сказать, что 1vmin равен 1vh или 1vw в зависимости от того, какая величина больше в данный момент.

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Относительные единицы измерения</title>
    	<style>
    		.vw{font-size: 5vw;}
    		.vh{font-size: 5vh;}
    		.vmin{font-size: 5vmin;}
    		.vmax{font-size: 5vmax}
    	</style>
    </head>
    <body>
    	<span class="vw">5% в зависимости от ширины области просмотра.</span>
    	<br>
    	<span class="vh">5% в зависимости от высоты области просмотра.</span>
    	<br>
    	<span class="vmin">5% в зависимости от того, что меньше.</span>
    	<br>
    	<span class="vmax">5% в зависимости от того, что больше.</span>
    </body>
    </html>

Пример 1.30. Применение относительных единиц vw, vh, vmin, vmax

Теперь хотелось бы отметить, что значения единиц измерения не обязательно должны быть целыми. Если необходимо, то можно применять и десятичные дроби, а некоторые свойства, например, p {margin: -3px;}, даже позволяют применять отрицательные значения. Однако запись самих единиц измерения после значения обязательна, при чем пробела между числом и единицей измерения быть не должно.

1.7. Использование цветов в CSS. В CSS существует два основных способа указания цвета: по имени и по значению. Ранее в своих примерах мы уже не раз использовали названия таких цветов, как green, red, orange, blue и др., когда указывали значения соответствующих свойств шрифта или фона. Всю палитру использующихся на данный момент названий цветов можно посмотреть на официальном сайте W3C здесь. Однако зарезервированных имен цветов довольно мало, менее двухсот, поэтому на практике предпочтительнее использовать цифровые обозначения цветов. Сделать это можно использовав одну из возможных цветовых моделей: RGB, RGBA, HSL, HSLA.

Цветовая модель RGB (от англ. Red, Green, Blue) для получения цвета любого оттенка использует три десятичных числа от 0 до 255 или же три соответствующих шестнадцатеричных числа, которые описывают относительное содержание красного, зеленого и синего цветов. В случае десятичного представления чисел формат записи значения цвета имеет вид rgb(r,g,b), если используется шестнадцатеричное представление чисел, в котором разрешается использовать цифры от 0 до 9 и латинские буквы в любом регистре от A до F, то значение цвета записывают в формате #rrggbb. Например, правила p {color: rgb(165,42,42);} и p {color: #a52a2a;} задают для абзаца одно и тоже значение цвета, соответствующее названию цвета 'brown'. Следует отметить, что разрешается использовать также и проценты, в этом случае формат записи значения цвета имеет вид rgb(r%,g%,b%). Внимательно изучите пример 1.31, в котором показано использование цветовой модели RGB.

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Цвета RGB</title>
    	<style>
    		.black_rgb_hex{color: #000000;}
    		.red_rgb_hex{color: #ff0000;}
    		.green_rgb_hex{color: #00ff00;}
    		.blue_rgb_hex{color: #0000ff;}

    		.black_rgb_decimal{color: rgb(0,0,0);}
    		.red_rgb_decimal{color: rgb(255,0,0);}
    		.green_rgb_decimal{color: rgb(0,255,0);}
    		.blue_rgb_decimal{color: rgb(0,0,255);}

    		.black_rgb_percent{color: rgb(0%,0%,0%);}
    		.red_rgb_percent{color: rgb(100%,0%,0%);}
    		.green_rgb_percent{color: rgb(0%,100%,0%);}
    		.blue_rgb_percent{color: rgb(0%,0%,100%);}
    	</style>
    </head>
    <body>
    	<span class="black_rgb_hex">Black #000000.</span>
    	<span class="red_rgb_hex">Red #ff0000.</span>
    	<span class="green_rgb_hex">Green #0000ff.</span>
    	<span class="blue_rgb_hex">Blue #00ff00.</span>
    	<br><br>
    	<span class="black_rgb_decimal">Black rgb(0,0,0).</span>
    	<span class="red_rgb_decimal">Red rgb(255,0,0).</span>
    	<span class="green_rgb_decimal">Green rgb(0,255,0).</span>
    	<span class="blue_rgb_decimal">Blue rgb(0,0,255).</span>
    	<br><br>
    	<span class="black_rgb_percent">Black rgb(0%,0%,0%).</span>
    	<span class="red_rgb_percent">Red rgb(100%,0%,0%).</span>
    	<span class="green_rgb_percent">Green rgb(0%,100%,0%).</span>
    	<span class="blue_rgb_percent">Blue rgb(0%,0%,100%).</span>
    	<br><br>
    </body>
    </html>

Пример 1.31. Цветовая модель RGB

Цветовая модель RGBA (от англ. Red, Green, Blue, Alpha) кроме чисел, которые определяют содержание трех цветов, использует еще одно число, которое описывает альфа-канал (в графическом дизайне данный термин означает прозрачность цвета) и может изменяться в пределах от 0 (полностью прозрачный цвет) до 1 (полностью непрозрачный цвет). При этом формат записи значения цвета имеет вид rgba(r,g,b,a). Использование цветовой модели RGBA с разными значениями альфа-канала показано в примере 1.32.

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Цвета RGBA</title>
    	<style>
    		.black_rgba{color: rgba(0,0,0,0.8);}
    		.red_rgba{color: rgba(255,0,0,0.8);}
    		.green_rgba{color: rgba(0,255,0,0.8);}
    		.blue_rgba{color: rgba(0,0,255,0.8);}

    		.black_rgba_percent{color: rgba(0%,0%,0%,0.4);}
    		.red_rgba_percent{color: rgba(100%,0%,0%,0.4);}
    		.green_rgba_percent{color: rgba(0%,100%,0%,0.4);}
    		.blue_rgba_percent{color: rgba(0%,0%,100%,0.4);}
    	</style>
    </head>
    <body>
    	<span class="black_rgba">Black rgba(0,0,0,0.8).</span>
    	<span class="red_rgba">Red rgba(255,0,0,0.8).</span><br>
    	<span class="green_rgba">Green rgba(0,255,0,0.8).</span>
    	<span class="blue_rgba">Blue rgba(0,0,255,0.8).</span>
    	<br><br>
    	<span class="black_rgba_percent">Black rgba(0%,0%,0%,0.4).</span>
    	<span class="red_rgba_percent">Red rgba(100%,0%,0%,0.4).</span><br>
    	<span class="green_rgba_percent">Green rgba(0%,100%,0%,0.4).</span>
    	<span class="blue_rgba_percent">Blue rgba(0%,0%,100%,0.4).</span>
    	<br><br>
    </body>
    </html>

Пример 1.32. Цветовая модель RGBA

Цветовая модель HSL (от англ. Hue, Saturation, Lightness) описывает цвета при помощи трех чисел, которые представляют, соответственно, оттенок, насыщенность и светлоту (не яркость). При этом значение цвета записывается в формате hsl(h,s%,l%). Оттенок принимает значения от 0 до 359, которые соответствует градусам на цветовом круге, где 0° градусов соответствуют красному цвету, 120° – зеленому и 240° – синему цвету. Если число, задающее оттенок, больше, чем 359, то браузер будет автоматически отнимать от него 360. Так что, если задать значение оттенка, например, 480, то оно будет соответствовать зеленому оттенку. Насыщенность измеряется в процентах от 0% до 100% и определяет интенсивность цвета. Значение 0% обозначает отсутствие цвета и оттенок серого, а 100% – максимальное значение насыщенности. Светлота также, как и насыщенность, указывается в процентах от 0% до 100% и определяет степень близости цвета к белому. Значение 0% соответствует черному цвету, а 100% – белому. Примеры цветов и их значений данной модели можно посмотреть на официальном сайте W3C здесь. Также внимательно изучите пример 1.33, в котором показано использование цветовой модели HSL.

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Цвета HSL, HSLA</title>
    	<style>
    		.black_hsl{color: hsl(0,0%,0%);}
    		.red_hsl{color: hsl(0,100%,50%);}
    		.green_hsl{color: hsl(120,100%,50%);}
    		.blue_hsl{color: hsl(240,100%,50%);}

    		.black_hsla{color: hsla(0,0%,0%,0.5);}
    		.red_hsla{color: hsla(0,100%,50%,0.5);}
    		.green_hsla{color: hsla(120,100%,50%,0.5);}
    		.blue_hsla{color: hsla(240,100%,50%,0.5);}
    	</style>
    </head>
    <body>
    	<span class="black_hsl">Black hsl(0,0%,0%).</span>
    	<span class="red_hsl">Red hsl(0,100%,50%).</span><br>
    	<span class="green_hsl">Green hsl(120,100%,50%).</span>
    	<span class="blue_hsl">Blue hsl(240,100%,50%).</span>
    	<br><br>
    	<span class="black_hsla">Black hsla(0,0%,0%,0.5).</span>
    	<span class="red_hsla">Red hsla(0,100%,50%,0.5).</span><br>
    	<span class="green_hsla">Green hsla(120,100%,50%,0.5).</span>
    	<span class="blue_hsla">Blue hsla(240,100%,50%,0.5).</span>
    	<br><br>
    </body>
    </html>

Пример 1.33. Цветовая модель HSL

Цветовая модель HSLA (от англ. Hue, Saturation, Lightness, Alpha) помимо трех чисел, которые представляют, соответственно, оттенок, насыщенность и светлоту, включает в себя еще четвертое число, которое описывает альфа-канал и может изменяться в пределах от 0 (полностью прозрачный цвет) до 1 (полностью непрозрачный цвет). При этом формат записи значения цвета имеет вид hsla(h,s%,l%,a). Использование цветовой модели HSLA показано в примере 1.33.

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

Контрольные вопросы и задания

1. Дайте определение каскадным таблицам стилей.
2. В чем заключаются преимущества их использования?
3. Опишите синтаксис записи правил CSS.
4. Что такое таблица стилей CSS?
5. Какие бывают виды таблиц CSS? В чем их отличие?
6. Перечислите способы подключения стилей CSS к документу.
7. Для чего нужны селекторы правил CSS? Перечислите их.
8. Перечислите шаблоны селектора атрибутов.
9. Перечислите псевдоклассы и псевдоэлементы соответствующих селектров.
10. Что означает понятие наследования?
11. Дайте определение каскадированию стилей.
12. Как происходит расчет специфичности селекторов?
13. Перечислите и опишите все виды стилей в порядке возрастания их
    приоритетов при условии равенства специфичности селекторов.
14. Перечислите абсолютные единицы измерения величин CSS.
15. Перечислите относительные единицы измерения величин CSS.
16. В чем заключается основное отличие относительных единиц от абсолютных?
17. Опишите синтаксис цветовых моделей RGB и RGBA.
18. Опишите синтаксис цветовых моделей HSL и HSLA.

Словарь новых английских слов

property ['prɔpəti] – свойство.
import [ˈɪmpɔːt] – импорт, импортировать.
selector [si'lektə] – искатель, отборщик.
visited [ˈvɪzɪtɪd] – посещенный.
active ['æktiv] – активный, действующий.
target [ˈtɑːɡɪt] – цель, мишень.
enabled [ɪˈneɪbl̩d] – разрешенный.
disabled [dɪsˈeɪbld] – заблокированный.
checked [tʃɛkt] – выбранный, проверенный.
empty [ˈɛm(p)ti] – пустой.
root [ruːt] – корень, основание.
odd [ɒd] – нечетный, непарный.
even [ˈiːvn] – четный.
child [tʃʌɪld] – дочерний элемент.
first [fəːst] – первый.
last [lɑːst] – последний.
only [ˈəʊnli] – только, единственный.
type [taɪp] – тип.
not [nɒt] – не, ни.

letter [ˈletər] – буква, литера.
line [laɪn] – линия, строка.
before [bɪˈfɔː] – впереди, перед.
after [ˈɑːftə] – потом, после, позади.
content [kənˈtɛnt] – содержимое.
hover [ˈhɒvə] – нависать.
strong [strɔːŋ] – сильный, крепкий.
important [ɪmˈpɔːt(ə)nt] – важный.
centimeter ['senti,mi:tə] – сантиметр.
inch [int∫] – дюйм (2,54 см).
point [pɔint] – пункт, точка.
pica [ˈpʌɪkə] – шрифт 'пика'.
percent [pəˈsent] – процент.
font [fɒnt] – комплект шрифта.
view [vjuː] – вид, смотреть.
hue [hjuː] – цвет, оттенок, тон.
saturation [satʃəˈreɪʃ(ə)n] – насыщенность.
lightness [ˈlʌɪtnəs] – освещенность, светлота.

belarusweb.net © Петр Романовский, Минск, 2016.