1

Введение в HTML5
Что такое HTML
Последнее обновление: 08.04.2016

HTML (HyperText Markup Language) представляет язык разметки гипертекста, используемый преимущественно для создания
документов в сети интернет. HTML начал свой путь в начале 90-х годов как примитивный язык для создания веб-страниц, и в
настоящий момент уже трудно представить себе интернет без HTML. Подавляющее большинство сайтов так или иначе используют
HTML.

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

Что именно привнес HTML5?

 HTML5 определяет новый алгоритм парсинга для создания структуры DOM

 добавление новых элементов и тегов, как например, элементы video, audio и ряд других
 переопределение правил и семантики уже существовавших элементов HTML

Фактически с добавлением новых функций HTML5 стал не просто новой версией языка разметки для создания веб-страниц, но и
фактически платформой для создания приложений, а область его использования вышла далеко за пределы веб-среды интернет:
HTML5 применяется также для создания мобильных приложений под Android, iOS, Windows Mobile и даже для создания десктопных
приложений для обычных компьютеров (в частности, в ОС Windows 8/8.1/10).

В итоге, как правило, HTML 5 применяется преимущественно в двух значениях:

 HTML 5 как обновленный язык разметки гипертекста, некоторое развитие предыдущей версии HTML 4
 HTML 5 как мощная платформа для создания веб-приложений, которая включает не только непосредственно язык разметки
гипертекста, обновленный HTML, но и язык программирования JavaScript и каскадные таблицы стилей CSS 3.
 2

Кто отвечает за развитие HTML5? Этим занимается World Wide Web Consortium (сокращенно W3C - Консорциум Всемирной
Паутины) - независимая международная организация, которая определяет стандарт HTML5 в виде спецификаций. Текущую полную
спецификацию на английском языке можно посмотреть по адресу [Link] И надо отметить, что организация
продолжает работать над HTML5, выпуская обновления к спецификации.

Поддержка браузерами

Надо отметить, что между спецификацией HTML5 и использованием этой технологии в веб-браузерах всегда был разрыв.
Большинство браузеров стало внедрять стандарты HTML5 еще до их официальной публикации. И к текущему моменту большинство
последних версий браузеров поддерживают большинство функциональностей HTML5 (Google Chrome, Firefox, Opera, Internet Explorer
11, Microsoft Edge). В то же время многие старые браузеры, как например, Internet Explorer 8 и более младшие версии, не
поддерживают стандарты, а IE 9, 10 поддерживает лишь частично.

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

Для проверки поддержки HTML5 конкретным браузером можно использовать специальный сервис [Link]

Необходимые инструменты

Что потребуется для работы с HTML5? В первую очередь, текстовый редактор, чтобы набирать текст веб-страниц на html. На
данный момент наиболее популярным и продвинутым текстовым редактором является Notepad++, который можно найти по
адресу [Link] К его преимуществам можно отнести бесплатность, подсветка тегов html. В дальнейшем я буду
ориентироваться именно на этот текстовый редактор.

Также стоит упомянуть кроссплатформенный текстовый редактор Visual Studio Code. Данный редактор обладает несколько
большими возможностями, чем Notepad++, и кроме того, может работать не только в ОС Windows, но и в MacOS и в операционных
системах на основе Linux.

И также потребуется веб-браузер для запуска и проверки написанных веб-страничек. В качестве веб-браузера можно взять
последнюю версию любого из распространенных браузеров - Google Chrome, Mozilla Firefox, Microsoft Edge, Opera.
 3

Элементы и атрибуты HTML5

Последнее обновление: 08.04.2016

Прежде чем переходить непосредственно к созданию своих веб-страниц на HTML5, рассмотрим основные строительные блоки,
кирпичики, из которых состоит веб-страница.

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

1 <div>Текст элемента div</div>

Здесь определен элемент div, который имеет открывающий тег <div> и закрывающий тег </div>. Между этими тегами находится
содержимое элемента div. В данном случае в качестве содержимого выступает простой текст "Текст элемента div".

Элементы также могут состоять из одного тега, например, элемент <br />, функция которого - перенос строки.

1 <div>Текст <br /> элемента div</div>

Такие элементы еще называют пустыми элементами (void elements). Хотя я использовал закрывающий слеш, но его наличие
согласно спецификации необязательно, и равнозначно использованию тега без слеша: <br>

Каждый элемент внутри открывающего тега может иметь атрибуты. Например:

1 <div style="color:red;">Кнопка</div>
2 <input type="button" value="Нажать">
 4

Здесь определено два элемента: div и input. Элемент div имеет атрибут style. После знака равно в кавычках пишется значение
атрибута: style="color:red;". В данном случае значение "color:red;" указывает, что цвет текста будет красным.

Второй элемент - элемент input, состоящий из одного тега, имеет два атрибута: type (указывает на тип элемента - кнопка)
и value (определяет текст кнопки)

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

Кроме обычных атрибутов существуют еще булевые или логические атрибуты (boolean attributes). Подобные атрибуты могут не
иметь значения. Например, у кнопки можно задать атрибут disabled:

1 <input type="button" value="Нажать" disabled>

Атрибут disabled указывает, что данный элемент отключен.

Глобальные атрибуты

В HTML5 есть набор глобальных атрибутов, которые применимы к любому элементу HTML5:

 accesskey: определяет клавишу для быстрого доступа к элементу

 class: задает класс CSS, который будет применяться к элементу
 contenteditable: определяет, можно ли редактировать содержимое элемента
 contextmenu: определяет контекстное меню для элемента, которое отображается при нажатии на элемент правой кнопкой
мыши
 dir: устанавливает направление текста в элементе
 draggable: определяет, можно ли перетаскивать элемент
 dropzone: определяет, можно ли копировать переносимые данные при переносе на элемент
 hidden: скрывает элемент
 id: уникальный идентификатор элемента. На веб-странице элементы не должны иметь повторяющихся идентификаторов
 lang: определяет язык элемента
 5

 spellcheck: указывает, будет ли для данного элемента использоваться проверка правописания

 style: задает стиль элемента
 tabindex: определяет порядок, в котором по элементам можно переключаться с помощью клавиши TAB
 title: устанавливает дополнительное описание для элемента
 translate: определяет, должно ли переводиться содержимое элемента

Но, как правило, из всего этого списка наиболее часто используются три: class, id и style.

Пользовательские атрибуты

В отличие от предыдущей версии языка разметки в HTML5 были добавлены пользовательские атрибуты (custom attributes). Теперь
разработчик или создатель веб-страницы сам может определить любой атрибут, предваряя его префиксом data-. Например:

1 <input type="button" value="Нажать" data-color="red" >

Здесь определен атрибут data-color, который имеет значение "red". Хотя для этого элемента, ни в целом в html не существует
подобного атрибута. Мы его определяем сами и устанавливаем у него любое значение.

Одинарные или двойные кавычки

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

1 <input type='button' value='Нажать'>

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

1 <input type="button" value='Кнопка "Привет мир"'>

Создание документа HTML5

 6

Последнее обновление: 08.04.2016

Элементы являются кирпичиками, из которых складывается документ html5. Для создания документа нам надо создать простой
текстовый файл, а в качестве расширения файла указать *.html

Создадим текстовый файл, назовем его index и изменим его расширение на .html.

Затем откроем этот файл в любом текстовом редакторе, например, в Notepad++. Добавим в файл следующий текст:

1 <!DOCTYPE html>
2 <html>
3
4 </html>

Для создания документа HTML5 нам нужны в первую очередь два элемента: DOCTYPE и html. Элемент doctype или Document Type
Declaration сообщает веб-браузеру тип документа. <!DOCTYPE html> указывает, что данный документ является документом html и
что используется html5, а не html4 или какая-то другая версия языка разметки.

А элемент html между своим открывающим и закрывающим тегами содержит все содержимое документа.
 7

Внутри элемента html мы можем разместить два других элемента: head и body. Элемент head содержит метаданные веб-
страницы - заголовок веб-страницы, тип кодировки и т.д., а также ссылки на внешние ресурсы - стили, скрипты, если они
использутся. Элемент body собственно определяет содержимое html-страницы.

Теперь изменим содержимое файла [Link] следующим образом:

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Документ HTML5</title>
6 </head>
7 <body>
8 <div>Содержание документа HTML5</div>
9 </body>
10 </html>

В элементе head определено два элемента:

 элемент title представляет заголовок страницы

 элемент meta определяет метаинформацию страницы. Для корректного отображения символов предпочтительно указывать
кодировку. В данном случае с помощью атрибута charset="utf-8" указываем кодировку utf-8.

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

Поскольку мы выбрали в качестве кодировки utf-8, то браузер будет отображать веб-страницу именно в этой кодировке. Однако
необходимо чтобы сам текст документа также соответствовал выбранной кодировке utf-8. Как правило, в различных текстовых
редакторах есть соотвествующие настройки для установки кодировки. Например, в Notepad++ надо зайти в меню Кодировки и
в открывшемся списке выбрать пункт Преобразовать в UTF-8 без BOM:
 8

После этого в статусной строке будет можно будет увидеть UTF-8 w/o BOM, что будет указывать, что нужная
кодировка установлена.

Сохраним и откроем файл [Link] в браузере:

 9

Таким образом, мы создали первый документ HTML5. Так как мы указали в элементе title заголовок "Документ HTML5", то именно
такое название будет иметь вкладка браузера.

Так как указана кодировка utf-8, то веб-браузер будет корректно отображать кириллические символы.

А весь текст, определенный внутри элемента body мы увидим в основном поле браузера.

Разновидности синтаксиса HTML5

Последнее обновление: 18.11.2019

При создании документа HTML5 мы можем использовать два различных стиля: HTML и XML.

Стиль HTML предполагает следующие моменты:

 Начальные открывающие теги могут отсутствовать у элементов

 Конечные закрывающие теги могут отсутствовать у элементов
 Только пустые элементы (void elements) (например, br, img, link) могут закрываться с помощью слеша />
 10

 Регистр названий тегов и атрибутов не имеет значения

 Можно не заключать значения атрибутов в кавычки
 Некоторые атрибуты могут не иметь значений (checked и disabled)
 Специальные символы не экранируются
 Документ должен иметь элемент DOCTYPE

Это так называемый "разрешительный" стиль, основанный на послаблениях при создании документа.

Документ HTML5 также может быть описан с помощью синтаксиса XML. Такой стиль еще называют "XHTML". Он используется, если
заголовок content-type имеет значение application/xml+xhtml. Для данного стиля характерны следующие правила:

 Каждый элемент должен иметь начальный открывающий тег

 Непустые элементы (non-void elements) с начальным открывающим тегом также должны иметь конечный закрывающий тег
 Любой элемент может закрываться с помощью слеша />
 Названия тегов и атрибутов регистрозависимы, как правило, используются в нижнем регистре
 Значения атрибутов должны быть заключены в кавычки
 Атрибуты без значений не допускаются (checked="checked" вместо просто checked)
 Специальные символы должны быть экранированы

Сравним два подхода. Подход HTML5:

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset=utf-8>
5 <title>Заголовок</title>
6 </head>
7 <body>
8 <p>Содержание документа HTML5<br>
9 <input type=button value=Нажать >
10 </body>
 11

11 </html>

И аналогичный пример с использованием подхода XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

1
"[Link]
2
<html xmlns="[Link]
3
<head>
4
<meta charset="utf-8">
5
<title>Заголовок</title>
6
</head>
7
<body>
8
<p>Содержание документа HTML5<br />
9
<input type="button" value="Нажать" /></p>
10
</body>
11
</html>

При использовании синтаксиса XHTML нам также надо указать пространство имен для данного документа: <html
xmlns="[Link]

Выбор конкретного стиля при написании html-документов зависит от предпочтений программиста или веб-дизайнера. Нередко
используется смешенный стиль, который заимствует правила из первого, и из второго стилей.

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

Также заключение значений атрибутов в кавычки поможет избежать потенциальных ошибок. Так, атрибут class может принимать
несколько значений подряд. Например: <div class="navmenu bigdesctop">. Но если мы опустим кавычки, то в качестве значения
будет использоваться "navmenu", а "bigdesctop" браузер будет пытаться интерпретировать как отдельный атрибут.

Если же возникают затруднения, насколько правильной является создаваемая разметка html, то ее можно проверить с помощью
валидатора по адресу [Link]
 12

Мы можем вставить в текстовое поле код веб-страницы, и после нажатия на кнопку "Check" внизу валидатор либо отобразит нам
ошибки красным цветом, либо зеленым цветом уведомит, что ошибок нет, и код прошел валидацию.
 13

Элементы в HTML5
Последнее обновление: 08.04.2016

Основная часть документа html, фактически все, что мы увидим в своем браузере при загрузке веб-страницы, располагается между
тегами <body> и </body>. Здесь размещаются большинство элементов html.

Хотя большинство элементов в HTML5 остаются теми же, что и в ранних версиях, но несколько изменился способ их использования.
Рассмотрим базовые элементы HTML5, их предназначение и использование.

Элемент head и метаданные веб-страницы

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

Заголовок

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

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Элемент title</title>
6 </head>
7 <body>
8 <p>Содержание документа HTML5</p>
9 </body>
10 </html>
 14

Элемент base

Элемент base позволяет указать базовый адрес, относительно которого устанавливаются другие адреса, используемые в
документе:

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <base href="content/">
5 <meta charset="utf-8">
6 <title>Элемент base</title>
7 </head>
8 <body>
9 <a href="[Link]">Перейти</a>
10 </body>
11 </html>
 15

Хотя для ссылки в качестве адреса указана страница [Link], но фактически ее адресом будет content/[Link]. То есть
в одной папке с текущей страницей должна быть подпапка content, в которой должен находится файл [Link]

Можно также указывать полный адрес:

1 <base href="[Link]

В это случае ссылка будет вести по адресу [Link]

Элемент meta

Элемент meta определяет метаданные документа.

Чтобы документ корректно отображал текст, необходимо задать кодировку с помощью атрибута charset. Рекомендуемой
кодировкой является utf-8:

1 <meta charset="utf-8">

При этом надо помнить, что указанная элементе meta кодировка должна совпадать с кодировкой самого документа. Как правило,
текстовый редактор позволяет указать кодировку документа. Если мы хотим ориентироваться на utf-8, то в настройках текстового
редактора надо выбирать UTF-8 w/o BOM. Например, выбор кодировки в Notepad++:
 16

Элемент meta также имеет два атрибута: name и content. Атрибут name содержит имя метаданных, а content - их значение.

По умолчанию в HTML определены пять типов метаданных:

 application name: название веб-приложения, частью которого является данный документ

 author: автор документа
 description: краткое описание документа
 generator: название программы, которая сгенерировала данный документ
 keywords: ключевые слова документа
 17

Надо отметить, что наиболее актуальным является тип description. Его значение поисковики часто используют в качестве
аннотации к документу в поисковой выдаче.

Добавим в документ ряд элементов meta:

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <base href="content/">
6 <title>Элемент title</title>
7 <meta name="description" content="Первый документ HTML5">
8 <meta name="author" content="Bill Gates">
9 </head>
10 <body>
11 <a href="[Link]">Содержание документа HTML5</a>
12 </body>
13 </html>

Элементы группировки
Последнее обновление: 08.04.2016

Ряд элементов предназначен для группировки контента на веб-странице.

Элемент div

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

1 <!DOCTYPE html>
 18

2
<html>
3
<head>
4
<meta charset="utf-8">
5
<title>Документ HTML5</title>
6
</head>
7
<body>
8
<div>Заголовок документа HTML5</div>
9
<div>Текст документа HTML5</div>
10
</body>
11
</html>

Параграфы
 19

Параграфы создаются с помощью тегов <p> и </p>, которые заключают некоторое содержимое. Каждый новый параграф
располагается на новой строке. Применим параграфы:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Документ HTML5</title>

6 </head>

7 <body>

8 <div>Заголовок документа HTML5</div>

9 <div>

10 <p>Первый параграф</p>

11 <p>Второй параграф</p>

12 </div>

13 </body>

14 </html>
 20

Если в рамках одного параграфа нам надо перенести текст на другую строку, то мы можем воспользоваться элементом <br>:

1 <p>Первая строка.<br/>Вторая строка.</p>

Элемент pre

Элемент pre выводит предварительно отформатированный текст так, как он определен:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Документ HTML5</title>

6 </head>

7 <body>
 21

8 <pre>

9 Первая строка

10 Вторая строка

11 Третья строка

12 </pre>

13 </body>

14 </html>

Элемент span

Элемент span обтекает некоторый текст по всей его длине и служит преимущественно для стилизации заключенного в него
текстового содержимого. В отличие от блоков div или параграфов span не переносит содержимое на следующую строку:

1 <!DOCTYPE html>

2 <html>
 22

3 <head>

4 <meta charset="utf-8">

5 <title>Документ HTML5</title>

6 </head>

7 <body>

8 <div>Заголовок документа HTML5</div>

9 <div>

10 <p><span style="color:red;">Первый</span> параграф</p>

11 <p><span>Второй</span> параграф</p>

12 </div>

13 </body>

14 </html>
 23

При этом стоит отметить, что сам по себе span ничего не делает. Так, во втором параграфе span никак не повлиял на внутренне
текстовое содержимое. А в первом параграфе элемент span содержит атрибут стиля: style="color:red;", который устанавливает
для вложенного текста красный цвет фона.

При этом стоит отметить, что элементы div и p являются блочными, элемент div может содержать любые другие элементы, а
элемент p - только строчные элементы. В отличие от них элемент span является строчным, то есть как бы встраивает свое
содержимое во внешний контейнер - тот же div или параграф. Но при этом не следует помещать блочные элементы в строчный
элемент span.

Заголовки
Последнее обновление: 08.04.2016

Элементы <h1>, <h2>, <h3>, <h4>, <h5> и <h6> служат для создания заголовков различного уровня:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Заголовки в HTML5</title>

6 </head>

7 <body>

8 <h1>Заголовок первого уровня</h1>

9 <h2>Заголовок второго уровня</h2>

10 <h3>Заголовок третьего уровня</h3>

11 <h4>Заголовок четвертого уровня</h4>

 24

12 <h5>Заголовок пятого уровня</h5>

13 <h6>Заголовок шестого уровня</h6>

14 </body>

15 </html>

Заголовки выделяют шрифт жирным и по умолчанию имеют некоторый размер: от самого крупного <h1> до самого мелкого <h6>.

При определении заголовков следует учитывать, что на странице должен быть только один заголовок первого уровня, то есть <h1>.
Он выполняет роль основного заголовка веб-страницы.
 25

Форматирование текста
Последнее обновление: 08.04.2016

Ряд элементов html предназначены для форматирования текстового содержимого, например, для выделения жирным или курсивом
и т.д. Рассмотрим эти элементы:

 <b>: выделяет текст жирным

 <del>: зачеркивает текст
 <i>: выделяет текст курсивом
 <em>: выделяет текст курсивом, в отличие от тега <i> носит логическое значение, придает выделяемому тексту оттенок
важности
 <s>: зачеркивает текст
 <small>: делает текст чуть меньше размером, чем окружающий
 <strong>: выделяет текст жирным. В отличие от тега <b> предназначен для логического выделения, чтобы показать
важность текста. А <b> не носит характера логического выделения, выполняет функции только форматирования
 <sub>: помещает текст под строкой
 <sup>: помещает текст над строкой
 <u>: подчеркивает текст
 <ins>: определяет вставленный (или добавленный) текст
 <mark>: выделяет текст цветом, придавая ему оттенок важности

Применим все эти элементы:

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Форматирование текста в HTML5</title>
6 </head>
7 <body>
 26

<p>Форматирование в <mark>HTML5</mark></p>
8
<p>Это <b>выделенный</b> текст</p>
9
<p>Это <strong>важный</strong> текст</p>
10
<p>Это <del>зачеркнутый</del> текст</p>
11
<p>Это <s>недействительный</s> текст</p>
12
<p>Это <em>важный</em> текст</p>
13
<p>Это текст <i>курсивом</i> </p>
14
<p>Это <ins>добавленный</ins> текст</p>
15
<p>Это <u>подчеркнутый</u> текст</p>
16
<p>X_i = Y^{<small>2</small>} +
17
Z^{<small>2</small>}</p>
18
</body>
19
</html>
 27

Работа с изображениями
Последнее обновление: 08.04.2016

Для вывода изображений в HTML используется элемент img. Этот элемент представляет нам два важных атрибута:
 28

 src: путь к изображению. Это может быть относительный или абсолютный путь в файловой системе или адрес в интернете
 alt: текстовое описание изображения. Если браузер по каким-то причинам не может отобразить изображение (например,
если у атрибута src некорректно задан путь), то браузер показывает вместо самой картинки данное текстовое описание.

Атрибут alt еще важен тем, что поисковые системы по текстовому описанию могут индексировать изображение.

Например, положим в ту же папку, где у нас лежит файл [Link], какой-нибудь файл изображения. И затем отобразим его на
веб-странице:

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Тег img в HTML5</title>
6 </head>
7 <body>
8 <img src="[Link]" alt="Зимняя равнина" />
9 </body>
10 </html>
 29

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

Используя стилевые особенности, в частности, отступы и обтекание, можно комбинировать изображения с текстом. Например:

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Тег img в HTML5</title>
6 </head>
7 <body>
8 <div>
9 <img src="[Link]" alt="Зимняя равнина" style="float:left; margin-
 30

right:10px;" />
10 <h1>Lorem Ipsum</h1>
11 <b>Lorem Ipsum</b> is simply dummy text of the printing and typesetting
12 industry.
13 Lorem Ipsum has been the industry....
14 </div>
15 </body>
</html>
 31

Списки
Последнее обновление: 08.04.2016

Для создания списков в HTML5 применяются элементы <ol> (нумерованный список) и <ul> (ненумерованный список):

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Списки в HTML5</title>
6 </head>
7 <body>
8 <h2>Нумерованный список</h2>
9 <ol>
10 <li>iPhone 6S</li>
11 <li>Galaxy S7</li>
12 <li>Nexus 5X</li>
13 <li>Lumia 950</li>
14 </ol>
15 <h2>Ненумерованный список</h2>
16 <ul>
17 <li>iPhone 6S</li>
18 <li>Galaxy S7</li>
19 <li>Nexus 5X</li>
20 <li>Lumia 950</li>
21 </ul>
22 </body>
23 </html>
 32

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

При необходимости мы можем настроить нумерацию или отражаемый рядом с элементом символ с помощью стиля list-style-type.
Данный стиль может принимать множество различных значений. Отметим только основные и часто используемые. Для
нумерованных списков стиль list-style-type может принимать следующие значения:

 decimal: десятичные числа, отсчет идет от 1

 decimal-leading-zero: десятичные числа, которые предваряются нулем, например, 01, 02, 03, … 98, 99
 lower-roman: строчные римские цифры, например, i, ii, iii, iv, v
 upper-roman: заглавные римские цифры, например, I, II, III, IV, V…
 33

 lower-alpha: строчные римские буквы, например, a, b, c..., z

 upper-alpha: заглавные римские буквы, например, A, B, C, … Z

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

1 <h2>list-style-type = decimal</h2>
2 <ol style="list-style-type:decimal;" start="3">
3 <li>iPhone 6S</li>
4 <li>Galaxy S7</li>
5 <li>Nexus 5X</li>
6 <li>Lumia 950</li>
7 </ol>
8 <h2>list-style-type = upper-roman</h2>
9 <ul style="list-style-type:upper-roman;">
10 <li>iPhone 6S Plus</li>
11 <li>Galaxy S7 Edge</li>
12 <li>Nexus 6P</li>
13 <li>Lumia 950 XL</li>
14 </ul>
15 <h2>list-style-type = lower-alpha</h2>
16 <ul style="list-style-type:lower-alpha;">
17 <li>LG G 5</li>
18 <li>Huawei P8</li>
19 <li>Asus ZenFone 2</li>
20 </ul>
 34

Для ненумерованного списка атрибут list-style-type может принимать следующие значения:

 disc: черный диск

 circle: пустой кружочек
 square: черный квадратик
 35

Например:

1 <h2>list-style-type = disc</h2>
2 <ul style="list-style-type:disc;">
3 <li>iPhone 6S</li>
4 <li>Galaxy S7</li>
5 <li>Nexus 5X</li>
6 <li>Lumia 950</li>
7 </ul>
8 <h2>list-style-type = circle</h2>
9 <ul style="list-style-type:circle;">
10 <li>iPhone 6S Plus</li>
11 <li>Galaxy S7 Edge</li>
12 <li>Nexus 6P</li>
13 <li>Lumia 950 XL</li>
14 </ul>
15 <h2>list-style-type = square</h2>
16 <ul style="list-style-type:square;">
17 <li>LG G 5</li>
18 <li>Huawei P8</li>
19 <li>Asus ZenFone 2</li>
20 </ul>
 36

Еще одну интересную возможность по настройке списков предоставляет стиль list-style-image. Он задает изображение, которое
будет отображаться рядом с элементом списка:

1 <ul style="list-style-image:url(phone_touch.png);">
2 <li>iPhone 6S</li>
 37

3 <li>Galaxy S7</li>
4 <li>Nexus 5X</li>
5 <li>Lumia 950</li>
6 </ul>

Стиль list-style-image в качестве значения принимает url(phone_touch.png), где "phone_touch.png" - это название файла
изображения. То есть в данном случае предполагается, что в одной папке с веб-страницей [Link] у меня находится файл
изображения phone_touch.png.

Горизонтальный список

Одним из распространенных способов стилизации списков представляет создание горизонтального списка. Для этого для всех
элементов списка надо установить стиль display:inline:

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Горизонтальный список в HTML5</title>
 38

6 <style>
7 ul#menu li {
8 display:inline;
9 }
10 </style>
11 </head>
12 <body>
13 <ul id="menu">
14 <li>Главная</li>
15 <li>Блог</li>
16 <li>Форум</li>
17 <li>О сайте</li>
18 </ul>
19 </body>
20 </html>

Элемент details
Последнее обновление: 08.04.2016

Элемент details позволяет создавать раскрываемый блок, который по умолчанию скрыт.

Данный элемент содержит элемент summary, который представляет заголовок для блока, и этот заголовок отображается в
скрытом режиме. Например:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">
 39

5 <title>Элемент details в HTML5</title>

6 </head>

7 <body>

8 <details>

9 <summary>Флагманы 2015</summary>

10 <ul>

11 <li>iPhone 6S Plus</li>

12 <li>Nexus 6P</li>

13 <li>Galaxy S6 Edge</li>

14 <li>Lumia 950 XL</li>

15 </ul>

16 </details>

17 </body>

18 </html>

По умолчанию мы видим только заголовок summary:

 40

Нажав на стрелку или заголовок, мы можем раскрыть блок:

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

Список определений
 41

Последнее обновление: 08.04.2016

Список определений (definition list) представляет такой список, который содержит термин и определение к этому термину. И таких
пар термин-определение в списке может быть множество. Для создания списка определений применяются теги <dl> и </dl>.
Внутрь этих тегов помещаются элементы списка.

Каждый элемент списка состоит из термина и определения. Термин помещается в теги <dt> и </dt> (dt - сокращение от "definition
term"), а определение - в теги <dd> и </dd> (dd - сокращение от "definition description")

Рассмотрим простейший спсок определений:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Списки в HTML5</title>

6 </head>

7 <body>

8 <dl>

9 <dt>Онтология</dt>

10 <dd>Раздел философии, изучающий фундаментальные принципы бытия</dd>

11 <dt>Гносеология</dt>

12 <dd>Философская дисциплина, занимающаяся исследованиями, критикой и теориями

познания</dd>
13
<dt>Производственные отношения</dt>
 42

<dd>Совокупность отношений между людьми, складывающихся в процессе общественного

14
производства,
15
обмена, распределения материальных благ и услуг.</dd>
16
</dl>
17
</body>
18
</html>

Таблицы
Последнее обновление: 08.04.2016
 43

Для создания таблиц в html используется элемент table. Каждая таблица между тегами <table> и </table> содержит строки,
который представлены элементом tr. А каждая строка между тегами <tr> и </tr> содержит ячейки в виде элементов td.

Создадим простейшую таблицу:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Таблицы в HTML5</title>

6 </head>

7 <body>

8 <table>

9 <tr>

10 <td>Модель</td> <td>Компания</td> <td>Цена</td>

11 </tr>

12 <tr>

13 <td>Nexus 6P</td> <td>Huawei</td> <td>49000</td>

14 </tr>

15 <tr>

16 <td>iPhone 6S PLus</td> <td>Apple</td> <td>62000</td>

17 </tr>
 44

18 <tr>

19 <td>Lumia 950 XL</td> <td>Microsoft</td> <td>35000</td>

20 </tr>

21 </table>

22 </body>

23 </html>

Здесь у нас в таблице 4 строки, и каждая строка имеет по три столбца.

При этом в данном случае первая строка выполняет роль заголовка, а остальные три строки собственно являются содержимым
таблицы. Разделения заголовков, футера и тела таблицы в html предусмотрены соответственно элементы thead, tfoot и tbody. Для
их применения изменим таблицу следующим образом:

1 <table>

2 <caption><b>Популярные смартфоны 2015</b></caption>

 45

3 <thead>

4 <tr>

5 <th>Модель</th> <th>Компания</th> <th>Цена</th>

6 </tr>

7 </thead>

8 <tbody>

9 <tr>

10 <td>Nexus 6P</td> <td>Huawei</td> <td>49000</td>

11 </tr>

12 <tr>

13 <td>iPhone 6S PLus</td> <td>Apple</td> <td>62000</td>

14 </tr>

15 <tr>

16 <td>Lumia 950 XL</td> <td>Microsoft</td> <td>35000</td>

17 </tr>

18 <tbody>

19 <tfoot>

20 <tr>

21 <th colspan="3">Информация по состоянию на 17 марта</th>

22 </tr>

23 </tfoot>
 46

24 </table>

В элемент thead заключается строка заголовков. Для ячеек заголовок используется не элемент td, а th. Элемент th выделяет
заголовок жирным. А все остальные строки заключаются в tbody

Элемент tfoot определяет подвал таблицы или футер. Здесь обычно выводится некоторая вспомогательная информация по
отношению к таблице.

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

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

Атрибут colspan указывает на какое количество столбцов раздвигается данная ячейка. Также с помощью атрибута rowspan мы
можем раздвигать ячейку на определенное количество строк. Например:
 47

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Таблицы в HTML5</title>

6 <style>

7 td{

8 width: 60px;

9 height:60px;

10 border: solid 1px silver;

11 text-align:center;

12 }

13 </style>

14 </head>

15 <body>

16 <table>

17 <tr>

18 <td rowspan="2" style="background-color:green;">1</td>

19 <td>2</td>

20 <td>3</td>

21 </tr>
 48

22 <tr>

23 <td>4</td>

24 <td>5</td>

25 </tr>

26 <tr>

27 <td>6</td>

28 <td colspan="2" style="background-color:red;">7</td>

29 </tr>

30 </table>

31 </body>

32 </html>
 49

Ссылки
Последнее обновление: 08.04.2016

Ссылки, которые представлены элементом <a></a>, играют важную роль - они обеспечивают навигацию между отдельными
документами. Этот элемент имеет следующие атрибуты:

 href: определяет адрес ссылки

 hreflang: указывает на язык документа, на который ведет данная ссылка
 media: определяет устройство, для которого предназначена ссылка
 rel: определяет отношение между данным документом и ресурсом, на который ведет ссылка
 target: определяет, как документ по ссылке должен открываться
 type: указывает на mime-тип ресурса по ссылке
 50

Наиболее важным атрибутом является href:

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Ссылки</title>
6 </head>
7 <body>
8 <a href="[Link]">Учебник по HTML5</a>
9 </body>
10 </html>

Здесь для ссылки используется относительный путь [Link]. То есть в одной папке с данным документом должен находиться
файл [Link], на который будет идти переход по нажатию на ссылку.

Также мы можем использовать абсолютные пути с полным указанием адреса:

1 <a href="[Link] по HTML5</a>

 51

Навигация внутри документа

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

<!DOCTYPE html>
1
<html>
2
<head>
3
<meta charset="utf-8">
4
<title>Внутренние ссылки</title>
5
</head>
6
<body>
7
<a href="#paragraph1">Параграф 1</a> | <a href="#paragraph2">Параграф 2</a> | <a
8
href="#paragraph3">Параграф 3</a>
9
<h2 id="paragraph1">Параграф 1</h2>
10
<p>Содержание параграфа 1</p>
11
<h2 id="paragraph2">Параграф 2</h2>
12
<p>Содержание параграфа 2</p>
13
<h2 id="paragraph3">Параграф 3</h2>
14
<p>Содержание параграфа 3</p>
15
</body>
16
</html>

Чтобы определить внутреннюю ссылку, указывается знак решетки (#), после которого идет id того элемента, к которому надо
осуществить переход. В данном случае переход будет идти к заголовкам h2.

Атрибут target

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

 _blank: открытие html-документа в новом окне или вкладке браузера

 _self: открытие html-документа в том же фрейме (или окне)
 52

 _parent: открытие документа в родительском фрейме, если ссылка расположена во внутреннем фрейме
 _top: открытие html-документа на все окно браузера
 framename: открытие html-документа во фрейме, который называется framename (В данном случае framename - только
пример, название фрейма может быть произвольным)

Например, открытие документа по ссылке в новом окне:

1 <a href="[Link] target="_blank">Учебник по HTML5</a>

Значение _blank как раз и указывает браузеру, что ресурс надо открыть в новой вкладке.

Стилизация ссылок

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

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Ссылки</title>
6 <style>
7 a:link {color:blue; text-decoration:none}
8 a:visited {color:pink; text-decoration:none}
9 a:hover {color:red; text-decoration:underline}
10 a:active {color:yellow; text-decoration:underline}
11 </style>
12 </head>
13 <body>
14 <a href="[Link]">Учебник по HTML5</a>
 53

15 </body>
16 </html>

Здесь определены стили для ссылок в различных состояниях. a:link применяется для ссылок в обычном состоянии, когда они не
нажаты и на них не наведен указатель мыши.

a:visited указывает на состояние ссылки, по которой уже был осуществлен переход.

a:hover указывает на состояние ссылки, на которую навели указатель мыши.

a:active указывает на ссылку в нажатом состоянии.

Стиль color устанавливает цвет ссылки. А стиль text-decoration устанавливает подчеркивание: если значение underline, то
ссылка поддчеркнута, если none, то подчеркивание отсутствует.

Ссылка-картинка

Поместив внутрь элемента <a> элемент <img>, можно сделать ссылку-изображение:

1 <a href="[Link]">
2 <img src="[Link]" alt="HTML tutorial">
3 </a>

Элементы figure и figcaption

Последнее обновление: 08.04.2016

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

Для использования элемента figure нам надо поместить в него некоторое содержимое, например, изображение:
 54

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Элемент Figure в HTML5</title>

6 </head>

7 <body>

8 <div>

9 <p>Lorem ipsum dolor … </p>

10 <figure>

11 <figcaption>Февраль 2013</figcaption>

12 <img src="[Link]" alt="Зимний пейзаж">

13 </figure>

14 <p>Lorem ipsum dolor … </p>

15 </div>

16 </body>

17 </html>
 55

Фреймы
Последнее обновление: 08.04.2016

Фреймы позволяют встраивать на веб-страницу еще какую-нибудь другую веб-страницу. Фреймы представлены
элементом iframe. Допустим, нам надо встроить на веб-страницу стартовую страницу википедии:

1 <!DOCTYPE html>
2 <html>
 56

3 <head>
4 <meta charset="utf-8">
5 <title>Фреймы в HTML5</title>
6 </head>
7 <body>
8 <h2>Элемент iframe</h2>
9 <iframe src="[Link] width="400" height="200">
10 </iframe>
11 </body>
12 </html>

Элемент iframe не содержит в себе никакого содержимого. Вся его настройка производится с помощью атрибутов:
 57

 src: устанавливает полный путь к загружаемому ресурсу

 width: ширина фрейма
 height: высота фрейма

Надо отметить, что не все сайты могут открываться во фреймах, поскольку на стороне веб-сервера могут действовать ограничения
на открытие во фреймах.

Работа с формами
Формы
Последнее обновление: 08.04.2016

Формы в html представляют один из способов для ввода и отправки данных. Все поля формы помещаются между
тегами <form> и </form>. Например, создадим простейшую форму:

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Формы в HTML5</title>
6 </head>
7 <body>
8 <form method="post" action="[Link]
9 <input name="login"/>
10 <input type="submit" value="Войти" />
11 </form>
12 </body>
13 </html>
 58

Для настройки форм у элемента form определены следующие атрибуты:

 method: устанавливает метод отправки данных на сервер. Допустимы два значения: post и get.

Значение post позволяет передать данные на веб-сервер через специальные заголовки. А значение get позволяет передать
данные через строку запроса.

 action: устанавливает адрес, на который передаются данные формы

 enctype: устанавливает тип передаваемых данных. Он свою очередь может принимать следующие значения:
o application/x-www-form-urlencoded: кодировка отправляемых данных по умолчанию
o multipart/form-data: эта кодировка применяется при отправке файлов
o text/plain: эта кодировка применяется при отправке простой текстовой информации

В выше использованном примере:

1 <form method="post" action="[Link]

2 <input name="login"/>
3 <input type="submit" value="Войти" />
4 </form>
 59

у формы установлен метод "post", то есть все значения формы отправляются в теле запроса, а адресом служит
строка [Link] Адрес здесь указан случайным образом.

Как правило, по указанному адресу работает веб-сервер, который, используя одну из технологий серверной стороны (PHP, NodeJS,
[Link] и т.д.), может получать запросы и возвращать ответ. В данном же случае мы не будем акцентировать внимание на
технологиях серверной стороны, сосредоточимся лишь на тех средствах HTML, которые позволяют отправлять данные на сервер.

Автодополнение

Часто веб-браузеры запоминают вводимые данные, и при вводе браузеры могут выдавать список подсказок из ранее введенных
слов:

Это может быть не всегда удобно, и с помощью атрибута autocomplete можно отключить автодополнение:

<form method="post" autocomplete="off"

1
action="[Link]
2
<input name="login" />
3
<input name="password" />
4
<input type="submit" value="Войти" />
5
</form>
 60

Если нам надо включить автодополнение только для каких-то определенных полей, то мы можем применить к ним
атрибут autocomplete="on":

<form method="post" autocomplete="off"

1
action="[Link]
2
<input name="login" />
3
<input name="password" autocomplete="on" />
4
<input type="submit" value="Войти" />
5
</form>

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

Элементы форм
Последнее обновление: 08.04.2016

Формы состоят из определенного количества элементов ввода. Все элементы ввода помещаются между тегами <form> и </form>

Наиболее распространенным элементом ввода является элемент input. Однако реальное действие этого элемента зависит от того,
какое значение установлено у его атрибута type. А он может принимать следующие значения:

 text: обычное текстовое поле

 password: тоже текстовое поле, только вместо вводимых символов отображаются звездочки, поэтому в основном
используется для ввода пароля
 radio: радиокнопка или переключатель. Из группы радиокнопок можно выбрать только одну
 checkbox: элемент флажок, который может находиться в отмеченном или неотмеченном состоянии
 hidden: скрытое поле
 submit: кнопка отправки формы
 color: поле для ввода цвета
 date: поле для ввода даты
 datetime: поле для ввода даты и времени с учетом часового пояса
 61

 datetime-local: поле для ввода даты и времени без учета часового пояса
 email: поле для ввода адреса электронной почты
 month: поле для ввода года и месяца
 number: поле для ввода чисел
 range: ползунок для выбора числа из некоторого диапазона
 tel: поле для ввода телефона
 time: поле для ввода времени
 week: поле для ввода года и недели
 url: поле для ввода адреса url
 file: поле для выбора отправляемого файла
 image: создает кнопку в виде картинки

Кроме элемента input в различных модификациях есть еще небольшой набор элементов, которые также можно использовать на
форме:

 button: создает кнопку

 select: выпадающий список
 label: создает метку, которая отображается рядом с полем ввода
 textarea: многострочное текстовое поле

Атрибуты name и value

У всех элементов ввода можно установить атрибуты name и value. Эти атрибуты имеют важное значение. По атрибуту name мы
можем идентифицировать поле ввода, а атрибут value позволяет установить значение поля ввода. Например:

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Формы в HTML5</title>
6 </head>
 62

7 <body>
8 <form method="get" action="[Link]">
9 <input type="text" name="login" value="Tom"/>
10 <input type="password" name="password"/>
11 <input type="submit" value="Войти" />
12 </form>
13 </body>
14 </html>

Здесь текстовое поле имеет значение "Tom" (как указано в атрибуте value), поэтому при загрузке веб-страницы в этом поле мы
увидим данный текст.

Поскольку методом отправки данных формы является метод "get", то данные будут отправляться через строку запроса. Так как нам
в данном случае не важно, как данные будут приниматься, не важен сервер, который получает данные, поэтому в качестве адреса
я установил ту же самую страницу - то есть файл [Link]. И при отправке мы сможем увидеть введенные данные в строке
запроса:
 63

В строке запроса нас интересует следующий кусочек:

1 login=Tom&password=qwerty

При отправке формы браузер соединяет все данные в набор пар "ключ-значение". В нашем случае две таких
пары: login=Tom и password=qwerty. Ключом в этих парах выступает название поля ввода, которое определяется атрибутом name, а
значением - собственно то значение, которое введено в поле ввода (или значение атрибута value).

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

Кнопки
Последнее обновление: 08.04.2016

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

 submit: кнопка, используемая для отправки формы

 reset: кнопка сброса значений формы
 button: кнопка без какого-либо специального назначения
 64

Если кнопка используется для отправки формы, то есть у нее установлен атрибут type="submit", то мы можем задать у нее ряд
дополнительных атрибутов:

 form: определяет форму, за которой закреплена кнопка отправки

 formaction: устанавливает адрес, на который отправляется форма. Если у элемента form задан атрибут action, то он
переопределяется
 formenctype: устанавливает формат отправки данных. Если у элемента form установлен атрибут enctype, то он
переопределяется
 formmethod: устанавливает метод отправки формы (post или get). Если у элемента form установлен атрибут method, то он
переопределяется

Например, определим на форме кнопку отправки и кнопку сброса:

<!DOCTYPE html>
1
<html>
2
<head>
3
<meta charset="utf-8">
4
<title>Формы в HTML5</title>
5
</head>
6
<body>
7
<form>
8
<p><input type="text" name="login"/></p>
9
<p><input type="password" name="password"/></p>
10
<p>
11
<button type="submit" formmethod="get"
12
formaction="[Link]">Отправить</button>
13
<button type="reset">Отмена</button>
14
</p>
15
</form>
16
</body>
17
</html>
 65

Кроме элемента button для создания кнопок можно использовать элемент input, у которого атрибут равен submit или reset.
Например:

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Формы в HTML5</title>
6 </head>
7 <body>
8 <form>
9 <p><input type="text" name="login"/></p>
10 <p><input type="password" name="password"/></p>
11 <p>
12 <input type="submit" value="Отправить" />
13 <input type="reset" value="Отмена" />
14 </p>
15 </form>
16 </body>
17 </html>
 66

И еще один элемент input с атрибутом type="image" позволяет использовать в качестве кнопки изображение:

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Форма ввода в HTML5</title>
6 </head>
7 <body>
8 <form>
9 <p>
10 <input type="text" name="search" />
11 <input type="image" src="[Link]" name="submit" />
12 </p>
13 </form>
14 </body>
15 </html>

Кроме наличия изображения в остальном эта кнопка будет аналогична стандартной кнопке отправки input
type="submit" или button type="submit".
 67

Текстовые поля
Последнее обновление: 08.04.2016


Однострочное текстовое поле создается с помощью элемента input, когда его атрибут type имеет значение text:

1 <input type="text" name="login" />

С помощью ряда дополнительных атрибутов можно настроить текстовое поле:

 dirname: устанавливает направление текста

 maxlength: максимально допустимое количество символов в текстовом поле
 pattern: определяет шаблон, которому должен соответствовать вводимый текст
 placeholder: устанавливает текст, который по умолчанию отображается в текстовом поле
 readonly: делает текстовом поле доступным только для чтения
 required: указывает, что текстовое поле обязательно должно иметь значение
 size: устанавливает ширину текстового поля в видимых символах
 value: устанавливает значение по умолчанию в текстовом поле

Применим некоторые атрибуты:

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Текстовые поля в HTML5</title>
 68

</head>
6
<body>
7
<form>
8
<p><input type="text" name="userName" placeholder="Введите имя" size="18" /></p>
9
<p><input type="text" name="userPhone" placeholder="Введите номер телефона" size="18"
10
maxlength="11" /></p>
11
<p>
12
<button type="submit">Отправить</button>
13
<button type="reset">Отмена</button>
14
</p>
15
</form>
16
</body>
17
</html>

В этом примере во втором текстовом поле сразу устанавливаются атрибуты maxlength и size. При этом size - то есть количество
символов, которые помещаются в видимое пространство поля больше, чем допустимое количество символов. Однако все равно
ввести символов больше, чем maxlength, мы не сможем.

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

1 <p><input type="text" name="userName" value="Том" /></p>

2 <p><input type="text" name="userPhone" placeholder="Номер телефона" /></p>

Атрибуты readonly и disabled делают текстовое поле недоступным, однако сопровождаются разным визуальным эффектом. В
случае с disabled текстовое поле затеняется:
 69

1 <p><input type="text" name="userName" value="Том" readonly /></p>

2 <p><input type="text" name="userPhone" value="+12345678901" disabled /></p>

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

<!DOCTYPE html>
1
<html>
2
<head>
3
<meta charset="utf-8">
4
<title>Текстовые поля в HTML5</title>
5
</head>
6
<body>
7
<form>
8
<p><input list="phonesList" type="text" name="model" placeholder="Введите модель"
9
/></p>
10
<p>
11
<button type="submit">Отправить</button>
12
</p>
13
</form>
14
<datalist id="phonesList">
15
<option value="iPhone 6S" label="54000"/>
16
<option value="Lumia 950">35000</option>
17
<option value="Nexus 5X"/>
18
</datalist>
19
</body>
20
</html>
 70

Атрибут list текстового поля указывает на id элемента datalist. Сам элемент datalist с помощью вложенных
элементов option определяет элементы списка. И при вводе в текстовое поле этот список отображается в виде подсказки.

Поле поиска

Для создания полей поиска предназначен элемент input с атрибутом type="search". Формально он представляет собой простое
текстовое поле:

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Поиск в HTML5</title>
6 </head>
7 <body>
8 <form>
9 <input type="search" name="term" />
10 <input type="submit" value="Поиск" />
11 </form>
12 </body>
13 </html>

Поле ввода пароля

Для ввода пароля используется элемент input с атрибутом type="password". Его отличительной чертой является то, что вводимые
символы маскируются точками:

1 <form>
2 <p><input type="text" name="login" /></p>
3 <p><input type="password" name="password" /></p>
 71

4 <input type="submit" value="Авторизация" />

5 </form>

Метки и автофокус
Последнее обновление: 08.04.2016


Вместе с полями ввода нередко используются метки, которые представлены элементом label. Метки создают аннотацию или
заголовок к полю ввода, указывают, для чего это поле предназначено.

Для связи с полем ввода метка имеет атрибут for, который указывает на id поля ввода:

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Label в HTML5</title>
6 </head>
7 <body>
8 <form>
9 <p>
10 <label for="login">Логин: </label>
11 <input type="text" id="login" name="login" />
12 </p>
13 <p>
14 <label for="password">Пароль: </label>
15 <input type="password" id="password" name="password" />
 72

16 </p>
17 <p>
18 <button type="submit">Отправить</button>
19 </p>
20 </form>
21 </body>
22 </html>

Так, текстовое поле здесь имеет атрибут id="login". Поэтому у связанной с ним метки устанавливается атрибут for="login".
Нажатие на эту метку позволяет перевести фокус на текстовое поле для ввода логина:

Собственно на этом роль меток и заканчивается. Также мы можем установить автофокус по умолчанию на какое-либо поле ввода.
Для этого применяется атрибут autofocus:

1 <form>
2 <p>
3 <label for="login">Логин: </label>
4 <input type="text" autofocus id="login" name="login" />
5 </p>
6 <p>
7 <label for="password">Пароль: </label>
8 <input type="password" id="password" name="password" />
9 </p>
10 <p>
11 <button type="submit">Отправить</button>
12 </p>
13 </form>

Здесь при запуске страницы фокус сразу же переходит на текстовое поле.

 73

Элементы для ввода чисел

Последнее обновление: 08.04.2016


Простое числовое поле

Для ввода чисел используется элемент input с атрибутом type="number". Он создает числовое поле, которое мы можем настроить
с помощью следующих атрибутов:

 min: минимально допустимое значение

 max: максимально допустимое значение
 readonly: доступно только для чтения
 required: указывает, что данное поле обязательно должно иметь значение
 step: значение, на которое будет увеличиваться число в поле
 value: значение по умолчанию

Используем числовое поле:

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Числовое поле в HTML5</title>
6 </head>
7 <body>
8 <form>
 74

<p>
9
<label for="age">Возраст: </label>
10
<input type="number" step="1" min="1" max="100" value="10" id="age"
11
name="age"/>
12
</p>
13
<p>
14
<button type="submit">Отправить</button>
15
</p>
16
</form>
17
</body>
18
</html>

Здесь числовое поле по умолчанию имеет значение 10 (value="10"), минимально допустимое значение, которое мы можем ввести, -
1, а максимальное допустимое значение - 100. И атрибут step="1" устанавливает, что значение будет увеличиваться на единицу.

В зависимости от браузера визуализация этого поля может отличаться:

Но как правило, у большинства современных браузеров, кроме IE 11 и Microsoft Edge, справа в поле ввода имеются стрелки для
увеличения/уменьшения значения на величину, указанную в атрибуте step.

Как и в случае с текстовым полем мы можем здесь прикрепить список datalist с диапазоном возможных значений:

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Числовое поле в HTML5</title>
6 </head>
7 <body>
 75

<form>
8
<p>
9
<label for="price">Цена: </label>
10
<input type="number" list="priceList"
11
step="1000" min="3000" max="100000" value="10000" id="price"
12
name="price"/>
13
</p>
14
<p>
15
<button type="submit">Отправить</button>
16
</p>
17
</form>
18
<datalist id="priceList">
19
<option value="15000" />
20
<option value="20000" />
21
<option value="25000" />
22
</datalist>
23
</body>
24
</html>

Ползунок

Ползунок представляет шкалу, на которой мы можем выбрать одно из значений. Для создания ползунка применяется
элемент input с атрибутом type="range". Во многом ползунок похож на простое поле для ввода чисел. Он также имеет
атрибуты min, max, step и value:

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Ползунок в HTML5</title>
 76

</head>
6
<body>
7
<form>
8
<p>
9
<label for="price">Цена:</label>
10
1<input type="range" step="1" min="0" max="100" value="10" id="price"
11
name="price"/>100
12
</p>
13
<p>
14
<button type="submit">Отправить</button>
15
</p>
16
</form>
17
</body>
18
</html>

Флажки и переключатели
Последнее обновление: 08.04.2016


Флажок

Флажок представляет элемент, который может находиться в двух состояниях: отмеченном и неотмеченном. Флажок создается с
помощью элемента input с атрибутом type="checkbox":

1 <!DOCTYPE html>
2 <html>
3 <head>
 77

4 <meta charset="utf-8">
5 <title>Чекбокс в HTML5</title>
6 </head>
7 <body>
8 <h2>Изучаемые технологии</h2>
9 <form>
10 <p>
11 <input type="checkbox" checked name="html5"/>HTML5
12 </p>
13 <p>
14 <input type="checkbox" name="dotnet"/>.NET
15 </p>
16 <p>
17 <input type="checkbox" name="java"/>Java
18 </p>
19 <p>
20 <button type="submit">Отправить</button>
21 </p>
22 </form>
23 </body>
24 </html>

Атрибут checked позволяет установить флажок в отмеченное состояние.

Переключатели

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

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Радиокнопки в HTML5</title>
6 </head>
7 <body>
8 <form>
9 <h2>Укажите пол</h2>
10 <p>
11 <input type="radio" value="man" checked
12 name="gender"/>мужской
13 </p>
14 <p>
15 <input type="radio" value="woman" name="gender"/>женский
16 </p>
17 <h2>Выберите технологию</h2>
18 <p>
19 <input type="radio" value="html5" checked
20 name="tech"/>HTML5
21 </p>
22 <p>
23 <input type="radio" value="net" name="tech"/>.NET
24 </p>
25 <p>
26 <input type="radio" value="java" name="tech"/>Java
27 </p>
28 <p>
29 <button type="submit">Отправить</button>
30 </p>
31 </form>
</body>
 79

</html>

Для создания радиокнопки надо указать атрибут type="radio". И теперь другой атрибут name указывает не на имя элемента, а на
имя группы, к которой принадлежит элемент-радиокнопка. В данном случае у нас две группы радиокнопок: gender и tech. Из
каждой группы мы можем выбрать только один переключатель. Опять же чтобы отметить радиокнопку, у нее устанавливается
атрибут checked:

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

Элементы для ввода цвета, url, email, телефона

Последнее обновление: 08.04.2016

Установка цвета

За установку цвета в HTML5 отвечает специальный элемент input с типом color:

1 <label for="favcolor">Выберите цвет</label>

 80

2 <input type="color" id="favcolor" name="favcolor" />

Элемент отображает выбранный цвет. А при нажатии на него появляется специальное диалоговое окно для установки цвета:

Значением этого элемента будет числовой шестнадцатеричный код выбранного цвета.

С помощью элемента datalist мы можем задать набор цветов, из который пользователь может выбрать нужный:

1 <label for="favcolor">Выберите цвет</label>

2 <input type="color" list="colors" id="favcolor" name="favcolor" />

3 <datalist id="colors">

4 <option value="#0000FF" label="blue">

5 <option value="#008000" label="green">

6 <option value="#ff0000" label="red">

7 </datalist>

Каждый элемент option в datalist должен в качестве значения принимать шестнадцатеричный код цвета, например, "#0000FF".
После выбора цвета данный числовой код устанавливается в качестве значения в элементе input.

Поля для ввода url, email, телефона

Ряд полей input предназначены для ввода таких данных, как url, адреса электронной почты и телефонного номера. Они однотипны
и во многом отличаются только тем, что для атрибута type принимают соответственно значения email, tel и url.
 81

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

 maxlength: максимально допустимое количество символов в поле

 pattern: определяет шаблон, которому должен соответствовать вводимый текст

 placeholder: устанавливает текст, который по умолчанию отображается в поле

 readonly: делает текстовом поле доступным только для чтения

 required: указывает, что текстовое поле обязательно должно иметь значение

 size: устанавливает ширину поля в видимых символах

 value: устанавливает значение по умолчанию для поля

 list: устанавливает привязку к элементу datalist со списком возможных значений

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Форма ввода в HTML5</title>

6 </head>

7 <body>

8 <form>

9 <p>
 82

<label for="email">Email: </label>

10
<input type="email" placeholder="user@[Link]" id="email"
11 name="email"/>

12 </p>

13 <p>

14 <label for="url">URL: </label>

15 <input type="url" id="url" name="url"/>

16 </p>

17 <p>

18 <label for="phone">Телефон: </label>

19 <input type="tel" placeholder="(XXX)-XXX-XXXX" id="phone"

name="phone"/>
20
</p>
21
<p>
22
<button type="submit">Отправить</button>
23
</p>
24
</form>
25
</body>
26
</html>
 83

Основное преимущество подобных полей ввода перед обычными текстовыми полями состоит в том, что поля ввода для email, url,
телефона для проверки ввода используют соответствующий шаблон. Например, если мы введем в какое-либо поле некорректное
значение и попробуем отправить форму, то браузер может отобразить нам сообщение о некорректном вводе, а форма не будет
отправлена:

НазадСодержаниеВперед

Элементы для ввода даты и времени

Последнее обновление: 08.04.2016


Для работы с датами и временем в HTML5 предназначено несколько типов элементов input:

 datetime-local: устанавливает дату и время

 date: устанавливает дату
 month: устанавливает текущий месяц и год
 time: устанавливает время
 week: устанавливает текущую неделю

Например, используем поле для установки даты:

1 <!DOCTYPE html>
2 <html>
 84

3 <head>
4 <meta charset="utf-8">
5 <title>Форма ввода в HTML5</title>
6 </head>
7 <body>
8 <form>
9 <p>
10 <label for="firstname">Имя: </label>
11 <input type="text" id="firstname" name="firstname"/>
12 </p>
13 <p>
14 <label for="date">Дата рождения: </label>
15 <input type="date" id="date" name="date"/>
16 </p>
17 <p>
18 <button type="submit">Отправить</button>
19 </p>
20 </form>
21 </body>
22 </html>

И при вводе в поле для даты будет открываться календарик:

Правда, здесь надо отметить, что действие этого элемента зависит от браузера. В данном случае используется Google Chrome. В
последних версиях Opera элемент не будет сильно отличаться. А вот в Microsoft Edge элемент будет выглядеть так:

Применение остальных элементов:

 85

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Форма ввода в HTML5</title>
6 </head>
7 <body>
8 <form>
9 <p>
10 <label for="week">Неделя: </label>
11 <input type="week" name="week" id="week" />
12 </p>
13 <p>
14 <label for="localdate">Дата и время: </label>
15 <input type="datetime-local" id="localdate" name="date"/>
16 </p>
17 <p>
18 <label for="month">Месяц: </label>
19 <input type="month" id="month" name="month"/>
20 </p>
21 <p>
22 <label for="time">Время: </label>
23 <input type="time" id="time" name="time"/>
24 </p>
25 <p>
26 <button type="submit">Отправить</button>
27 </p>
28 </form>
29 </body>
30 </html>
 86

При использовании этих элементов также надо учитывать, что Firefox поддерживает только элементы date и time, для остальных
создаются обычные текстовые поля. А IE11 и вовсе не поддерживают эти элементы.

Отправка файлов
Последнее обновление: 08.04.2016

За выбор файлов на форме отвечает элемент input с атрибутом type="file":

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Отправка файлов в HTML5</title>

6 </head>

7 <body>

8 <form enctype="multipart/form-data" method="post"

action="[Link]
9
<p>
 87

10 <input type="file" name="file" />

11 </p>

12 <p>

13 <input type="submit" value="Отправить" />

14 </p>

15 </form>

16 </body>

17 </html>

При нажатии на кнопку "Выберите файл" открывается диалоговое окно для выбора файла. А после выбора рядом с кнопкой
отображается имя выбранного файла.

Важно отметить, что для отправки файла на сервер форма должна иметь атрибут enctype="multipart/form-data".

С помощью ряда атрибутов мы можем дополнительно настроить элементы выбора файла:

 accept: устанавливает тип файл, которые допустимы для выбора

 multiple: позволяет выбирать множество файлов

 required: требует обязательной установки файла

Например, множественный выбор файлов:

1 <form enctype="multipart/form-data" method="post"

 88

action="[Link]
2
<p>
3
<input type="file" name="file" multiple />
4
</p>
5
<p>
6
<input type="submit" value="Отправить" />
7
</p>
8
</form>

При нажатии на кнопку также открывается диалоговое окно для выбора файлов, только теперь, зажав клавишу CTRL или Shift, мы
можем выбрать несколько файлов, а после выбора рядом с кнопкой отобразится количество выбранных файлов:

Список select
Последнее обновление: 08.04.2016


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

Создадим выпадающий список:

 89

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Элемент select в HTML5</title>
6 </head>
7 <body>
8 <form method="get">
9 <p>
10 <label for="phone">Выберите модель:</label>
11 <select id="phone" name="phone">
12 <option value="iphone 6s">iPhone 6S</option>
13 <option value="lumia 950">Lumia 950</option>
14 <option value="nexus 5x">Nexus 5X</option>
15 <option value="galaxy s7">Galaxy S7</option>
16 </select>
17 </p>
18 <p>
19 <input type="submit" value="Отправить" />
20 </p>
21 </form>
22 </body>
23 </html>

Внутрь элемента select помещаются элементы option - элементы списка. Каждый элемент option содержит атрибут value,
который хранит значение элемента. При этом значение элемента option не обязательно должно совпадать с отображаемым им
текстом. Например:

1 <option value="apple">iPhone 6S</option>

 90

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

1 <select id="phone" name="phone">

2 <option value="iphone 6s">iPhone 6S</option>
3 <option value="lumia 950">Lumia 950</option>
4 <option value="nexus 5x" selected>Nexus 5X</option>
5 </select>

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

1 <select id="phone" name="phone">

2 <option disabled selected>Выберите модель</option>
3 <option value="iphone 6s">iPhone 6S</option>
4 <option value="lumia 950">Lumia 950</option>
5 <option value="nexus 5x" selected>Nexus 5X</option>
6 </select>

Для создания списка с множественным выбором к элементу select надо добавить атрибут multiple:

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Элемент select в HTML5</title>
6 </head>
7 <body>
8 <form method="get">
9 <p>
10 <label for="phone">Выберите модель:</label> <br/>
11
 91

12 <select multiple id="phone" name="phone">

13 <option value="iphone 6s">iPhone 6S</option>
14 <option value="lumia 950">Lumia 950</option>
15 <option value="nexus 5x">Nexus 5X</option>
16 <option value="galaxy s7">Galaxy S7</option>
17 </select>
18 </p>
19 <p>
20 <input type="submit" value="Отправить" />
21 </p>
22 </form>
23 </body>
24 </html>

Зажав клавишу Ctrl, мы можем выбрать в таком списке несколько элементов:

Select также позволяет группировать элементы с помощью тега <optgroup>:

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Элемент select в HTML5</title>
6 </head>
7 <body>
8 <form method="get">
9 <p>
10 <label for="phone">Выберите модель:</label>
11
 92

<select id="phone" name="phone">

12 <optgroup label="Apple">
13 <option value="iphone 6s">iPhone 6S</option>
14 <option value="iphone 6s plus">iPhone 6S
15 Plus</option>
16 <option value="iphone 5se">iPhone 5SE</option>
17 </optgroup>
18 <optgroup label="Microsoft">
19 <option value="lumia 950">Lumia 950</option>
20 <option value="lumia 950 xl">Lumia 950
21 XL</option>
22 <option value="lumia 650">Lumia 650</option>
23 </optgroup>
24 </select>
25 </p>
26 <p>
27 <input type="submit" value="Отправить" />
28 </p>
29 </form>
30 </body>
</html>

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

Textarea
Последнее обновление: 08.04.2016



 93

Элемент <input type="text" /> позволяет создавать простое однострочное текстовое поле. Однако возможностей этого элемента
по вводу текста бывает недостаточно, и в этой ситуации мы можем использовать многострочное текстовое поле, представленное
элементом textarea:

<!DOCTYPE html>
1
<html>
2
<head>
3
<meta charset="utf-8">
4
<title>Textarea в HTML5</title>
5
</head>
6
<body>
7
<form method="get">
8
<p>
9
<label for="comment">Ваш комментарий:</label><br/>
10
<textarea name="comment" id="comment" placeholder="Не более 200 символов"
11
maxlength="200"></textarea>
12
</p>
13
<p>
14
<input type="submit" value="Добавить" />
15
</p>
16
</form>
17
</body>
18
</html>
 94

С помощью дополнительных атрибутов cols и rows можно задать соответственно количество столбцов и строк:

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Textarea в HTML5</title>
6 </head>
7 <body>
8 <form method="get">
9 <p>
10 <label for="comment">Ваш комментарий:</label><br/>
11 <textarea id="comment" name="comment" placeholder="Написать
12 комментарий"
13 cols="30" rows="7"></textarea>
14 </p>
15 <p>
16 <input type="submit" value="Добавить" />
17 </p>
 95

</form>
18
</body>
19
</html>

Валидация форм
Последнее обновление: 08.04.2016


 96

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

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

Для создания валидации у элементов форм HTML5 используется ряд атрибутов:

 required: требует обязательного ввода значения. Для элементов textarea, select, input (с типом text, password, checkbox,
radio, file, datetime-local, date, month, time, week, number, email, url, search, tel)

 min и max: минимально и максимально допустимые значения. Для элемента input с типом datetime-local, date, month, time,
week, number, range

 pattern: задает шаблон, которому должны соответствовать вводимые данные. Для элемента input с типом text, password,
email, url, search, tel

Атрибут required

Атрибут required требует обязательного наличия значения:

1 <!DOCTYPE html>

2 <html>

3 <head>
 97

<meta charset="utf-8">
4
<title>Валидация в HTML5</title>
5
</head>
6
<body>
7
<form method="get">
8
<p>
9
<label for="login">Логин:</label>
10
<input type="text" required id="login" name="login" />
11
</p>
12
<p>
13
<label for="password">Пароль:</label>
14
<input type="password" required id="password"
15
name="password" />
16
</p>
17
<p>
18
<input type="submit" value="Отправить" />
19
</p>
20
</form>
21
</body>
22
</html>
 98

Если мы не введем в эти поля никаких данных, оставив их пустыми, и нажмем на кнопку отправки, то браузер высветит нам
сообщения об ошибке, а данные не будут отправлены на сервер:

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

Атрибуты max и min

Для ограничения диапазона вводимых значений применяются атрибуты max и min:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Валидация в HTML5</title>

6 </head>

7 <body>

8 <form method="get">

9 <p>

10 <label for="age">Возраст:</label>

11 <input type="number" min="1" max="100" value="18" id="age"

name="age"/>
12
</p>
13
<p>
14
 100

<input type="submit" value="Отправить" />

15
</p>
16
</form>
17
</body>
18
</html>

Атрибут pattern

Атрибут pattern задает шаблон, которому должны соответствовать данные. Для определения шаблона используется язык так
называемых регулярных выражений. Рассмотрим самые простейшие примеры:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">
 101

<title>Валидация в HTML5</title>
5
</head>
6
<body>
7
<form method="get">
8
<p>
9
<label for="phone">Телефон:</label>
10
<input type="text" placeholder="+1-234-567-8901"
11
pattern="\+\d-\d{3}-\d{3}-\d{4}" id="phone"
12
name="phone" />
13
</p>
14
<p>
15
<input type="submit" value="Отправить" />
16
</p>
17
</form>
18
</body>
19
</html>

Здесь для ввода номера телефона используется регулярное выражение \+\d-\d{3}-\d{3}-\d{4}. Оно означает, что первым
элементом в номере должен идти знак плюс +. Выражение \d представляет любую цифру от 0 до 9. Выражение \d{3} означает три
подряд идущих цифры, а \d{4} - четыре цифры подряд. То есть это выражение будет соответствовать номеру телефона в формате
"+1-234-567-8901".

Если мы введем данные, которые не соответствуют этому шаблону, и нажмем на отправку, то браузер отобразит ошибку:
 102

Отключение валидации

Не всегда валидация является желаемой, иногда требуется ее отключить. И в этом случае мы можем использовать либо у элемента
формы атрибут novalidate, либо у кнопки отправки атрибут formnovalidate:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Валидация в HTML5</title>

6 </head>

7 <body>

8 <form novalidate method="get">

9 <p>
 103

<label for="phone">Телефон:</label>
10
<input type="text" placeholder="+1-234-567-8901"
11
pattern="\+\d-\d{3}-\d{3}-\d{4}" id="phone"
12
name="phone" />
13
</p>
14
<p>
15
<input type="submit" value="Отправить" formnovalidate />
16
</p>
17
</form>
18
</body>
19
</html>

Элементы fieldset и legend

Последнее обновление: 08.04.2016


Для группировки элементов формы нередко применяется элемент fieldset. Он создает границу вокруг вложенных элементов, как
бы создавая из них группу. Вместе с ним используется элемент legend, который устанавливает заголовок для группы элементов:

1 <!DOCTYPE html>
2 <html>
 104

3 <head>
4 <meta charset="utf-8">
5 <title>Элементы форм в HTML5</title>
6 </head>
7 <body>
8 <h2>Вход на сайт</h2>
9 <form>
10 <fieldset>
11 <legend>Введите данные:</legend>
12 <label for="login">Логин:</label><br>
13 <input type="text" name="login" id="login" /><br>
14 <label for="password">Пароль:</label><br>
15 <input type="password" name="password" id="password" /><br>
16 <input type="submit" value="Авторизация">
17 </fieldset>
18 </form>
19 </body>
20 </html>
 105

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

Семантическая структура страницы

Элемент article
Последнее обновление: 08.04.2016


 106

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

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

Использование article на примере статьи из блога с комментариями:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Семантическая разметка в HTML5</title>

6 </head>

7 <body>

8 <article>

9 <h2>Lorem ipsum</h2>

10 <div>

11 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh
12
euismod tincidunt ut laoreet dolore magna aliquam erat ...
13
 107

</div>
14
<div>
15
<h3>Комментарии</h3>
16
<article>
17
<h4>Неплохо</h4>
18
<p>Норм статья</p>
19
</article>
20
<article>
21
<h4>Бред</h4>
22
<p>Мне не понравилось...</p>
23
</article>
24
<article>
25
<h4>Непонятно</h4>
26
<p>О чем вообще все это?</p>
27
</article>
28
</div>
29
</article>
30
</body>
31
</html>
 108

Здесь вся статья может быть помещена в элемент article, и в то же время каждый отдельный комментарий также представляет
отдельный элемент article.

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

Элемент section
Последнее обновление: 08.04.2016

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

Каждый элемент section должен быть идентифицирован с помощью заголовка h1-h6.

При этом элемент section может содержать несколько элементов article, выполняя их группировку, так и один элемент article может
содержать несколько элементов section.

1 <!DOCTYPE html>

2 <html>

3 <head>
 109

4 <meta charset="utf-8">

5 <title>Семантическая разметка в HTML5</title>

6 </head>

7 <body>

8 <article>

9 <h1>Lorem ipsum</h1>

10 <section>

11 <h2>Содержание</h2>

12 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh
13
euismod tincidunt ut laoreet dolore magna aliquam erat ...</p>
14
</section>
15
<section>
16
<h3>Комментарии</h3>
17
<article>
18
<h4>Неплохо</h4>
19
<p>Норм статья</p>
20
</article>
21
<article>
22
<h4>Бред</h4>
23
<p>Мне не понравилось...</p>
24
 110

</article>
25
<article>
26
<h4>Непонятно</h4>
27
<p>О чем вообще все это?</p>
28
</article>
29
</section>
30
</article>
31
</body>
32
</html>

Здесь для блока основного содержимого создается секция и для набора комментариев также создается элемент section.

Элемент nav
Последнее обновление: 08.04.2016

Элемент nav призван содержать элементы навигации по сайту. Как правило, это ненумерованный список с набором ссылок.
 111

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

Не все ссылки обязательно помещать в элемент nav. Например, некоторые ссылки могут не представлять связанного блока
навигации, например, ссылка на главную страницу, на лицензионное соглашение по поводу использования сервиса и подобные
ссылки, которые часто помещаются внизу страницы. Как правило, их достаточно определить в элементе footer, а элемент nav для
них использовать необязательно.

Используем элемент nav для создания навигационного меню:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Семантическая разметка в HTML5</title>

6 </head>

7 <body>

8 <nav>

9 <ul>

10 <li><a href="/">Главная</a></li>

11 <li><a href="/blog">Блог</a></li>

12 <li><a href="/contacts">Контакты</a></li>

13 </ul>

14 </nav>
 112

15 <article>

16 <header>

17 <h2>Рассказ в двух частях</h2>

18 </header>

19 <nav>

20 <ul>

21 <li><a href="#part1">Часть 1</a></li>

22 <li><a href="#part2">Часть 2</a></li>

23 </ul>

24 </nav>

25 <div>

26 <section id="part1">

27 <h2>Часть 1</h2>

28 <p>Lorem Ipsum is simply dummy text of the printing and typesetting

industry.
29
Lorem Ipsum has been the industry...</p>
30
</section>
31
<section id="part2">
32
<h2>Часть 2</h2>
33
<p>There are many variations of passages of Lorem Ipsum
34
available..</p>
35
 113

</section>

36 </div>

37 <footer>

38

39 </footer>

40 </article>

41 <footer>

42 <p><a href="/license">Лицензионное соглашение</a> |

43 <a href="/about">О сайте</a> |

44 <a href="/donation">Donations</a></p>

45 <p><small>© Copyright 2016 MyCorp.</small></p>

46 </footer>

47 </body>

</html>

В данном случае определены два блока nav - один для межстраничной навигации, а другой - для навигации внутри страницы.

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

Элементы header, footer и address

Последнее обновление: 08.04.2016
 114

Header

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

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Семантическая разметка в HTML5</title>

6 </head>

7 <body>

8 <header>

9 <h1>Онлайн-магазин телефонов</h1>

10 <nav>

11 <ul>

12 <li><a href="/apple">Apple</a>
 115

13 <li><a href="/microsoft">Microsoft</a>

14 <li><a href="/samsung">Samsung</a>

15 </ul>

16 </nav>

17 </header>

18 <div>

19 Информация о новинках мобильного мира....

20 </div>

21 </body>

22 </html>

Элемент header нельзя помещать в такие элементы как address, footer или другой header.

Footer

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

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Семантическая разметка в HTML5</title>

 116

</head>
6
<body>
7
<h1>Xiaomi Mi 5</h1>
8
<div>
9
Xiaomi Mi 5 оснащен восьмиядерным процессором Qualcomm
10
Snapdragon 820.
11
Размер внутреннего хранилища - 32 и 64 МБ.
12
</div>
13
<footer>
14
<p><a href="/license">Лицензионное соглашение</a><br/>
15
Copyright © 2016. [Link]</p>
16
</footer>
17
</body>
18
</html>

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

Футер необязательно должен быть определен для всей страницы. Это может быть и отдельная секция контента:

1 <!DOCTYPE html>

2 <html>

3 <head>
 117

4 <meta charset="utf-8">

5 <title>Семантическая разметка в HTML5</title>

6 </head>

7 <body>

8 <section>

9 <h1>Последние статьи</h1>

10 <article>

11 <h2>Анонс Samsung Galaxy S7</h2>

12 <p>Состоялся выход нового флагмана от компании Samsung Galaxy S7.....</p>

13 <footer>

14 Дата публикации: <time datetime="2016-03-16T15:16-00:00">16.03.2016

15:16</TIME>
15
</footer>
16
</article>
17
<article>
18
<h2>Скидки на Microsoft Lumia 950</h2>
19
<p>С 1 марта смартфон Microsoft Lumia 950 стоит на 10 000 рублей
20
дешевле</p>
21
<footer>
22
Дата публикации: <time datetime="2016-03-01T14:36-00:00">01.03.2016
23 14:36</TIME>

24 </footer>
 118

</article>

25 </section>

26 </body>

</html>

Элемент footer не следует помещать в такие элементы как address, header или другой footer.

Address

Элемент address предназначен для отображения контактной информации, которая связана с ближайшим элементом article или
body. Нередко данный элемент размещается в футере:

1 <footer>

2 <address>

3 Контакты для связи <a href="[Link] Смит</a>.

4 </address>

5 <p>© copyright 2016 Example Corp.</p>

6 </footer>

Элемент aside
Последнее обновление: 08.04.2016


 119

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

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Семантическая разметка в HTML5</title>

6 </head>

7 <body>

8 <aside style="float:right; width:200px;">

9 <h2>Скидки на Microsoft Lumia 950</h2>

10 <p>Только до 31 марта смартфон Microsoft Lumia 950 стоит на 10 000 рублей дешевле. В

11 подарок вы получите бесплатный чупа-чупс. <a href="buy/id=3">Купить</a></p>

12 </aside>

13 <article>

14 <h2>Релиз Samsung Galaxy S7</h2>

15 <p>Состоялcя выход нового флагмана от компании Samsung Galaxt S7. Вместе с новым
флагманом компания
 120

16 Samsung представила новый шлем виртуальной реальности Gear VR...</p>

17 </article>

18 </body>

19 </html>

Здесь содержимое блока aside довольно косвенно связано с основным контентом из элемента article. Поэтому все это содержимое
мы можем поместить в aside.

Элемент main
Последнее обновление: 08.04.2016

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

Используем элемент main:

1 <!DOCTYPE html>
 121

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Семантическая разметка в HTML5</title>

6 </head>

7 <body>

8 <main>

9 <h1>Модели на Snapdragon 808</h1>

10 <p>Смартфоны, оснащенные процессором Snapdragon 808</p>

11

12 <article>

13 <h2>Google Nexus 5X</h2>

14 <p>Nexus 5X представляет компактное и надежное устройство для решения

повседневных задач.
15
Оснащенный 5,2-дюймовым экраном и шестиядерный процессор Snapdragon 808...</p>
16
</article>
17

18
<article>
19
<h2>Microsoft Lumia 950</h2>
20
<p>С помощью Microsoft Display Dock ваш смартфон Lumia 950 Dual SIM с внешним
21
монитором,
22
 122

клавиатурой и мышью превращается в полноценный компьютер...</p>

23 </article>

24 </main>

25 </body>

</html>

Не стоит думать, что абсолютно все содержимое надо обязательно помещать в элемент main. Нет мы также можем использовать
вне его другие элементы, например, header и footer:

1 <body>

2 <header>

3 ..............

4 </header>

5 <main>

6 .................

7 </main>

8 <footer>

9 .................

10 </footer>

11 </body>
 123

Однако надо помнить, что элемент main не может быть вложенным в такие элементы, как article, aside, footer, header, nav. Кроме
того, на веб-странице допустимо наличие только одного элемента main.

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

1 <main role="main">

2 ...

3 </main>

Указание роли позволит IE11 и более старшим версиям IE должным образом интерпретировать элемент.

Основы CSS3. Селекторы

Введение в стили
Последнее обновление: 21.04.2016


 124

Любой html-документ, сколько бы он элементов не содержал, будет по сути "мертвым" без использования стилей. Стили или лучше
сказать каскадные таблицы стилей (Cascading Style Sheets) или попросту CSS определяют представление документа, его
внешний вид. Рассмотрим вкратце применение стилей в контексте HTML5.

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

Определение стиля состоит из двух частей: селектор, который указывает на элемент, и блок объявления стиля - набор
команд, которые устанавливают правила форматирования. Например:

1 div{

2 background-color:red;

3 width: 100px;

4 height: 60px;

5 }

В данном случае селектором является div. Этот селектор указывает, что этот стиль будет применяться ко всем элементам div.

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

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

1 background-color:red;

background-color представляет свойство, а red - значение. Свойство определяет конкретный стиль. Свойств css существует
множество. Например, background-color определяет цвет фона. После двоеточия идет значение для этого свойства. Например,
 125

выше указанная команда определяет для свойства background-color значение red. Иными словами, для фона элемента
устанавливается цвет "red", то есть красный.

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

Наборы таких стилей часто называют таблицами стилей или CSS (Cascading Style Sheets или каскадные таблицы стилей).
Существуют различные способы определения стилей.

Атрибут style

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

<!DOCTYPE html>
1
<html>
2
<head>
3
<meta charset="utf-8">
4
<title>Стили</title>
5
</head>
6
<body>
7
<h2 style="color:blue;">Стили</h2>
8
<div style="width: 100px; height: 100px; background-color:
9
red;"></div>
10
</body>
11
</html>
 126

Здесь определены два элемента - заголовок h2 и блок div. У заголовка определен синий цвет текста с помощью свойства color. У
блока div определены свойства ширины (width), высоты (height), а также цвета фона (background-color).

Второй способ состоит в использования элемента style в документе html. Этот элемент сообщает браузеру, что данные внутри
являются кодом css, а не html:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Стили</title>

6 <style>

7 h2{

8 color:blue;

9 }

10 div{

11 width: 100px;

12 height: 100px;

13 background-color: red;

14 }

15 </style>

16 </head>

17 <body>
 127

18 <h2>Стили</h2>

19 <div></div>

20 </body>

21 </html>

Результат в данном случае будет абсолютно тем же, что и в предыдущем случае.

Часто элемент style определяется внутри элемента head, однако может также использоваться в других частях HTML-документа.
Элемент style содержит наборы стилей. У каждого стиля указывается вначале селектор, после чего в фигурных скобках идет
все те же определения свойств css и их значения, что были использованы в предыдущем примере.

Второй способ делает код html чище за счет вынесения стилей в элемент style. Но также есть и третий способ, который
заключается в вынесении стилей во внешний файл.

Создадим в одной папке с html странице текстовый файл, который переименуем в [Link] и определим в нем следующее
содержимое:

1 h2{

2 color:blue;

3 }

4 div{

5 width: 100px;

6 height: 100px;

7 background-color: red;

8 }
 128

Это те же стили, что были внутри элемента style. И также изменим код html-страницы:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Стили</title>

6 <link rel="stylesheet" type="text/css" href="[Link]"/>

7 </head>

8 <body>

9 <h2>Стили</h2>

10 <div></div>

11 </body>

12 </html>

Здесь уже нет элемента style, зато есть элемент link, который подключает выше созданный файл [Link]: <link
rel="stylesheet" type="text/css" href="[Link]"/>

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

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

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

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <link rel="stylesheet" type="text/css" href="[Link]"/>

5 <style>

6 div{

7 width:200px;

8 }

9 </style>

10 </head>

11 <body>

12 <div style="width:120px;"></div>

13 </body>

14 </html>

А в файле [Link] определен следующий стиль:

1 div{

2 width:50px;
 130

3 height:50px;

4 background-color:red;

5 }

В данном случае в трех местах для элемента div определено свойство width, причем с разным значением. Какое значение будет
применяться к элементу в итоге? Здесь у нас действует следующая система приоритетов:

 Если у элемента определены встроенные стили (inline-стили), то они имеют высший приоритет, то есть в примере выше
итоговой шириной будет 120 пикселей

 Далее в порядке приоритета идут стили, которые определены в элементе style

 Наименее приоритетными стилями являются те, которые определены во внешнем файле.

Атрибуты html и стили css

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

Валидация кода CSS

В процессе написания стилей CSS могут возникать вопросы, а правильно ли так определять стили, корректны ли они. И в этом
случае мы можем воспользоваться валидатором css, который доступен по адресу [Link]

Селекторы
Последнее обновление: 21.04.2016
 131

Определение стиля начинается с селектора. Например:

1 div{

2 width:50px; /* ширина */

3 height:50px; /* высота */

4 background-color:red; /* цвет фона */

5 margin: 10px; /* отступ от других элементов */

6 }

В данном случае селектором является div. Ряд селекторов наследуют название форматируемых элементов, например, div, p, h2 и т.
д. При определении такого селектора его стиль будет применяться ко всем элементам соответствующих данному селектору. То
есть выше определенный стиль будет применяться ко всем элементам <div> на веб-странице:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">
 132

5 <title>Селекторы CSS</title>

6 <style>

7 div{

8 width:50px;

9 height:50px;

10 background-color:red;

11 margin: 10px;

12 }

13 </style>

14 </head>

15 <body>

16 <h2>Селекторы CSS</h2>

17 <div></div>

18 <div></div>

19 <div></div>

20 </body>

21 </html>

Здесь на странице 3 элемента div, и все они будут стилизованы:

 133

Классы

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

Для определения селектора класса в CSS перед названием класса ставится точка:

1 .redBlock{

2 background-color:red;

3 }

Название класса может быть произвольным. Например, в данном случае название класса - "redBlock". Однако при этом в имени
класса разрешается использовать буквы, числа, дефисы и знаки подчеркивания, причем начинать название класса должно
обязательно с буквы.

Также стоит учитывать регистр имен: названия "article" и "ARTICLE" будут представлять разные классы.

После определения класса мы можем его применить к элементу с помощью атрибута class. Например:

1 <div class="redBlock"></div>

Определим и используем несколько классов:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Классы CSS</title>
 134

6 <style>

7 div{

8 width: 50px;

9 height: 50px;

10 margin: 10px;

11 }

12 .redBlock{

13 background-color: red;

14 }

15 .blueBlock{

16 background-color: blue;

17 }

18 </style>

19 </head>

20 <body>

21 <h2>Классы CSS</h2>

22 <div class="redBlock"></div>

23 <div class="blueBlock"></div>

24 <div class="redBlock"></div>

25 </body>

26 </html>
 135

Идентификаторы

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

1 <div id="header"></div>

Определение стилей для идентификаторов аналогично определению классов, только вместо точки ставится символ решетки #:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Идентификаторы CSS</title>

6 <style>

7 div{

8 margin: 10px;

9 border: 1px solid #222;

10 }

11 #header{

12 height: 80px;

13 background-color: #ccc;
 136

14 }

15 #content{

16 height: 180px;

17 background-color: #eee;

18 }

19 #footer{

20 height: 80px;

21 background-color: #ccc;

22 }

23 </style>

24 </head>

25 <body>

26 <div id="header">Шапка сайта</div>

27 <div id="content">Основное содержимое</div>

28 <div id="footer">Футер</div>

29 </body>

30 </html>

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

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

Кроме селекторов тегов, классов и идентификаторов в css также есть так называемый универсальный селектор, который
представляет знак звездочки (*). Он применяет стили ко всем элементам на html-странице:

1 *{

2 background-color: red;

3 }

Стилизация группы селекторов

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

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Селекторы CSS</title>

6 <style>

7 h1, h2, h3, h4{

9 color: red;

10 }
 138

11 </style>

12 </head>

13 <body>

14 <h1>CSS3<h1>

15 <h2>Селекторы</h2>

16 <h3>Группа селекторов</h3>

17 <p>Некоторый текст...</p>

18 </body>

19 </html>

Группа селекторов может содержать как селекторы тегов, так и селекторы классов и идентификаторов, например:

1 h1, #header, .redBlock{

3 color: red;

4 }

Селекторы потомков
Последнее обновление: 21.04.2016


 139

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

Например, пусть элемент body на веб-странице имеет следующее содержимое:

1 <body>

2 <h2>Заголовок</h2>

3 <div>

4 <p>Текст</p>

5 </div>

6 </body>

Внутри элемента body определено три вложенных элемента: h2, div, p. Все эти элемены являются потомками элемента body.

А внутри элемента div определен только один вложенный элемент - p, поэтому элемент div имеет только одного потомка.

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

1 <!DOCTYPE html>

2 <html>
 140

3 <head>

4 <meta charset="utf-8">

5 <title>Селекторы CSS</title>

6 <style>

7 #main p{

8 font-size: 16px;

9 }

10 #footer p{

11 font-size: 13px;

12 }

13 </style>

14 </head>

15 <body>

16 <div id="main">

17 <p>Первый абзац</p>

18 <p>Второй абзац</p>

19 </div>

20 <div id="footer">

21 <p>Текст футера</p>

22 </div>

23 </body>
 141

24 </html>

Для применения стиля к вложенному элементу селектор должен содержать вначале родительский элемент и затем вложенный:

1 #main p{

2 font-size: 16px;

3 }

То есть данный стиль будет применяться только к тем элементам p, которые находятся внутри элемента с идентификатором main.

Рассмотрим другой пример:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Селекторы CSS</title>

6 <style>

7 li .redLink{

8 color: red;

9 }

10 </style>
 142

11 </head>

12 <body>

13 <ul>

14 <li>Самсунг: <a class="redLink">Galaxy S7 Edge</a></li>

15 <li>Apple: <a>iPhome SE</a></li>

16 <li>LG: <a class="redLink">LG G5</a></li>

17 <li>Microsoft: <a>Lumia 650</a></li>

18 </ul>

19 </body>

20 </html>

Здесь стиль применяется к элементам с классом "redLink", которые находятся внутри элемента <li>. И соответственно браузер
окрасит эти элементы в красный цвет:

Но обратите внимание на пробел: li .redLink. Данный пробел играет большое значение и указывает как раз, что элементы с
классом redLink должны быть вложенными по отношению к элементу <li>

Но если мы уберем пробел:

1 [Link]{

2 color: red;

3 }
 143

то смысл селектора изменится. Теперь будет подразумеваться, что стиль применяется к элементам <li>, которые имеют
класс redLink. Например, к следующему элементу:

1 <li class="redLink">Microsoft: <a>Lumia 650</a></li>

Но никак не к элементу:

1 <li>LG: <a class="redLink">LG G5</a></li>

Селекторы дочерних элементов

Последнее обновление: 21.04.2016

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

1 <body>

2 <h2>Заголовок</h2>

3 <div>

4 <p>Текст</p>
 144

5 </div>

6 </body>

Хотя вложенными в элемент body элементами являются целых три - h2, div, p, но дочерними из них являются только два - div и h2,
так как они находятся в первом уровне вложенности. А элемент p находится на втором уровне вложенности, так как вложен внутрь
элемента div, а не просто элемента body.

Для обращения к дочерним элементам используется знак угловой скобки:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Селекторы атрибутов в CSS3</title>

6 <style>

7 .article > p{

9 color: red;

10 }

11 </style>

12 </head>

13 <body>

14 <div class="article">
 145

15 <p>Аннотация к статье</p>

16 <div class="content">

17 <p>Текст статьи</p>

18 </div>

19 </div>

20 </body>

21 </html>

В блоке с классом article есть два параграфа. Селектор .article > p выбирает только те параграфы, который находятся
непосредственно в блоке article:

Если бы мы использовали другой селектор без символа >

1 .article p{

3 color: red;

4 }

Тогда стиль бы применялся ко всем параграфам на всех уровнях вложенности:

Селекторы элементов одного уровня

Последнее обновление: 21.04.2016
 146

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

1 <body>

2 <h2>Заголовок</h2>

3 <div>

4 <p>Текст первого блока</p>

5 </div>

6 <div>

7 <p>Текст второго блока</p>

8 </div>

9 </body>

Здесь элементы h2 и оба блока div являются смежными, так как находятся на одном уровне. А элементы параграфов и заголовок h2
не являются смежными, так как параграфы вложены в блоки div.

Чтобы стилизовать первый смежный элемент по отношению к определенному элементу, используется знак плюса +:

1 <!DOCTYPE html>
 147

2
<html>
3
<head>
4
<meta charset="utf-8">
5
<title>Селекторы в CSS3</title>
6
<style>
7
h2+div { color: red; }
8
</style>
9
</head>
10
<body>
11
<h2>Заголовок</h2>
12
<div>
13
<p>Текст первого блока</p>
14
</div>
15
<div>
16
<p>Текст второго блока</p>
17
</div>
18
</body>
19
</html>

Селектор h2+div позволяет определить стиль (в данном случае красный цвет текста) для блока div, который идет непосредственно
после заголовка h2:
 148

Причем этот селектор будет стилизовать блок div, если он будет идти непосредственно после заголовка. Если же между
заголовком и блоков div будет находиться еще какой-либо элемент, то к нему не будет применяться стиль, например:

1 <h2>Заголовок</h2>

3 <p>Элемент между заголовком и блоком div</p>

5 <div>

6 <p>Текст первого блока</p>

7 </div>

Если нам надо стилизовать вообще все смежные элементы одного уровня, неважно непосредственно идут они после
определенного элемента или нет, то в этом случае вместо знака плюса необходимо использовать знак тильды "~":

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Селекторы в CSS3</title>

6 <style>

7 h2~div { color: red; }

 149

8 </style>

9 </head>

10 <body>

11 <h2>Заголовок</h2>

12 <p>Аннотация</p>

13 <div>

14 <p>Текст первого блока</p>

15 </div>

16 <div>

17 <p>Текст второго блока</p>

18 </div>

19 </body>

20 </html>

Псевдоклассы
Последнее обновление: 21.04.2016


 150

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

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

 :root: позволяет выбрать корневой элемент веб-страницы, наверное наименее полезный селектор, так как на правильной
веб-странице корневым элементом практически всегда является элемент <html>

 :link: применяется к ссылкам и представляет ссылку в обычном состоянии, по которой еще не совершен переход

 :visited: применяется к ссылкам и представляет ссылку, по которой пользователь уже переходил

 :active: применяется к ссылкам и представляет ссылку в тот момент, когда пользователь осуществляет по ней переход

 :hover: представляет элемент, на который пользователь навел указатель мыши. Применяется преимущественно к ссылкам,
однако может также применяться и к другим элементам, например, к параграфам

 :focus: представляет элемент, который получает фокус, то есть когда пользователь нажимает клавишу табуляции или
нажимает кнопкой мыши на поле ввода (например, текстовое поле)

 :not: позволяет исключить элементы из списка элементов, к которым применяется стиль

 :lang: стилизует элементы на основании значения атрибута lang

 :empty: выбирает элементы, которые не имеют вложенных элементов, то есть являются пустыми

При применении псевдоклассов перед ними всегда ставится двоеточие. Например, стилизуем ссылки, используя псевдоклассы:

1 <!DOCTYPE html>

2 <html>
 151

3 <head>

4 <meta charset="utf-8">

5 <title>Псевдоклассы в CSS3</title>

6 <style>

7 a:link {color:blue; text-decoration:none}

8 a:visited {color:pink; text-decoration:none}

9 a:hover {color:red; text-decoration:underline}

10 a:active {color:yellow; text-decoration:underline}

11 input:hover {border:2px solid red;}

12 </style>

13 </head>

14 <body>

15 <a href="[Link]">Учебник по CSS3</a>

16 <input type="text" />

17 </body>

18 </html>

Селектор :not

Селектор :not() позволяет выбрать все элементы кроме определенных, то есть исключить некоторые элементы из выбора.

1 <!DOCTYPE html>
 152

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Селекторы в CSS3</title>

6 <style>

7 a:not(.blueLink) { color: red; }

8 </style>

9 </head>

10 <body>

11 <a>Первая ссылка</a><br/>

12 <a class="blueLink">Вторая ссылка</a><br/>

13 <a>Третья ссылка</a>

14 </body>

15 </html>

Селектор a:not(.blueLink) применяет стиль ко всем ссылкам за исключением тех, которые имеют класс "blueLink". В скобки
псевдоклассу not передается селектор элементов, которые надо исключить.

Псевдокласс :lang

Селектор :lang выбирает элементы на основании атрибута lang:

1 <!DOCTYPE html>
 153

2
<html>
3
<head>
4
<meta charset="utf-8">
5
<title>Селекторы в CSS3</title>
6
<style>
7
:lang(ru) {
8
color: red;
9
}
10
</style>
11
</head>
12
<body>
13
<form>
14
<p lang="ru-RU">Я изучаю CSS3</p>
15
<p lang="en-US">I study CSS3</p>
16
<p lang="de-DE">Ich lerne CSS3</p>
17
</form>
18
</body>
19
</html>

Псевдоклассы дочерних элементов

 154

Последнее обновление: 21.04.2016

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

 :first-child: представляет элемент, который является первым дочерним элементом

 :last-child: представляет элемент, который является последним дочерним элементом

 :only-child: представляет элемент, который является единственным дочерним элементом в каком-нибудь контейнере

 :only-of-type: выбирает элемент, который является единственным элементом определенного типа (тега) в каком-нибудь
контейнере

 :nth-child(n): представляет дочерний элемент, который имеет определенный номер n, например, второй дочерний элемент

 :nth-last-child(n): представляет дочерний элемент, который имеет определенный номер n, начиная с конца

 :nth-of-type(n): выбирает дочерний элемент определенного типа, который имеет определенный номер

 :nth-last-of-type(n): выбирает дочерний элемент определенного типа, который имеет определенный номер, начиная с конца

Псевдокласс first-child

Используем псевдокласс first-child для выбора первых ссылок в блоках:

 155

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Селекторы в CSS3</title>

6 <style>

7 a:first-child{

9 color: red;

10 }

11 </style>

12 </head>

13 <body>

14 <h3>Планшеты</h3>

15 <div>

16 <a>Microsoft Surface Pro 4</a><br/>

17 <a>Apple iPad Pro</a><br/>

18 <a>ASUS ZenPad Z380KL</a>

19 </div>

20 <h3>Смартфоны</h3>

21 <div>
 156

22 <p>Топ-смартфоны 2016</p>

23 <a>Samsung Galaxy S7</a><br/>

24 <a>Apple iPhone SE</a><br/>

25 <a>Huawei P9</a>

26 </div>

27 </body>

28 </html>

Стиль по селектору a:first-child применяется к ссылке, если она является первым дочерним элементом любого элемента.

В первом блоке элемент ссылки является первым дочерним элементом, поэтому к нему применяется определенный стиль.

А во втором блоке первым элементом является параграф, поэтому ни к одной ссылке не применяется стиль.

Псевдокласс last-child

Используем псевдокласс last-child:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Селекторы в CSS3</title>
 157

6 <style>

7 a:last-child{

9 color: blue;

10 }

11 </style>

12 </head>

13 <body>

14 <h3>Смартфоны</h3>

15 <div>

16 <a>Samsung Galaxy S7</a><br/>

17 <a>Apple iPhone SE</a><br/>

18 <a>Huawei P9</a>

19 </div>

20 <h3>Планшеты</h3>

21 <div>

22 <a>Microsoft Surface Pro 4</a><br/>

23 <a>Apple iPad Pro</a><br/>

24 <a>ASUS ZenPad Z380KL</a>

25 <p>Данные за 2016</p>

26 </div>
 158

27 </body>

28 </html>

Селектор a:last-child определяет стиль для ссылок, которые являются последними дочерними элементами.

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

Селектор only-child

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

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Селекторы в CSS3</title>

6 <style>

7 p:only-child{

8 color:red;

9 }

10 </style>

11 </head>
 159

12 <body>

13 <h2>Заголовок</h2>

14 <div>

15 <p>Текст1</p>

16 </div>

17 <div>

18 <p>Текст2</p>

19 <p>Текст3</p>

20 </div>

21 <div>

22 <p>Текст4</p>

23 </div>

24 </body>

25 </html>

Параграфы с текстами "Текст1" и "Текст4" являются единственными дочерними элементами в своих внешних контейнерах, поэтому
к ним применяется стиль - красный цвет шрифта.

Псевдокласс only-of-type
 160

Псевдокласс only-of-type выбирает элемент, который является единственным элементом определенного типа в контейнере.
Например, единственный элемент div, при этом элементов других типов в этом же контейнере может быть сколько угодно.

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Селекторы в CSS3</title>

6 <style>

7 span:only-of-type{

9 color: green; /* зеленый цвет */

10 }

11 p:only-of-type{

12

13 color: red; /* красный цвет */

14 }

15 div:only-of-type{

16

17 color: blue; /* синий цвет */

18 }

19 </style>
 161

20 </head>

21 <body>

22 <div>

23 Header

24 </div>

25 <p>Единственный параграф и <span>элемент спан</span></p>

26 <div>

27 Footer

28 </div>

29 </body>

30 </html>

Хотя для элементов div определен стиль, он не будет применяться, так как в контейнере body находится два элемента div, а не
один. Зато в body есть только один элемент p, поэтому он получит стилизацию. И также в контейнере p есть только один элемент
span, поэтому он также будет стилизован.

Псевдокласс nth-child

Псевдокласс nth-child позволяет стилизовать каждый второй, третий элемент, только четные или только нечетные элементы и т.д.

Например, стилизуем четные и нечетные строки таблицы:

1 <!DOCTYPE html>
 162

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Селекторы в CSS3</title>

6 <style>

7 tr:nth-child(odd) { background-color: #bbb; }

8 tr:nth-child(even) { background-color: #fff; }

9 </style>

10 </head>

11 <body>

12 <h3>Смартфоны</h3>

13 <table>

14 <tr><td>Samsung</td><td>Galaxy S7
Edge</td><td>60000</td></tr>
15
<tr><td>Apple</td><td>iPhone SE</td><td>39000</td></tr>
16
<tr><td>Microsoft</td><td>Lumia 650</td><td>13500</td></tr>
17
<tr><td>Alcatel</td><td>Idol S4</td><td>30000</td></tr>
18
<tr><td>Huawei</td><td>P9</td><td>60000</td></tr>
19
<tr><td>HTC</td><td>HTC 10</td><td>50000</td></tr>
20
<tr><td>Meizu</td><td>Pro 6</td><td>40000</td></tr>
21
<tr><td>Xiaomi</td><td>Mi5</td><td>35000</td></tr>
22
 163

</table>
23
</body>
24
</html>

Чтобы определить стиль для нечетных элементов, в селектор передается значение "odd":

1 tr:nth-child(odd){}

Для стилизации четных элементов в селектор передается значение "even":

1 tr:nth-child(even){}

Также в этот селектор мы можем передать номер стилизуемого элемента:

1 tr:nth-child(3) { background-color: #bbb; }

В данном случае стилизуется третья строка.

Еще одну возможность представляет использование заменителя для номера, который выражается буквой n:

1 tr:nth-child(2n+1) { background-color: #bbb; }

Здесь стиль применяется к каждой второй нечетной строке.

 164

Число перед n (в данном случае 2) представляет тот дочерний элемент, который будет выделен следующим. Число, которое идет
после знака плюс, показывают, с какого элемента нужно начинать выделение, то есть, +1 означает, что нужно начинать с первого
дочернего элемента.

Таким образом, в данном случае выделение начинается с 1-го элемента, а следующим выделяется 2 * 1 + 1 = 3-й элемент, далее 2 *
2 + 1 = 5-й элемент и так далее.

К примеру, если мы хотим выделить каждый третий элемент, начиная со второго, то мы могли бы написать:

1 tr:nth-child(3n+2) { background-color: #bbb; }

Псевдокласс :nth-last-child по сути предоставляет ту же самую функциональность, только отсчет элементов идет не с начала, а с
конца:

1 tr:nth-last-child(2) {

2 background-color: #bbb; /* 2 строка с конца, то есть предпоследняя */

3 }

4 tr:nth-last-child(2n+1) {

5 background-color: #eee; /* нечетные строки, начиная с конца */

6 }

Псевдокласс nth-of-type

Псевдокласс :nth-of-type позволяет выбрать дочерний элемент определенного типа по определенному номеру:
 165

1 tr:nth-of-type(2) {

2 background-color: #bbb;

3 }

Аналогично работает псевдокласс nth-last-of-type, только теперь отсчет элементов идет с конца:

1 tr:nth-last-of-type(2n) {

2 background-color: #bbb;

3 }

Псевдоклассы форм
Последнее обновление: 21.04.2016

Ряд псевдоклассов используется для работы с элементами форм:

 :enabled: выбирает элемент, если он доступен для выбора (то есть у него не установлен атрибут disabled)

 :disabled: выбирает элемент, если он не доступен для выбора (то есть у него установлен атрибут disabled)

 :checked: выбирает элемент, если у него установлен атрибут checked (для флажков и радиокнопок)
 166

 :default: выбирает элементы по умолчанию

 :valid: выбирает элемент, если его значение проходит валидацию HTML5

 :invalid: выбирает элемент, если его значение не проходит валидацию

 :in-range: выбирает элемент, если его значение находится в определенном диапазоне (для элементов типа ползунка)

 :out-of-range: выбирает элемент, если его значение не находится в определенном диапазоне

 :required: выбирает элемент, если у него установлен атрибут required

 :optional: выбирает элемент, если у него не установлен атрибут required

Псевдоклассы enabled и disabled

Псевдоклассы enabled и disabled выбирают элементы форм в зависимости от того, установлен ли у них атрибут disabled:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Селекторы в CSS3</title>

6 <style>

7 :enabled {

8 border: 2px black solid;

9 color: red;
 167

10 }

11 </style>

12 </head>

13 <body>

14 <p><input type="text" value="Enabled" /></p>

15 <p><input type="text" disabled value="Disabled" /></p>

16 </body>

17 </html>

Псевдокласс checked

Псевдокласс checked стилизует элементы формы, у которых установлен атрибут checked:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Селекторы в CSS3</title>

6 <style>

7 :checked + span {

8 color: red;
 168

9 font-weight: bold; /* выделение жирным */

10 }

11 </style>

12 </head>

13 <body>

14 <h2>Выберите технологию</h2>

15 <p>

16 <input type="checkbox" checked name="html5"/><span>HTML5</span>

17 </p>

18 <p>

19 <input type="checkbox" name="dotnet"/><span>.NET</span>

20 </p>

21 <p>

22 <input type="checkbox" name="java"/><span>Java</span>

23 </p>

24

25 <h2>Укажите пол</h2>

26 <p>

27 <input type="radio" value="man" checked

name="gender"/><span>мужской</span>
28
</p>
29
 169

<p>
30 <input type="radio" value="woman"
31 name="gender"/><span>женский</span>

32 </p>

33 </body>

</html>

Селектор :checked + span позволяет выбрать элемент, соседний с отмеченным элементом формы.

Псевдокласс default

Псевдокласс :default выбирает стандартный элемент на форме. Как правило, в роли такого элемента выступает кнопка отправки:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Селекторы в CSS3</title>

6 <style>

7 :default {

8 border: 2px solid red;

9 }
 170

10 </style>

11 </head>

12 <body>

13 <form>

14 <input name="login"/>

15 <input type="submit" value="Войти" />

16 </form>

17 </body>

18 </html>

Псевдоклассы valid и invalid

Псевдоклассы :valid и :invalid стилизуют элементы формы в зависимости от того, проходят они валидацию или нет.

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Селекторы в CSS3</title>

6 <style>

7 input:invalid {
 171

border: 2px solid red;

8
}
9
input:valid {
10
border: 2px solid green;
11
}
12
</style>
13
</head>
14
<body>
15
<form>
16
<p><input type="text" name="login" placeholder="Введите логин" required /></p>
17
<p><input type="password" name="password" placeholder="Введите пароль" required
18
/></p>
19
<input type="submit" value="Войти" />
20
</form>
21
</body>
22
</html>

Псевдоклассы in-range и out-of-range

Псевдоклассы :in-range и :out-of-range стилизуют элементы формы в зависимости от того, попадает ли их значение в
определенный диапазон. Это в первую очередь относится к элементу <input type="number" >.
 172

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Селекторы в CSS3</title>

6 <style>

7 :in-range {

8 border: 2px solid green;

9 }

10 :out-of-range {

11 border: 2px solid red;

12 }

13 </style>

14 </head>

15 <body>

16 <form>

17 <p>

18 <label for="age">Ваш возраст:</label>

19 <input type="number" min="1" max="100" value="10" id="age"

name="age"/>
20
</p>
21
 173

<input type="submit" value="Отправить" />

22
</form>
23
</body>
24
</html>

Здесь атрибуты min и max задают диапазон, в которое должно попадать вводимое в поле значение:

Псевдоклассы required и optional

Псевдоклассы :required и :optional стилизуют элемент в зависимости от того, установлен ли у него атрибут required:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Селекторы в CSS3</title>

6 <style>

7 :optional {

8 border: 2px solid blue;

9 }

10 :required {
 174

11 border: 2px solid red;

12 }

13 </style>

14 </head>

15 <body>

16 <form>

17 <p>

18 <label for="login">Логин:</label>

19 <input type="text" id="login" name="login" required />

20 </p>

21 <p>

22 <label for="password">Пароль:</label>

23 <input type="password" id="password" name="password"

required />
24
</p>
25
<p>
26
<label for="name">Имя:</label>
27
<input type="text" id="name" name="name"/>
28
</p>
29
<input type="submit" value="Регистрация" />
30
</form>
31
 175

</body>
32
</html>

Псевдоэлементы
Последнее обновление: 21.04.2016


 176

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

 ::first-letter: позволяет выбрать первую букву из текста

 ::first-line: стилизует первую строку текста

 ::before: добавляет сообщение до определенного элемента

 ::after: добавляет сообщение после определенного элемента

 ::selection: выбирает выбранные пользователем элементы

В CSS2 перед псевдоэлементами, как и перед псевдоклассами, ставилось одно двоеточие. В CSS3 для отличия их от псевдоклассов
псевдоэлементы стали предваряться двумя двоеточиями. Однако для совместимости с более старыми браузерами, которые не
поддерживают CSS3, допустимо использование одного двоеточия: :before.

Стилизуем текст, используя псевдоэлементы first-letter и first-line:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Псевдоклассы в CSS3</title>

6 <style>

7 ::first-letter { color:red; font-size: 25px; }

8 ::first-line { font-size: 20px; }

 177

</style>
9
</head>
10
<body>
11
<p>Но он ничего не видал. Над ним не было ничего уже, кроме неба, — высокого неба, не ясного, но все-таки неизмери
12
серыми облаками.</p>
13
</body>
14
</html>

Используем псевдоэлементы before и after:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Псевдоклассы в CSS3</title>

6 <style>

7 .warning::before{ content: "Важно! "; font-weight: bold; }

8 .warning::after { content: " Будьте осторожны!"; font-weight: bold;}

9 </style>

10 </head>

11 <body>
 178

<p><span class="warning">Не пытайтесь засунуть язык в электрическую

12
розетку.</span></p>
13
</body>
14
</html>

Здесь псевдоэлеметы применяются к элементу с классом warning. Оба псевдоэлемента принимают свойство content, которое
хранит вставляемый текст. И также для повышения внимания псевдоэлементы используют выделение текста жирным с помощью
свойства font-weight: bold;.

Используем псевдоэлемент selection для стилизации выбранных элементов:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Псевдоэлементы в CSS3</title>

6 <style>

7 ::selection {

8 color: white;

9 background-color: black;

10 }

11 </style>
 179

12 </head>

13 <body>

14 <p>Пседвоэлементы в CSS3 позволяют форматировать текст.</p>

15 </body>

16 </html>

Основы CSS3. Селекторы

Введение в стили
Последнее обновление: 21.04.2016


 180

Любой html-документ, сколько бы он элементов не содержал, будет по сути "мертвым" без использования стилей. Стили или лучше
сказать каскадные таблицы стилей (Cascading Style Sheets) или попросту CSS определяют представление документа, его
внешний вид. Рассмотрим вкратце применение стилей в контексте HTML5.

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

Определение стиля состоит из двух частей: селектор, который указывает на элемент, и блок объявления стиля - набор
команд, которые устанавливают правила форматирования. Например:

1 div{

2 background-color:red;

3 width: 100px;

4 height: 60px;

5 }

В данном случае селектором является div. Этот селектор указывает, что этот стиль будет применяться ко всем элементам div.

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

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

1 background-color:red;
 181

background-color представляет свойство, а red - значение. Свойство определяет конкретный стиль. Свойств css существует
множество. Например, background-color определяет цвет фона. После двоеточия идет значение для этого свойства. Например,
выше указанная команда определяет для свойства background-color значение red. Иными словами, для фона элемента
устанавливается цвет "red", то есть красный.

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

Наборы таких стилей часто называют таблицами стилей или CSS (Cascading Style Sheets или каскадные таблицы стилей).
Существуют различные способы определения стилей.

Атрибут style

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

<!DOCTYPE html>
1
<html>
2
<head>
3
<meta charset="utf-8">
4
<title>Стили</title>
5
</head>
6
<body>
7
<h2 style="color:blue;">Стили</h2>
8
<div style="width: 100px; height: 100px; background-color:
9
red;"></div>
10
</body>
11
</html>
 182

Здесь определены два элемента - заголовок h2 и блок div. У заголовка определен синий цвет текста с помощью свойства color. У
блока div определены свойства ширины (width), высоты (height), а также цвета фона (background-color).

Второй способ состоит в использования элемента style в документе html. Этот элемент сообщает браузеру, что данные внутри
являются кодом css, а не html:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Стили</title>

6 <style>

7 h2{

8 color:blue;

9 }

10 div{

11 width: 100px;

12 height: 100px;

13 background-color: red;

14 }

15 </style>
 183

16 </head>

17 <body>

18 <h2>Стили</h2>

19 <div></div>

20 </body>

21 </html>

Результат в данном случае будет абсолютно тем же, что и в предыдущем случае.

Часто элемент style определяется внутри элемента head, однако может также использоваться в других частях HTML-документа.
Элемент style содержит наборы стилей. У каждого стиля указывается вначале селектор, после чего в фигурных скобках идет
все те же определения свойств css и их значения, что были использованы в предыдущем примере.

Второй способ делает код html чище за счет вынесения стилей в элемент style. Но также есть и третий способ, который
заключается в вынесении стилей во внешний файл.

Создадим в одной папке с html странице текстовый файл, который переименуем в [Link] и определим в нем следующее
содержимое:

1 h2{

2 color:blue;

3 }

4 div{

5 width: 100px;

6 height: 100px;
 184

7 background-color: red;

8 }

Это те же стили, что были внутри элемента style. И также изменим код html-страницы:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Стили</title>

6 <link rel="stylesheet" type="text/css" href="[Link]"/>

7 </head>

8 <body>

9 <h2>Стили</h2>

10 <div></div>

11 </body>

12 </html>

Здесь уже нет элемента style, зато есть элемент link, который подключает выше созданный файл [Link]: <link
rel="stylesheet" type="text/css" href="[Link]"/>

Таким образом, определяя стили во внешнем файле, мы делаем код html чище, структура страницы отделяется от ее стилизации.
При таком определении стили гораздо легче модифицировать, чем если бы они были определены внутри элементов или в
элементе style, и такой способ является предпочтительным в HTML5.
 185

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

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

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <link rel="stylesheet" type="text/css" href="[Link]"/>

5 <style>

6 div{

7 width:200px;

8 }

9 </style>

10 </head>

11 <body>

12 <div style="width:120px;"></div>

13 </body>

14 </html>

А в файле [Link] определен следующий стиль:

 186

1 div{

2 width:50px;

3 height:50px;

4 background-color:red;

5 }

В данном случае в трех местах для элемента div определено свойство width, причем с разным значением. Какое значение будет
применяться к элементу в итоге? Здесь у нас действует следующая система приоритетов:

 Если у элемента определены встроенные стили (inline-стили), то они имеют высший приоритет, то есть в примере выше
итоговой шириной будет 120 пикселей

 Далее в порядке приоритета идут стили, которые определены в элементе style

 Наименее приоритетными стилями являются те, которые определены во внешнем файле.

Атрибуты html и стили css

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

Валидация кода CSS

В процессе написания стилей CSS могут возникать вопросы, а правильно ли так определять стили, корректны ли они. И в этом
случае мы можем воспользоваться валидатором css, который доступен по адресу [Link]
 187

Селекторы
Последнее обновление: 21.04.2016

Определение стиля начинается с селектора. Например:

1 div{

2 width:50px; /* ширина */

3 height:50px; /* высота */

4 background-color:red; /* цвет фона */

5 margin: 10px; /* отступ от других элементов */

6 }

В данном случае селектором является div. Ряд селекторов наследуют название форматируемых элементов, например, div, p, h2 и т.
д. При определении такого селектора его стиль будет применяться ко всем элементам соответствующих данному селектору. То
есть выше определенный стиль будет применяться ко всем элементам <div> на веб-странице:

1 <!DOCTYPE html>

2 <html>
 188

3 <head>

4 <meta charset="utf-8">

5 <title>Селекторы CSS</title>

6 <style>

7 div{

8 width:50px;

9 height:50px;

10 background-color:red;

11 margin: 10px;

12 }

13 </style>

14 </head>

15 <body>

16 <h2>Селекторы CSS</h2>

17 <div></div>

18 <div></div>

19 <div></div>

20 </body>

21 </html>

Здесь на странице 3 элемента div, и все они будут стилизованы:

 189

Классы

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

Для определения селектора класса в CSS перед названием класса ставится точка:

1 .redBlock{

2 background-color:red;

3 }

Название класса может быть произвольным. Например, в данном случае название класса - "redBlock". Однако при этом в имени
класса разрешается использовать буквы, числа, дефисы и знаки подчеркивания, причем начинать название класса должно
обязательно с буквы.

Также стоит учитывать регистр имен: названия "article" и "ARTICLE" будут представлять разные классы.

После определения класса мы можем его применить к элементу с помощью атрибута class. Например:

1 <div class="redBlock"></div>

Определим и используем несколько классов:

1 <!DOCTYPE html>

2 <html>

3 <head>
 190

4 <meta charset="utf-8">

5 <title>Классы CSS</title>

6 <style>

7 div{

8 width: 50px;

9 height: 50px;

10 margin: 10px;

11 }

12 .redBlock{

13 background-color: red;

14 }

15 .blueBlock{

16 background-color: blue;

17 }

18 </style>

19 </head>

20 <body>

21 <h2>Классы CSS</h2>

22 <div class="redBlock"></div>

23 <div class="blueBlock"></div>

24 <div class="redBlock"></div>
 191

25 </body>

26 </html>

Идентификаторы

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

1 <div id="header"></div>

Определение стилей для идентификаторов аналогично определению классов, только вместо точки ставится символ решетки #:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Идентификаторы CSS</title>

6 <style>

7 div{

8 margin: 10px;

9 border: 1px solid #222;

10 }

11 #header{
 192

12 height: 80px;

13 background-color: #ccc;

14 }

15 #content{

16 height: 180px;

17 background-color: #eee;

18 }

19 #footer{

20 height: 80px;

21 background-color: #ccc;

22 }

23 </style>

24 </head>

25 <body>

26 <div id="header">Шапка сайта</div>

27 <div id="content">Основное содержимое</div>

28 <div id="footer">Футер</div>

29 </body>

30 </html>
 193

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

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

Кроме селекторов тегов, классов и идентификаторов в css также есть так называемый универсальный селектор, который
представляет знак звездочки (*). Он применяет стили ко всем элементам на html-странице:

1 *{

2 background-color: red;

3 }

Стилизация группы селекторов

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

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Селекторы CSS</title>

6 <style>

7 h1, h2, h3, h4{

8
 194

9 color: red;

10 }

11 </style>

12 </head>

13 <body>

14 <h1>CSS3<h1>

15 <h2>Селекторы</h2>

16 <h3>Группа селекторов</h3>

17 <p>Некоторый текст...</p>

18 </body>

19 </html>

Группа селекторов может содержать как селекторы тегов, так и селекторы классов и идентификаторов, например:

1 h1, #header, .redBlock{

3 color: red;

4 }

Селекторы потомков
Последнее обновление: 21.04.2016
 195

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

Например, пусть элемент body на веб-странице имеет следующее содержимое:

1 <body>

2 <h2>Заголовок</h2>

3 <div>

4 <p>Текст</p>

5 </div>

6 </body>

Внутри элемента body определено три вложенных элемента: h2, div, p. Все эти элемены являются потомками элемента body.

А внутри элемента div определен только один вложенный элемент - p, поэтому элемент div имеет только одного потомка.

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

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Селекторы CSS</title>

6 <style>

7 #main p{

8 font-size: 16px;

9 }

10 #footer p{

11 font-size: 13px;

12 }

13 </style>

14 </head>

15 <body>

16 <div id="main">

17 <p>Первый абзац</p>

18 <p>Второй абзац</p>

19 </div>

20 <div id="footer">

21 <p>Текст футера</p>
 197

22 </div>

23 </body>

24 </html>

Для применения стиля к вложенному элементу селектор должен содержать вначале родительский элемент и затем вложенный:

1 #main p{

2 font-size: 16px;

3 }

То есть данный стиль будет применяться только к тем элементам p, которые находятся внутри элемента с идентификатором main.

Рассмотрим другой пример:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Селекторы CSS</title>

6 <style>

7 li .redLink{

8 color: red;
 198

9 }

10 </style>

11 </head>

12 <body>

13 <ul>

14 <li>Самсунг: <a class="redLink">Galaxy S7 Edge</a></li>

15 <li>Apple: <a>iPhome SE</a></li>

16 <li>LG: <a class="redLink">LG G5</a></li>

17 <li>Microsoft: <a>Lumia 650</a></li>

18 </ul>

19 </body>

20 </html>

Здесь стиль применяется к элементам с классом "redLink", которые находятся внутри элемента <li>. И соответственно браузер
окрасит эти элементы в красный цвет:

Но обратите внимание на пробел: li .redLink. Данный пробел играет большое значение и указывает как раз, что элементы с
классом redLink должны быть вложенными по отношению к элементу <li>

Но если мы уберем пробел:

1 [Link]{
 199

2 color: red;

3 }

то смысл селектора изменится. Теперь будет подразумеваться, что стиль применяется к элементам <li>, которые имеют
класс redLink. Например, к следующему элементу:

1 <li class="redLink">Microsoft: <a>Lumia 650</a></li>

Но никак не к элементу:

1 <li>LG: <a class="redLink">LG G5</a></li>

Селекторы дочерних элементов

Последнее обновление: 21.04.2016

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

1 <body>

2 <h2>Заголовок</h2>
 200

3 <div>

4 <p>Текст</p>

5 </div>

6 </body>

Хотя вложенными в элемент body элементами являются целых три - h2, div, p, но дочерними из них являются только два - div и h2,
так как они находятся в первом уровне вложенности. А элемент p находится на втором уровне вложенности, так как вложен внутрь
элемента div, а не просто элемента body.

Для обращения к дочерним элементам используется знак угловой скобки:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Селекторы атрибутов в CSS3</title>

6 <style>

7 .article > p{

9 color: red;

10 }

11 </style>

12 </head>
 201

13 <body>

14 <div class="article">

15 <p>Аннотация к статье</p>

16 <div class="content">

17 <p>Текст статьи</p>

18 </div>

19 </div>

20 </body>

21 </html>

В блоке с классом article есть два параграфа. Селектор .article > p выбирает только те параграфы, который находятся
непосредственно в блоке article:

Если бы мы использовали другой селектор без символа >

1 .article p{

3 color: red;

4 }

Тогда стиль бы применялся ко всем параграфам на всех уровнях вложенности:

 202

Селекторы элементов одного уровня

Последнее обновление: 21.04.2016

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

1 <body>

2 <h2>Заголовок</h2>
 203

3 <div>

4 <p>Текст первого блока</p>

5 </div>

6 <div>

7 <p>Текст второго блока</p>

8 </div>

9 </body>

Здесь элементы h2 и оба блока div являются смежными, так как находятся на одном уровне. А элементы параграфов и заголовок h2
не являются смежными, так как параграфы вложены в блоки div.

Чтобы стилизовать первый смежный элемент по отношению к определенному элементу, используется знак плюса +:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Селекторы в CSS3</title>

6 <style>

7 h2+div { color: red; }

8 </style>

9 </head>

10 <body>
 204

11 <h2>Заголовок</h2>

12 <div>

13 <p>Текст первого блока</p>

14 </div>

15 <div>

16 <p>Текст второго блока</p>

17 </div>

18 </body>

19 </html>

Селектор h2+div позволяет определить стиль (в данном случае красный цвет текста) для блока div, который идет непосредственно
после заголовка h2:

Причем этот селектор будет стилизовать блок div, если он будет идти непосредственно после заголовка. Если же между
заголовком и блоков div будет находиться еще какой-либо элемент, то к нему не будет применяться стиль, например:

1 <h2>Заголовок</h2>

3 <p>Элемент между заголовком и блоком div</p>

5 <div>
 205

6 <p>Текст первого блока</p>

7 </div>

Если нам надо стилизовать вообще все смежные элементы одного уровня, неважно непосредственно идут они после
определенного элемента или нет, то в этом случае вместо знака плюса необходимо использовать знак тильды "~":

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Селекторы в CSS3</title>

6 <style>

7 h2~div { color: red; }

8 </style>

9 </head>

10 <body>

11 <h2>Заголовок</h2>

12 <p>Аннотация</p>

13 <div>

14 <p>Текст первого блока</p>

15 </div>

16 <div>
 206

17 <p>Текст второго блока</p>

18 </div>

19 </body>

20 </html>

Псевдоклассы
Последнее обновление: 21.04.2016


 207

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

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

 :root: позволяет выбрать корневой элемент веб-страницы, наверное наименее полезный селектор, так как на правильной
веб-странице корневым элементом практически всегда является элемент <html>

 :link: применяется к ссылкам и представляет ссылку в обычном состоянии, по которой еще не совершен переход

 :visited: применяется к ссылкам и представляет ссылку, по которой пользователь уже переходил

 :active: применяется к ссылкам и представляет ссылку в тот момент, когда пользователь осуществляет по ней переход

 :hover: представляет элемент, на который пользователь навел указатель мыши. Применяется преимущественно к ссылкам,
однако может также применяться и к другим элементам, например, к параграфам

 :focus: представляет элемент, который получает фокус, то есть когда пользователь нажимает клавишу табуляции или
нажимает кнопкой мыши на поле ввода (например, текстовое поле)

 :not: позволяет исключить элементы из списка элементов, к которым применяется стиль

 :lang: стилизует элементы на основании значения атрибута lang

 :empty: выбирает элементы, которые не имеют вложенных элементов, то есть являются пустыми

При применении псевдоклассов перед ними всегда ставится двоеточие. Например, стилизуем ссылки, используя псевдоклассы:
 208

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Псевдоклассы в CSS3</title>

6 <style>

7 a:link {color:blue; text-decoration:none}

8 a:visited {color:pink; text-decoration:none}

9 a:hover {color:red; text-decoration:underline}

10 a:active {color:yellow; text-decoration:underline}

11 input:hover {border:2px solid red;}

12 </style>

13 </head>

14 <body>

15 <a href="[Link]">Учебник по CSS3</a>

16 <input type="text" />

17 </body>

18 </html>

Селектор :not

Селектор :not() позволяет выбрать все элементы кроме определенных, то есть исключить некоторые элементы из выбора.
 209

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Селекторы в CSS3</title>

6 <style>

7 a:not(.blueLink) { color: red; }

8 </style>

9 </head>

10 <body>

11 <a>Первая ссылка</a><br/>

12 <a class="blueLink">Вторая ссылка</a><br/>

13 <a>Третья ссылка</a>

14 </body>

15 </html>

Селектор a:not(.blueLink) применяет стиль ко всем ссылкам за исключением тех, которые имеют класс "blueLink". В скобки
псевдоклассу not передается селектор элементов, которые надо исключить.

Псевдокласс :lang

Селектор :lang выбирает элементы на основании атрибута lang:

 210

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Селекторы в CSS3</title>

6 <style>

7 :lang(ru) {

8 color: red;

9 }

10 </style>

11 </head>

12 <body>

13 <form>

14 <p lang="ru-RU">Я изучаю CSS3</p>

15 <p lang="en-US">I study CSS3</p>

16 <p lang="de-DE">Ich lerne CSS3</p>

17 </form>

18 </body>

19 </html>

Псевдоклассы дочерних элементов

 211

Последнее обновление: 21.04.2016

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

 :first-child: представляет элемент, который является первым дочерним элементом

 :last-child: представляет элемент, который является последним дочерним элементом

 :only-child: представляет элемент, который является единственным дочерним элементом в каком-нибудь контейнере

 :only-of-type: выбирает элемент, который является единственным элементом определенного типа (тега) в каком-нибудь
контейнере

 :nth-child(n): представляет дочерний элемент, который имеет определенный номер n, например, второй дочерний элемент

 :nth-last-child(n): представляет дочерний элемент, который имеет определенный номер n, начиная с конца

 :nth-of-type(n): выбирает дочерний элемент определенного типа, который имеет определенный номер

 :nth-last-of-type(n): выбирает дочерний элемент определенного типа, который имеет определенный номер, начиная с конца

Псевдокласс first-child

Используем псевдокласс first-child для выбора первых ссылок в блоках:

 212

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Селекторы в CSS3</title>

6 <style>

7 a:first-child{

9 color: red;

10 }

11 </style>

12 </head>

13 <body>

14 <h3>Планшеты</h3>

15 <div>

16 <a>Microsoft Surface Pro 4</a><br/>

17 <a>Apple iPad Pro</a><br/>

18 <a>ASUS ZenPad Z380KL</a>

19 </div>

20 <h3>Смартфоны</h3>

21 <div>
 213

22 <p>Топ-смартфоны 2016</p>

23 <a>Samsung Galaxy S7</a><br/>

24 <a>Apple iPhone SE</a><br/>

25 <a>Huawei P9</a>

26 </div>

27 </body>

28 </html>

Стиль по селектору a:first-child применяется к ссылке, если она является первым дочерним элементом любого элемента.

В первом блоке элемент ссылки является первым дочерним элементом, поэтому к нему применяется определенный стиль.

А во втором блоке первым элементом является параграф, поэтому ни к одной ссылке не применяется стиль.

Псевдокласс last-child

Используем псевдокласс last-child:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Селекторы в CSS3</title>
 214

6 <style>

7 a:last-child{

9 color: blue;

10 }

11 </style>

12 </head>

13 <body>

14 <h3>Смартфоны</h3>

15 <div>

16 <a>Samsung Galaxy S7</a><br/>

17 <a>Apple iPhone SE</a><br/>

18 <a>Huawei P9</a>

19 </div>

20 <h3>Планшеты</h3>

21 <div>

22 <a>Microsoft Surface Pro 4</a><br/>

23 <a>Apple iPad Pro</a><br/>

24 <a>ASUS ZenPad Z380KL</a>

25 <p>Данные за 2016</p>

26 </div>
 215

27 </body>

28 </html>

Селектор a:last-child определяет стиль для ссылок, которые являются последними дочерними элементами.

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

Селектор only-child

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

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Селекторы в CSS3</title>

6 <style>

7 p:only-child{

8 color:red;

9 }

10 </style>

11 </head>
 216

12 <body>

13 <h2>Заголовок</h2>

14 <div>

15 <p>Текст1</p>

16 </div>

17 <div>

18 <p>Текст2</p>

19 <p>Текст3</p>

20 </div>

21 <div>

22 <p>Текст4</p>

23 </div>

24 </body>

25 </html>

Параграфы с текстами "Текст1" и "Текст4" являются единственными дочерними элементами в своих внешних контейнерах, поэтому
к ним применяется стиль - красный цвет шрифта.

Псевдокласс only-of-type
 217

Псевдокласс only-of-type выбирает элемент, который является единственным элементом определенного типа в контейнере.
Например, единственный элемент div, при этом элементов других типов в этом же контейнере может быть сколько угодно.

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Селекторы в CSS3</title>

6 <style>

7 span:only-of-type{

9 color: green; /* зеленый цвет */

10 }

11 p:only-of-type{

12

13 color: red; /* красный цвет */

14 }

15 div:only-of-type{

16

17 color: blue; /* синий цвет */

18 }

19 </style>
 218

20 </head>

21 <body>

22 <div>

23 Header

24 </div>

25 <p>Единственный параграф и <span>элемент спан</span></p>

26 <div>

27 Footer

28 </div>

29 </body>

30 </html>

Хотя для элементов div определен стиль, он не будет применяться, так как в контейнере body находится два элемента div, а не
один. Зато в body есть только один элемент p, поэтому он получит стилизацию. И также в контейнере p есть только один элемент
span, поэтому он также будет стилизован.

Псевдокласс nth-child

Псевдокласс nth-child позволяет стилизовать каждый второй, третий элемент, только четные или только нечетные элементы и т.д.

Например, стилизуем четные и нечетные строки таблицы:

1 <!DOCTYPE html>
 219

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Селекторы в CSS3</title>

6 <style>

7 tr:nth-child(odd) { background-color: #bbb; }

8 tr:nth-child(even) { background-color: #fff; }

9 </style>

10 </head>

11 <body>

12 <h3>Смартфоны</h3>

13 <table>

14 <tr><td>Samsung</td><td>Galaxy S7
Edge</td><td>60000</td></tr>
15
<tr><td>Apple</td><td>iPhone SE</td><td>39000</td></tr>
16
<tr><td>Microsoft</td><td>Lumia 650</td><td>13500</td></tr>
17
<tr><td>Alcatel</td><td>Idol S4</td><td>30000</td></tr>
18
<tr><td>Huawei</td><td>P9</td><td>60000</td></tr>
19
<tr><td>HTC</td><td>HTC 10</td><td>50000</td></tr>
20
<tr><td>Meizu</td><td>Pro 6</td><td>40000</td></tr>
21
<tr><td>Xiaomi</td><td>Mi5</td><td>35000</td></tr>
22
 220

</table>
23
</body>
24
</html>

Чтобы определить стиль для нечетных элементов, в селектор передается значение "odd":

1 tr:nth-child(odd){}

Для стилизации четных элементов в селектор передается значение "even":

1 tr:nth-child(even){}

Также в этот селектор мы можем передать номер стилизуемого элемента:

1 tr:nth-child(3) { background-color: #bbb; }

В данном случае стилизуется третья строка.

Еще одну возможность представляет использование заменителя для номера, который выражается буквой n:

1 tr:nth-child(2n+1) { background-color: #bbb; }

Здесь стиль применяется к каждой второй нечетной строке.

 221

Число перед n (в данном случае 2) представляет тот дочерний элемент, который будет выделен следующим. Число, которое идет
после знака плюс, показывают, с какого элемента нужно начинать выделение, то есть, +1 означает, что нужно начинать с первого
дочернего элемента.

Таким образом, в данном случае выделение начинается с 1-го элемента, а следующим выделяется 2 * 1 + 1 = 3-й элемент, далее 2 *
2 + 1 = 5-й элемент и так далее.

К примеру, если мы хотим выделить каждый третий элемент, начиная со второго, то мы могли бы написать:

1 tr:nth-child(3n+2) { background-color: #bbb; }

Псевдокласс :nth-last-child по сути предоставляет ту же самую функциональность, только отсчет элементов идет не с начала, а с
конца:

1 tr:nth-last-child(2) {

2 background-color: #bbb; /* 2 строка с конца, то есть предпоследняя */

3 }

4 tr:nth-last-child(2n+1) {

5 background-color: #eee; /* нечетные строки, начиная с конца */

6 }

Псевдокласс nth-of-type

Псевдокласс :nth-of-type позволяет выбрать дочерний элемент определенного типа по определенному номеру:
 222

1 tr:nth-of-type(2) {

2 background-color: #bbb;

3 }

Аналогично работает псевдокласс nth-last-of-type, только теперь отсчет элементов идет с конца:

1 tr:nth-last-of-type(2n) {

2 background-color: #bbb;

3 }

Псевдоклассы форм
Последнее обновление: 21.04.2016

Ряд псевдоклассов используется для работы с элементами форм:

 :enabled: выбирает элемент, если он доступен для выбора (то есть у него не установлен атрибут disabled)

 :disabled: выбирает элемент, если он не доступен для выбора (то есть у него установлен атрибут disabled)

 :checked: выбирает элемент, если у него установлен атрибут checked (для флажков и радиокнопок)
 223

 :default: выбирает элементы по умолчанию

 :valid: выбирает элемент, если его значение проходит валидацию HTML5

 :invalid: выбирает элемент, если его значение не проходит валидацию

 :in-range: выбирает элемент, если его значение находится в определенном диапазоне (для элементов типа ползунка)

 :out-of-range: выбирает элемент, если его значение не находится в определенном диапазоне

 :required: выбирает элемент, если у него установлен атрибут required

 :optional: выбирает элемент, если у него не установлен атрибут required

Псевдоклассы enabled и disabled

Псевдоклассы enabled и disabled выбирают элементы форм в зависимости от того, установлен ли у них атрибут disabled:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Селекторы в CSS3</title>

6 <style>

7 :enabled {

8 border: 2px black solid;

9 color: red;
 224

10 }

11 </style>

12 </head>

13 <body>

14 <p><input type="text" value="Enabled" /></p>

15 <p><input type="text" disabled value="Disabled" /></p>

16 </body>

17 </html>

Псевдокласс checked

Псевдокласс checked стилизует элементы формы, у которых установлен атрибут checked:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Селекторы в CSS3</title>

6 <style>

7 :checked + span {

8 color: red;
 225

9 font-weight: bold; /* выделение жирным */

10 }

11 </style>

12 </head>

13 <body>

14 <h2>Выберите технологию</h2>

15 <p>

16 <input type="checkbox" checked name="html5"/><span>HTML5</span>

17 </p>

18 <p>

19 <input type="checkbox" name="dotnet"/><span>.NET</span>

20 </p>

21 <p>

22 <input type="checkbox" name="java"/><span>Java</span>

23 </p>

24

25 <h2>Укажите пол</h2>

26 <p>

27 <input type="radio" value="man" checked

name="gender"/><span>мужской</span>
28
</p>
29
 226

<p>
30 <input type="radio" value="woman"
31 name="gender"/><span>женский</span>

32 </p>

33 </body>

</html>

Селектор :checked + span позволяет выбрать элемент, соседний с отмеченным элементом формы.

Псевдокласс default

Псевдокласс :default выбирает стандартный элемент на форме. Как правило, в роли такого элемента выступает кнопка отправки:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Селекторы в CSS3</title>

6 <style>

7 :default {

8 border: 2px solid red;

9 }
 227

10 </style>

11 </head>

12 <body>

13 <form>

14 <input name="login"/>

15 <input type="submit" value="Войти" />

16 </form>

17 </body>

18 </html>

Псевдоклассы valid и invalid

Псевдоклассы :valid и :invalid стилизуют элементы формы в зависимости от того, проходят они валидацию или нет.

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Селекторы в CSS3</title>

6 <style>

7 input:invalid {
 228

border: 2px solid red;

8
}
9
input:valid {
10
border: 2px solid green;
11
}
12
</style>
13
</head>
14
<body>
15
<form>
16
<p><input type="text" name="login" placeholder="Введите логин" required /></p>
17
<p><input type="password" name="password" placeholder="Введите пароль" required
18
/></p>
19
<input type="submit" value="Войти" />
20
</form>
21
</body>
22
</html>

Псевдоклассы in-range и out-of-range

Псевдоклассы :in-range и :out-of-range стилизуют элементы формы в зависимости от того, попадает ли их значение в
определенный диапазон. Это в первую очередь относится к элементу <input type="number" >.
 229

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Селекторы в CSS3</title>

6 <style>

7 :in-range {

8 border: 2px solid green;

9 }

10 :out-of-range {

11 border: 2px solid red;

12 }

13 </style>

14 </head>

15 <body>

16 <form>

17 <p>

18 <label for="age">Ваш возраст:</label>

19 <input type="number" min="1" max="100" value="10" id="age"

name="age"/>
20
</p>
21
 230

<input type="submit" value="Отправить" />

22
</form>
23
</body>
24
</html>

Здесь атрибуты min и max задают диапазон, в которое должно попадать вводимое в поле значение:

Псевдоклассы required и optional

Псевдоклассы :required и :optional стилизуют элемент в зависимости от того, установлен ли у него атрибут required:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Селекторы в CSS3</title>

6 <style>

7 :optional {

8 border: 2px solid blue;

9 }

10 :required {
 231

11 border: 2px solid red;

12 }

13 </style>

14 </head>

15 <body>

16 <form>

17 <p>

18 <label for="login">Логин:</label>

19 <input type="text" id="login" name="login" required />

20 </p>

21 <p>

22 <label for="password">Пароль:</label>

23 <input type="password" id="password" name="password"

required />
24
</p>
25
<p>
26
<label for="name">Имя:</label>
27
<input type="text" id="name" name="name"/>
28
</p>
29
<input type="submit" value="Регистрация" />
30
</form>
31
 232

</body>
32
</html>

Псевдоэлементы
Последнее обновление: 21.04.2016

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

 ::first-letter: позволяет выбрать первую букву из текста

 ::first-line: стилизует первую строку текста

 ::before: добавляет сообщение до определенного элемента

 ::after: добавляет сообщение после определенного элемента

 ::selection: выбирает выбранные пользователем элементы

В CSS2 перед псевдоэлементами, как и перед псевдоклассами, ставилось одно двоеточие. В CSS3 для отличия их от псевдоклассов
псевдоэлементы стали предваряться двумя двоеточиями. Однако для совместимости с более старыми браузерами, которые не
поддерживают CSS3, допустимо использование одного двоеточия: :before.
 233

Стилизуем текст, используя псевдоэлементы first-letter и first-line:

<!DOCTYPE html>
1
<html>
2
<head>
3
<meta charset="utf-8">
4
<title>Псевдоклассы в CSS3</title>
5
<style>
6
::first-letter { color:red; font-size: 25px; }
7
::first-line { font-size: 20px; }
8
</style>
9
</head>
10
<body>
11
<p>Но он ничего не видал. Над ним не было ничего уже, кроме неба, — высокого неба, не ясного, но все-таки неизмери
12
серыми облаками.</p>
13
</body>
14
</html>

Используем псевдоэлементы before и after:

1 <!DOCTYPE html>

2 <html>
 234

<head>
3
<meta charset="utf-8">
4
<title>Псевдоклассы в CSS3</title>
5
<style>
6
.warning::before{ content: "Важно! "; font-weight: bold; }
7
.warning::after { content: " Будьте осторожны!"; font-weight: bold;}
8
</style>
9
</head>
10
<body>
11
<p><span class="warning">Не пытайтесь засунуть язык в электрическую
12
розетку.</span></p>
13
</body>
14
</html>

Здесь псевдоэлеметы применяются к элементу с классом warning. Оба псевдоэлемента принимают свойство content, которое
хранит вставляемый текст. И также для повышения внимания псевдоэлементы используют выделение текста жирным с помощью
свойства font-weight: bold;.

Используем псевдоэлемент selection для стилизации выбранных элементов:

1 <!DOCTYPE html>

2 <html>
 235

3 <head>

4 <meta charset="utf-8">

5 <title>Псевдоэлементы в CSS3</title>

6 <style>

7 ::selection {

8 color: white;

9 background-color: black;

10 }

11 </style>

12 </head>

13 <body>

14 <p>Пседвоэлементы в CSS3 позволяют форматировать текст.</p>

15 </body>

16 </html>

Селекторы атрибутов
Последнее обновление: 21.04.2016


 236

Кроме селекторов элементов мы также можем использовать селекторы их атрибутов. Например, у нас есть на веб-странице
несколько полей input, а нам надо окрасить в красный цвет только текстовые поля. В этом случае мы как раз можем проверять
значение атрибута type: если оно имеет значение text, то это текстовое поле, и соответственно его надо окрасить в красный цвет.
Определение стиля в этом случае выглядело бы так:

1 input[type="text"]{

3 border: 2px solid red;

4 }

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

Например:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Селекторы атрибутов в CSS3</title>

6 <style>

7 input[type="text"]{

8 border: 2px solid red;

 237

9 }

10 </style>

11 </head>

12 <body>

13 <p><input type="text" id="login" /></p>

14 <p><input type="password" id="password" /></p>

15 <input type="submit" value="Send" />

16 </body>

17 </html>

Селекторы атрибутов можно применять не только к элементам, но и классам и идентификаторам. Например:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Селекторы атрибутов в CSS3</title>

6 <style>

7 .link[href="[Link]

9 color: red;
 238

10 }

11 </style>

12 </head>

13 <body>

14 <a class="link" href="[Link] |

15 <a class="link" href="[Link] |

16 <a class="link" href="[Link]

17 </body>

18 </html>

Специальные символы позволяют конкретизировать значение атрибутов. Например символ ^ позволяет выбрать все атрибуты,
которые начинаются на определенный текст. Например, нам надо выбрать все ссылки, которые используют протокол https, то есть
ссылка должна начинаться на "[Link] В этом случае можно применить следующий селектор:

1 a[href^="[Link]

3 color: red;

4 }

Если значение атрибута должно иметь в конце определенный текст, то для проверки используется символ $. Например, нам надо
выбрать все изображения в формате jpg. В этом случае мы можем проверить, оканчивается ли значение атрибута src на текст
".jpg":
 239

1 img[src$=".jpg"]{

3 width: 100px;

4 }

И еще один символ "*" (звездочка) позволяет выбрать все элементы с атрибутами, которые в своем значении имеют определенный
текст (не важно где - в начале, середине или конце):

1 a[href*="microsoft"]{

3 color: red;

4 }

Данный атрибут выберет все ссылки, которые в своем адресе имеют текст "microsoft".

Наследование стилей
Последнее обновление: 21.04.2016


 240

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

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Наследование стилей в CSS3</title>

6 <style>

7 p {color: red;}

8 h2 {color: red;}

9 </style>

10 </head>

11 <body>

12 <h2>Наследование стилей</h2>

13 <p>Текст про наследование стилей в CSS 3</p>

14 </body>

15 </html>

Однако поскольку и элемент p, и элемент h2 находятся в элементе body, то они наследуют от этого контейнера - элемента body
многие стили. И чтобы не дублировать определение стиля, мы могли бы написать так:
 241

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Наследование стилей в CSS3</title>

6 <style>

7 body {color: red;}

8 </style>

9 </head>

10 <body>

11 <h2>Наследование стилей</h2>

12 <p>Текст про наследование стилей в CSS 3</p>

13 </body>

14 </html>

В итоге определение стилей стало проще, а результат остался тем же.

Если нам нежелателен унаследованный стиль, то мы его можем переопределить для определенных элементов:

1 body {color: red;}

2 p {color: green;}

При нескольких уровнях вложенности элементы наследуют стили только ближайшего контейнера:
 242

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Наследование стилей в CSS3</title>

6 <style>

7 body {color: red;}

8 div {color:black;}

9 </style>

10 </head>

11 <body>

12 <div>

13 <h2>Наследование стилей</h2>

14 <p>Текст про наследование стилей в CSS 3</p>

15 </div>

16 <p>Copyright © [Link]</p>

17 </body>

18 </html>

Здесь веб-страница имеет следующую структуру:

 243

Для элемента div переопределяется цвет текста. И так как элемент h2 и один из параграфов находятся в элементе div, то они
наследуют стиль именно элемента div. Второй параграф находится непосредственно в элементе body и поэтому наследует стиль
элемента body.

Однако не ко всем свойствам CSS применяется наследование стилей. Например, свойства, которые представляют отступы (margin,
padding) и границы (border) элементов, не наследуются.

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

Каскадность стилей
Последнее обновление: 21.04.2016

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

В CSS действует механизм каскадности, которую можно определить как набор правил, определяющих последовательность
применения множества стилей к одному и тому же элементу.
 244

К примеру, у нас определена следующая веб-страница:

<!DOCTYPE html>
1
<html>
2
<head>
3
<meta charset="utf-8">
4
<title>Каскадность стилей в CSS3</title>
5
<style>
6
.redLink {color: red;} /* красный цет текста */
7
.footer a {font-weight: bold;} /* выделение жирным */
8
a {text-decoration: none;} /* отмена подчеркивания ссылки */
9
</style>
10
</head>
11
<body>
12
<p class="footer">Для просмотра подробной информации пройдите по
13
ссылке:
14
<a class="redLink" href="[Link]">Основы CSS 3</a></p>
15
</body>
16
</html>

В CSS определено три стиля и все они применяются к ссылке.

 245

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

Так, в данном случае, все три стиля не конфликтуют между собой, поэтому все эти стили будут применяться к ссылке:

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

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

 Селекторы тегов имеют важность, оцениваемую в 1 балл

 Селекторы классов, атрибутов и псевдоклассов оцениваются в 10 баллов

 Селекторы идентификаторов оцениваются в 100 баллов

 Встроенные inline-стили (задаваемые через атрибут style) оцениваются в 1000 баллов

Например:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">
 246

<title>Каскадность стилей в CSS3</title>

5
<style>
6
#index {color: navy;} /* темно-синий цет текста */
7
.redLink {color: red; font-size: 20px;} /* красный цет текста и высота шрифта 20
8
пикселей */
9
a {color: black; font-weight: bold;} /* черный цет текста и выделение жирным */
10
</style>
11
</head>
12
<body>
13
<a id="index" class="redLink" href="[Link]">Основы CSS 3</a>
14
</body>
15
</html>

Здесь к ссылке применяется сразу три стиля. Эти стили содержат два не конфликтующих правила:

1 font-size: 20px;

2 font-weight: bold;

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

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

1 #index {color: navy;}

Если селектор является составным, то происходит сложение баллов всех входящих в селектор подселекторов. Так, рассмотрим
следующий пример:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Каскадность стилей в CSS3</title>

6 <style>

7 a {font-size: 18px;}

8 .nav li a {color: red;} /* красный цет текста */

9 #menu a {color: navy;} /* темно-синий цет текста */

10 .nav .menuItem {color: green;} /* зеленый цет текста */

11 [Link]:not(.newsLink) {color: orange;} /* оранжевый цет

текста */
12
div ul li a {color: gray; } /* серый цет текста */
13
</style>
14
</head>
15
<body>
16
<div id="menu">
17
 248

<ul class="nav">
18
<li><a class="menuItem">Главная</a></li>
19
<li><a class="menuItem">Форум</a></li>
20
<li><a class="menuItem">Блог</a></li>
21
<li><a class="menuItem">О сайте</a></li>
22
</ul>
23
</div>
24
</body>
25
</html>

В CSS определено аж пять различных селекторов, которые устанавливают цвет ссылок. В итоге браузер выберет селектор #menu
a и окрасит ссылки в темно-синий цвет. Но почему, на каком основании браузер выберет этот селектор?

Рассмотрим, как у нас будут суммироваться баллы по каждому из пяти селекторов:

Селектор Идентификатор Класс Теги Сумма

ы ы
.nav li a 0 1 2 12
#menu a 1 0 1 101
.nav .menuItem 0 2 0 20
[Link]:not(.newsLink) 0 2 1 21
div ul li a 0 0 4 4

Итак, мы видим, что для селектора #menu a в колонке сумма оказалось больше всего баллов - 101. То есть в нем 1 идентификатор
(100 баллов) и один тег(1 балл), которые в сумме дают 101 балл.
 249

К примеру, в селекторе .nav .menuItem два селектора класса, каждый из которых дает 10 баллов, то есть в сумме 20 баллов.

При этом псевдокласс :not в отличие от других псевдокдассов не учитывается, однако учитывается тот селектор, который
передается в псевдокласс not.

Правило !important

CSS предоставляет возможность полностью отменить значимость стилей. Для этого в конце стиля указывается значение !
important:

1 a {font-size: 18px; color: red !important;}

2 #menu a {color: navy;}

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

Цвет в CSS
Последнее обновление: 21.04.2016

В CSS широкое распространение находит использование цветов. Чтобы установить цвет текста, фона или границы, нам надо
указать цвет.
 250

Например, определим красный цвет для фона элемента div:

1 div{

2 background-color: red;

3 }

В CSS есть несколько различных свойств, которые в качестве значения требует определенный цвет. Например, за установку цвета
текста отвечает свойство color, за установку фона элемента - свойство background-color, а за установку цвета границы
- border-color.

Существует несколько различных способов определения цвета текста.

 Шестнадцатеричного значение. Оно состоит из отдельных частей, которые кодируют в шестнадцатеричной

системе значения для красного, зеленого и синего цветов.

Например, #1C4463. Здесь первые два символа 1C представляю значение красной компоненты цвета, далее 44 - значение
зеленой компоненты цвета и 63 - значение уровня синего цвета. Финальный цвет, который мы видим на веб-странице,
образуется с помощью смешивания этих значений.

Если каждое из трех двухзначных чисел содержит по два одинаковых символа, то их можно сократить до одного.
Например, #5522AA можно сократить до #52A, или, к примеру, #eeeeee можно сократить до #eee. При этом не столь важно, в
каком регистре будут символы.

 Значение RGB. Значение RGB также представляет последовательно набор значений для красного, зеленого и синего
цветов (Red — красный, Green — зеленый, Blue — синий). Значение каждого цвета кодируется тремя числами, которые могут
представлять либо процентные соотношения (0–100%), либо число от 0 до 255.

Например

1 background-color: rgb(100%,100%,100%);
 251

Здесь каждый цвет имеет значение 100%. И в итоге при смешивании этих значений будет создаваться белый цвет. А при
значениях в 0% будет генерироваться черный цвет:

1 background-color: rgb(0%, 0%, 0%);

Между 0 и 100% будут находиться все остальные оттенки.

Но, как правило, чаще применяются значения из диапазона от 0 до 255. Например,

1 background-color: rgb(28, 68, 99);

 Значение RGBA. Это тоже самое значение RGB плюс компонент прозрачности (Alpha). Компонент прозрачности имеет
значение от 0 (полностью прозрачный) до 1 (не прозрачный). Например:

1 background-color: rgba(28, 68, 99, .6);

 Значение HSL. HSL представляет аббривиатуру: Hue — тон, Saturation — насыщенность и Lightness — осветленность. HSL
задает три значения. Первое значение Hue угол в круге оттенков - значение в градусах от 0 до 360. Например, красный — 0
(или 360 при полном обороте круга). Каждый цвет занимает примерно 51°.

Второе значение - Saturation - представляет насыщенность, то указывает, насколько чистым является цвет. Насыщенность
определяется в процентах от 0 (полное отсутствие насыщенности) до 100% (яркий, насыщенный цвет).

Третье значение - Lightness - определяет осветленность и указывается в процентах от 0 (полностью черный) до 100
(полностью белый). Для получения чистого цвет применяется значение 50 %.

Например:
 252

1 background-color: hsl(206, 56%, 25%);

Данный цвет является эквивалентом значений #1C4463 и rgb(28, 68, 99)

 Значение HSLA. Аналогично RGBA здесь к HSL добавляется компонента прозрачности в виде значения от 0 (полностью
прозрачный) до 1 (не прозрачный). Например:

1 background-color: hsl(206, 56%, 25%, .6);

 Строковые значения. Существует ряд константных строковых значений, например, red (для красного цвета) или green
(для зеленого цвета). К примеру,

1 color: red;

 является эквивалентом

1 color: #ff0000;

 Полный перечень цветов можно найти на странице [Link]

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

Прозрачность

Ряд настроек цвета позволяют установить значение для альфа-компоненты, которая отвечает за прозрачность. Но также в CSS есть
специальное свойство, которое позволяет установить прозрачность элементов - свойство opacity. В качестве значения оно
принимает число от 0 (полностью прозрачный) до 1 (не прозрачный):
 253

1 div{

2 width: 100px;

3 height: 100px;

5 background-color: red;

6 opacity: 0.4;

7 }

Стилизация шрифтов
Последнее обновление: 21.04.2016

Семейство шрифтов

Свойство font-family устанавливает семейство шрифтов, которое будет использоваться. Например:

1 body{

2 font-family: Arial;

3 }
 254

В данном случае устанавливается шрифт Arial.

Шрифт свойства font-family будет работать, только если у пользователя на локальном компьютере имеется такой же шрифт. По
этой причине нередко выбираются стандартные шрифты, которые широко распространены, как Arial, Verdana и т.д.

Также нередко применяется практика нескольких шрифтов:

1 body{

2 font-family: Arial, Verdana, Helvetica;

3 }

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

Если название шрифта состоит из нескольких слов, например, Times New Roman, то все название заключается в кавычки:

1 body{

2 font-family: "Times New Roman";

3 }

Кроме конкретных стилей также могут использоваться общие универсальные шрифты, задаваемые с помощью значений sans-
serif и serif:

1 body{

2 font-family: Arial, Verdana, sans-serif;

3 }
 255

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

Типы шрифтов
Шрифты с засечками

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

Распространенные шрифты с засечками: Times, Times New Roman, Georgia, Garamond. Универсальный обобщенный шрифт с
засечками представляет значение serif.

Шрифты без засечек

В отличие от шрифтов с засечками шрифты из этой группы не имеют засечек. Наиболее распространенные шрифты этой группы:
Arial, Helvetica, Verdana.

Моноширинные шрифты

Моноширинный шрифт преимущественно применяется для отображения программного кода и не предназначен для вывода
стандартного текста статей. Свое название эти шрифты получили от того, что каждая буква в таком шрифте имеет одинаковую
ширину. Примеры подобных шрифтов: Courier, Courier New, Consolas, Lucida Console.

Примеры шрифтов:

Толщина шрифта
 256

Свойство font-weight задает толщину шрифта. Оно может принимать 9 числовых значений: 100, 200, 300, 400,...900. 100 - очень
тонкий шрифт, 900 - очень плотный шрифт.

В реальности чаще для этого свойства используют два значения: normal (нежирный обычный текст) и bold (полужирный шрифт):

1 font-weight: normal;

2 font-weight: bold;

Курсив

Свойство font-style позволяет выделить текст курсивом. Для этого используется значение italic:

1 p {font-style: italic;}

Если надо отменить курсив, то применяется значение normal:

1 p {font-style: normal;}

Цвет шрифта

Свойство color устанавливает цвет шрифта:

1 p {

2 color: red;

3 }

Внешние шрифты
 257

Последнее обновление: 21.04.2016

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

@font-face {
1

2
font-family: 'Roboto';
3
src: url([Link]
4
xsNqO47m55DA.woff2);
5
}

Свойство font-family задает название шрифта, а свойство src - путь к шрифту.

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

адресу [Link]

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

1 @font-face{

3 font-family: 'Roboto';

4 src:url('fonts/[Link]');

5 }

После подключения шрифта, его можно использовать в стилях:

1 p{

3 font-family: Roboto;

4 }

В данном случе используется шрифт Roboto, созданный компанией Google и определенный в файле в формате woff2. Однако не все
браузеры поддерживают данный формат шрифтов.

Грубо говоря, существует несколько различных форматов шрифтов: TrueType( расширение ttf), Open Type (расширение otf),
Embedded Open Type (расширение eot), Web Open Font Format (woff/woff2), Scalable Vector Graphic (svg). Разные браузеры могут
поддерживать разные шрифты. И чтобы решить проблему поддержки шрифтов создатели шрифта часто создают сразу несколько
форматов. И мы можем сразу эти форматы определить. Например:

1 @font-face {

3 font-family:'FontAwesome';

4 src: url('[Link]
 259

src: url('[Link]
5
format('embedded-opentype'),
6
url('[Link] format('woff2'),
7
url('[Link] format('woff'),
8
url('[Link] format('truetype'),
9
url('[Link] format('svg');
10
}

Как и в предыдущем случае свойства font-family и src задают название и путь к шрифту. Но теперь также для совместимости
добавляется еще одно свойство src. Второе свойство src устанавливает сразу несколько шрифтов. Первым шрифтом также идет
шрифт в формате EOT, но теперь к расширению файла .eot добавляется значение ?#iefix. Это делается для совместимости с
версиями Internet Explorer 6–8. Если после .eot не будет добавляться это значение, то шрифт может неправильно отображаться в
Internet Explorer 6-8.

После параметра url идет определение формата шрифта:

1 format('embedded-opentype')

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

Разные версии шрифта

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

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

Чтобы браузер мог автоматически распознавать разные варианты шрифта, к директиве @font-face добавляются свойства font-
weight и font-style, которые соответственно устанавливают выделение жирным и выделение курсивом:

1 @font-face {

2 font-family: 'Roboto';

3 src: url(fonts/[Link]);

4 font-weight: normal;

5 font-style: normal;

6 }

7 p{

8 font-family: Roboto;

9 }

Поскольку версия шрифта [Link] применяется для текста, не выделенного курсивом и жирным, то вместе с ним
устанавливаются значения:

1 font-weight: normal;

2 font-style: normal;
 261

То есть тем самым мы устанавливаем, что выделения курсивом не будет (font-style: normal;) и выделения жирным не будет
(font-weight: normal;)

Кроме версии [Link], как видно выше на картинке, в папке есть еще другие версии шрифта Roboto. Например,
курсивная версия шрифта [Link] и ряд других.

Если мы хотим, чтобы при выделении курсивом браузер использовал именно курсивную версию, то нам надо добавить еще одну
директиву font-face:

1 @font-face {

2 font-family: 'Roboto';

3 src: url(fonts/[Link]);

4 font-weight: normal;

5 font-style: italic;

6 }

Значение font-style: italic указывает, что данную версию шрифта следует применять при выделении курсивом.

Аналогично мы можем задать те версии шрифта, которые должны использоваться при выделении сразу и жирным, и курсивом,
либо только при выделении жирным:

1 @font-face {

2 font-family: 'Roboto';

3 src: url(fonts/[Link]);

4 font-weight: bold;

5 font-style: normal;
 262

6 }

7 @font-face {

8 font-family: 'Roboto';

9 src: url(fonts/[Link]);

10 font-weight: bold;

11 font-style: italic;

12 }

Значение font-weight: bold указывает, что данная версия шрифта применяется при выделении жирным.

Теперь используем все эти шрифты:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Шрифты в CSS3</title>

7 <style>

8 @font-face {

9 font-family: 'Roboto';

10 src: url(fonts/[Link]);
 263

11 font-weight: normal;

12 font-style: normal;

13 }

14 @font-face {

15 font-family: 'Roboto';

16 src: url(fonts/[Link]);

17 font-weight: normal;

18 font-style: italic;

19 }

20 @font-face {

21 font-family: 'Roboto';

22 src: url(fonts/[Link]);

23 font-weight: bold;

24 font-style: normal;

25 }

26

27 @font-face {

28 font-family: 'Roboto';

29 src: url(fonts/[Link]);

30 font-weight: bold;

31 font-style: italic;
 264

}
32
p{
33
font-family: Roboto;
34
}
35
</style>
36
</head>
37
<body>
38
<p>Стиль Roboto может выделять <i>курсивом</i> и <b>жирным</b>, либо <b><i>и тем, и
39
другим</i></b></p>
40
</body>
41
</html>

Теперь к тексту в тегах <i></i>, который использует курсив, будет применяться версия "[Link]", а к тексту в
тегах <b></b> - шрифт "[Link]".

Источники шрифтов

В интернете можно найти множество нестандартных шрифтов. Наиболее популярным репозиторием шрифтов
является [Link] - набор шрифтов от компании Google.

Также другим известным репозиторием шрифтов является Font Squirrel.

Следует также упомянуть такой популярный шрифт как FontAwesome. Он предоставляет множество различных интересных иконок,
которые можно использовать на веб-странице.

Высота шрифта
 265

Последнее обновление: 21.04.2016

Для установки размера шрифта используется свойство font-size:

1 div{

2 font-size: 18px;

3 }

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

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

Базовый стиль для разных элементов текста отличается: если для параграфов это 16 пикселей, то для заголовков h1 это 32
пикселя, для заголовков h2 - 24 пикселя и т..д.

Для измерения шрифта также можно использовать самые разные единицы измерения.

Ключевые слова

В CSS имеется семь ключевых слов, которые позволяют назначить размер шрифта относительно базового:
 266

 medium: базовый размер шрифта браузера (16 пикселей)

 small: 13 пикселей

 x-small: 10 пикселей

 xx-small: 9 пикселей

 large: 18 пикселей

 x-large: 24 пикселя

 xx-large: 32 пикселя

Например:

1 font-size: x-large;

Проценты

Проценты позволяют задать значение относительно базового или унаследованного шрифта. Например:

1 font-size: 150%;

В данном случае высота шрифта будет составлять 150% от базового, то есть 16px * 1,5 = 24px

Наследование шрифта может изменить финальное значение. Например, следующую ситуацию:

1 <!DOCTYPE html>

2 <html>
 267

3 <head>

4 <meta charset="utf-8">

5 <title>Шрифты в CSS3</title>

7 <style>

8 div {font-size: 10px;}

9 p {font-size: 150%;}

10 </style>

11 </head>

12 <body>

13 <div>

14 <p>Однажды в студеную зимнюю пору</p>

15 </div>

16 </body>

17 </html>

Здесь элемент p наследует от контейнера - блока div шрифт высотой в 10 пикселей. То есть 10 пикселей теперь будет базовым для
параграфа.

Далее для элемента p определяется новая высота шрифта в 150%. Это значит, что финальная высота будет равна 10px * 1,5 = 15px.

Единица еm

Единица измерения еm во многом эквивалентна процентам. Так, 1em равен 100%, .5em равно 50% и т.д.
 268

Форматирование текста
Последнее обновление: 21.04.2016

text-transform

Свойство text-transform изменяет регистр текста. Оно может принимать следующие значения:

 capitalize: делает первую букву слова заглавной

 uppercase: все слово переводится в верхний регистр

 lowercase: все слово переводится в нижний регистр

 none: регистр символов слова никак не изменяется

Например:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">
 269

5 <title>Шрифты в CSS3</title>

7 <style>

8 [Link] {text-transform: lowercase;}

9 [Link] {text-transform: uppercase;}

10 [Link] { text-transform: capitalize;}

11 </style>

12 </head>

13 <body>

14 <div>

15 <p class="capitalize">Текст использует значение capitalize</p>

16 <p class="lowercase">Текст использует значение lowercase</p>

17 <p class="uppercase">Текст использует значение uppercase</p>

18 </div>

19 </body>

20 </html>

Свойство text-decoration

Свойство text-decoration позволяет добавить к тексту некоторые дополнительные эффекты. Это свойство может принимать
следующие значения:
 270

 underline: подчеркивает текст

 overline: надчеркивает текст, проводит верхнюю линию

 line-through: зачеркивает текст

 none: к тексту не применяется декорирование

Например:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Шрифты в CSS3</title>

7 <style>

8 [Link] {

9 text-decoration: underline;

10 }

11 [Link] {

12 text-decoration: overline;

13 }

14 [Link] {
 271

15 text-decoration: line-through;

16 }

17 [Link] {

18 text-decoration: underline line-through;

19 }

20 [Link] {

21 text-decoration: none;

22 }

23 </style>

24 </head>

25 <body>

26 <div>

27 <p class="under">Это подчеркнутый текст.</p>

28 <p class="over">Это надчеркнутый текст</p>

29 <p class="line">Это зачеркнутый текст</p>

30 <p class="mixed">Это подчеркнутый и зачеркнутый текст</p>

31 <p>Не подчеркнутая <a href="[Link]" class="none">ссылка<a></p>

32 </div>

33 </body>

34 </html>
 272

При необходимости мы можем комбинировать значения. Так, в предпоследнем случае применялся стиль:

1 [Link] { text-decoration: underline line-through; }

Межсимвольный интервал

Два свойства CSS позволяют управлять интервалом между символами и словами текста. Для межсимвольного интервала
применяется атрибут letter-spacing, а для интервала между словами - word-spacing:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Шрифты в CSS3</title>

7 <style>

8 [Link] {

9 letter-spacing: -1px;

10 }

11 [Link] {

12 letter-spacing: 1px;

13 }
 273

14 [Link]{

15 word-spacing: -1px;

16 }

17 [Link]{

18 word-spacing: 1px;

19 }

20 </style>

21 </head>

22 <body>

23 <div>

24 <h3>Обычный текст</h3>

25 <p>Над ним не было ничего уже, кроме неба...</p>

26 <h3>letter-spacing: -1px;</h3>

27 <p class="smallLetterSpace">Над ним не было ничего уже, кроме

неба...</p>
28
<h3>letter-spacing: 1px;</h3>
29
<p class="bigLetterSpace">Над ним не было ничего уже, кроме
30
неба...</p>
31
<h3>word-spacing: -1px</h3>
32
<p class="smallWordSpace">Над ним не было ничего уже, кроме
33 неба...</p>

34 <h3>word-spacing: 1px</h3>
 274

<p class="bigWordSpace">Над ним не было ничего уже, кроме

неба...</p>
35
</div>
36
</body>

</html>

text-shadow

С помощью свойства text-shadow можно создать тени для текста. Для этого свойства необходимо задать четыре значения:
горизонтальное смещение тени относительно текста, вертикальное смещение тени относительно текста, степень размытости тени
и цвет отбрасываемой тени. Например:

1 h1{

2 text-shadow: 5px 4px 3px #999;

3 }

В данном случае горизонтальное смещение тени относительно букв составляет 5 пикселей, а вертикальное смещение вниз - 4
пикселя. Степень размытости - 3 пикселя, и для тени используется цвет #999.

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

1 h1{
 275

2 text-shadow: -5px -4px 3px #999;

3 }

Стилизация абзацев
Последнее обновление: 21.04.2016

Отдельная группа свойств CSS позволяет стилизовать большие группы текста, например, установить высоту строки или
выравнивание текста.
 276

line-height

Свойство line-height определяет межстрочный интервал. Для его установки можно использовать пиксели, проценты или
единицы em. Как правило, применяются либо проценты, либо em. Например:

1 p{

2 line-height: 150%;

3 }

Если это свойство не установлено, то по умолчанию используется значение line-height: 120%;.

text-align

Свойство text-align выравнивает текст относительно одной из сторон веб-страницы. Оно принимает следующие значения:

 left: текст выравнивается по левой стороне

 right: текст выравнивается по правой стороне

 justify: выравнивание по ширине, слова равномерно распределяются по строке

 center: выравнивание по центру

Например:

1 p{
 277

2 text-align: left;

3 }

text-indent

Свойство text-indent задает отступ первой строки абзаца. Для установки отступа могут применяться стандартные единицы
измерения, например, em или пиксели:

1 p{

2 text-indent: 35px;

3 }

Стилизация списков
Последнее обновление: 21.04.2016
 278

CSS предоставляет специальные свойства по стилизации списков. Одним из таких свойств является list-style-type. Оно может
принимать следующие значения для нумерованных списков:

 decimal: десятичные числа, отсчет идет от 1

 decimal-leading-zero: десятичные числа, которые предваряются нулем, например, 01, 02, 03, … 98, 99

 lower-roman: строчные латинские цифры, например, i, ii, iii, iv, v

 upper-roman: заглавные латинские цифры, например, I, II, III, IV, V…

 lower-alpha: строчные латинские буквы, например, a, b, c..., z

 upper-alpha: заглавные латинские буквы, например, A, B, C, … Z

Для ненумерованных списков:

 disc: черный диск

 circle: пустой кружочек

 square: черный квадратик

 279

Например:

1 ul{

2 list-style-type: square;

3 }

Чтобы вообще отключить маркеры у элементов списка, используется значение none:

1 ul{

2 list-style-type: none;

3 }

Данное свойство может применяться как ко всему списку, так и к отдельным элементам. Например:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Стилизация списков в CSS3</title>

6 <style>

8 .decimal{
 280

9 list-style-type: decimal;

10 }

11 ol{

12 list-style-type: lower-roman;

13 }

14 </style>

15 </head>

16 <body>

17 <ol>

18 <li>Элемент 1</li>

19 <li class="decimal">Элемент 2</li>

20 <li>Элемент 3</li>

21 <li>Элемент 4</li>

22 </ol>

23 </body>

24 </html>

list-style-position

Веб-браузеры обычно отображают маркеры списка слева от элементов списка. С помощью свойства list-style-position мы можем
настроить их позиционирование. Это свойство принимает два значения: outside (по умолчанию) и inside (обеспечивает
равномерное распределение по ширине).
 281

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Стилизация списков в CSS3</title>

6 <style>

8 [Link]{

9 list-style-position: outside;

10 }

11 [Link]{

12 list-style-position: inside;

13 }

14 </style>

15 </head>

16 <body>

17 <h3>Inside</h3>

18 <ul class="inside">

19 <li>Он стал прислушиваться и услыхал звуки приближающегося топота лошадей и звуки

голосов...</li>
20
<li>Он стал прислушиваться и услыхал звуки приближающегося топота лошадей и звуки
21
 282

голосов...</li>

</ul>
22
<h3>Outside</h3>
23
<ul class="outside">
24
<li>Он стал прислушиваться и услыхал звуки приближающегося топота лошадей и звуки
25 голосов...</li>

26 <li>Он стал прислушиваться и услыхал звуки приближающегося топота лошадей и звуки

голосов...</li>
27
</ul>
28
</body>

</html>

list-style-image

Свойство list-style-image позволяет задать в качестве маркера изображение:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Стилизация списков в CSS3</title>

6 <style>
 283

7 ul{

8 list-style-image:url(phone_touch.png);

9 }

10 </style>

11 </head>

12 <body>

13 <ul>

14 <li>iPhone 6S</li>

15 <li>Galaxy S7</li>

16 <li>Nexus 5X</li>

17 <li>Lumia 950</li>

18 </ul>

19 </body>

20 </html>

Свойство list-style-image в качестве значения принимает путь к изображению url(phone_touch.png), где "phone_touch.png" - это
название файла изображения. То есть в данном случае предполагается, что в одной папке с веб-страницей находится файл
изображения phone_touch.png.

Стилизация таблиц
Последнее обновление: 21.04.2016
 284

CSS предоставляет ряд свойств, которые помогают стилизовать таблицу:

 border-collapse: устанавливает, как будет стилизоваться граница смежных ячеек

 border-spacing: устанавливает промежутки между границами смежных ячеек

 caption-side: устанавливает положение элемента caption

 empty-cells: задает режим отрисовки для пустых ячеек

 table-layout: определяет размеры таблицы

Установка таблицы

Ранее для установки границы в таблице широко использовался атрибут border, например:

1 <table border="2px" >

Сейчас же тенденция для стилизации использовать только стили CSS, поэтому граница также задается через CSS с помощью
стандартного свойства border:

1 table {
 285

2 border: 1px solid #ccc; /* граница всей таблицы */

3 }

4 tr {

5 border: 1px solid #ccc; /* границы между строками */

6 }

7 td, th {

8 border: 1px solid #ccc; /* границы между столбцами */

9 }

При установке границ между столбцами с помощью свойства border-collapse можно установить общую или раздельную границу
между смежными ячейками:

 collapse: смежные ячейки имеют общую границу

 separate: смежные ячейки имеют отдельные границы, которые разделяются пространством

Если смежные ячейки имеют раздельные границы, то с помощью свойства border-spacing можно установить пространство между
границами:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Стилизаци таблиц в CSS3</title>

 286

6 <style>

7 table {

8 border: 1px solid #ccc;

9 border-spacing: 3px;

10 }

11

12 td, th{

13 border: solid 1px #ccc;

14 }

15 .collapsed{

16 border-collapse: collapse;

17 }

18 .separated{

19 border-collapse: separate;

20 }

21 </style>

22 </head>

23 <body>

24 <h3>Collapse</h3>

25 <table class="collapsed">

26 <tr><th>Модель</th><th>Производитель</th><th>Цена</th></tr>
 287

27 <tr><td>Lumia 950</td><td>Microsoft</td><td>29900</td></tr>

28 <tr><td>iPhone 6S</td><td>Apple</td><td>52900</td></tr>

29 <tr><td>Nexus 6P</td><td>Huawei</td><td>49000</td></tr>

30 </table>

31 <h3>Separate</h3>

32 <table class="separated">

33 <tr><th>Модель</th><th>Производитель</th><th>Цена</th></tr>

34 <tr><td>G 5</td><td>LG</td><td>44900</td></tr>

35 <tr><td>HTC 10</td><td>HTC</td><td>49900</td></tr>

36 <tr><td>Nexus 5X</td><td>Google/LG</td><td>25000</td></tr>

37 </table>

38 </body>

39 </html>

Пустые ячейки

Свойство empty-cells позволяет стилизовать пустые ячейки с помощью одного из следующих значений:

 show: пустые ячейки отображаются, значение по умолчанию

 hide: пустые ячейки не отображаются

1 <!DOCTYPE html>
 288

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Стилизаци таблиц в CSS3</title>

6 <style>

7 table {

8 border: 1px solid #ccc;

9 border-spacing: 3px;

10 }

11

12 td, th{

13 border: solid 1px #ccc;

14 }

15 .hidden-empty-cells{

16 empty-cells: hide;

17 }

18 </style>

19 </head>

20 <body>

21 <h3>Show</h3>

22 <table>
 289

23 <tr><th>Модель</th><th>Производитель</th><th>Цена</th></tr>

24 <tr><td>Lumia 950</td><td>Microsoft</td><td>29900</td></tr>

25 <tr><td>iPhone 6S</td><td></td><td></td></tr>

26 <tr><td>Nexus 6P</td><td>Huawei</td><td>49000</td></tr>

27 </table>

28 <h3>Hide</h3>

29 <table class="hidden-empty-cells">

30 <tr><th>Модель</th><th>Производитель</th><th>Цена</th></tr>

31 <tr><td>G 5</td><td>LG</td><td>44900</td></tr>

32 <tr><td>HTC 10</td><td></td><td></td></tr>

33 <tr><td>Nexus 5X</td><td>Google/LG</td><td>25000</td></tr>

34 </table>

35 </body>

36 </html>

Позиционирование заголовка

Свойство caption-side управляет позицией заголовка и может принимать следующие значения:

 top: позиционирование заголовка вверху (значение по умолчанию)

 bottom: позиционирование заголовка внизу

 290

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Стилизаци таблиц в CSS3</title>

6 <style>

7 table {

8 border: 1px solid #ccc;

9 border-spacing: 3px;

10 }

11

12 caption {

13

14 font-weight: bold;

15 }

16

17 td, th{

18 border: solid 1px #ccc;

19 }

20 .captionBottom{

21 caption-side: bottom;
 291

22 }

23 </style>

24 </head>

25 <body>

26 <h3>Top</h3>

27 <table>

28 <caption>Флагманы 2015 года</caption>

29 <tr><th>Модель</th><th>Производитель</th><th>Цена</th></tr>

30 <tr><td>Lumia 950</td><td>Microsoft</td><td>29900</td></tr>

31 <tr><td>iPhone 6S</td><td>Apple</td><td>52900</td></tr>

32 <tr><td>Nexus 6P</td><td>Huawei</td><td>49000</td></tr>

33 </table>

34 <h3>Bottom</h3>

35 <table class="captionBottom">

36 <caption>Новинки 2016 года</caption>

37 <tr><th>Модель</th><th>Производитель</th><th>Цена</th></tr>

38 <tr><td>G 5</td><td>LG</td><td>44900</td></tr>

39 <tr><td>HTC 10</td><td>HTC</td><td>49900</td></tr>

40 <tr><td>iPhone SE</td><td>Apple</td><td>37000</td></tr>

41 </table>

42 </body>
 292

43 </html>

Управление размером таблицы

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

Однако с помощью другого значения - fixed можно установить фиксированную ширину:

1 table {

2 border: 1px solid #ccc;

3 border-spacing: 3px;

4 table-layout: fixed;

5 width:350px;

6 }

Вертикальное выравнивание ячеек

Как правило, содержимое ячеек таблицы выравнивается по центру ячейки. Но с помощью свойства vertical-align это поведение
можно переопределить. Это свойство принимает следующие значения:

 top: выравнивание содержимого по верху ячейки

 baseline: выравнивание первой строки текста по верху ячейки

 293

 middle: выравнивание по центру (значение по умолчанию)

 bottom: выравнивание по низу

Свойство vertical-align применяется только к элементам <th> и <td>:

1 td, th{

2 border: solid 1px #ccc;

3 vertical-align: bottom;

4 height: 30px;

5 }

Блочная модель
Последнее обновление: 21.04.2016

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

Схематично блочную модель можно представить следующим образом:

 294

Пусть элемент расположен в каком-нибудь внешнем контейнере. Это может быть элемент body, div и так далее. От других
элементов он отделяется некоторым расстоянием - внешним отступом, которое описывается свойством CSS margin. То есть
свойство margin определяет расстояние от границы текущего элемента до других соседних элементов или до границ внешнего
контейнера.

Далее начинается сам элемент. И в начале идет его граница, которая в CSS описывается свойством border.

После границы идет внутренний отступ, который в CSS описывается свойством padding. Внутренний отступ определяет расстояние
от границы элемента до внутреннего содержимого.

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

Например, определим следующую веб-страницу:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Блочная модель в CSS3</title>

6 <style>

7 div{

8 margin: 15px; /* внешний отступ */

9 padding: 11px; /* внутренний отступ */

 295

border: 3px solid red; /* границы шириной в 3 пикселя сплошной красной

10
линией */
11
}
12
</style>
13
</head>
14
<body>
15
<div>
16
<p>Первый блок</p>
17
</div>
18
<div>
19
<p>Второй блок</p>
20
</div>
21
</body>
22
</html>

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

В Mozilla Firefox этот пункт называется Исследовать элемент.

 296

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

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

Если мы явным образом не указываем значения свойств margin, padding и border, то браузер применяет предустановленные
значения.

Внешние отступы
Последнее обновление: 21.04.2016

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

 margin-top: отступ сверху

 margin-bottom: отступ снизу

 margin-left: отступ слева

 297

 margin-right: отступ справа

Например:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Блочная модель в CSS3</title>

6 <style>

7 div{

8 margin-top: 30px; /* отступ сверху */

9 margin-left: 25px; /* отступ слева */

10 margin-right: 20px; /* отступ справа */

11 margin-bottom: 15px; /* отступ снизу */

12

13 border: 3px solid red; /* граница */

14 }

15 </style>

16 </head>

17 <body>

18 <div>
 298

19 <p>Первый блок</p>

20 </div>

21 <div>

22 <p>Второй блок</p>

23 </div>

24 <div>

25 <p>Третий блок</p>

26 </div>

27 </body>

28 </html>

Можно вместо четырех свойств задать одно:

1 div{

2 margin: 30px 20px 15px 25px;

4 border: 3px solid red;

5 }

Свойство задается в формате:

1 margin: отступ_сверху отступ_справа отступ_снизу отступ_слева;

 299

Если значения для всех четырех отступов совпадает, то мы можем указать только одно значение:

1 div{

2 margin: 25px;

3 }

В этом случае для всех четырех отступов будет использоваться 25 пикселей.

Для установки отступов можно использовать точные значения в пикселях (px) или em, либо процентные отношения, либо
значение auto (автоматическая установка отступов).

Например:

1 margin-left: 2em;

Значение 2 em определяет расстояние, которое в два раза больше размера шрифта элемента.

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

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

1 div{

2 margin-top: 30px; /* отступ сверху */

3 margin-left: 25px; /* отступ слева */

4 margin-right: 20px; /* отступ справа */

 300

5 margin-bottom: 15px; /* отступ снизу */

6 }

Между первым и вторым блоками расстояние будет равно 30 пикселям - значение свойства margin-top второго блока div, несмотря
на то, что у первого блока div имеется свойство margin-bottom, равное 15 пикселям.

Внутренние отступы
Последнее обновление: 21.04.2016

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

 padding-top: отступ сверху

 padding-bottom: отступ снизу

 padding-left: отступ слева

 padding-right: отступ справа

Например:
 301

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Блочная модель в CSS3</title>

6 <style>

7 [Link]{

9 margin: 25px;

10

11 padding-top:30px;

12 padding-right: 25px;

13 padding-bottom: 35px;

14 padding-left: 28px;

15

16 border: 2px solid red;

17 }

18 [Link]{

19

20 height: 50px;

21 background-color:blue;
 302

22 }

23 </style>

24 </head>

25 <body>

26 <div class="outer">

27 <div class="inner"></div>

28 </div>

29 </body>

30 </html>

Для установки значения отступов, как и в margin, могут применяться либо конкретные значения в пикселях, так и процентные
значения (относительно размеров элементов).

Для записи отступов также можно использовать сокращенную запись:

1 padding: отступ_сверху отступ_справа отступ_снизу отступ_слева;

Например:

1 [Link]{

3 margin: 25px;

4
 303

5 padding: 30px 25px 35px 28px;

7 border: 2px solid red;

8 }

Если все четыре значения совпадают, то можно писать указать только одно значение для всех отступов:

1
[Link]{
2

3
margin: 25px;
4

5
padding: 30px;
6

7
border: 2px solid red;
8

Границы
Последнее обновление: 21.04.2016


 304

Граница отделяется элемент от внешнего по отношению к нему содержимого. При этом граница является частью элемента.

Для настройки границы могут использоваться сразу несколько свойств:

 border-width: устанавливает ширину границы

 border-style: задает стиль линии границы

 border-color: устанавливает цвет границы

Свойство border-width может принимать следующие типы значений:

 Значения в единицах измерения, таких как em, px или cm

1 border-width: 2px;

 Одно из константных значений: thin (тонкая граница - 1px), medium (средняя по ширине - 3px), thick (толстая - 5px)

1 border-width: medium;

Свойство border-color в качестве значения принимает цвет CSS:

1 border-color: red;

Свойство border-style оформляет тип линии границы и может принимать одно из следующих значений:

 none: граница отсутствует

 305

 solid: граница в виде обычной линии

 dashed: штриховая линия

 dotted: линия в виде последовательности точек

 double: граница в виде двух параллельных линий

 groove: граница имеет трехмерный эффект

 inset: граница как бы вдавливается во внутрь

 outset: аналогично inset, только граница как бы выступает наружу

 ridge: граница также реализует трехмерный эффект

Например:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Блочная модель в CSS3</title>

6 <style>

7 div{
 306

8 width: 100px;

9 height:100px;

10 border-style: solid;

11 border-color: red;

12 border-width: 2px;

13 }

14 </style>

15 </head>

16 <body>

17 <div></div>

18 </body>

19 </html>

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

1 /* для верхней границы */

2 border-top-width

3 border-top-style

4 border-top-color

6 /* для нижней границы */

 307

7 border-bottom-width

8 border-bottom-style

9 border-bottom-color

10

11 /* для левой границы */

12 border-left-width

13 border-left-style

14 border-left-color

15

16 /* для правой границы */

17 border-right-width

18 border-right-style

19 border-right-color

Свойство border

Вместо установки по отдельности цвета, стиля и ширины границы мы можем использовать одно свойство - border:

1 border: ширина стиль цвет

Например:

1 border: 2px solid red;

 308

Для установки границы для отдельных сторон можно использовать одно из свойств:

1 border-top

2 border-bottom

3 border-left

4 border-right

Их использование аналогично:

1 border-top: 2px solid red;

Радиус границы

Свойство border-radius позволяет округлить границу. Это свойство принимает значение радиуса в пикселях или единицах em.

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Блочная модель в CSS3</title>

6 <style>

7 div{

8 width: 100px;

9 height:100px;
 309

10 border: 2px solid red;

11 border-radius: 30px;

12 }

13 </style>

14 </head>

15 <body>

16 <div></div>

17 </body>

18 </html>

Теперь каждый угол будет скругляться по радиусу в 30 пикселей:

Так как у элемента может быть максимально четыре угла, то мы можем указать четыре значения для установки радиуса у каждого
углов:

1 border-radius: 15px 30px 5px 40px;

Вместо общей установки радиусов для всех углов, можно их устанавливать по отдельности. Так, предыдущее значение border-
radius можно переписать следующим образом:

1 border-top-left-radius: 15px; /* радиус для верхнего левого угла */

 310

2 border-top-right-radius: 30px; /* радиус для верхнего правого угла */

3 border-bottom-right-radius: 5px; /* радиус для нижнего левого угла */

4 border-bottom-left-radius: 40px; /* радиус для нижнего правого угла */

Также border-radius поддерживает возможность создания эллиптических углов. То есть угол не просто скругляется, а использует
два радиуса, образуя в итоге душу эллипса:

1 border-radius: 40px/20px;

В данном случае полагается, что радиус по оси X будет иметь значение 40 пикселей, а по оси Y - 20 пикселей.

Размеры элементов
Последнее обновление: 21.04.2016


 311

Размеры элементов задаются с помощью свойств width (ширина) и height (высота).

Значение по умолчанию для этих свойств - auto, то есть браузер сам определяет ширину и высоту элемента. Можно также явно
задать размеры с помощью единиц измерения (пикселей, em) или с помощью процентов:

1 width: 150px;

2 width: 75%;

3 height: 15em;

Пиксели определяют точные ширину и высоту. Единица измерения em зависит от высоты шрифта в элементе. Если размер шрифта
элемента, к примеру, равен 16 пикселей, то 1 em для этого элемента будет равен 16 пикселям. То есть если у элемента установить
ширину в 15em, то фактически она составит 15 * 16 = 230 пикселей. Если же у элемента не определен размер шрифта, то он будет
взят из унаследованных параметров или значений по умолчанию.

Процентные значения для свойства width вычисляются на основании ширины элемента-контейнера. Если, к примеру, ширина
элемента body на веб-странице составляет 1000 пикселей, а вложенный в него элемент <div> имеет ширину 75%, то фактическая
ширина этого блока <div> составляет 1000 * 0.75 = 750 пикселей. Если пользователь изменит размер окна браузера, то ширина
элемента body и соответственно ширина вложенного в него блока div тоже изменится.

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

Например:

1 <!DOCTYPE html>
 312

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Размеры в CSS3</title>

6 <style>

7 [Link]{

8 width: 75%;

9 height: 200px;

10 margin: 10px;

11 border: 1px solid #ccc;

12 background-color: #eee;

13 }

14 [Link]{

15

16 width: 80%;

17 height: 80%;

18 margin: auto;

19 border: 1px solid red;

20 background-color: blue;

21 }

22 </style>
 313

23 </head>

24 <body>

25 <div class="outer">

26 <div class="inner"></div>

27 </div>

28 </body>

29 </html>

В то же время фактические размеры элемента могут в итоге отличаться от тех, которые установлены в свойствах width и height.
Например:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Размеры в CSS3</title>

6 <style>

7 [Link]{

8 width: 200px;

9 height: 100px;

10 margin: 10px;
 314

11 padding: 10px;

12 border: 5px solid #ccc;

13 background-color: #eee;

14 }

15 </style>

16 </head>

17 <body>

18 <div class="outer">

19 Определение фактического размера в CSS 3

20 </div>

21 </body>

22 </html>

Как видно на скриншоте, в реальности значение свойства width - 200px - определяет только ширину внутреннего содержимого
элемента, а под блок самого элемента будет выделяться пространство, ширина которого равна ширине внутреннего содержимого
(свойство width) + внутренние отступы (свойство padding) + ширина границы (свойство border-width) + внешние отступы (свойство
margin). То есть элемент будет иметь ширину в 230 пикселей, а ширина блока элемента с учетом внешних отступов составит 250
пикселей.

Подобные расчеты следует учитывать при определении размеров элементов.

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

 315

 min-width: минимальная ширина

 max-width: максимальная ширина

 min-height: минимальная высота

 max-height: максимальная высота

1 min-width: 200px;

2 width:50%;

3 max-width: 300px;

В данном случае ширина элемента равна 50% ширины элемента-контейнера, однако при этом не может быть меньше 200 пикселей
и больше 300 пикселей.

Переопределение ширины блока

Свойство box-sizing позволяет переопределить установленные размеры элементов. Оно может принимать одно из следующих
значений:

 content-box: значение свойства по умолчанию, при котором браузер для определения реальных ширины и высоты элементов
добавляет к значениям свойств width и height ширину границы и внутренние отступы

 padding-box: указывает веб-браузеру, что ширина и высота элемента должны включать внутренние отступы как часть своего
значения. Например, пусть у нас есть следующий стиль:

1 width: 200px;

2 height: 100px;
 316

3 margin: 10px;

4 padding: 10px;

5 border: 5px solid #ccc;

6 background-color: #eee;

7 box-sizing: padding-box;

 Здесь реальная ширина внутреннего содержимого блока будет равна 200px (width) - 10px (padding-left) - 10px (padding-right)
= 180px.

 Стоит отметить, что большинство современных браузеров не поддерживают данное свойство.

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

1 width: 200px;

2 height: 100px;

3 margin: 10px;

4 padding: 10px;

5 border: 5px solid #ccc;

6 background-color: #eee;

7 box-sizing: border-box;

 Здесь реальная ширина внутреннего содержимого блока будет равна 200px (width) - 10px (padding-left) - 10px (padding-right) -
5px (border-left-width) - 5px (border-right-width) = 170px.
 317

Например, определим два блока, которые отличаются только значением свойства box-sizing:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Размеры в CSS3</title>

6 <style>

7 div{

8 width: 200px;

9 height: 100px;

10 margin: 10px;

11 padding: 10px;

12 border: 5px solid #ccc;

13 background-color: #eee;

14 }

15 div.outer1{

16 box-sizing: content-box;

17 }

18 div.outer2{

19 box-sizing: border-box;
 318

20 }

21 </style>

22 </head>

23 <body>

24 <div class="outer1">

25 Определение фактического размера в CSS 3

26 </div>

27 <div class="outer2">

28 Определение фактического размера в CSS 3

29 </div>

30 </body>

31 </html>

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

Фон элемента
Последнее обновление: 21.04.2016


 319

Фон элемента описывается в CSS свойством background. Фактически это свойство представляет сокращение набора следующих
свойств CSS:

 background-color: устанавливает цвет фона

1 background-color: #ff0507;

 background-image: в качестве фона устанавливается изображение

1 background-image: url([Link]);

 Это свойство принимает одно значение: ключевое слово url, после которого в скобках идет путь к файлу изображения. В
данном случае имеется в виду, что в одной папке рядом с веб-страницей находится файл [Link].

 Также можно использовать абсолютные адреса URL, например:

1 background-image: url([Link]

 Либо можно использовать относительные адреса - относительно html-документа или корневого каталога сайта:

background-image: url(../images/[Link]); /* путь относительно html-

1
документа */

 background-repeat: устанавливает режим повторения фонового изображения по всей поверхности элемента

 background-size: устанавливает размер фонового изображения

 320

 background-position: указывает позицию фонового изображения

 background-attachment: устанавливает стиль прикрепления фонового изображения к элементу

 background-clip: определяет область, которая вырезается из изображения и используется в качестве фона

 background-origin: устанавливает начальную позицию фонового изображения

Например:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Блочная модель в CSS3</title>

6 <style>

7 div{

8 width: 250px;

9 height: 200px;

10 margin: 10px;

11 }

12

13 .colored{

14 background-color: #ff0507;
 321

15 }

16

17 .imaged{

18 background-image: url([Link]);

19 }

20 </style>

21 </head>

22 <body>

23 <div class="colored">Первый блок</div>

24 <div class="imaged">Второй блок</div>

25 </body>

26 </html>

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

Повторение изображения

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

С помощью свойства background-repeat можно изменить механизм повторения. Оно может принимать следующие значения:

 repeat-x: повторение по горизонтали

 repeat-y: повторение по вертикали

 repeat: повторение по обеим сторонам (действие по умолчанию)

 space: изображение повторяется для заполнения всей поверхности элемента, но без создания фрагментов

 round: изображение должным образом масштабируется для полного заполнения всего пространства

 no-repeat: изображение не повторяется

Например:

1 div{

2 width: 200px;

3 height: 150px;

5 background-image: url([Link]);

6 background-repeat: round;

7 }

Размер изображения

Свойство background-size позволяет установить размер фонового изображения. Для установки размера можно использовать либо
единицы измерения, например, пиксели, либо проценты, либо одно из предустановленных значений:
 323

 contain: масштабирует изображение по наибольшей стороне, сохраняя аспектное отношение

 cover: масштабирует изображение по наименьшей стороне, сохраняя аспектное отношение

 auto: значение по умолчанию, изображение отображается в полный размер

Если нужно масштабировать изображение таким образом, чтобы оно оптимальнее было вписано в фон, то для обеих настроек
можно установить значение 100%:

1 background-size: 100% 100%;

Если задаются точные размеры, то вначале указывается ширина, а потом высота изображения:

background-size: 200px 150px; /* ширина 200 пикселей, высота 150 пикселей

1
*/

Можно задать точное значение для одного измерения - ширины или высоты, а для другого задать автоматические размеры, чтобы
браузер сам выводил точные значения:

background-size: 200px auto; /* ширина 200 пикселей, автоматическая

1
высота */

Например:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">
 324

5 <title>Блочная модель в CSS3</title>

6 <style>

7 div{

8 width: 200px;

9 height: 150px;

10 margin: 10px;

11

12 border: black solid 1px;

13 background-image: url([Link]);

14

15 }

16 .imaged1{

17

18 background-size: cover;

19 }

20 .imaged2{

21

22 background-size: 140px 110px;

23 }

24 </style>

25 </head>
 325

26 <body>

27 <div class="imaged1"></div>

28 <div class="imaged2"></div>

29 </body>

30 </html>

Во втором случае изображение будет масштабироваться до размеров 140х110. Поскольку у нас еще остается место на элементе, то
по умолчанию изображение будет повторяться для заполнения всей поверхности:

Позиция изображения

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

1 background-position: отступ_по_оси_X отступ_по_оси_Y;

Например:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Блочная модель в CSS3</title>

 326

<style>
6
div{
7
width: 300px;
8
height: 250px;
9
margin: 10px;
10

11
border: 1px solid #ccc;
12
background-color: #eee;
13
background-image: url([Link]);
14
background-repeat: no-repeat;
15
background-position: 20px 15px;
16
}
17
</style>
18
</head>
19
<body>
20
<div>Туман начинал расходиться, и неопределенно, верстах в двух расстояния, виднелись уже
21
неприятельские
22
войска на противоположных возвышенностях...</div>
23
</body>
24
</html>
 327

Кроме того, данное свойство может принимать одно из следующих значений:

 top: выравнивание по верхнему краю элемента

 left: выравнивание по левому краю элемента

 right: выравнивание по правому краю элемента

 bottom: выравнивание по нижнему краю элемента

 center: изображение располагается по центру элемента

Например:

1 background-position: top right;

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

background-attachment

Свойство background-attachment управляет, как фоновое изображение будет прикреплено к элементу. Это свойство может
принимать следующие значения:

 fixed: фон элемента фиксирован вне зависимости от прокрутки внутри элемента

 local: по мере прокрутки внутри элемента фон изменяется

 scroll: фон фиксирован и не меняется при прокрутке, но в отличие от fixed несколько элементов могут использовать свой
фон, тогда как при fixed создается один фон для всех элементов

Например:
 328

1 div{

2 width: 300px;

3 height: 250px;

6 overflow:scroll; /* добавляем прокрутку */

7 border: 1px solid #ccc;

9 background-image: url([Link]);

10 background-size: 512px 384px;

11 background-attachment: scroll;

12 background-repeat: no-repeat;

13 }

background-origin

Свойство background-origin указывает позицию на изображении, с которой будет начинаться собственно фоновое изображение
для элемента. Оно может принимать следующие значения:

 border-box: фон у элемента устанавливается начиная с его внешней границы, определяемой свойством border

 padding-box: фон устанавливается с учетом внутренних отступов

 content-box: фон устанавливается по содержимому элемента

 329

Используем все три значения:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Блочная модель в CSS3</title>

6 <style>

7 div{

8 width: 200px;

9 height: 200px;

10 margin: 10px;

11 display: inline-block; /* располагаем блоки в ряд */

12 color: #eee;

13

14 padding:15px;

15 border: 15px solid rgba(23,23,23,0.2);

16

17 background-image: url([Link]);

18 background-size: cover;

19 background-repeat: no-repeat;
 330

20 }

21 .borderBox {background-origin: border-box;}

22 .paddingBox {background-origin: padding-box;}

23 .contentBox {background-origin: content-box;}

24 </style>

25 </head>

26 <body>

27 <div class="borderBox">

28 Вся власть - котикам!

29 </div>

30 <div class="paddingBox">

31 Вся власть - котикам!

32 </div>

33 <div class="contentBox">

34 Вся власть - котикам!

35 </div>

36 </body>

37 </html>

background-clip
 331

Свойство background-clip определяет, какая часть изображения используется для фона. Он принимает те же значения:

 border-box: изображение обрезается по границам элемента

 padding-box: из изображения исключается та часть, которая находится под границами элемента

 content-box: изображение обрезается по содержимому с учетом внутренних отступов

Например, если к предыдущей разметке мы применим следующие стили:

1 div{

2 width: 200px;

3 height: 200px;

4 margin: 10px;

5 display: inline-block;

7 color: #eee;

8 padding:15px;

9 border: 15px solid rgba(23,23,23,0.1);

10

11 background-image: url([Link]);

12 background-size: cover;

13 background-repeat: no-repeat;

14 }
 332

15 .borderBox{background-clip: border-box;}

16 .paddingBox{background-clip: padding-box;}

17 .contentBox{background-clip: content-box;}

Тогда мы получим следующий результат:

Свойство background

Свойство background по сути является сокращением всех ранее рассмотренных свойств CSS в формате:
 333

background: <background-color> <background-position> <background-size>

1
<background-repeat> <background-origin> <background-clip> <background-
2
attachment>
3
<background-image>

Например, если у нас есть следующий набор свойств:

1 background-image: url([Link]);

2 background-color: #eee;

3 background-repeat: no-repeat;

4 background-clip: border-box;

5 background-origin: border-box;

6 background-attachment: local;

То мы их можем сократить следующим образом:

1 background: #eee no-repeat border-box local url([Link]);

Создание тени у элемента

Последнее обновление: 21.04.2016


 334

Свойство box-shadow позволяет создать у элемента тень. Это свойство может принимать сразу несколько значений:

1 box-shadow: hoffset voffset blur spread color inset

 hoffset: горизонтальное смещение тени относительно элемента. При положительном значении тень смещается вправо, а
при отрицательном - влево

 voffset: вертикальное смещение тени относительно элемента. При положительном значении тень смещается вниз, а при
отрицательном - вверх

 blur: необязательное значение, которое определяет радиус размытия тени. Чем больше это значение, тем более размытыми
будут края тени. По умолчанию имеет значение 0.

 spread: необязательное значение, которое определяет направление тени. Положительное значение распространяет тень во
вне во всех направлениях от элемента, а отрицательное значение направляет тень к элементу

 color: необязательное значение, которое устанавливает цвет тени

 inset: необязательное значение, которое заставляет рисовать тент внутри блока элемента

Например:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">
 335

5 <title>Тени в CSS3</title>

6 <style>

7 div{

8 width: 128px;

9 height: 96px;

10 margin: 20px;

11 border: 1px solid #ccc;

12 background-color: #eee;

13 box-shadow: 10px 4px 10px 3px #888;

14 }

15 </style>

16 </head>

17 <body>

18 <div></div>

19 </body>

20 </html>

Через запятую можно определить несколько различных теней:

1 box-shadow: 5px 3px 8px 3px #faa, 10px 4px 10px 3px #888 inset;
 336

Контуры элементов
Последнее обновление: 21.04.2016

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

Контур в CSS 3 представлен свойством outline, хотя данное свойство является сокращением следующих свойств:

 outline-color: цвет контура

 outline-offset: смещение контура

 outline-style: стиль контура. Оно принимает те же значения, что и border-style:

o none: контур отсутствует

o solid: контур в виде обычной линии

o dashed: штриховая линия

o dotted: линия в виде последовательности точек

 337

o double: контур в виде двух параллельных линий

 outline-width: толщина контура

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Контур в CSS3</title>

6 <style>

7 div{

8 width: 128px;

9 height: 96px;

10 margin: 20px;

11 border: 1px solid #ccc;

12 background-color: #eee;

13 outline-color: red;

14 outline-style: dashed;

15 outline-width: 2px;

16 }

17 </style>

18 </head>
 338

19 <body>

20 <div>Контур в CSS3</div>

21 </body>

22 </html>

С помощью свойства outline данное определение контура можно сократить следующим образом:

1 outline: red dashed 2px;

Обтекание элементов
Последнее обновление: 21.04.2016

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

Это свойство может принимать одно из следующих значений:

 339

 left: элемент перемещается влево, а все содержимое, которое идет ниже его, обтекает правый край элемента

 right: элемент перемещается вправо

 none: отменяет обтекание и возвращает объект в его обычную позицию

При применении свойства float для стилизуемых элементов, кроме элемента img, рекомендуется установить свойство width.

Итак, представим, что нам надо на странице вывести слева от основного текста изображение, справа должен быть сайдбар, а все
остальное место должно быть занято основным текстом статьи. Определим интерфейс страницы сначала без свойства float:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Обтекание в CSS3</title>

6 <style>

8 .image {

9 margin:10px;

10 margin-top:0px;

11 }

12 .sidebar{

13 border: 2px solid #ccc;

 340

background-color: #eee;
14
width: 150px;
15
padding: 10px;
16
margin-left:10px;
17
font-size: 20px;
18
}
19
</style>
20
</head>
21
<body>
22
<div>
23
<div class="sidebar">Л. Толстой. Война и мир. Том второй. Часть третья</div>
24
<img src="[Link]" class="image" alt="Война и мир" />
25
<p>Старый дуб, весь преображенный, раскинувшись шатром сочной, темной зелени, млел,
26
чуть колыхаясь в лучах вечернего солнца...</p>
27
<p>«Нет, жизнь не кончена в 31 год, – вдруг окончательно, беспеременно решил князь
28
Андрей...</p>
29
</div>
30
</body>
31
</html>

В данном случае мы получим последовательное размещение элементов на странице:

 341

Теперь на той же странице применим свойство float, изменив стили следующим образом:

1 .image {

2 float:left; /* обтекание слева */

3 margin:10px;

4 margin-top:0px;

5 }

6 .sidebar{

7 border: 2px solid #ccc;

8 background-color: #eee;

9 width: 150px;

10 padding: 10px;

11 margin-left:10px;

12 font-size: 20px;

13 float: right; /* обтекание справа */

14 }

Соответственно изменится и размещение элементов на странице:

 342

Элементы, к которым применяется свойство float, еще называют floating elements или плавающими элементами.

Запрет обтекания. Свойство clear

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

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

Свойство clear может принимать следующие значения:

 left: стилизуемый элемент может обтекать плавающий элемент справа. Слева же обтекание не работает

 right: стилизуемый элемент может обтекать плавающий элемент только слева. А справа обтекание не работает

 both: стилизуемый элемент может обтекать плавающие элементы и относительно них смещается вниз

 none: стилизуемый элемент ведет себя стандартным образом, то есть принимает участие в обтекании справа и слева

Например, пусть на веб-странице будет определен футер:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Обтекание в CSS3</title>
 343

6 <style>

7 .image {

8 float:left;

9 margin:10px;

10 margin-top:0px;

11 }

12 .footer{

13 border-top: 1px solid #ccc;

14 }

15 </style>

16 </head>

17 <body>

18

19 <img src="[Link]" class="image" alt="Дубы" />

20 <div class="footer">Copyright © MyCorp. 2016</div>

21 </body>

22 </html>

Наличие обтекания будет создавать некорректное отображение, при котором футер смещается вверх:
 344

Изменим стиль футера:

1 .footer{

2 border-top: 1px solid #ccc;

3 clear: both;

4 }

Теперь футер не будет обтекать изображение, а будет уходить вниз.

Прокрутка элементов
 345

Последнее обновление: 21.04.2016

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

Однако свойство overflow позволяет настроить поведение блока в подобной ситуации и добавить возможность прокрутки. Это
свойство может принимать следующие значения:

 auto: если контент выходит за границы блока, то создается прокрутка. В остальных случаях полосы прокрутки не
отображаются

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

 scroll: в блоке отображаются полосы прокрутки, даже если контент весь помещается в границах блока, и таких полос
прокрутки не требуется

 visible: значение по умолчанию, контент отображается, даже если он выходит за границы блока

Рассмотрим применение двух значений:

1 <!DOCTYPE html>
 346

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Прокрутка в CSS3</title>

6 <style>

7 .article1{

8 width: 300px;

9 height: 150px;

10 margin:15px;

11 border: 1px solid #ccc;

12 overflow: auto;

13 }

14 .article2{

15 width: 300px;

16 height: 150px;

17 margin:15px;

18 border: 1px solid #ccc;

19 overflow: hidden;

20 }

21 </style>

22 </head>
 347

<body>

<div class="article1">

23 <p>Старый дуб, весь преображенный, раскинувшись шатром сочной, темной зелени, млел,
чуть
24
колыхаясь в лучах вечернего солнца. Ни корявых пальцев, ни болячек, ни старого
25
недоверия и
26
горя – ничего не было видно. Да, это тот самый дуб», – подумал князь
27
Андрей, и на него вдруг нашло беспричинное весеннее чувство радости и
28 обновления.</p>

29 </div>

30 <div class="article2">

31 <p>Старый дуб, весь преображенный, раскинувшись шатром сочной, темной зелени, млел,
чуть
32
колыхаясь в лучах вечернего солнца. Ни корявых пальцев, ни болячек, ни старого
33
недоверия и
34
горя – ничего не было видно. Да, это тот самый дуб», – подумал князь
35
Андрей, и на него вдруг нашло беспричинное весеннее чувство радости и
36 обновления.</p>

37 </div>

</body>

</html>
 348

Свойство overflow управляет полосами прокрутки как по вертикали, так и по горизонтали. С помощью дополнительных
свойств overflow-x и overflow-y можно определить прокрутку соответственно по горизонтали и по вертикали. Данные свойства
принимают те же значения, что и overflow:

1 overflow-x: auto;

2 overflow-y: hidden;

Линейный градиент
Последнее обновление: 21.04.2016

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

Градиенты в CSS не представляют какого-то специального свойства. Они лишь создают значение, которое присваивается
свойству background-image.

Линейный градиент распространяется по прямой от одного конца элемента к другому, осуществляя плавный переход от одного
цвета к другому.

Для создания градиента нужно указать его начало и несколько цветов, например:
 349

1 background-image: linear-gradient(left,black,white);

В данном случае началом градиента будет левый край элемента, который обозначается значением left. Цвета градиента: черный
(black) и белый (white). То есть начиная с левого края элемента до правого будет плавно идти переход из черного цвета в белый.

В использовании градиентов есть один недостаток - многообразие браузеров вынуждает использовать префикс вендора:

-webkit- /* Для Google Chrome, Safari, Microsoft Edge, Opera выше 15

1
версии */
2
-moz- /* Для Mozilla Firefox */
3
-o- /* Для Opera старше 15 версии (Opera 12) */

Так, полноценное использование градиента будет выглядеть следующим образом:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Стилизация таблиц в CSS3</title>

6 <style>

7 div {

8 width: 200px;

9 height: 100px;

10 background-color: #eee;
 350

11 background-image: linear-gradient(left,black,white);

12 background-image: -o-linear-gradient(left,black,white);

13 background-image: -moz-linear-gradient(left,black,white);

14 background-image: -webkit-linear-gradient(left,black,white);

15 }

16 p{

17 margin: 0;

18 padding-top: 30px;

19 text-align: center;

20 color:white;

21 }

22 </style>

23 </head>

24 <body>

25 <div><p>Линейный черно-белый градиент</p></div>

26 </body>

27 </html>

Для установки начала градиента можно использовать следующие значения: left (слева направо), right (справа
налево), top (сверху вниз) или bottom (снизу вверх). Например, вертикальный градиент будет выглядеть следующим образом:
 351

1 background-image: linear-gradient(bottom,black,white);

Также можно задать диагональное направление с помощью двух значений:

1 background-image: linear-gradient(top left,black,white);

Кроме конкретных значений типа top или left также можно указать угол от 0 до 360, который определит направление градиента:

1 background-image: linear-gradient(30deg,black,white);

После величины углы указывается слово deg.

К примеру, 0deg означает, что градиент начинается в левой части и перемещается в правую часть, а при указании 45deg он
начинается в нижнем левом углу и перемещается под углом 45° в верхний правый угол.

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

1 background-image: linear-gradient(top, red, #ccc, blue);

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

1 background-image: linear-gradient(left, #ccc, red 20%, red 80%, #ccc);

Повторяющийся градиент
 352

С помощью repeating-linear-gradient можно создавать повторяющиеся линейные градиенты. Например:

background-image: repeating-linear-gradient(left, #ccc 20px, red 30px, rgba(0, 0, 126, .5)

40px);
1
background-image: -moz-repeating-linear-gradient(left, #ccc 20px, red 30px, rgba(0, 0, 126, .5)
2
40px);
3
background-image: -webkit-repeating-linear-gradient(left, #ccc 20px, red 30px, rgba(0, 0,
126, .5) 40px);

В данном случае градиент начинается с левого края элемента с полоски серого цвета (#ccc) шириной 20 пикселей, далее до 30
пикселей идет переход к красному цвету, а затем до 40 пикселей выполняется обратный переход к светло-синему цвету (rgba(0, 0,
126, .5)). После этого браузер повторяет градиент, пока не заполнит всю поверхность элемента.

Радиальный градиент
Последнее обновление: 21.04.2016

Радиальные градиенты в отличие от линейных распространяются от центра наружу по круговой схеме. Для создания радиального
градиента достаточно указать цвет, который будет в центре градиента, и цвет, который должен быть снаружи. Эти цвета
передаются в функцию radial-gradient(). Например:

1 <!DOCTYPE html>
 353

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Стилизация таблиц в CSS3</title>

6 <style>

7 div {

8 width: 200px;

9 height: 200px;

10 border-radius: 100px;

11

12 background-color: #eee;

13 background-image: radial-gradient(white, black);

14 background-image: -moz-radial-gradient(white, black);

15 background-image: -webkit-radial-gradient(white, black);

16 }

17 p{

18 margin: 0;

19 padding-top: 60px;

20 text-align: center;

21 color: #eee;

22 }
 354

23 </style>

24 </head>

25 <body>

26 <div><p>Радиальный градиент</p></div>

27 </body>

28 </html>

Как и в случае с линейным градиентом здесь также надо использовать префиксы вендоров для поддержки браузерами.

Радиальный градиент может иметь две формы: круговую и эллиптическую. Эллиптическая форма представляет распространение
градиента в виде эллипса и задается с помощью ключевого слова ellipse:

1 background-image: radial-gradient(ellipse, white, black);

Поскольку это значение для градиента по умолчанию, то оно может опускаться при использовании.

Круговая форма представляет распространение градиента в виде кругов от центра во вне. Для этого используется ключевое
слово circle:

1 background-image: radial-gradient(circle, white, black);

Как правило, центр радиального градиента расположен в центре элемента, но это поведение можно переопределить, указав
значение для параметра background-position:

1 background-image: radial-gradient(25% 30%, circle, white, black);

 355

Числа 25% 30% означают, что центр градиента будет находиться на расстоянии в 25% от левой границы и в 30% от верхней границы
элемента.

С помощью специальных дополнительных значений можно задать размер градиента:

 closest-side: градиент распространяется из центра только до ближайшей к центру стороне элемента. То есть градиент
остается внутри элемента

 closest-corner: ширина градиента вычисляется по расстоянию из его центра до ближайшего угла элемента, поэтому
градиент может выйти за пределы элемента.

 farthest-side: градиент распространяется из центра до самой дальней стороны элемента

 farthest-corner: ширина градиента вычисляется по расстоянию из его центра до самого дальнего угла элемента

background-image: radial-gradient(25% 30%, circle farthest-corner, white,

1
black);

Создание макета страницы и верстка

Блочная верстка. Часть 1
Последнее обновление: 24.04.2016



 356

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

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

Однако табличная верстка создает не самые гибкие по дизайну страницы, что является особенно актуальным аспектом в мире, где
нет одного единственного разрешения экрана, за то есть большие экраны на телевизорах, малые экраны на планшетах и фаблетах,
очень маленькие экраны на смартфонах и т.д. Все это многообразие экранов табличная верстка оказалась не в состоянии
удовлетворить. Поэтому постепенно ей на смену пришла блочная верстка. Блочная верстка - это отосительно условное название
способов и приемов верстки, когда в большинстве веб-страниц для разметки используется CSS-свойство float, а основным
строительным элементов веб-страниц является элемент <div>, то есть по сути блок. Используя свойство float и элементы div или
другие элементы, можно создать структуру страницы из нескольких столбцов, как при табличной верстке, которая будет
значительно гибче.

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

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

1 <!DOCTYPE html>
2 <html>
3 <head>
 357

4 <meta charset="utf-8">
5 <title>Блочная верстка в HTML5</title>
6 <style>
7 div{
8 margin: 10px;
9 border: 1px solid black;
10 font-size: 20px;
11 height: 80px;
12 }
13 #header{
14 background-color: #ccc;
15 }
16 #sidebar{
17 background-color: #ddd;
18 }
19 #main{
20 background-color: #eee;
21 height: 200px;
22 }
23 #footer{
24 background-color: #ccc;
25 }
26 </style>
27 </head>
28 <body>
29 <div id="header">Шапка сайта</div>
30 <div id="sidebar">Сайбар</div>
31 <div id="main">Основное содержимое</div>
32 <div id="footer">Футер</div>
33 </body>
34 </html>
 358

То есть пока получается примерно следующая страница:

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

Далее, чтобы переместить блок сайдбара влево по отношению к блоку основного содержимого и получить эффект обтекания, нам
надо указать у блока сайдбара свойство float: left и предпочтительную ширину. Ширина может быть фиксированной, например,
150 px или 8 em. Либо также можно использовать проценты, например, 30% - 30% от ширины контейнера body. С одной стороны,
блоками с фиксированной шириной легче управлять, но с другой процентные значения ширины позволяют создавать более гибкие,
резиновые блоки, которые изменяют размеры при изменении размеров окна браузера.

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

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

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

1 #sidebar{
2 background-color: #ddd;
3 float: left;
4 width: 150px;
5 }
6 #main{
7 background-color: #eee;
8 height: 200px;
 359

margin-left: 170px; /* 150px (ширина сайдбара) + 10px + 10px (2

9
отступа) */
10
}

В итоге у нас получится сайдбар по левую сторону от основного блока:

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

Создание правого сайдбара будет аналогично, только теперь нам надо установить у сайдбара значение float: right, а у блока
основного содержимого - отступ справа:

1 #sidebar{
2 background-color: #ddd;
3 float: right;
4 width: 150px;
5 }
6 #main{
7 background-color: #eee;
8 height: 200px;
9 margin-right: 170px;
10 }

При этом разметка html остается такой же, блок сайдбара по прежнему должен предшествовать блоку основного содержимого.

Блочная верстка. Часть 2

Последнее обновление: 24.04.2016
 360

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

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Блочная верстка в HTML5</title>
6 <style>
7 div{
8 margin: 10px;
9 border: 1px solid black;
10 font-size: 20px;
11 height: 80px;
12 }
13 #header{
14 background-color: #ccc;
15 }
16 #leftSidebar{
17 background-color: #ddd;
18 }
19 #rightSidebar{
20 background-color: #bbb;
21 }
22 #main{
 361

23 background-color: #eee;
24 height: 200px;
25 }
26 #footer{
27 background-color: #ccc;
28 }
29 </style>
30 </head>
31 <body>
32 <div id="header">Шапка сайта</div>
33 <div id="leftSidebar">Левый сайдбар</div>
34 <div id="rightSidebar">Правый сайдбар</div>
35 <div id="main">Основное содержимое</div>
36 <div id="footer">Футер</div>
37 </body>
38 </html>

Здесь опять же код обоих сайдбаров должен идти до блока с основным содержимым, который обтекает их.

Теперь изменим стили обоих сайдбаров и основного блока:

1 #leftSidebar{
2 background-color: #ddd;
3 float: left;
4 width: 150px;
5 }
6 #rightSidebar{
7 background-color: #bbb;
8 float: right;
9 width: 150px;
 362

10 }
11 #main{
12 background-color: #eee;
13 height: 200px;
14 margin-left: 170px;
15 margin-right: 170px;
16 }

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

Вложенные плавающие блоки

Последнее обновление: 24.04.2016


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

Определим сначала последовательно все блоки веб-страницы:

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Блочная верстка в HTML5</title>
 363

6 <style>
7 div{
8 margin: 10px;
9 border: 1px solid black;
10 font-size: 20px;
11 height: 80px;
12 }
13 #header{
14 background-color: #ccc;
15 }
16 #sidebar{
17 background-color: #bbb;
18 float: right;
19 width: 150px;
20 }
21 #main{
22 background-color: #fafafa;
23 height: 200px;
24 margin-right: 170px;
25 }
26 #menu{
27 background-color: #ddd;
28 }
29 #content{
30 background-color: #eee;
31 }
32 #footer{
33 background-color: #ccc;
34 }
35 </style>
36 </head>
37 <body>
 364

38 <div id="header">Шапка сайта</div>

39 <div id="sidebar">Правый сайдбар</div>
40 <div id="main">
41 <div id="menu">Меню</div>
42 <div id="content">Основное содержимое</div>
43 </div>
44 <div id="footer">Футер</div>
45 </body>
46 </html>

Опять же в главном блоке вложенные блоки идут последовательно: сначала блок меню, а потом блок основного текста.

Теперь применим обтекание к блоку меню:

1 #menu{
2 background-color: #ddd;
3 float: left;
4 width: 160px;
5 }
6 #content{
7 background-color: #eee;
8 margin-left: 180px;
9 }

Опять же у плавающего элемента, коим является блок меню, устанавливаются свойства float и width. А у обтекающего его блока
content устанавливается отступ слева.
 365

Аналогично можно сделать блок меню справа:

1 #menu{
2 background-color: #ddd;
3 float: right;
4 width: 160px;
5 }
6 #content{
7 background-color: #eee;
8 margin-right: 180px;
9 }

Выравнивание столбцов по высоте

Последнее обновление: 24.04.2016


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

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Блочная верстка в HTML5</title>
6 <style>
7 body, h2, p{
8 margin:0;
 366

9 padding:0;
10 }
11 body{
12 font-size: 18px;
13 }
14 #header{
15 background-color: #eee;
16 border-bottom: 1px solid #ccc;
17 height: 80px;
18 }
19 #menu{
20 background-color: #ddd;
21 float: left;
22 width: 150px;
23 }
24 #main{
25 background-color: #f7f7f7;
26 border-left: 1px solid #ccc;
27 margin-left: 150px;
28 padding: 10px;
29 }
30 #footer{
31 border-top: 1px solid #ccc;
32 background-color: #dedede;
33 }
34 </style>
35 </head>
36 <body>
37 <div id="header"><h2>Сайт [Link]</h2></div>
38 <div id="menu">
39 <ul>
40 <li><a href="#">Главная</a></li>
 367

<li><a href="#">Блог</a></li>
41
<li><a href="#">Контакты</a></li>
42
<li><a href="#">О сайте</a></li>
43
</ul>
44
</div>
45
<div id="main">
46
<h2>What is Lorem Ipsum?</h2>
47
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
48
Lorem Ipsum
49
has been the industry...</p>
50
</div>
51
<div id="footer">
52
<p>Copyright © [Link], 2016</p>
53
</div>
54
</body>
55
</html>

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

В данном случае, если в главном блоке много текста, то блок с меню имеет недостаточную длину.

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

Так, изменим выше созданную страницу следующим образом:

1 <!DOCTYPE html>
 368

2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Блочная верстка в HTML5</title>
6 <style>
7 body, h2, p{
8 margin:0;
9 padding:0;
10 }
11 body{
12 font-size: 18px;
13 }
14 #header{
15 background-color: #eee;
16 border-bottom: 1px solid #ccc;
17 height: 80px;
18 }
19 #wrapper{
20 background-color: #ddd;
21 }
22 #menu{
23 float: left;
24 width: 150px;
25 }
26 #main{
27 background-color: #f7f7f7;
28 border-left: 1px solid #ccc;
29 margin-left: 150px;
30 padding: 10px;
31 }
32 #footer{
33 border-top: 1px solid #ccc;
 369

background-color: #dedede;
34
}
35
</style>
36
</head>
37
<body>
38
<div id="header"><h2>Сайт [Link]</h2></div>
39
<div id="wrapper">
40
<div id="menu">
41
<ul>
42
<li><a href="#">Главная</a></li>
43
<li><a href="#">Блог</a></li>
44
<li><a href="#">Контакты</a></li>
45
<li><a href="#">О сайте</a></li>
46
</ul>
47
</div>
48
<div id="main">
49
<h2>What is Lorem Ipsum?</h2>
50
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
51
Lorem Ipsum
52
has been the industry...</p>
53
</div>
54
</div>
55
<div id="footer">
56
<p>Copyright © [Link], 2016</p>
57
</div>
58
</body>
59
</html>
 370

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

Свойство display
Последнее обновление: 27.04.2016


Кроме свойства float, которое позволяет изменять позицию элемента, в CSS есть еще одно важное свойство - display. Оно
позволяет управлять блоком элемента и также влиять на его позиционирование относительно соседних элементов.

Это свойство может принимать следующие значения:

 inline: элемент становится строчным, подобно словам в строке текста

 block: элемент становится блочным, как параграф
 inline-block: элемент располагается как строка текста
 list-item: элемент позиционируется как элемент списка обычно с добавление маркера виде точки или порядкового номера
 run-in: тип блока элемента зависит от окружающих элементов
 flex: позволяет осуществлять гибкое позиционирование элментов
 table, inline-table: позволяет расположить элементы в виде таблицы
 none: элемент не виден и удален из разметки html

Итак, значение block позволяет определить блочный элемент. Такой элемент визуально отделяется от соседних элементов
переносом строки, как, например, элемент параграфа p или элемент div, которые по умолчанию являются блочными и при
визуализации веб-страницы визуально переносятся на новую строку.
 371

Однако элемент span в отличие от элемента div блочным не является. Поэтому посмотрим, какие с ним произойдут изменения при
применении значения block:

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <link href="[Link]" rel="stylesheet">
6 <title>Свойство display в CSS3</title>
7 <style>
8 span{
9 color: red;
10 }
11 .blockSpan{
12 display: block;
13 }
14 </style>
15 </head>
16 <body>
17 <div>Это <span>строчный</span> элемент span</div>
18 <div>Это <span class="blockSpan">блочный</span> элемент span</div>
19 </body>
20 </html>

Здесь определено два элемента span, но один из них является блочным, так как к нему применяется стиль display: block;.
Поэтому этот элемент span переносится на новую строку.

В отличие от блочных элементов строчные встраиваются в строку, так как имеют для свойства display значение inline. Элемент
span как раз по умолчанию имеет стиль display: inline, поэтому и встраивается в строку, а не переносится на следующую, как
параграфы или div. И теперь произведем обратную процедуру - сделаем блочный элемент div строчным:
 372

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Свойство display в CSS3</title>
6 <style>
7 div{
8 display: inline;
9 }
10 </style>
11 </head>
12 <body>
13 <div>Первый строчный элемент div.</div>
14 <div>Второй строчный элемент div.</div>
15 </body>
16 </html>

Следует учитывать, что при применении значения inline браузер игнорирует некоторые свойства, такие как width, height, margin.

inline-block

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

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
 373

<title>Свойство display в CSS3</title>

5
<style>
6
span{
7
width: 100px;
8
height: 30px;
9
background-color: #aaa;
10
}
11
.inineBlockSpan{
12
display: inline-block;
13
}
14
</style>
15
</head>
16
<body>
17
<p>Проехав с полверсты в хвосте <span>колонны</span>, он остановился</p>
18
<p>Проехав с полверсты в хвосте <span class="inineBlockSpan">колонны</span>, он
19
остановился</p>
20
</body>
21
</html>

Первый элемент span является строчным, у него значение inline, поэтому для него бессмысленно применять
свойства width и height. А вот второй элемент span имеет значение inline-block, поэтому к нему жуе применяются и ширина, и
высота, и при необходимости еще можно установить отступы.

run-in

Значение run-in определяет элемент, который зависит от соседних элементов. И здесь есть три возможных варианта:

 Элемент окружен блочными элементами, тогда фактически он имеет стиль display: block, то есть сам становится блочным
 Элемент окружен строчными элементами, тогда фактически он имеет стиль display: inline, то есть сам становится
строчным
 374

 Во всех остальных случаях элемент считается блочным

Табличное представление

Значение table по сути превращает элемент в таблицу. Посмотрим на примере списка:

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Свойство display в CSS3</title>
6 <style>
7 ul{
8 display: table;
9 margin: 0;
10 }
11 li{
12 list-style-type: none;
13 display: table-cell;
14 padding: 10px;
15 }
16 </style>
17 </head>
18 <body>
19 <ul>
20 <li>Item 1</li>
21 <li>Item 2</li>
22 <li>Item 3</li>
23 </ul>
24 </body>
25 </html>
 375

Здесь список превращается в таблицу, а каждый элемент списка - в отдельную ячейку. Для этого у элемента списка
устанавливается стиль display: table-cell. Фактически вместо этого списка мы могли бы использовать стандартную таблицу.

Сокрытие элемента

Значение none позволяет скрыть элемент, которого как-будто нет на веб-странице:

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Свойство display в CSS3</title>
6 <style>
7 .invisible{
8 display: none;
9 }
10 </style>
11 </head>
12 <body>
13 <p>Первый параграф</p>
14 <p class="invisible">Второй параграф</p>
15 <p>Третий параграф</p>
16 </body>
17 </html>

Создание панели навигации

Последнее обновление: 27.04.2016


 376

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

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

Вертикальное меню

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

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Панель навигации в HTML5</title>

6 <style>
 377

7 [Link]{

8 margin-left: 0px;

9 padding-left: 0px;

10 list-style: none;

11 }

12 [Link] a {

13 display: block;

14 width: 7em;

15 padding:10px;

16 background-color: #f4f4f4;

17 border-top: 1px dashed #333;

18 border-right: 1px dashed #333;

19 border-left: 5px solid #333;

20 text-decoration: none;

21 color: #333;

22 }

23 [Link] li:last-child a {

24 border-bottom: 1px dashed #333;

25 }

26 </style>

27 </head>
 378

28 <body>

29 <ul class="nav">

30 <li><a href="#">Главная</a></li>

31 <li><a href="#">Контакты</a></li>

32 <li><a href="#">О сайте</a></li>

33 </ul>

34 </body>

35 </html>

После установки свойства display: block мы можем определить у блока ссылки ширину, отступы и т.д.

Горизонтальное меню

Для создания горизонтального меню есть два метода. Первый заключается в применении свойства float и создании из ссылок
плавающих элементов, которые обтекают друг друга с слева. И второй способ состоит в создании строки ссылок с помощью
установки свойства display: inline-block.

Использование float

Алгоритм создания панели навигации с помощью float разделяется на два этапа. На первом этапе у элемента li, в который
заключена ссылка, устанавливается float: left;. Это позволяет расположить все элементы списка в ряд при достаточной ширине,
когда правый элемент списка обтекает левый элемент списка.

Второй этап заключается в установке у элемента ссылки display: block, что дает нам возможность устанавливать ширину,
отступы, вообщем все те признаки, которые характерны для блочных элементов.
 379

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Панель навигации в HTML5</title>

6 <style>

7 [Link]{

8 margin-left: 0px;

9 padding-left: 0px;

10 list-style: none;

11 }

12 .nav li {

13 float: left;

14 }

15 [Link] a {

16 display: block;

17 width: 5em;

18 padding:10px;

19 margin: 0 5px;

20 background-color: #f4f4f4;

21 border: 1px dashed #333;

 380

22 text-decoration: none;

23 color: #333;

24 text-align: center;

25 }

26 [Link] a:hover{

27 background-color: #333;

28 color: #f4f4f4;

29 }

30 </style>

31 </head>

32 <body>

33 <ul class="nav">

34 <li><a href="#">Главная</a></li>

35 <li><a href="#">Блог</a></li>

36 <li><a href="#">Контакты</a></li>

37 <li><a href="#">О сайте</a></li>

38 </ul>

39 </body>

40 </html>
 381

inline и inline-block

Для создания горизонтальной панели навигации нам надо сделать каждый элемент li строчным, то есть установить для
него display: inline. После этого для элемента ссылки, которая располагается в элементе li, мы можем установить display:
inline-block:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Панель навигации в HTML5</title>

6 <style>

7 [Link]{

8 margin-left: 0px;

9 padding-left: 0px;

10 list-style: none;

11 }

12 .nav li {

13 display: inline;

14 }

15 [Link] a {

16 display: inline-block;

17 width: 5em;
 382

18 padding:10px;

19 background-color: #f4f4f4;

20 border: 1px dashed #333;

21 text-decoration: none;

22 color: #333;

23 text-align: center;

24 }

25 [Link] a:hover{

26 background-color: #333;

27 color: #f4f4f4;

28 }

29 </style>

30 </head>

31 <body>

32 <ul class="nav">

33 <li><a href="#">Главная</a></li>

34 <li><a href="#">Блог</a></li>

35 <li><a href="#">Контакты</a></li>

36 <li><a href="#">О сайте</a></li>

37 </ul>

38 </body>
 383

39 </html>

Выравнивание плавающих элементов

Последнее обновление: 27.04.2016

При работе с плавающими элементами и свойством float довольно часто можно столкнуться с проблемой выпадения из страницы
плавающих элементов. У этой проблемы есть различные аспекты и их решения. Рассмотрим эти аспекты.

Например, пусть у нас задан следующий блок:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Блочная верстка в HTML5</title>

6 <style>

7 #sidebar{

8 float: left;
 384

9 width: 25%;

10 padding: 10px;

11 }

12 #main{

13 border-left: 1px solid #ccc;

14 width:75%;

15 padding: 15px;

16 margin-left: 25%;

17 }

18 </style>

19 </head>

20 <body>

21 <div id="sidebar">

22 <h2>The standard Lorem Ipsum passage</h2>

23 <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do

24 eiusmod tempor incididunt ut labore et dolore...</p>

25 </div>

26 <div id="main">

27 <h2>What is Lorem Ipsum?</h2>

28 <p>Lorem Ipsum is simply dummy text of the printing and typesetting

industry...</p>
29
 385

<p>Contrary to popular belief, Lorem Ipsum is not simply random text..</p>

30
</div>
31
</body>
32
</html>

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

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

Почему так происходит? Зачастую браузеры своеобразно интерпретируют размеры элемента. В частности, у всех элементов по
умолчанию для свойства box-sizing используется значение content-box, то есть при определении ширины и высоты элемента
браузер будет прибавлять к значению свойств width и height также и внутренние отступы padding и ширину границы. В итоге это
может привести к выпадению плавающих элементов из тех блоков, которые для них предназначены. Поэтому часто для всех
элементов рекомендуется устанавливать для свойства box-sizing значение border-box, чтобы все элементы измерялись
одинаково, а их ширина представляла только значение свойства width. Поэтому нередко в стилях добавляется следующий стиль:

1 * {

2 box-sizing: border-box;

3 }

То есть значение box-sizing: border-box; устанавливается для всех элементов, и все они интерпретируются браузером
одинаково. К примеру, добавим этот стиль в выше определенную страницу и мы получим уже несколько другой результат:
 386

Рассмотрим другую проблему, которая связана с позиционированием плавающих элементов в контейнере:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Блочная верстка в HTML5</title>

6 <style>

7 *{

8 box-sizing: border-box;

9 }

10 #header{

11 background-color: #eee;

12 }

13 #nav{

14 background-color: #f4f4f4;

15 border-top: 1px solid #ccc;

16 border-bottom: 1px solid #ccc;

17 }
 387

18 #nav ul{

19 margin-left: 0px;

20 padding-left: 0px;

21 list-style: none;

22 }

23 #nav li {

24 float: left;

25 }

26 #nav ul a {

27 display: block;

28 width: 7em;

29 padding:10px;

30 border-left: 1px solid #ccc;

31 text-decoration: none;

32 color: #333;

33 text-align: center;

34 }

35 #nav ul li:last-child a {

36

37 border-right: 1px solid #ccc;

38 }
 388

39 #nav ul a:hover{

40 background-color: #aaa;

41 color: #f4f4f4;

42 }

43 </style>

44 </head>

45 <body>

46 <div id="header">

47 <h1>Добро пожаловать на сайт</h1>

48 <div id="nav">

49 <ul>

50 <li><a href="#">Главная</a></li>

51 <li><a href="#">Блог</a></li>

52 <li><a href="#">Контакты</a></li>

53 <li><a href="#">О сайте</a></li>

54 </ul>

55 </div>

56 </div>

57 <div id="content"><p>helo world</p></div>

58 </body>

59 </html>
 389

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

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

html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img, dl, dt, dd,
1
ol, ul, li, form, table, caption, tr, th, td, article, aside, footer,
2
header{
3

4
margin: 0;
5
padding: 0;
6
border: 0;
7
font-size: 100%;
8
vertical-align: baseline;
9
}

Другая проблема - наложение элемента div с основным контентом на плавающий блок навигационной панели решается довольно
просто - установкой для этого элемента div следующего стиля:

1 clear: both;
 390

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

1 ul:after {

2 content: " ";

3 display: table;

4 clear: both;

5 }

Второе решение состоит в том, чтобы сделать сам блок панели навигации плавающим:

1 #nav{

2 background-color: #f4f4f4;

3 border-top: 1px solid #ccc;

4 border-bottom: 1px solid #ccc;

6 float:left;

7 width: 100%;

8 clear: both;

9 }

Итак, с учетом выше сказанного изменим стили для веб-страницы (код html остается прежним):
 391

1 *{

2 box-sizing: border-box;

3 }

4 html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img, dl, dt, dd,

5 ol, ul, li, form, table, caption, tr, th, td, article, aside, footer,
header{
6

7
margin: 0;
8
padding: 0;
9
border: 0;
10
font-size: 100%;
11
vertical-align: baseline;
12
}
13
#header{
14
background-color: #eee;
15
}
16
#header h1{
17
font-size: 1.3em;
18
padding: 15px;
19
}
20
#nav{
21
 392

22 background-color: #f4f4f4;

23 border-top: 1px solid #ccc;

24 border-bottom: 1px solid #ccc;

25 }

26 #nav ul{

27 margin-left: 0px;

28 padding-left: 0px;

29 list-style: none;

30 }

31 #nav li {

32 float: left;

33 }

34 #nav ul a {

35 display: block;

36 width: 7em;

37 padding: 10px;

38 border-left: 1px solid #ccc;

39 text-decoration: none;

40 color: #333;

41 text-align: center;

42 }
 393

#nav ul li:last-child a {
43

44
border-right: 1px solid #ccc;
45
}
46
#nav ul a:hover{
47
background-color: #aaa;
48
color: #f4f4f4;
49
}
50
#nav ul:after {
51
content: " ";
52
display: table;
53
clear: both;
54
}
55
#content{
56
clear: both;
57
}

И теперь веб-страница будет выглядеть иначе, собственно как и должна:

Создание простейшего макета

Последнее обновление: 28.04.2016
 394

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

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <link href="[Link]" rel="stylesheet">

6 <title>Блочная верстка в HTML5</title>

7 </head>

8 <body>

9 <div id="header">

10 <h1>[Link] - Сайт о Lorem Ipsum</h1>

11 <div id="nav">

12 <ul>

13 <li><a href="#">Главная</a></li>
 395

14 <li><a href="#">Блог</a></li>

15 <li><a href="#">Форум</a></li>

16 <li><a href="#">Контакты</a></li>

17 <li><a href="#">О сайте</a></li>

18 </ul>

19 </div>

20 </div>

21 <div class="wrapper">

22 <div id="sidebar1" class="aside">

23 <h2>The standard Lorem Ipsum passage</h2>

24 <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt
25
ut labore et dolore magna aliqua..."</p>
26
</div>
27
<div id="sidebar2" class="aside">
28
<h2>1914 translation by H. Rackham</h2>
29
<p>It is a long established fact that a reader will be distracted by the readable
30
content of a page when looking at its layout.</p>
31
<h3>Options</h3>
32
<ul>
33
<li>Item1</li>
34
 396

<li>Item2</li>

35 <li>Item3</li>

36 </ul>

37 </div>

38 <div id="article">

39 <h2>What is Lorem Ipsum?</h2>

40 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>

41 <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in
a piece of
42
classical Latin literature from 45 BC, making it over 2000 years old. Richard
43 McClintock,
44 a Latin professor at Hampden-Sydney College in Virginia...</p>
45 </div>
46 </div>
47 <div id="footer">
48 <p>Contacts: admin@[Link]</p>
49 <p>Copyright © [Link], 2016</p>
50 </div>
51 </body>

</html>
 397

В начале идет шапка сайта - блок с header, который содержит заголовок страницы и панель навигации. Далее идет блок wrapper, в
котором два сайдбара и блок основного содержимого страницы. Сайдбары условно тоже содержат некоторое содержимое, но
главное, что они определены до основного блока. И в самом низу небольшой футер.

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

1 * {

2 box-sizing: border-box;

3 }

4 html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, ul, li{

6 margin: 0;

7 padding: 0;

8 border: 0;

9 font-size: 100%;

10 vertical-align: baseline;

11 }

12 body {

13 font-family: Verdana, Arial, sans-serif;

14 background-color: #f7f7f7;

15 }

16 #header{
 398

17 background-color: #f4f4f4;

18 }

19 #header h1 {

20 font-size: 24px;

21 text-transform: uppercase;

22 font-weight: bold;

23 padding: 30px 30px 30px 10px;

24 clear: both;

25 }

26 #nav {

27 background-color: #eee;

28 border-top: 1px solid #ccc;

29 border-bottom: 1px solid #ccc;

30 }

31 #nav li {

32 float: left;

33 list-style: none;

34 }

35 #nav a {

36 display: block;

37 color: black;
 399

38 padding: 10px 25px;

39 text-decoration: none;

40 border-right: 1px solid #ccc;

41 }

42 #nav li:last-child a {

43 border-right: none;

44 }

45 #nav a:hover {

46 font-weight: bold;

47 }

48 #nav:after {

49 content: " ";

50 display: table;

51 clear: both;

52 }

53 .wrapper{

54 background-color: #f7f7f7;

55 }

56 .aside h2 {

57 font-size: 0.95em;

58 margin-top: 15px;
 400

59 }

60 .aside h3 {

61 font-size: 0.85em;

62 margin-top: 10px;

63 }

64 .aside p, .aside li {

65 font-size: .75em;

66 margin-top: 10px;

67 }

68 .aside li{

69 list-style-type: none;

70 }

71 #sidebar1 {

72 float: left;

73 width: 20%;

74 padding: 0 10px 0 20px;

75 }

76 #sidebar2 {

77 float: right;

78 width: 20%;

79 padding: 0 20px 0 10px;

 401

80 }

81 #article{

82 background-color: #fafafa;

83 border-left: 1px solid #ccc;

84 border-right: 1px solid #ccc;

85 margin-left: 20%;

86 margin-right: 20%;

87 padding: 15px;

88 width: 60%;

89 }

90 #article:after{

91 clear:both;

92 display:table;

93 content:'';

94 }

95 #article h2{

96 font-size: 1.3em;

97 margin-bottom:15px;

98 }

99 #article p{

100 line-height: 150%;

 402

101 margin-bottom: 15px;

102 }

103 #footer{

104 border-top: 1px solid #ccc;

105 font-size: .8em;

106 text-align: center;

107 padding: 10px 10px 30px 10px;

108 }

109 #nav ul, #header h1, .wrapper, #footer p {

110 max-width: 1200px;

111 margin: 0 auto;

112 }

113 .wrapper, #nav, #header, #footer{

114 min-width: 768px;

115 }

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

Следующая пара стилей управляет отображением шапки (хедера) и заголовка страницы:

1 #header{

2 background-color: #f4f4f4;
 403

3 }

4 #header h1 {

5 font-size: 24px;

6 text-transform: uppercase;

7 font-weight: bold;

8 padding: 30px 30px 30px 10px;

9 clear: both;

10 }

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

1 #nav {

2 background-color: #eee;

3 border-top: 1px solid #ccc;

4 border-bottom: 1px solid #ccc;

5 }

6 #nav li {

7 float: left;

8 list-style: none;

9 }

10 #nav a {

11 display: block;
 404

12 color: black;

13 padding: 10px 25px;

14 text-decoration: none;

15 border-right: 1px solid #ccc;

16 }

17 #nav li:last-child a {

18 border-right: none;

19 }

20 #nav a:hover {

21 font-weight: bold;

22 }

23 #nav:after {

24 content: " ";

25 display: table;

26 clear: both;

27 }

В одной из прошлых тем подробно обсуждалось создание горизонтальной панели навигации. В принципе здесь ничего нового не
добавляется: для элементов <li> устанавливается обтекание (float: left;), благодаря чему они размещаются в ряд, а каждая
ссылка делается блочным элементом (display: block;)

Далее идет настройка средней части страницы, в частности, сайдбаров:

 405

1 .wrapper{

2 background-color: #f7f7f7;

3 }

4 .aside h2 {

5 font-size: 0.95em;

6 margin-top: 15px;

7 }

8 .aside h3 {

9 font-size: 0.85em;

10 margin-top: 10px;

11 }

12 .aside p, .aside li {

13 font-size: .75em;

14 margin-top: 10px;

15 }

16 .aside li{

17 list-style-type: none;

18 }

19 #sidebar1 {

20 float: left;

21 width: 20%;
 406

22 padding: 0 10px 0 20px;

23 }

24 #sidebar2 {

25 float: right;

26 width: 20%;

27 padding: 0 20px 0 10px;

28 }

Стиль класса wrapper позволяет установить фоновый цвет для боковых панелей. Для каждого сайдбара определяется ширина в
20% от ширины страницы. Процентные значения позволят автоматически подстраивать ширину блоков под ширину окна браузера
при его расширении или сужении.

Далее следуют стили блока основного содержимого и футера:

1 #article{

2 background-color: #fafafa;

3 border-left: 1px solid #ccc;

4 border-right: 1px solid #ccc;

5 margin-left: 20%;

6 margin-right: 20%;

7 padding: 15px;

8 width: 60%;

9 }
 407

10 #article:after{

11 clear:both;

12 display:table;

13 content:'';

14 }

15 #article h2{

16 font-size: 1.3em;

17 margin-bottom:15px;

18 }

19 #article p{

20 line-height: 150%;

21 margin-bottom: 15px;

22 }

23 #footer{

24 border-top: 1px solid #ccc;

25 font-size: .8em;

26 text-align: center;

27 padding: 10px 10px 30px 10px;

28 }

Поскольку боковые панели имеют ширину в 20% каждая, то для главного блока устанавливается ширина в 60% и отступы справа и
слева в 20%.
 408

И в конце идет пара довольно важных стилей:

1 #nav ul, #header h1, .wrapper, #footer p {

2 max-width: 1200px;

3 margin: 0 auto;

4 }

5 .wrapper, #nav, #header, #footer{

6 min-width: 768px;

7 }

В начале для ряда селекторов определяется максимальная ширина в 1200 пикселей. Это значит, что основные элементы страницы
не выйдут за пределы 1200 пикселей. А автоматический внешний отступ слева и справа позволит центрировать содержимое
элементов. То есть при ширине браузера в 1400 пикселей эти элементы с шириной в 1200 пикселей будут размещаться как бы по
середине, а справа и слева будут отступы шириной в (1400-1200)/2 = 100 пикселей.

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

Данная модель размеров не идеальна. И далее мы рассмотрим более гибкие и распространенные концепции на основе адаптивной
верстки.

В итоге у нас получится следующий простенький макет:

Позиционирование
Последнее обновление: 28.04.2016
 409

CSS предоставляет возможности по позиционированию элемента, то есть мы можем поместить элемент в определенное место на
странице

Основным свойством, которые управляют позиционированием в CSS, является свойство position. Это свойство может принимать
одно из следующих значений:

 static: стандартное позиционирование элемента, значение по умолчанию

 absolute: элемент позиционируется относительно границ элемента-контейнера, если у того свойство position не
равно static

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

 fixed: элемент позиционируется относительно окна бразуера, это позволяет создать фиксированные элементы, которые не
меняют положения при прокрутке

Не следует одновременно применять к элементу свойство float и любой тип позиционирования, кроме static (то есть тип по
умолчанию).

Абсолютное позиционирование
 410

Область просмотра браузера имеет верхний, нижний, правый и левый края. Для каждого из этих четырех краев есть
соответствующее свойство CSS: left (отступ от края слева), right (отступ от края справа), top (отступ от края контейнера сверху)
и bottom (отступ снизу). Значения этих свойств указываются в пикселях, em или процентах. Необязательно задавать значения для
всех четырех сторон. Как правило, устанавливают только два значения - отступ от верхнего края top и отступ от левого края left.

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Блочная верстка в HTML5</title>

6 <style>

7 .header {

8 position: absolute;

9 left: 100px;

10 top: 50px;

11 width: 430px;

12 height: 100px;

13 background-color: rgba(128, 0, 0, 0.5);

14 }

15 </style>

16 </head>

17 <body>
 411

18 <div class="header"></div>

19 <p>HELLO WORLD</p>

20 </body>

21 </html>

Здесь элемент div с абсолютным позиционированием будет находиться на 100 пикселей слева от границы области просмотра и на
50 снизу.

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

Если элемент с абсоютным позиционированием располагается в другом контейнере, у которого в свою очередь значение
свойства position не равно static, то элемент позиционируется относительно границ контейнера:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Позиционирование в HTML5</title>

6 <style>

7 .outer {

8 position: absolute;
 412

9 left: 80px;

10 top: 40px;

11 width: 430px;

12 height: 100px;

13 border: 1px solid #ccc;

14 }

15 .inner{

16 position: absolute;

17 left: 80px;

18 top: 40px;

19 width: 50px;

20 height: 50px;

21 background-color: rgba(128, 0, 0, 0.5);

22 }

23 </style>

24 </head>

25 <body>

26 <div class="outer">

27 <div class="inner"></div>

28 </div>

29 </body>
 413

30 </html>

Относительное позиционирование

Относительное позиционирование также задается с помощью значения relative. Для указания конкретной позиции, на которую
сдвигается элемент, применяются те же свойства top, left, right, bottom:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Позиционирование в HTML5</title>

6 <style>

7 .outer {

8 position: relative;

9 left: 80px;

10 top: 40px;

11 width: 300px;

12 height: 100px;

13 border: 1px solid #ccc;

14 }

15 .inner{
 414

16 position: absolute;

17 left: 80px;

18 top: 40px;

19 width: 50px;

20 height: 50px;

21 background-color: rgba(128, 0, 0, 0.5);

22 }

23 </style>

24 </head>

25 <body>

26 <div class="outer"><div class="inner"></div></div>

27 </body>

28 </html>

Свойство z-index

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

Например:

1 <!DOCTYPE html>
 415

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Позиционирование в HTML5</title>

6 <style>

7 body{

8 margin:0;

9 padding:0;

10 }

11 .content{

12 position: relative;

13 top: 15px;

14 left: 20px;

15 width: 250px;

16 height: 180px;

17 background-color: #eee;

18 border: 1px solid #ccc;

19 }

20 .redBlock{

21 position: absolute;

22 top: 20px;
 416

23 left:50px;

24 width: 80px;

25 height: 80px;

26 background-color: red;

27 }

28 .blueBlock{

29 position: absolute;

30 top: 80px;

31 left: 80px;

32 width: 80px;

33 height: 80px;

34 background-color: blue;

35 }

36 </style>

37 </head>

38 <body>

39 <div class="content">

40 <div class="redBlock"></div>

41 <div class="blueBlock"></div>

42 </div>

43 </body>
 417

44 </html>

Теперь добавим к стилю блока redBlock новое правило:

1 .redBlock{

2 z-index: 100;

4 position: absolute;

5 top: 20px;

6 left:50px;

7 width: 80px;

8 height: 80px;

9 background-color: red;

10 }

Здесь z-index равен 100. Но это необязательно должно быть число 100. Так как у второго блока z-index не определен и фактически
равен нулю, то для redBlock мы можем установить у свойства z-index любое значение больше нуля.

И теперь первый блок будет накладываться на второй, а не наоборот, как было в начале:

Фиксированное позиционирование
Последнее обновление: 28.04.2016
 418

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

Для фиксированного позиционирования у элементов нужно установить значение fixed для свойства position. После этого с
помощью стандартных свойств left, right, top и bottom можно определить конкретную позицию фиксированного элемента.

Создадим к примеру фиксированную панель навигации:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Позиционирование в HTML5</title>

6 <style>

7 body{

8 margin:0;

9 padding:0;
 419

10 }

11 .toolbar{

12 position: fixed;

13 top: 0;

14 left: 0;

15 right: 0;

16 background-color: #222;

17 border-bottom: 1px solid #ccc;

18 }

19 .toolbar a{

20 color: #eee;

21 display: inline-block;

22 padding: 10px;

23 text-decoration: none;

24 font-family: Verdana;

25 }

26 .content{

27 margin-top: 50px;

28 padding: 10px;

29 }

30 </style>
 420

</head>
31
<body>
32
<div class="toolbar">
33
<a href="#">Главная</a>
34
<a href="#">Блог</a>
35
<a href="#">Контакты</a>
36
<a href="#">О сайте</a>
37
</div>
38
<div class="content">Lorem Ipsum is simply dummy text of the printing and typesetting
39
industry.
40
Lorem Ipsum has been the industry....</div>
41
</body>
42
</html>

Чтобы растянуть фиксированный блок от левой до правой границы страницы, устанавливаются три свойства:

1 top: 0;

2 left: 0;

3 right: 0;

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

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

1 margin-top: 50px;

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

Трансформации, переходы и анимации

Трансформации
Последнее обновление: 01.05.2016

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

Вращение

Для поворота элемента свойство transform использует функцию rotate:

1 transform: rotate(угол_поворота deg);

 422

После слова rotate в скобках идет величина угла поворота в градусах. Например, повернем блок на 30 градусов:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Трансформации в CSS3</title>

6 <style>

7 div{

8 background-color: #ccc;

9 width: 120px;

10 height: 120px;

11 margin:5px;

12 padding: 40px 10px;

13 box-sizing: border-box;

14 border: 1px solid #333;

15 display: inline-block;

16 }

17 .rotated{

18 transform: rotate(30deg);
 423

19 }

20 </style>

21 </head>

22 <body>

23 <div></div>

24 <div class="rotated">rotate(30deg)</div>

25 <div></div>

26 </body>

27 </html>

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

Угол поворота может представлять как положительное, так и отрицательное значение. В случие отрицательного значения поворот
производится в противоположную сторону.

Масштабирование

Применение масштабирования имеет следующую форму:

1 transform: scale(величина_масштабирования);

Используем маштабирование:

1 <!DOCTYPE html>
 424

3 <html>

4 <head>

5 <meta charset="utf-8">

6 <title>Трансформации в CSS3</title>

7 <style>

8 div{

9 background-color: #ccc;

10 width: 120px;

11 height: 120px;

12 margin:5px;

13 padding: 40px 10px;

14 box-sizing: border-box;

15 border: 1px solid #333;

16 display: inline-block;

17 }

18 .halfScale{

19 transform: scale(0.5);

20 }

21 .doubleScale{

22 transform: scale(2);
 425

}
23
</style>
24
</head>
25
<body>
26
<div></div>
27
<div class="doubleScale">scale(2)</div>
28
<div></div>
29
<div class="halfScale">scale(0.5)</div>
30
</body>
31
</html>

Значение больше 1 приводит к растяжению по вертикали и горизонтали, а меньше 1 - к сжатию. То есть значение 0.5 приводит к
уменьшению в два раза, а значение 1.5 - к увеличению в полтора раза.

Можно также задать величины масштабирования отдельно для вертикали и горизонтали:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Трансформации в CSS3</title>

6 <style>
 426

7 div{

8 background-color: #ccc;

9 width: 120px;

10 height: 120px;

11 margin:5px;

12 padding: 40px 10px;

13 box-sizing: border-box;

14 border: 1px solid #333;

15 display: inline-block;

16 }

17 .scale1{

18 transform: scale(2, 0.5);

19 }

20 </style>

21 </head>

22 <body>

23 <div></div>

24 <div class="scale1">scale(2, 0.5)</div>

25 <div></div>

26 </body>

27 </html>
 427

В данном случае по горизонтали будет идти масштабирование в 2 раза, а по вертикали - в 0.5 раз.

Также можно по отдельности задать параметры масштабирования: функция scaleX() задает изменение по горизонтали,
а scaleY() - по вертикали. Например:

1 .scale1{

2 transform: scaleX(2);

3 }

Используя отрицательные значения, можно создать эффект зеркального отражения:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Трансформации в CSS3</title>

6 <style>

7 div{

8 background-color: #ccc;

9 width: 120px;

10 height: 120px;

11 margin:5px;
 428

12 padding: 40px 10px;

13 box-sizing: border-box;

14 border: 1px solid #333;

15 display: inline-block;

16 }

17 .scale1{

18 transform: scaleX(-1);

19 }

20 </style>

21 </head>

22 <body>

23 <div></div>

24 <div class="scale1">scaleX(-1)</div>

25 <div></div>

26 </body>

27 </html>

Перемещение

Для перемещения элемента используется функция translate:

1 transform: translate(offset_X, offset_Y);

 429

Значение offset_X указывает, на сколько элемент смещается по горизонтали, а offset_Y - по вертикали.

К примеру, сместим блок на 30 пикселей вниз и на 50 пикселей вправо:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Трансформации в CSS3</title>

6 <style>

7 div{

8 background-color: #ccc;

9 width: 120px;

10 height: 120px;

11 margin:5px;

12 padding: 40px 10px;

13

14 box-sizing: border-box;

15 border: 1px solid #333;

16 display: inline-block;
 430

17 }

18 .translated{

19 transform: translate(50px, 30px);

20 background-color:red;

21 }

22 </style>

23 </head>

24 <body>

25 <div></div>

26 <div class="translated"></div>

27 <div></div>

28 </body>

29 </html>

В качестве единиц измерения смещения можно применять не только пиксели, но и любые другие единицы измерения длины в CSS -
em, % и тд.

С помощью дополнительных функций можно отдельно применять смещения к горизонтали или

вертикали: translateX() (перемещение по горизонтали) и translateY() (перемещение по вертикали). Например:

1 transform: translateX(30px);
 431

Кроме положительных значений также можно использовать и отрицательные - они перемещают элемент в противоположную
сторону:

1 transform: translateY(-2.5em);

Наклон

Для наклона элемента применяется функция skew():

1 transform: skew(X, Y);

Первый параметр указывает, на сколько градусов наклонять элемент по оси X, а второй - значение наклона по оси Y.

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Трансформации в CSS3</title>

6 <style>

7 div{

8 background-color: #ccc;

9 width: 120px;

10 height: 120px;

11 margin:5px;
 432

12 padding: 40px 10px;

13

14 box-sizing: border-box;

15 border: 1px solid #333;

16 display: inline-block;

17 }

18 .skewed{

19 transform: skew(30deg, 10deg);

20 background-color:red;

21 }

22 </style>

23 </head>

24 <body>

25 <div></div>

26 <div class="skewed"></div>

27 <div></div>

28 </body>

29 </html>
 433

Для создания наклона только по одной оси для другой оси надо использовать значение 0. Например, наклон на 45 градусов по оси
X:

1 transform: skew(45deg, 0);

Или наклон на 45 градусов только по оси Y:

1 transform: skew(0,45deg);

Для создания наклона отдельно по оси X и по оси Y в CSS есть специальные функции: skewX() и skewY() соответственно.

1 transform: skewX(45deg);

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

1 transform: skewX(-30deg);

Комбинирование преобразований

Если нам надо применить к элементу сразу несколько преобразований, скажем, вращаение и перемещение, то мы можем их
комбинировать. Например, применение всех четырех преобразований:

transform: translate(50px, 100px) skew(30deg, 10deg) scale(1.5)

1
rotate(90deg);

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

Исходная точка трансформации

 434

По умолчанию при применении трансформаций браузер в качестве точки начала преобразования использует центр элемента. Но с
помощью свойства transform-origin можно изменить исходную точку. Это свойство в качестве значения принимает значения в
пикселях, em и процентах. Также для установки точки можно использовать ключевые слова:

 left top: левый верхний угол элемента

 left bottom: левый нижний угол элемента

 right top: правый верхний угол элемента

 right bottom: правый нижний угол элемента

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Трансформации в CSS3</title>

6 <style>

7 div{

8 background-color: #ccc;

9 width: 100px;

10 height: 100px;

11 margin: 80px 30px;

12 float: left;

13 box-sizing: border-box;
 435

14 border: 1px solid #333;

15 }

16 .transform1{

17 transform: rotate(-45deg);

18 }

19 .transform2{

20 transform-origin: left top;

21 transform: rotate(-45deg);

22 }

23 .transform3{

24 transform-origin: right bottom;

25 transform: rotate(-45deg);

26 }

27 </style>

28 </head>

29 <body>

30 <div class="transform1"></div>

31 <div class="transform2"></div>

32 <div class="transform3"></div>

33 </body>

34 </html>
 436

Переходы
Последнее обновление: 01.05.2016

Переход (transition) представляет анимацию от одного стиля к другому в течение определенного периода времени.

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

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Переход в CSS3</title>

6 <style>

7 div{

8 width: 100px;

9 height: 100px;
 437

10 margin: 40px 30px;

11 border: 1px solid #333;

12

13 background-color: #ccc;

14 transition-property: background-color;

15 transition-duration: 2s;

16 }

17 div:hover{

18 background-color: red;

19 }

20 </style>

21 </head>

22 <body>

23 <div></div>

24 </body>

25 </html>

Итак, здесь анимируется свойство background-color элемента div. При наведении указателя мыши на элемент он будет менять
цвет с серого на красный. А при увеении указателя мыши с пространства элемента будет возвращаться исходный цвет.

Чтобы указать свойство как анимируемое, его название передается свойству transition-property

1 transition-property: background-color;
 438

Вообще анимировать можно множество разных свойств, такие как color, background-color, border-color. Полный список свойств CSS,
которые поддаются анимации, можно найти по адресу [Link]/TR/css3-transitions/#animatable-properties

Далее идет установка времени перехода в секундах с помощью свойства transition-duration:

1 transition-duration: 2s;

Кроме секунд можно устанавливать значения в миллисекундах, например, 500 миллисекунд:

1 transition-duration: 500ms;

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

Кроме псевдокласса :hover можно использовать и другие псевдоклассы, например, :active (ссылка в нажатом состоянии)
или :focus (получение элементом фокуса).

Также для запуска перехода можно использовать код JavaScript.

Анимация набора свойств

При необходимости мы можем анимировать сразу несколько свойств CSS. Так, в выше приведенном примере изменим стили
следующем образом:

1 div{

2 width: 100px;

3 height: 100px;
 439

4 margin: 40px 30px;

5 border: 1px solid #333;

6 background-color: #ccc;

8 transition-property: background-color, width, height, border-color;

9 transition-duration: 2s;

10 }

11 div:hover{

12 background-color: red;

13 width: 120px;

14 height: 120px;

15 border-color: blue;

16 }

Здесь анимируются сразу четыре свойства. Причем анимация для них всех длится 2 секунды, но мы можем для каждого свойства
задать свое время:

1 transition-property: background-color, width, height, border-color;

2 transition-duration: 2s, 3s, 1s, 2s;

Подобно тому как в свойстве transition-property через запятую идет перечисление анимируемых свойств, в свойстве transition-
duration идет перечисление через запятую временных периодов для анимации этих свойств. Причем сопоставление времени
определенному свойству идет по позиции, то есть свойство width будет анимироваться 3 секунды.
 440

Кроме перечисления через запятую всех анимируемых свойств мы можем просто указать ключевое слово all:

1 transition-property: all;

2 transition-duration: 2s;

Теперь будут анимироваться все необходимые свойства, которые меняют значения в стиле для псевдокласса :hover.

Функции анимации

Свойства transition-timing-function позволяет контролировать скорость хода и выполнение анимации. То есть данное свойство
отвечет за то, как и в какие моменты времени анимация будет ускоряться или замедляться.

В качестве значения это свойство может принимать одну из функций:

 linear: линейная функция плавности, изменение свойства происходит равномерно по времени

 ease: функция плавности, при которой анимация ускоряется к середине и замедляется к концу, предоставляя более
естественное изменение

 ease-in: функция плавности, при которой происходит только ускорение в начале

 ease-out: функция плавности, при которой происходит только ускорение в конце анимации

 ease-in-out: функция плавности, при которой анимация ускоряется к середине и замедляется к концу, предоставляя более
естественное изменение

 cubic-bezier: для анимации применяется кубическая функция Безье

Применим функцию ease-in-out:

 441

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Переход в CSS3</title>

6 <style>

7 div{

8 width: 100px;

9 height: 100px;

10 margin: 40px 30px;

11 border: 1px solid #333;

12

13 background-color: #ccc;

14 transition-property: background-color, width;

15 transition-duration: 2s, 10s;

16 transition-timing-function: ease-in-out;

17 }

18 div:hover{

19 background-color: red;

20 width: 200px;

21 }
 442

22 </style>

23 </head>

24 <body>

25 <div></div>

26 </body>

27 </html>

Для использования кубической Безье в функцию cubic-bezier необходимо передать ряд значений:

1 transition-timing-function: cubic-bezier(.5, .6, .24, .18);

Задержка перехода

Свойство transition-delay позволяет определить задержку перед выполнением перехода:

1 transition-delay: 500ms;

Временной период также указывается в секундах (s) или миллисекундах (ms).

Свойство transition

Свойство transition представляет сокращенную запись выше рассмотренных свойств. Например, следующее описание свойств:

1 transition-property: background-color;

2 transition-duration: 3s;

3 transition-timing-function: ease-in-out;
 443

4 transition-delay: 500ms;

Будет аналогично следующей записи:

1 transition: background-color 3s ease-in-out 500ms;

Анимация
Последнее обновление: 06.11.2016

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

Анимация опирается на последовательню смену ключевых кадров (keyframes). Каждый ключевой кадр определяет один набор
значений для анимируемых свойств. И последовательная смена таких ключевых кадров фактически будет представлять анимацию.

По сути переходы применяют ту же модель - так же неявно определяются два ключевых кадра - начальный и конечный, а сам
переход представляет переход от начального к конечному ключевому кадру. Единственное отличие анимации в данном случае
состоит в том, что для анимации можно определить множество промежуточных ключевых кадров.
 444

В целом объявление ключевого кадра в CSS3 имеет следующую форму:

1 @keyframes название_анимации {

2 from {

3 /* начальные значения свойств CSS */

4 }

5 to {

6 /* конечные значения свойств CSS */

7 }

8 }

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

Например, определим анимацю для фонового цвета элемента:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Анимация в CSS3</title>

6 <style>
 445

7 @keyframes backgroundColorAnimation {

8 from {

9 background-color: red;

10 }

11 to {

12 background-color: blue;

13 }

14 }

15 div{

16 width: 100px;

17 height: 100px;

18 margin: 40px 30px;

19 border: 1px solid #333;

20

21 background-color: #ccc;

22 animation-name: backgroundColorAnimation;

23 animation-duration: 2s;

24 }

25 </style>

26 </head>

27 <body>
 446

28 <div></div>

29 </body>

30 </html>

В данном случае анимация называется backgroundColorAnimation. Анимация может иметь произвольное название.

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

Чтобы прикрепить анимацию к элементу, у него в стиле применяется свойство animation-name. Значение этого свойства -
название применяемой анимации.

Также с помощью свойства animation-duration необходимо задать время анимации в секундах или миллисекундах. В данном
случае время анимации - это 2 секунды.

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

1 @keyframes backgroundColorAnimation {

2 from {

3 background-color: red;

4 }

5 to {

6 background-color: blue;

7 }
 447

8 }

9 div{

10 width: 100px;

11 height: 100px;

12 margin: 40px 30px;

13 border: 1px solid #333;

14 background-color: #ccc;

15 }

16 div:hover{

17

18 animation-name: backgroundColorAnimation;

19 animation-duration: 2s;

20 }

Множество ключевых кадров

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

1 @keyframes backgroundColorAnimation {

2 from {

3 background-color: red;
 448

4 }

5 25%{

6 background-color: yellow;

7 }

8 50%{

9 background-color: green;

10 }

11 75%{

12 background-color: blue;

13 }

14 to {

15 background-color: violet;

16 }

17 }

В данном случае анимация начинается с красного цвета. Через 25% времени анимации цвет меняется на желтый, еще через 25% -
на зеленый и так далее.

Также можно в одном ключевом кадре анимировать сразу несколько свойств:

1 @keyframes backgroundColorAnimation {

2 from {

3 background-color: red;
 449

4 opacity: 0.2;

5 }

6 to {

7 background-color: blue;

8 opacity: 0.9;

9 }

10 }

Также можно определить несколько отдельных анимаций, но применять их вместе:

1 @keyframes backgroundColorAnimation {

2 from {

3 background-color: red;

4 }

5 to {

6 background-color: blue;

7 }

8 }

9 @keyframes opacityAnimation {

10 from {

11 opacity: 0.2;

12 }
 450

13 to {

14 opacity: 0.9;

15 }

16 }

17 div{

18 width: 100px;

19 height: 100px;

20 margin: 40px 30px;

21 border: 1px solid #333;

22 background-color: #ccc;

23

24 animation-name: backgroundColorAnimation, opacityAnimation;

25 animation-duration: 2s, 3s;

26 }

В качестве значения свойства animation-name через запятую перечисляются анимации, и также через запятую у
свойства animation-duration задается время этих анимаций. Название анимации и ее время сопоставляются по позиции, то есть
анимация opacityAnimation будет длиться 3 секунды.

Завершение анимации

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

Так, свойство animation-iteration-count определяет, сколько раз будет повторяться анимация. Например, 3 повтора анимации
подряд:

1 animation-iteration-count: 3;

Если необходимо, чтобы анимация запускалась бесконечное количество раз, то этому свойству присваивается значение infinite:

1 animation-iteration-count: infinite;

При повторе анимация будет начинаться снова с начального ключевого кадра. Но с помощью свойства animation-direction:
alternate; противоположное направление анимации при повторе. То есть она будет начинаться с конечного ключевого кадра, а
затем будет переход к начальному кадру:

1 animation-name: backgroundColorAnimation, opacityAnimation;

2 animation-duration: 2s, 2s;

3 animation-iteration-count: 3;

4 animation-direction: alternate;

При окончании анимации браузер устанавливает для анимированного элемента стиль, который был бы до применения анимации.
Но свойство animation-fill-mode: forwards позволяет в качестве окончательного значения анимируемого свойства установить
именно то, которое было в последнем кадре:

1 animation-name: backgroundColorAnimation;

2 animation-duration: 2s;

3 animation-iteration-count: 3;

4 animation-direction: alternate;
 452

5 animation-fill-mode: forwards;

Задержка анимации

С помощью свойства animation-delay можно определить время задержки анимации:

1 animation-name: backgroundColorAnimation;

2 animation-duration: 5s;

3 animation-delay: 1s; /* задержка в 1 секунду */

Функция плавности анимации

Как и к переходам, к анимации можно применять все те же функции плавности:

 linear: линейная функция плавности, изменение свойства происходит равномерно по времени

 ease: функция плавности, при которой анимация ускоряется к середине и замедляется к концу, предоставляя более
естественное изменение

 ease-in: функция плавности, при которой происходит только ускорение в начале

 ease-out: функция плавности, при которой происходит только ускорение в начале

 ease-in-out: функция плавности, при которой анимация ускоряется к середине и замедляется к концу, предоставляя более
естественное изменение

 cubic-bezier: для анимации применяется кубическая функция Безье

Для установки функции плавности применяется свойство animation-timing-function:

 453

1 @keyframes backgroundColorAnimation {

2 from {

3 background-color: red;

4 }

5 to {

6 background-color: blue;

7 }

8 }

9 div{

10 width: 100px;

11 height: 100px;

12 margin: 40px 30px;

13 border: 1px solid #333;

14

15 animation-name: backgroundColorAnimation;

16 animation-duration: 3s;

17 animation-timing-function: ease-in-out;

18 }

Свойство animation

Свойство animation является сокращенным способом определения выше рассмотренных свойств:

 454

animation: animation-name animation-duration animation-timing-function animation-iteration-count animation-direction animat

1
animation-fill-mode

Первые два параметра, которые предоставляют название и время анимации, являются обязательными. Остальные значения не
обязательны.

Возьмем следующий набор свойств:

1 animation-name: backgroundColorAnimation;

2 animation-duration: 5s;

3 animation-timing-function: ease-in-out;

4 animation-iteration-count: 3;

5 animation-direction: alternate;

6 animation-delay: 1s;

7 animation-fill-mode: forwards;

Этот набор будет эквивалентен следующему определению анимации:

1 animation: backgroundColorAnimation 5s ease-in-out 3 alternate 1s forwards;

Создание баннера с анимацией

В качестве примера с анимацией создадим простейший анимированный баннер:

1 <!DOCTYPE html>

2 <html>
 455

3 <head>

4 <title>HTML-баннер</title>

5 <meta charset="utf-8" />

6 <style type="text/css">

7 @keyframes text1

8 {

9 10%{opacity: 1;}

10 40%{opacity: 0;}

11 }

12 @keyframes text2

13 {

14 30%{opacity: 0;}

15 60%{opacity:1;}

16 }

17 @keyframes banner

18 {

19 10%{background-color: #008978;}

20 40%{background-color: #34495e;}

21 80%{background-color: green;}

22 }

23 .banner
 456

24 {

25 width: 600px;

26 height: 120px;

27 background-color: #777;

28 margin: 0 auto;

29 position: relative;

30 }

31 .text1,.text2

32 {

33 position: absolute;

34 width: 100%;

35 height: 100%;

36 line-height: 120px;

37 text-align: center;

38 font-size: 40px;

39 color: #fff;

40 opacity: 0;

41 }

42

43 .text1

44 {
 457

45 animation : text1 6s infinite;

46 }

47

48 .text2

49 {

50 animation : text2 6s infinite;

51 }

52

53 .animated

54 {

55 opacity: 0.8;

56 position: absolute;

57 width: 100%;

58 height: 100%;

59 background-color: #34495e;

60 animation: banner 6s infinite;

61 }

62 </style>

63 </head>

64 <body>

65 <div class="banner">
 458

66 <div class="animated">

67 <div class="text1">Только в этом месяце</div>

68 <div class="text2">Скидки по 20%</div>

69 </div>

70 </div>

71 </body>

72 </html>

Здесь одновременно срабатывают три анимации. Анимация "banner" изменяет цвет фона баннера, а анимации text1 и text2
отображают и скрывают текст с помощью настроек прозрачности. Когда первый текст виден, второй не виден и наоборот. Тем
самым мы получаем анимацию текста в баннере.

Адаптивный дизайн
Введение в адаптивный дизайн
Последнее обновление: 03.05.2016


 459

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

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

На заре распространения мобильных телефонов пользователи могли через телефон по протоколу WAP получать доступ к
специальным wap-сайтам, которые были написаны на языке wml - языке на основе xml, похожем на html. К примеру, простейшая
веб-страница на этом языке разметке могла иметь следющий код:

<?xml version="1.0"?>
1
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
2
"[Link] >
3
<wml>
4
<card id="main" title="WapSite">
5
<p mode="wrap">Простейшая страница на языке WML.</p>
6
</card>
7
</wml>

Визуально она выглядела так:

 460

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

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

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

Хотя нередко до сих пор можно встретить ситуацию, когда для сайта создается отдельная мобильная версия, часто с префиксом m,
например, [Link]. Однако концепция адаптивного становится все более распространенной и доминирующей.

Тестирование адаптивного дизайна

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

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

В данном случае отображается веб-страница как она бы выглядела на устройстве Samsung Galaxy S III. Но при желании можно
выбрать другое устройство, либо даже создать эмуляцию какого-то нового устройства, которого нет во встроенном списке.
 461

Подобные инструменты есть и в других современных веб-браузерах. Например, в Mozilla Firefox для их открытия надо перейти в
меню Разработка -> Адаптивный дизайн

Еще одно решение заключается в использовании эмуляторы мобильных устройств. Небольшой список подобных эмуляторов можно
найти по следующему адресу: [Link]

Наиболее популярным является эмулятор браузера Opera Mobile, который можно найти по
адресу [Link] .

Метатег Viewport
Последнее обновление: 03.05.2016

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

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Обычная веб-страница</title>
 462

6 </head>

7 <body>

8 <h2>Обычная веб-страница</h2>

9 </body>

10 </html>

Это стандартная веб-страница, которая в обычном браузере будет выглядеть следующим образом:

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

Применяя масштабирование, пользователь может наконец-то увидеть, что же там все таки написано. Однако это не очень удобно.
При этом веб-страница имеет много пустого места, что не очень красиво.

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

Вся видимая область на экране браузера описывается понятием Viewport. По сути viewport представляет область, в которую веб-
браузер пытается "впихнуть" веб-страницу. Например, браузер Safari на iPone и iPod определяет ширину viewport по умолчанию
равной 980 пикселям. То есть, получив страницу и вписав в viewport с шириной 980 пикселей, браузер сжимает ее до размеров
мобильного устройства. Например, если ширина экрана смартфона составляет 320 пикселей, то до этого размера потом будет
сжата страница. И ко всем элементам страницы будет применен коэффициент масштабирования, равный 320/980.
 463

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

При этом для каждого браузера устанавливается своя ширина области viewport, необязательно 980 пикселей. Другие браузеры
могут поддерживать в качестве начальной ширины другие значения. Но они также будут выполнять масштабирование.

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

1 <meta name="viewport" content="параметры_метатега">

В атрибуте content мета-тега мы можем определить следующие параметры:

Парамет Значения Описание

р
width Принимает Устанавливает
целочисленное ширину области
значение в viewport
пикселях или
значение device
-width
height Принимает Устанавливает
целочисленное высоту области
значение в viewport
пикселях или
значение device
-height
initial- Число с Задает
scale плавающей коэффициент
 464

точкой от 0.1 и масштабировани

выше я начального
размера
viewport.
Значение 1.0
задает
отсутствие
масштабировани
я
user- no/yes Указывает,
scalable может ли
пользователь с
помощью жестов
масштабировать
страницу
minimum- Число с Задает
scale плавающей минимальный
точкой от 0.1 и масштаб размера
выше viewport.
Значение 1.0
задает
отсутствие
масштабировани
я
maximum- Число с Задает
scale плавающей максимальный
точкой от 0.1 и масштаб размера
выше viewport.
Значение 1.0
 465

задает
отсутствие
масштабировани
я

Теперь изменим предыдущий пример веб-страницу, использовав метатег:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <meta name="viewport" content="width=device-width">

6 <title>Обычная веб-страница</title>

7 </head>

8 <body>

9 <h2>Обычная веб-страница</h2>

10 </body>

11 </html>

Веб-страничка определенно выглядит лучше благодаря использованию метатега viewport. Используя параметр width=device-
width мы говорим веб-браузеру, что в качестве начальной ширины области viewport надо считать не 980 пикселей или какое-то
другое число, а непосредственную ширину экрана устройства. Поэтому затем веб-браузер не будет проводить никакого
масштабирования, так как у нас ширина viewport и ширина одинаковы.
 466

Мы также можем использовать другие параметры, например, запретить пользователю масштабировать размеры страницы:

<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-

1
scale=1.0">

Media Query в CSS

Последнее обновление: 03.05.2016

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

Например, некоторые элементы могут

В CSS2 уже было решение в виде правила media, которое позволяет указать устройство, для которого используется данный стиль:

1 <html>

2 <head>

3 <title>Адаптивная веб-страница</title>

4 <link media="handheld" rel="stylesheet" href="[Link]">

5 <link media="screen" rel="stylesheet" href="[Link]">

 467

6 </head>

7 <body>

8 ......................

Правило media="handheld" указывает, что стили в [Link] будут применяться к мобильным устройствам, в то время как
правило media="screen" применяется к десктопным браузерам.

Однако многие современные мобильные браузеры по умолчанию считают, что страница предназначена для десктопов, поэтому в
любом случае применяет правило media="screen". Поэтому на подобное решение не стоит полагаться.

Для решения этой проблемы в CSS3 были введен механизм CSS3 Media Query. Например, чтобы применить стиль только к
мобильным устройствам мы можем написать так:

<html>
1
<head>
2
<title>Адаптивная веб-страница</title>
3
<meta name="viewport" content="width=device-width">
4
<link rel="stylesheet" type="text/css" href="[Link]" />
5
<link rel="stylesheet" type="text/css" media="(max-device-width:480px)"
6
href="[Link]" />
7
</head>
8
<body>
9
................................
 468

Значение атрибута media (max-device-width:480px) говорит нам о том, что стили из файла [Link] будут применяться к тем
устройствам, максимальная ширина экрана которых составляет 480 пикселей - то есть фактически это и есть мобильные
устройства.

С помощью ключевого слова and можно комбинировать условия, например:

<link rel="stylesheet" type="text/css" media="(min-width:481px) and (max-width:768px)"

1
href="[Link]" />

Данный стиль будет применяться, если ширина браузера находится в диапазоне от 481 до 768 пикселей.

С помощью директивый @import можно определить один css-файл и импортировать в него стили для определенных устройств:

@import url([Link]);
1
@import url([Link]) (min-device-width:481px) and (max-device-
2
width:768);
3
@import url([Link]) (max-device-width:480px);

Также можно не разлелять стили по файлам, а использовать правила CSS3 Media Query в одном файле css:

1 body {

2 background-color: red;

3 }

4 /*Далее остальные стили*/

5 @media (max-device-width:480px){

6 body {
 469

7 background-color: blue;

8 }

9 /*Далее остальные стили*/

10 }

Применяемые функции в CSS3 Media Query:

 aspect-ratio: отношение ширины к высоте области отображения (браузера)

 device-aspect-ratio: отношение ширины к высоте экрана устройства

 max-width/min-width и max-height/min-height: максимальная и минимальная ширина и высота области отображения

(браузера)

 max-device-width/min-device-width и max-device-height/min-device-height: максимальная и минимальная ширина и

высота экрана мобильного устройства

 orientation: ориентация (портретная или альбомная)

Например, мы можем задать разные стили для разных ориентаций мобильных устройств:

1 /*Стили для портретной ориентации*/

2 @media only screen and (orientation: portrait){

4 }

5 /*Стили альбомной ориентации*/

 470

6 @media only screen and (orientation: landscape){

8 }

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

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

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <meta name="viewport" content="width=device-width">

6 <title>Адаптивная веб-страница</title>

8 <style>

9 body {

10 background-color: red;

11 }

12 /* для планшетов и фаблетов */

13 @media (min-width: 481px) and (max-width:768px) {

 471

14 body {

15 background-color: green;

16 }

17 }

18 /* для декстопов */

19 @media (min-width:769px) {

20 body {

21 background-color: blue;

22 }

23 }

24 </style>

25 </head>

26 <body>

27 <h2>Адаптивная веб-страница</h2>

28 </body>

29 </html>

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

И например, на эмуляторе Opera Mobile при эмуляции устройства с шириной в 480 пикселей страница приобретет красный цвет:
 472

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

Мультимедиа
Видео
Последнее обновление: 21.04.2016

Для воспроизведения видео в HTML5 используется элемент video. Чтобы настроить данный элемент, мы можем использовать
следующие его атрибуты:

 src: источник видео, это может быть какой-либо видеофайл

 width: ширина элемента

 height: высота элемента

 controls: добавляет элементы управления воспроизведением

 autoplay: устанавливает автовоспроизведение

 loop: задает повторение видео

 473

 muted: отключает звук по умолчанию

Хотя мы можем установить ширину и высоту, но они не окажут никакого влияния на аспектное отношения ширины и высоты самого
видео. Например, если видео имеет формат 375×240, то, к примеру, при настройках width="375" height="280" видео будет
центрироваться на 280-пиксельном пространстве в HTML. Что позволяет избавить видео от искажений, которые были бы при
растягивании.

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Видео в HTML5</title>

6 </head>

7 <body>

8 <video src="cats.mp4" width="400" height="300" controls ></video>

9 </body>

10 </html>

Применим атрибуты autoplay и loop:

<video src="cats.mp4" width="400" height="300" controls autoplay loop

1
></video>

Теперь видео будет автоматически проигрываться бесконечное число раз.

 474

Если при воспроизведении надо отключить звук, то мы можем воспользоваться атрибутом muted:

1 <video src="cats.mp4" width="400" height="300" controls muted ></video>

Атрибут preload

Еще один атрибут - preload призван управлять загрузкой видео. Он принимает следующие значения:

 auto: видео и связанные с ним метаданные будут загружаться до того, как видео начнет воспроизводиться.

 none: видео не будет загружаться в фоне, пока пользователь не нажмет на кнопку начала проигрывания

 metadata: в фоне до воспроизведения будут загружаться только метаданные (данные о формате, длительности и т.д), само
видео не загружается

<video src="cats.mp4" width="400" height="300" controls

1
preload="auto"></video>

Атрибут poster

Атрибут poster позволяет установить изображение, которое будет отображаться до запуска видео. Этому атрибуту в качестве
значения передается путь к изображению:

<video src="cats.mp4" width="400" height="300" controls

1
poster="[Link]"></video>

Поддержка форматов видео

Главной проблемой при использовании элемента video является поддержка различными веб-браузерами определенных форматов.
С помощью вложенных элементов source можно задать несколько источников видео, один из которых будет использоваться:
 475

1 <video width="400" height="300" controls>

2 <source src="cats.mp4" type="video/mp4">

3 <source src="[Link]" type="video/webm">

4 <source src="[Link]" type="video/ogg">

5 </video>

Элемент source использует два атрибута для установки источника видео:

 src: путь к видеофайлу

 type: тип видео (MIME-тип)

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

Аудио
Последнее обновление: 21.04.2016

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

 src: путь к аудиофайлу

 controls: добавляет элементы управления воспроизведением

 autoplay: устанавливает автовоспроизведение

 loop: задает повторение аудиофайла

 muted: отключает звук по умолчанию

 preload: устанавливает режим загрузки файла

Действие всех этих атрибутов будет аналогично их действию в элементе video.

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Аудио в HTML5</title>

6 </head>

7 <body>

8 <audio src="mobile_phone.mp3" controls></audio>

9 </body>

10 </html>
 477

Опять же в зависимости от браузера внешний вид элементов управления может отличаться. Выше приведен пример для Google
Chrome. А в Firefox они будут выглядеть немного иначе:

Поддержка форматов аудио

Ключевым моментом для работы с аудио является поддержка браузером тех или иных форматов. На данный момент подавляющее
большинство браузеров поддерживают mp3. Однако если у нас есть неуверенность, что наше аудио в определенном формате
будет поддерживаться браузером пользователя, то мы можем использовать вложенный элемент source и указать аудио в иных
форматах:

1 <audio width="400" height="300" controls>

2 <source src="mobile_phone.mp3" type="audio/mpeg">

3 <source src="mobile_phone.m4a" type="audio/aac">

4 <source src="mobile_phone.ogg" type="audio/ogg">

5 </audio>

Как и в случае с элементом video, здесь у элемента source устанавливается атрибут src с ссылкой на файл и атрибут type - тип
файла.

Media API. Управление видео из JavaScript

Последнее обновление: 21.04.2016


 478

Вместе с новыми элементами audio и video в HTML5 был добавлен новый API в JavaScript для управления этими элементами. С
помощью кода JavaScript мы можем получить элементы video и audio (как и любой другой элемент) и использовать их свойства. В
JavaScript эти элементы представлены объектом HTMLMediaElement, который с помощью свойств, методов и событий позволяет
управлять воспроизведением аудио и видео. Отметим наиболее важные свойства, которые могут нам пригодиться для настройки
этих элементов:

 playbackRate: устанавливает скорость воспроизведения. По умолчанию равно 1

 src: возвращает название воспроизводимого ресурса, если он установлен в коде html элемента

 duration: возвращает длительность файла в секундах

 buffered: возвращает длительность той части файла, которая уже буферизирована и готова к воспроизведению

 controls: устанавливает или возвращает наличие атрибута controls. Если он установлен, возвращается true, иначе
возвращает false

 loop: устанавливает или возвращает наличие атрибута loop. Если он установлен, возвращается true, иначе
возвращает false

 muted: устанавливает или возвращает наличие атрибута muted

 preload: устанавливает или возвращает наличие атрибута preload

 volume: устанавливает или возвращает уровень звука от 0.0 до 1.0

 currentTime: возвращает текущее время воспроизведения

 479

Отдельно для элемента video мы можем использовать ряд дополнительных свойств:

 poster: устанавливает или возвращает атрибут poster

 height: устанавливает или возвращает атрибут height

 width: устанавливает или возвращает атрибут width

 videoWidth, videoHeight: для элемента video возвращают ширину и высоту видео

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

 play(): начинает воспроизведение

 pause(): приостанавливает воспроизведение

Основные события элементов video и audio:

 canplaythrough: это событие срабатывает после загрузки страницы, если браузер определит, что он может воспроизводить
это видео/аудио

 pause: событие срабатывает, когда воспроизведение мультимедиа приостанавливается, и оно переводится в состояние
"paused"

 play: событие срабатывает, когда начинается воспроизведение файла

 volumechange: срабатывает при изменении уровня звука мультимедиа

 ended: срабатывает при окончании воспроизведения

 timeupdate: срабатывает при изменении времени воспроизведения

 480

 error: генерируется при возникновении ошибки

 loadeddata: срабатывает, когда будет загружен первый фрейм видеофайла

 loadedmetadata: срабатывает после загрузки метаданных мультимедиа (длительность воспроизведения, размеры видео и
т.д.)

 seeking: срабатывает, когда пользователь начинает перемещать курсор по шкале воспроизведения для перемещения к
новому месту аудио- или видеофайла

 seeked: срабатывает, когда пользователь завершил перемещение к новому месту на шкале воспроизведения

Теперь используем некоторые из этих свойств, событий и методов для управления элементом video:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Аудио в HTML5</title>

6 <style>

7 .hidden{

8 display:none;

9 }

10 #playBtn {

11 border: solid 1px #333;

 481

12 padding: 5px;

13 cursor: pointer;

14 }

15

16 </style>

17 </head>

18 <body>

19 <video width="400" height="300">

20 <source src="cats.mp4" type="video/mp4">

21 <source src="[Link]" type="video/webm">

22 <source src="[Link]" type="video/ogg">

23 </video>

24 <div id="controls" class="hidden">

25 <a id="playBtn">Play</a>

26 <span id="timer">00:00</span>

27 <input type="range" step="0.1" min="0" max="1" value="0"

id="volume" />
28
</div>
29
<script>
30
// получаем все элементы
31
var videoEl = [Link]('video')[0],
32
 482

33 playBtn = [Link]('playBtn'),

34 vidControls = [Link]('controls'),

35 volumeControl = [Link]('volume'),

36 timePicker = [Link]('timer');

37

38 // если браузер может воспроизводить видео удаляем класс

39 [Link]('canplaythrough', function () {

40 [Link]('hidden');

41 [Link] = [Link];

42 }, false);

43 // запускам или останавливаем воспроизведение

44 [Link]('click', function () {

45 if ([Link]) {

46 [Link]();

47 } else {

48 [Link]();

49 }

50 }, false);

51

52 [Link]('play', function () {

53
 483

54 [Link] = "Pause";

55 }, false);

56

57 [Link]('pause', function () {

58

59 [Link] = "Play";

60 }, false);

61

62 [Link]('input', function () {

63

64 [Link] = [Link];

65 }, false);

66

67 [Link]('ended', function () {

68 [Link] = 0;

69 }, false);

70

71 [Link]('timeupdate', function () {

72 [Link] = secondsToTime([Link]);

73 }, false);

74
 484

75 // рассчет отображаемого времени

76 function secondsToTime(time){

77

78 var h = [Link](time / (60 * 60)),

79 dm = time % (60 * 60),

80 m = [Link](dm / 60),

81 ds = dm % 60,

82 s = [Link](ds);

83 if (s === 60) {

84 s = 0;

85 m = m + 1;

86 }

87 if (s < 10) {

88 s = '0' + s;

89 }

90 if (m === 60) {

91 m = 0;

92 h = h + 1;

93 }

94 if (m < 10) {

95 m = '0' + m;
 485

}
96
if (h === 0) {
97
fulltime = m + ':' + s;
98
} else {
99
fulltime = h + ':' + m + ':' + s;
100
}
101
return fulltime;
102
}
103
</script>
104
</body>
105
</html>

Вначале в коде JavaScript мы получаем все элементы. Затем, если браузер поддерживает видео и может его воспроизвести, то
обрабатываем событие canplaythrough, устанавливая уровень звука и удаляя класс hidden:

1 [Link]('canplaythrough', function () {

2 [Link]('hidden');

3 [Link] = [Link];

4 }, false);

Чтобы запустить воспроизведение, нам надо обработать нажатие ссылки Play:

1 [Link]('click', function () {
 486

2 if ([Link]) { // если видео остановлено, запускаем

3 [Link]();

4 } else {

5 [Link]();

6 }

7 }, false);

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

1 [Link]('play', function () {

3 [Link] = "Pause";

4 }, false);

6 [Link]('pause', function () {

8 [Link] = "Play";

9 }, false);

Обрабатывая событие input, которое возникает при изменении значения ползунка, мы можем синхронизировать изменение
ползунка и громкость видео:

1 [Link]('input', function () {
 487

3 [Link] = [Link];

4 }, false);

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

1 [Link]('ended', function () {

3 [Link] = 0;

4 }, false);

А обработчик события timeupdate позволит динамически изменять показатель времени воспроизведения:

1 [Link]('timeupdate', function () {

2 [Link] = secondsToTime([Link]);

3 }, false);

Для форматирования строки времени применяется вспомогательная функция secondsToTime. В итоге мы получим следующие
элементы воспроизведения:

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

Canvas
 488

Доступ к canvas и рисование прямоугольников

Последнее обновление: 02.05.2016

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

Определим на веб-странице элемент canvas:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Canvas в HTML5</title>

6 </head>

7 <body>

8 <canvas id="myCanvas" width="300" height="200">

9 Ваш браузер не поддерживает Canvas

 489

10 </canvas>

11 </body>

12 </html>

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

Также, как правило, для элемента canvas задаются ширина и высота с помощью атрибутов width и height. Если не указать эти
атрибуты, то по умолчанию ширина будет составлять 300, а высота - 150 пикселей.

Получение контекста рисования

Все рисование на canvas производится с помощью кода JavaScript. Чтобы начать рисовать на canvas, нам надо получить его
контекст:

1 var canvas = [Link]("myCanvas"),

2 context = [Link]("2d");

Для получения контекста используется функция getContext("2d"). В данном случае мы получаем двухмерных контекст для
создания двухмерной графики. Также контекст элемента canvas позволяет создавать трехмерную графику. Подробнее об этом
можно почитать в руководстве по WebGL. В данном же случае мы затронем только двухмерную графику.

Рисование прямоугольников

И наконец нам остается собственно нарисовать первую фигуру. Для рисования простейших фигур - прямоугольников нам могут
понадобиться три метода:
 490

 clearRect(x, y, w, h): очищает определенную прямоугольную область, верхний левый угол которой имеет координаты x и
y, ширина равна w, а высота равна h

 fillRect(x, y, w, h): заливает цветом прямоугольник, верхний леый угол которого имеет координаты x и y, ширина равна
w, а высота равна h

 strokeRect(x, y, w, h): рисует контур прямоугольника без заливки его каким-то определенным цветом

Теперь используем эти методы:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Canvas в HTML5</title>

6 </head>

7 <body>

8 <canvas id="myCanvas" width="350" height="200"

9 style="background-color:#eee; border: 1px solid #ccc;">

10 Ваш браузер не поддерживает Canvas

11 </canvas>

12 <script>

13 var canvas = [Link]("myCanvas"),

14 context = [Link]("2d");
 491

15

16 [Link](50, 40, 100, 100);

17 [Link](200, 40, 100, 100);

18 </script>

19 </body>

20 </html>

При рисовании в функции strokeRect и fillRect передаются координаты x и y верхнего левого угла прямоугольника относительно
элемента canvas, а также ширина и высота прямоугольника. При этом началом координат считается верхний левый угол элемента
canvas, ось X направлена вправо, а ось Y направлена вниз:

В отличие от strokeRect и fillRect метод clearRect очищает определенную область, Фактически эта область приобретатет тот
цвет, который у нее был бы, если бы к ней не применялись функции strokeRect и fillRect. Например:

1 var canvas = [Link]("myCanvas"),

2 context = [Link]("2d");

4 [Link](50, 40, 100, 100);

5 [Link](50, 40, 40, 40);

В данном случае очищается небольшая часть прмоугольника в левом верхнем углу:

 492

Настройка рисования
Последнее обновление: 31.10.2016

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

 strokeStyle: устанавливает цвет линий или цвет контура. По умолчанию установлен черный цвет

 fillStyle: устанавливает цвет заполнения фигур. По умолчанию установлен черный цвет

 lineWidth: устанавливает толщину линий. По умолчанию равно 1.0

 lineJoin: устанавливает стиль соединения линий

 globalAlpha: устанавливает прозрачность отрисовки на canvas

 setLineDash: создает линию из коротких черточек

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

Чтобы рисовать какие-то видимые фигуры, нам нужно задать цвет. Установить цвет можно разными способами. Во-первых, мы
можем задать цвет контура или границы фигур с помощью свойства strokeStyle:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Canvas в HTML5</title>

6 </head>

7 <body>

8 <canvas id="myCanvas" width="350" height="200"

9 style="background-color:#eee; border: 1px solid #ccc;">

10 Ваш браузер не поддерживает Canvas

11 </canvas>

12 <script>

13 var canvas = [Link]("myCanvas"),

14 context = [Link]("2d");

15

16 [Link] = "red";

17 [Link] = "blue";

18

19 [Link](50, 40, 100, 100);

 494

20 [Link](200, 40, 100, 100);

21 </script>

22 </body>

23 </html>

В качестве значения свойства strokeStyle и fillStyle получают название цвета в виде строки, либо в виде шестнадцатиричного
значения цвета (например, "#00FFFF"), либо в виде значений rgb ("rgb(0, 0, 255)") и rgba ("rgba(0, 0, 255, 0.5)").

Свойство lineWidth позволяет установить толщину линии:

1 var canvas = [Link]("myCanvas"),

2 context = [Link]("2d");

4 [Link] = "red";

5 [Link] = "blue";

6 [Link] = 6.5;

8 [Link](50, 40, 100, 100);

9 [Link](50, 40, 100, 100);

setLineDash
 495

Метод setLineDash() в качестве параметра принимает массив чисел, которые устанавливают расстояния между линиями.
Например:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Canvas в HTML5</title>

6 </head>

7 <body>

8 <canvas id="myCanvas" width="450" height="200"

9 style="background-color:#eee; border: 1px solid #ccc;">

10 Ваш браузер не поддерживает Canvas

11 </canvas>

12 <script>

13 var canvas = [Link]("myCanvas"),

14 context = [Link]("2d");

15

16 [Link] = "red";

17

18 [Link]([15,5]);

19 [Link](40, 40, 100, 100);

 496

20

21 [Link] = "blue";

22 [Link]([2,5,6]);

23 [Link](180, 40, 100, 100);

24

25 [Link] = "green";

26 [Link]([2]);

27 [Link](320, 40, 100, 100);

28 </script>

29 </body>

30 </html>

Тип соединения линий

Свойство lineJoin отвечает за тип соединения линий в фигуре. Оно может принимать следующие значения:

 miter: прямые соединения, которые образуют прямые углы. Это значение по умолчанию

 round: закругленные соединения

 bevel: конические соединения

1 <!DOCTYPE html>
 497

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Canvas в HTML5</title>

6 </head>

7 <body>

8 <canvas id="myCanvas" width="450" height="200"

9 style="background-color:#eee; border: 1px solid #ccc;">

10 Ваш браузер не поддерживает Canvas

11 </canvas>

12 <script>

13 var canvas = [Link]("myCanvas"),

14 context = [Link]("2d");

15

16 [Link] = "red";

17 [Link] = "blue";

18

19 [Link] = 15;

20 [Link] = "miter";

21 [Link](40, 40, 100, 100);

22 [Link] = "bevel";
 498

23 [Link](180, 40, 100, 100);

24 [Link] = "round";

25 [Link](310, 40, 100, 100);

26 </script>

27 </body>

28 </html>

Прозрачность

Свойство globalAlpha задает прозрачность отрисовки. Оно может принимать в качестве значения число от 0 (полностью
прозрачный) до 1.0 (не прозрачный):

1 var canvas = [Link]("myCanvas"),

2 context = [Link]("2d");

4 [Link] = "blue";

5 [Link](50, 50, 100, 100);

7 [Link] = 0.5;

8 [Link] = "red";

9 [Link](100, 100, 100, 100);

 499

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

Фоновые изображения
Последнее обновление: 02.05.2016

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

 repeat: изображение повторяется для заполнения всего пространства фигуры

 repeat-x: изображение повторяется только по горизонтали

 repeat-y: изображение повторяется только по вертикали

 no-repeat: изображение не повторяется

Нарисуем прямоугольник и выведем в нем изображение:

1 <!DOCTYPE html>
 500

3 <html>

4 <head>

5 <meta charset="utf-8">

6 <title>Canvas в HTML5</title>

7 </head>

8 <body>

9 <canvas id="myCanvas" width="300" height="200"

10 style="background-color:#eee; border:1px solid #ccc;">

11 Ваш браузер не поддерживает Canvas

12 </canvas>

13 <script>

14 var canvas = [Link]("myCanvas"),

15 context = [Link]("2d");

16

17 var img = new Image();

18 [Link] = "[Link]";

19 [Link] = function() {

20

21 var pattern = [Link](img, "repeat");

22 [Link] = pattern;
 501

[Link](10, 10, 150, 150);

23
[Link](10, 10, 150, 150);
24
};
25
</script>
26
</body>
27
</html>

Чтобы использовать изображение, нам надо создать элемент Image и установить источник изображения - локальный файл или
ресурс в сети:

1 var img = new Image();

2 [Link] = "[Link]";

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

1 [Link] = function() {

3 var pattern = [Link](img, "repeat");

4 [Link] = pattern;

5 [Link](10, 10, 150, 150);

6 [Link](10, 10, 150, 150);

 502

7 };

Метод createPattern() возвращает объект, который устанавливается в качестве стиля заполнения фигуры: [Link] =
pattern;. Отрисовка прямоугольника остается той же.

Создание градиента
Последнее обновление: 02.05.2016

Элемент Canvas позволяет использовать градиент в качестве фона. Для этого применяется объект CanvasGradient, который
можно создать либо с помощью метода createLinearGradient() (линейный градиент), либо с помощью
метода createRadialGradient() (радиальный градиент).

Линейный градиент

Линейный градиент создается помощью метода createLinearGradient(x0, y0, x1, y1), где x0 и y0 - это начальные координаты
градиента относительно верхнего левого угла canvas, а x1 и y1 - координаты конечной точки градиента. Например:

1 var gradient = [Link](50, 30, 150, 150);

Также для создания градиента необходимо задать опорчные точки, которые определяют цвет. Для этого у объекта CanvasGradient
применяется метод addColorStop(offset, color), где offset - это смещение точки градиента, а color - ее цвет. Например:
 503

1 [Link](0, "blue");

Смещение представляет значение в диапазоне от 0 до 1. Смещение 0 представляет начало градиента, а 1 - его конец. Цвет
задается либо в виде строки, либо в виде шестнадцатиричного значения, либо в виде значения rgb/rgba.

Применим градиент:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Canvas в HTML5</title>

6 </head>

7 <body>

8 <canvas id="myCanvas" width="300" height="200"

9 style="background-color:#eee; border:1px solid #ccc;">

10 Ваш браузер не поддерживает Canvas

11 </canvas>

12 <script>

13 var canvas = [Link]("myCanvas"),

14 context = [Link]("2d"),

15 gradient = [Link](50, 30, 150,

150);
16
 504

[Link](0, "blue");
17
[Link](1, "white");
18
[Link] = gradient;
19
[Link](50, 30, 150, 150);
20
[Link](50, 30, 150, 150);
21
</script>
22
</body>
23
</html>

В данном случае мы получаем диагональный линейный градиент. Управляя координатами, мы можем добаиться горизонтального
или вертикального градиента.

Совпадение x-координат начальной и конечной точек создает горизонтальный градиент:

1 gradient = [Link](50, 30, 50, 150);

А совпадение y-координат начальной и конечной точек создает горизонтальный градиент:

1 gradient = [Link](50, 30, 150, 30);

Радиальный градиент
 505

Радиальный градиент создается с помощью метода createRadialGradient(x0, y0, r0, x1, y1, r1), который принимает
следующие параметры:

 x0 и y0: координаты центра первой окружности

 r0: радиус первой окружности

 x1 и y1: координаты центра второй окружности

 r1: радиус второй окружности

Например:

1 var gradient = [Link](120,100,100,120,100,30);

И также для радиального градиента нам надо задать опорные цветовые точки с помощью метода addColorStop()

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Canvas в HTML5</title>

6 </head>

7 <body>

8 <canvas id="myCanvas" width="300" height="200"

9 style="background-color:#eee; border:1px solid #ccc;">

 506

Ваш браузер не поддерживает Canvas

10
</canvas>
11
<script>
12
var canvas = [Link]("myCanvas"),
13
context = [Link]("2d"),
14
gradient =
15
[Link](120,100,100,120,100,30);
16
[Link](0, "blue");
17
[Link](1, "white");
18
[Link] = gradient;
19
[Link](50, 30, 150, 150);
20
[Link](50, 30, 150, 150);
21
</script>
22
</body>
23
</html>

Рисование текста
Последнее обновление: 02.05.2016


 507

Наряду с геометрическими фигурами и изображениями canvas позволяет выводить текст. Доля этого вначале надо установить у
контекста canvas свойство font:

1 var canvas = [Link]("myCanvas"),

2 context = [Link]("2d");

3 [Link] = "22px Verdana";

Свойство font в качестве значения принимает опредление шрифта. В данном случае это шрифт Verdana высотой 22 пикселя. В
качестве шрифтов используются стандартные шрифты.

Далее мы можем вывести некоторый текст с помощью метода fillText():

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Canvas в HTML5</title>

6 </head>

7 <body>

8 <canvas id="myCanvas" width="300" height="200"

9 style="background-color:#eee; border:1px solid #ccc;">

10 Ваш браузер не поддерживает Canvas

 508

11 </canvas>

12 <script>

13 var canvas = [Link]("myCanvas"),

14 context = [Link]("2d");

15 [Link] = "22px Verdana";

16 [Link]("Hello HTML5!", 20, 50);

17 </script>

18 </body>

19 </html>

Метод fillText(text, x, y) принимает три параметра: выводимый текст и x и y координаты точки, с которой выводится текст.

Для вывода текста можно также применять метод strokeText(), который создает границу для выводимых символов:

1 var canvas = [Link]("myCanvas"),

2 context = [Link]("2d");

3 [Link] = "30px Verdana";

4 [Link] = "red";

5 [Link]("Hello HTML5!", 20, 50);

Свойство textAlign
 509

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

 left: текст начинается с указанной позиции

 right: текст завершается до указанной позиции

 center: текст располагается по центру относительно указанной позиции

 start: значение по умолчанию, текст начинается с указанной позиции

 end: текст завершается до указанной позиции

1 var canvas = [Link]("myCanvas"),

2 context = [Link]("2d");

3 [Link] = "22px Verdana";

4 [Link] = "right";

5 [Link]("Right Text", 120, 30);

6 [Link] = "left";

7 [Link]("Left Text", 120, 60);

8 [Link] = "center";

9 [Link]("Center Text", 120, 90);

10 [Link] = "start";

11 [Link]("Start Text", 120, 120);

12 [Link] = "end";
 510

13 [Link]("End Text", 120, 150);

Свойство lineWidth

Свойство lineWidth задает ширину линии текста:

1 var canvas = [Link]("myCanvas"),

2 context = [Link]("2d");

3 [Link] = "30px Verdana";

4 [Link] = "red";

6 [Link] = 2;

7 [Link]("Hello HTML5!", 20, 50);

Свойство textBaseline

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

 top

 middle

 bottom
 511

 alphabetic

 hanging

 ideographic

1 var canvas = [Link]("myCanvas"),

2 context = [Link]("2d");

3 [Link] = "18px Verdana";

4 [Link]="top";

5 [Link]("Top",15,100);

6 [Link]="bottom";

7 [Link]("Bottom",60,100);

8 [Link]="middle";

9 [Link]("Middle",130,100);

10 [Link]="alphabetic";

11 [Link]("Alphabetic",200,100);

12 [Link]="hanging";

13 [Link]("Hanging",300,100);

Определение ширины текста

С помощью метода measureText() можно определить ширину текста на canvase:

 512

1 var canvas = [Link]("myCanvas"),

2 context = [Link]("2d");

3 [Link] = "18px Verdana";

4 var text = [Link]("Hello HTML5");

5 alert([Link]);

Рисование фигур
Последнее обновление: 02.05.2016

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

Для создания нового пути надо вызвать метод beginPath(), а после завершения пути вызывается метод closePath():

1 var canvas = [Link]("myCanvas"),

2 context = [Link]("2d");

3 [Link]();
 513

4 // здесь инструкции по созданию фигур

5 [Link]();

Между вызовами методов beginPath() и closePath() находятся методы, непосредственно создающие различные участки пути.

Методы moveTo() и lineTo()

Для начала рисования пути нам надо зафиксировать начальную точку этого пути. Это можно сделать с помощью метода moveTo(),
который имеет следующее определение:

1 moveTo(x, y)

Метод перемещает нас на точку с координатами x и y.

Метод lineTo() рисует линию. Он имеет похожее определение:

1 lineTo(x, y)

Метод рисует линию от текущей позиции до точки с координатами x и y.

Теперь нарисуем ряд линий:

1 var canvas = [Link]("myCanvas"),

2 context = [Link]("2d");

3 [Link]();

4 [Link](30, 20);

5 [Link](100, 80);
 514

6 [Link](150, 30);

7 [Link]();

Здесь мы устанавливаем начало пути в точку (30, 20), затем от нее рисуем линию до точки (100, 80) и далее рисуем еще одну
линию до точки (150, 30).

Хотя мы нарисовали несколько линий, пока мы их не увидим, потому что их надо отобразить на экране. Для отображения пути надо
использовать метод stroke():

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Canvas в HTML5</title>

6 </head>

7 <body>

8 <canvas id="myCanvas" width="300" height="200"

9 style="background-color:#eee; border:1px solid #ccc;">

10 Ваш браузер не поддерживает Canvas

11 </canvas>

12 <script>

13 var canvas = [Link]("myCanvas"),

14 context = [Link]("2d");
 515

15 [Link]();

16 [Link](30, 20);

17 [Link](150, 140);

18 [Link](250, 30);

19 [Link]();

20 [Link] = "red";

21 [Link]();

22 </script>

23 </body>

24 </html>

Хотя мы нарисовали все две линии, но по факту мы увидим три линии, которые оформляют треугольник. Дело в том, что вызов
метода [Link]() завершает путь, соединяя последнюю точку с первой. И в результате образуется замкнутый контур.

Если нам не надо замыкание пути, то мы можем удалить вызов метода [Link]():

Метод rect

Метод rect() создает прямоугольник. Он имеет следующее определение:

1 rect(x, y, width, height)

 516

Где x и y - это координаты верхнего левого угла прямоугольника относительно canvas, а width и height - соответственно ширина и
высота прямоугольника. Нарисуем, к примеру, следующий прямоугольник:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Canvas в HTML5</title>

6 </head>

7 <body>

8 <canvas id="myCanvas" width="300" height="200"

9 style="background-color:#eee; border:1px solid #ccc;">

10 Ваш браузер не поддерживает Canvas

11 </canvas>

12 <script>

13 var canvas = [Link]("myCanvas"),

14 context = [Link]("2d");

15 [Link]();

16 [Link](30, 20, 100, 90);

17 [Link]();

18 [Link] = "red";

19 [Link]();
 517

20 </script>

21 </body>

22 </html>

Стоит отметить, что такой же прямоугольник мы могли бы создать из линий:

1 var canvas = [Link]("myCanvas"),

2 context = [Link]("2d");

3 [Link]();

4 [Link](30, 20);

5 [Link](130, 20);

6 [Link](130, 110);

7 [Link](30, 110);

8 [Link]();

9 [Link] = "red";

10 [Link]();

Метод fill()

Метод fill() заполняет цветом все внутреннее пространство нарисованного пути:

1 var canvas = [Link]("myCanvas"),

 518

2 context = [Link]("2d");

3 [Link]();

4 [Link](30, 20, 100, 90);

5 [Link]();

6 [Link] = "red";

7 [Link] = "blue";

8 [Link]();

9 [Link]();

С помощью свойства fillStyle опять же можно задать цвет заполнения фигуры. В данном случае это синий цвет.

Метод clip()

Метод clip() позволяет вырезать из canvas определенную область, а все, что вне этой области, будет игнорироваться при
последующей отрисовке.

Для понимания этого метода сначала нарисуем два прямоугольника:

1 var canvas = [Link]("myCanvas"),

2 context = [Link]("2d");

3 // рисуем первый красный прямоугольник

4 [Link]();
 519

5 [Link](30, 20);

6 [Link](130, 20);

7 [Link](130, 110);

8 [Link](30, 110);

9 [Link]();

10 [Link] = "red";

11 [Link]();

12

13 // рисуем второй зеленый прямоугольник

14 [Link]();

15 [Link](10, 50, 180, 70);

16 [Link]();

17 [Link] = "green";

18 [Link]();

Теперь применим метод clip() для ограничения области рисования только первым прямоугольником:

1 var canvas = [Link]("myCanvas"),

2 context = [Link]("2d");

3 // рисуем первый красный прямоугольник

4 [Link]();
 520

5 [Link](30, 20);

6 [Link](130, 20);

7 [Link](130, 110);

8 [Link](30, 110);

9 [Link]();

10 [Link] = "red";

11 [Link]();

12

13 [Link]();

14

15 // рисуем второй зеленый прямоугольник

16 [Link]();

17 [Link](10, 50, 180, 70);

18 [Link]();

19 [Link] = "green";

20 [Link]();

Поскольку вызов метода clip() идет после первого прямоугольника, то из второго прямоугольника будет нарисована только та
часть, которая попадает в первый прямоугольник.

Метод arc()
 521

Метод arc() добавляет к пути участок окружности или арку. Он имеет следующее определение:

1 arc(x, y, radius, startAngle, endAngle, anticlockwise)

Здесь используются следующие параметры:

 x и y: x- и y-координаты, в которых начинается арка

 radius: радиус окружности, по которой создается арка

 startAngle и endAngle: начальный и конечный угол, которые усекают окржность до арки. В качестве единици измерения для
углов применяются радианы. Например, полная окружность - это 2π радиан. Если, к примеру, нам надо нарисовать полный
круг, то для параметра endAngle можно указать значение 2π. В JavaScript эту веричину можно получить с помощью
выражения [Link] * 2.

 anticlockwise: направление движения по окружности при отсечении ее части, ограниченной начальным и конечным углом.
При значении true направление против часовой стрелки, а при значении false - по часовой стрелке.

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Canvas в HTML5</title>

6 </head>

7 <body>

8 <canvas id="myCanvas" width="420" height="200"

 522

9 style="background-color:#eee; border:1px solid #ccc;">

10 Ваш браузер не поддерживает Canvas

11 </canvas>

12 <script>

13 var canvas = [Link]("myCanvas"),

14 context = [Link]("2d");

15 [Link] = "red";

16

17 [Link]();

18 [Link](20, 90);

19 [Link](20, 90, 50, 0, [Link]/2, false);

20 [Link]();

21 [Link]();

22

23 [Link]();

24 [Link](130, 90);

25 [Link](130, 90, 50, 0, [Link], false);

26 [Link]();

27 [Link]();

28

29 [Link]();
 523

30 [Link](240, 90);

31 [Link](240, 90, 50, 0, [Link] * 3 / 2, false);

32 [Link]();

33 [Link]();

34

35 [Link]();

36 [Link](350, 90, 50, 0, [Link]*2, false);

37 [Link]();

38 [Link]();

39

40 </script>

41 </body>

42 </html>

Последний параметр anticlockwise играет важную роль, так как определяет движение по окружности, и в случае изменения true на
false и наоборот, мы можем получить совершенно разные фигуры:

1 var canvas = [Link]("myCanvas"),

2 context = [Link]("2d");

3 [Link] = "red";

4
 524

5 [Link]();

6 [Link](80, 90);

7 [Link](80, 90, 50, 0, [Link]/2, false);

8 [Link]();

9 [Link]();

10

11 [Link]();

12 [Link](240, 90);

13 [Link](240, 90, 50, 0, [Link]/2, true);

14 [Link]();

15 [Link]();

Метод arcTo()

Метод arcTo() также рисует дугу. Он имеет следующее определение:

1 arcTo(x1, y1, x2, y2, radius)

Где x1 и y1 - координаты первой контрольной точки, x2 и y2 - координаты второй контрольной точки, а radius - радиус дуги.

1 var canvas = [Link]("myCanvas"),

2 context = [Link]("2d");
 525

3 [Link] = "red";

5 [Link]();

6 [Link](0, 150);

7 [Link](0, 0, 150, 0, 140)

8 [Link]();

9 [Link]();

Здесь мы перемещаемся вначале на точку (0, 150), и от этой точки до первой контрольной точки (0, 0) будет проходить первая
касательная. Далее от первой контрольной точки (0, 0) до второй (150, 0) будет проходить вторая касательная. Эти две
касательные оформляют дугу, а 140 служит радиусом окружности, на которой усекается дуга.

Метод quadraticCurveTo()

Метод quadraticCurveTo() создает квадратичную кривую. Он имеет следующее определение:

1 quadraticCurveTo(x1, y1, x2, y2)

Где x1 и y1 - координаты первой опорной точки, а x2 и y2 - координаты второй опорной точки.

1 var canvas = [Link]("myCanvas"),

2 context = [Link]("2d");

3 [Link] = "red";

4
 526

5 [Link]();

6 [Link](20, 90);

7 [Link](130, 0, 280, 90)

8 [Link]();

9 [Link]();

Метод bezierCurveTo(). Кривая Безье

Метод bezierCurveTo() рисует кривую Безье. Он имеет следующее определение:

1 bezierCurveTo(x1, y1, x2, y2, x3, y3)

Где x1 и y1 - координаты первой опорной точки, x2 и y2 - координаты второй опорной точки, а x3 и y3 - координаты третьей
опорной точки.

1 var canvas = [Link]("myCanvas"),

2 context = [Link]("2d");

3 [Link] = "red";

5 [Link]();

6 [Link](30, 100);

7 [Link](110, 0, 190, 200, 270, 100);

8 [Link]();
 527

9 [Link]();

Комплексные фигуры

Объединим несколько фигур вместе и нарисуем более сложную двухмерную сцену:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Canvas в HTML5</title>

6 </head>

7 <body>

8 <canvas id="myCanvas" width="350" height="250"

9 style="background-color:#eee; border: 1px solid #ccc;

margin:10px;">
10
Ваш браузер не поддерживает Canvas
11
</canvas>
12
<script>
13
var canvas = [Link]("myCanvas");
14
if ([Link]) {
15
var ctx = [Link]("2d");
 528

16 [Link]();

17 [Link]();

18 [Link] = "yellow";

19 [Link]();

20 [Link](160, 130, 100, 0, 2 * [Link]);

21 [Link]();

22

23 // рот

24 [Link]();

25 [Link](100, 160);

26 [Link](160, 250, 220, 160);

27 [Link]();

28 [Link] = "red";

29 [Link]();

30 [Link] = 2;

31 [Link] = "black";

32 [Link]();

33

34 // зубы

35 [Link] = "#FFFFFF";

36 [Link](140, 160, 15, 15);

 529

37 [Link](170, 160, 15, 15);

38

39 //глаза

40 [Link]();

41 [Link](130, 90, 20, 0, 2 * [Link]);

42 [Link] = "#333333";

43 [Link]();

44 [Link]();

45

46 [Link]();

47 [Link](190, 90, 20, 0, 2 * [Link]);

48 [Link] = "#333333";

49 [Link]();

50 [Link]();

51

52 }

53 </script>

54 </body>

55 </html>

Изображения на canvas
 530

Последнее обновление: 02.05.2016

Ранее уже рассматривалась установка изображений в качестве фона в прямоугольниках, но мы также может отдельно выводить
изображения на canvas. Для этого применяется метод drawImage():

1 [Link](image, x, y)

Здесь параметр image передает выводимое изображение, а x и y - координаты верхнего левого угла изображения. Например:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Canvas в HTML5</title>

6 </head>

7 <body>

8 <canvas id="myCanvas" width="300" height="200"

9 style="background-color:#eee; border:1px solid #ccc;">

 531

10 Ваш браузер не поддерживает Canvas

11 </canvas>

12 <script>

13 var canvas = [Link]("myCanvas"),

14 context = [Link]("2d");

15

16 var img = new Image();

17 [Link] = "[Link]";

18 [Link] = function() {

19

20 [Link](img, 0, 0);

21 };

22 </script>

23 </body>

24 </html>

Опять же при выводе изображения нам надо быть уверенными, что изображение уже загружено браузером и готово к
использованию, поэтому метод отрисовки изображения помещается в обработчик загрузки изображения [Link].

Другая версия метода позволяет дополнительно задать ширину и высоту выводимого изображения:

1 var canvas = [Link]("myCanvas"),

 532

2 context = [Link]("2d");

4 var img = new Image();

5 [Link] = "[Link]";

6 [Link] = function() {

8 [Link](img, 20, 40, 110, 90);

10 [Link](img, 160, 40, 110, 90);

11 };

Метод drawImage() также имеет еще и третью форму:

1 drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

Где параметры sx и sy представляют координаты на изображении, с которого начиется обрезка изображения, а

параметры sWidth и sHeight представляют соответственно ширину и высоту выреза относительно координат sx и sy.

Параметры dx и dy указывают координаты отрисовки обрезанного изображения на canvas, а dWidth и dHeight указывают
соответственно на ширину и высоту изображения на canvas.

1 <!DOCTYPE html>

2 <html>
 533

3 <head>

4 <meta charset="utf-8">

5 <title>Canvas в HTML5</title>

6 </head>

7 <body>

8 <canvas id="myCanvas" width="300" height="250"

9 style="background-color:#eee; border:1px solid #ccc;">

10 Ваш браузер не поддерживает Canvas

11 </canvas>

12 <script>

13 var canvas = [Link]("myCanvas"),

14 context = [Link]("2d");

15

16 var img = new Image();

17 [Link] = "[Link]";

18 [Link] = function() {

19

20 [Link](img, 64, 48, 128, 96, 20, 30, 256,

192);
21
};
22
</script>
23
 534

</body>
24
</html>

Захват изображений с других элементов

Одной из замечательных функциональностей элемента canvas является возможность захвата изображения с другого элемента,
например, элемента video или другого элемента canvas. Например:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Canvas в HTML5</title>

6 </head>

7 <body>

8 <video id="myVideo" src="cats.mp4" width="300" height="200" controls

></video>
9

10
<canvas id="myCanvas" width="300" height="200"
11
style="background-color:#eee; border:1px solid #ccc;">
12
Ваш браузер не поддерживает Canvas
13
</canvas>
14
 535

<div>
15
<button id="snap">Сделать снимок</button>
16
</div>
17
<script>
18
var canvas = [Link]("myCanvas"),
19
context = [Link]("2d");
20
var video = [Link]("myVideo");
21
[Link]("snap").onclick = function(e) {
22
[Link](video, 0, 0, 300, 200);
23
}
24
</script>
25
</body>
26
</html>

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

Добавление теней
Последнее обновление: 02.05.2016


 536

Элемент canvas поддерживает добавление теней к нарисованным объектам. Для создания теней применяются следующие
свойства:

 shadowOffsetX: горизонтальное смещение в пикселях справа (или слева при отрицательном значении)

 shadowOffsetY: вертикальное смещение в пикселях снизу (или сверху при отрицательном значении)

 shadowBlur: число пикселей ля установки размыти тени

 shadowColor: цвет тени

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Canvas в HTML5</title>

6 </head>

7 <body>

8 <canvas id="myCanvas" width="300" height="200"

9 style="background-color:#eee; border:1px solid #ccc;">

10 Ваш браузер не поддерживает Canvas

 537

11 </canvas>

12 <script>

13 var canvas = [Link]("myCanvas"),

14 context = [Link]("2d");

15

16 [Link]="16px Verdana";

17 [Link] = "#222";

18 [Link] = 3;

19 [Link] = 3;

20 [Link] = 3;

21 [Link] = "#AAA";

22 [Link]("Тени в HTML5", 80, 30);

23

24 var img = new Image();

25 [Link] = "[Link]";

26 [Link] = function() {

27

28 [Link] = 8;

29 [Link] = 8;

30 [Link] = 5;

31 [Link] = "#333";
 538

32 [Link](img, 80, 70, 128, 96);

33 };

34 </script>

35 </body>

36 </html>

Редактирование пикселей
Последнее обновление: 02.05.2016

HTML5 предоставляет встроенную функциональность для редактирования изображения и установки значения конкретных пикселей
на canvas. В частности, мы можем изменить цветовые значения пикселя, его прозрачность. Для этого предназначены такие методы,
как getImageData(), putImageData() и createImageData().

Метод getImageData()

Метод getImageData() позволяет извлечь из canvas какую-либо часть изображеня. Он имеет следующее определение:

1 getImageData(sx, sy, sw, sh);

 539

Здесь sx и sy - координаты верхнего левого угла области, из которой извлекаются данные на canvas, а sw и sh - соотвественно
ширина и высота этой области.

Данные из определенной этими параметрами области извлекаются в виде объекта ImageData, который потом используется для
манипуляции пикселями.

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

1 var canvas = [Link]("myCanvas"),

2 context = [Link]("2d");

4 var img = new Image();

5 [Link] = "[Link]";

6 [Link] = function() {

8 [Link](img, 0, 0);

9 var imageData = [Link](0,0, 100, 100);

10 };

Все данные об изображении в объекте ImageData хранятся в массиве data. Каждый пиксель на canvas характеризуется четырьмя
компонентами в формате RGBA: красной, зеленой, синей компонентой, которые устанавливают цвет, и альфа-компонентой, которая
устанавливает прозрачность. Каждая компонента принимает значени от 0 до 255. И чтобы получить значения цвета для самого
первого пикселя в ImageData, нам надо последовательно получить четыре значения из массива data:

1 var canvas = [Link]("myCanvas"),

 540

2 context = [Link]("2d");

4 var img = new Image();

5 [Link] = "[Link]";

6 [Link] = function() {

8 [Link](img, 0, 0);

9 var imageData = [Link](0,0, 100, 100);

10 var red = [Link][0]; // компонента красного цвета

11 var green = [Link][1]; // компонента зеленого цвета

12 var blue = [Link][2]; // компонента синего цвета

13 var alpha = [Link][3]; // компонента прозрачности

14 };

В данном случае мы получаем информацию о самом первом пикселе, который находится в самом верхнем левом углу, то есть имеет
координаты x=0 и y=0.

Чтобы получить информацию о втором пикселе, который имеет координаты x=1 и y=0, нам надо получить следующие четыре
значения из массива data:

1 [Link][4]; // компонента красного цвета

2 [Link][5]; // компонента зеленого цвета

3 [Link][6]; // компонента синего цвета

 541

4 [Link][7]; // компонента прозрачности

И так далее мы можем получить информацию обо всех пикселях.

Метод putImageData()

Метод putImageData() устанавливает на canvas новые данные. Этот метод имеет следеющее определение:

1 putImageData(imageData, dx, dy)

Параметры dx и dy указывают координаты верхнего левого угла условного прямоугольника imageData, в который размещается на
canvas.

Используем методы getImageData() и putImageData() для преобразования изображения:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Canvas в HTML5</title>

6 </head>

7 <body>

8 <canvas id="myCanvas" width="530" height="200"

9 style="background-color:#eee; border:1px solid #ccc;">

10 Ваш браузер не поддерживает Canvas

 542

11 </canvas>

12 <script>

13 var canvas = [Link]("myCanvas"),

14 context = [Link]("2d");

15

16 var img = new Image();

17 [Link] = "[Link]";

18 [Link] = function() {

19

20 [Link](img, 0, 0);

21 var imageData = [Link](0,0, [Link], [Link]);

22 var red, green, blue, greyscale;

23

24 for (var i = 0; i < [Link]; i += 4) {

25 red = [Link][i]; // получаем компоненту красного цвета

26 green = [Link][i + 1]; // получаем компоненту зеленого

цвета
27
blue = [Link][i + 2]; // получаем компоненту синего
28
цвета
29
grayscale = red * 0.3 + green * 0.59 + blue * 0.11; // получаем
30 серый фон

31 [Link][i] = grayscale; // установка серого цвета

 543

[Link][i + 1] = grayscale;

32 [Link][i + 2] = grayscale;

33 }

34

35 [Link](imageData, [Link] + 10, 0);

36 };

37 </script>

38 </body>

</html>

Ключевым участком кода здесь является цикл, в котором и происходит преобразование изображения в серое:

1 var red, green, blue, greyscale;

3 for (var i = 0; i < [Link]; i += 4) {

5 red = [Link][i]; // получаем компоненту красного цвета

6 green = [Link][i + 1]; // получаем компоненту зеленого цвета

7 blue = [Link][i + 2]; // получаем компоненту синего цвета

9 grayscale = red * 0.3 + green * 0.59 + blue * 0.11; // получаем серый

 544

фон
10

11
[Link][i] = grayscale; // установка серого цвета
12
[Link][i + 1] = grayscale;
13
[Link][i + 2] = grayscale;
14
}

Здесь мы перемещаемся по всему массиву [Link], обрабатывая за раз четыре элемента, которые и представляют
отдельный пиксель. При этом учитываются только три элемента, поскольку компонента прозрачности в данном случае нас не
интересует.

Сначала мы получаем компоненты RGB. Затем, применяя математическую формулу, преобразуем значения RGB в серый цвет. И в
конце серый цвет устанавливается для элементов пикселя.

Вопросы безопасности

Если мы попробуем просто кинуть файл веб-страницы с выше описанным кодом в браузер Google Chrome или попытаемся открыть
файл по двойному клику, то Google Chrome не отобразит нам преобразованное серое изображение в связи с политикой браузера.
Хотя в других браузерах, как Firefox или Microsoft Edge все может быть нормально. Дело в том, что в Google Chrome не позволяет
манипулировать изображением сайта из одного домена пользователю из другого домена. По сути, когда мы загружаем файл по
протоколу file:// (просто кинув файл в браузер или по двойному клику), браузер рассматривает пользователя и открытую веб-
страницу как разные домены.

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

Метод createImageData()
 545

Метод createImageData() создает новый объект ImageData, который затем может использоваться на canvas. Метод
createImageData() имеет две формы:

1 createImageData(width, height);

2 createImageData(imagedata);

Первая форма принимает параметры width и height, которые устанавливают соотвественно ширину и высоту создаваемого объекта
ImageData.

Вторая форма принимает в качестве параметра другой объект ImageData, по которому будет создан новый объект ImageData.

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

1 var canvas = [Link]("myCanvas"),

2 context = [Link]("2d");

4 var img = new Image();

5 [Link] = "[Link]";

6 [Link] = function() {

8 [Link](img, 0, 0);

9 var imageData = [Link](0,0, [Link], [Link]);

10 var newImageData = [Link](imageData);

11
 546

12 for (var i = 0; i < [Link]; i++) {

13

14 [Link][i] = [Link][i];

15 // если это альфа-компонента

16 if( (i+1)%4===0){

17

18 [Link][i] = 120;

19 }

20 }

21 [Link](newImageData, [Link] + 10, 0);

22 };

В данном случае создаем новый объект newImageData, в этот объект копируем все данные из текущего imageData, который
представляет изображение на canvas. При этом при копировании значения альфа-компоненты, которая отвечает за прозрачность,
устанавливаем ей значение 120, то есть делаем пиксель полупрозрачным.

Трансформации
Последнее обновление: 31.10.2016


 547

Элемент canvas поддерживает трансформации - перемещение, вращение, масштабирование.

Перемещение

Перемещение осуществляется с помощью метода translate():

1 translate(x, y)

Первый параметр указывает на смещение по оси X, а второй параметр - по оси Y.

1 var canvas = [Link]("myCanvas"),

2 context = [Link]("2d");

4 [Link] = "blue";

5 [Link](50, 50, 100, 100);

7 [Link](100, 50); // смещение на 100 пикселей вправо и 50px вниз

9 [Link] = 0.5;

10 [Link] = "red";

11 [Link](50, 50, 100, 100);

Здесь на одной позиции отрисовываются два равных прямоугольника: синий и красный. Однако к красному прямоугольнику
применяется трансформация перемещения:
 548

Вращение

Для поворота фигур на canvase применяется метод rotate():

1 rotate(angle)

В этот метод в качестве параметра передается угол поворота в радианах относительно точки с координатами (0, 0).

1 var canvas = [Link]("myCanvas"),

2 context = [Link]("2d");

4 [Link] = "blue";

5 [Link](50, 50, 100, 100);

7 [Link](.52); // поворот на 0.52 радиан или 30 градусов

9 [Link] = 0.5;

10 [Link] = "red";

11 [Link](50, 50, 100, 100);

Масштабирование
 549

Для масштабирования фигур применяется метод scale():

1 scale(xScale, yScale)

Параметр xScale указывает на масштабирование по оси X, а yScale - по оси Y.

var canvas = [Link]("myCanvas"),

1
context = [Link]("2d");
2

3
[Link] = "blue";
4
[Link](30, 30, 100, 100);
5

6
[Link](1.5, 1.3); // растяжение по ширине в 1.5 раза и сжатие по высоте в
7
1.3 раза
8

9
[Link] = 0.5;
10
[Link] = "red";
11
[Link](50, 30, 100, 100);

Матрица преобразований

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

1 [Link](1.5, 1.3);
 550

2
[Link](100, 150);
3
[Link](0.34);

Но контекст элемента canvas также предоставляет метод transform(), который позволяет задать матрицу преобразования:

1 transform(a, b, c, d, e, f)

Все параметры этого метода последовательно представляют элементы матрицы преобразования:

 a: масштабирование по оси X

 b: поворот вокруг оси X

 c: поворот вокруг оси Y

 d: масштабирование по оси Y

 e: горизонтальное смещение

 f: вертикальное смещение

Например:

1 var canvas = [Link]("myCanvas"),

2 context = [Link]("2d");

4 [Link] = "blue";
 551

5 [Link](100, 50, 100, 100);

7 [Link](

8 [Link]([Link]/6), [Link]([Link]/6), -1 * [Link]([Link]/6),

9 [Link]([Link]/6), 0, 0);

10

11 [Link] = 0.5;

12 [Link] = "red";

13 [Link](100, 50, 100, 100);

Замена трансформации

При последовательном применении разных трансформаций они просто последовательно применяются к фигурам. Однако может
возникнуть ситуация, когда надо применить трансформацию не вместе со другими, а вместо других, то есть заменить
трансформацию. Для этого применяется метод setTransform():

1 setTransform(a, b, c, d, e, f)

Его параметры представляют матрицу преобразования, и в целом его применение аналогино применению метода transform().
Например:

1 var canvas = [Link]("myCanvas"),

2 context = [Link]("2d");
 552

3 var k = 0;

4 for (var x = 0; x < 30; x++) {

5 k = [Link](255 / 34 * x);

6 [Link] = "rgb(" + k + "," + k + "," + k + ")";

7 [Link](50, 50, 200, 100);

8 [Link](1, 0, 0, 1, x, x);

9 }

Сброс трансформаций

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

1 var canvas = [Link]("myCanvas"),

2 context = [Link]("2d");

4 [Link] = "blue";

5 [Link](50, 50, 100, 100);

7 [Link](100, 50);

8 // дальше применяется трансформация

 553

9 [Link] = 0.5;

10 [Link] = "red";

11 [Link](50, 50, 100, 100);

12

13 [Link]();

14 // трансформация больше не применяется

15 [Link] = "green";

16 [Link](0, 0, 100, 100);

Рисование мышью
Последнее обновление: 31.10.2016

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

Для этого определим следующую страницу:

1 <!DOCTYPE html>
 554

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Canvas в HTML5</title>

6 </head>

7 <body>

8 <canvas id="myCanvas" width="350" height="250"

9 style="background-color:#eee; border: 1px solid #ccc;

margin:10px;">
10
Ваш браузер не поддерживает Canvas
11
</canvas>
12
<script>
13
var canvas = [Link]("myCanvas"),
14
context = [Link]("2d"),
15
w = [Link],
16
h=[Link];
17

18
var mouse = { x:0, y:0};
19
var draw = false;
20

21
[Link]("mousedown", function(e){
22
 555

23

24 mouse.x = [Link] - [Link];

25 mouse.y = [Link] - [Link];

26 draw = true;

27 [Link]();

28 [Link](mouse.x, mouse.y);

29 });

30 [Link]("mousemove", function(e){

31

32 if(draw==true){

33

34 mouse.x = [Link] - [Link];

35 mouse.y = [Link] - [Link];

36 [Link](mouse.x, mouse.y);

37 [Link]();

38 }

39 });

40 [Link]("mouseup", function(e){

41

42 mouse.x = [Link] - [Link];

43 mouse.y = [Link] - [Link];

 556

[Link](mouse.x, mouse.y);
44
[Link]();
45
[Link]();
46
draw = false;
47
});
48
</script>
49
</body>
50
</html>

Для обработки движения мыши для элемента canvas определены три обработчика - нажатия мыши, перемещения и отпускания
мыши. При нажатии мыши мы устанавливаем переменную draw равным true. То есть идет рисование. Также при нажатии мы
фиксируем точку, с которой будет идти рисование.

При перемещении мыши получаем точку, на которую переместился указатель, и рисуем линию. При отпускании указателя
закрываем графический путь методом [Link]() и сбрасываем переменную draw в false.

Flexbox
Что такое Flexbox. Flex Container
Последнее обновление: 18.04.2017


 557

Flexbox - это общее название для модуля Flexible Box Layout, который имеется в CSS3. Данный модуль определяет особый режим
компоновки/верстки пользовательского интерфейса, который называется flex layout. В этом плане Flexbox предоставляет иной
подход к созданию пользовательского интерфейса, который отличается от табличной или блочной верстки. Развернутое описание
стандарта по модулю можно посмотреть в спецификации.

Благодаря Flexbox проще создавать сложные, комплексные интерфейсы, где мы с легкостью можем переопределять направление и
выравнивание элементов, создавать адаптивные табличные представления. Кроме того, Flexbox довольно прост в использовании.
Единственная проблема, которая может возникнуть при его применении, - это кроссбраузерность. Например, в Internet Explorer
поддержка Flexbox и то частичная появилась только в последней версии - IE11. В то же время все современные браузеры, в том
числе Microsoft Edge, Opera, Google Chrome, Safari, Firefox, имеют полную поддержку данного модуля.

Основными составляющими компоновки flexbox являются flex-контейнер (flex container) и flex-элементы (flex items). Flex
container представляет некоторый элемент, внутри которого размещены flex-элементы.

Основные понятия

Прежде чем переходить к изучению верстки flexbox, стоит рассмотреть некоторые основные понятия.

Одно из ключевых понятий представляет main axis или центральная ось. Это условная ось во flex-контейнере, вдоль которой
позиционируются flex-элементы.

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

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

Кроме основной оси существует также поперечная ось или cross axis. Она перпендикулярна основной. При расположении
элементов в виде строки cross axis направлена сверху вниз, а при расположении в виде столбца она направлена слева направо.
Начало поперечной оси обозначается как cross start, а ее конец - как cross end. Расстояние между ними описывается
термином cross size.

То есть, если элементы располагаются в строку, то main size будет представлять ширину контейнера или элементов, а cross size - их
высоту. Если же элементы располагаются в столбик, то, наоборот, main size представляет высоту контейнера и элементов, а cross
size - их ширину.

Создание flex-контейнера

Для создания flex-контейнера необходимо присвоить его стилевому свойству display одно из двух значений: flex или inline-flex.

Создадим простейшую веб-страницу, которая применяет flexbox:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Flexbox в CSS3</title>

6 <style>

7 .flex-container {

8 display: flex;

9 }
 559

10 .flex-item {

11 text-align:center;

12 font-size: 1.1em;

13 padding: 1.5em;

14 color: white;

15 }

16 .color1 {background-color: #675BA7;}

17 .color2 {background-color: #9BC850;}

18 .color3 {background-color: #A62E5C;}

19 </style>

20 </head>

21 <body>

22 <div class="flex-container">

23 <div class="flex-item color1">Flex Item 1</div>

24 <div class="flex-item color2">Flex Item 2</div>

25 <div class="flex-item color3">Flex Item 3</div>

26 </div>

27 </body>

28 </html>

Для контейнера flex-container установлено свойство display:flex. В нем располагается три flex-элемента.
 560

Если значение flex определяет контейнер как блочный элемент, то значение inline-flex определяет элемент как строчный
(inline). Рассмотрим оба способа на примере:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Flexbox в CSS3</title>

6 <style>

7 .flex-container {

8 display: flex;

9 border:2px solid #ccc;

10 }

11 .inline-flex-container {

12 display: inline-flex;

13 border:2px solid #ccc;

14 margin-top:10px;

15 }

16 .flex-item {

17 text-align:center;
 561

18 font-size: 1.1em;

19 padding: 1.5em;

20 color: white;

21 }

22 .color1 {background-color: #675BA7;}

23 .color2 {background-color: #9BC850;}

24 .color3 {background-color: #A62E5C;}

25 </style>

26 </head>

27 <body>

28 <div class="flex-container">

29 <div class="flex-item color1">Flex Item 1</div>

30 <div class="flex-item color2">Flex Item 2</div>

31 <div class="flex-item color3">Flex Item 3</div>

32 </div>

33

34 <div class="inline-flex-container">

35 <div class="flex-item color1">Flex Item 1</div>

36 <div class="flex-item color2">Flex Item 2</div>

37 <div class="flex-item color3">Flex Item 3</div>

38 </div>
 562

39 </body>

40 </html>

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

Направление flex-direction
Последнее обновление: 18.04.2017

Flex-элементы во flex-контейнере могут иметь определенное направление, а именно они могут располагаться в виде строк или в
виде столбцов. Для управления направлением элементов CSS3 предоставляет свойство flex-direction. Оно определяет направление
элементов и может принимать следующие значения:

 row: значение по умолчанию, при котором элементы располагаются в виде строки слева направо

 row-reverse: элементы также располагаются в виде стоки только в обратном порядке справа налево

 column: элементы располагаются в столбик сверху вниз

 column-reverse: элементы располагаются в столбик в обратном порядке снизу вверх

 563

Например, расположение в виде строки:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Flexbox в CSS3</title>

6 <style>

7 .flex-container {

8 display: flex;

9 border:1px solid #ccc;

10 }

11 .row {

12 flex-direction: row;

13 }

14 .row-reverse {

15 flex-direction: row-reverse;

16 }

17 .flex-item {

18 text-align:center;

19 font-size: 1.1em;
 564

20 padding: 1.5em;

21 color: white;

22 }

23 .color1 {background-color: #675BA7;}

24 .color2 {background-color: #9BC850;}

25 .color3 {background-color: #A62E5C;}

26 </style>

27 </head>

28 <body>

29 <h3>Row</h3>

30 <div class="flex-container row">

31 <div class="flex-item color1">Flex Item 1</div>

32 <div class="flex-item color2">Flex Item 2</div>

33 <div class="flex-item color3">Flex Item 3</div>

34 </div>

35

36 <h3>Row-reverse</h3>

37 <div class="flex-container row-reverse">

38 <div class="flex-item color1">Flex Item 1</div>

39 <div class="flex-item color2">Flex Item 2</div>

40 <div class="flex-item color3">Flex Item 3</div>

 565

41 </div>

42 </body>

43 </html>

Аналогично работает расположение в виде столбца:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Flexbox в CSS3</title>

6 <style>

7 .flex-container {

8 display: flex;

9 border:1px solid #ccc;

10 }

11 .column {

12 flex-direction: column;

13 }

14 .column-reverse {

15 flex-direction: column-reverse;
 566

16 }

17 .flex-item {

18 text-align:center;

19 font-size: 1em;

20 padding: 1.2em;

21 color: white;

22 }

23 .color1 {background-color: #675BA7;}

24 .color2 {background-color: #9BC850;}

25 .color3 {background-color: #A62E5C;}

26 </style>

27 </head>

28 <body>

29 <h3>Column</h3>

30 <div class="flex-container column">

31 <div class="flex-item color1">Flex Item 1</div>

32 <div class="flex-item color2">Flex Item 2</div>

33 <div class="flex-item color3">Flex Item 3</div>

34 </div>

35

36 <h3>Column-reverse</h3>
 567

37 <div class="flex-container column-reverse">

38 <div class="flex-item color1">Flex Item 1</div>

39 <div class="flex-item color2">Flex Item 2</div>

40 <div class="flex-item color3">Flex Item 3</div>

41 </div>

42 </body>

43 </html>

flex-wrap
Последнее обновление: 18.04.2017

Свойство flex-wrap определяет, будет ли flex-контейнер несколько рядов элементов (строк или столбцов) в случае если его
размеры недостаточны, чтобы вместить в один ряд все элементы. Это свойство может принимать следующие значения:

 nowrap: значение по умолчанию, которое определяет flex-контейнер, где все элементы раполагаются в одну строку (при
расположении в виде строк) или один столбец (при расположении в столбик)
 568

 wrap: если элементы не помещаются во flex-контейнер, то создает дополнительные ряды в контейнере для размещения
элементов. При расположении в виде строки содаются дополнительные строки, а при расположении в виде столбца
добавляются дополнительные столбцы

 wrap-reverse: то же самое, что и значение wrap, только элементы располагаются в обратном порядке

Например, возьмем значение по умолчанию nowrap:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Flexbox в CSS3</title>

6 <style>

7 .flex-container {

8 display: flex;

9 border: solid 0.25em #000;

10 width: 60%;

11 height:8.25em;

12 flex-wrap:nowrap;

13 }

14 .row {

15 flex-direction: row;
 569

16 }

17 .row-reverse {

18 flex-direction: row-reverse;

19 }

20 .flex-item {

21 text-align:center;

22 font-size: 1em;

23 padding: 1.5em;

24 color: white;

25 opacity: 0.8;

26 }

27 .color1 {background-color: #675BA7;}

28 .color2 {background-color: #9BC850;}

29 .color3 {background-color: #A62E5C;}

30 .color4 {background-color: #2A9FBC;}

31 .color5 {background-color: #F15B2A;}

32 </style>

33 </head>

34 <body>

35 <h3>Row</h3>

36 <div class="flex-container row">

 570

37 <div class="flex-item color1">Flex Item 1</div>

38 <div class="flex-item color2">Flex Item 2</div>

39 <div class="flex-item color3">Flex Item 3</div>

40 <div class="flex-item color4">Flex Item 4</div>

41 <div class="flex-item color5">Flex Item 5</div>

42 </div>

43

44 <h3>Row-reverse</h3>

45 <div class="flex-container row-reverse">

46 <div class="flex-item color1">Flex Item 1</div>

47 <div class="flex-item color2">Flex Item 2</div>

48 <div class="flex-item color3">Flex Item 3</div>

49 <div class="flex-item color4">Flex Item 4</div>

50 <div class="flex-item color5">Flex Item 5</div>

51 </div>

52 </body>

53 </html>

Здесь в каждом из flex-контейнеров по пять элементов, однако ширина контейнера может вмещать не все элементы, тогда они
уходят за границу контейнера:
 571

При установке значения wrap во flex-контейнере добавляются дополнительные ряды для помещения всех элементов в контейнере.
Так, изменим значение свойства flex-wrap в контейнере:

1 .flex-container {

2 display: flex;

3 border: solid 0.25em #000;

4 width: 60%;

5 height:8.25em;

7 flex-wrap:wrap;

8 }

В этом случае появится дополнительная стока:

При расположении в виде столбца контейнер будет создавать дополнительные столбцы:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Flexbox в CSS3</title>

6 <style>
 572

8 .flex-container {

9 display: flex;

10 border: solid 0.25em #000;

11 width: 60%;

12 height:8.25em;

13 flex-wrap:wrap;

14 }

15 .column {

16 flex-direction: column;

17 }

18 .column-reverse {

19 flex-direction: column-reverse;

20 }

21 .flex-item {

22 text-align:center;

23 font-size: 1em;

24 padding: 1.5em;

25 color: white;

26 opacity: 0.8;

27 }
 573

28 .color1 {background-color: #675BA7;}

29 .color2 {background-color: #9BC850;}

30 .color3 {background-color: #A62E5C;}

31 .color4 {background-color: #2A9FBC;}

32 .color5 {background-color: #F15B2A;}

33 </style>

34 </head>

35 <body>

36 <h3>Column</h3>

37 <div class="flex-container column">

38 <div class="flex-item color1">Flex Item 1</div>

39 <div class="flex-item color2">Flex Item 2</div>

40 <div class="flex-item color3">Flex Item 3</div>

41 <div class="flex-item color4">Flex Item 4</div>

42 <div class="flex-item color5">Flex Item 5</div>

43 </div>

44

45 <h3>Column-reverse</h3>

46 <div class="flex-container column-reverse">

47 <div class="flex-item color1">Flex Item 1</div>

48 <div class="flex-item color2">Flex Item 2</div>

 574

49 <div class="flex-item color3">Flex Item 3</div>

50 <div class="flex-item color4">Flex Item 4</div>

51 <div class="flex-item color5">Flex Item 5</div>

52 </div>

53 </body>

54 </html>

flex-flow. Порядок элементов

Последнее обновление: 18.04.2017

flex-flow

Свойство flex-flow позволяет установить значения сразу для обоих свойств flex-direction и flex-wrap. Оно имеет следующий
формальный синтаксис:

1 flex-flow: [flex-direction] [flex-wrap]

Причем второе свойство - flex-wrap можно в принципе опустить, тогда для него будет использоваться значение по умолчанию
- nowrap.
 575

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Flexbox в CSS3</title>

6 <style>

8 .flex-container {

9 display: flex;

10 border: solid 0.25em #000;

11 height:8.25em;

12 flex-flow: row wrap;

13 }

14 .flex-item {

15 text-align:center;

16 font-size: 1em;

17 padding: 1.5em;

18 color: white;

19 opacity: 0.8;

20 }

21 .color1 {background-color: #675BA7;}

 576

22 .color2 {background-color: #9BC850;}

23 .color3 {background-color: #A62E5C;}

24 .color4 {background-color: #2A9FBC;}

25 .color5 {background-color: #F15B2A;}

26 </style>

27 </head>

28 <body>

29 <div class="flex-container">

30 <div class="flex-item color1">Flex Item 1</div>

31 <div class="flex-item color2">Flex Item 2</div>

32 <div class="flex-item color3">Flex Item 3</div>

33 <div class="flex-item color4">Flex Item 4</div>

34 <div class="flex-item color5">Flex Item 5</div>

35 </div>

36 </body>

37 </html>

Свойство order

Свойство order позволяет установить группу для flex-элемента, позволяя тем самым переопределить его позицию внутри flex-
контейнера. В качестве значения свойство принимает числовой порядок группы. К одной группе может принадлежать несколько
элементов.
 577

Например, элементы в группе 0 располагаются перед элементами с группой 1, а элементы с группой 1 располагаются перед
элементами с группой 2 и так далее.

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Flexbox в CSS3</title>

6 <style>

8 .flex-container {

9 display: flex;

10 flex-flow: row wrap;

11 }

12 .flex-item {

13 text-align:center;

14 font-size: 1em;

15 padding: 1.5em;

16 color: white;

17 opacity: 0.8;

18 }

19 .group1{
 578

20 order:-1;

21 }

22 .group2{

23 order:1;

24 }

25 .color1 {background-color: #675BA7;}

26 .color2 {background-color: #9BC850;}

27 .color3 {background-color: #A62E5C;}

28 .color4 {background-color: #2A9FBC;}

29 .color5 {background-color: #F15B2A;}

30 </style>

31 </head>

32 <body>

33 <div class="flex-container">

34 <div class="flex-item color1">Flex Item 1</div>

35 <div class="flex-item color2 group2">Flex Item 2</div>

36 <div class="flex-item color3 group2">Flex Item 3</div>

37 <div class="flex-item color4">Flex Item 4</div>

38 <div class="flex-item color5 group1">Flex Item 5</div>

39 </div>

40 </html>
 579

В данном случае определены 3 группы. Первый отображается последний элемент, так как он имеет группу -1:

По умолчанию если у элементов явным образом не указано свойство order, то оно имеет значение 0. И последними в данном случае
отображаются второй и третий элемент, так как у них свойство order равно 1.

Выравнивание элементов. justify-content

Последнее обновление: 18.04.2017

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

 flex-элементы не используют все пространство flex-контейнера

 flex-элементам требуется большее пространство, чем доступно во flex-контейнере. В этом случае элементы выходят за
пределы контейнера.

Для управления этими ситуациями мы можем применять свойство justify-content. Оно выравнивает элементы вдоль основной оси -
main axis (при расположении в виде строки по горизонтали, при расположении в виде столбца - по вертикали) и принимает
следующие значения:
 580

 flex-start: значение по умолчанию, при котором первый элемент выравнивается по левому краю контейнера(при
расположении в виде строки) или по верху (при расположении в виде столбца), за ним располагается второй элемент и так
далее.

 flex-end: последний элемент выравнивается по правому краю (при расположении в виде строки) или по низу (при
расположении в виде столбца) контейнера, за ним выравнивается предпоследний элемент и так далее

 center: элементы выравниваются по центру

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

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

Выравнивание для расположения элементов в виде строки:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Flexbox в CSS3</title>

6 <style>
 581

8 .flex-container {

9 display: flex;

10 border:1px #ccc solid;

11 }

12 .flex-end{

13 justify-content: flex-end;

14 }

15 .center{

16 justify-content: center;

17 }

18 .space-between{

19 justify-content: space-between;

20 }

21 .space-around{

22 justify-content: space-around;

23 }

24 .flex-item {

25 text-align:center;

26 font-size: 1em;

27 padding: 1.5em;
 582

28 color: white;

29 }

30 .color1 {background-color: #675BA7;}

31 .color2 {background-color: #9BC850;}

32 .color3 {background-color: #A62E5C;}

33 .color4 {background-color: #2A9FBC;}

34 .color5 {background-color: #F15B2A;}

35 </style>

36 </head>

37 <body>

38 <h3>Flex-end</h3>

39 <div class="flex-container flex-end">

40 <div class="flex-item color1">Flex Item 1</div>

41 <div class="flex-item color2">Flex Item 2</div>

42 <div class="flex-item color3">Flex Item 3</div>

43 <div class="flex-item color4">Flex Item 4</div>

44 </div>

45 <h3>Center</h3>

46 <div class="flex-container center">

47 <div class="flex-item color1">Flex Item 1</div>

48 <div class="flex-item color2">Flex Item 2</div>

 583

49 <div class="flex-item color3">Flex Item 3</div>

50 <div class="flex-item color4">Flex Item 4</div>

51 </div>

52 <h3>Space-between</h3>

53 <div class="flex-container space-between">

54 <div class="flex-item color1">Flex Item 1</div>

55 <div class="flex-item color2">Flex Item 2</div>

56 <div class="flex-item color3">Flex Item 3</div>

57 <div class="flex-item color4">Flex Item 4</div>

58 </div>

59 <h3>Space-around</h3>

60 <div class="flex-container space-around">

61 <div class="flex-item color1">Flex Item 1</div>

62 <div class="flex-item color2">Flex Item 2</div>

63 <div class="flex-item color3">Flex Item 3</div>

64 <div class="flex-item color4">Flex Item 4</div>

65 </div>

66 </body>

67 </html>
 584

Выравнивание при расположении в виде столбцов:

Выравнивание элементов. align-items и align-self

Последнее обновление: 18.04.2017

Свойство align-items

Свойство align-items также выравнивает элементы, но уже по поперечной оси (cross axis) (при расположении в виде строки по
вертикали, при расположении в виде столбца - по горизонтали). Это свойство может принимать следующие значения:

 stretch: значение по умолчанию, при котором flex-элементы растягиваются по всей высоте (при расположении в строку) или
по всей ширине (при расположении в столбик) flex-контейнера

 flex-start: элементы выравниваются по верхнему краю (при расположении в строку) или по левому краю (при расположении
в столбик) flex-контейнера

 flex-end: элементы выравниваются по нижнему краю (при расположении в строку) или по правому краю (при расположении
в столбик) flex-контейнера

 center: элементы выравниваются по центру flex-контейнера

 baseline: элементы выравниваются в соответствии со своей базовой линией

 585

Выравнивание при расположении в строку:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Flexbox в CSS3</title>

6 <style>

8 .flex-container {

9 display: flex;

10 border:1px #ccc solid;

11 height:5em;

12 }

13 .flex-start{

14 align-items: flex-start;

15 }

16 .flex-end{

17 align-items: flex-end;

18 }

19 .center{
 586

20 align-items: center;

21 }

22 .baseline{

23 align-items: baseline;

24 }

25 .flex-item {

26 text-align:center;

27 font-size: 1em;

28 padding: 1.2em;

29 color: white;

30

31 }

32 .largest-item{

33 padding-top:2em;

34 }

35 .color1 {background-color: #675BA7;}

36 .color2 {background-color: #9BC850;}

37 .color3 {background-color: #A62E5C;}

38 .color4 {background-color: #2A9FBC;}

39 </style>

40 </head>
 587

41 <body>

42 <h3>Flex-start</h3>

43 <div class="flex-container flex-start">

44 <div class="flex-item color1">Flex Item 1</div>

45 <div class="flex-item color2">Flex Item 2</div>

46 <div class="flex-item color3">Flex Item 3</div>

47 <div class="flex-item color4">Flex Item 4</div>

48 </div>

49 <h3>Flex-end</h3>

50 <div class="flex-container flex-end">

51 <div class="flex-item color1">Flex Item 1</div>

52 <div class="flex-item color2">Flex Item 2</div>

53 <div class="flex-item color3">Flex Item 3</div>

54 <div class="flex-item color4">Flex Item 4</div>

55 </div>

56 <h3>Center</h3>

57 <div class="flex-container center">

58 <div class="flex-item color1">Flex Item 1</div>

59 <div class="flex-item color2">Flex Item 2</div>

60 <div class="flex-item color3">Flex Item 3</div>

61 <div class="flex-item color4">Flex Item 4</div>

 588

62 </div>

63 <h3>Baseline</h3>

64 <div class="flex-container baseline">

65 <div class="flex-item color1">Flex Item 1</div>

66 <div class="flex-item color2 largest-item">Flex Item 2</div>

67 <div class="flex-item color3">Flex Item 3</div>

68 <div class="flex-item color4">Flex Item 4</div>

69 </div>

70 </html>

Аналогично свойство работает при расположении в столбик. Например, изменим стили flex-контейнера следующим образом:

1 .flex-container {

2 display: flex;

3 border:1px #ccc solid;

4 flex-direction:column;

5 width:12em;

6 }

Свойство align-self
 589

Свойство align-self позволяет переопределить значение свойства align-items для одного элемента. Оно может принимать все те
же значения плюс значение "auto":

 auto: значение по умолчанию, при котором элемент получает значение от свойства align-items, которое определено в flex-
контейнере. Если в контейнере такой стиль не определен, то применяется значение stretch.

 stretch

 flex-start

 flex-end

 center

 baseline

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Flexbox в CSS3</title>

6 <style>

7 .flex-container {

8 display: flex;

9 border:1px #ccc solid;

10 justify-content: space-between;
 590

11 align-items: stretch;

12 height:12em;

13 }

14 .flex-item {

15 text-align:center;

16 font-size: 1em;

17 padding: 1.2em;

18 color: white;

19 }

20 .item1 {background-color: #675BA7; align-self: center; }

21 .item2 {background-color: #9BC850; align-self: flex-start;}

22 .item3 {background-color: #A62E5C; align-self: flex-end;}

23 .item4 {background-color: #2A9FBC; align-self: center;}

24 </style>

25 </head>

26 <body>

27 <h3>Align-self</h3>

28 <div class="flex-container">

29 <div class="flex-item item1">Flex Item 1</div>

30 <div class="flex-item item2">Flex Item 2</div>

31 <div class="flex-item item3">Flex Item 3</div>

 591

32 <div class="flex-item item4">Flex Item 4</div>

33 </div>

34 </html>

Здесь для flex-контейнера задано растяжение по высоте с помощью значения align-items: stretch;. Однако каждый из элементов
переопределяет это поведение:

Выравнивание строк и столбцов. align-content

Последнее обновление: 18.04.2017

Свойство align-content управляет выравниванием рядов (строк и столбцов) во flex-контейнере и поэтому применяется, если
свойство flex-wrap имеет значение wrap или wrap-reverse. Свойство align-content может иметь следующие значения:

 stretch: значение по умолчанию, при котором строки (столбцы) растягиваются, занимая все свободное место

 flex-start: строки (столбцы) выравниваются по началу контейнера (для строк - это верхний край, для столбцов - это левый
край контейнера)

 flex-end: строки (столбцы) выравниваются по концу контейнера (строки - по нижнему краю, столбцы - по правому краю)
 592

 center: строки (столбцы) позиционируются по центру контейнера

 space-between: строки (столбцы) равномерно распределяются по контейнеру, а между ними образуются одинаковые
отступы. Если же имеющегося в контейнере места недостаточно, то действует аналогично значению flex-start

 space-around: строки (столбцы) равным образом распределяют пространство контейнера, а растояние между первой и
последней строкой (столбцом) и границами контейнера составляет половину расстояния между соседними строками
(столбцами).

Стоит учитывать, что это свойство имеет смысл, если в контейнере две и больше строки (столбца).

Например, расположение строк в начале контейнера:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Flexbox в CSS3</title>

6 <style>

7 .flex-container {

8 display: flex;

9 border:1px #ccc solid;

10 flex-wrap: wrap;

11 height:200px;

12 align-content: flex-start;
 593

13 }

14 .flex-item {

15 text-align:center;

16 font-size: 16px;

17 padding: 10px;

18 color: white;

19 }

20 .item1 {background-color: #675BA7;}

21 .item2 {background-color: #9BC850;}

22 .item3 {background-color: #A62E5C;}

23 .item4 {background-color: #2A9FBC;}

24 .item5 {background-color: #F15B2A;}

25 </style>

26 </head>

27 <body>

28 <div class="flex-container">

29 <div class="flex-item item1">Flex Item 1</div>

30 <div class="flex-item item2">Flex Item 2</div>

31 <div class="flex-item item3">Flex Item 3</div>

32 <div class="flex-item item4">Flex Item 4</div>

33 <div class="flex-item item5">Flex Item 5</div>

 594

34 <div class="flex-item item1">Flex Item 6</div>

35 <div class="flex-item item2">Flex Item 7</div>

36 <div class="flex-item item3">Flex Item 8</div>

37 </div>

38 </html>

Изменим стиль контейнера:

1 .flex-container {

2 display: flex;

3 border:1px #ccc solid;

4 flex-wrap: wrap;

5 height:200px;

6 align-content: space-between;

7 flex-direction: column;

8 }

И в этом случае мы получим ряд столбцов, разделенных отступами:

Управление элементами. flex-basis, flex-shrink и flex-grow

Последнее обновление: 18.04.2017
 595

Кроме свойств, устанавливающих выравнивание элементов относительно границ flex-контейнера, есть еще три свойства, которые
позволяют управлять элементами:

 flex-basis: определяет начальный размер flex-элемента

 flex-shrink: определяет, как flex-элемент будет уменьшаться относительно других flex-элементов во flex-контейнере

 flex-grow: определяет, как flex-элемент будет увеличиваться относительно других flex-элементов во flex-контейнере

flex-basis

Flex-контейнер может увеличиваться или уменьшаться вдоль своей центральной оси, например, при изменении размеров браузера,
если контейнер имеет нефиксированные размеры. И вместе с контейнером также могут увеличиваться и уменьшаться его flex-
элементы. Свойство flex-basis определяет начальный размер flex-элемента до того, как он начнет изменять размер, подстраиваясь
под размеры flex-контейнера.

Это свойство может принимать следующие значения:

 auto: начальный размер flex-элемента устанавливается автоматически

 content: размер flex-элемента определяется по его содержимому, в то же время это значение поддерживается не всеми
современными браузерами, поэтому его пока стоит избегать
 596

 числовое значение: мы можем установить конкретное числовое значение для размеров элемента

Например:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Flexbox в CSS3</title>

6 <style>

7 .flex-container {

8 display: flex;

9 border:1px #ccc solid;

10 }

11 .flex-item {

12 text-align:center;

13 font-size: 1em;

14 padding: 1.2em;

15 color: white;

16 }

17 .item1 {background-color: #675BA7; flex-basis: auto;

width:150px;}
18
.item2 {background-color: #9BC850; flex-basis: auto;
 597

width:auto;}
19 .item3 {background-color: #A62E5C; flex-basis:
20 200px;width:150px;}

21 </style>

22 </head>

23 <body>

24 <div class="flex-container">

25 <div class="flex-item item1">Flex Item 1</div>

26 <div class="flex-item item2">Flex Item 2</div>

27 <div class="flex-item item3">Flex Item 3</div>

28 </div>

</html>

У первого элемента у свойства flex-basis установлено значение auto. Поэтому первый элемент в качестве реального значения для
ширины будет использовать значение свойства width.

У второго элемента у свойства flex-basis установлено значение auto, однако и свойство width имеет значение auto. Поэтому
реальная ширина элемента будет устанавливаться по его содержимому.

У третьего элемента свойство flex-basis имеет конкретное значение, которое и используется. А свойство width в этом случае уже
не играет никакой роли.

flex-shrink
 598

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

В качестве значения свойство принимает число. По умолчанию его значение 1.

Рассмотрим действие этого свойства на примере:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Flexbox в CSS3</title>

6 <style>

7 .flex-container {

8 display: flex;

9 border:1px #ccc solid;

10 width:400px;

11 }

12 .flex-item {

13 text-align:center;

14 font-size: 1em;

15 padding: 1.2em;

16 color: white;
 599

17 .item1 {background-color: #675BA7; flex-basis: 200px; flex-

shrink:1;}
18
.item2 {background-color: #9BC850; flex-basis: 200px; flex-
19
shrink:2;}
20
.item3 {background-color: #A62E5C; flex-basis: 200px; flex-
21 shrink:3;}

22 </style>

23 </head>

24 <body>

25 <div class="flex-container">

26 <div class="flex-item item1">Flex Item 1</div>

27 <div class="flex-item item2">Flex Item 2</div>

28 <div class="flex-item item3">Flex Item 3</div>

29 </div>

</html>

В данном случае начальная ширина каждого элемента равна 200px, то есть совокупная ширина составляет 600px. Однако ширина
flex-контейнера составляет всего 400px. То есть размер контейнера недостаточен для вмещения в него элементов, поэтому в
действие вступает свойство flex-shrink, которое определено у элементов.

Для усечения элементов браузер вычисляет коэффициент усечения (shrinkage factor). Он вычисляется путем перемножения
значения свойства flex-basis на flex-shrink. Таким образом, для трех элементов мы получим следующие вычисления:
 600

1 // первый элемент

2 200px * 1 = 200

3 // второй элемент

4 200px * 2 = 400

5 // третий элемент

6 200px * 3 = 600

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

flex-grow

Свойство flex-grow управляет расширением элементов, если во flex-контейнере есть дополнительное место. Данное свойство во
многом похоже на свойство flex-shrink за тем исключением, что работает в сторону увеличения элементов.

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

Итак, используем свойство flex-grow:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Flexbox в CSS3</title>
 601

6 <style>

7 .flex-container {

8 display: flex;

9 border:1px #ccc solid;

10 }

11 .flex-item {

12 text-align:center;

13 font-size: 1em;

14 padding: 1.3em;

15 color: white;

16 }

17 .item1 {background-color: #675BA7; flex-grow:0;}

18 .item2 {background-color: #9BC850; flex-grow:1;}

19 .item3 {background-color: #A62E5C; flex-grow:2;}

20 </style>

21 </head>

22 <body>

23 <div class="flex-container">

24 <div class="flex-item item1">Flex Item 1</div>

25 <div class="flex-item item2">Flex Item 2</div>

26 <div class="flex-item item3">Flex Item 3</div>

 602

27 </div>

28 </html>

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

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

Так как у первого элемента свойство flex-grow равно 0, то первый элемент будет иметь константные постоянные размеры. У второго
элемента flex-grow равно 1, а третьего - 2. Таким образом, в сумме они дадут 0 + 1 + 2 = 3. Поэтому второй элемент будет
увеличиваться на 1/3 дополнительного пространства, на которое растягивается контейнер, а третий элемент будет получать 2/3
дополнительного пространства.

Свойство flex

Свойство flex является объединением свойств flex-basis, flex-shrink и flex-grow и имеет следующий формальный синтаксис:

1 flex: [flex-grow] [flex-shrink] [flex-basis]

По умолчанию свойство flex имеет значение 0 1 auto.

Кроме конкретных значений для каждого из подсвойств мы можем задать для свойства flex одно из трех общих значений:
 603

 flex: none: эквивалентно значению 0 0 auto, при котором flex-элемент не растягивается и не усекается при увеличении и
уменьшении контейнера

 flex: auto: эквивалентно значению 1 1 auto

 flex: initial: эквивалентно значению 0 1 auto

Так, применим свойство flex:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Flexbox в CSS3</title>

6 <style>

7 .flex-container {

8 display: flex;

9 border:1px #ccc solid;

10 width: 600px;

11 }

12 .flex-item {

13 text-align:center;

14 font-size: 16px;

15 padding: 10px 0;
 604

color: white;

}
16
.item1 {background-color: #675BA7; width: 150px; flex: 0 0
17
auto }
18
.item2 {background-color: #9BC850; width: 150px; flex: 1 0
19 auto;}

20 .item3 {background-color: #A62E5C; width: 150px; flex: 0 1

auto;}
21
.item4 {background-color: #2A9FBC; width: 150px; flex: 1 1
22
auto;}
23
</style>
24
</head>
25
<body>
26
<div class="flex-container">
27
<div class="flex-item item1">Flex Item 1</div>
28
<div class="flex-item item2">Flex Item 2</div>
29
<div class="flex-item item3">Flex Item 3</div>
30
<div class="flex-item item4">Flex Item 4</div>
31
</div>

</html>
 605

Здесь каждый элемент имеет начальную ширину в 150 пикселей, так как у всех элементов свойство flex-basis имеет значение 0,
что в целом для всех элементов будет составлять 600 пикселей.

При сжатии контейнера будут уменьшаться 3-й и 4-й элементы, так как у них свойство flex-shrink больше нуля. И так как у обоих
элементов это свойство равно 1, то оба элемента будут уменьшаться в равных долях.

При растяжении контейнера будут увеличиваться 2-й и 4-й элементы, так как у этих элементов свойство flex-grow больше нуля. И
также, так как это свойство равно 1, то эти элементы будут увеличиваться в равных долях.

Многоколоночный дизайн на Flexbox

Последнее обновление: 19.04.2017

Теперь рассмотрим, как мы можем сделать простейшие многоколонночные макеты страницы с помощью Flexbox.

Двуколоночный дизайн

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">
 606

5 <title>Flexbox в CSS3</title>

6 <style>

7 *{

8 box-sizing: border-box;

9 }

10 html,

11 body {

12 padding: 0;

13 margin: 0;

14 font-family: verdana, arial, sans-serif;

15 }

16

17 body {

18 display: flex;

19 padding: 1em;

20 flex-direction: column;

21 }

22

23 .item {

24 background-color: #455a64;

25 color: #fff;
 607

26 font-size: 1.1em;

27 padding: 1em;

28 }

29

30 .item:nth-child(even) {

31 background-color: #607d8b;

32 }

33 @media screen and (min-width: 600px) {

34

35 body {

36 flex-direction: row;

37 }

38 }

39 </style>

40 </head>

41 <body>

42 <div class="item">

43 <h2>Что такое Lorem Ipsum?</h2>

44 <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum
является
45
стандартной "рыбой" для текстов на латинице с начала XVI века...</p>
46
 608

</div>
47

48 <div class="item">
49 <h2>Откуда он появился?</h2>
50 <p>Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не
51 совсем так.

52 Его корни уходят в один фрагмент классической латыни 45 года н.э...</p>

53 </div>

54 </body>

</html>

Здесь flex-контейнером является элемент body. Так как на мобильных устройствах (особенно смартфонах) размер экрана не такой
большой, поэтому по умолчанию устанавливаем расположение элементов в столбик. Однако для устройств с экраном от 600рх и
выше действует правило media-query, которое устанавливает расположение в виде строки.

Трехколоночный режим

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>Flexbox в CSS3</title>
 609

6 <style>

7 *{

8 box-sizing: border-box;

9 }

10 html,

11 body {

12 padding: 0;

13 margin: 0;

14 font-family: verdana, arial, sans-serif;

15 }

16

17 body {

18 display: flex;

19 padding: 1em;

20 flex-direction: column;

21 }

22

23 .item {

24 background-color: #455a64;

25 color: #fff;

26 font-size: 1.1em;
 610

27 padding: 1em;

28 flex: 1;

29 }

30

31 .item:nth-child(1) {

32 background-color: #607d8b;

33 }

34 @media screen and (min-width: 600px) {

35

36 body {

37 flex-direction: row;

38 }

39 .item:nth-child(2) {

40 order: -1;

41 }

42 }

43 </style>

44 </head>

45 <body>

46

47 <div class="item">
 611

<h1>Что такое Lorem Ipsum?</h1>

48 <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является
стандартной "рыбой"
49
для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал ...</p>
50
</div>
51

52
<div class="item">
53
<h3>Классический текст Lorem Ipsum, используемый с XVI века</h3>
54
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
55
dolore
56
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
57
</div>
58
<div class="item">
59
<h3>Где его взять?</h3>
60
<p>Есть много вариантов Lorem Ipsum, но большинство из них имеет не всегда приемлемые модификации,
61 например,

62 юмористические вставки или слова, которые даже отдалённо не напоминают латынь.</p>

63 </div>

64 </body>

</html>
 612

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

И кроме того, при ширине экрана больше 600px у второго элемента устанавливается свойство order: -1, благодаря чему этот
элемент помещается первым:

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

1 .item:first-child {

2 flex: 0 0 50%;

3 }

В этом случае первый элемент всегда будет занимать 50% пространства контейнера:

Макет страницы на Flexbox

Последнее обновление: 19.04.2017


 613

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

Для этого определим следующую веб-страницу:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <meta name="viewport" content="width=device-width" />

6 <title>Flexbox в CSS3</title>

7 <style>

8 *{

9 box-sizing: border-box;

10 }

11 html, body {

12 padding: 0;

13 margin: 0;

14 font-family: verdana, arial, sans-serif;

15 }

16
 614

17 body {

18 color: #fff;

19 font-size: 1.1em;

20 padding: 1em;

21 display: flex;

22 flex-direction: column;

23 }

24

25 main {

26 display: flex;

27 flex-direction: column;

28 }

29

30 article {

31 background-color: #546e7a;

32 flex: 2 2 12em;

33 padding: 1em;

34 }

35

36 nav, aside {

37 flex: 1;
 615

38 background-color: #455a64;

39 }

40

41 nav {

42 order: -1;

43 }

44

45 header, footer {

46 flex: 0 0 5em;

47 background-color: #37474f;

48 }

49

50 @media screen and (min-width: 600px) {

51

52 body{

53 min-height: 100vh;

54 }

55 main {

56 flex-direction: row;

57 min-height: 100%;

58 flex: 1 1 auto;
 616

59 }

60 }

61 </style>

62 </head>

63 <body>

64 <header>

65 <p>Header</p>

66 </header>

67 <main>

68 <article>

69 <h1>Что такое Lorem Ipsum?</h1>

70 <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является
стандартной
71
"рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал
72
большую коллекцию
73
размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно
74 пережил без

75 заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое
время</p>
76
</article>
77
<nav>
78
<p>Navigation</p>
79
 617

</nav>

<aside>
80
<p>Sidebar</p>
81
</aside>
82
</main>
83
<footer>
84
<p>Footer</p>
85
</footer>
86
</body>

</html>

Итак, flex-контейнером верхнего уровня здесь является элемент body. Его flex-элементами являются header, main и footer. Body
располагает все свои элементы сверху вниз в столбик. Здесь также стоит отметить, что при ширине от 600px и выше для
заполнения всего пространства браузера у body устанавливается стиль height: 100vh;.

Элементы header и footer аналогичны. Их свойство flex: 0 0 5em; указывают, что при любом изменении контейнера эти элементы
будут иметь размер в 5em. То есть они имеют статический размер.

Более сложным является элемент main, который определяет основное содержимое. При этом будучи flex-элементом, он также
является flex-контейнером для вложенных элементов и управляет их позиционированием. При ширине браузера до 600px он
располагает элементы в столбик, что очень удобно на мобильных устройствах.
 618

При ширине от 600px вложенные элементы nav, article и aside располагаются в виде строки. И поскольку при такой ширине
браузера родительский элемент body заполняет по высоте все пространство браузера, то для заполнения всей высоты контейнера
body при его изменении у элемента main устанавливается свойство flex: 1 1 auto;.

У вложенных в main flex-элементов стоит отметить, что элемент навигации nav и элемент сайдбара aside будут иметь одинаковые
размеры при масштабировании контейнера. А элемент article, содержащий основное содержимое, будет соответственно больше.
При этом хотя nav определен после элемента article, но благодаря установке свойства order: -1 блок навигации будет стоять до
блока article.

Grid Layout
Что такое Grid Layout. Grid Container
Последнее обновление: 09.05.2017

Grid Layout представляет специальный модуль CSS3, который позволяет позиционировать элементы в виде сетки или таблицы. Как
и Flexbox, Grid Layout представляет гибкий подход к компоновке элементов, только если flexbox размещает вложенные элементы в
одном направлении - по горизонтали в виде столбиков или по вертикали в виде строк, то Grid позиционирует элементы сразу в двух
направлениях - в виде строк и столбцов, образуя тем самым таблицу.

Полностью спецификацию модуля Grid Layout можно посмотреть на странице [Link]/TR/css-grid-1/.

Поддержка браузерами
 619

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

 Google Chrome - с версии 57

 Mozilla Firefox - с версии 52

 Opera - с версии 44

 Safari - с версии 10.1

 iOS Safari - с версии 10.3

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

Кроме того, IE (начиная с версии 10) и Microsoft Edge имеет лишь частичную поддержку модуля. А Android Browser, Opera Mini, UC
Browser вовсе ее не имеют.

Создание grid-контейнера

Основой для определения компоновки Grid Layout является grid container, внутри которого размещаются элементы. Для создания
grid-контейнера необходимо присвоить его стилевому свойству display одно из двух значений: grid или inline-grid.

Создадим простейшую веб-страницу, которая применяет Grid Layout:

1 <!DOCTYPE html>

2 <html>

3 <head>
 620

4 <meta charset="utf-8">

5 <meta name="viewport" content="width=device-width" />

6 <title>Grid Layout в CSS3</title>

7 <style>

8 .grid-container {

9 border: solid 2px #000;

10 display: grid;

11 }

12 .grid-item {

13 text-align:center;

14 font-size: 1.1em;

15 padding: 1.5em;

16 color: white;

17 }

18

19 .color1 {background-color: #675BA7;}

20 .color2 {background-color: #9BC850;}

21 .color3 {background-color: #A62E5C;}

22 .color4 {background-color: #2A9FBC;}

23 </style>

24 </head>
 621

25 <body>

26 <div class="grid-container">

27 <div class="grid-item color1">Grid Item 1</div>

28 <div class="grid-item color2">Grid Item 2</div>

29 <div class="grid-item color3">Grid Item 3</div>

30 <div class="grid-item color4">Grid Item 4</div>

31 <div class="grid-item color1">Grid Item 5</div>

32 </div>

33 </body>

34 </html>

Для контейнера grid-container установлено свойство display:grid. В нем располагается пять grid-элементов.

Если значение grid определяет контейнер как блочный элемент, то значение inline-grid определяет элемент как строчный (inline):

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <meta name="viewport" content="width=device-width" />

6 <title>Grid Layout в CSS3</title>

 622

7 <style>

8 .grid-container {

9 border: solid 2px #000;

10 display: inline-grid;

11 }

12

13 .grid-item {

14 box-sizing: border-box;

15 text-align:center;

16 font-size: 1.1em;

17 padding: 1.5em;

18 color: white;

19 }

20

21 .color1 {background-color: #675BA7;}

22 .color2 {background-color: #9BC850;}

23 .color3 {background-color: #A62E5C;}

24 .color4 {background-color: #2A9FBC;}

25 </style>

26 </head>

27 <body>
 623

28 <div class="grid-container">

29 <div class="grid-item color1">Grid Item 1</div>

30 <div class="grid-item color2">Grid Item 2</div>

31 <div class="grid-item color3">Grid Item 3</div>

32 <div class="grid-item color4">Grid Item 4</div>

33 <div class="grid-item color1">Grid Item 5</div>

34 </div>

35 </body>

36 </html>

В этом случае весь грид занимает только то пространство, которое необходимо для размещения его элементов.

Строки и столбцы
Последнее обновление: 09.05.2017

Грид образует сетку из строк и столбцов, на пересечении которых образуются ячейки. И для установки строк и столбцов в Grid
Layout использовать следующие свойства CSS3:
 624

 grid-template-columns: настраивает столбцы

 grid-template-rows: настраивает строки

Столбцы

Для определения столбцов используем у grid-контейнера стилевое свойство grid-template-columns. Например, определим грид с
двумя столбцами:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <meta name="viewport" content="width=device-width" />

6 <title>Grid Layout в CSS3</title>

7 <style>

8 .grid-container {

9 border: solid 2px #000;

10 display: grid;

11 grid-template-columns: 8em 8em;

12 }

13

14 .grid-item {

15 box-sizing: border-box;
 625

16 text-align:center;

17 font-size: 1.1em;

18 padding: 1.5em;

19 color: white;

20 }

21

22 .color1 {background-color: #675BA7;}

23 .color2 {background-color: #9BC850;}

24 .color3 {background-color: #A62E5C;}

25 .color4 {background-color: #2A9FBC;}

26 </style>

27 </head>

28 <body>

29 <div class="grid-container">

30 <div class="grid-item color1">Grid Item 1</div>

31 <div class="grid-item color2">Grid Item 2</div>

32 <div class="grid-item color3">Grid Item 3</div>

33 <div class="grid-item color4">Grid Item 4</div>

34 <div class="grid-item color1">Grid Item 5</div>

35 </div>

36 </body>
 626

37 </html>

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

Соответственно если мы хотим, чтобы в гриде было три столбца, то нам надо передать три значения, например:

1 grid-template-columns: 8em 7em 8em;

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

Строки

Настойка строк во многом аналогичная настройке столбцов. Для этого у грид-контейнера необходимо установить свойство grid-
template-rows, которое задает количество и размеры строк:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <meta name="viewport" content="width=device-width" />

6 <title>Grid Layout в CSS3</title>

7 <style>
 627

8 .grid-container {

9 border: solid 2px #000;

10 display: grid;

11 grid-template-rows: 4em 5em;

12 }

13 .grid-item {

14 text-align:center;

15 font-size: 1.1em;

16 padding: 1.5em;

17 color: white;

18 }

19 .color1 {background-color: #675BA7;}

20 .color2 {background-color: #9BC850;}

21 .color3 {background-color: #A62E5C;}

22 .color4 {background-color: #2A9FBC;}

23 </style>

24 </head>

25 <body>

26 <div class="grid-container">

27 <div class="grid-item color1">Grid Item 1</div>

28 <div class="grid-item color2">Grid Item 2</div>

 628

29 <div class="grid-item color3">Grid Item 3</div>

30 <div class="grid-item color4">Grid Item 4</div>

31 <div class="grid-item color1">Grid Item 5</div>

32 <div class="grid-item color4">Grid Item 6</div>

33 <div class="grid-item color3">Grid Item 7</div>

34 </div>

35 </body>

36 </html>

Свойству grid-template-rows передается высота каждой из строк. Так, в данном случае высота первой строки составляет 4em, а
второй - 5em.

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

Изменим стили grid-контейнера, добавив еще две строки:

1 .grid-container {

2 border: solid 2px #000;

3 display: grid;
 629

4 grid-template-columns: 8em 8em 8em;

5 grid-template-rows: 5em 5em 5em 5em;

6 }

Здесь определено три столбца и четыре строки:

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

Функция repeat и свойство grid

Последнее обновление: 09.05.2017

Повторение строк и столбцов

Если у нас столбцов и(или) строк много и они имеют одинаковые размеры, то есть смыл использовать специальную
функцию repeat(), которая позволит настроить строки и столбцы. Так, в примере выше повторяется определение одинаковых
строк и столбцов в grid-контейнере:

1 grid-template-columns: 8em 8em 8em;

 630

2 grid-template-rows: 5em 5em 5em 5em;

Здесь мы видим, что происходит повторение одних и тех же размеров - 8em и 5em для установки ширины столбцов и высоты строк.
Поэтому перепишем стили, применив функцию repeat:

1 .grid-container {

2 border: solid 2px #000;

3 display: grid;

4 grid-template-columns: repeat(3, 8em);

5 grid-template-rows: repeat(4, 5em);

6 }

Первый параметр функции repeat представляет число повторений, а второй - определение строк или столбцов. Например,
свойство grid-template-columns: repeat(3, 8em); говорит, что необходимо определить 3 столбца шириной в 8em.

Соответственно выражение grid-template-rows: repeat(4, 5em) определяет 4 строки высотой по 5em.

Можно задавать повторение нескольких столбцов и строк:

1 .grid-container {

2 border: solid 2px #000;

3 display: grid;

4 grid-template-columns: repeat(2, 7em 8em);

5 grid-template-rows: 6em repeat(3, 5em);

6 }
 631

В данном случае будет создано 4 столбца: два раза будут повторяться два столбца с шириной 7em и 8em.

В случае со строками будет создано 4 строки. Причем первая будет иметь высоту в 6em, а остальные три - 5em.

Свойство grid

Свойство grid объединяет свойства grid-template-rows и grid-template-columns и разом позволяет задать настройки для строк и
столбцов в следующем формате:

1 grid: grid-template-rows / grid-template-columns;

К примеру, у нас есть следующее определение класса grid-контейнера:

1 .grid-container {

2 border: solid 2px #000;

3 display: grid;

4 grid-template-columns: 8em 8em 8em;

5 grid-template-rows: 5em 5em 5em 5em;

6 }

Мы можем сократить этот класс следующим образом:

1 .grid-container {

2 border: solid 2px #000;

3 display: grid;

4 grid: 5em 5em 5em 5em / 8em 8em 8em;

 632

5 }

Либо опять же используя функцию repeat(), можно еще больше сократить определение грида:

1 .grid-container {

2 border: solid 2px #000;

3 display: grid;

4 grid: repeat(4, 5em) / repeat(3, 8em);

5 }

Размеры строк и столбцов

Последнее обновление: 09.05.2017

Фиксированные размеры

В примерах, которые были рассмотрены в предыдущих статьях, ширина столбцов и длина строк устанавливались на основании
фиксированных значений, которые передаются свойствам grid-template-columns и grid-template-rows. Для определения
размеров мы можем использовать самые различные единицы измерения, которые нам доступны в CSS (px, em, rem, pt, %),
например:
 633

1 .grid-container {

2 border: solid 2px #000;

3 display: grid;

4 grid-template-columns: repeat(3, 200px);

5 grid-template-rows: repeat(3, 4.5em);

6 }

Автоматические размеры

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

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <meta name="viewport" content="width=device-width" />

6 <title>Grid Layout в CSS3</title>

7 <style>

8 .grid-container {

9 border: solid 2px #000;

10 display: grid;

11 grid-template-columns: 8em auto auto;

 634

12 grid-template-rows: auto 4.5em auto;

13 }

14 .grid-item {

15 text-align:center;

16 font-size: 1.1em;

17 padding: 1.5em;

18 color: white;

19 }

20 .color1 {background-color: #675BA7;}

21 .color2 {background-color: #9BC850;}

22 .color3 {background-color: #A62E5C;}

23 .color4 {background-color: #2A9FBC;}

24 .color5 {background-color: #4e342e;}

25 </style>

26 </head>

27 <body>

28 <div class="grid-container">

29 <div class="grid-item color1">Grid Item 1</div>

30 <div class="grid-item color2">Grid Item 2</div>

31 <div class="grid-item color3">Grid Item 3</div>

32 <div class="grid-item color4">Grid Item 4</div>

 635

33 <div class="grid-item color5">Grid Item 5</div>

34 <div class="grid-item color1">Grid Item 6</div>

35 <div class="grid-item color2">Grid Item 7</div>

36 </div>

37 </body>

38 </html>

Здесь задано три строки и ти столбца. Первый столбец имеет фиксированную ширину в 8em, а второй и третий столбцы -
автоматическую ширину. И также первая и третья строки имеют автоматическую высоту, а вторая строка - фиксированную.

Пропорциональные размеры

Для установки пропорциональных размеров применяется специальная единица измерения fr. Она представляет собой часть
пространства (fraction), которое отводится для данного столбца или строки. Значение fr еще называют flex-фактором (flex factor).

Вычисление пропорциональных размеров производится по формуле:

1 flex-фактор * доступное_пространство / сумма всех flex-факторов

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

1 <!DOCTYPE html>

2 <html>
 636

3 <head>

4 <meta charset="utf-8">

5 <meta name="viewport" content="width=device-width" />

6 <title>Grid Layout в CSS3</title>

7 <style>

8 *{

9 box-sizing: border-box;

10 }

11 html, body{

12 margin:0;

13 padding:0;

14 }

15 .grid-container {

16 height: 100vh;

17 border: solid 2px #000;

18 display: grid;

19 grid-template-columns: 8em 2fr 1fr;

20 grid-template-rows: 1fr 4.5em 1fr;

21 }

22 .grid-item {

23 text-align:center;
 637

24 font-size: 1.1em;

25 padding: 1.5em;

26 color: white;

27 }

28 .color1 {background-color: #675BA7;}

29 .color2 {background-color: #9BC850;}

30 .color3 {background-color: #A62E5C;}

31 .color4 {background-color: #2A9FBC;}

32 .color5 {background-color: #4e342e;}

33 </style>

34 </head>

35 <body>

36 <div class="grid-container">

37 <div class="grid-item color1">Grid Item 1</div>

38 <div class="grid-item color2">Grid Item 2</div>

39 <div class="grid-item color3">Grid Item 3</div>

40 <div class="grid-item color4">Grid Item 4</div>

41 <div class="grid-item color5">Grid Item 5</div>

42 <div class="grid-item color1">Grid Item 6</div>

43 <div class="grid-item color2">Grid Item 7</div>

44 </div>
 638

45 </body>

46 </html>

В данном случае имеются три столбца с шириной 2fr, 8em, 1fr. Поэтому ширина второго столбца будет вычисляться по формуле:

1 2 * (ширина_грида - 8em) / (2 + 1)

Ширина третьего столбца будет вычисляться по формуле:

1 1 * (ширина_грида - 8em) / (2 + 1)

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

В отношении строк все аналогично.

Отступы между столбцами и строками

Последнее обновление: 09.05.2017


 639

Для создания отступов между столбцами и строками применяются свойства grid-column-gap и grid-row-gap соответственно.

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <meta name="viewport" content="width=device-width" />

6 <title>Grid Layout в CSS3</title>

7 <style>

8 *{

9 box-sizing: border-box;

10 }

11 html, body{

12 margin:0;

13 padding:0;

14 }

15 .grid-container {

16 height: 100vh;

17 display: grid;

18 grid-template-columns: repeat(3, 1fr);

19 grid-template-rows: repeat(3, 1fr);

 640

20 grid-column-gap: 10px;

21 grid-row-gap: 10px;

22 }

23 .grid-item {

24 text-align:center;

25 font-size: 1.1em;

26 padding: 1.5em;

27 color: white;

28 }

29 .color1 {background-color: #675BA7;}

30 .color2 {background-color: #9BC850;}

31 .color3 {background-color: #A62E5C;}

32 .color4 {background-color: #2A9FBC;}

33 .color5 {background-color: #4e342e;}

34 </style>

35 </head>

36 <body>

37 <div class="grid-container">

38 <div class="grid-item color1">Grid Item 1</div>

39 <div class="grid-item color2">Grid Item 2</div>

40 <div class="grid-item color3">Grid Item 3</div>

 641

41 <div class="grid-item color4">Grid Item 4</div>

42 <div class="grid-item color1">Grid Item 5</div>

43 <div class="grid-item color4">Grid Item 6</div>

44 <div class="grid-item color5">Grid Item 7</div>

45 </div>

46 </body>

47 </html>

Если значения свойств grid-column-gap и grid-row-gap совпадают, то вместо них можно определить одно свойство gap (ранее
назвалось grid-gap), которое установит оба отступа:

1 .grid-container {

2 height: 100vh;

3 display: grid;

4 grid-template-columns: repeat(3, 1fr);

5 grid-template-rows: repeat(3, 1fr);

6 gap: 10px;

7 }

Позиционирование элементов
Последнее обновление: 09.05.2017
 642

Грид представляет собой набор ячеек, которые образуются на пересечении столбцов и строк. Но сами строки и столбцы образуются
с помощью grid-линий, которые рассекают грид по вертикали и горизонтали:

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

 grid-row-start: задает начальную горизонтальную grid-линию, с которой начинается элемент

 grid-row-end: указывает, до какой горизонтальной grid-линии надо растягивать элемент

 grid-column-start: задает начальную вертикальную grid-линию, от которой начинается элемент

 grid-column-end: указывает, до какой вертикальной grid-линии нужно растягивать элемент

Например, растянем элемент на несколько столбцов:

1 <!DOCTYPE html>

2 <html>

3 <head>
 643

4 <meta charset="utf-8">

5 <meta name="viewport" content="width=device-width" />

6 <title>Grid Layout в CSS3</title>

7 <style>

8 .grid-container {

9 border: solid 2px #000;

10 display: grid;

11 grid-template-columns: repeat(4, 1fr);

12 grid-template-rows: repeat(3, 5em);

13 }

14 .special-item{

15 grid-column-start:2;

16 grid-column-end: 5;

17 }

18 .grid-item {

19 text-align:center;

20 font-size: 1.1em;

21 padding: 1.5em;

22 color: white;

23 }

24 .color1 {background-color: #675BA7;}

 644

25 .color2 {background-color: #9BC850;}

26 .color3 {background-color: #A62E5C;}

27 .color4 {background-color: #2A9FBC;}

28 .color5 {background-color: #4e342e;}

29 </style>

30 </head>

31 <body>

32 <div class="grid-container">

33 <div class="grid-item color1">Grid Item 1</div>

34 <div class="grid-item color2 special-item">Grid Item 2</div>

35 <div class="grid-item color3">Grid Item 3</div>

36 <div class="grid-item color4">Grid Item 4</div>

37 <div class="grid-item color5">Grid Item 5</div>

38 <div class="grid-item color1">Grid Item 6</div>

39 <div class="grid-item color4">Grid Item 7</div>

40 </div>

41 </body>

42 </html>
 645

Здесь определено четыре столбца, причем второму элементу присвоен особый класс special-item, который располагается, начиная
со 2 grid-линии или 2-го столбца (grid-column-start: 2) до 5-й вертикальной grid-линии (grid-column-end: 5).

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

1 .special-item{

2 grid-column-start: 3;

3 grid-column-end: 5;

4 }

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

Вместо использования двух выше рассмотренных свойств мы можем использовать одно свойство - grid-column, которое принимает
значения grid-column-start и grid-column-end через слеш:

1 grid-column: grid-column-start / grid-column-end;

Например, мы можем сократить стиль класса special-item следующим образом:

1 .special-item{

2 grid-column: 3 / 5;

3 }
 646

Аналогично с помощью свойств grid-row-start и grid-row-end можно задать позиционирование элемента на несколько строк. Так,
изменим класс special-item следующим образом:

1 .special-item{

2 grid-column-start:2;

3 grid-row-start: 1;

4 grid-row-end: 3;

5 }

В данном случае второй элемент позиционируется во втором столбце первой строки и растягивается до 3-й строки.

Вместо использования пары свойств grid-row-start и grid-row-end можно использовать одно общее свойство grid-row:

1 grid-row: grid-row-start / grid-row-end;

Так, мы могли бы изменить стиль special-item следующим образом:

1 .special-item{

2 grid-column-start:2;

3 grid-row: 1 / 3;

4 }

span
 647

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

1 .special-item{

2 grid-row: 1 / span 2;

3 grid-column: 2 / span 2;

4 }

Элемент помещается в ячейку, которая находится на пересечении первой строки и второго столбца, и растягивается на две строки
вниз и на два столбца вправо.

grid-area

Свойство grid-area объединяет свойства grid-column и grid-row, позволяя сократить их запись:

1 grid-area: row-start / column-start / row-end / column-end

Например, изменим стили класса special-item:

1 .special-item{

2 grid-area: 1 / 2 / 3 / 4;

3 }

Наложение элементов
Последнее обновление: 09.05.2017


 648

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

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <meta name="viewport" content="width=device-width" />

6 <title>Grid Layout в CSS3</title>

7 <style>

8 *{

9 box-sizing: border-box;

10 }

11 html, body{

12 margin:0;

13 padding:0;

14 }

15 .grid-container {
 649

16 height: 100vh;

17 display: grid;

18 grid-template-columns: repeat(3, 1fr);

19 grid-template-rows: repeat(3, 1fr);

20 grid-gap: 10px;

21 }

22 .grid-item {

23 text-align:center;

24 font-size: 1.1em;

25 padding: 1.5em;

26 color: white;

27 z-index: 1;

28 }

29 .item1{

30 grid-area: 1 / 1 / 3 / 4;

31 opacity: 0.8;

32 }

33 .item2{

34 grid-area: 1 / 1 / 2 / 2;

35 }

36 .item3{
 650

37 grid-area: 1 / 3 / 2 / 4;

38 }

39 .item4{

40 grid-area: 2 / 1 / 3 / 2;

41 }

42 .item5{

43 grid-area: 2 / 2 / 3 / 3;

44 }

45 .item6{

46 grid-area: 2 / 3 / 3 / 4;

47 }

48 .item7{

49 grid-area: 3 / 1 / 4 / 2;

50 }

51 .color1 {background-color: #675BA7;}

52 .color2 {background-color: #9BC850;}

53 .color3 {background-color: #A62E5C;}

54 .color4 {background-color: #2A9FBC;}

55 .color5 {background-color: #4e342e;}

56 </style>

57 </head>
 651

58 <body>

59 <div class="grid-container">

60 <div class="grid-item item1 color2">Grid Item 2</div>

61 <div class="grid-item item2 color1">Grid Item 1</div>

62 <div class="grid-item item3 color3">Grid Item 3</div>

63 <div class="grid-item item4 color4">Grid Item 4</div>

64 <div class="grid-item item5 color1">Grid Item 5</div>

65 <div class="grid-item item6 color4">Grid Item 6</div>

66 <div class="grid-item item7 color5">Grid Item 7</div>

67 </div>

68 </body>

69 </html>

Здесь первый элемент занимает то же пространство, что и пять следующих элементов. Благодаря установке свойства z-index: 1 у
всех элементов получается, что как первый элемент как-будто лежит фоном под другими пятью элементами.

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

1 .item1{

2 grid-area: 1 / 1 / 3 / 4;
 652

3 opacity: 0.8;

4 z-index: 10;

5 }

Направление и порядок элементов

Последнее обновление: 09.05.2017

Свойство grid-auto-flow

По умолчанию все элементы располагаются по порядку горизонтально, если места в строке больше нет, то элементы переносятся
на следующую строку. Но с помощью свойства grid-auto-flow можно изменить направление элементов. Это свойство принимает
два значения:

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

 column: элементы располагаются в столбик, если места в столбце не хватает, то элементы переходят в следующий столбец

Применим данное свойство:

1 <!DOCTYPE html>
 653

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <meta name="viewport" content="width=device-width" />

6 <title>Grid Layout в CSS3</title>

7 <style>

8 *{

9 box-sizing: border-box;

10 }

11 html, body{

12 margin:0;

13 padding:0;

14 }

15 .grid-container {

16 height: 100vh;

17 display: grid;

18 grid-template-columns: repeat(3, 1fr);

19 grid-template-rows: repeat(3, 1fr);

20 grid-auto-flow: row;

21 }

22 .grid-item {
 654

23 text-align:center;

24 font-size: 1.1em;

25 padding: 1.5em;

26 color: white;

27 }

28 .color1 {background-color: #675BA7;}

29 .color2 {background-color: #9BC850;}

30 .color3 {background-color: #A62E5C;}

31 .color4 {background-color: #2A9FBC;}

32 .color5 {background-color: #4e342e;}

33 </style>

34 </head>

35 <body>

36 <div class="grid-container">

37 <div class="grid-item color1">Grid Item 1</div>

38 <div class="grid-item color2">Grid Item 2</div>

39 <div class="grid-item color3">Grid Item 3</div>

40 <div class="grid-item color4">Grid Item 4</div>

41 <div class="grid-item color1">Grid Item 5</div>

42 <div class="grid-item color4">Grid Item 6</div>

43 <div class="grid-item color5">Grid Item 7</div>

 655

44 </div>

45 </body>

46 </html>

Свойство grid-auto-flow имеет значение row, поэтому элементы будут располагаться в строку.

Теперь изменим стиль grid-контейнера:

1 .grid-container {

2 height: 100vh;

3 display: grid;

4 grid-template-columns: repeat(3, 1fr);

5 grid-template-rows: repeat(3, 1fr);

6 grid-auto-flow: column;

7 }

После этого элементы будут располагаться в столбец

Свойство order
 656

Свойство order позволяет задать порядок элементов. По умолчанию для каждого элемента в гриде это свойство имеет значение 0.
Поэтому элементы располагаются друг за другом как они определены в разметке html. Но мы можем переопределить этот порядок:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <meta name="viewport" content="width=device-width" />

6 <title>Grid Layout в CSS3</title>

7 <style>

8 *{

9 box-sizing: border-box;

10 }

11 html, body{

12 margin:0;

13 padding:0;

14 }

15 .grid-container {

16 height: 100vh;

17 display: grid;

18 grid-template-columns: repeat(3, 1fr);

19 grid-template-rows: repeat(3, 1fr);

 657

20 }

21 .grid-item {

22 text-align:center;

23 font-size: 1.1em;

24 padding: 1.5em;

25 color: white;

26 }

27 .last-item{

28 order: 1;

29 }

30 .first-item{

31 order: -1;

32 }

33 .color1 {background-color: #675BA7;}

34 .color2 {background-color: #9BC850;}

35 .color3 {background-color: #A62E5C;}

36 .color4 {background-color: #2A9FBC;}

37 .color5 {background-color: #4e342e;}

38 </style>

39 </head>

40 <body>
 658

41 <div class="grid-container">

42 <div class="grid-item color1">Grid Item 1</div>

43 <div class="grid-item color2 last-item">Grid Item 2</div>

44 <div class="grid-item color3 last-item">Grid Item 3</div>

45 <div class="grid-item color4">Grid Item 4</div>

46 <div class="grid-item color1">Grid Item 5</div>

47 <div class="grid-item color4">Grid Item 6</div>

48 <div class="grid-item color5 first-item">Grid Item 7</div>

49 </div>

50 </body>

51 </html>

Элементы с классом last-item имеет порядок 1, поэтому они будут располагаться после других элементов, у которых порядок равен
0 или меньше.

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

Именованные grid-линии
Последнее обновление: 09.05.2017


 659

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

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <meta name="viewport" content="width=device-width" />

6 <title>Grid Layout в CSS3</title>

7 <style>

8 *{

9 box-sizing: border-box;

10 }

11 html, body{

12 margin:0;

13 padding:0;

14 }

15 .grid-container {
 660

16 height:100vh;

17 display: grid;

18 grid-template-columns: [col1start] 1fr [col1end] 10px

19 [col2start] 1fr [col2end] 10px

20 [col3start] 1fr [col3end];

21 grid-template-rows: [row1start] 1fr [row1end] 10px [row2start] 1fr

[row2end];
22
}
23

24
.grid-item {
25
background-color: #ddd;
26
}
27

28
.special-item{
29
grid-column: col1start / col2end;
30
grid-row: row1start;
31
background-color: #bbb;
32
}
33
.item1{
34
grid-column: col3start / col3end;
35
grid-row: row1start;
36
 661

37 }

38 .item2{

39 grid-column: col1start / col1end;

40 grid-row: row2start;

41 }

42 .item3{

43 grid-column: col2start / col2end;

44 grid-row: row2start;

45 }

46 .item4{

47 grid-column: col3start / col3end;

48 grid-row: row2start;

49 }

50 </style>

51 </head>

52 <body>

53 <div class="grid-container">

54 <div class="grid-item special-item"></div>

55 <div class="grid-item item1"></div>

56 <div class="grid-item item2"></div>

57 <div class="grid-item item3"></div>

 662

<div class="grid-item item4"></div>

58
</div>
59
</body>
60
</html>

При именовании линий их имена заключаются в квадратные скобки, а между для именами указывается ширина столбца или высота
строки, которые находятся между этими линиями:

grid-template-columns: [col1start] 1fr [col1end] 10px

1
[col2start] 1fr [col2end] 10px
2
[col3start] 1fr [col3end];
3
grid-template-rows: [row1start] 1fr [row1end] 10px [row2start] 1fr
4
[row2end];

Затем, используя эти названия, мы можем позиционировать элементы между определенными линиями:

1 .special-item{

2 grid-column: col1start / col2end;

3 grid-row: row1start;

4 background-color: #bbb;

5 }

Так, в данном случае элемент с классом special-item начинает от вертикальной линии col1start и растягивается до вертикальной
линии col2end. И также он начинается от горизонтальной линии row1start, и так как конечная горизонтальная линия не указана, то
элемент занимает только одну строку.
 663

Или другой пример, связанный с созданием макета страницы:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <meta name="viewport" content="width=device-width" />

6 <title>Grid Layout в CSS3</title>

7 <style>

8 *{

9 box-sizing: border-box;

10 }

11 html, body {

12 padding: 0;

13 margin: 0;

14 }

15

16 .grid-container {

17 display: grid;
 664

18 height: 100vh;

19 grid-template-rows: 6em 10px 1fr;

20 grid-template-columns: [mainstart] 1fr [mainend] 10px [sidebarestart] 25%

[sidebarend];
21
}
22

23
.grid-item-content {
24
background-color: #455a64;
25
grid-row: 3 / 4;
26
grid-column: mainstart / mainend;
27
}
28

29
.grid-item-sidebar {
30
background-color: #37474f;
31
grid-row: 3 / 4;
32
grid-column: sidebarestart / sidebarend;
33
}
34

35
.grid-item-header{
36
background-color: #263238;
37
grid-row: 1 / 2;
38
 665

39 grid-column: mainstart / sidebarend;

40 }

41

42 .grid-item {

43 color: #fff;

44 text-align: center;

45 }

46 </style>

47 </head>

48 <body>

49 <main class="grid-container">

50 <header class="grid-item grid-item-header">

51 <h1>Header</h1>

52 </header>

53

54 <article class="grid-item grid-item-content">

55 <h1>Main Content</h1>

56 </article>

57

58 <aside class="grid-item grid-item-sidebar">

59 <h1>Sidebar</h1>
 666

</aside>
60
</main>
61
</body>
62
</html>

Именованные grid-линии и функция repeat

Последнее обновление: 09.05.2017

С помощью ранее рассмотренной функции repeat мы можем растиражировать столбцы и строки, которые создаются между
именованными grid-линиями:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <meta name="viewport" content="width=device-width" />

6 <title>Grid Layout в CSS3</title>

 667

7 <style>

8 *{

9 box-sizing: border-box;

10 }

11 html, body{

12 margin:0;

13 padding:0;

14 }

15 .grid-container {

16 height:100vh;

17 display: grid;

18 grid-template-columns: 10px repeat(3, [column] 1fr

[colgutter] 10px);
19
grid-template-rows: 10px repeat(2, [row] 1fr [rowgutter]
20
10px);
21
}
22

23
.grid-item {
24
background-color: #ddd;
25
}
26

27
 668

28 .special-item{

29 grid-column: column 2;

30 grid-row: row 1;

31 background-color: #bbb;

32 }

33 .item1{

34 grid-column: column 1;

35 grid-row: row 1;

36 }

37 .item2{

38 grid-column: column 3;

39 grid-row: row 1;

40 }

41 .item3{

42 grid-column: column 1;

43 grid-row: row 2;

44 }

45 .item4{

46 grid-column: column 2;

47 grid-row: row 2;

48 }
 669

</style>

49 </head>

50 <body>

51 <div class="grid-container">

52 <div class="grid-item special-item"></div>

53 <div class="grid-item item1"></div>

54 <div class="grid-item item2"></div>

55 <div class="grid-item item3"></div>

56 <div class="grid-item item4"></div>

57 </div>

58 </body>

</html>

Возьмем из данного примера определение столбцов:

1 grid-template-columns: 10px repeat(3, [column] 1fr [colgutter] 10px);

Первый столбец будет иметь ширину в 10 пикселей. Затем происходит тиражирование столбцов с помощью функции repeat. Она
создает подряд три копии двух столбцов. Первый столбец имеет ширину 1fr, то есть имеет пропорциональные размеры, и
располагается между grid-линиями "column" и "colgutter". После grid-линии "colgutter" идет еще один столбец шириной в 10
пикселей. И эти два столбца будут повторяться три раза. То есть всего в гриде будет 7 столбцов.

Со строками будет во многом аналогично, только там создается 5 строк с помощью grid-линий "row" и "rowgutter".
 670

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

1 .special-item{

2 grid-column: column 2; /* второй столбец с именем column */

3 grid-row: row 1; /* первая строка с именем row */

4 background-color: #bbb;

5 }

Причем свойство grid-column: column 2 указывает на столбец в гриде, который начинается со второй grid-линии "column". В итоге
мы получим следующий грид:

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

И более того мы можем дополнительно добавлять новые именованные грид-линии вне функции repeat:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <meta name="viewport" content="width=device-width" />

6 <title>Grid Layout в CSS3</title>

7 <style>
 671

8 *{

9 box-sizing: border-box;

10 }

11 html, body{

12 margin:0;

13 padding:0;

14 }

15 .grid-container {

16 height:100vh;

17 display: grid;

18 grid-template-columns: 10px repeat(3, [column] 1fr

[colgutter] 10px)
19
[sidebarstart] 150px [sidebarend]
20
10px;
21
grid-template-rows: 10px repeat(2, [row] 1fr [rowgutter]
22 10px);

23 }

24

25 .grid-item {

26 background-color: #ddd;

27 }

28
 672

29 .special-item{

30 grid-column: column 2;

31 grid-row: row 1;

32 background-color: #bbb;

33 }

34 .item1{

35 grid-column: column 1;

36 grid-row: row 1;

37 }

38 .item2{

39 grid-column: column 3;

40 grid-row: row 1;

41 }

42 .item3{

43 grid-column: column 1;

44 grid-row: row 2;

45 }

46 .item4{

47 grid-column: column 2;

48 grid-row: row 2;

49 }
 673

.sidebar{

50 grid-column: sidebarstart / sidebarend;

51 grid-row: 2 / 5;

52 background-color: #ccc;

53 }

54 </style>

55 </head>

56 <body>

57 <div class="grid-container">

58 <div class="grid-item special-item"></div>

59 <div class="grid-item item1"></div>

60 <div class="grid-item item2"></div>

61 <div class="grid-item item3"></div>

62 <div class="grid-item item4"></div>

63 <div class="grid-item sidebar"></div>

64 </div>

65 </body>

</html>

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

1 .sidebar{

2 grid-column: sidebarstart / sidebarend;

3 grid-row: 2 / 5;

4 background-color: #ccc;

5 }

Области грида
Последнее обновление: 09.05.2017

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

Для определения областей у grid-контейнера применяется свойство grid-template-areas. Например, определим три области:

1 <!DOCTYPE html>

2 <html>

3 <head>
 675

4 <meta charset="utf-8">

5 <meta name="viewport" content="width=device-width" />

6 <title>Grid Layout в CSS3</title>

7 <style>

8 *{

9 box-sizing: border-box;

10 }

11 html, body{

12 margin:0;

13 padding:0;

14 }

15 .grid-container {

16 height:100vh;

17 display: grid;

18 grid-template-areas: "header header"

19 "sidebar content"

20 "sidebar content";

21 grid-template-columns: 150px 1fr;

22 grid-template-rows: 100px 1fr 100px;

23 }

24 .header { grid-area: header; background-color: #bbb; }

 676

25 .sidebar { grid-area: sidebar; background-color: #ccc; }

26 .content { grid-area: content; background-color: #eee; }

27 </style>

28 </head>

29 <body>

30 <div class="grid-container">

31 <div class="header"></div>

32 <div class="sidebar"></div>

33 <div class="content"></div>

34 </div>

35 </body>

36 </html>

Здесь у grid-контейнера определяется два столбца и три строки:

1 grid-template-columns: 150px 1fr;

2 grid-template-rows: 100px 1fr 100px;

То есть в итоге у нас будет в гриде 3 х 2 = 6 ячеек. Но в разметке страницы определено три элемента с одноименными областями:
header, sidebar, content. И свойство grid-template-areas как раз устанавливает, как эти области будут располагаться в ячейках грида:

1 grid-template-areas: "header header"

2 "sidebar content"
 677

3 "sidebar content";

Выражение "header header" представляет первую строку и указывает, что область header занимает две ячейки подряд подряд.

Следующее выражение "sidebar content" указывает на вторую строку, где область sidebar занимает первую ячейку, а content -
вторую ячейку. Третья строка повторяет вторую. То есть в итоге, если смотреть по ячейкам, то получится следующим образом:

Для установки области у элементов задается свойство grid-area:

.header {
1
grid-area: header; /* элемент с классом header помещается в область
2
header*/
3
background-color: #bbb;
4
}

В итоге мы получим следующую страницу:

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

1 <!DOCTYPE html>

2 <html>

3 <head>
 678

4 <meta charset="utf-8">

5 <meta name="viewport" content="width=device-width" />

6 <title>Grid Layout в CSS3</title>

7 <style>

8 *{

9 box-sizing: border-box;

10 }

11 html, body{

12 margin:0;

13 padding:0;

14 }

15 .grid-container {

16 height:100vh;

17 display: grid;

18 grid-template-areas: "header header header header

header"
19
". . . . ."
20
"menu . content . sidebar"
21
". . . . ."
22
"footer footer footer footer
23
footer";
24
 679

grid-template-columns: 130px 5px 1fr 5px 130px;

25 grid-template-rows: 90px 5px 1fr 5px 90px;

26 }

27 .header { grid-area: header; background-color: #bbb; }

28 .menu { grid-area: menu; background-color: #ccc; }

29 .sidebar { grid-area: sidebar; background-color: #ccc; }

30 .content { grid-area: content; background-color: #eee; }

31 .footer { grid-area: footer; background-color: #bbb; }

32 </style>

33 </head>

34 <body>

35 <div class="grid-container">

36 <div class="header"></div>

37 <div class="content"></div>

38 <div class="menu"></div>

39 <div class="sidebar"></div>

40 <div class="footer"></div>

41 </div>

42 </body>

</html>
 680

Теперь грид содержит 5 строк и 5 столбцов, то есть в совокупности 25 ячеек, которые размещают 5 областей: header, menu, sidebar,
content и footer.

Свойство grid-template-areas в стилях grid-контейнера опять же содержит определение того, как все эти области сопоставляются
с ячейками. Например, элемент header должен занимать все пять ячеек первой строки: "header header header header header". Но
определение второй строки, высота которой 5px, выглядит уже необычно: ". . . . .". Точка означает, что данная ячейка не будет
принадлежать ни одной области и останется незаполненной. Если надо оставить 5 незаполненных ячеек, то указывается пять
точек, между которыми ставятся пробелы. В итоге мы получим пять областей, между которыми будут располагаться
незаполненные пространства:

Макет страницы в Grid Layout

Последнее обновление: 09.05.2017

Рассмотрим создание простейшего адаптивного стандартного макета веб-страницы, который состоит из шапки, подвала, основного
содержимого, блока навигации и сайдбара. Для этого определим следующую веб-станицу:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">
 681

5 <meta name="viewport" content="width=device-width" />

6 <title>Grid Layout в CSS3</title>

7 <style>

8 *{

9 box-sizing: border-box;

10 }

11 html, body{

12 margin:0;

13 padding:0;

14 }

15 .grid-container {

16 height:100vh;

17 display: grid;

18 grid-template-areas: "header"

19 "."

20 "menu"

21 "."

22 "content"

23 "."

24 "sidebar"

25 "."
 682

26 "footer";

27 grid-template-columns: 1fr;

28 grid-template-rows: 80px 5px 80px 5px 1fr 5px 80px 5px

80px;
29
}
30
.header { grid-area: header; background-color: #bbb; }
31
.menu { grid-area: menu; background-color: #ccc; }
32
.sidebar { grid-area: sidebar; background-color: #ccc; }
33
.content { grid-area: content; background-color: #eee; }
34
.footer { grid-area: footer; background-color: #bbb; }
35
h3{
36
text-align:center;
37
}
38
@media screen and (min-width: 468px) {
39

40
.grid-container {
41
height:100vh;
42
display: grid;
43
grid-template-areas: "header header header header
44
header"
45
". . . . ."
46
 683

"menu . content . sidebar"

". . . . ."
47
"footer footer footer footer
48
footer";
49
grid-template-columns: 130px 5px 1fr 5px 130px;
50
grid-template-rows: 90px 5px 1fr 5px 90px;
51
}
52
}
53
</style>
54
</head>
55
<body>
56
<div class="grid-container">
57
<div class="header"><h3>Header</h3></div>
58
<div class="content"><h3>Content</h3></div>
59
<div class="menu"><h3>Menu</h3></div>
60
<div class="sidebar"><h3>Sidebar</h3></div>
61
<div class="footer"><h3>Footer</h3></div>
62
</div>
63
</body>

</html>
 684

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

Однако, так как предполагается, что веб-станицу могут просматривать на мобильных устройствах, где ширина экрана ограничена,
то хотелось бы иметь адаптивный макет. Поэтому в стиля имеются два разных определения грида. Одно определение грида для
мобильных устройств (условно в качестве ширины устройств выбрано значение в 468px):

1 .grid-container {

2 height:100vh;

3 display: grid;

4 grid-template-areas: "header"

5 "."

6 "menu"

7 "."

8 "content"

9 "."

10 "sidebar"

11 "."

12 "footer";

13 grid-template-columns: 1fr;

14 grid-template-rows: 80px 5px 80px 5px 1fr 5px 80px 5px 80px;

15 }

В таком состоянии грид имеет только один столбец и 5 строк для каждой области плюс 4 строки-разделители.
 685

При увеличении ширины экрана в действие вступает другое определение грида:

1 .grid-container {

2 height:100vh;

3 display: grid;

4 grid-template-areas: "header header header header header"

5 ". . . . ."

6 "menu . content . sidebar"

7 ". . . . ."

8 "footer footer footer footer footer";

9 grid-template-columns: 130px 5px 1fr 5px 130px;

10 grid-template-rows: 90px 5px 1fr 5px 90px;

11 }

В этом случае столбцов и строк будет по пять:

Дополнительные статьи
Переменные в CSS
Последнее обновление: 18.11.2018


 686

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

Стоит отметить, что хотя часто используется термин "переменные" (css variables), официально они называются custom
properties (кастомные или настраиваемые свойства).

Определение переменных CSS должно начинаться с префикса --, например, --my-color. Они могут быть определены для любого
элемента. Например:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <meta name="viewport" content="width=device-width" />

6 <title>Variables в CSS3</title>

7 <style>

8 div {

9 --text-color: #ff4757;
 687

10 --text-size: 20px;

11 height: 40px;

12 font-family: Verdana;

13 }

14

15 #div1 {

16 font-size: var(--text-size);

17 }

18

19 #div2 {

20 color: var(--text-color);

21 }

22

23 #p1 {

24 color: var(--text-color);

25 font-size: var(--text-size);

26 }

27 </style>

28 </head>

29 <body>

30 <div id="div1">Первый блок.</div>

 688

31 <div id="div2">Второй блок.</div>

32 <div><p id="p1">Третий блок.</p></div>

33 </body>

34 </html>

Здесь в коде CSS для элемента div определены две переменныx: --text-color и --text-size

1 --text-color: #ff4757;

2 --text-size: 20px;

С помощью выражения var() мы можем ссылаться на эти переменные в любой части кода CSS:

1 #p1 {

2 color: var(--text-color);

3 font-size: var(--text-size);

4 }

В итоге первый блок получит высоту шрифта из --text-size, второй блок получит цвет шрифта из --text-color, а третий блок получит
оба этих компонента.

Если нам потребуется изменить цвет текста, достаточно будет изменить значение переменной.

Подобные переменные можно определить для любого элемента. При этом они наследуется дочерними элементами. Так, в примере
выше мы видим, что вложенный элемент параграфа получает стили от родительского div.
 689

Но если бы параграф находился бы вне блока div:

1 <div id="div1">Первый блок.</div>

2 <div id="div2">Второй блок.</div>

3 <p id="p1">Третий блок.</p>

Тогда бы значения из переменных к нему бы не применялись:

Если же необходимо, чтобы переменные могли бы использоваться глобально для всех элементов, тогда их определяют для
элемента :root

1 :root{

2 --text-color: #ff4757;

3 --text-size: 20px;

4 }

Резервные значения

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

1 <!DOCTYPE html>

2 <html>
 690

3 <head>

4 <meta charset="utf-8">

5 <meta name="viewport" content="width=device-width" />

6 <title>Variables в CSS3</title>

7 <style>

8 :root{

9 --tex-color: #ff4757;

10 --text-size: 20px;

11 --reserved-color: #5352ed;

12 }

13 div {

14 height: 35px;

15 font-family: Verdana;

16 }

17

18 #div1 {

19 color: var(--text-color, var(--reserved-color));

20 }

21

22 #div2 {

23 color: var(--text-color, var(--reserved-color, red));

 691

24 }

25

26 #div3 {

27 color: var(--text-color, #2ed573);

28 }

29 </style>

30 </head>

31 <body>

32 <div id="div1">Первый блок.</div>

33 <div id="div2">Второй блок.</div>

34 <div id="div3">Третий блок.</div>

35 </body>

36 </html>

Второй параметр в функции var() позволяет задать резервное значение. Это может быть как точное значение, так и опять же
значение другой переменной:

1 color: var(--text-color, var(--reserved-color));

Для второй переменной можно также определить резервное значение, если она некорректна:

1 color: var(--text-color, var(--reserved-color, red));

 692

Создание тем CSS с помощью переменных

Последнее обновление: 18.11.2018

Использование переменных в CSS открывает нам возможность создания и применения тем на веб-странице. Например, определим
следующую веб-страницу:

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <meta name="viewport" content="width=device-width" />

6 <title>Темы в CSS3</title>

7 <style>

8 :root{

9 --panel-bg-color: #dfe4ea;

10 --container-bg-color: #f1f2f6;

11 --text-color: #2f3542;
 693

12 }

13 :root[theme='dark'] {

14 --panel-bg-color: #2f3542;

15 --container-bg-color: #57606f;

16 --text-color: #ced6e0;

17 }

18 * {

19 margin: 0;

20 }

21 html{

22 height: 100%;

23 }

24 body{

25 height: 100%;

26 font-family: Verdana;

27 display: flex;

28 flex-direction: column;

29 color: var(--text-color);

30 }

31 nav{

32 padding: 1.2rem;
 694

33 background: var(--panel-bg-color);

34 }

35 nav a{

36 padding: 1.1rem;

37 }

38 .container{

39 flex: 1;

40 padding: 1rem;

41 background: var(--container-bg-color);

42 }

43 footer{

44 padding: 1rem;

45 background: var(--panel-bg-color);

46 }

47 input[type=button] {

48 color: var(--text-color);

49 background: var(--panel-bg-color);

50

51 padding: 0.3rem;

52 margin: 0.2rem;

53 font-size: 1rem;
 695

54 }

55 </style>

56 </head>

57 <body>

58 <nav class="navbar"><a>Главная</a>|<a>Контакты</a>|<a>О
сайте</a></nav>
59
<div class="container">
60
<div>
61
<input type="button" value="Toggle" id="toggle-theme" />
62
</div>
63
<h2 class="title">Заголовок</h2>
64
<p class="content">Основное содержимое...</p>
65
</div>
66
<footer>
67
<p>Все права разрешены ©2018</p>
68
</footer>
69
<script>
70
const toggleBtn = [Link]("#toggle-theme");
71
[Link]("click", function() {
72
if([Link]("theme")){
73
[Link]("theme");
74
 696

}
75
else{
76
[Link]("theme", "dark");
77
}
78
});
79
</script>
80
</body>
81
</html>

В стилях страницы определены фактически две темы, которые содержат три переменных:

1 :root{

2 --panel-bg-color: #dfe4ea;

3 --container-bg-color: #f1f2f6;

4 --text-color: #2f3542;

5 }

6 :root[theme='dark'] {

7 --panel-bg-color: #2f3542;

8 --container-bg-color: #57606f;

9 --text-color: #ced6e0;

10 }
 697

Первая тема - условно светлая, вторая - условно темная. При темной теме корневой элемент, то есть элемент <html> будет иметь
атрибут theme="dark".

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

Для переключения тем у кнопки через несложный код javascript установлен обработчик нажатия, который проверяет наличие
атрибута "theme" (что будет означать, что установлена темная схема). И при наличии атрибута убирает его, а при его отсутствии,
наоборот, устанавливает.

1 const toggleBtn = [Link]("#toggle-theme");

2 [Link]("click", function() {

3 if([Link]("theme")){

4 [Link]("theme");

5 }

6 else{

7 [Link]("theme", "dark");

8 }

9 });

В результате при нажатии на кнопку произойдет глобальное переключение стилей веб-страницы: