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

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

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

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

Кстати, чтобы иметь возможность не на словах, а на реальном примере убедиться в возможностях 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-элементов.

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

Очень важной особенностью перечисленных видов селекторов является возможность их комбинирования между собой практически в любых вариациях. Приведем в качестве примеров несколько комбинаций селекторов разных видов: 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 (см. пример 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. Сравнение специфичности селекторов

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

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

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

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

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

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

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

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

Абсолютные единицы используются довольно редко, в основном для стилей, которые используются при выводе текста 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):

<!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

<!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, которые соответствует градусам на цветовом круге, где градусов соответствуют красному цвету, 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.