Анимация

HTML5 и CSS3 на примерах

Вступление

HTML (HyperText Markup Language, язык разметки гипертекста) — это прежде всего система вёрстки, которая определяет, как и какие элементы должны располагаться на веб-странице. Информация на сайте, способ её представления и оформления зависят исключительно от разработчика и тех целей, которые он перед собой ставит.

Что же такое стили или CSS (Cascading Style Sheets, каскадные таблицы стилей)? Стилем называется набор параметров форматирования, который применяется к элементам документа, чтобы изменить их внешний вид. Возможность работы со стилями издавна включают в развитые издательские системы и текстовые редакторы, тем самым позволяя одним нажатием кнопки придать тексту заданный, заранее установленный вид. Теперь это доступно и создателям сайта, когда цвет, размеры текста и другие параметры хранятся в определённом месте и легко «прикручиваются» к любому элементу.

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

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

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

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

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

HTML5 и CSS3 на примерах. Версия 1.0 от 16.03.2015

webref.ru


Текст

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

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

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


Шрифты

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

  • Создать надпись в графическом редакторе и вставить её на веб-страницу как изображение. Этот метод подключает всю мощь графических систем по управлению текстом, при этом допустимо включать любые шрифты. Из недостатков самый главный состоит в том, что рисунок так просто не изменишь, и придётся вновь обращаться к редактору. Так что рисунки в качестве текста применяются только для создания небольших и постоянных надписей вроде заголовков.
  • Загрузить пользовательский шрифт. Действительно, если можно загружать по сети изображения, почему бы то же самое не проделать и со шрифтами?
  • Воспользоваться стандартными шрифтами, встроенными в браузер и операционную систему. Этот способ является пока наиболее распространённым для указания шрифта на веб-странице.

Всё многообразие шрифтов (несмотря на то, что они совершенно разные по виду и форме) можно поделить на определённые группы: шрифты с засечками, шрифты без засечек, моноширинные и декоративные шрифты.

Шрифты с засечками

Такие шрифты характеризуются засечками — поперечными элементами на концах букв, которые называются ещё серифами (serif) (рис. 1).

Текст, в котором используется шрифт с засечками

Рис. 1. Текст, в котором используется шрифт с засечками

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

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

Шрифты без засечек

Шрифты без засечек, называемые также гротесками или рублеными шрифтами, не имеют серифов на концах букв, поэтому для их обозначения используется термин sans-serif (в переводе с французского — «без серифа»). На сайтах подобные шрифты нашли применение в самых разнообразных элементах: заголовках, надписях на кнопках форм, основном тексте и т. д. Преимущество шрифта без засечек состоит в том, что он одинаково хорошо передаёт текст как в крупном, так и в мелком начертании (рис. 2).

Текст со шрифтом без засечек

Рис. 2. Текст со шрифтом без засечек

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

Моноширинный шрифт

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

Текст с моноширинными символами

Рис. 3. Текст с моноширинными символами

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

Опять же в силу того, что все символы одинаковы по ширине, это накладывает отпечаток на комфортность чтения текста. Понятно, что хотя буквы «Г» и «Ш» могут быть равными по размеру, это приводит к излишнему растягиванию символов, что идёт в ущерб их красоте и элегантности.

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

К моноширинным шрифтам, применяемым на сайтах, относится шрифт Courier и его разновидности.

Декоративные шрифты

Эту категорию составляют шрифты, не вошедшие в предыдущие описания. Подобные шрифты используют для создания определённого настроения на сайте, поскольку в большинстве своем они трудны для восприятия и чтения. Наиболее часто декоративные шрифты применяются для заголовков, текстовых выделений и, как правило, никогда для основного текста (рис. 4).

Рис. 4. Декоративный шрифт

В Windows для размещения на сайте обычно применяется декоративный шрифт Comic Sans MS.


Установка шрифта

Выбор шрифта для оформления текста осуществляется через стилевое свойство font-family. Оно устанавливает семейство шрифтов, которое будет использоваться для оформления текста. Список шрифтов может включать одно или несколько названий, разделённых запятой. Если в имени шрифта содержатся пробелы, например, Trebuchet MS, оно должно заключаться в двойные или одинарные кавычки.

Когда браузер встречает первый шрифт в списке, он проверяет его наличие на компьютере пользователя. Если такого шрифта нет, берётся следующее имя из списка и также анализируется на присутствие. Поэтому несколько шрифтов увеличивает вероятность того, что хотя бы один из них будет обнаружен на клиентском компьютере. Заканчивают список обычно ключевым словом, которое описывает тип шрифта — serif, sans-serif, cursive, fantasy или monospace. Таким образом, последовательность шрифтов лучше начинать с экзотических типов и заканчивать обобщённым именем, которое задаёт вид начертания (пример 1).

Универсальные семейства шрифтов:

  • serif — шрифты с засечками (антиквенные), типа Times;
  • sans-serif — рубленые шрифты (шрифты без засечек или гротески), типичный представитель — Arial;
  • cursive — курсивные шрифты, обычно подставляется Comic Sans MS;
  • fantasy — декоративные шрифты; как правило, в Windows используется шрифт Impact, либо текст отображается шрифтом, установленным по умолчанию;
  • monospace — моноширинные шрифты, ширина каждого символа в таком семействе одинакова, например, шрифт Courier.

Пример 1. Установка шрифта

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Установка шрифта</title>
  <style>
   body {
    font-family: 'Times New Roman', Times, serif;
   }
   td {
    font-family: Arial, sans-serif;
   }
   h1, h2, h3 {
    font-family: Verdana, Tahoma, Arial, sans-serif;
   }
  </style>
 </head>
 <body>
  …
 </body>
</html>


Загрузка своего шрифта

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

h1 { font-family: SuperPuperFont; }

Значением свойства font-family выступает название гарнитуры шрифта, она будет применяться ко всем заголовкам <h1>. Но что увидят посетители сайта, у которых наш эффектный и редкий шрифт не установлен? Подобная ситуация наиболее вероятна, так что если браузер не распознаёт заявленный шрифт, он будет использовать шрифт по умолчанию, к примеру в Windows это Times New Roman. Весь наш тщательно продуманный шрифтовой дизайн в одночасье рассыплется и пойдёт прахом, поэтому надо поискать наиболее универсальное решение. Первое что сразу же приходит в голову — это организовать загрузку файла шрифта на компьютер пользователя и отображение текста выбранным шрифтом. По сравнению с другими методами вроде отображения текста через рисунок этот способ самый простой и универсальный.

Какие плюсы в итоге даёт нам загрузка файла шрифта с последующим применением через CSS.

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

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

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

В табл. 1 перечислены версии браузеров и форматы шрифтов, которые они поддерживают.

Табл. 1. Поддерживаемые форматы
Формат | Internet Explorer | Chrome | Opera | Safari | Firefox | Android
TTF | 9 | 4 | 10 | 3.1 | 3.5 | 2.2
EOT | 5-8 |  |  |  |  |
WOFF | 9 | 5 |  |  | 3.6 |
SVG |  | 1 | 9 | 3.1 | 3.5 |

Самый поддерживаемый формат — TTF. За исключением IE до версии 9.0 все браузеры его прекрасно понимают. Так что если у вас шрифт именно в этом формате и вы ориентируетесь на современные браузеры, никаких дополнительных действий делать не придётся. Достаточно в стилях написать следующий код (пример 1).

Пример 1. Подключение TTF

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Шрифт</title>
  <style>
   @font-face {
    font-family: Pompadur; /* Гарнитура шрифта */
    src: url(fonts/pompadur.ttf); /* Путь к файлу со шрифтом */
   }
   h1 {
    font-family: Pompadur, 'Comic Sans MS', cursive;
   }
  </style>
 </head>
 <body>
  <h1>Современный элемент политического процесса</h1>
  <p>По сути, политическое учение Монтескье приводит
     континентально-европейский тип политической культуры,
     что получило отражение в трудах Михельса.</p>
 </body>
</html>

Вначале загружаем сам файл шрифта с помощью правила @font-face. Внутри него пишем название гарнитуры шрифта через font-family и путь к файлу через src. Дальше используем шрифт как обычно. Так, если нам требуется задать шрифт заголовка, то для селектора h1, как показано в примере, задаём свойство font-family с именем загруженного шрифта. Для старых версий IE через запятую перечисляем запасные варианты. В данном случае шрифт заголовка будет «Comic Sans MS», поскольку IE8 и ниже не поддерживает формат TTF.

Результат данного примера показан на рис. 1.

Заголовок с загруженным шрифтом

Рис. 1. Заголовок с загруженным шрифтом

Что делать, если вам позарез нужен свой шрифт в IE8? К счастью, @font-face позволяет подключать одновременно несколько файлов шрифтов разных форматов. Браузеру остаётся только выбрать подходящий. Таким образом, универсальное решение, работающее во всех браузерах, сводится к конвертации имеющегося формата TTF в EOT с последующим подключением обоих файлов.

Для конвертации имеется несколько онлайновых сервисов, позволяющих загрузить TTF-файл и на выходе получить EOT-файл. К сожалению, у большинства этих сервисов одна и та же беда — файл мы получаем, но русский язык в нём не поддерживается. В итоге нужный результат не достигается, конвертация происходит неверно. Среди проверенных сайтов оказался один, показавший текст в IE правильно.

http://www.kirsle.net/wizards/ttf2eot.cgi

Переходим на этот сайт, загружаем TTF-файл и нажимаем кнопку «Convert TTF to EOT», после чего сохраняем полученный файл в папку со шрифтами. В стилях осталось совершить небольшой трюк и заставить разные браузеры загружать шрифт в нужном формате. Для этого добавляем два параметра src. Первый указывает на файл EOT и предназначен для старых версий IE. Второй параметр src должен содержать два адреса перечисляемых через запятую, один из них указывает на файл TTF. Дело в том, что IE версии 8.0 и младше не понимает запятую в параметре src и, соответственно, будет игнорировать параметр целиком. Вариантов написания может быть несколько, например, повторить url, указать имя шрифта внутри параметра local или вообще написать несуществующий шрифт. Если браузер не сможет загрузить такой шрифт, то он перейдёт ко второму в списке, а он у нас написан правильно. Допустимые способы написания.

src: url(fonts/pompadur.ttf), url(fonts/pompadur.ttf);
src: local(pompadur), url(fonts/pompadur.ttf);
src: local('bla bla'), url(fonts/pompadur.ttf);

Работающий вариант подключения шрифта для всех версий браузеров показан в примере 2.

Пример 2. Подключение EOT

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Шрифт</title>
  <style>
   @font-face {
    font-family: Pompadur; /* Гарнитура шрифта */
    src: url(fonts/pompadur.eot); /* Для IE5-8 */
    src: local(pompadur), url(fonts/pompadur.ttf); /* Для остальных браузеров */
   }
   h1 {
    font-family: Pompadur, 'Comic Sans MS', cursive;
   }
  </style>
 </head>
 <body>
  <h1>Современный элемент политического процесса</h1>
  <p>По сути, политическое учение Монтескье приводит
     континентально-европейский тип политической культуры,
     что получило отражение в трудах Михельса.</p>
 </body>
</html>

Google Web Fonts

Удобный сервис, берущий на себя рутину по поддержке разных форматов шрифтов и версий браузеров, вы найдёте по адресу www.google.com/webfonts. Хотя в коллекции сравнительно мало разных шрифтов (их несколько десятков), все они подобраны очень качественно и свободны для использования на сайтах.

Перед выбором шрифта переключите значение Script на Cyrillic, тогда вы увидите список шрифтов поддерживающих русский язык (рис. 2).

Выбор шрифтов в Google Web Fonts

Рис. 2. Выбор шрифтов в Google Web Fonts

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

Загружаемые на страницу шрифты

Рис. 3. Загружаемые на страницу шрифты

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

1. Через элемент <link>. Строка будет иметь примерно следующий вид.

<link href='http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic' rel='stylesheet' type='text/css'>

2. Через правило @import. Такую строку вставляем в свой CSS-файл в самом верху.

@import url(http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic);

3. Через JavaScript.

В принципе, все пути равноценны, так что выбирайте по своему предпочтению.

Преимущества применения данного сервиса такие.

  • Шрифты свободны для использования, вам не нужно за них платить.
  • Предлагаемые шрифты «заточены» для просмотра на экране, файлы оптимизированы и занимают сравнительно небольшой объём.
  • Браузер определяется автоматически и под него выдаётся шрифт в нужном формате.

Один из основных плюсов сервиса, что шрифты хранятся в форматах TTF, EOT, WOFF, SVG и загружаются после проверки браузера. Так, формат EOT будет доступен только для старых версий IE.

Использовать Google Web Fonts или нет решать вам. Если не нашли там подходящего шрифта, всегда можно подключить популярный и распространённый TTF. Тем более, что он поддерживается последними версиями всех популярных браузеров.


Размер текста

Размер шрифта или, как он ещё называется в типографике — кегль, определяется высотой символов, которая, в свою очередь, на веб-странице может задаваться как в относительных (em, rem), так и в абсолютных единицах (дюймы (in), миллиметры (mm), пункты (pt) и др).

На вид шрифта влияет не только заданный размер, но и выбор гарнитуры. Шрифт Arial выглядит крупнее, чем шрифт Times того же размера, а шрифт Courier New чуть меньше шрифта Arial (рис. 1). Учитывайте эту особенность при выборе шрифта и его размеров.

Размеры текста на веб-странице

Рис. 1. Размеры текста на веб-странице

На рис. 1 приведены три типа шрифтов с размером 12 и 24 пункта. Легко заметить, что при одинаковых заданных размерах текст различается как по высоте, так и по насыщенности.

Размер текста устанавливается через свойство font-size, значение может быть задано несколькими способами. Набор констант (хх-small, x-small, small, medium, large, x-large, xx-large) указывает размер, который называется абсолютным. По правде говоря, он не совсем абсолютный, поскольку зависит от настроек браузера и операционной системы. Другой набор констант (larger, smaller) устанавливает размеры шрифта относительно родителя.

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

Пиксели

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

Пункты

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

em

Эта единица показывает размер шрифта текущего элемента и он всегда равен 1em независимо от реального размера текста. Зачем тогда использовать? Em связан с размером шрифта родительского элемента и мы можем легко изменять размер текста самого элемента в большую (1.2em) или меньшую сторону (0.8em) без дополнительных вычислений. В каком-то смысле это является синонимом процентной записи.

rem

При использовании множественных вложений одних элементов в другие, с em легко запутаться в вычислениях. Например, если уменьшить размер шрифта до 0.8em, а потом у дочернего элемента увеличить до 1.2em, то будет ли текст одного размера? Единица rem привязана только к корневому элементу и таким образом не зависит от уровня вложения элементов.

В примере 1 задействовано сразу несколько единиц измерений.

Пример 1. Изменение размеров текста

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Размер текста</title>
  <style>
   body { font-size: 16px; }
   h1 { font-size: 22pt; }
   p {  font-size: 1.5em; }
  </style>
 </head>
 <body>
  <h1>Почему неоднозначна первообразная функция?</h1>
  <p>Начало координат, в первом приближении, непредсказуемо.
  Абсолютно сходящийся ряд накладывает полином, что
  несомненно приведет нас к истине.</p>
 </body>
</html>

Результат данного примера показан на рис. 2.

адание размера для заголовка и основного текста

Рис. 2. Задание размера для заголовка и основного текста


Начертание

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

Разное начертание шрифта текста

Рис. 1. Разное начертание шрифта текста

Большая часть начертаний в той или иной мере встречается в различных текстовых редакторах и допускает смешивание с другими. Например, можно сразу установить жирный курсивный текст. Что касается выворотки, то здесь светлый текст выводится на тёмном фоне. Для больших объёмов подобный текст (тёмные буквы на светлом фоне) читать труднее, чем в традиционном исполнении, поэтому выворотка обычно применяется для привлечения внимания читателя к тексту, например заголовку.

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

Табл. 1. Управление видом текста
Код HTML | Описание
<b>Текст</b> | Определяет жирное начертание текста.
<strong>Текст</strong> | Сильное выделение текста. Визуально не отличается от <b>.
<i>Текст</i> | Устанавливает курсивное начертание текста.
<em>Текст</em> | Выделение текста. Визуально не отличается от <i>.
<sup>Текст</sup> | Воспроизводит текст как верхний индекс. Шрифт при этом отображается выше базовой линии текста и уменьшенного размера.
<sub>Текст</sub> | Отображает шрифт в виде нижнего индекса. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера.

Подчёркивание текста

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

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

  • Подчёркнутый текст читается хуже, чем обычный. С учётом того, что чтение с экрана по сравнению с чтением с листа бумаги менее комфортно, данный фактор становится важным для повышения удобства восприятия информации.
  • На веб-страницах подчёркивание ссылок стало определённым стандартом. Когда мы видим на сайте подчёркнутый текст, то воспринимаем его в силу привычки как ссылку. Если это не так, возникает раздражение: почему этот текст выглядит как ссылка, но при этом ссылкой не является?

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

Для добавления подчёркивания есть два основных метода. Первый заключается в использовании свойства text-decoration со значением underline, как показано в примере 1.

Пример 1. Свойство text-decoration

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Подчёркивание</title>
  <style>
   .dot {
    text-decoration: underline;
   }
  </style>
 </head>
 <body>
  <h1 class="dot">Часть 4, в которой Пол и
   Пропилен наносят ответный удар</h1>
 </body>
</html>

Результат данного примера показан на рис. 2. Цвет и толщина такой линии устанавливаются браузером самостоятельно в зависимости от размера и цвета текста и не могут быть изменены через стили. Кстати, это же свойство со значением none применяется для того, чтобы убрать подчёркивание у текста, например, у ссылок.

Вид линии, полученной с помощью text-decoration

Рис. 2. Вид линии, полученной с помощью text-decoration

Второй метод позволяет установить линию произвольного стиля и цвета через свойство border-bottom. Например, для добавления пунктирного подчёркивания у ссылок используем значение dashed. Чтобы подчёркивание применялось не ко всем ссылкам, следует указать уникальный класс, назовём его, скажем dot. Также необходимо убрать исходное подчёркивание у ссылок (пример 2).

Пример 2. Пунктирное подчёркивание

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Пунктирное подчёркивание</title>
  <style>
   a.dot {
    text-decoration: none; /* Убираем подчёркивание */
    border-bottom: 1px dashed #000080; /* Добавляем свою линию */
   }
  </style>
 </head>
 <body>
  <p><a href="link1.html">Обычная ссылка</a> на другую страницу.</p>
  <p><a href="link2.html" class="dot">Ссылка с пунктирным подчёркиванием</a>.</p>
 </body>
</html>

Результат примера показан на рис. 3.

Вид обычной ссылки и ссылки с пунктирным подчёркиванием

Рис. 3. Вид обычной ссылки и ссылки с пунктирным подчёркиванием

Толщина линии и цвет подчёркивания у ссылок также задаются через свойство border-bottom. Обратите внимание на некоторые моменты. Линия, полученная через border-bottom, располагается чуть ниже традиционного подчёркивания. При добавлении такой линии к блочным элементам, вроде <h1>, линия будет не под текстом, а занимать всю ширину элемента.

Зачёркивание

Зачёркивание обычно применяется в текстах для создания эффекта редактирования. Дескать, что-то написали, потом передумали, но старый текст остался. В таком случае удобнее использовать элемент <del>, он как раз и предназначен для этой цели. Текст внутри <del> будет отображаться зачёркнутым.

<p>Вот такой он <del>редиска</del> нехороший человек.</p>

Выворотка

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

Пример 3. Цвет фона и текста

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Выворотка</title>
  <style>
   .invert {
    background: #000; /* Чёрный цвет фона */
    color: #fff; /* Белый цвет текста */
    padding: 2px; /* Поля вокруг текста */
   }
  </style>
 </head>
 <body>
  <p>Обычный текст</p>
  <p><span class="invert">Выворотка</span></p>
 </body>
</html>

Стиль для выворотки лучше применять не к блочным элементам, а к строчным, вроде <span>, тогда фон будет совпадать с размером самого текста.


Наклон текста

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

Для создания курсивного текста применяются элементы <i> и <em>, а также стилевое свойство font-style. Следует отметить, что <i> и <em> несмотря на сходство результата в браузере, не совсем эквивалентны и заменяемые. Первый элемент <i> (сокращение от англ. слова italic — курсив) — является элементом для физической разметки и устанавливает курсивный текст, а <em> (сокращение от англ. emphasis — выделение, акцент) — элементом логической разметки и определяет важность помеченного текста. Такое разделение элементов на логическое и физическое форматирование изначально предназначалось чтобы сделать HTML универсальным, в том числе не зависящим от устройства вывода информации. Теоретически, если воспользоваться, например, речевым браузером, то текст, оформленный с помощью <i> и <em>, будет отмечен по-разному. Однако получилось так, что в популярных браузерах результат использования этих элементов равнозначен.

Чтобы различия были более заметны, добавим несколько классов с разным цветом текста (пример 1). Так мы не только сделаем акцент на выбранном тексте, но и выделим его визуально.

Пример 1. Изменение цвета текста

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Элемент em</title>
  <style>
   .error { color: #d50019; }
   .info { color: #006cc9; }
   .success { color: #0f9400; }
   }
  </style>
 </head>
 <body>
  <p>Варианты текста: <em class="success">для успеха</em>,
  <em class="info">для информации</em>,
  <em class="error">для ошибок</em></p>
 </body>
</html>

Результат примера показан на рис. 1.

Вид текста, оформленного через em, в браузере

Рис. 1. Вид текста, оформленного через <em>, в браузере

font-style определяет начертание шрифта — normal (обычное), italic (курсивное) или oblique (наклонное), как показано в примере 2. Когда для текста установлено курсивное или наклонное начертание, браузер обращается к системе для поиска подходящего шрифта. Если заданный шрифт не найден, браузер использует специальный алгоритм для имитации нужного вида текста. Результат и качество при этом могут получиться неудовлетворительными, особенно при печати документа.

Пример 2. Курсивный и наклонный текст

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Курсивный и наклонный текст</title>
  <style>
   .italic { font-style: italic; } /* Курсивный текст */
   .oblique { font-style: oblique; } /* Наклонный текст */
  </style>
 </head>
 <body>
  <p class="italic">Курсивный текст хорошо использовать для цитат и прямой речи.</p>
  <p class="oblique">Наклонный шрифт пригодится для создания ненавязчивого выделения в тексте.</p>
 </body>
</html>

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

Курсивный и наклонный текст в браузерах отображается одинаково

Рис. 2. Курсивный и наклонный текст в браузерах отображается одинаково


Насыщенность

Насыщенностью называют увеличение толщины линий шрифта и соответственно контраста. Обычно различают четыре вида насыщенности: светлое начертание, нормальное, полужирное и жирное (рис. 1).

Разная насыщенность шрифта

Рис. 1. Разная насыщенность шрифта

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

Насыщенность шрифта управляется элементами <b>, <strong> или, более гибкий вариант, через свойство font-weight. Оно определяет насыщенность с помощью ключевых слов: bold — полужирное, bolder — жирное, lighter — светлое, normal — нормальное начертание. Также допустимо использовать условные единицы от 100 до 900 с шагом 100. Сверхсветлое начертание шрифта, которое может отобразить браузер, имеет значение 100, а сверхжирное — 900. Нормальное начертание шрифта (которое установлено по умолчанию) эквивалентно значению 400, стандартный полужирный текст — 700.

Поскольку свойство font-weight предоставляет больше возможностей по управлению жирным начертанием текста, то можно переназначить свойства элемента <b> через стили (пример 1).

Пример 1. Насыщенность шрифта

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Жирный текст</title>
  <style>
   b {
    color: #000080; /* Тёмно-синий цвет текста */
    font-weight: 900; /* Сверхжирная насыщенность */
   }
  </style>
 </head>
 <body>
  <p><b>Жирный текст</b></p>
  <p>Обычный текст</p>
 </body>
</html>

В примере показано изменение параметров элемента <b>, в частности текст будет тёмно-синего цвета и максимальной насыщенности.

Как и в случае с <i> и <em>, элементы <b> и <strong> дают одинаковый результат в браузере, но по своей задумке различаются. Элемент <b> (от англ. bold — жирный) предназначен для жирного начертания, а <strong> (англ. сильный) — для важного акцентирования текста.


Верхний и нижний индекс

Индексом по отношению к тексту называется смещение символов относительно базовой линии вверх или вниз. В зависимости от положительного или отрицательного значения смещения, индекс называется, соответственно, верхним или нижним. Они активно применяются в математике, физике, химии и для обозначения единиц измерения. HTML предлагает два элемента для создания индекса: <sup> (от англ. superscript) — верхний индекс и <sub> (от англ. subscript) — нижний индекс. Текст, помещённый в один из этих контейнеров, обозначается меньшим размером, чем базовый текст, и смещается относительно него вверх или вниз. В примере 1 приведено совместное использование указанных элементов и стилей для изменения вида текста.

Пример 1. Создание верхнего и нижнего индекса

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Верхний и нижний индекс</title>
  <style>
   .formula { font-size: 1.4em; /* Размер текста формулы */ }
   sup, sub {
    font-style: italic; /* Курсивное начертание */
    color: red; /* Красный цвет символов */
   }
   sub {
    color: blue; /* Синий цвет символов */
   }
  </style>
 </head>
 <body>
  <p>Характеристическое уравнение поверхности второй степени</p>
  <p class="formula">λ<sup>3</sup> - I<sub>1</sub>λ<sup>2</sup> +
    I<sub>2</sub>λ - I<sub>3</sub> = 0</p>
 </body>
</html>

В примере одновременно встречается как нижний, так и верхний индекс. Для изменения начертания шрифта индекса применяются стили, которые задают единое оформление (рис. 1).

Вид индексов после применения стилей

Рис. 1. Вид индексов после применения стилей

Можно вообще отказаться от использования <sup> и <sub> в пользу стилей. Аналогом этих элементов служит свойство vertical-align, заставляющее текст смещаться по вертикали на заданное расстояние. В частности, в примере 2 в качестве значения применяется 0.8em для верхнего индекса и -0.5em для нижнего. Em — это относительная единица, равная размеру текущего шрифта. Например, 0.5em говорит о том, что текст надо сдвинуть на половину размера шрифта.

Пример 2. Использование стилей для управления индексами

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Верхний и нижний индекс</title>
  <style>
   .formula {
    font-size: 1.6em; /* Размер текста */
    font-style: italic; /* Курсивное начертание */
   }
   .sup,  .sub {
    font-style: normal; /* Нормальное начертание */
    font-size: 0.6em; /* Размер индекса */
    color: red; /* Цвет верхнего индекса */
    vertical-align: 0.8em; /* Сдвигаем текст вверх */
   }
   .sub {
    color: blue; /* Цвет нижнего индекса */
    vertical-align: -0.5em; /* Сдвигаем текст вниз */
   }
  </style>
 </head>
 <body>
  <p>Многочлен степени <em>n</em></p>
  <p class="formula">f(x) = a<span class="sub">0</span> + a<span class="sub">1</span> x + ... +
   a<span class="sub">n-1</span> x<span class="sup">n-1</span> +
   a<span class="sub">n</span> x<span class="sup">n</span></p>
 </body>
</html>

В примере сама формула выводится увеличенным размером, символы верхнего индекса устанавливаются красным цветом, а нижние — синим (рис. 2).

Управление положением и видом нижнего и верхнего индекса

Рис. 2. Управление положением и видом нижнего и верхнего индекса

Использование элемента <span> делает код громоздким, поэтому лучше переопределить стили <sub> и <sup>, в частности, задать положение индекса, цвет и курсивное начертание.


Буквица

Буквица является художественным приемом оформления текста и представляет собой увеличенную первую букву, базовая линия которой ниже на одну или несколько строк базовой линии основного текста. Заметьте, что это не просто увеличенный символ, буквица не выступает над блоком текста, а является его частью. Чтобы выделить первую букву воспользуемся псевдоэлементом ::first-letter, он устанавливает стиль первого символа текста. Для этого добавим его к селектору p, как это показано в примере 1.

Пример 1. Создание буквицы

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Буквица</title>
  <style>
   p::first-letter {
    font-size: 3em; /* Размер буквицы */
    padding: 3px; /* Поля вокруг первой буквы */
    margin-right: 5px; /* Отступ справа */
    color: #e7685d; /* Цвет буквицы  */
    float: left; /* Обтекание по правому краю */
    line-height: 0.33em; /* Положение относительно текста */
   }
   p { clear: left; }
  </style>
 </head>
 <body>
  <p>Жил однажды бедный человек, и было у него сыновей
  что дырочек в сите, даже на одного больше. Днем и ночью горевал
  бедняга: что ему делать с детьми, очень уж много их, не перечесть.
  Никак не мог он придумать столько ремесел, чтобы каждому что-нибудь
  другое досталось.</p>
 </body>
</html>

Результат данного примера показан на рис. 1. Для начала увеличиваем размер буквицы через свойство font-size и устанавливаем желаемые поля вокруг буквы. Чтобы происходило обтекание используем свойство float со значением left. Тогда первые буквы будут выравниваться по левому краю, а остальной текст обтекать их справа и снизу. Свойство float может затронуть и нижние абзацы текста и получится некрасиво, поэтому для каждого абзаца отменяем его действие через clear. Положение буквы по вертикали относительно остального текста можно регулировать с помощью line-height. Экспериментируйте со значениями и получите разные варианты буквиц.

Рис. 1. Буквица

Если убрать свойство float и margin-right в примере, то мы получим выступающий инициал (рис. 2) — так называется увеличенная первая буква предложения, базовая линия которой совпадает с базовой линией основного текста. В отличие от буквицы выступающий инициал располагается на одной линии с текстом.

Рис. 2. Выступающий инициал


Фон

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

  • Установка фонового цвета.
  • Установка фонового рисунка и его параметров.
  • Добавление нескольких фоновых рисунков одновременно.
  • Создание линейных градиентов.
  • Создание радиальных градиентов.
  • Создание повторяющегося узора без рисунков.
  • Вывод иконок.
  • Смена иконки при наведении на неё курсора мыши.


Цвет фона

Для изменения цвета фона всей веб-страницы или отдельных элементов применяется универсальное свойство background или background-color. Цвет можно указывать в любом доступном для CSS формате. Наиболее распространены следующие способы.

По названию цвета

Браузеры поддерживают некоторые цвета по их названию. Вот некоторые ключевые слова — black (чёрный), white (белый), red (красный), green (зелёный), blue (синий) и др.

По шестнадцатеричному значению

Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из её названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, А, В, С, D, E, F. Числа от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решётки #, например #666999. Каждый из трёх цветов — красный, зелёный и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зелёную, а два последних — синюю. Допускается использовать сокращённую форму вида #rgb, где каждый символ следует удваивать. Так, запись #fc0 следует расценивать как #ffcc00. Регистр в данном случае значения не имеет, поэтому текст можно набирать как прописными, так и строчными символами.

С помощью RGB

Можно определить цвет, используя значения красной, зелёной и синей составляющей в десятичном исчислении. Каждое из трёх составляющих может принимать число от 0 до 255. Также допустимо задавать цвет в процентном отношении, например rgb(90%, 30%, 60%).

RGBA

Формат RGBA похож по синтаксису на RGB, но включает в себя альфа-канал, определяющий прозрачность элемента. Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности.

В примере 1 показано изменение цвета фона и текста.

Пример 1. Цвет фона

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Фон</title>
  <style>
   body {
    background-color: #fff1e4; /* Цвет фона веб-страницы */
    color: #333; /* Цвет текста веб-страницы */
   }
   h1 {
    color: rgb(231, 104, 93); /* Цвет текста заголовка */
   }
  </style>
 </head>
 <body>
  <h1>Устойчивость</h1>
  <p>Устойчивость по Ляпунову колебательно переворачивает устойчивый прибор.</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Цветной фон

Полупрозрачный фон

Формат RGBA позволяет задать цвет фона элемента полупрозрачным, тогда сквозь него будет проступать фон веб-страницы. Более заметно и эффектно это выглядит, когда у нас имеется фоновая картинка или узор, а не однотонный цвет. Тогда сквозь фон будет проступать рисунок, но при этом сохранится читаемость текста (рис. 2).

Рис. 2. Полупрозрачный фон

В примере 2 показано использование формата RGBA для создания такого фона.

Пример 2. Формат RGBA

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Фон</title>
  <style>
   body {
    background: url(images/aquaria.jpg); /* Фоновая картинка */
    background-size: cover; /* Растягиваем фон */
   }
   .block {
    background: rgba(0,0,0,0.6); /* Полупрозрачный фон */
    color: #fff; /* Цвет текста */
    padding: 20px; /* Поля вокруг текста */
   }
  </style>
 </head>
 <body>
  <div class="block">
   <h1>Подводный мир</h1>
   <p>В глубинах морей и океанов, существует свой, не сравнимый ни с чем ,
   удивительный, и не похожий на тот, что окружает нас с вами подводный мир.</p>
  </div>
 </body>
</html>


Фоновая картинка

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

Свойство background

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

Вид страницы с фоновым рисунком

Рис. 1. Вид страницы с фоновым рисунком

Пример 1. Добавление фонового рисунка

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Фон</title>
  <style>
   body {
    background:
     #c7b39b /* Цвет фона */
     url(images/dzen.png) /* Путь к файлу с рисунком фона */
     right top /* Положение в правом верхнем углу */
     no-repeat /* Не повторять рисунок */
     fixed; /* Зафиксировать фон */
   }
   h1 {
    font-family: Arial, sans-serif;
    font-size: 1.2em;
   }
  </style>
 </head>
 <body>
  <p>Устойчивость по Ляпунову колебательно переворачивает устойчивый прибор.</p>
 </body>
</html>

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

Повторение фона

Если просто добавить фоновую картинку, то она будет повторяться одновременно по горизонтали и вертикали. Это поведение может быть изменено с помощью свойства background-repeat или универсального background. Есть три значения:

  • no-repeat — фон не повторяется; применяется для простого добавления единственной картинки;
  • repeat-x — фон повторяется по горизонтали;
  • repeat-y — фон повторяется по вертикали.

Рассмотрим вертикальный бесшовный фон — при повторении картинки по вертикали между отдельными фрагментами не заметно стыков и фоновый рисунок выглядит цельным. Предварительно следует подготовить фоновое изображение, которое должно удовлетворять ряду условий:

  • занимать по высоте не меньше 20–30 пикселей;
  • при стыковке с аналогичным фрагментом изображения по вертикали не должно быть видимых стыков.

Поясним про высоту фоновой картинки. Если сделать изображение слишком узким (2–3 пикселя), то при отображении фона эффект его появления будет виден невооружённым глазом. Увеличение высоты позволяет замостить фон элемента быстро и незаметно.

В качестве образца фона возьмём узор, показанный на рис. 2.

Рис. 2. Фоновая картинка

В примере 2 показано добавление фона на веб-странице с повторением его по вертикали. Чтобы текст не выводился поверх рисунка к селектору body добавлено поле слева.

Пример 2. Повторение фона по вертикали

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Повторение фона</title>
  <style>
   body {
    padding-left: 80px; /* Поле слева */
    background:
     url(images/pattern-left.png) repeat-y; /* Путь к графическому файлу и
       повторение фона по вертикали */
   }
  </style>
 </head>
 <body>
  <p>Человек должен уметь иногда посмеяться над собой, иначе
  он сойдёт с ума. Об этом, к сожалению, знают немногие,
  поэтому в мире так  много сумасшедших.</p>
  <p>Рафаэль Сабатини</p>
 </body>
</html>

Результат данного примера показан на рис. 3.

Вид фона, повторяющегося по вертикали

Рис. 3. Вид фона, повторяющегося по вертикали

Аналогично делается и повторение по вертикали. Предварительно готовим подходящее изображение, затем добавляем его фоном к элементу через background и включаем повторение repeat-x (пример 3).

Пример 3. Повторение фона по горизонтали

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Повторение фона</title>
  <style>
   .strip {
    background: url(images/strip.png) repeat-x; /* Параметры фона */
    border-radius: 10px; /* Радиус скругления */
    height: 30px; /* Высота элемента */
   }
  </style>
 </head>
 <body>
  <div class="strip"></div>
 </body>
</html>

Результат данного примера показан на рис. 4.

Вид фона, повторяющегося по горизонтали

Рис. 4. Вид фона, повторяющегося по горизонтали

Положение фона

Для управления положением фонового рисунка на странице применяется стилевое свойство background-position, оно одновременно устанавливает координаты изображения по горизонтали и вертикали. Чтобы отменить повторение фоновой картинки используется значение no-repeat. Также можно воспользоваться универсальным background, как показано в примере 4.

Пример 4. Положение фона

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Положение фонового рисунка</title>
  <style>
   body {
    background: url(images/tomato.jpg) right bottom no-repeat fixed; /* Параметры фона */
    margin-right: 200px; /* Отступ справа */
   }
  </style>
 </head>
 <body>
  <h1>Консервы из помидор</h1>
  <p>Плоды отбирают с хорошей ровной окраской, плотные и однородные по
  размеру, укладывают в банки и заливают кипящим рассолом (на 1 л воды - 35 г
  поваренной соли и 6 г лимонной кислоты). Банки прикрывают крышками и
  ставят на прогревание, выдерживая в кипящей воде: литровые - 5-8,
  трехлитровые - 12-15 мин. Затем их укупоривают и охлаждают.</p>
  <p>Примерный расход сырья и продуктов на литровую банку: помидоров
  красных отборных - 550-600 г, соли - 15 г, лимонной кислоты - 3 г.</p>
 </body>
</html>

Результат данного примера показан на рис. 5. Изображение позиционируется в нужном месте с помощью значений right bottom свойства background. Чтобы текст не отображался поверх рисунка, справа на странице добавлен отступ через margin-right.

Фоновая картинка в правом нижнем углу окна

Рис. 5. Фоновая картинка в правом нижнем углу окна

Точное положение фона задаётся с помощью пикселей, но в основном применяется процентная запись или ключевые слова, как показано ниже:

  • top left = left top = 0% 0% (в левом верхнем углу);
  • top = top center = center top = 50% 0% (по центру вверху);
  • right top = top right = 100% 0% (в правом верхнем углу);
  • left = left center = center left = 0% 50% (по левому краю и по центру);
  • center = center center = 50% 50% (по центру);
  • right = right center = center right = 100% 50% (по правому краю и по центру);
  • bottom left = left bottom = 0% 100% (в левом нижнем углу);
  • bottom = bottom center = center bottom = 50% 100% (по центру внизу);
  • bottom right = right bottom = 100% 100% (в правом нижнем углу).

Таким образом, для добавления фона в правый нижний угол для background-position можно указать значение right bottom или bottom right или 100% 100%. Они равнозначны и дают одинаковый результат.

Фиксация фона

При прокрутке страницы фоновая картинка также прокручивается вместе с содержимым. Если применяется повторение фона, то это не вызовет никаких проблем, но при единственном изображении и большом объёме текста может оказаться так, что фон передвинется за верхний край. Чтобы такого не происходило фоновое изображение фиксируется на месте и не перемещается вместе с остальным содержимым документа. Для этого применяется свойство background-attachment со значением fixed или всё то же свойство background (пример 4).

У fixed есть ещё одна особенность. Если мы добавляем картинку к селектору body, то она располагается не внизу окна браузера, а внизу блока с контентом, что особенно заметно при небольшом объёме текста или увеличении размеров окна браузера. Фиксированный фон привязывается именно к окну и уже не зависит от объёма контента.


Масштабирование фона

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

Управлением размером отвечает свойство background-size, в качестве значения можно указывать ключевое слово cover, тогда размер изображения будет такой, чтобы его ширина и высота поместились в заданную область (например, окно веб-страницы); ключевое слово contain масштабирует картинку так, чтобы хотя бы одна сторона картинки целиком поместилась в заданную область. Кроме того, допустимо указывать явные размеры по горизонтали или вертикали в процентах или других единицах CSS. На рис. 1 показано изменение размеров изображений при разных значениях background-size. Серым цветом выделен блок размером 280х200 пикселей, внутри которого устанавливается фон.

а. Исходные изображения

б. Значение cover

в. Значение contain

Значение 100% 100%

г. Значение 100% 100%

д. Значение 250px

Рис. 1. Вид фоновых картинок в зависимости от значения background-size

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

В примере 1 устанавливается фоновая фотография, которая занимает всё окно браузера.

Пример 1. Фоновая картинка

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Масштабирование фона</title>
  <style>
   body {
    background: url(images/river.jpg) fixed; /* Параметры фона */
    background-size: cover; /* Фон занимает всю доступную площадь */
   }
  </style>
 </head>
 <body>
 </body>
</html>

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

Рис. 2. Фоновая фотография


Спрайты

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

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

Чтобы избавиться от этих недочётов все изображения вставляют в одну общую картинку, которая и называется спрайтом. Вывод самого изображения происходит как фон через свойство background, а смена картинки делается за счёт сдвига фона с помощь background-position. На рис. 1 показан спрайт с несколькими картинками.

Рис. 1. Спрайт

Здесь используется два набора изображений — сердечки и чекбоксы. Располагать близкие картинки можно как горизонтально, так и вертикально, это не является принципиальным. Для каждого набора в коде создаём свой собственный класс и для него указываем размеры элемента, совпадающие с размерами картинки, в данном случае это 64х64 пикселя. Затем добавляем спрайт в виде фона и при необходимости сдвигаем его через background-position (пример 1).

Пример 1. Смена картинки при наведении указателя

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Спрайты</title>
  <style>
   .heart, .checkbox {
    width: 64px; height: 64px; /* Размеры картинок */
    background: url(images/sprite.png) no-repeat; /* Спрайт */
    display: inline-block; /* Выстраиваем по горизонтали */
   }
   .heart:hover {
    background-position: 0 -64px ; /* Сдвигаем вверх */
   }
   .checkbox {
    background-position: -64px 0; /* Сдвигаем влево */
   }
   .checkbox:hover {
    background-position: -64px -64px; /* Сдвигаем влево и вверх  */
   }
  </style>
 </head>
 <body>
  <div class="heart"></div>
  <div class="checkbox"></div>
 </body>
</html>
Живой пример

Результат данного примера показан на рис. 2. Куда сдвигать фон — влево или вверх, зависит от исходного расположения картинок.

Смена картинки при наведении на неё курсора мыши

Рис. 2. Смена картинки при наведении на неё курсора мыши

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


Несколько фоновых картинок

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

Пример 1. Три фона

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Фон</title>
  <style>
   body {
    background: url(images/animate-bg3.png) 90% 90% no-repeat fixed,
                url(images/animate-bg2.png) 40% 40% no-repeat fixed,
                url(images/animate-bg1.jpg) no-repeat fixed;
    background-size: auto, auto, cover; /* Меняем масштаб */
   }
  </style>
 </head>
 <body></body>
</html>

Если требуется отдельно задать какое-то стилевое свойство для фона, вроде background-size как в примере выше, то параметры для каждого фона перечисляются через запятую. Результат данного примера показан на рис. 1.

Фон с тремя изображениями

Рис. 1. Фон с тремя изображениями

Отдельные изображения для фона позволяют менять их положение, а также анимировать, как показано в примере 2.

Пример 2. Анимированный фон

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Фон</title>
  <style>
   body {
    background:
      url(images/animate-bg3.png) 90% 90% no-repeat fixed,
      url(images/animate-bg2.png) 40% 40% no-repeat fixed,
      url(images/animate-bg1.jpg) no-repeat fixed;
    background-size: auto, auto, cover;
    -webkit-animation: ball 40s linear infinite;
    animation: ball 40s linear infinite;
   }
   @-webkit-keyframes ball {
    from { background-position: 3000px 90%, 180% 40%, 0 0; }
    to { background-position: -2000px 90%, -300px 20%, 0 0; }
   }
   @keyframes ball {
    from { background-position: 3000px 90%, 180% 40%, 0 0; }
    to { background-position: -2000px 90%, -300px 20%, 0 0; }
   }
  </style>
 </head>
 <body></body>
</html>
Живой пример

Подробнее про анимации рассказывается далее.

Рассмотрим теперь как применять одну картинку для создания блока с рамкой (рис. 2). Ширина блока фиксированная, а высота тянется в зависимости от объёма содержимого блока.

Рис. 2. Рисованная рамка

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

Подготовленное для фона изображение

Рис. 3. Подготовленное для фона изображение

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

Пример 3. Несколько фоновых картинок

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Фон</title>
  <style>
   .aztec {
    width: 212px; /* Ширина блока с учётом padding */
    min-height: 240px; /* Минимальная высота */
    background:
      url(images/aztec-bg.png) 0 0 no-repeat,
      url(images/aztec-bg.png) -576px 100% no-repeat,
      url(images/aztec-bg.png) -288px 0 repeat-y,
      #f3dbb3;
    padding: 38px; /* Поля вокруг текста с учётом границы */
   }
  </style>
 </head>
 <body>
  <div class="aztec">
   <p>Уицилопочтли — «колдун колибри», бог войны и солнца.</p>
   <p>Тескатлипока — «дымящееся зеркало», главный бог ацтеков.</p>
   <p>Обоим богам приносили человеческие жертвы.</p>
  </div>
 </body>
</html>

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

Рис. 4. Вид рамки


Линейный градиент

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

Отдельного свойства для добавления градиента нет, поскольку он считается фоновым изображением, поэтому добавляется через свойство background-image или универсальное background с помощью функции linear-gradient(), как показано в примере 1.

Пример 1. Градиент

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Градиент</title>
  <style>
   .gradient {
    background: linear-gradient(to top, #e6f3e9, #acdabb);
    padding: 10px;
    border: 1px solid #333;
   }
  </style>
 </head>
 <body>
  <p class="gradient">Здесь обсценная идиома традиционно начинает прозаический
  образ, но языковая игра не приводит к активно-диалогическому пониманию.</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Линейный градиент для абзаца

Рис. 1. Линейный градиент для абзаца

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

Для записи позиции первым идёт to, а затем добавляются ключевые слова top, bottom и left, right, а также их сочетания. Порядок слов не важен, можно написать to left top или to top left. В табл. 1 приведены разные позиции и тип получаемого градиента для цветов #fff и #000, по другому от белого к чёрному.

Табл. 1. Типы градиента
Позиция | Угол | Описание | Вид
to top | 0deg | Снизу вверх. |
to left | 270deg | Справа налево. |
to bottom | 180deg | Сверху вниз. |
to right | 90deg | Слева направо. |
to top left |  | От правого нижнего угла к левому верхнему. |
to top right |  | От левого нижнего угла к правому верхнему. |
to bottom left |  | От правого верхнего угла к левому нижнему. |
to bottom right |  | От левого верхнего угла к правому нижнему. |

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

Нулю градусов (или 360º) соответствует градиент снизу вверх, далее отсчёт ведётся по часовой стрелке, как показано ниже.

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

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

Пример 2. Полупрозрачные цвета

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Градиент</title>
  <style>
   body { background: url(images/celtic1.png); }
   div {
    background-image: linear-gradient(to top, transparent, rgba(30,87,153,0.8), rgba(30,87,153,1),
                      rgba(30,87,153,1), rgba(41,137,216,1), rgba(30,87,153,1), rgba(30,87,153,1),
                      rgba(30,87,153,0.8), transparent);
    color: #fff; padding: 10px;
   }
  </style>
 </head>
 <body>
  <div>Генезис свободного стиха, несмотря на внешние воздействия,
       отталкивает словесный метаязык.</div>
 </body>
</html>

Результат данного примера показан на рис. 2.

Градиент с полупрозрачными цветами

Рис. 2. Градиент с полупрозрачными цветами

Чтобы точно позиционировать цвета в градиенте, после значения цвета указывается его положение в процентах, пикселях или других единицах. Например, запись red 0%, orange 50%, yellow 100% означает, что градиент начинается с красного цвета, затем на 50% переходит в оранжевый, а затем до конца в жёлтый. Для простоты крайние единицы вроде 0% и 100% можно не писать, они подразумеваются по умолчанию. В примере 3 показано создание градиентной кнопки, в которой положение второго цвета из трёх задано как 36%.

Пример 3. Градиентная кнопка

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Кнопка</title>
  <style>
   button {
    background: linear-gradient(to top, #b5bdc8, #828c95 36%, #28343b);
    font-size: 16px; /* Размер шрифта */
    padding: 10px 20px; /* Поля вокруг текста */
    color: #fff; /* Цвет текста */
    border: 1px solid #333; /* Параметры рамки */
    border-radius: 20px; /* Радиус скругления */
   }
  </style>
 </head>
 <body>
   <button>Нажми меня нежно</button>
 </body>
</html>

Результат данного примера показан на рис. 3.

Рис. 3. Градиентная кнопка

Задавая положения цветов можно получить резкие переходы между ними, что в итоге даёт набор однотонных полосок. Так, для двух цветов надо указать четыре значения, первые два цвета одинаковы и начинаются от 0% до 50%, оставшиеся цвета также одинаковы между собой и продолжаются от 50% до 100%. В примере 4 полоски добавляются в качестве фона веб-страницы. Из-за того, что крайние значения подставляются автоматически их можно не указывать, достаточно написать всего-лишь два цвета.

Пример 4. Однотонные полоски

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Горизонтальные полоски</title>
  <style>
   body {
    background-image: linear-gradient(transparent 50%, #a3e5a3 50%);
   }
  </style>
 </head>
 <body>
  <p>Типичная европейская буржуазность и добропорядочность
  изящно иллюстрирует официальный язык.</p>
 </body>
</html>

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

Фон из горизонтальных полосок

Рис. 4. Фон из горизонтальных полосок

Градиент также можно масштабировать, тем самым получая самые разные эффекты. Например, добавив background-size к линейному градиенту, мы заставим его повторяться, что образует чередующиеся градиентные полоски (пример 5). Заодно устанавливаем ширину этих полосок.

Пример 5. Вертикальные полосы

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Градиент</title>
  <style>
   body {
    background: #f8ffe8;
    background: linear-gradient(to right, #f8ffe8, #e3f5ab 33%, #b7df2d);
    background-size: 30px 30px;
   }
  </style>
 </head>
  <body>
  </body>
</html>

Результат примера показан на рис. 5.

Вертикальные градиентные полоски

Рис. 5. Вертикальные градиентные полоски

Поскольку можно одновременно добавлять несколько фонов, перечисляя их параметры через запятую, то же самое допустимо проделать и с градиентами. Только один из цветов должен быть полупрозрачным, иначе градиенты будут перекрывать друг друга. В примере 6 для фона веб-страницы применяется два градиента, пересекающихся под прямым углом, что в сочетании с background-size создаёт клетки.

Пример 6. Два градиента

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Градиент</title>
  <style>
   body {
    background: linear-gradient(transparent 50%, rgba(0,186,0,0.2) 50%),
                linear-gradient(90deg, rgba(0,186,0,0.2) 50%, transparent 50%);
    background-size: 40px 40px;
   }
  </style>
 </head>
 <body>
 </body>
</html>

Результат данного примера показан на рис. 6.

Рис. 6. Клетки

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

Градиенты достаточно популярны среди веб-дизайнеров, но их добавление усложняется указанием множества цветов. Чтобы вам было проще создавать градиенты и вставлять их в код, рекомендуем сайт colorzilla.com/gradient-editor с помощью которого легко настроить градиенты и сразу получить нужный код. Имеются готовые шаблоны (Presets), просмотр результата (Preview), настройка цветов (Adjustments), конечный код (CSS), который к тому же поддерживает старые версии IE через фильтры.


Радиальный градиент

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

Радиальный градиент | Линейный градиент
а | б

Рис. 1. Радиальный и линейный градиент

Радиальный градиент создаётся с помощью свойства background или background-image с функцией radial-gradient(). В простейшем случае для задания радиального градиента понадобится всего два параметра: начальный и конечный цвет. По умолчанию, начальная точка располагается при этом в центре. В примере 1 показано создание некоторого подобия шарика, для этого используется радиальный градиент и свойство border-radius.

Пример 1. Градиент

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Градиент</title>
  <style>
   div {
    height: 100px; width: 100px; /* Размеры */
    border-radius: 50%; /* Превращаем в круг */
    background: radial-gradient(#55ddff, #0081b5);
   }
  </style>
 </head>
 <body>
  <div></div>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 2. Радиальный градиент

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

Позиция точки пишется аналогично значениям свойства background-position с помощью ключевых слов или доступных единиц измерения вроде пикселей или процентов; ниже приведены возможные сочетания.

  • at top left = at left top = at 0% 0% (в левом верхнем углу);
  • at top = at top center = at center top = at 50% 0% (по центру вверху);
  • at right top = at top right = at 100% 0% (в правом верхнем углу);
  • at left = at left center = at center left = at 0% 50% (по левому краю и по центру);
  • at center = at center center = at 50% 50% (по центру) — это значение по умолчанию;
  • at right = at right center = at center right = at 100% 50% (по правому краю и по центру);
  • at bottom left = at left bottom = at 0% 100% (в левом нижнем углу);
  • at bottom = at bottom center = at center bottom = at 50% 100% (по центру внизу);
  • at bottom right = at right bottom = at 100% 100% (в правом нижнем углу).

Если задать позицию начальной точки для примера 1 как at 40px 45px, а второй цвет сделать несколько темнее (#0076a5), то получится чуть более реалистичный шарик (рис. 3).

Изменение начальной точки градиента

Рис. 3. Изменение начальной точки градиента

Возможны две формы радиального градиента — круг (circle) и эллипс (ellipse), которые различаются своим видом. По умолчанию устанавливается эллиптический градиент.

Разница между круговым и эллиптическим градиентом для цветов #f9e497 и #ffb60f продемонстрирована на рис. 4.

круговой градиент (значение circle)

а. круговой градиент (значение circle)

эллиптический градиент (значение ellipse)

б. эллиптический градиент (значение ellipse)

Рис. 4. Разные виды градиента

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

В примере 2 показано создание кругового градиента с заданной начальной точкой. Для усиления контрастности между цветами используется три значения цвета, а не два.

Пример 2. Круговой градиент

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Градиент</title>
  <style>
   div {
    background: radial-gradient(circle at 80px 40px, #f9eec7, #ffb60f, #ffb60f);
    padding: 20px;
   }
  </style>
 </head>
 <body>
  <div>Этот элемент помогает в случае, когда вы находитесь в осознании того
   факта, что совершенно не понимаете, кто и как вам может помочь. Именно
   в этот момент мы и подсказываем, что помочь вам никто не сможет.
  </div>
 </body>
</html>

Обратите внимание на синтаксис, если мы хотим сочетать форму градиента с указанием начальной точки, то вначале идёт ключевое слово circle, а потом уже через пробел позиция. Результат данного примера показан на рис. 5.

Рис. 5. Круговой градиент

Наряду с типом градиента можно задавать и его размер, который зависит от применяемых ключевых слов. Размер пишется через пробел после типа градиента (circle или ellipse).

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

Табл. 1. Ключевые слова для изменения размера градиента
Значение | Код | Описание | Вид
closest-side | background: radial-gradient(circle closest-side at 30px 20px, #fff, #000); background: radial-gradient(ellipse closest-side at 30px 20px, #fff, #000); | Форма градиента совпадает с ближайшей к нему стороной блока. |
closest-corner | background: radial-gradient(circle closest-corner at 30px 20px, #fff, #000); background: radial-gradient(ellipse closest-corner at 30px 20px, #fff, #000); | Форма градиента вычисляется на основании информации о расстоянии до ближайшего угла блока. |
farthest-side | background: radial-gradient(circle farthest-side at 30px 20px, #fff, #000); background: radial-gradient(ellipse farthest-side at 30px 20px, #fff, #000); | Градиент распространяется до дальней стороны блока. |
farthest-corner | background: radial-gradient(circle farthest-corner at 30px 20px, #fff, #000); background: radial-gradient(ellipse farthest-corner at 30px 20px, #fff, #000); | Форма градиента вычисляется на основании информации о расстоянии до дальнего угла блока, |

Для центральной начальной точки градиенты вроде closest-corner и farthest-side совпадают. Но градиенты будут различаться, если установить начальную точку в углу. В примере 3 используется значение closest-corner с заданием начальной точки в пикселях.

Пример 3. Размер градиента

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Градиент</title>
  <style>
   div {
    background: radial-gradient(circle closest-corner at 40px 30px, #fff, #009ec3);
    padding: 20px;
   }
  </style>
 </head>
 <body>
  <div>Содержимое</div>
 </body>
</html>

Результат данного примера показан на рис. 6.

Использование значения closest-corner

Рис. 6. Использование значения closest-corner

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

Резкие переходы получаются, когда позиция одного цвета совпадает с позицией другого, как показано в примере 4. Разница в один процент сделана, чтобы немного сгладить переход, иначе получается «лесенка» из пикселей, что смотрится не очень красиво.

Пример 4. Резкие переходы

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Градиент</title>
  <style>
   .french {
    width: 200px;  height: 200px; /* Размеры */
    border-radius: 50%; /* Превращаем в круг */
    margin: auto; /* Выравниваем по центру */
    background: radial-gradient(circle at center,
        #000e5e 24%, #fff 25%, #fff 50%, #c70102 51%, #c70102);
   }
  </style>
 </head>
 <body>
  <div class="french"></div>
 </body>
</html>

Результат данного примера показан на рис. 7.

Резкие переходы между разными цветами

Рис. 7. Резкие переходы между разными цветами


Ссылки

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

Создание ссылок

Для создания ссылки необходимо сообщить браузеру, какой текст или изображение является ссылкой, а также указать адрес документа, на который следует сделать ссылку. Оба действия выполняются с помощью элемента <a>, адрес задаётся с помощью атрибута href (пример 1). Поскольку в качестве адреса ссылки может использоваться документ любого типа, то результат перехода по ссылке зависит от конечного файла. Так, архивы (файлы с расширениями zip) будут сохраняться на локальный диск, сайты открываться в браузере.

Пример 1. Создание ссылки

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ссылки</title>
 </head>
 <body>
  <p><a href="link.html">Ссылка на страницу link.html</a></p>
  <p><a href="file.zip">Ссылка на файл file.zip</a></p>
  <p><a href="http://webref.ru">Ссылка на сайт webref.ru</а></p>
 </body>
</html>

В качестве значения атрибута href используется адрес документа (URL, Universal Resource Locator, универсальный указатель ресурсов), на который происходит переход. Адрес может быть абсолютным и относительным. К абсолютному адресу относится полный путь к документу, включая протокол и наименование сайта, например http://mysite.ru/about/. Эта форма обращения работает везде и всюду, независимо от имени сайта или веб-страницы, где прописана ссылка. Как правило, абсолютные адреса применяются для перехода на другой ресурс, а внутри текущего сайта применяются относительные ссылки. Подобные ссылки, как следует из их названия, построены относительно текущего документа или корня сайта. Когда путь ведётся от корня сайта, в начале пути добавляют слэш (/), например /source/adm.html. В этом случае сервер понимает, что ему следует загрузить документ по адресу http://mysite.ru/source/adm.html. Учтите, что ссылки относительно корня сайта не работают на локальном компьютере, а только под управлением веб-сервера. Вот некоторые примеры адресов.

//mysite.ru
Обращение к сайту без указания протокола.

/
/demo/
Эти две ссылки называются неполными и указывают веб-серверу загружать файл index.html (или index.php), который находится в корне сайта или папке demo. Если файл index.html отсутствует, браузер, как правило, показывает список файлов или блокирует доступ к сайту из соображений безопасности.

/images/pic.html
Слэш перед адресом говорит о том, что адресация начинается от корня сайта. Ссылка ведёт на документ pic.html, который находится в папке images. А она, в свою очередь, размещена в корне сайта.

../help/me.html
Две точки перед именем указывают браузеру перейти на уровень выше в списке папок сайта.

manual/info.html
Если перед именем папки нет никаких дополнительных символов, вроде двух точек, то она размещена внутри текущей папки.

Открытие ссылки в новом окне

По умолчанию новый документ загружается в текущее окно браузера, однако это свойство можно изменить с помощью атрибута target. В качестве значения используется зарезервированное слово _blank, тогда страница откроется в новом окне браузера (пример 2). Открывать в новой вкладке или новом окне — задавать через HTML мы не можем, это определяется настройками браузера и пользователя.

Пример 2. Создание различных ссылок

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ссылки</title>
 </head>
 <body>
  <p><a href="1.html">Ссылка откроется в текущем окне</a></p>
  <p><a href="2.html" target="_blank">Ссылка откроется в новом окне</а></p>
 </body>
</html>

Загрузка файлов

Что делать с тем или иным типом документа определяет веб-сервер. Как правило, если ссылка ведёт на файл в понятном браузеру формате, то он будет открыт. html-документ, изображения в JPEG, PNG, обычные текстовые документы, видео и аудио-файлы — всё это современным браузерам знакомо и они вполне могут это показать. Что касается архивов и других форматов, которые браузеры пока не распознают, то при щелчке по ссылке браузер предложит сохранить файл на локальный диск.

В некоторых случаях требуется не открыть файл, как, например, рисунок, а сохранить его. Для этого просто добавьте атрибут download к элементу <a>, как показано в примере 3.

Пример 3. Использование download

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>download</title>
 </head>
 <body>
  <p><a href="images/xxx.jpg">Открыть файл в браузере</a></p>
  <p><a href="images/xxx.jpg" download>Скачать файл</a></p>
</body>
</html>

В данном примере первая ссылка откроется в браузере, а вторая сохранит файл. Браузер Internet Explorer не поддерживает атрибут download, поэтому в нём поведение для двух ссылок будет одинаковым.


Виды ссылок

Обычно в качестве ссылки выступает текст или изображение. Текст ссылки, как правило, помечается подчёркиванием и цветом, чтобы его было легко визуально отличить от обычного текста. С рисунками сложнее: явно определить, ссылка перед нами или нет, можно только после того, как мы наведём курсор мыши на рисунок. Для ссылок указатель превращается в «руку», а в статусной строке браузера отображается путь к документу, на который ссылка указывает. Поэтому рисунки в качестве ссылок лучше применять там, где они ожидаемы, — баннеры, кнопки, закладки, изображения с надписью «Нажми» и т. д.

В примере 1 показано создание ссылок с помощью рисунков и текста.

Пример 1. Текстовые и графические ссылки

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ссылки</title>
 </head>
 <body>
  <p><a href="linkl.html">Текстовая ссылка</a></p>
  <p><a href="link2.html"><img src="images/3.png" alt=""></a></p>
  <p><a href="link3.html"><img src="images/7.png" alt="">Текстовая ссылка с рисунком</a></p>
 </body>
</html>

Первая ссылка в данном примере представляет собой обычный текст, заключенный внутрь <a>. Следующая строка демонстрирует создание графической ссылки. Изображение, добавляемое на веб-страницу через элемент <img>, в этом случае надо поместить между тегами <а> и </а>. Кроме того, внутри <a> можно одновременно сочетать текст и рисунки, как показано в данном примере.

Любая ссылка на веб-странице может находиться в одном из следующих состояний.

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

Указанные цвета ссылок задаются с помощью следующих псевдоклассов:

  • :active — активная ссылка;
  • :hover — состояние ссылки при наведенном на неё курсоре мыши;
  • :visited — посещённая ссылка.

В примере 2 показано использование псевдоклассов для управления цветом ссылок.

Пример 2. Псевдоклассы для ссылок

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ссылки</title>
  <style>
   a { color: #8db835; }
   a:visited { color: #821e6f; }
   a:hover { background: #4577ad; color: #fff; text-decoration: none; }
   a:active { color: #f1616e; }
  </style>
 </head>
 <body>
  <p><a href="link1.html">Посещённая ссылка</a></p>
  <p><a href="link2.html">Обычная ссылка</a></p>
  <p><a href="http://webref.ru">Ссылка при наведении курсора</а></p>
 </body>
</html>

Результат данного примера показан на рис. 1. Цвет рядовых ссылок указывается через селектор a, для остальных видов ссылок применяются псевдоклассы. Имеет значение их порядок, :hover должен идти после :visited, тогда он будет работать и для посещённых ссылок. Естественно, если ссылку не открывали, то она никак не перейдёт в статус посещённых.

Вид ссылок в различном состоянии

Рис. 1. Вид ссылок в различном состоянии


Оформление ссылок

Хотя для оформления текстовых ссылок традиционно применяется подчёркивание, допустимо использование и других способов изменения вида ссылок. Вот некоторые из них:

  • ссылки без подчёркивания;
  • декоративное подчёркивание;
  • выделение фоновым цветом;
  • рамки;
  • рисунок возле ссылки.

Далее указанные методы оформления ссылок рассматриваются более подробно.

Ссылки без подчёркивания

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

Чтобы убрать подчёркивание у ссылки, следует в стилях для селектора a добавить text-decoration со значение none (пример 1).

Пример 1. Отсутствие подчёркивания у ссылок

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ссылки</title>
  <style>
   a {
    text-decoration: none; /* Убираем подчёркивание */
   }
  </style>
 </head>
 <body>
  <p><a href="link.html">Ссылка без подчёркивания</a>
 </body>
</html>

Для псевдоклассов :hover и :visited нет необходимости добавлять text-decoration, они наследуют свойства селектора a.

Подчёркивание ссылок при наведении на них курсора мыши

Чтобы добавить подчёркивание для ссылок, у которых установлено text-decoration: none, следует воспользоваться псевдоклассом :hover. Он определяет стиль ссылки, когда на неё наводится курсор мыши. Остаётся только добавить для псевдокласса свойство text-decoration со значением underline (пример 2).

Пример 2. Подчёркивание ссылок

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ссылки</title>
  <style>
   a {
    text-decoration: none;
   }
   a:hover {
    text-decoration: underline;
   }
  </style>
 </head>
 <body>
  <p><a href="link.html">Ссылка без подчёркивания</a>
 </body>
</html>

Декоративное подчёркивание ссылок

Подчёркивание у ссылок можно задать не просто сплошной линией, а, например, пунктирной. Для этого надо воспользоваться свойством border-bottom, которое создаёт линию внизу элемента. Указав один из аргументов этого свойства dashed, получим пунктирное подчёркивание. В примере 3 показано задание синего пунктира у ссылок красного цвета при наведении на них курсора мыши.

Пример 3. Пунктирное подчёркивание для ссылок

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ссылки</title>
  <style>
   a {
    color: blue; /* Цвет ссылок */
    text-decoration: none; /* Убираем подчёркивание */
   }
   a:hover {
    border-bottom: 1px dashed blue; /* Добавляем синее пунктирное подчёркивание */
   }
  </style>
 </head>
 <body>
  <p><a href="link.html">Ссылка без подчёркивания</a>
 </body>
</html>

При использовании приведённого способа пунктирная линия появляется чуть ниже обычного подчёркивания текста. Поэтому к стилю ссылки следует добавить text-decoration со значением none, чтобы одновременно не получилось две линии (рис. 1).

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

Рис. 1. Использование пунктира для выделения ссылки

Не обязательно использовать пунктир, например, для создания двойной линии следует указать значение, как показано в примере 4.

Пример 4. Двойное подчёркивание ссылок

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ссылки</title>
  <style>
   a {
    color: blue; text-decoration: none;
   }
   a:hover {
    border-bottom: 4px double red;
   }
  </style>
 </head>
 <body>
  <p><a href="link.html">Ссылка без подчёркивания</a>
 </body>
</html>

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

Использование фонового цвета

Чтобы добавить к ссылке цветной фон, достаточно воспользоваться свойством background, присвоив ему цвет в любом доступном формате. Аналогично можно использовать псевдокласс :hover, тогда цвет фона под ссылкой будет изменяться при наведении на неё курсора мыши (пример 5).

Пример 5. Фон под ссылкой

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ссылки</title>
  <style>
   a {
    padding: 2px; /* Поля вокруг текста ссылки */
    text-decoration: none; /* Убираем подчёркивание */
   }
   a:hover {
    background: #f73; /* Цвет фона при наведении на ссылку курсора */
    color: yellow; /* Новый цвет текста */
   }
  </style>
 </head>
 <body>
  <p><a href="link.html">Ссылка без подчёркивания</a>
 </body>
</html>

Фон под ссылкой точно соответствует области текста, поэтому в примере для селектора a добавлено свойство padding, создающее поля вокруг текста (рис. 2).

Изменение цвета фона при наведении на ссылку курсора

Рис. 2. Изменение цвета фона при наведении на ссылку курсора

Рамка вокруг ссылки

При использовании рамок со ссылками возможны два варианта. Первый — рамка вокруг ссылок устанавливается заранее и при наведении на неё курсора меняет свой цвет. И второй — рамка отображается, только когда на ссылку наводится курсор.

В примере 6 показано, как изменять цвет рамки, используя свойство border. Подчёркивание текста через text-decoration можно убрать или оставить без изменения.

Пример 6. Изменение цвета рамки у ссылок

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ссылки</title>
  <style>
   a {
    border: 1px solid blue; /* Синяя рамка вокруг ссылок */
    padding: 2px; /* Поля вокруг текста */
    text-decoration: none; /* Скрываем подчёркивание */
   }
   a:hover {
    border: 1px solid red; /* Красная рамка при наведении курсора на ссылку */
   }
  </style>
 </head>
 <body>
  <p><a href="link.html">Ссылка без подчёркивания</a>
 </body>
</html>

Чтобы рамка не «прилипала» к тексту, в примере вокруг него установлены поля с помощью padding. Можно также вместе с применением рамки добавить и фон, воспользовавшись свойством background.

Если требуется добавить рамку к ссылкам при наведении на них курсора, то следует позаботиться о том, чтобы текст в этом случае не сдвигался. Достичь этого проще всего добавлением невидимой рамки вокруг ссылки и последующего изменения цвета рамки с помощью псевдокласса :hover. Прозрачный цвет указывается с помощью ключевого слова transparent, в остальном стиль не поменяется.

a {
  border: 1px solid transparent; /* Прозрачная рамка вокруг ссылок */
}
a:hover {
  border: 1px solid red; /* Красная рамка при наведении курсора на ссылку */
}

Рисунки возле внешних ссылок

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

Выделение ссылки с помощью рисунка

Рис. 3. Выделение ссылки с помощью рисунка

Использование рисунков возле внешних ссылок хорошо тем, что оформленная таким образом ссылка однозначно отличается от обычных ссылок внутри сайта, а правильно подобранный рисунок говорит посетителю, что ссылка ведёт на другой сайт. Чтобы разделить стиль для локальных и внешних ссылок воспользуемся селектором атрибута. Поскольку все ссылки на другие сайты пишутся с указанием протокола, например http, то достаточно задать стиль для тех ссылок, у которых значение атрибута href начинается на http://. Это делается с помощью конструкции a[href^="http://"] {...}, как показано в примере 7.

Пример 7. Рисунок возле ссылки

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ссылки</title>
  <style>
   a[href^="http://"]  {
    background: url(images/blank.png) 100% 5px no-repeat; /* Рисунок */
    padding-right: 18px; /* Отступ справа */
   }
  </style>
 </head>
 <body>
  <p><a href="1.html">Обычная ссылка</a></p>
  <p><a href="http://htmlbook.ru">Ссылка на сайт htmlbook.ru</a></p>
 </body>
</html>

Фоновая картинка располагается справа от ссылки, а чтобы текст не накладывался поверх рисунка добавлено поле справа через свойство padding-right. Если потребуется добавить рисунок слева, то 100% заменяем на 0, а padding-right на padding-left.

Протокол может быть не только http, но и ftp и https, для них данный рецепт перестаёт работать. Так что для универсальности лучше изменить селектор на a[href*="//"], он сообщает что стиль надо применять ко всем ссылкам, в адресе которых встречается //.


Ссылки внутри страницы

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

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

Пример 1. Ссылка на заголовок

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ссылки</title>
  <style>
   .toc {
    padding: 0 20px;
    background: #f0f0f0;
    display: inline-block;
   }
  </style>
 </head>
 <body>
  <div class="toc">
   <h2>Оглавление</h2>
   <ul>
    <li><a href="#t1">Сепульки</a></li>
    <li><a href="#t2">Сепулькарии</a></li>
    <li><a href="#t3">Сепуление</a></li>
   </ul>
  </div>
  <h2 id="t1">Сепульки</h2>
   <p>Важный элемент цивилизации ардритов с планеты Энтеропия.</p>
  <h2 id="t2">Сепулькарии</h2>
   <p>Устройства для сепуления.</p>
  <h2 id="t3">Сепуление</h2>
   <p>Занятие ардритов с планеты Энтеропия.</p>
 </body>
</html>

Результат данного примера показан на рис. 1. К каждому заголовку <h2> добавлен уникальный идентификатор через атрибут id, а сама ссылка имеет вид #id, где id — идентификатор элемента на который делается переход.

Ссылки на заголовки

Рис. 1. Ссылки на заголовки

Как видите, по своему виду такие ссылки ничем не отличаются от ссылок на другой сайт. Но стоит открыть любую ссылку в примере, как браузер переместит фокус к заголовку, на который ведёт ссылка. При этом немного поменяется и адресная строка, в конец пути будет добавлено #t1 или подобное. Если нажать кнопку «Назад» в браузере, то мы вернёмся обратно к началу страницы и адресная строка примет исходный вид. Это позволяет передавать ссылки вида webref.ru/layout/#title, при открытии такой ссылки в браузере будет загружена страница и сделан переход к элементу с идентификатором title.

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

CSS позволяет управлять видом элемента, на который был сделан переход, с помощью псевдокласса :target, как показано в примере 2.

Пример 2. Использование :target

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ссылки</title>
  <style>
   .toc {
    padding: 0 20px;
    background: #f0f0f0;
    display: inline-block;
   }
   h2:target {
    background: #cd529e;
    color: #fff;
    padding: 5px;
   }
  </style>
 </head>
 <body>
  <div class="toc">
   <h2>Оглавление</h2>
   <ul>
    <li><a href="#t1">Сепульки</a></li>
    <li><a href="#t2">Сепулькарии</a></li>
    <li><a href="#t3">Сепуление</a></li>
   </ul>
  </div>
  <h2 id="t1">Сепульки</h2>
   <p>Важный элемент цивилизации ардритов с планеты Энтеропия.</p>
  <h2 id="t2">Сепулькарии</h2>
   <p>Устройства для сепуления.</p>
  <h2 id="t3">Сепуление</h2>
   <p>Занятие ардритов с планеты Энтеропия.</p>
 </body>
</html>

Теперь, если переходить по ссылкам оглавления, то заголовки будут менять свой цвет и фон (рис. 2).

Стиль заголовка при переходе

Рис. 2. Стиль заголовка при переходе


Списки

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

Создание списка

Любой список представляет собой элемент <ul> (от англ. unorderded list — неупорядоченный список), который устанавливает маркированный список, или <ol> (от англ. ordered list — упорядоченный список), который определяет список нумерованный. Каждый элемент списка должен начинаться с элемента <li> (пример 1).

Пример 1. Создание списка

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Списки</title>
 </head>
 <body>
  <p>Текст до списка.</p>
  <ul>
   <li>Сепульки</li>
   <li>Сепулькарии</li>
   <li>Сепуление</li>
  </ul>
  <p>Текст после списка.</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Вид маркированного списка

Рис. 1. Вид маркированного списка


Маркированные списки

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

С элементом <ul> связаны следующие особенности:

  • в том месте, где встречается <ul>, браузер автоматически добавляет перенос строки;
  • у списка имеются отступы сверху и снизу;
  • маркеры по умолчанию отображаются в виде закрашенного кружка;
  • каждый элемент списка сдвигается вправо по отношению к основному тексту.

На рис.1 показан результат примера, иллюстрирующий приведённые особенности маркированного списка.

Вид маркированного списка

Рис. 1. Вид маркированного списка

Вид маркера

Маркеры могут принимать один из трёх видов: закрашенный кружок (по умолчанию), незакрашенный кружок и квадрат. Для выбора типа маркера используется свойство list-style-type или универсальное list-style (пример 1). Применяются следующие значения:

  • disc — маркеры в виде закрашенного кружка;
  • circle — маркеры в виде незакрашенного кружка;
  • square — квадратные маркеры.

Пример 1. Изменение вида маркера

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Списки</title>
  <style>
   ul {
    list-style: square; /* Квадрат в качестве маркера */
   }
  </style>
 </head>
 <body>
  <ul>
   <li>Сепульки</li>
   <li>Сепулькарии</li>
   <li>Сепуление</li>
  </ul>
 </body>
</html>

В примере показано создание маркированного списка, где в качестве значка маркера используется небольшой однотонный квадрат. Хотя количество значений ограничено тремя, это не значит, что в нашем распоряжении всего три вида маркера. Существует множество спецсимволов, которые с успехом могут выступать в качестве значка маркера. «Прикрутить» их непосредственно к <li> не получится, поэтому придётся действовать в обход. Для этого прячем маркеры списка с помощью свойства list-style со значением none и в тексте перед содержимым <li> добавляем свой собственный символ с помощью псевдоэлемента ::before. В примере 2 в качестве такого маркера выступает треугольник.

Пример 2. Использование ::before

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Списки</title>
  <style>
   li {
    list-style: none; /* Скрываем маркеры списка */
    text-indent: -1em; /* Сдвигаем элементы списка влево */
   }
   li::before {
    content: '\25ba'; /* Добавляем маркер в шестнадцатеричном формате*/
    padding-right: 5px; /* Расстояние от маркеров до текста */
    color: red; /* Маркеры красного цвета */
   }
  </style>
 </head>
 <body>
  <ul>
   <li>Сепульки</li>
   <li>Сепулькарии</li>
   <li>Сепуление</li>
  </ul>
 </body>
</html>

Результат данного примера показан на рис. 2. Поскольку использование свойства list-style со значением none не убирает маркеры совсем, а только скрывает их от просмотра, то список получается смещённым вправо. Чтобы избавиться от этой особенности, в примере добавляется свойство text-indent с отрицательным значением. Его задача — переместить текст левее на один символ.

Произвольные маркеры в списке

Рис. 2. Произвольные маркеры в списке

Символ не обязательно должен быть в шестнадцатеричном формате, его можно вставить и непосредственно в текст. Главное, сохранить документ в кодировке UTF-8 и чтобы редактор её поддерживал. Сами символы и их коды можно взять, например, из LibreOffice Writer (рис. 3).

Выбор символа в LibreOffice

Рис. 3. Выбор символа в LibreOffice

Список с рисованными маркерами

Стили позволяют установить в качестве маркера любое подходящее изображение через свойство list-style-image. В качестве значения используется относительный или абсолютный путь к графическому файлу, как показано в примере 3.

Пример 3. Использование изображения в качестве маркера

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Списки</title>
  <style>
   ul {
    list-style-image: url(images/bullet.png);
   }
  </style>
 </head>
 <body>
  <ul>
   <li>Сепульки</li>
   <li>Сепулькарии</li>
   <li>Сепуление</li>
  </ul>
 </body>
</html>

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

Рисунок в качестве маркера

Рис. 4. Рисунок в качестве маркера

Применение list-style-image обладает некоторыми недостатками:

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

Этих недочётов можно избежать с помощью свойства background, оно устанавливает фоновое изображение. Для каждого элемента списка <li> мы убираем исходные маркеры и устанавливаем фоновую картинку без повторения. А чтобы текст не выводился поверх рисунка, смещаем его вправо через padding-left (пример 4).

Пример 4. Использование background

ul {
 margin-left: -1em;
}
li {
 list-style: none;
 background: url(images/bullet.png) no-repeat 0 2px;
 padding-left: 20px;
}

Положение текста и маркера

Существует два способа размещения маркера относительно текста: маркер выносится за границу элементов списка или обтекается текстом (рис. 5).

Маркеры в тексте

a. inside

Маркеры за текстом

б. outside

Рис. 5. Размещение маркеров относительно текста

Чтобы управлять положением маркеров, применяется свойство list-style-position. Оно имеет два значения: outside — маркеры размещаются за пределами текстового блока (это значение по умолчанию) и inside — маркеры являются частью текстового блока и отображаются в элементе списка (пример 5).

Пример 5. Изменение положения маркеров

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Списки</title>
  <style>
   ul {
    list-style-position: inside;
   }
  </style>
 </head>
 <body>
  <ul>
   <li>Перед началом работы проверьте наличие оборудования, входящего
   в комплект 3BM.</li>
   <li>При отсутствии одного или нескольких периферийных устройств
   следует сразу же обратиться к техническому персоналу ВЦ.</li>
   <li>После осмотра визуальными методами своего рабочего места можно
   осторожно включить питание 3BM.</li>
  </ul>
 </body>
</html>

Результат данного примера показан на рис. 6.

Маркеры в тексте

Рис. 6. Маркеры в тексте


Нумерованные списки

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

  • арабские цифры (1, 2, 3, ...);
  • арабские цифры c нулём впереди для цифр меньше десяти (01, 02, 03, ...,10);
  • прописные латинские буквы (А, В, С, ...);
  • строчные латинские буквы (а, b, с, ...);
  • римские цифры в верхнем регистре (I, II, III, ...);
  • римские цифры в нижнем регистре (i, ii, iii, ...);
  • армянская нумерация;
  • грузинская нумерация.

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

Нумерация списка

Допускается начинать список с любого номера; для этой цели применяется атрибут start элемента <ol> или value у элемента <li>. В качестве значения указывается любое целое положительное число. При этом неважно, какой тип нумерации установлен, даже если в качестве списка используются латинские буквы. Если одновременно для списка применяются атрибуты start и value, то последний имеет большее преимущество, и нумерация отображается с числа, указанного value, как показано в примере 1.

Пример 1. Изменение нумерации списка

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Списки</title>
 </head>
 <body>
  <ol type="I" start="4">
   <li>Следует тщательно позаботиться о своем рабочем месте.</li>
   <li>Освещение в помещении отрегулировать таким образом, чтобы источник
   света находился сбоку или сзади оператора.</li>
   <li value="10">Bo избежание медицинских осложнений стул рекомендуется
   выбирать с мягким сидением.</li>
  </ul>
 </body>
</html>

Первый элемент списка в данном примере будет начинаться с римской цифры IV, поскольку указан атрибут start="4", затем идет номер V, а последний элемент следует не по порядку и назначается номером X (рис. 1).

Римские цифры в списке

Рис. 1. Римские цифры в списке

Написание чисел

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

Вид нумерованного списка со скобкой

Рис. 2. Вид нумерованного списка со скобкой

Стили позволяют поменять вид нумерации списков с помощью свойств content и counter-increment. Вначале для селектора ol требуется задать counter-reset: item, это нужно для того, чтобы нумерация в каждом новом списке начиналась заново. В противном случае, нумерация будет продолжена и вместо 1,2,3 можно будет увидеть 5,6,7. Значение item это уникальный идентификатор счётчика, мы его выбираем сами. Далее необходимо спрятать исходные маркеры через стилевое свойство list-style-type со значением none.

Свойство content, как правило, работает в сочетании с псевдоэлементами ::after и ::before. Так, конструкция li::before говорит о том, что перед каждым элементом списка необходимо добавить какое-то содержание (пример 2).

Пример 2. Создание своей нумерации

li::before {
 content: counter(item) ') '; /* Добавляем к числам скобку */
 counter-increment: item; /* Задаём имя счетчика */
}

Свойство content со значением counter(item) выводит число; добавляя скобку, как показано в данном примере, получим требуемый вид нумерации. counter-increment необходим для увеличения номера списка на единицу. Обратите внимание, что везде используется один и тот же идентификатор с именем item. Окончательный код показан в примере 3.

Пример 3. Изменение вида списка

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Списки</title>
  <style>
   ol {
    list-style-type: none; /* Убираем исходные маркеры */
    counter-reset:  item; /* Обнуляем счетчик списка */
   }
   li:before {
    content: counter(item) ') '; /* Добавляем к числам скобку */
    counter-increment: item; /* Задаём имя счетчика */
   }
  </style>
 </head>
 <body>
  <ol>
   <li>Первый</li>
   <li>Второй</li>
   <li>Третий</li>
   <li>Четвертый</li>
  </ol>
 </body>
</html>

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

content: '[' counter(item) '] ';

Список с русскими буквами

Нумерованный список есть с латинскими буквами, а вот русских букв для списка нет. Их можно добавить искусственно, воспользовавшись вышеприведённым приёмом. Поскольку нумерация делается через стили, сам список остаётся исходным, к нему лишь добавляется выбранный класс, назовём его cyrilic (пример 4).

Пример 4. Код для создания списка

<ol class="cyrilic">
 <li>Один</li>
 <li>Два</li>
 <li>Три</li>
</ol>

Добавление букв осуществляется с помощью псевдоэлемента ::before и свойства content. Поскольку в каждой строке должна быть своя буква, воспользуемся псевдоклассом :nth-child(1), в скобках пишется номер буквы. Первой буквой, естественно, идёт А, второй — Б, третьей — В и т. д. Весь этот набор добавляется к селектору li следующим образом (пример 5).

Пример 5. Применение псевдокласса :nth-child

.cyrilic li:nth-child(1)::before { content: 'а)'; }
.cyrilic li:nth-child(2)::before { content: 'б)'; }
.cyrilic li:nth-child(3)::before { content: 'в)'; }

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

Окончательно настраиваем выравнивание и положение букв, по желанию указываем размер шрифта, цвет и другие параметры (пример 6).

Пример 6. Список с русскими буквами

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Список</title>
  <style>
   .cyrilic {
    list-style-type: none; /* Прячем исходную нумерацию */
   }
   .cyrilic li::before {
    margin-right: 5px; /* Расстояние от буквы до текста */
    width: 1em; /* Ширина */
    text-align: right; /* Выравнивание по правому краю */
    display: inline-block; /* Строчно-блочный элемент */
   }
   .cyrilic li:nth-child(1)::before { content: 'а)'; }
   .cyrilic li:nth-child(2)::before { content: 'б)'; }
   .cyrilic li:nth-child(3)::before { content: 'в)'; }
   .cyrilic li:nth-child(4)::before { content: 'г)'; }
   .cyrilic li:nth-child(5)::before { content: 'д)'; }
   .cyrilic li:nth-child(6)::before { content: 'е)'; }
   .cyrilic li:nth-child(7)::before { content: 'ё)'; }
   .cyrilic li:nth-child(8)::before { content: 'ж)'; }
   .cyrilic li:nth-child(9)::before { content: 'з)'; }
   .cyrilic li:nth-child(10)::before { content: 'и)'; }
  </style>
 </head>
 <body>
  <ol class="cyrilic">
   <li>Борщ</li>
   <li>Котлеты из щуки</li>
   <li>Кулебяка</li>
   <li>Грибы в сметане</li>
   <li>Блины с икрой</li>
   <li>Квас</li>
  </ol>
 </body>
</html>

Результат данного примера показан на рис. 3.

Русские буквы в списке

Рис. 3. Русские буквы в списке

Плюсов у данного метода добавления нумерации много.

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


Вложенные списки

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

Пример 1. Создание многоуровневого списка

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Списки</title>
 </head>
 <body>
  <ol>
   <li>Русская кухня
    <ol>
     <li>Уха бурлацкая</li>
     <li>Бабушкина тюря</li>
     <li>Растегай</li>
    </ol>
   </li>
   <li>Украинская кухня</li>
   <li>Молдавская кухня</li>
   <li>Кавказская кухня</li>
   <li>Прибалтийская кухня</li>
  </ol>
 </body>
</html>

Результат действия данного примера приведён на рис. 1. Второй список <ol> вкладывается внутрь элемента <li> сразу же после текста пункта. Обратите внимание, что у подпунктов имеется отступ слева, но нет вертикальных отступов сверху и снизу списка.

Вид многоуровневого списка

Рис. 1. Вид многоуровневого списка

Альтернативно можно использовать в качестве подпунктов латинские буквы или римские цифры (пример 2).

Пример 2. Представление многоуровневого списка

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Списки</title>
  <style>
   ol li { font-weight: bold;  /* Выделение пунктов */ }
   ol ol { list-style: lower-alpha;  /* Тип нумерации подпунктов */ }
   ol ol li { font-weight: normal;  /* Оформление подпунктов */ }
  </style>
 </head>
 <body>
   <ol>
    <li>Русская кухня
     <ol>
     <li>Уха бурлацкая</li>
     <li>Бабушкина тюря</li>
     <li>Растегай</li>
    </ol>
   </li>
   <li>Украинская кухня</li>
   <li>Молдавская кухня</li>
  </ol>
 </body>
</html>

Применение стилей также позволяет по-разному выделять и оформлять пункты и подпункты (рис. 2).

Выделение пунктов списка

Рис. 2. Выделение пунктов списка

Следует учитывать, что стиль селектора ol наследуется селектором li, поэтому для пунктов и подпунктов приходится задавать разное оформление, чтобы стиль не перекочёвывал с одного элемента списка на другой.


Список описаний

Список описаний или список определений, как он ещё называется, состоит из двух частей — термина и его определения. Сам список задаётся с помощью элемента <dl> (от англ. Description List — список описаний), термин — <dt> (от англ. Definition Term — термин), а его определение — с помощью элемента <dd> (от англ. Description — описание). Вложение элементов для создания списка описаний продемонстрировано в примере 1.

Пример 1. Общая структура списка описаний

<dl>
  <dt>Термин 1</dt>
    <dd>Определение 1</dd>
  <dt>Термин 2</dt>
    <dd>Определение 2</dd>
</dl>

Список описаний хорошо подходит для расшифровки терминов, создания глоссария, словаря, справочника и т. д. В примере 2 показан один из возможных вариантов применения этого вида списка.

Пример 2. Создание списка описаний

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Список определений</title>
 </head>
 <body>
  <dl>
   <dt>Сепульки</dt>
    <dd>Важный элемент цивилизации ардритов с планеты Энтеропия.</dd>
   <dt>Сепулькарии</dt>
    <dd>Устройства для сепуления.</dd>
   <dt>Сепуление</dt>
    <dd>Занятие ардритов с планеты Энтеропия.</dd>
  </dl>
 </body>
</html>

Результат примера показан на рис. 2.

Вид списка описаний

Рис. 2. Вид списка описаний

Как видно на картинке, текст термина прижимается к левому краю окна браузера, а его определение сдвигается вправо. Можно изменить вид представления списка, расположив термин и определение на одной строке (пример 3).

Пример 3. Горизонтальный список

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Список определений</title>
  <style>
   dt {
    float: left; /* Выстраиваем по горизонтали */
    width: 150px; /* Ширина термина */
    overflow: hidden;  /* Обрезаем длинную строку */
    text-align: right; /* Выравниваем вправо */
    text-overflow: ellipsis; /* Добавляем многоточие */
   }
   dd {
    margin-left: 170px; /* Отступ слева */
    margin-bottom: 5px; /* Расстояние между терминами */
   }
  </style>
 </head>
 <body>
  <dl>
   <dt>Сепульки</dt>
    <dd>Важный элемент цивилизации ардритов с планеты Энтеропия.</dd>
   <dt>Сепулькарии</dt>
    <dd>Устройства для сепуления.</dd>
   <dt>Сепуление</dt>
    <dd>Занятие ардритов с планеты Энтеропия.</dd>
  </dl>
 </body>
</html>

Результат данного примера показан на рис. 3. Расположение задаётся с помощью свойства float со значением left, под термин отводится ширина 150 пикселей и если слово не помещается, то оно будет обрезано и в конце добавлено многоточие.

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

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


Использование списков

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

Хлебные крошки

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

Вид хлебных крошек

Рис. 1. Вид хлебных крошек

Последний текст указывает на текущую страницу и ссылкой не является. Все пункты отделяются друг от друга каким-нибудь символом, обычно это стрелка (→), слэш (/), знак больше (>) и тому подобное.

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

<ul class="breadcrumbs">
 <li><a href="#">Главная</a></li>
 <li><a href="#">Передачи</a></li>
 <li><a href="#">Редукторы</a></li>
 <li>Редуктор червячный</li>
</ul>

Заметьте, что никаких разделителей здесь нет, они выводятся с помощью стилевого свойства content (пример 1).

Пример 1. Создание хлебных крошек

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Хлебные крошки</title>
  <style>
   .breadcrumbs {
    margin: 0; padding: 0; /* Убираем отступы */
   }
   .breadcrumbs li {
    display: inline-block; /* Выстраиваем по горизонтали */
   }
   .breadcrumbs li::before {
    content: '/'; /* Разделитель */
    margin-left: 5px; /* Отступ слева */
    margin-right: 5px; /* Отступ справа */
    color: #7f7f7f; /* Цвет разделителя */
   }
   .breadcrumbs li:first-child::before {
    content: ''; /* Убираем разделитель для первого пункта */
   }
  </style>
 </head>
 <body>
  <ul class="breadcrumbs">
   <li><a href="# ">Главная</a></li>
   <li><a href="#">Передачи</a></li>
   <li><a href="#">Редукторы</a></li>
   <li>Редуктор червячный</li>
  </ul>
 </body>
</html>

Для начала мы обнуляем все поля и отступы у списка и выстраиваем пункты горизонтально через свойство display со значением inline-block. Оно же убирает маркеры, поэтому специально это делать уже не надо. Псевдоэлемент ::before требуется для добавления разделителя между пунктами и управления его видом. Текст добавляется ко всем пунктам, включая первый, что нам, конечно же, не надо. Поэтому убираем его с помощью псевдокласса :first-child, который применяет стиль к первому элементу <li>.

Нумерация страниц

Большое количество материалов, например статьи сайта, часто разбивают на отдельные страницы по 10-15 статей на страницу, что приводит к сокращению загрузки сайта. Переход между отдельными страницами делается через их нумерацию, где каждый номер служит ссылкой на соответствующую страницу. Возможен вывод всех страниц, определённого их количества или только ссылок на следующую и предыдущую страницу. Какой вариант выбрать зависит от дизайна сайта и ваших предпочтений. Один из возможных способов нумерации показан на рис. 2.

Рис. 2. Нумерация страниц

Чтобы сделать такую нумерацию мы опять используем простой список, теперь уже с классом pager, каждый пункт этого списка будет ссылкой на страницу. Чтобы выделить текущую страницу добавим класс active (пример 2).

Пример 2. Нумерация страниц

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Нумерация страниц</title>
  <style>
   .pager {
    margin: 0; padding: 0; /* Убираем все отступы */
    border-bottom: 2px solid #006cc9; /* Линия между номерами */
    display: inline-block; /* Ограничиваем ширину списка */
   }
   .pager li {
    display: inline-block;  /* Выстраиваем по горизонтали */
    width: 30px; height: 30px; /* Размеры круга */
    border-radius: 50%; /* Делаем круг */
    background: #006cc9; /* Цвет фона */
    line-height: 30px; /* Выравниваем по середине высоты */
    position: relative; top: 27px; /* Смещаем вниз */
    margin-left: 10px; /* Расстояние между номерами */
   }
   .pager li:first-child {
    margin-left: 0;  /* Для первого числа убираем отступ */
   }
   .pager a {
    color: #fff; /* Цвет текста */
    text-decoration: none; /* Убираем подчёркивание */
    text-align: center; /* Выравниваем по середине */
    display: block; /* Ссылка занимает весь блок */
   }
   .pager .active {
    width: 50px; height: 50px; /* Размер текущего номера */
    line-height: 50px; /* Выравниваем по середине высоты */
    background: #fff; /* Цвет фона */
    border: 3px solid #006cc9; /* Рамка вокруг */
    font-size: 20px; /* Размер текста */
   }
   .pager .active a {
    color: #000; /* Цвет текущего номера */
    font-weight: bold; /* Жирное начертание */
   }
  </style>
 </head>
 <body>
  <ul class="pager">
   <li><a href="#">1</a></li>
   <li class="active"><a href="#">2</a></li>
   <li><a href="#">3</a></li>
   <li><a href="#">4</a></li>
   <li><a href="#">5</a></li>
   <li><a href="#">6</a></li>
  </ul>
 </body>
</html>

Линия между пунктами делается через свойство border-bottom для элемента <ul>. Поскольку <ul> — это блочный элемент и занимает всю доступную ему ширину, её надо ограничить либо задав width, либо, как показано в примере, установив display со значением inline-block. Линия оказывается под числами, так что пункты меню смещаем вниз на половину их высоты.

Размеры всех кругов установлены точно, через width и height, в связи с чем возникает две проблемы. Первая — ссылка гораздо меньше самого круга и пользователь будет промахиваться; вторая — ссылка располагается в верхней части круга, но никак не по его середине. Первая проблема решается просто — надо сделать ссылки блочными, тогда они будут занимать всю ширину и высоту круга. При этом ссылки остаются квадратными и немного выходят за пределы цветного фона. Но это не видно и становится заметно только при наведении курсора в один из углов ссылки. Выравнивание текста делается с помощью свойства line-height, значение которого совпадает с высотой элемента. Этот способ позволяет выровнять текст по середине высоты элемента и он нам ещё пригодится в дальнейшем.

Создание меню

Меню на сайте это один из способов навигации по нему. Самый простой вариант — набор горизонтальных ссылок, напоминающих по своему виду хлебные крошки. Отличие в том, что между ссылок нет указателей (рис. 3).

Рис. 3. Горизонтальное меню

Для создания такого меню применяем принципы используемые нами в предыдущих примерах, но для разнообразия внесём декоративные изменения. Меню имеет небольшой градиент, под ним находится слабая тень, а пункты меню разделяются вертикальной линией. Сама линия нестандартная и состоит из серой и белой полосок, так что отдельно будем добавлять свою линию к элементам <li> и <a> (пример 3). Они плотно прилегают друг к другу и создают эффект единой полоски.

Пример 3. Горизонтальное меню

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Меню</title>
  <style>
   .menu {
    background: linear-gradient(to bottom, #fff, #f1f2f2); /* Градиент */
    border: 1px solid #999; /* Параметры рамки */
    padding: 0 5px; /* Поля */
    font: 14px Arial, sans-serif; /* Параметры шрифта */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Тень под меню */
   }
   .menu li {
    display: inline-block; /* Выстраиваем по горизонтали */
    border-right: 1px solid #fff; /* Белая линия справа */
   }
   .menu a {
    text-decoration: none; /* Убираем подчёркивание */
    color: #4c4c4c; /* Цвет ссылок */
    display: block; /* Блочные ссылки */
    padding: 10px 15px; /* Поля */
    border-right: 1px solid #d8d8d8; /* Серая линия справа */
   }
   .menu a:hover { color: #006cc9; }
  </style>
 </head>
 <body>
  <ul class="menu">
   <li><a href="#">Первые блюда</a></li>
   <li><a href="#">Вторые блюда</a></li>
   <li><a href="#">Компот</a></li>
  </ul>
 </body>
</html>

Градиент в данном примере добавляется с помощью функции linear-gradient, а тень — с помощью свойства box-shadow.

Ниспадающее меню

Более сложный вид меню называется ниспадающим. При наведении указателя на пункты появляется подменю, до этого невидимое (рис. 4); как только указатель уходит с текста, то меню прячется вновь.

Вид ниспадающего меню

Рис. 4. Вид ниспадающего меню

Такой вид меню достаточно сложен для вёрстки, поэтому разберём его подробнее. Вначале делаем вложенный список, — пункты первого списка служат текстом основного меню, второй список внутри элемента <li> будет служить подменю. Если подменю не требуется, то оставляем только один элемент <li>, а <ul> в него не добавляем. Структура каждого пункта имеет следующий вид.

<li><a href="#">Русская кухня</a>
 <ul>
  <li><a href="#">Бефстроганов</a></li>
  <li><a href="#">Гусь с яблоками</a></li>
  <li><a href="#">Крупеник новгородский</a></li>
  <li><a href="#">Раки по-русски</a></li>
 </ul>
</li>

Теперь нам надо различить стиль для разных элементов <li>, чтобы установить стиль для пунктов первого и второго уровня меню. Если просто указать селектор li, то стиль будет применяться ко всем пунктам вообще. Так что используем селектор .menu > li, он применяет стиль только к элементам <li> первого уровня. В итоге стиль для нашего горизонтального меню немного меняется.

/* Обнуляем отступы и убираем маркеры у списков */
.menu, .menu ul {
 list-style: none;
 margin: 0; padding: 0;
}
.menu {
 background: linear-gradient(to bottom, #fff, #f1f2f2); /* Градиент */
 border: 1px solid #999; /* Параметры рамки */
 padding: 0 5px; /* Поля */
 font: 14px Arial, sans-serif; /* Параметры шрифта */
 box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Тень под меню */
}
.menu > li {
 display: inline-block; /* Выстраиваем по горизонтали */
 border-right: 1px solid #fff; /* Белая линия справа */
 position: relative; /* Относительное позиционирование */
}
.menu a {
 text-decoration: none; /* Убираем подчёркивание */
 color: #4c4c4c; /* Цвет ссылок */
 display: block; /* Блочные ссылки */
}
.menu > li > a {
 padding: 10px 15px; /* Поля */
 border-right: 1px solid #d8d8d8; /* Серая линия справа */
 position: relative; /* Относительное позиционирование */
 z-index: 3; /* Выводим поверх остальных элементов */
}
.menu ul {
 display: none; /* Прячем подменю */
}

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

Временно можно включить показ подменю и настроить их вид.

.menu ul {
 position: absolute; /* Абсолютное позиционирование */
 display: none; /* Прячем подменю */
 width: 200px; /* Ширина подменю */
 background: #fff; /* Цвет фона */
 box-shadow: 0 0 10px #666; /* Параметры тени */
}
.menu ul a {
 padding: 5px 10px; /* Поля */
}
.menu ul a:hover {
 background: #008df2; /* Цвет фона */
 color: #fff; /* Цвет текста */
}

Остаётся сделать вывод подменю при наведении курсора мыши на пункты меню. Для этого используем псевдокласс :hover, добавляя его к li.

.menu li:hover ul {
  display: block;
}

Такой селектор говорит, что стиль следует применить к элементу <ul>, в данном случае отобразить его, только когда указатель мыши наведён на элемент <li> внутри контейнера с классом menu.

После этого наше меню будет работать и выводить подменю где оно имеется. Остаются последние декоративные штрихи, связанные с тенями и их правильным наложением. Чтобы корректно отобразить тень под пунктами меню первого уровня создадим пустой псевдоэлемент через ::before, установим для него тень, и подложим его под ссылку (вот z-index для <a> и пригодился).

.menu > li:hover::before {
 content: ''; /* Создаём пустой псевдоэлемент */
 top: 0; left: 0; right: 0; bottom: 0; /* Размер совпадает с пунктом меню */
 box-shadow: 0 5px 10px #666; /* Параметры тени */
 position: absolute; /* Абсолютное позиционирование */
}

Окончательный код продемонстрирован в примере 4.

Пример 4. Ниспадающее меню

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Меню</title>
  <style>
   .menu, .menu ul {
    /* Обнуляем отступы и убираем маркеры у списков */
    list-style: none; margin: 0; padding: 0;
   }
   .menu {
    background: linear-gradient(to bottom, #fff, #f1f2f2); /* Градиент */
    border: 1px solid #999; /* Параметры рамки */
    padding: 0 5px; /* Поля */
    font: 14px Arial, sans-serif; /* Параметры шрифта */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Тень под меню */
   }
   .menu > li {
    display: inline-block; /* Выстраиваем по горизонтали */
    border-right: 1px solid #fff; /* Белая линия справа */
    position: relative; /* Относительное позиционирование */
   }
   .menu a {
    text-decoration: none; /* Убираем подчёркивание */
    color: #4c4c4c; /* Цвет ссылок */
    display: block; /* Блочные ссылки */
   }
   .menu > li > a {
    padding: 10px 15px; /* Поля */
    border-right: 1px solid #d8d8d8; /* Серая линия справа */
    position: relative; z-index: 3; /* Выводим поверх остальных элементов */
   }
   .menu ul {
    position: absolute; /* Абсолютное позиционирование */
    display: none; /* Прячем подменю */
    width: 200px; /* Ширина подменю */
    background: #fff; /* Цвет фона */
    box-shadow: 0 0 10px #666; /* Параметры тени */
   }
   .menu ul a {
    padding: 5px 10px; /* Поля */
   }
   .menu ul a:hover {
    background: #008df2; /* Цвет фона */
    color: #fff; /* Цвет текста */
   }
   .menu li:hover ul {
    display: block; /* Показываем подменю */
   }
   .menu > li:hover::before {
    content: ''; /* Создаём пустой псевдоэлемент */
    top: 0; left: 0; right: 0; bottom: 0; /* Размер совпадает с пунктом меню */
    box-shadow: 0 5px 10px #666; /* Параметры тени */
    position: absolute; /* Абсолютное позиционирование */
   }
   .menu > li:hover > a {
    background: #fff; /* Цвет фона */
   }
  </style>
 </head>
 <body>
  <ul class="menu">
   <li><a href="#">Русская кухня</a>
    <ul>
     <li><a href="#">Бефстроганов</a></li>
     <li><a href="#">Гусь с яблоками</a></li>
     <li><a href="#">Крупеник новгородский</a></li>
     <li><a href="#">Раки по-русски</a></li>
    </ul>
   </li>
   <li><a href="#">Украинская кухня</a>
    <ul>
     <li><a href="#">Вареники</a></li>
     <li><a href="#">Жаркое по-харьковски</a></li>
     <li><a href="#">Капустняк черниговский</a></li>
     <li><a href="#">Потапцы с помидорами</a></li>
    </ul>
   </li>
   <li><a href="#">Кавказская кухня</a></li>
  </ul>
 </body>
</html>


Изображения

Для встраивания изображения в документ используется элемент <img>, имеющий два обязательных атрибута — src и alt. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив <img> внутрь <a>.

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

Далее описаны атрибуты элемента <img>, отвечающие за отображение изображений и их характеристики.

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

height и width. Для изменения размеров изображения средствами HTML предусмотрены атрибуты height и width. Допускается использовать значения в пикселях или процентах. Если установлена процентная запись, то размеры изображения вычисляются относительно родительского элемента — контейнера, где находится элемент <img>. В случае отсутствия родительского контейнера, его роль играет окно браузера. Иными словами, width=100% означает, что рисунок будет растянут на всю ширину веб-страницы. Добавление только одного атрибута width или height сохраняет пропорции и сооотношение сторон изображения. Браузер при этом ожидает полной загрузки рисунка, чтобы определить его первоначальную высоту и ширину.

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

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

Добавление изображения на страницу с учётом этих атрибутов продемонстрировано в примере 1.

Пример 1. Использование <img>

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Изображения</title>
 </head>
 <body>
  <img src="images/redcat.jpg" alt="Рыжая кошка" width="500" height="375">
 </body>
</html>

Если после добавления изображения оно не отображается на веб-странице, проверьте следующие моменты.

  • Имя файла должно писаться с учётом регистра. Операционная система Linux, на базе которой преимущественно устанавливается хостинг, щепетильно относится к именам файлов, поэтому файлы img.png, IMG.png и Img.png воспринимаются как разные. Чтобы указанная особенность не привела к ошибкам с отображением рисунков, всегда задавайте имена файлов в нижнем регистре. Иными словами пишите их маленькими буквами.
  • Графические файлы с русскими символами в названиях файлов не всегда корректно отображаются в браузерах. Лучше использовать для этого латинские символы.


Форматы графических файлов

Широкое распространение для веб-графики получили два формата — PNG и JPEG. Их многофункциональность, универсальность, небольшой объём исходных файлов при достаточном для сайта качестве сослужили им хорошую службу, фактически определив их как стандарт веб-изображений. Есть ещё формат GIF, который также поддерживается браузерами при добавлении изображений и SVG, о котором следует сказать отдельно.

GIF

GIF (Graphics Interchange Format, формат обмена графическими данными) — формат графических файлов, широко применяемый при создании сайтов. GIF использует 8-битовый цвет и эффективно сжимает сплошные цветные области, при этом сохраняя детали изображения.

Особенности

  • Количество цветов в изображении может быть от 2 до 256, но это могут быть любые цвета из 24-битной палитры.
  • Файл в формате GIF может содержать прозрачные участки. Если используется отличный от белого цвета фон, он будет проглядывать сквозь «дыры» в изображении.
  • Формат поддерживает покадровую смену изображений, что делает его популярным для создания баннеров и простой анимации.
  • Использует свободный от потерь метод сжатия.

Область применения

Текст, логотипы, иллюстрации с чёткими краями, анимированные рисунки, изображения с прозрачными участками, баннеры.

JPEG

JPEG (Joint Photographic Experts Group, объединённая группа экспертов в области фотографии) — популярный формат графических файлов, широко применяемый при создании сайтов и для хранения изображений. JPEG поддерживает 24-битный цвет и сохраняет неизменными яркость и оттенки цветов в фотографиях. Данный формат называют сжатием с потерями, поскольку алгоритм JPEG выборочно отвергает данные. Метод сжатия может внести искажения в рисунок, особенно содержащий текст, мелкие детали или чёткие края. Формат JPEG не поддерживает прозрачность. Когда вы сохраняете фотографию в этом формате, прозрачные пиксели заполняются определённым цветом.

Особенности

  • Количество цветов в изображении — около 16 миллионов, что вполне достаточно для сохранения фотографического качества изображения.
  • Основная характеристика формата — качество, позволяющее управлять конечным размером файла.
  • Поддерживает технологию, известную под названием прогрессивный JPEG, при которой версия рисунка с низким разрешением появляется в окне просмотра до полной загрузки самого изображения.

Область применения

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

PNG-8

PNG-8 (Portable Network Graphics, портативная сетевая графика) — формат по своему действию похожий на GIF. По заверению разработчиков, он использует улучшенный формат сжатия данных, но как показывает практика, это не всегда так.

Особенности

  • Использует 8-битную палитру (256 цветов) в изображении, за что и получил в своём названии цифру восемь. При этом можно выбирать, сколько цветов будет сохраняться в файле, — от 2 до 256.
  • В отличие от GIF, не отображает анимацию ни в каком виде.

Область применения

Текст, логотипы, иллюстрации с чёткими краями, изображения с прозрачностью.

PNG-24

PNG-24 — формат, аналогичный PNG-8, но использующий 24-битную палитру цвета. Подобно формату JPEG, сохраняет яркость и оттенки цветов в фотографиях. Подобно GIF и формату PNG-8, сохраняет мелкие детали изображения.

Особенности

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

Область применения

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

SVG

SVG (Scalable Vector Graphics, масштабируемая векторная графика) — это векторный формат, в отличие от предыдущих растровых форматов. Растровое изображение состоит из набора разноцветных пикселей, которые для человеческого глаза сливаются в единую картинку. Векторное же строится из набора объектов, вроде линий, кривых, прямоугольников, окружностей и др. При увеличении масштаба векторное изображение увеличивается пропорционально, сохраняя своё высокое качество.

Особенности

  • Надписи остаются обычным текстом, их можно выделять, копировать, они читаются поисковыми системами при обходе сайта.
  • Рисунки можно масштабировать произвольно, сохраняя при этом высокое качество.
  • Формат не поддерживается браузером Internet Explorer до версии 9.0.

Область применения

Масштабируемые изображения, рисунки, логотипы, иллюстрации, графики и диаграммы.


Масштабирование картинок

Если для элемента <img> не задать атрибуты width и height, то браузер самостоятельно определит ширину и высоту изображения после загрузки файла и покажет его в исходном размере. Рисунок в формате SVG браузеры, за исключением IE, выводят на всю доступную ширину.

Изменение масштаба и пропорций изображения делается как через атрибуты <img>, так и через стили.

Использование атрибутов

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

Пример 1. Размеры в пикселях

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Изображения</title>
 </head>
 <body>
  <img src="images/redcat.jpg" alt="Размеры не заданы">
  <img src="images/redcat.jpg" alt="Задана ширина" width="400">
  <img src="images/redcat.jpg" alt="Задана ширина и высота" width="400" height="400">
 </body>
</html>

В примере использовалась одна и та же фотография, для первого <img> размеры явно не указаны, поэтому браузер добавил изображение в исходном виде. Для второй фотографии указана ширина 400 пикселей, что привело к уменьшению её размеров при сохранении пропорций. Третья фотография искажена, поскольку задана одинаковая ширина и высота, притом, что исходное изображение не квадратное (рис. 1).

Рис. 1. Размеры фотографии

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

Пример 2. Размеры в процентах

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Изображения</title>
  <style>
   figure {
    width: 27%; /* Ширина */
    float: left; /* Выстраиваем элементы по горизонтали */
    margin: 0 0 0 3.5%; /* Отступ слева */
    background: #f0f0f0; /* Цвет фона */
    border-radius: 5px; /* Радиус скругления */
    padding: 2%; /* Поля */
   }
   figure:first-child {
    margin-left: 0; /* Убираем отступ для первого элемента */
   }
  </style>
 </head>
 <body>
  <figure>
   <img src="images/redcat.jpg" alt="Рыжая кошка" width="100%">
  </figure>
  <figure>
   <img src="images/redcat.jpg" alt="Рыжая кошка" width="100%">
  </figure>
  <figure>
   <img src="images/redcat.jpg" alt="Рыжая кошка" width="100%">
  </figure>
 </body>
</html>

В данном примере все размеры заданы в процентах, так что приходится пользоваться математикой, чтобы суммарная ширина не получилась больше 100%. Ширину каждого элемента <figure> устанавливаем как 27%, к ней добавляется поле слева и справа по 2%, итого каждый элемент занимает 31%, а всего 31х3=93%. Оставшиеся 100-93=7% делим пополам, в итоге 7/2=3.5% — столько получается ширина промежутка между блоками. Для первого <figure> отступ слева нам не нужен, поэтому его убираем через свойство margin-left. Результат данного примера показан на рис. 2.

Рис. 2. Масштабирование фотографий

Масштабирование через стили

Стили удобно задействовать, когда нужно массово задать одинаковые размеры для множества изображений, тогда не придётся указывать индивидуальные размеры для каждой картинки через width и height. Но если у вас большое количество иллюстраций разного размера, то стили здесь никак не помогут. Они пригодятся, например, для иконок одинаковой ширины и высоты или когда размеры задаются в процентах, как это показано выше. В примере 3 приведён стиль для изменения размеров всех изображений внутри элемента <figure>.

Пример 3. Размеры через стили

figure img {
 width: 100%; /* Ширина в процентах */
}

Когда для одного элемента одновременно указывается атрибут width и стилевое свойство width, то стили имеют приоритет выше.

Интерполяция

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

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

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

Пример 4. Изменение алгоритма интерполяции

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Изображения</title>
  <style>
   img { border: 1px solid #ccc; }
   .edge {
    image-rendering: -moz-crisp-edges; /* Firefox */
    -ms-interpolation-mode: nearest-neighbor;  /* IE */
    image-rendering: crisp-edges; /* Стандартное свойство */
   }
  </style>
 </head>
 <body>
  <img src="images/russia.png" alt="Флаг России" width="200">
  <img src="images/russia.png" alt="Флаг России" width="200" class="edge">
 </body>
</html>

Результат данного примера показан на рис. 3. Для левой картинки применяется алгоритм, заданный по умолчанию; для правой — метод интерполяции по ближайшим точкам.

Вид картинок после увеличения масштаба

Рис. 3. Вид картинок после увеличения масштаба

Вписывание картинки в область

Порой изображения необходимо вписать в область заданных размеров, например, для создания слайдшоу — плавной смены нескольких фотографий. Есть два основных способа. Первый метод простой и работает во всех браузерах. Задаём желаемые размеры области и скрываем всё, что в неё не помещается с помощью свойства overflow со значением hidden (пример 5).

Пример 5. Использование overflow

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Изображения</title>
  <style>
   figure {
    width: 100%; /* Ширина области */
    height: 400px; /* Высота области */
    margin: 0; /* Обнуляем отступы */
    overflow: hidden; /* Прячем всё за пределами */
    min-width: 600px; /* Минимальная ширина */
   }
   figure img {
    width: 100%; /* Ширина изображений */
    margin: -10% 0 0 0; /* Сдвигаем вверх */
   }
  </style>
 </head>
 <body>
  <figure>
   <img src="images/redcat.jpg" alt="Рыжая кошка">
  </figure>
 </body>
</html>

Результат примера показан на рис. 4. Область имеет высоту 400 пикселей и занимает всю доступную ей ширину. Для фотографии внутри <figure> устанавливаем ширину 100% и сдвигаем её чуть вверх, чтобы она лучше выглядела. Поскольку высота области фиксирована, то при уменьшении окна браузера до некоторого предела высота фотографии окажется меньше 400 пикселей и под ней появится пустое пространство. Поэтому вводим свойство min-width чтобы этого избежать.

Фотография внутри области заданных размеров

Рис. 4. Фотография внутри области заданных размеров

Второй способ не так универсален, поскольку свойство object-fit не поддерживается в IE, а Firefox его понимает только с версии 36. Зато object-fit позволяет более аккуратно вписать изображение в заданную область. В примере 6 показан стиль для этого. Задействовано значение cover, оно увеличивает или уменьшает изображение так, чтобы оно всегда полностью заполняла всю область.

Пример 6. Использование object-fit

figure {
 width: 100%; /* Ширина области */
 height: 400px; /* Высота области */
 margin: 0; /* Обнуляем отступы */
}
figure img {
 width: 100%; /* Ширина изображений */
 height: 100%; /* Высота изображении */
 object-fit: cover; /* Вписываем фотографию в область */
}


Элемент figure

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

Элемент <figure> не должен быть связан с основным текстом, так что если его переместить в другое место, то смысл содержания не потеряется. К примеру, если добавить иллюстрацию, то в тексте на неё можно сослаться как «...изображена на рис. 2». Сам рисунок при этом может располагаться в другом месте, а не только идти сразу же после текста, главное, не забыть его подписать. И, наоборот, неверным шагом будет воспользоваться <figure> и сослаться на него как «смотри рисунок ниже». Потому что при перемещении иллюстрации искажается смысл текста.

В примере 1 показано применение <figure> для иллюстрации текста.

Пример 1. Использование <figure>

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Изображения</title>
 </head>
 <body>
  <p>Зубчатые механизмы используют для изменения параметров вращательного движения,
   а также для преобразования вращательного движения в поступательное. Зубчатый
   механизм с круглыми колёсами и реечной передачей, используемый в стрелочных
   электроприводах железных дорог, показан на рис. 4.</p>
  <figure>
   <img src="images/fig4.png" width="600" height="416" alt="Рис. 4">
   <figcaption>Рис. 4. Зубчатый
    механизм с круглыми колёсами и реечной передачей</figcaption>
   </figure>
 </body>
</html>

Результат данного примера показан на рис. 1.

Вид картинки с заголовком

Рис. 1. Вид картинки с заголовком

Содержимое <figure> выравнивается по левому краю и к нему добавляются небольшие отступы, это заметно по картинке, она отступает немного вправо относительно левого края текста. Для изменения способа выравнивания, например, по центру, в стилях используем свойство text-align.

figure {
 text-align: center; /* Выравнивание по центру */
}


Подрисуночная подпись

Подрисуночная подпись — это текст, который является комментарием к рисунку и его описывает. Такая подпись важна, поскольку она привлекает внимание читателя к иллюстрации и даёт больше информации об изображении. У элемента <img> существует, конечно, атрибут title, который задаёт текст всплывающей подсказки, но чтобы её получить, приходится наводить курсор мыши на каждый рисунок, что довольно неудобно. Более наглядный способ и, соответственно, более предпочтительный заключается в размещении подрисуночной подписи возле самого изображения. Подпись хоть и называется подрисуночной, но может располагаться сверху или сбоку от рисунка, если это продиктовано соображениями вёрстки и дизайна (рис. 1).

Варианты размещения подрисуночной подписи

Рис. 1. Варианты размещения подрисуночной подписи

Для размещения на веб-странице и рисунка, и подписи к нему удобно воспользоваться элементами <figure> и <figcaption>, а через стили задать параметры рисунка, а также расположение текста (пример 1).

Пример 1. Создание подрисуночной подписи

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Изображения</title>
  <style>
   figure {
    display: inline-block; /* Выстраиваем по горизонтали */
    background: #85ab6f; /* Цвет фона */
    padding: 10px; /* Поля */
    margin: 0 1em 0 0; /* Отступ справа */
    vertical-align: top; /* Выравниваем по верхнему краю */
   }
   figcaption {
    text-align: center; /* Выравниваем по центру */
   }
   figure.right {
    pading-left: 100px; /* Место справа под текст */
   }
   figure.right figcaption {
    float: right; /* Добавляем текст справа */
    padding: 5px; /* Поля вокруг текста */
   }
  </style>
 </head>
 <body>
  <figure>
   <img src="images/fig1.jpg" width="300" height="404" alt="">
   <figcaption>Подпись снизу</figcaption>
  </figure>
  <figure>
   <figcaption>Подпись сверху</figcaption>
   <img src="images/fig2.jpg" width="300" height="404" alt="">
  </figure>
  <figure class="right">
   <figcaption class="right">Подпись справа</figcaption>
   <img src="images/fig3.jpg" width="300" height="404" alt="">
  </figure>
 </body>
</html>

Для изменения положения текста — сверху или снизу изображения, достаточно просто поменять местами элементы <img> и <figcaption>. Для размещения сбоку применяем свойство float к селектору figcaption, но надо помнить, что это свойство воздействует на все нижележащие элементы тоже.


Выравнивание картинок

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

Обтекание изображения текстом

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

Для обтекания картинки текстом применяется стилевое свойство float. Значение right будет выравнивать изображение по правому краю родительского элемента или окна браузера, а текст размещать слева от рисунка. Значение left, наоборот, выравнивает изображение по левому краю, а текст — справа от рисунка (пример 1). Элемент, для которого установлено значение float, обычно называется плавающим. Это название, конечно же, условное и говорит лишь о том, что текст или другие объекты будут обходить его с разных сторон, создавая обтекание.

Пример 1. Применение float

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Изображения</title>
  <style>
   figcaption {
    text-align: center;
   }
   .left {
    float: left; /* Выравнивание по левому краю */
    margin: 0 1em 1em 0; /* Отступ справа и снизу */
   }
   .right{
    float: right; /* Выравнивание по правому краю */
    margin: 0 0 1em 1em; /* Отступ снизу и слева */
   }
  </style>
 </head>
 <body>
  <figure class="left">
   <img src="images/fig.jpg" width="200" alt="">
   <figcaption>Подпись снизу</figcaption>
  </figure>
  <p>Текст</p>
 </body>
</html>

В данном примере вводится два класса с именами left и right, добавление которых к элементу <img> или <figure> выравнивает их по соответствующему краю. Чтобы текст немного отступал от картинки добавляется универсальное свойство margin. На рис. 1 показано выравнивание по левому краю.

Выравнивание фотографии по левому краю

Рис. 1. Выравнивание фотографии по левому краю

Выравнивание рисунка относительно текста

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

Рис. 2. Базовая линия

Если просто вставить рисунок посередине строки, то он будет выглядеть следующим образом (рис. 3).

Картинка, выровненная по базовой линии текста

Рис. 3. Картинка, выровненная по базовой линии текста

В примере 2 все изображения внутри абзаца <p> выравниваются посередине текста, для этого в качестве значения применяется middle.

Пример 2. Выравнивание картинки относительно текста

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Изображения</title>
  <style>
   p img {
    vertical-align: middle;
   }
  </style>
 </head>
 <body>
  <p>Вид самой кривой изменяется с помощью
   инструмента карандаш <img src="images/pen.png" alt="">.
   Для создания прямых отрезков устанавливайте точки удерживая
   клавишу Shift.
  </p>
 </body>
</html>

Результат данного примера показан на рис. 4. Заметьте, как изменилось положение верхней строки с картинкой.

Картинка, выровненная по середине текста

Рис. 4. Картинка, выровненная по середине текста


Рамка вокруг изображений

Для добавления вокруг изображения цветной рамки применяется стилевое свойство border. В стилях добавляем это свойство к селектору img и указываем толщину рамки, её цвет и стиль. Тогда рамка добавится для всех изображений на странице. Для выбранных рисунков можно ввести собственный класс и писать его только для выбранных элементов <img> (пример 1).

Пример 1. Добавление рамки

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Изображения</title>
  <style>
   .border {
    border: 3px solid #00af64;
   }
  </style>
 </head>
 <body>
  <img src="images/thumb1.jpg" alt="" class="border">
  <img src="images/thumb2.jpg" alt="" class="border">
  <img src="images/thumb3.jpg" alt="">
 </body>
</html>

В данном примере к двум изображениям добавляется класс border, через который устанавливается зелёная рамка (рис. 1).

Рамка вокруг фотографий

Рис. 1. Рамка вокруг фотографий

Рамку можно добавлять и при наведении курсора на изображение через псевдокласс :hover. Но это ожидаемо приведёт к сдвигу картинки, поскольку свойство border влияет на общую ширину и высоту элемента. Чтобы избежать такого поведения к селектору img предварительно добавляется невидимая рамка, как показано в примере 2.

Пример 2. Рамка вокруг изображений

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Изображения</title>
  <style>
   img {
    border: 3px solid transparent; /* Прозрачная рамка */
   }
   img:hover {
    border: 3px solid #00af64; /* Цветная рамка */
   }
  </style>
 </head>
 <body>
  <img src="images/thumb1.jpg" alt="">
  <img src="images/thumb2.jpg" alt="">
  <img src="images/thumb3.jpg" alt="">
 </body>
</html>

Другой способ добавления рамки — использование свойства outline. Оно, в отличие от border, не влияет на размеры элемента, поэтому прозрачная рамка уже не нужна.

img:hover {
 outline: 3px solid #00af64; /* Цветная рамка */
}

Несмотря на схожесть этих свойств, у них есть небольшие различия:

  • outline выводится вокруг элемента (border внутри);
  • outline не влияет на размеры элемента (border добавляется к ширине и высоте элемента);
  • outline можно установить только вокруг элемента целиком, но никак не на отдельных сторонах (border можно использовать для любой стороны или всех сразу);
  • на outline не действует радиус скругления, заданный свойством border-radius (на border действует).

Ещё один способ создания рамки заключается в добавлении фона к <img>. Сам фон сразу не виден, поэтому надо установить ещё свойство padding, его значением выступает толщина рамки (пример 3).

Пример 3. Использование background и padding

img {
 padding: 10px; /* Толщина рамки */
 background: #6dcff6; /* Цвет рамки */
}

Сюда же можно включить свойство border и получить новый вид рамки. Вообще, комбинируя padding, border, outline и background можно сделать множество самых разнообразных рамок.


Круглые изображения

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

Чтобы сделать произвольное изображение круглым вначале следует превратить его в квадрат, а затем в стилях добавить свойство border-radius со значением 50% (пример 1). Лучше задавать именно в процентах, так мы не привязываемся к размерам картинок.

Пример 1. Круглые изображения

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Изображения</title>
  <style>
   .round {
    border-radius: 50%;
   }
  </style>
 </head>
 <body>
  <img src="images/meduza1.jpg" alt="" class="round">
  <img src="images/meduza2.jpg" alt="" class="round">
  <img src="images/meduza3.jpg" alt="" class="round">
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Круглые изображения

border-radius применяется к любым другим элементам, поэтому мы можем создать пустой квадратный <div> и установить для него фоновую картинку, которую допустимо масштабировать и сдвигать. Само изображение не обязательно должно быть квадратным, потому что оно будет вписано в область заданных размеров. Всё, что не поместится в эту область, будет обрезано. На рис. 2 показана фотографии для добавления её на веб-страницу.

Рис. 2. Фотография акулы

Теперь устанавливаем эту фотографию как фон для класса round, задаём размеры элемента и настраиваем масштаб изображения (пример 2).

Пример 2. Круглый элемент

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Изображения</title>
  <style>
  .round {
   width: 300px; height: 300px; /* Ширина и высота */
   border-radius: 50%; /* Превращаем в круг */
   background: url(images/shark.jpg) no-repeat -70px 0; /* Параметры фона */
   background-size: auto 300px; /* Высота фотографии равна высоте элемента */
  }
 </style>
 </head>
 <body>
  <div class="round"></div>
 </body>
</html>

Результат данного примера показан на рис. 3. Фон по умолчанию устанавливается в левом верхнем углу, так что сдвигаем его на 70 пикселей влево, чтобы акула оказалась в центре круга.

Рис. 3. Круглое изображение


Карты-изображения

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

Плюсы

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

Минусы

  • При сложной форме области ссылки увеличивается объём кода HTML. Контур аппроксимируется набором прямых отрезков, для каждой точки такого отрезка следует задать две координаты, а общее количество таких точек может быть достаточно велико.
  • Соответственно, увеличивается сложность задания координат. Вручную их указывать не удобно, поэтому приходится пользоваться специальными программами, которые визуально показывают области и позволяют их редактировать.
  • При смене изображения, например, при увеличении масштаба придётся заново задавать координаты всех областей ссылок.
  • К картам-изображениям нельзя применять разные эффекты, которые доступны при разрезании одного рисунка на фрагменты: эффект перекатывания, частичная анимация, индивидуальная оптимизация картинок для их быстрой загрузки.
  • Нет чётко выделенных границ ссылок. Поэтому эти границы приходится выделять разными средствами непосредственно на изображении. Если рисунок не загрузился по каким-либо причинам, то разобраться в наборе ссылок становится весьма проблематично.

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

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

В клиентском варианте карта располагается в том же HTML-документе, что и ссылка на изображение. Для указания того, что изображение является картой, применяется атрибут usemap элемента <img>. В качестве значения используется указатель на описание конфигурации карты, которая устанавливается с помощью элемента <map>. Значение атрибута name у <map> должно соответствовать имени в usemap. При этом значение usemap в <img> начинается с символа решётки (пример 1).

Пример 1. Создание карты-изображения

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Карта-изображение</title>
 </head>
 <body>
  <p><img src="images/navigation.png" width="640" height="30" alt="Навигация по сайту" usemap="#navigation"></p>
  <map name="navigation">
   <area shape="poly" coords="113,24,211,24,233,0,137,0" href="inform.html" alt="Информация" title="Информация">
   <area shape="poly" coords="210,24,233,0,329,0,307,24" href="activity.html" alt="Мероприятия" title="Мероприятия">
   <area shape="poly" coords="304,24,385,24,407,0,329,0" href="depart.html" alt="Отделения" title="Отделения">
   <area shape="poly" coords="384,24,449,24,473,0,406,0" href="techinfo.html" alt="Техническая информация" title="Техническая информация">
   <area shape="poly" coords="449,24,501,24,525,0,473,0" href="study.html" alt="Обучение" title="Обучение">
   <area shape="poly" coords="501,24,560,24,583,0,525,0" href="work.html" alt="Работа" title="Работа">
   <area shape="poly" coords="560,24,615,24,639,0,585,0" href="misk.html" alt="Разное" title="Разное">
  </map>
 </body>
</html>

Внутри контейнера <map> располагается один или несколько элементов <area>, они задают форму области, её координаты, устанавливают адрес документа, на который следует сделать ссылку, а также всплывающую подсказку.

Элемент <area> имеет следующие атрибуты.

  • shape — определяет форму активной области. Форма может быть в виде окружности (circle), прямоугольника (rect), полигона (poly).
  • alt — добавляет альтернативный текст для каждой области. Служит лишь комментарием для ссылки, поскольку на экран не выводится. Обязательный атрибут при наличии href.
  • title — выводит всплывающую подсказку при наведении курсора на область.
  • href — задаёт адрес документа, на который следует перейти, по своему действию аналогичен подобному атрибуту элемента <a>.
  • coords — задаёт координаты активной области. Координаты отсчитываются в пикселях от левого верхнего угла изображения, которому соответствует значение 0, 0. Первое число является координатой по горизонтали, второе — по вертикали. Список координат зависит от формы области.

Для окружности задаются три числа — координаты центра круга и радиус.

<area shape="circle" coords="230, 340, 100" href="circle.html" alt="">

Для прямоугольника — координаты левого верхнего и правого нижнего угла.

<area shape="rect" coords="24,18, 210, 56" href="rect.html" alt="">

Для полигона задаются координаты его вершин, как показано на рис. 1.

Координатные точки для полигона

Рис. 1. Координатные точки для полигона


Таблицы

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

Для добавления таблицы на веб-страницу используется элемент <table>. Он служит контейнером для других элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью элементов <tr> и <td> соответственно. Таблица должна содержать хотя бы одну ячейку (пример 1). Вместо <td> допускается использовать элемент <th>. Текст в такой ячейке обычно отображается браузером жирным шрифтом и выравнивается по центру. В остальном разницы между ячейками, созданными через <td> и <th>, нет.

Пример 1. Создание таблицы

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Таблица</title>
 </head>
 <body>
  <table border="1">
   <tr>
    <th>Заголовок 1</th><th>Заголовок 2</th>
   </tr>
   <tr>
    <td>Ячейка 1</td><td>Ячейка 2</td>
   </tr>
  </table>
 </body>
</html>

Изначально рамка вокруг ячеек таблицы не выводится, поэтому, чтобы показать их границы к <table> добавлен атрибут border (рис. 1).

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

Особенности таблиц

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

  • Одну таблицу допускается помещать внутрь ячейки другой таблицы. Это требуется в некоторых случаях для представления сложных данных.
  • Размеры таблицы изначально не установлены и вычисляются на основе содержимого ячеек. Например, общая ширина определяется автоматически исходя из суммарной ширины содержимого ячеек плюс ширина границ между ячейками, поля вокруг содержимого и расстояние между ячейками.
  • Если для таблицы задана её ширина в процентах или пикселях, то содержимое таблицы подстраивается под указанные размеры. Так, браузер автоматически добавляет переносы строк в текст, чтобы он полностью поместился в ячейку, и при этом ширина таблицы осталась без изменений. Бывает, что ширину содержимого ячейки невозможно изменить, как это, например, происходит с рисунками. В этом случае ширина таблицы увеличивается несмотря на указанные размеры.
  • Пока таблица не загрузится полностью, её содержимое не начнёт отображаться. Дело в том, что браузер, прежде чем показать содержимое таблицы, должен вычислить необходимые размеры ячеек, их ширину и высоту. А для этого нужно знать, что в этих ячейках находится. Поэтому браузер и ожидает, пока загрузится всё, что находится в ячейках, и только потом отображает таблицу.


Структура таблицы

Каждая таблица состоит из строк и ячеек, минимально может быть одна строка и одна ячейка. В таком случае, впрочем, непонятно, зачем использовать таблицу, потому что как такового табличного представления уже нет. Кроме того, таблице можно задать заголовок, который кратко описывает её содержимое, указать «шапку», «тело» и «подвал» таблицы. Они нужны для стилевого или смыслового выделения части данных. В примере 1 показано создание таблицы, содержащей все упомянутые компоненты.

Пример 1. Создание таблицы

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Таблица</title>
  <style>
   table {
    width: 100%; /* Ширина таблицы */
    border-collapse: collapse; /* Убираем двойные границы */
   }
   td, th {
    border: 1px solid #333; /* */
    padding: 3px; /* Поля в ячейках */
   }
   thead, tfoot {
    background: #f0f0f0; /* Цвет фона */
   }
   tbody:hover {
    background: #f5e0cd; /* Цвет фона при наведении курсора */
    color: #ce232a; /* Цвет текста */
   }
  </style>
 </head>
 <body>
  <table>
   <caption>Материал для гаек по ГОСТ 1759.5–87</caption>
   <thead>
    <tr>
     <th>Класс прочности</th>
     <th>Технологические процессы</th>
     <th>Марка стали</th>
     <th>Обозначение стандарта</th>
    </tr>
   </thead>
   <tfoot>
    <tr>
     <th>Класс прочности</th>
     <th>Технологические процессы</th>
     <th>Марка стали</th>
     <th>Обозначение стандарта</th>
    </tr>
   </tfoot>
   <tbody>
    <tr>
     <td>4</td>
     <td>Горячая штамповка</td>
     <td>20, Ст3кп3, Ст3сп3</td>
     <td>ГОСТ 1050–79</td>
    </tr>
   </tbody>
   <tbody>
    <tr>
     <td rowspan="2">5</td>
     <td>Холодная штамповка</td>
     <td>10, 10кп</td>
     <td>ГОСТ 0702–78</td>
    </tr>
    <tr>
     <td>Горячая штамповка</td>
     <td>20</td><td></td>
    </tr>
   </tbody>
   <tbody>
    <tr>
     <td>6</td>
     <td>Холодная штамповка</td>
     <td>10, 10кп, 15, 15кп</td>
     <td>ГОСТ 0702–78</td>
    </tr>
   </tbody>
   <tbody>
    <tr>
     <td rowspan="2">8, 9</td>
     <td>Горячая штамповка</td>
     <td>35</td>
     <td rowspan="2">ГОСТ 1050–74<br>ГОСТ 4543–71<br>ГОСТ 10702–78</td>
    </tr>
    <tr>
     <td>Холодная штамповка</td>
     <td>20, 20кп</td>
    </tr>
   </tbody>
  </table>
 </body>
</html>

Результат данного примера показан на рис. 1.

Таблица с заголовком, «шапкой» и «подвалом»

Рис. 1. Таблица с заголовком, «шапкой» и «подвалом»

При использовании элементов <thead>, <tbody> и <tfoot> придерживайтесь следующих правил.

  • Заголовок таблицы <caption> пишется в самом верху таблицы, сразу после открывающего тега <table>.
  • <thead> вставляется вверху таблицы, сразу после заголовка, если он присутствует.
  • <tfoot> вставляется перед <tbody>, но при этом отображается всегда в самом низу таблицы.
  • Элемент <tbody> для таблиц нужен обязательно, но для простых таблиц без <thead> и <tfoot> его можно не указывать. Браузеры сами научились вставлять его автоматически в код, понимая, что большинство разработчиков ленятся добавлять элемент, который визуально никак не влияет на таблицу.
  • <tbody> может быть один или несколько, вы сами решаете, по какому принципу их добавлять. Например, в примере выше в некоторых строках имеются объединения ячеек и чтобы строки при наведении на них курсора мыши выделялись как нам требуется, мы их объединяем в <tbody> согласно нашей логике.

Колонки

Кроме объединения группы строк через <thead> есть ещё один способ группирования ячеек — по колонкам с помощью элементов <col> и <colgroup>. Каждая колонка таблицы сопоставляется со своим элементом <col> который пишется после открывающего тега <table>. Часть колонок можно объединять с помощью атрибута span, его значением выступает число объединяемых колонок. Элементы <col> допустимо помещать в один или несколько <colgroup>, объединяя колонки согласно нашим понятиям.

Элементы <col> и <colgroup> никак не влияют на вид таблицы и её отображение в браузере и применяются только со стилями, как показано в примере 2. Между колонками здесь добавляются двойные линии.

Пример 2. Колонки таблицы

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Таблица</title>
  <style>
   table {
    width: 100%;
    border-collapse: collapse;
   }
   td, th {
    border: 1px solid #333;
    padding: 3px;
   }
   col { border-left: 4px double #333; }
   col:first-child { border-left-width: 1px; }
  </style>
 </head>
 <body>
  <table>
   <colgroup>
    <col>
    <col span="3">
    <col>
   </colgroup>
   <tr>
    <th rowspan="2">Класс прочности гайки</th>
    <th colspan="4">Сопрягаемые болты</th>
   </tr>
   <tr>
    <th colspan="3">Класс прочности</th>
    <th>Диаметр резьбы</th>
   </tr>
   <tr>
    <td>4</td><td>3,6</td>
    <td>4,6</td><td>4,8</td>
    <td>&gt; М16</td>
   </tr>
   <tr>
    <td>5</td><td>5,6</td>
    <td>5,8</td><td></td>
    <td>≤ М16</td>
   </tr>
   <tr>
    <td>6</td><td>6,8</td>
    <td></td><td></td>
    <td>≤ М48</td>
   </tr>
  </table>
 </body>
</html>

Результат данного примера показан на рис. 2. Заметим, что похожего результата можно добиться заменив в стилях селектор col на td и th.

Двойные линии между колонок

Рис. 2. Двойные линии между колонок


Заголовок таблицы

При большом количестве таблиц на странице каждой из них удобно задать свой заголовок, содержащий название таблицы и её описание. Для этой цели в HTML существует специальный элемент <caption>, который устанавливает текст заголовка. По умолчанию заголовок помещается сверху таблицы по центру, его ширина не превышает ширины таблицы, и в случае длинного текста он автоматически переносится на новую строку. Для изменения положения заголовка используется стилевое свойство text-align, как показано в примере 1.

Пример 1. Выравнивание заголовка таблицы

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Таблица</title>
  <style>
   table {
    border: 1px solid #333;
    width: 90%;
    margin: auto;
   }
   td {
    text-align: center;
   }
   caption {
    text-align: right;
    font-style: italic;
   }
  </style>
 </head>
 <body>
  <table>
   <caption>Изменение добычи ресурсов по годам</caption>
   <tr>
    <th></th>
    <th>2023</th><th>2024</th><th>2025</th>
   </tr>
   <tr>
    <td>Heфть</td>
    <td>43</td><td>51</td><td>79</td>
   </tr>
   <tr>
    <td>3oлoтo</td>
    <td>29</td><td>34</td><td>48</td>
   </tr>
   <tr>
    <td>Дерево</td>
    <td>38</td><td>57</td><td>36</td>
   </tr>
  </table>
 </body>
</html>

Результат данного примера показан на рис. 1. Удобство использования <caption> состоит в том, что заголовок, созданный с его помощью, оказывается привязанным к таблице и не выходит за условные рамки, ограниченные её шириной.

Вид заголовка таблицы

Рис. 1. Вид заголовка таблицы


Объединение ячеек

Объединение ячеек по горизонтали или вертикали используется в случае сложных табличных данных, для этого применяются атрибуты colspan и rowspan у элемента <td> или <th>. Атрибут colspan устанавливает число ячеек объединяемых по горизонтали. Аналогично работает и атрибут rowspan, с тем лишь отличием, что объединяет ячейки по вертикали. Перед добавлением атрибутов проверьте число ячеек в каждой строке, чтобы не возникло ошибок. Так, colspan="3" объединяет три ячейки, поэтому в следующей строке должно быть три элемента <td> или два <td>, из которых один охватывает две ячейки. Если число ячеек в каждой строке не будет совпадать, появятся пустые фантомные ячейки (рис. 1).

Появление дополнительной ячейки в таблице

Рис. 1. Появление дополнительной ячейки в таблице

Правильное использование атрибутов colspan и rowspan продемонстрировано в примере 1.

Пример 1. Объединение ячеек по вертикали и горизонтали

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Объединение ячеек</title>
  <style>
   table {
    border-collapse: collapse; /* Убираем двойные линии */
    width: 100%; /* Ширина таблицы */
   }
   td {
    border: 1px solid #333; /* Параметры границ */
    padding: 4px; /* Поля в ячейках */
    text-align: center; /* Выравнивание по центру */
   }
  </style>
 </head>
 <body>
  <table>
   <tr>
    <td rowspan="2">Вид соединения</td>
    <td colspan="2">Поля допусков ширины шпоночного паза</td>
   </tr>
   <tr>
    <td>Вал</td>
    <td>Втулка</td>
   </tr>
   <tr>
    <td>Свободное</td>
    <td>H9</td>
    <td>D10</td>
   </tr>
   <tr>
    <td>Нормальное</td>
    <td>N9</td>
    <td>I<sub>s</sub>9</td>
   </tr>
   <tr>
    <td>Плотное</td>
    <td colspan="2">P9</td>
   </tr>
  </table>
 </body>
</html>

Результат данного примера показан на рис. 2.

Таблица с объединёнными ячейками

Рис. 2. Таблица с объединёнными ячейками

В данной таблице установлено три колонки и три строки. Первые две ячейки объединены по вертикали, а следующие две — по горизонтали.


Оформление таблиц

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

Ширина таблицы

По умолчанию ширина таблицы устанавливается браузером самостоятельно, исходя из объёма в ней табличных данных. Если текста в ячейках много, тогда таблица будет занимать всю доступную ей ширину, а если мало, то ширина таблицы автоматически уменьшится. При наличии на странице нескольких таблиц их разная ширина выглядит порой небрежно. Так что лучше явно задать ширину таблицы в процентах, пикселях, em или любых других единицах CSS, как показано в примере 1.

Пример 1. Ширина таблицы в процентах

table {  width: 100%; }
.tbl-medium { width: 60%; }
.tbl -small { width: 200px; }

В данном примере ширина 100% применяется ко всем таблицам. Опять же, классы помогают установить ширину для выбранных таблиц задействуя ранее созданный класс. Чтобы указать таблице ширину в 200 пикселей надо добавить к элементу <table> класс tbl-small.

<table class="tbl-small">

Выравнивание таблиц

Исходно любая таблица располагается по левому краю окна браузера. Можно выровнять её по центру, если только таблица не занимает всю доступную область, другими словами, меньше 100%. Для этого к стилю таблицы следует добавить отступы через свойство margin со значением auto, как показано в примере 2.

Пример 2. Выравнивание таблицы с помощью margin

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Таблица</title>
  <style>
   table {
    margin: auto; /* Выравнивание по центру */
   }
  </style>
 </head>
 <body>
  <table>
   ...
  </table>
 </body>
</html>

В данном примере для всех таблиц на странице задано выравнивание по центру.

Цвет фона

Цвет фона одновременно всех ячеек таблицы устанавливается через свойство background, которое применяется к селектору table. При этом следует помнить о правилах использования стилей, в частности, наследовании свойств элементов. Если одновременно с table задать цвет у селектора td или th, то он и будет установлен в качестве фона (пример 3).

Пример 3. Цвет фона

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Таблица</title>
  <style>
   table {
    background: #f5e8d0; /* Цвет фона таблицы */
    border-spacing: 0; /* Расстояние между ячеек */
   }
   th {
    background: #496791; /* Цвет фона ячеек */
    color: #fff; /* Цвет текста */
   }
   td, th {
    padding: 5px 10px; /* Поля в ячейках */
   }
  </style>
 </head>
 <body>
  <table>
   <tr>
    <th rowspan="2">Вид соединения</th>
    <th colspan="2">Поля допусков ширины шпоночного паза</th>
   </tr>
   <tr>
    <th>Вал</th><th>Втулка</th>
   </tr>
   <tr>
    <td>Свободное</td><td>H9</td><td>D10</td>
   </tr>
   <tr>
    <td>Нормальное</td><td>N9</td><td>I<sub>s</sub>9</td>
   </tr>
   <tr>
    <td>Плотное</td><td colspan="2">P9</td>
   </tr>
  </table>
 </body>
</html>

Результат данного примера показан на рис. 1.

Изменение цвета фона

Рис. 1. Изменение цвета фона

Если нам требуется сделать зебру — так называется чередование строк разного цвета, то следует воспользоваться псевдоклассом :nth-child, добавляя его к селектору tr. Чтобы зебра распространялась только на тело таблицы, а не её заголовок, отделим их друг от друга с помощью элементов <thead> и <tbody> (пример 4).

Пример 4. Создание зебры

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Таблица</title>
  <style>
   table {
    width: 100%; /* Ширина таблицы */
    border-collapse: collapse; /* Убираем двойные линии */
   }
   thead {
    background: #f5e8d0; /* Цвет фона заголовка */
   }
   td, th {
    padding: 5px; /* Поля в ячейках */
    border: 1px solid #333; /* Параметры рамки */
   }
   tbody tr:nth-child(even) {
    background: #f0f0f0; /* Зебра */
   }
  </style>
 </head>
 <body>
  <table>
   <thead>
    <tr>
     <th rowspan="2">Интервалы размеров, мм</th>
     <th colspan="4">Допуск IT, мкм, для квалитетов</th>
    </tr>
    <tr>
     <th>5</th><th>6</th><th>7</th><th>8</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td>До 3</td><td>4</td><td>6</td><td>10</td><td>14</td>
    </tr>
    <tr>
     <td>Св. 3 до 6</td><td>5</td><td>8</td><td>12</td><td>18</td>
    </tr>
    <tr>
     <td>Св. 6 до 10</td><td>6</td><td>9</td><td>15</td><td>22</td>
    </tr>
    <tr>
     <td>Св. 10 до 18</td><td>8</td><td>11</td><td>18</td><td>27</td>
    </tr>
    <tr>
     <td>Св. 18 до 30</td><td>9</td><td>13</td><td>21</td><td>33</td>
    </tr>
    <tr>
     <td>Св. 30 до 50</td><td>11</td><td>16</td><td>25</td><td>39</td>
    </tr>
    <tr>
     <td>Св. 50 до 80</td><td>13</td><td>19</td><td>30</td><td>46</td>
    </tr>
   </tbody>
  </table>
 </body>
</html>

Результат данного примера показан на рис. 2.

Рис. 2. Зебра

Значение even у селектора :nth-child применяет стиль ко всем чётным строкам и задаёт их цвет фона. Можно, также, поменять его на odd, тогда серым цветом будут выделяться нечётные строки.

Аналогичным образом цветом выделяются не строки, а колонки, для этого следует использовать селектор tbody td:nth-child(even).

Поля внутри ячеек

Полем называется расстояние между границей ячейки и её содержимым. Без полей текст в таблице «налипает» на рамку, ухудшая тем самым его восприятие, добавление же полей позволяет улучшить читабельность текста. Для этой цели применяется стилевое свойство padding, которое работает с селектором td или th, как показано выше в примерах 3 и 4. Обычно указывают одно значение, оно тогда задаёт пустое пространство вокруг содержимого ячейки сразу со всех сторон. Два значения пишутся, когда надо задать разные поля по вертикали (первое значение) и горизонтали (второе значение).

Расстояние между ячеек

Между ячеек имеется небольшое пустое расстояние, которое не видно, пока для ячеек не установить границу или фоновый цвет. Исходно это расстояние равно 2px и его можно изменить с помощью свойства border-spacing, добавляя его к селектору table (пример 5).

Пример 5. Использование border-spacing

table {
 border-spacing: 3px; /* Расстояние между ячеек */
}
thead  th {
 background: #e08156; /* Цвет фона заголовка */
 color: #333; /* Цвет текста */
}
td, th {
 padding: 5px; /* Поля в ячейках */
 background: #4c715b; /* Цвет фона ячеек */
 color: #f5e8d0; /* Цвет текста */
}

Добавляя этот стиль к любой таблице получим результат продемонстрированный на рис. 3.

Вид таблицы с расстоянием между ячеек

Рис. 3. Вид таблицы с расстоянием между ячеек

Если к table добавляется свойство border-collapse со значением collapse, то border-spacing игнорируется, потому как расстояния между ячеек уже нет.

Границы и рамки

Чтобы чётко отделить содержимое одной ячейки от другой, к ячейкам добавляются границы. За их создание отвечает стилевое свойство border, которое применяется к элементам (<td> или <th>). Однако здесь нас подстерегают подводные камни. Поскольку рамка создаётся для каждой ячейки, то в местах соприкосновения ячеек получается граница удвоенной толщины. Для устранения указанной особенности существует несколько путей. Самый простой — воспользоваться свойством border-collapse со значением collapse. В его задачу входит отслеживать соприкосновение линий и вместо двойной границы изображать одинарную. Это свойство достаточно добавить к селектору table, а дальше оно всё сделает самостоятельно (пример 6).

Пример 6. Применение свойства border-collapse при создании рамок таблицы

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Таблица</title>
  <style>
   table {
    border-collapse: collapse; /* Убираем двойные линии */
    width: 100%; /* Ширина таблицы */
    border-spacing: 0; /* Расстояние между ячеек */
   }
   td {
    border: 2px solid #333; /* Параметры границ */
    padding: 4px; /* Поля в ячейках */
    text-align: center; /* Выравнивание по центру */
   }
  </style>
 </head>
 <body>
  <table>
   <tr><td>O</td><td>X</td><td>X</td></tr>
   <tr><td>O</td><td>O</td><td>X</td></tr>
   <tr><td>X</td><td>X</td><td>O</td></tr>
  </table>
 </body>
</html>

Разница между границами таблицы при добавлении свойства border-collapse, а также без него, представлена на рис. 4.

свойство не установлено

а — свойство не установлено

б — свойство установлено

Рис. 4. Вид таблицы при использовании border-collapse

На рис. 4а показана рамка таблицы, используемая по умолчанию. Обратите внимание, что внутри таблицы все линии имеют удвоенную толщину. Добавление border-collapse убирает эту особенность, и толщина всех линий становится одинаковой (рис. 4б).

Линии не обязательно делать для всех сторон ячеек, согласно дизайну они могут отделять одну строку или колонку от другой. Для этого мы используем свойства border-bottom, border-left и другие подобные. Применять границы к элементам <tr>, <thead>, <tfoot> и <tbody> нельзя, поэтому добавляем их к селектору table и td (пример 7).

Пример 7. Линии между строк

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Таблица</title>
  <style>
   table {
    width: 100%; /* Ширина таблицы */
    border-collapse: collapse; /* Убираем двойные линии */
    border-bottom: 2px solid #333; /* Линия снизу таблицы */
    border-top: 2px solid #333; /* Линия сверху таблицы */
   }
   td {
    text-align: center; /* Выравнивание по центру */
    border-bottom: 1px solid #333;
    border-top: 1px solid #333;
   }
   td, th {
    padding: 5px; /* Поля в ячейках */
   }
  </style>
 </head>
 <body>
  <table>
   <thead>
    <tr>
     <th rowspan="2">Вид соединения</th>
     <th colspan="2">Поля допусков ширины шпоночного паза</th>
    </tr>
    <tr>
     <th>Вал</th><th>Втулка</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td>Свободное</td><td>H9</td><td>D10</td>
    </tr>
    <tr>
     <td>Нормальное</td><td>N9</td><td>I<sub>s</sub>9</td>
    </tr>
    <tr>
     <td>Плотное</td><td colspan="2">P9</td>
    </tr>
   </tbody>
  </table>
 </body>
</html>

Результат данного примера показан на рис. 5.

Таблица с горизонтальными линиями

Рис. 5. Таблица с горизонтальными линиями

Выравнивание текста в ячейках

По умолчанию текст в ячейке таблицы выравнивается по левому краю и по центру высоты. Исключением служит элемент <th>, он определяет ячейку заголовка, в котором выравнивание происходит по центру. Чтобы изменить способ выравнивания применяется стилевое свойство text-align (пример 8).

Пример 8. Выравнивание содержимого ячеек по горизонтали

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Таблица</title>
  <style>
   table {
    border-collapse: collapse; /* Убираем двойные линии */
    width: 100%; /* Ширина таблицы */
   }
   th {
    background: #dfebb7; /* Цвет фона ячейки */
    text-align: left; /* Выравнивание по левому краю */
   }
   td {
    text-align: center; /* Выравнивание по центру */
   }
   th, td {
    border: 1px solid black; /* Параметры рамки */
    padding: 4px; /* Поля вокруг текста */
   }
  </style>
 </head>
 <body>
  <table>
   <tr><th>Заголовок 1</th><td>Ячейка 1</td><td>Ячейка 2</td></tr>
   <tr><th>Заголовок 2</th><td>Ячейка 3</td><td>Ячейка 4</td></tr>
  </table>
 </body>
</html>

В данном примере содержимое <th> выравнивается по левому краю, а содержимое <td> — по центру. Результат примера показан ниже (рис. 6).

Выравнивание текста в ячейках

Рис. 6. Выравнивание текста в ячейках

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

Пример 9. Выравнивание содержимого ячеек по вертикали

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Таблица</title>
  <style>
   th {
    background: #496791; /* Цвет фона ячеек заголовка */
    color: #fff; /* Цвет текста */
   }
   td {
    background: #f5e8d0; /* Цвет фона ячеек */
    text-align: center; /* Выравниваем по центру */
   }
   td, th {
    padding: 5px 10px; /* Поля в ячейках */
    vertical-align: top; /* Выравниваем по верхнему краю */
   }
  </style>
 </head>
 <body>
  <table>
   <tr>
    <th rowspan="2">Вид соединения</th>
    <th colspan="2">Поля допусков ширины шпоночного паза</th>
   </tr>
   <tr>
    <th>Вал</th><th>Втулка</th>
   </tr>
   <tr>
    <td>Свободное</td><td>H9</td><td>D10</td>
   </tr>
   <tr>
    <td>Нормальное</td><td>N9</td><td>I<sub>s</sub>9</td>
   </tr>
   <tr>
    <td>Плотное</td><td colspan="2">P9</td>
   </tr>
  </table>
 </body>
</html>

В данном примере выравнивание текста происходит по верхнему краю. Результат примера показан на рис. 7.

Выравнивание текста в ячейках

Рис. 7. Выравнивание текста в ячейках


Формы

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

Для отправки формы на сервер используется кнопка Submit, такого же эффекта можно добиться, если нажать клавишу Enter в пределах формы. Когда форма отправляется на сервер, управление данными передаётся программе, заданной атрибутом action элемента <form>. Программа получает данные, введённые пользователем в форме, и дальше производит с ними некоторые манипуляции, которые заложены разработчиком. Как выглядит сама программа и что она делает в действительности мы не знаем и можем видеть только результат, который возвращает программа в виде html-документа.

Перед отправкой данных браузер подготавливает информацию в виде пары «имя=значение», где имя определяется атрибутом name элемента <input> или другим допустимым в форме, а значение введено пользователем или установлено в поле формы по умолчанию.

Сама форма создаётся с помощью элемента <form>, внутри которой могут быть любые другие необходимые элементы и характеризуется следующими необязательными параметрами:

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

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

Пример 1. Форма

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Формы</title>
 </head>
 <body>
  <form action="search.php">
   <p><input type="search" name="q" placeholder="Поиск по сайту">
   <input type="submit" value="Найти"></p>
  </form>
 </body>
</html>

Часто бывает, что текущая страница написанная, допустим, на языке PHP, сама является обработчиком формы, в таком случае можно указать пустое значение атрибута action или вообще его не писать. В простейшем случае элемент <form> не содержит никаких атрибутов и представлен в примере 2.

Пример 2. Простая форма

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Формы</title>
 </head>
 <body>
  <form>
   <p><input name="a"><input type="submit"></p>
  </form>
 </body>
</html>


Отправка данных формы

Сама форма обычно предназначена для получения от пользователя информации для дальнейшей пересылки её на сервер, где данные формы принимает программа-обработчик. Такая программа может быть написана на любом серверном языке программирования вроде PHP, Perl, Python и др. Адрес программы указывается в атрибуте action элемента <form>, как показано в примере 1.

Пример 1. Отправка данных формы

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Данные формы</title>
 </head>
 <body>
  <form action="/example/handler.php">
   <p><input name="login"> <input type="password" name="pass"></p>
   <p><input type="submit"></p>
  </form>
 </body>
</html>

В этом примере данные формы, обозначенные атрибутом name (login и password), будут переданы в файл по адресу /example/handler.php. Если атрибут action не указывать, то передача происходит на адрес текущей страницы.

Передача на сервер происходит двумя разными методами: GET и POST, для задания метода внутри <form> используется атрибут method, а его значениями выступают ключевые слова get и post. Если атрибут method не задан, то по умолчанию данные отправляются на сервер методом GET. В табл. 1 показаны различия между этими методами.

Табл. 1. Различия между методами GET и POST
 | GET | POST
Ограничение на объём | 4 Кб | Ограничения задаются сервером.
Передаваемые данные | Видны сразу всем. | Видны только при просмотре через расширения браузера или другими методами.
Кэширование | Страницы с разными запросами считаются различными, их можно кэшировать как отдельные документы. | Страница всегда одна.
Закладки | Страницу с запросом можно добавить в закладки браузера и обратиться к ней позже. | Страницы с разными запросами имеют один адрес, запрос повторить нельзя.

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

http://www.google.ru/search?q=%D1%81%D0%B8%D1%81%D1%8C%D0%BA%D0%B8&ie=utf-8

Уникальное сочетание параметров в адресной строке однозначно идентифицирует страницу, так что страницы с адресами ?q=node/add и ?q=node считаются разными. Эту особенность используют системы управления контентом (CMS, Content management system) для создания множества страниц сайта. В реальности же используется один файл, который получает запрос GET и согласно ему формирует содержимое документа.

Ниже перечислены типовые области применения этих методов на сайтах.

GET

  • Передача небольших текстовых данных на сервер;
  • поиск по сайту.

Поисковые системы, формы поиска по сайту всегда отправляются методом GET, это позволяет делиться результатами поиска с друзьями, слать ссылку по почте или выкладывать её на форуме.

POST

  • Пересылка файлов (фотографий, архивов, программ и др.);
  • отправка комментариев;
  • добавление и редактирование сообщений на форуме, блоге.

Работа с формой по умолчанию происходит в текущей вкладке браузера, при этом допустимо при отправке формы изменить этот параметр и открывать обработчик формы в новой вкладке или во фрейме. Такое поведение задаётся через «имя контекста», которое выступает значением атрибута target элемента <form>. Популярные значения это _blank для открытия формы в новом окне или вкладке, и имя фрейма, которое задаётся атрибутом name элемента <iframe> (пример 2).

Пример 2. Открытие формы во фрейме

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Использование фрейма</title>
 </head>
 <body>
  <p><iframe name="area" width="500" height="200"></iframe></p>
  <form action="handler.php" target="area">
   <p><input placeholder="Введите текст" name="text">
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

В данном примере при нажатии на кнопку «Отправить» результат отправки формы открывается во фрейме с именем area.

Элементы формы традиционно располагаются внутри элемента <form>, тем самым определяя те данные, которые будут передаваться на сервер. В то же время в HTML5 есть возможность отделить форму от её элементов. Это сделано для удобства и универсальности, так, сложный макет может содержать несколько форм, которые не должны пересекаться меж собой или к примеру, некоторые элементы выводятся с помощью скриптов в одном месте страницы, а сама форма находится в другом. Связь между формой и её элементами происходит в таком случае через идентификатор формы, а к элементам следует добавить атрибут form со значением, равным этому идентификатору (пример 3).

Пример 3. Связывание формы с полями

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Форма</title>
 </head>
 <body>
  <form id="auth" action="handler.php" method="post"></form>
  <p>...</p>
  <p><input name="login" form="auth">
  <input type="password" name="pass" form="auth"></p>
  <p><input type="submit" form="auth"></p>
 </body>
</html>

В этом примере <form> однозначно отождествляется через идентификатор auth, а к полям, которые следует отправить с помощью формы, добавляется form="auth". При этом поведение элементов не меняется, при нажатии на кнопку логин и пароль пересылаются на обработчик handler.php.

Хотя параметры передачи формы традиционно указываются внутри <form>, их можно перенести и в кнопки отправки формы (<button> и <input type="submit">). Для этого применяется набор атрибутов formaction, formmethod, formenctype и formtarget, которые являются аналогами соответствующих атрибутов без приставки form. В примере 4 показано использование этих атрибутов.

Пример 4. Отправка формы

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Отправка формы</title>
 </head>
 <body>
  <form>
   <p><input placeholder="Ваше имя" name="user"></p>
   <p><input type="submit" value="Отправить"
    formaction="handler.php" formmethod="post"></p>
  </form>
 </body>
</html>


Текстовое поле

Однострочное текстовое поле предназначено для ввода строки символов с помощью клавиатуры. Синтаксис создания такого поля следующий.

<input атрибуты>

Значение атрибута type для элемента <input> по умолчанию определено как text, поэтому его можно не указывать явно. Атрибуты текстового поля перечислены в табл. 1.

Табл. 1. Атрибуты однострочного текстового поля
Атрибут | Описание
size | Ширина текстового поля, которая определяется числом символов моноширинного шрифта. Иными словами, ширина задаётся количеством близстоящих букв одинаковой ширины по горизонтали.
maxlength | Устанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным. Если этот атрибут не указывать, то можно вводить строку больше самого поля.
name | Имя поля; предназначено для того, чтобы обработчик формы мог его идентифицировать.
value | Начальный текст отображаемый в поле.

Создание текстового поля показано в примере 1.

Пример 1. Текстовое поле

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Текстовое поле</title>
 </head>
 <body>
  <form action="handler.php">
   <p><strong>Как вас зовут?</strong></p>
   <p><input maxlength="25" size="40" value="Вася"></p>
  </form>
 </body>
</html>

В результате получим следующее (рис. 1).

Вид текстового поля в браузере Chrome

Рис. 1. Вид текстового поля

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

Пример 2. Изменение вида текстового поля

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Текстовое поле</title>
  <style>
   .textField {
    width: 100%; /* Ширина поля */
    padding: 10px; /* Поля */
    box-sizing: border-box; /* Алгоритм расчёта ширины */
    box-shadow: inset 0 1px 5px rgba(0,0,0,0.2); /* Тень внутри */
    border: 1px solid #ccc; /* Параметры рамки */
    color: #ff6d37; /* Цвет текста */
   }
  </style>
 </head>
 <body>
  <form action="handler.php">
   <p><strong>Как вас зовут?</strong></p>
   <p><input maxlength="25" value="Вася" class="textField"></p>
  </form>
 </body>
</html>

Поскольку общая ширина элемента суммируется из значений width, padding и border, то мы получим поле, которое будет выходить за пределы окна браузера. Чтобы этого не произошло, добавлено свойство box-sizing со значением border-box, оно изменяет алгоритм расчёта ширины и ширина поля будет равна 100% независимо от значений других свойств. В результате получим поле следующего вида (рис. 2).

Вид текстового поля после применения стилей

Рис. 2. Вид текстового поля после применения стилей


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

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

Синтаксис создания следующий.

<input type="password" атрибуты>

Атрибуты совпадают с атрибутами текстового поля и перечислены в табл. 1.

Табл. 1. Атрибуты поля с паролем
Атрибут | Описание
size | Ширина поля с паролем, которая определяется числом звёздочек моноширинного шрифта.
maxlength | Устанавливает максимальное число символов, которое может быть введено пользователем в поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным. Если этот атрибут не указывать, то можно вводить строку больше самого поля.
name | Имя поля; предназначено для того, чтобы обработчик формы мог его идентифицировать.
value | Начальный текст, который выводится в поле. Этот текст не отображается и заменяется звездочками.

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

Пример 1. Поле с паролем

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Поле с паролем</title>
 </head>
 <body>
  <form action="handler.php">
   <p><strong>Логин:</strong>
    <input maxlength="25" size="40" name="login"></p>
   <p><strong>Пароль:</strong>
    <input type="password" maxlength="25" size="40" name="password"></p>
   <p><input type="submit" value="Войти"></p>
  </form>
 </body>
</html>

В результате получим следующее (рис. 1).

Вид поля с паролем

Рис. 1. Вид поля с паролем

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

Пример 2. Добавление изображения в текстовое поле

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Поле с паролем</title>
  <style>
   .textField, .passField {
    width: 100%; /* Ширина поля */
    padding: 10px; /* Поля */
    box-sizing: border-box; /* Алгоритм расчёта ширины */
    box-shadow: inset 0 1px 5px rgba(0,0,0,0.2); /* Тень внутри */
    border: 1px solid #ccc; /* Параметры рамки */
    color: #ff6d37; /* Цвет текста */
    background: url(images/user.png) no-repeat 5px 50%; /* Картинка пользователя */
    padding-left: 30px; /* Расстояние от левого края */
   }
   .passField {
    background: url(images/lock.png) no-repeat 5px 50%; /* Картинка для поля с паролем */
   }
  </style>
 </head>
 <body>
  <form action="handler.php">
   <p><input maxlength="25" name="login" class="textField"></p>
   <p><input type="password" maxlength="25" name="password" class="passField"></p>
   <p><input type="submit" value="Войти"></p>
  </form>
 </body>
</html>

Результат данного примера показан на рис. 2. Картинки добавляются в качестве фона, поэтому текст обязательно надо сдвинуть вправо через padding-left, в противном случае он будет выводиться поверх изображения.

Вид полей с фоновым рисунком

Рис. 2. Вид полей с фоновым рисунком


Многострочное текстовое поле

Для создания области, в которую можно вводить несколько строк текста, предназначен элемент <textarea>. В отличие от <input> в текстовом поле допустимо делать переносы строк, они сохраняются при отправке данных на сервер.

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

<textarea атрибуты>
  Текст
</textarea>

Между тегами <textarea> и </textarea> можно поместить любой текст, который будет отображаться внутри поля. Если текста нет, то поле будет изначально пустым.

Допустимые атрибуты перечислены в табл. 1.

Табл. 1. Атрибуты <textarea>
Атрибут | Описание
cols | Ширина поля в символах.
maxlength | Максимальное число символов текста, которое можно ввести.
name | Имя поля; предназначено для того, чтобы обработчик формы мог его идентифицировать.
rows | Высота поля в строках текста.
wrap | Параметры переноса строк.

Создание поля многострочного текста показано в примере 1.

Ни один из этих атрибутов не является обязательным, поэтому простая форма для отправки текста выглядит так (пример 1).

Пример 1. Текстовое поле

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Текстовое поле</title>
 </head>
 <body>
 <form>
  <p><b>Введите ваш отзыв:</b></p>
  <p><textarea name="comment"></textarea></p>
  <p><input type="submit"></p>
 </form>
 </body>
</html>

Результат примера показан на рис. 1.

Вид текстового поля по умолчанию

Рис. 1. Вид текстового поля по умолчанию

При оформлении многострочного поля применяются те же стилевые свойства, что и для однострочного текста. А именно можно изменять ширину (свойство width), высоту (height), границу (border), цвет текста и фона (color и background соответственно) и др. Пример создания текстового поля с разными характеристиками приведен в примере 2.

Пример 2. Оформление текстового поля

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Текстовое поле</title>
  <style>
   textarea {
    background: #fce9c0; /* Цвет фона */
    border: 2px solid #a9c358; /* Параметры рамки */
    padding: 10px; /* Поля */
    width: 100%; /* Ширина */
    height: 200px; /* Высота */
    box-sizing: border-box; /* Алгоритм расчёта ширины */
    font-size: 14px; /* Размер шрифта */
   }
  </style>
 </head>
 <body>
  <form action="handler.php">
   <p><b>Введите ваш отзыв:</b></p>
   <p><textarea name="comment"></textarea></p>
   <p><input type="submit"></p>
  </form>
 </body>
</html>

Результат данного примера показан на рис. 2.

Изменение вида текстового поля

Рис. 2. Изменение вида текстового поля

Все браузеры кроме Internet Explorer поддерживают изменение размера для <textarea>. Достаточно потянуть за правый нижний уголок, который по своему виду отличается от остальных. Вот как выглядит такой уголок в Firefox (рис. 3). Вид в разных браузерах может несколько различаться, но общая схожесть сохраняется.

Уголок для изменения размера

Рис. 3. Уголок для изменения размера

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

textarea {
 resize: none;
}


Кнопки

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

Кнопку на веб-странице можно создать двумя способами — с помощью элемента <input> или <button>.

Рассмотрим вначале добавление кнопки через <input> и его синтаксис.

<input type="button" атрибуты>

Атрибуты кнопки перечислены в табл. 1.

Табл. 1. Атрибуты кнопок
Атрибут | Описание
name | Имя кнопки; предназначено для того, чтобы обработчик формы мог его идентифицировать.
value | Значение кнопки и одновременно надпись на ней.

Создание кнопки показано в примере 1.

Пример 1. Добавление кнопки

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Кнопка</title>
 </head>
 <body>
  <form>
   <p><input type="button" value=" Нажми меня нежно "></p>
  </form>
 </body>
</html>

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

Рис. 1. Вид кнопки

Второй способ создания кнопки основан на использовании элемента <button>. Он по своему действию напоминает результат, получаемый с помощью <input>. Но в отличие от него предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML, включая изображения и таблицы. На рис. 2 показаны разные виды кнопок, полученные с помощью <button>.

Кнопки, созданные с помощью button

Рис. 2. Кнопки, созданные с помощью <button>

Синтаксис создания такой кнопки следующий.

<button атрибуты>Надпись на кнопке</button>

Атрибуты перечислены в табл. 1, но в отличие от кнопки <input> атрибут value определяет только отправляемое на сервер значение, а не надпись на кнопке. Если требуется вывести на кнопке изображение, то элемент <img> добавляется внутрь <button>, как показано в примере 2.

Пример 2. Рисунок на кнопке

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Кнопка</title>
 </head>
 <body>
  <form>
   <p><button>Кнопка с текстом</button>
   <button>
    <img src="images/umbrella.gif" alt="" style="vertical-align:middle">
    Кнопка с рисунком
   </button></p>
  </form>
 </body>
</html>

В данном примере показано создание обычной кнопки с текстом, а также кнопки с одновременным использованием текста и рисунка. Размер кнопки зависит от содержимого контейнера <button>, но пробелы игнорируются, поэтому простым увеличением их количества, как в случае использования <input>, ширину кнопки изменить не удастся.

Кнопка Submit

Для отправки данных на сервер предназначена специальная кнопка Submit. Её вид ничем не отличается от обычных кнопок, но при нажатии на нее происходит выполнение серверной программы, указанной атрибутом action элемента <form>. Эта программа, называемая еще обработчиком формы, получает данные введённые пользователем в полях формы, производит с ними необходимые манипуляции, после чего возвращает результат в виде HTML-документа. Что именно делает обработчик, зависит от автора сайта, например, подобная технология применяется при создании опросов, форумов, тестов и многих других вещей.

Синтаксис создания кнопки Submit зависит от используемого элемента <input> или <button>.

<input type="submit" атрибуты>
<button type="submit">Надпись на кнопке</button>

Атрибуты те же, что и у рядовых кнопок (пример 3).

Пример 3. Отправка данных на сервер

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Кнопка</title>
 </head>
 <body>
  <form>
   <p><input name="login"></p>
   <p><input type="submit"></p>
  </form>
 </body>
</html>

Атрибут name для этого типа кнопки можно не писать. Если не указать значение value, то браузер самостоятельно добавит текст, он различается в зависимости от браузера. Так, Firefox пишет «Отправить запрос», IE — «Подача запроса», Opera и Chrome — «Отправить». Сам текст надписи никак на функционал кнопки не влияет.

Кнопка Reset

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

Синтаксис создания указанной кнопки прост и похож на другие кнопки.

<input type="reset" атрибуты>
<button type="reset">Надпись на кнопке</button>

В примере 4 показана форма с одним текстовым полем, которое уже содержит предварительно введённый текст с помощью атрибута value элемента <input>. После изменения текста и нажатия на кнопку «Очистить», значение поля будет восстановлено и в нём снова появится надпись «Введите текст».

Пример 4. Кнопка для очистки формы

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Кнопка</title>
 </head>
 <body>
  <form>
   <p><input value="Введите текст"></p>
   <p><input type="submit" value="Отправить">
      <input type="reset" value="Очистить"></p>
  </form>
 </body>
</html>

Значение кнопки Reset никогда не пересылается на сервер. Если надпись на кнопке не писать, иными словами, не задавать атрибут value, на кнопке по умолчанию будет добавлен текст «Очистить».

Цветные кнопки

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

Пример 5. Вид кнопок

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Кнопка</title>
  <style>
   .btn {
    background: #5d8f76; /* Цвет фона */
    color: #fff; /* Цвет текста */
    padding: 7px 12px; /* Поля */
    margin-bottom: 1em; /* Отступ снизу */
   }
   .btn:hover {
    background: #1e6550; /* Цвет фона при наведении курсора */
   }
   .btn-flat {
    border: 1px transparent; /* Прозрачная рамка */
   }
   .btn-round {
    border-radius: 20px; /* Радиус скругления */
   }
  </style>
 </head>
 <body>
  <form>
   <p><input type="button" value="Исходная кнопка">
      <input type="button" class="btn" value="Цветная кнопка">
      <input type="button" class="btn btn-flat" value="Плоская кнопка">
      <input type="button" class="btn btn-flat btn-round" value="Кнопка со скруглёнными уголками"></p>
  </form>
 </body>
</html>

Результат данного примера показан на рис. 3.

Изменение вида кнопок

Рис. 3. Изменение вида кнопок


Элемент label

Элемент <label> связывает текст с определённым элементом формы. Обычно применяется в следующих случаях.

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

Простой вариант использования заключается в добавлении полей формы прямо внутрь <label> с желаемым текстом, как показано в примере 1.

Пример 1. Использование <label>

<!DOCTYPE html>
 <html>
  <head>
  <meta charset="utf-8">
  <title>Формы</title>
 </head>
 <body>
  <form>
   <p>Выберите желаемое состояние:</p>
   <p><label><input type="radio" name="psi"> Импритинг</label></p>
   <p><label><input type="radio" name="psi"> Реимпритинг</label></p>
  </form>
 </body>
</html>

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

Поля формы и текст для них могут визуально находиться рядом, но в коде документа располагаться внутри разных элементов. Чтобы связать их между собой применяется атрибут for, его значением выступает идентификатор у <input>, как показано в примере 2.

Пример 2. Атрибут for

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Формы</title>
  <style>
   table {
    border-collapse: collapse; /* Убираем двойные линии*/
   }
   td {
    border: 1px solid #ccc; /* Параметры рамки */
    padding: 4px; /* Поля в ячейках */
   }
  </style>
 </head>
 <body>
  <form>
   <table>
    <tr>
     <th>#</th>
     <th>Работа со временем</th>
    </tr>
    <tr>
     <td><input type="checkbox" value="t1" id="t1"></td>
     <td><label for="t1">Создание пунктуальности
         (никогда не будете никуда опаздывать).</label></td>
    </tr>
    <tr>
     <td><input type="checkbox" value="t2" id="t2"></td>
     <td><label for="t2">Излечение от пунктуальности
         (никогда никуда не будете торопиться).</label></td>
    </tr>
    <tr>
     <td><input type="checkbox" value="t3" id="t3"></td>
     <td><label for="t3">Изменение восприятия времени.</label></td>
    </tr>
   </table>
  </form>
 </body>
</html>

Для каждого элемента <input> задаём свой уникальный идентификатор через атрибут id, а внутри элемента <label> указываем этот же идентификатор как значение атрибута for.

Также <label> применяется как один из элементов для вёрстки сложных форм. В примере 3 показана форма авторизации, в которой текст располагается рядом с полями для ввода логина и пароля.

Пример 3. Форма для авторизации

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Форма</title>
  <style>
   #textField, #passField {
    width: 300px; /* Ширина поля */
    padding: 10px; /* Поля */
    box-shadow: inset 0 1px 5px rgba(0,0,0,0.2); /* Тень внутри */
    border: 1px solid #ccc; /* Параметры рамки */
    color: #ff6d37; /* Цвет текста */
    background: url(images/user.png) no-repeat 5px 50%; /* Картинка пользователя */
    padding-left: 30px; /* Расстояние от левого края */
   }
   #passField {
    background: url(images/lock.png) no-repeat 5px 50%; /* Картинка для поля с паролем */
   }
   label {
    width: 100px; /* Ширина */
    text-align: right; /* Выравниваем по правому краю */
    float: left; /* Выстраиваем элементы рядом */
    margin-right: 10px; /* Расстояние от текста до текстового поля */
    line-height: 30px; /* Выравниваем по высоте */
   }
   .submitField {
    margin-left: 110px; /* Сдвигаем вправо под поля */
   }
  </style>
 </head>
 <body>
  <form action="handler.php">
   <p><label for="textField">Логин:</label>
      <input maxlength="25" name="login" id="textField"></p>
   <p><label for="passField">Пароль:</label>
      <input type="password" maxlength="25" name="password" id="passField"></p>
   <p><input type="submit" value="Войти" class="submitField"></p>
  </form>
 </body>
</html>

Результат данного примера показан на рис. 1.

Форма для авторизации пользователя

Рис. 1. Форма для авторизации пользователя


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

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

<input type="radio" name="имя" атрибуты>

Атрибуты переключателей перечислены в табл. 1.

Табл. 1. Атрибуты переключателей
Атрибут | Описание
checked | Предварительное выделение переключателя. По определению, набор переключателей может иметь только один выделенный пункт, поэтому добавление checked сразу к нескольким полям не даст особого результата. В любом случае, будет отмечен элемент, находящийся в коде HTML последним.
name | Имя группы переключателей для идентификации поля. Поскольку переключатели являются групповыми элементами, то имя у всех элементов группы должно быть одинаковым.
value | Задаёт, какое значение будет отправлено на сервер. Здесь уже каждый элемент должен иметь своё уникальное значение, чтобы можно было идентифицировать какой пункт был выбран пользователем.

Создание группы переключателей показано в примере 1.

Пример 1. Создание переключателей

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Переключатели</title>
 </head>
 <body>
  <form action="handler.php">
   <p><b>Какое у вас состояние разума?</b></p>
    <p><input name="dzen" type="radio" value="nedzen"> Не дзен</p>
    <p><input name="dzen" type="radio" value="dzen"> Дзен</p>
    <p><input name="dzen" type="radio" value="pdzen" checked> Полный дзен</p>
    <p><input type="submit" value="Выбрать"></p>
  </form>
 </body>
</html>

В результате получим следующее (рис. 1).

Вид переключателей в браузере

Рис. 1. Вид переключателей в браузере

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


Флажки

Флажки (жарг. чекбоксы) используют, когда необходимо выбрать любое количество вариантов из предложенного списка. Если требуется выбор лишь одного варианта, то для этого следует предпочесть переключатели (radiobutton). Флажок создаётся следующим образом.

<input type="checkbox" атрибуты>

Атрибуты флажков перечислены в табл. 1.

Табл. 1. Атрибуты флажков
Атрибут | Описание
checked | Предварительное выделение флажка.
name | Имя флажка для его идентификации обработчиком формы.
value | Задаёт, какое значение будет отправлено на сервер.

Использование флажков показано в примере 1.

Пример 1. Создание флажков

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Флажки</title>
 </head>
 <body>
  <form action="handler.php">
   <p>В каких годах произошли самые известные извержения вулкана Кракатау?</p>
   <p><input type="checkbox" name="a" value="1417"> 1417</p>
   <p><input type="checkbox" name="a" value="1680" checked> 1680</p>
   <p><input type="checkbox" name="a" value="1883" checked> 1883</p>
   <p><input type="checkbox" name="a" value="1934"> 1934</p>
   <p><input type="checkbox" name="a" value="2010"> 2010</p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

В результате получим следующее (рис. 1).

Рис. 1. Вид флажков


Поле со списком

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

<select атрибуты>
  <option атрибуты>Пункт 1</option>
  <option атрибуты>Пункт 2</option>
</select>

Элемент <select> выступает контейнером для пунктов списка и определяет его вид — будет ли это раскрывающийся список или же список с одним или множественным выбором. Вид зависит от использования атрибута size элемента <select>, который устанавливает высоту списка; ширина списка при этом определяется автоматически исходя из длины текста внутри <option>. Ниже представлен список множественного выбора, в котором пункты выделяются с помощью клавиши Ctrl и Shift, и раскрывающийся список.

Список множественного выбора Раскрывающийся список

Атрибуты элемента <select>

Рассмотрим атрибуты <select>, с помощью которых можно изменять представление списка.

multiple

Наличие multiple сообщает браузеру отображать содержимое элемента <select> как список множественного выбора. Конечный вид списка зависит от используемого атрибута size. Если он отсутствует, то высота списка равна количеству пунктов, если значение size меньше числа пунктов, то появляется вертикальная полоса прокрутки.

Атрибут size отсутствует Атрибут size равен 2

Для выбора нескольких значений списка применяются клавиши Ctrl и Shift совместно с курсором мыши.

В примере 1 показано создание списка множественного выбора.

Пример 1. Список множественного выбора

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Список</title>
 </head>
 <body>
  <form>
   <p><select name="select" size="3" multiple>
    <option selected value="s1">Чебурашка</option>
    <option value="s2">Крокодил Гена</option>
    <option value="s3">Шапокляк</option>
    <option value="s4">Крыса Лариса</option>
   </select>
   <input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

name

Определяет уникальное имя элемента <select>. Как правило, это имя используется для доступа к данным через скрипты или для получения выбранного значения серверным обработчиком.

size

Устанавливает высоту списка. Если значение size равно единице, то список превращается в раскрывающийся. Значение по умолчанию зависит от атрибута multiple. Если он присутствует, то размер списка равен числу элементов. Когда multiple нет, то значение атрибута size равно 1.

Атрибуты элемента <option>

Элемент <option> также имеет атрибуты, влияющие на вид списка, они представлены далее.

selected

Делает текущий пункт списка выделенным. Если к <select> добавлен атрибут multiple, то можно выделять более одного пункта.

value

Определяет значение пункта списка, которое будет отправлено на сервер в виде пары «имя=значение», где имя задаётся атрибутом name элемента <select>, а значение — атрибутом value выделенных пунктов списка. Значение может как совпадать с текстом пункта, так быть и самостоятельным.

label

Предназначен для указания метки пункта списка, сокращённой по сравнению с текстом внутри <option>. Если атрибут label присутствует, то текст внутри тега <option> игнорируется и в списке выводится значение label. Браузер Firefox не поддерживает этот атрибут.

Создание списка показано в примере 2.

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Список</title>
 </head>
 <body>
  <form>
   <p><strong>Выбери персонажа</strong></p>
   <p><select name="hero">
    <option value="s1">Чебурашка</option>
    <option value="s2" selected>Крокодил Гена</option>
    <option value="s3">Шапокляк</option>
    <option value="s3" label="Лариса">Крыса Лариса</option>
   </select>
   <input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

Группирование элементов списка

При достаточно обширном списке имеет смысл сгруппировать его элементы по блокам, чтобы обеспечить наглядность списка и удобство работы с ним. Для этой цели применяется элемент <optgroup>. Он представляет собой контейнер, внутри которого располагаются элементы <option> объединённые в одну группу. Особенностью <optgroup> является то, что он не выделяется как обычный элемент списка, выводится жирным начертанием, а все элементы, входящие в этот контейнер, смещаются вправо от своего исходного положения. Для добавления заголовка группы используется атрибут label, как показано в примере 3.

Пример 3. Группирование элементов списка

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Список</title>
 </head>
 <body>
  <form>
   <p><select name="food">
    <optgroup label="Русская кухня">
     <option value="r1">Закуска Барская</option>
     <option value="r2">Раки, фаршированные по-царски</option>
     <option value="r3">Биточки в горшочке</option>
    </optgroup>
    <optgroup label="Украинская кухня">
     <option value="u1">Галушки славянские</option>
     <option value="u2">Пампушки украинские</option>
     <option value="u3">Жаркое по-харьковски</option>
    </optgroup>
   </select></p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

Результат примера показан на рис. 1.

Рис. 1. Группированный список


Скрытое поле

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

Синтаксис создания скрытого поля следующий.

<input type="hidden" атрибуты>

Атрибуты перечислены в табл. 1.

Табл. 1. Атрибуты скрытого поля
Атрибут | Описание
name | Имя поля для его идентификации обработчиком формы.
value | Значение поля, определяющее, какая информация будет отправлена на сервер.

Пример использования скрытых полей приведён в примере 1.

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Скрытое поле</title>
 </head>
 <body>
  <form action="handler.php" method="post">
   <p><b>Напишите любимое слово и нажмите кнопку Отправить
   (никакие данные не будут передаваться на сервер!):</b></p>
   <p><input size="25" name="word">
   <input type="hidden" name="name" value="Vasya">
   <input type="hidden" name="password" value="pupkin"></p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

В данном примере показано создание двух скрытых полей, одно из них носит имя name и получает значение Vasya, а второе именуется password со значением pupkin. В результате отправки формы обработчику, указанному в атрибуте action, программа может легко прочитать эти данные и интерпретировать их по усмотрению разработчика.


Поле с изображением

Для отправки формы на сервер применяется кнопка Submit, которая имеет слабые средства по настройке своего вида в сравнении с рисунками. Чтобы не ограничивать дизайн и расширить возможности по оформлению форм используется поле с изображением, представляющее собой рисунок и по своему действию аналогично кнопке Submit. При щелчке по такому полю данные формы отправляются на сервер и обрабатываются программой, заданной атрибутом action элемента <form>.

Поле с изображением создаётся следующим образом.

<input type="image" src="URL" alt="альтернативный текст">

Здесь URL это адрес изображения в формате JPEG, PNG или GIF, alt указывает альтернативный текст который виден при отключении картинок в браузере. Вообще, это поле похоже на добавление в код изображения и работает подобно элементу <img>.

В примере 1 показано использование поля с изображением.

Пример 1. Кнопка с изображением

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Загрузка файла</title>
  <style>
   body { background:  #053f38; color: #98baba; }
   p.question { color: #ffd595; }
  </style>
 </head>
 <body>
  <form action="handler.php">
   <p class="question">В  какую игру вы предпочитаете играть?</p>
   <p><input type="radio" name="game" value="1"> Руммикуб</p>
   <p><input type="radio" name="game" value="2"> Колонизаторы</p>
   <p><input type="radio" name="game" value="3"> Каркассон</p>
   <p><input type="radio" name="game" value="4"> Зельеварение</p>
   <p><input type="image" src="images/okbutton.png" alt="OK">
  </form>
 </body>
</html>

Результат данного примера показан на рис. 1.

Форма с графической кнопкой

Рис. 1. Форма с графической кнопкой

В отличие от кнопки Submit на сервер также отправляются координаты точки щелчка по изображению в виде x и y. Отсчёт координат ведётся от левого верхнего угла картинки и указывается в пикселях. Если добавить к полю с изображением уникальное имя через атрибут name, например, ok, тогда координаты передаются в виде ok.x и ok.y, где впереди через точку стоит имя поля.


Загрузка файлов

Для загрузки на сервер одного или нескольких файлов вроде фотографий, документов и видео в форме применяется специальное поле. В браузерах Firefox, IE и Opera такой элемент отображается как текстовое поле, рядом с которым располагается кнопка с надписью «Обзор...» (рис. 1). В Safari и Chrome доступна только кнопка «Выберите файл» (рис. 2).

Вид поля для загрузки файла в Firefox

Рис. 1. Вид поля для загрузки файла в Firefox

Загрузка файлов в Chrome

Рис. 2. Загрузка файлов в Chrome

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

Синтаксис поля для отправки файла следующий.

<input type="file" атрибуты>

Атрибуты перечислены в табл. 1.

Табл. 1. Атрибуты поля для отправки файла
Атрибут | Описание
accept | Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов.
size | Ширина текстового поля, которое определяется числом символов моноширинного шрифта.
multiple | Позволяет выбирать и загружать сразу несколько файлов.
name | Имя поля; используется для его идентификации обработчиком формы.

Для отправки файлов в форме необходимо сделать следующее:

  1. задать метод отправки данных POST (method="post");
  2. установить у атрибута enctype значение multipart/form-data.

Форма для загрузки файла продемонстрирована в примере 1.

Пример 1. Создание поля для отправки файла

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Отправка файла на сервер</title>
 </head>
 <body>
  <form enctype="multipart/form-data" method="post">
   <p><input type="file" name="f">
   <input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

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

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

Если атрибут accept не указывать, тогда добавляются и загружаются файлы любого типа. Наличие accept позволяет ограничить выбор файла, что особенно важно, когда требуется загрузить только изображение или видео. В качестве значения выступает MIME-тип, несколько значений разделяются между собой запятой. Также можно использовать следующие ключевые слова:

  • audio/* — выбор музыкальных файлов любого типа;
  • image/* — графические файлы;
  • video/* — видеофайлы.

В табл. 2 показаны некоторые допустимые значения атрибута accept.

Табл. 2. Типы файлов
Значение | Описание
image/jpeg | Только файлы в формате JPEG.
image/jpeg,image/png | Только файлы в формате JPEG и PNG.
image/* | Любые графические файлы.
image/*,video/* | Любые графические и видеофайлы.

Использование дополнительных атрибутов показано в примере 2.

Пример 2. Загрузка фотографий

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Загрузка файла</title>
 </head>
 <body>
  <form enctype="multipart/form-data" method="post">
   <p>Загрузите ваши фотографии на сервер</p>
   <p><input type="file" name="photo" multiple accept="image/*,image/jpeg">
   <input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>


Адрес электронной почты

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

Синтаксис создания такого поля следующий.

<input type="email" атрибуты>

Атрибуты по большей части совпадают с текстовым полем и приведены в табл. 1.

Табл. 1. Атрибуты поля для почтового адреса

Атрибут | Описание
maxlength | Устанавливает максимальное число символов, которое может быть введено пользователем в поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным. Если этот атрибут не указывать, то можно вводить строку длинее самого поля.
multiple | Позволяет указывать несколько адресов через запятую.
name | Имя пол; предназначено для того, чтобы обработчик формы мог его идентифицировать.
size | Ширина поля, которая определяется числом символов моноширинного шрифта.
value | Начальный почтовый адрес отображаемый в поле.

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

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

Пример 1. Адрес электронной почты

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Авторизация на сайте</title>
 </head>
 <body>
  <form action="handler.php">
   <p>Вход на сайт</p>
   <p>Email: <input type="email" name="login"></p>
   <p>Пароль: <input type="password" name="pass"></p>
   <p><input type="submit" value="Вход"></p>
  </form>
 </body>
</html>

По своему виду поле для ввода адреса ничем не отличается от текстового поля. Различия проявляются, если указать некорректный адрес, в этом случае браузер выведет замечание об ошибке (рис. 1). Сама форма на сервер не отправляется, пока ошибка не будет исправлена.

Ошибка в форме

Рис. 1. Ошибка в форме

Старые версии браузеров интерпретируют поле для адреса электронной почты как текстовое.


Веб-адрес

Для ввода адресов сайтов или, как их ещё называют веб-адресов, предназначено значение url элемента <input>, которое делает проверку на правильность ввода данных. Каждый веб-адрес должен начинаться с протокола (http://, https://, ftp://), больше ограничений нет — адрес может быть набран латинскими символами, кириллицей, содержать точку или наоборот, писаться без неё.

Синтаксис создания поля для веб-адреса следующий.

<input type="url" атрибуты>

Атрибуты совпадают с текстовым полем (<input type="text">).

В примере 1 показано использование поля для веб-адреса, которое должно быть заполнено перед отправкой формы.

Пример 1. Ввод адреса сайта

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Веб-адрес</title>
 </head>
 <body>
  <form>
   <p><input placeholder="Ваше имя" name="user"></p>
   <p><input type="url" placeholder="Сайт" name="site" required></p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

В данном примере при нажатии на кнопку «Отправить» браузер будет выводить сообщение, что необходимо правильно ввести URL. Вид и текст сообщения зависит от браузера, Internet Explorer выводит предупреждение как показано на рис. 1, а Chrome — как показано на рис. 2.

Вид сообщения в IE

Рис. 1. Вид сообщения в IE

Вид сообщения в Chrome

Рис. 2. Вид сообщения в Chrome

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


Выбор цвета

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

Синтаксис создания такого поля следующий.

<input type="color" value="<цвет>" name="<имя>">

Атрибут value необходим для установки исходного цвета и его можно не писать, name используется для идентификации получаемого значения.

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

Пример 1. Выбор цвета

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Цвет</title>
 </head>
 <body>
  <form action="handler.php">
   <p>Укажите цвет фона: <input type="color" name="bg" value="#ff0000">
   <input type="submit" value="Выбрать"></p>
  </form>
 </body>
</html>

На рис. 1 показан поле, как оно исходно отображается в браузере Opera, на рис. 2 это же поле после щелчка по нему.

Поле для выбора цвета

Рис. 1. Поле для выбора цвета

Рис. 2. Отображение палитры


Ввод чисел

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

Вид поля для ввода чисел

Рис. 1. Вид поля для ввода чисел

Синтаксис создания такого поля следующий:

<input type="number" атрибуты>

Допустимые атрибуты перечислены в табл. 1.

Табл. 1. Атрибуты поля с числом
Атрибут | Описание
min | Минимальное значение.
max | Максимальное значение.
size | Ширина поля.
step | Шаг приращения числа. Может быть как целым (2), так и дробным (0.2).
name | Имя поля; предназначено для того, чтобы обработчик формы мог его идентифицировать.
value | Начальное число, которое выводится в поле.

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

Пример 1. Ограничение ввода чисел

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ввод числа</title>
 </head>
 <body>
  <form action="handler.php">
   <p>Введите число от 1 до 10:</p>
   <p><input type="number" size="3" name="num" min="1" max="10" value="1"></p>
  </form>
 </body>
</html>

Если значение min превышает max, то атрибут min игнорируется.

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

Пример 2. Шаг приращения

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ввод числа</title>
 </head>
 <body>
  <form action="handler.php">
   <p>Укажите нормальную среднюю температуру человека:</p>
   <p><input type="number" name="t" value="35" min="35" max="40" step="0.2"></p>
  </form>
 </body>
</html>

Результат примера продемонстрирован на рис. 2.

Ввод дробных чисел в поле

Рис. 2. Ввод дробных чисел в поле

Internet Explorer не поддерживают поле для ввода чисел и в нём оно приобретает вид обычного текстового поля.


Ползунок

Ползунок предназначен для ввода чисел в указанном диапазоне, но в отличие от поля <input type="number"> имеет другой интерфейс и применяется в тех случаях, когда не особенно важно указывать точное значение. Браузеры по своему отображают вид ползунка, так на рис. 1 продемонстрирован вид ползунка в Chrome.

Рис. 1. Вид ползунка

Синтаксис создания ползунка следующий.

<input type="range" min="0" max="100" step="1" value="50">

Здесь min — минимальное число в диапазоне (по умолчанию 0), max — максимальное число (по умолчанию 100), step — шаг изменения чисел (по умолчанию 1), value — текущее значение. По умолчанию value вычисляется по формуле:

Если значение max меньше, чем значение min, то value равно min.

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

Сами ползунки редко применяются в «чистом» виде, поскольку не обеспечивают необходимую обратную связь с пользователем, а вот в сочетании с JavaScript это становится мощным и удобным элементом интерфейса. В примере 1 с помощью ползунка изменяется размер изображения, такая возможность часто используется в различных фотогалереях.

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ползунок</title>
  <script>
   function sizePic() {
    size = document.getElementById("size").value;
    img = document.getElementById("pic");
    img.width = 60 + 20*size;
   }
  </script>
 </head>
 <body>
  <p>Размер рисунка: <input type="range" min="1" max="5" id="size"
     onchange="sizePic()" value="3"></p>
  <p><img src="images/figure.jpg" alt="" id="pic"></p>
 </body>
</html>
Живой пример

В данном примере при управлении ползунком срабатывает событие onchange, которое вызывает функцию sizePic. Эта функция изменяет размер изображения в зависимости от установленного пользователем значения ползунка. Тем самым ширина картинки при желании уменьшается или наоборот, увеличивается. Результат примера в браузере IE показан на рис. 2.

Управление шириной картинки с помощью ползунка

Рис. 2. Управление шириной картинки с помощью ползунка

Старые версии браузеров, которые не поддерживают значение range для атрибута type, отображают поле формы как текстовое.


Календарь

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

<input type="date" атрибуты>

На сервер данные передаются в формате ГГГГ-ММ-ДД, например, 1998-08-17, а вид календаря может различаться в зависимости от браузера. Полностью поддерживает календарь только Opera и Chrome (рис. 1).

Календарь в браузере Opera

Рис. 1. Календарь в браузере Opera

В примере 1 показано создание календаря для выбора произвольной даты.

Пример 1. Календарь

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Календарь</title>
 </head>
 <body>
  <form>
   <p>Выберите дату: <input type="date" name="calendar">
   <input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

Допустимо ограничить ввод даты заданным значением через атрибуты min и max, они соответственно указывают нижнюю и верхнюю дату. Так, если вам требуется сузить диапазон ввода до ±3 дней от даты 01.06.2017, то код запишется как в примере 2.

Пример 2. Ограничение даты

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Календарь</title>
 </head>
 <body>
  <form>
   <p>Выберите дату:
   <input type="date" name="calendar" value="2017-06-01"
    max="2017-06-04" min="2017-05-29">
   <input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

Текущая дата, заданная через атрибут value, подсвечивается фоном, неактивные дни, которые нельзя выбрать — серым цветом (рис. 2).

Календарь с диапазоном ввода

Рис. 2. Календарь с диапазоном ввода

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

<input type="month">
<input type="week">

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

Рис. 3 Выбор месяца

На сервер данные поля type="month" пересылаются как ГГГГ-ММ, например, 2017-10.

Похожим образом выглядит и виджет для выбора недели (рис. 4), где дополнительно выводится номер недели и выбрать можно только его. На сервер при этом значение отправляется как 2017-W38, где вначале указывается год, затем через дефис W и после него номер недели от начала года.

Рис. 4. Выбор недели

В примере 3 показано создание поля для ввода месяца.

Пример 3. Выбор месяца

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Календарь</title>
 </head>
 <body>
  <form>
   <p>Укажите месяц:
   <input type="month" name="month">
   <input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>


Поле для поиска

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

<input type="search" атрибуты>

Используемые атрибуты совпадают с текстовым полем.

Разница между текстовым полем и полем для поиска состоит в стилистическом оформлении. На платформах, где поисковая форма имеет свой собственный уникальный вид, легко придать полю аналогичное оформлении. В большинстве браузеров поле для поиска по своему виду никак не отличается от текстового поля, за исключением Chrome, Safari и IE, которые добавляют небольшой крестик в правой части для быстрой очистки введённого текста (рис. 1).

Вид поля для поиска

Рис. 1. Вид поля для поиска

В примере 1 показано создание формы с полем для поиска.

Пример 1. Поле для поиска

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Поиск</title>
 </head>
 <body>
  <form>
   <p><input type="search" name="q" placeholder="Поиск по сайту">
   <input type="submit" value="Найти"></p>
  </form>
 </body>
</html>


Номер телефона

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

<input type="tel" атрибуты>

Атрибуты полностью совпадают с текстовым полем.

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

Создание поля для телефона показано в примере 1. Требуется ввести телефон в указанном формате, иначе браузер выведет сообщение об ошибке и не станет отправлять форму, пока поле не будет заполнено корректно.

Пример 1. Поле для телефона

<!DOCTYPE html>
 <html>
  <head>
  <meta charset="utf-8">
  <title>Телефон</title>
 </head>
 <body>
  <form>
   <p>Ваше имя: <input name="login"></p>
   <p>Телефон в формате 2xxx-xxx: <input type="tel" name="tel"
   pattern="2[0-9]{3}-[0-9]{3}"></p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

Результат примера при вводе неправильного телефона показан на рис. 1.

Рис. 1. Ввод телефона

Для обычного текстового поля клавиатура планшета имеет стандартный вид (рис. 2).

Вид клавиатуры для ввода текста

Рис. 2. Вид клавиатуры для ввода текста

Однако при вводе телефона клавиатура меняет свой вид (рис. 3). Система сама определяет, что пользователь вводит номер и подстраивается под него.

Вид клавиатуры для ввода телефона

Рис. 3. Вид клавиатуры для ввода телефона


Группирование элементов форм

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

<fieldset>
  <legend>Заголовок</legend>
  ...
</fieldset>

Элемент <legend> не обязателен, но если присутствует, должен идти сразу же после <fieldset>. Другие элементы или текст перед <legend> недопустимы. Внутри <legend> можно использовать элементы форматирования вроде <b>, <i>, <sup>, <sub> и др.

В примере 1 показано использование группирование на практике.

Пример 1. Создание группы

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Группа</title>
 </head>
 <body>
  <form>
   <fieldset>
    <legend>Вход на сайт</legend>
    <p>Логин: <input name="login"></p>
    <p>Пароль: <input type="password" name="pass"></p>
    <p><input type="submit" value="Вход"></p>
   </fieldset>
  </form>
 </body>
</html>

Результат данного примера показан на рис. 1.

Вид группы в форме

Рис. 1. Вид группы в форме

Вид рамки в браузерах в целом одинаков — заголовок располагается в левом верхнем углу, встраиваясь прямо в рамку. Однако есть и мелкие различия, к примеру, в IE рамка имеет скруглённые углы, а в других браузерах они прямые.

Элементы <fieldset> и <legend> хорошо стилизуются, к ним применяется множество свойств, что позволяет сделать вид формы однотипным в разных браузерах и добавить своё оформление (пример 2).

Пример 2. Оформление группы

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Группа</title>
  <style>
   legend {
    background: #f9a01b; /* Цвет фона */
    padding: 5px 10px; /* Поля */
    border: 1px solid #333; /* Параметры рамки */
    margin-left: 20px; /* Отступ слева */
    border-radius: 5px; /* Радиус скругления */
   }
   fieldset {
    border: 1px solid #333; /* Параметры рамки */
    border-radius: 5px; /* Радиус скругления */
   }
  </style>
 </head>
 <body>
  <form>
   <fieldset>
    <legend>Вход на сайт</legend>
    <p>Логин: <input name="login"></p>
    <p>Пароль: <input type="password" name="pass"></p>
    <p><input type="submit" value="Вход"></p>
   </fieldset>
  </form>
 </body>
</html>

Результат данного примера показан на рис. 2. Почему-то IE в отличие от других браузеров не желает скруглять уголки у <fieldset>.

Вид группы после применения стилей

Рис. 2. Вид группы после применения стилей


Блокирование элементов форм

У любого элемента формы есть два состояния, которые ограничивают доступ к элементу или ввод данных, — блокирование (disabled) и только для чтения (readonly).

Блокирование

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

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

На рис. 1 представлены разные элементы форм в заблокированном состоянии.

Вид заблокированных элементов

Рис. 1. Вид заблокированных элементов

Для блокирования элемента формы используется атрибут disabled. Добавление этого атрибута разрешает отображать элемент формы, но не позволяет изменять его.

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

Пример 1. Блокировка поля

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Блокировка поля</title>
  <script>
   function agreeForm(f) {
    // Если поставлен флажок, снимаем блокирование кнопки
    if (f.agree.checked) f.submit.disabled = 0;
    // В противном случае вновь блокируем кнопку
    else f.submit.disabled = 1;
   }
  </script>
 </head>
 <body>
  <form>
   <p><textarea cols="30" rows="4" disabled>
    Типовой договор
    Отдаю свою душу, а взамен получаю здоровье и бессмертие.
   </textarea></p>
   <p><label><input type="checkbox" name="agree" onclick="agreeForm(this.form)">
    Я согласен со всеми условиями</label></p>
   <p><input type="submit" name="submit" value="Далее" disabled></p>
  </form>
 </body>
</html>
Живой пример

Результат данного примера показан ниже (рис. 2).

Заблокированное текстовое поле

Рис. 2. Заблокированное текстовое поле

В данном примере применяется блокирование кнопки, но оно снимается, как только пользователь поставит флажок возле текста «Я согласен со всеми условиями».

Поле только для чтения

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

Для установки режима «только для чтения» используется атрибут readonly, он добавляется к элементу <input> или <textarea>. На вид элемента формы это никак не влияет, но как было уже замечено, модифицировать значение поля не удастся.

Ниже представлены два поля с текстом, одно из которых находится в обычном режиме, а второе — «только для чтения».

В примере 2 показано создание поля для чтения.

Пример 2. Использование readonly

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Поле для чтения</title>
 </head>
 <body>
  <form>
   <p><textarea>Обычное текстовое поле</textarea>
   <textarea readonly>Поле только для чтения</textarea></p>
  </form>
 </body>
</html>


Автофокус

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

Автофокус создаётся с помощью атрибута autofocus, который можно добавлять к следующим элементам: <button>, <input>, <keygen>, <select>, <textarea>. Для текстового поля синтаксис такой.

<input autofocus>

На странице должен быть только один элемент с автофокусом.

В примере 1 показано создание формы авторизации с автофокусом.

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Автофокус</title>
 </head>
 <body>
  <form>
   <fieldset>
    <legend>Вход на сайт</legend>
    <p><input name="login" autofocus></p>
    <p><input type="password" name="pass"></p>
    <p><input type="submit" value="Вход"></p>
   </fieldset>
  </form>
 </body>
</html>

Результат примера показан на рис. 1. Браузер обычно выделяет поле с фокусом рамкой.

Автофокус в текстовом поле

Рис. 1. Автофокус в текстовом поле

Поле с фокусом можно изменить через стили воспользовавшись псевдоклассом :focus, добавляя его к селектору input. Код HTML останется неизменным, появится только блок со стилями (пример 2).

Пример 2. Изменение вида поля с фокусом

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Автофокус</title>
  <style>
   input {
    border: 1px solid #666; /* Параметры рамки */
   }
   input:focus {
    box-shadow: 0 0 5px 1px #00a8de; /* Свечение вокруг поля */
    background: #fffac0; /* Цвет фона */
   }
  </style>
 </head>
 <body>
  <form>
   <fieldset>
    <legend>Вход на сайт</legend>
    <p><input name="login" autofocus></p>
    <p><input type="password" name="pass"></p>
    <p><input type="submit" value="Вход"></p>
   </fieldset>
  </form>
 </body>
</html>

Результат данного примера показан на рис. 2. Как только поле получает фокус или, другими словами, в него можно вводить текст, то цвет фона у поля меняется и вокруг появляется голубое свечение. Оно сделано с помощью тени соответствующего цвета через свойство box-shadow.

Вид поля при получении фокуса

Рис. 2. Вид поля при получении фокуса


Подсказывающий текст

В дизайне часто требуется вставить пояснение к текстовому полю, но не всегда для этого имеется место. Решением в таком случае является добавление подсказывающего текста непосредственно внутрь поля, а при получении фокуса или вводе текста подсказка пропадает. Это делается с помощью атрибута placeholder, значением которого служит любой текст. Подсказка делается для полей text, password, search, email, tel, url и <textarea>, иными словами, везде, где вводится текст.

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

В примере 1 показано добавление подсказки к полям формы для создания авторизации.

Пример 1. Подсказывающий текст

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Подсказка</title>
 </head>
 <body>
  <form>
   <p><input name="login" placeholder="Логин"></p>
   <p><input name="pass" type="password" placeholder="Пароль"></p>
   <p><input type="submit" value="Вход"></p>
  </form>
 </body>
</html>

Результат примера показан на рис. 1.

Вид полей с подсказывающим текстом

Рис. 1. Вид полей с подсказывающим текстом

Серый цвет, используемый по умолчанию, выбран удачно, но не всегда вписывается в дизайн страницы, особенно если меняется цвет фона полей формы. Для изменения цвета текста выводимого через атрибут placeholder в Firefox применяется псевдоэлемент ::-moz-placeholder.

::-moz-placeholder { color: red; }

В Safari, Opera и Chrome стиль текста меняется следующим образом.

::-webkit-input-placeholder { color: red; }

В IE используется другой подход.

:-ms-input-placeholder { color: red; }

Соединяя воедино эти стили получим страницу, одинаково работающую во всех современных браузерах (пример 2).

Пример 2. Цвет подсказывающего текста

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Подсказка</title>
  <style>
   input {
    background: #86328c; /* Цвет фона */
    color: #fffac0; /* Цвет текста */
    padding: 5px; /* Поля */
    border: transparent; /* Прячем рамку */
    width: 200px; /* Ширина поля */
   }
   ::-webkit-input-placeholder {
    color: #f9a4bc; /* Chrome, Safari, Opera */
   }
   ::-moz-placeholder {
    color: #f9a4bc; /* Firefox */
   }
   :-ms-input-placeholder {
    color: #f9a4bc; /* IE */
   }
  </style>
 </head>
 <body>
  <form>
   <p><input name="login" placeholder="Логин"></p>
   <p><input name="pass" type="password" placeholder="Пароль"></p>
   <p><button type="submit">Вход</button>
  </form>
 </body>
</html>

Результат данного примера показан на рис. 2.

Вид полей с подсказывающим текстом

Рис. 2. Изменение цвета подсказывающего текста


Защита от дурака

«Защитой от дурака» называется комплекс мер по пресечению ввода неправильной информации в форме. Например, если в поле требуется ввести положительное число от 0 до 10, то следует проверить, чтобы пользователь не ввёл текст или число, которое не лежит в указанном диапазоне, т. е. число не должно быть меньше нуля и больше десяти.

Почему происходит ввод неправильной информации? Это в основном совершается по трём причинам.

  1. Пользователь ошибся случайно, например, невнимательно прочитал что ему требуется указать.
  2. На веб-странице неоднозначно просят ввести данные, поэтому пользователю приходится гадать и делать предположение, что же в действительности от него хотят. При этом не всегда происходит совпадение мнений разработчика и пользователя.
  3. Есть ряд людей, которые воспринимают инструкции как вызов и стараются поступить наоборот. Такие пользователи рассуждают примерно так: «Ага, меня просят ввести число. А что будет, если я укажу буквы?». После чего задают явно неправильную информацию и смотрят, к чему это приведёт.

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

Обязательное поле

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

Пример 1. Атрибут required

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Обязательное поле</title>
 </head>
 <body>
  <form>
   <p>Логин: <input name="login" required></p>
   <p>Пароль: <input type="password" name="login" required></p>
   <p><input type="submit" value="Вход"></p>
  </form>
 </body>
</html>

Обязательные поля должны быть заполнены перед отправкой формы, иначе форма на сервер не пересылается и браузер выдаст об этом предупреждение. Вид сообщения зависит от браузера (рис. 1).

Обязательное поле не заполнено

Рис. 1. Обязательное поле не заполнено

Корректность данных

Исходно имеется два поля в котором вводимые пользователем данные проверяются автоматически. Это веб-адрес и адрес электронной почты. Для этих элементов характерны следующие правила.

  • Веб-адрес (<input type="url">) должен содержать протокол (http://, https://, ftp://).
  • Адрес электронной почты (<input type="email">) должен содержать буквы или цифры до символа @, после него, затем точку и домен первого уровня.

У браузеров несколько различается политика по проверке данных пользователя. Chrome и Opera требуют, чтобы в почтовом адресе была точка, для Firefox она не обязательна.

В примере 2 показана форма с обязательными полями, в которой два поля проверяется браузером.

Пример 2. Корректность данных

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Корректность данных</title>
 </head>
 <body>
  <form>
   <p>Заполните форму (все поля  обязательны)</p>
   <p>Имя: <input name="name" required></p>
   <p>Email: <input type="email" name="email" required></p>
   <p>Сайт: <input type="url" name="site" required></p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

Что происходит в Opera при вводе неверных данных показано на рис. 2.

Предупреждение о неправильных данных

Рис. 2. Предупреждение о неправильных данных

Шаблон ввода

Некоторые данные нельзя отнести к одному из видов элементов формы, поэтому для них приходится использовать текстовое поле. При этом их ввод происходит по определённому стандарту. Так, IP-адрес содержит четыре числа разделённых точкой (192.168.0.1), почтовый индекс России ограничен шестью цифрами (124007), телефон содержит код города и конкретное количество цифр часто разделяемых дефисом (391 555-341-42) и др. Браузеру необходимо указать шаблон ввода, чтобы он согласно нему проверял вводимые пользователем данные. Для этого используется атрибут pattern, а его значением выступает регулярное выражение. Некоторые типовые значения перечислены в табл. 1.

Табл. 1. Регулярные выражения
Выражение | Описание
\d [0-9] | Одна цифра от 0 до 9.
\D [^0-9] | Любой символ кроме цифры.
\s | Пробел.
[A-Z] | Только заглавная латинская буква.
[A-Za-z] | Только латинская буква в любом регистре.
[А-Яа-яЁё] | Только русская буква в любом регистре.
[A-Za-zА-Яа-яЁё] | Любая буква русского и латинского алфавита.
[0-9]{3} | Три цифры.
[A-Za-z]{6,} | Не менее шести латинских букв.
[0-9]{,3} | Не более трёх цифр.
[0-9]{5,10} | От пяти до десяти цифр.
^[a-zA-Z]+$ | Любое слово на латинице.
^[А-Яа-яЁё\s]+$ | Любое слово на русском включая пробелы.
^[ 0-9]+$ | Любое число.

В примере 3 просят ввести шестнадцатеричное значение цвета (#ffcc00) и если оно не лежит в этом диапазоне, браузер выводит сообщение об ошибке.

Пример 3. Шаблон ввода

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ввод цвета</title>
 </head>
 <body>
  <form>
   <p>Введите шестнадцатеричное значение цвета
   (должно начинаться с #)</p>
   <p><input name="digit" required pattern="#[0-9A-Fa-f]{6}"></p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

На рис. 3 показано предупреждение о неверном формате ввода.

Введённые данные не соответствуют шаблону

Рис. 3. Введённые данные не соответствуют шаблону

Отмена валидации

Валидация не всегда требуется для формы, разработчик может пожелать использовать универсальное решение на JavaScript и дублирующая проверка браузером ему уже ни к чему. В подобных случаях необходимо отключить встроенную валидацию. Для этого применяется атрибут novalidate элемента <form>. В примере 4 показано использование этого атрибута.

Пример 4. Отмена валидации

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Атрибут novalidate</title>
 </head>
 <body>
  <form novalidate>
   <p><input name="user" required placeholder="Ваше имя"></p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

Для аналогичной цели применяется и атрибут formnovalidate, который добавляется к кнопке для отправки формы, в данном случае к <input type="submit">. Тогда форма из примера 4 будет иметь следующий вид.

<form>
  <p><input name="user" required placeholder="Ваше имя"></p>
  <p><input type="submit" value="Отправить" formnovalidate></p>
</form>


Трансформация

Трансформация — это изменение вида элемента, к которым относятся следующие визуальные модификации: поворот, масштабирование, наклон и сдвиг. Чтобы сделать трансформацию, к селектору добавляется свойство transform, а в качестве значения пишется функция трансформации и её параметры. В общем виде это записывается так:

transform: функция(параметры);

В примере 1 показано изменение масштаба фотографий при наведении на них курсора мыши.

Пример 1. Использование transform

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Трансформация</title>
  <style>
   .thumbs {
    display: inline-block;
   }
   .thumbs:hover .thumb {
    transform: scale(0.9); /* Уменьшаем все фотографии */
   }
   .thumb {
    background: #297770; /* Цвет рамки */
    padding: 10px; /* Толщина рамки вокруг картинки */
    transition: 1s; /* Время перехода */
   }
   .thumb:hover {
    transform: scale(1.1) !important; /* Увеличиваем фотографию */
   }
  </style>
 </head>
 <body>
  <div class="thumbs">
   <img src="images/thumb1.jpg" alt="" class="thumb">
   <img src="images/thumb2.jpg" alt="" class="thumb">
   <img src="images/thumb3.jpg" alt="" class="thumb">
  </div>
 </body>
</html>
Живой пример

Результат данного примера показан на рис. 1. При наведении курсора мыши на любую фотографию она немного увеличивается в размерах, а остальные фотографии, наоборот, уменьшаются.

Изменение масштаба фотографий

Рис. 1. Изменение масштаба фотографий

Для получения такого эффекта мы используем псевдокласс :hover для класса thumbs, и уменьшаем все изображения на 10% через функцию scale(). Выбранную фотографию теперь надо увеличить, поэтому опять задействуем :hover, но уже только для неё. Правило !important применяется для повышения важности стилевого правила, поскольку уменьшение имеет более высокий приоритет.


Функции трансформации

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

Любая трансформация происходит относительно центральной точки элемента, её положение можно задать с помощью свойства transform-origin. Координатные оси показаны на рис. 1; оси X и Y находятся в плоскости экрана, а ось Z ему перпендикулярна.

Рис. 1. Координатные оси

translate()

Сдвигает элемент на заданное значение по горизонтали и вертикали в плоскости экрана.

transform: translate(tx[, ty])

Здесь: tx — значение смещения по оси X в пикселях, процентах или других единицах CSS; ty — смещение по оси Y. Если значение ty не указано, то оно считается равным tx: translate(2) соответствует translate(2, 2).

translate3d()

Сдвигает элемент на заданное значение в трёхмерном пространстве.

transform: translate(tx, ty, tz)

Здесь: tx — смещение по оси X; ty — смещение по оси Y; tz — смещение по оси Z. tz не может указываться в процентах, в этом случае функция игнорируется.

translateX()

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

transform: translateX(tx)

translateY()

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

transform: translateY(ty)

translateY(ty) является синонимом translate(0, ty).

translateZ()

Сдвигает элемент по оси Z в трёхмерном пространстве. Положительное значение сдвигает вперёд, отрицательное назад.

transform: translateZ(tz)

translateZ(tz) является синонимом translate3d(0, 0, tz).

scale()

Задаёт масштаб элемента по горизонтали и вертикали.

transform: scale(sx[, sy]);

Здесь: sx — изменение масштаба по оси X; sy — изменение масштаба по оси Y. Значение больше 1 увеличивает масштаб элемента, меньше 1, наоборот, его уменьшает. Если задано только одно значение, то масштабирование будет происходить пропорционально в обе стороны.

scale3d()

Масштабирует элемент в трёхмерном пространстве.

transform: scale3d(sx, sy, sz)

scaleX()

Масштабирует элемент по горизонтали.

transform: scaleX(sx);

Значение -1 отражает элемент по горизонтали (пример 1).

Пример 1. Отражение по горизонтали

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Отражение</title>
  <style>
   .mirrorX {
    transform: scaleX(-1) translateX(-20px);
   }
  </style>
 </head>
 <body>
  <img src="images/igels.png" alt="">
  <img src="images/igels.png" alt="" class="mirrorX">
 </body>
</html>

scaleX() не только отражает изображение, но и меняет направление координат. Поэтому для сдвига картинки вправо применяется отрицательное значение в функции translateX() (рис. 1).

Отражение картинки по горизонтали

Рис. 1. Отражение картинки по горизонтали

scaleY()

Масштабирует элемент по вертикали.

transform: scaleY(sy);

Значение -1 отражает элемент по вертикали (пример 2).

Пример 2. Отражение по вертикали

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Отражение</title>
  <style>
   .mirrorY {
    transform: scaleY(-1); /* Отражаем по вертикали */
    opacity: 0.2; /* Полупрозрачность */
   }
  </style>
 </head>
 <body>
  <img src="images/igels.png" alt="">
  <img src="images/igels.png" alt="" class="mirrorY">
 </body>
</html>

Результат данного примера показан на рис. 2.

Отражение картинки по вертикали

Рис. 2. Отражение картинки по вертикали

scaleZ()

Масштабирует элемент по оси Z.

transform: scaleZ(sz);

scaleZ(sz) является синонимом scale3d(1, 1, sz).

rotate()

Поворачивает элемент на заданный угол относительно точки трансформации, задаваемой свойством transform-origin.

transform: rotate(α)

Здесь: α — угол поворота. Положительное значение поворачивает элемент по часовой стрелке, отрицательное против.

rotate3d()

Поворачивает элемент в трёхмерном пространстве без искажений. Вращающийся элемент имеет три степени свободы — оси X, Y и Z, относительно которых происходит поворот. Они задаются с помощью вектора [x, y, z] с учётом точки вращения.

transform: rotate3d(x, y, z, α)

Здесь: x — целое число описывающее координату X вектора оси вращения; y — целое число описывающее Y-координату вектора оси вращения; z — целое число описывающее координату Z вектора оси вращения; α — угол поворота. Положительное значение угла поворачивает элемент по часовой стрелке, отрицательное против.

rotateX()

Поворачивает элемент вокруг оси X на заданный угол α.

transform: rotateX(α)

rotateX(α) является синонимом rotate3D(1, 0, 0, α).

rotateY()

Поворачивает элемент вокруг оси Y на заданный угол α.

transform: rotateY(α)

rotateY(α) является синонимом rotate3D(0, 1, 0, α).

rotateZ()

Поворачивает элемент вокруг оси Z на заданный угол α.

transform: rotateZ(α)

rotateZ(α) является синонимом rotate3D(0, 0, 1, α).

skew()

Наклоняет элемент на заданное значение по горизонтали и вертикали в плоскости экрана.

transform: skew(ax[, ay])

Здесь: ax — угол наклона по оси X; ay — угол наклона по оси Y. Если значение ay не указано, то оно считается равным ax: skew(30deg) соответствует skew(30deg, 30deg).

skewX()

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

transform: skewX(α)

Здесь: α — угол наклона по оси X. В примере 3 показано создание наклонного меню с помощью функции skewX().

Пример 3. Использование skewX()

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Трансформация</title>
  <style>
   li {
    background: #a9c358; /* Цвет фона */
    list-style: none; /* Убираем маркеры */
    width: 300px; /* Ширина списка */
    margin-bottom: 10px; /* Отступ снизу */
    transform: skewX(-30deg); /* Наклоняем вправо */
   }
   li a {
    color: #2c285d; /* Цвет ссылок */
    text-decoration: none; /* Убираем подчёркивание */
    display: block; /* Блочные ссылки */
    padding: 5px 20px; /* Поля */
    transform: skewX(30deg); /* Наклоняем ссылки обратно */
   }
  </style>
 </head>
 <body>
  <ul>
   <li><a href="#">Пирамида Хеопса</a></li>
   <li><a href="#">Висячие сады Семирамиды</a></li>
   <li><a href="#">Статуя Зевса в Олимпии</a></li>
   <li><a href="#">Храм Артемиды в Эфесе</a></li>
   <li><a href="#">Мавзолей в Галикарнасе</a></li>
   <li><a href="#">Колосс Родосский</a></li>
   <li><a href="#">Александрийский маяк</a></li>
  </ul>
 </body>
</html>

Результат данного примера показан на рис. 3. Поскольку трансформация действует на содержимое всего элемента, то ссылки внутри <li> тоже окажутся под наклоном. Нам это не требуется, поэтому ещё раз применяем функцию skewX() для <a>, но уже с противоположным знаком.

Наклон пунктов меню

Рис. 3. Наклон пунктов меню

skewY()

Наклоняет элемент на заданный угол по вертикали.

transform: skewY(α)

Здесь: α — угол наклона по оси Y. Положительное значение наклоняет вниз, отрицательное вверх.

perspective()

Функция задаёт степень перспективы элемента в трёхмерном пространстве. Выражается расстоянием по оси Z от плоскости экрана до точки схода на линии горизонта. Чем меньше расстояние в пикселях, тем сильнее выражены искажения и наоборот.

transform: perspective(l)

Здесь: l — размер в пикселях или других единицах CSS. Процентная запись неприменима. Если значение равно 0 или отрицательное, то функция не работает.


Матрица преобразований

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

Двумерная матрица

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

Исходный элемент | Поворот | Наклон | А вот так сделать нельзя
Исходный элемент | Поворот | Наклон | А вот так сделать нельзя

Рис. 1. Трансформация элемента

Сама матрица имеет размер 3х3 и в общем виде записывается так:

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

И вычисляются по следующей формуле:

Роль каждого коэффициента матрицы представлена в табл. 1.

Табл. 1. Коэффициенты матрицы преобразований
Коэффициент | Преобразование | Описание
a | Изменение размера по горизонтали | Изменение масштаба по горизонтали. Значение больше 1 расширяет элемент, меньше 1, наоборот, сжимает.
b | Наклон по горизонтали | Наклон по вертикали. Положительное значение наклоняет вверх, отрицательное вниз.
c | Наклон по вертикали | Наклон по горизонтали. Положительное значение наклоняет влево, отрицательное вправо.
d | Изменение размера по вертикали | Изменение масштаба по вертикали. Значение больше 1 расширяет элемент, меньше 1 — сжимает.
tx | Смещение по горизонтали в пикселях | Смещение по горизонтали в пикселях. Положительное значение сдвигает элемент вправо на заданное число пикселей, отрицательное значение сдвигает влево.
ty | Смещение по вертикали в пикселях | Смещение по вертикали в пикселях. При положительном значении элемент опускается на заданное число пикселей вниз или вверх при отрицательном значении.

Для матрицы преобразований применяется функция matrix(), внутри скобок перечисляются коэффициенты.

transform: matrix(a, b, c, d, tx, ty)

Единичная матрица

Если в матрице коэффициенты a и d равны 1, а остальные элементы матрицы нулевые, то такая матрица называется единичной. Эта матрица применяется по умолчанию, поскольку не приводит к какой-либо трансформации элемента. Так что если необходимо произвести только один вид преобразований, единичную матрицу надо брать в качестве основы.

Масштаб по горизонтали

Чтобы увеличить размер элемента, допустим, в два раза по горизонтали, коэффициент a следует установить равным 2, а остальные коэффициенты оставить как в единичной матрице.

Считаем новые координаты:

x' = 2*x + 0*y + 0
y' = 0*x + 1*y + 0

И окончательно:

x' = 2x
y' = y

Код для масштабирования показан в примере 1.

Пример 1. Масштабирование

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Трансформация</title>
  <style>
   .t {
    background: #e7685d; /* Цвет фона */
    color: #fff; /* Цвет текста */
    padding: 10px; /* Поля */
    width: 300px; /* Ширина */
    transform-origin: 0 0; /* Точка трансформации */
    transform: matrix(1.2, 0, 0, 1, 0, 0); /* Трансформация */
   }
  </style>
 </head>
 <body>
  <div class="t">
   <p>То, что делает армию при встрече с противником непобедимой,
      это правильный бой и маневр.</p>
   <p>Сунь-Цзы. Искусство войны. Пер. Н. Конрад.</p>
  </div>
 </body>
</html>

Результат данного примера показан на рис. 2. Блок с текстом растягивается на 20% по горизонтали.

Изменение масштаба текста

Рис. 2. Изменение масштаба текста

Отражение

Для отражение элемента по горизонтали следует установить a=-1, по вертикали d=-1 или оба значения одновременно для отражения одним разом по горизонтали и вертикали.

В примере 2 показано отражение текста по вертикали.

Пример 2. Отражение

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Трансформация</title>
  <style>
   .t {
    transform: matrix(1, 0, 0, -1, 0, 0);
   }
  </style>
 </head>
 <body>
  <p class="t">Через миг Алиса прошла сквозь зеркало
   и легко спрыгнула в Зазеркалье.</p>
 </body>
</html>

Результат данного примера показан на рис. 3.

Отражение текста по вертикали

Рис. 3. Отражение текста по вертикали

Наклон

За наклон отвечают коэффициенты b и c, которые и влияют на вид элемента. Давайте установим c=1 и посмотрим, какие преобразования получатся.

x' = 1*x + 1*y + 0
y' = 0*x + 1*y + 0

x' = x + y
y' = y

Таким образом, меняется только координата x, которая увеличивается на значение y, что и приводит к наклону элемента. В примере 3 используется отрицательное значение коэффициента c для наклона вправо.

Пример 3. Наклон

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Трансформация</title>
  <style>
   .t {
    background: #e7685d; /* Цвет фона */
    color: #fff; /* Цвет текста */
    padding: 10px; /* Поля */
    width: 300px; /* Ширина */
    transform-origin: 0 100%; /* Точка трансформации */
    transform: matrix(1, 0, -0.5, 1, 0, 0); /* Трансформация */
   }
  </style>
 </head>
 <body>
  <div class="t">
   <p>То, что делает армию при встрече с противником непобедимой,
   это правильный бой и маневр.</p>
   <p>Сунь-Цзы. Искусство войны. Пер. Н. Конрад.</p>
  </div>
 </body>
</html>

Результат данного примера показан на рис. 4.

Рис. 4. Наклон блока

Поворот

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

Сам поворот происходит по часовой стрелке, α задаёт угол поворота в градусах.

Перемещение

За сдвиг элемента по горизонтали отвечает коэффициент tx, а по вертикали ty. Значением выступает число пикселей.

Трёхмерная матрица

Трёхмерная матрица имеет размер 4х4 и применяется для преобразования координат элемента в трёхмерном пространстве. В общем виде она выглядит так:

Название «трёхмерная» лишь отражает тот факт, что матрица предназначена для работы в 3d-пространстве. Двумерная матрица является её частным случаем и для размера 4х4 имеет следующий вид:

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

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function


Точка трансформации

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

Сама точка трансформации указывается с помощью свойства transfrom-origin, а в качестве значения пишется две или три координаты по осям X, Y, Z. Если координат две, то это оси X и Y. Обычно используется процентная запись, но также могут применяться ключевые слова и пиксели. Для оси Z проценты и ключевые слова неприменимы. На рис. 1 показаны точки и указывающие их ключевые слова.

Рис. 1. Точки трансформации

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

  • 0, 0 = left top — левый верхний угол;
  • 50% 0 = center top — верхняя точка по центру;
  • 100% 0 = right top — правый верхний угол;
  • 0, 50% = left, center — центральная точка по левому краю;
  • 50% 50% = center center — по центру элемента, это значение по умолчанию;
  • 100% 50% = right center — центральная точка по правому краю;
  • 0, 100% = left bottom — левый нижний угол;
  • 50% 100% = center bottom — нижняя точка по центру;
  • 100% 100% = right bottom — правый нижний угол.

В примере 1 показан эффект распашных дверей при наведении курсора на фигуру. Вращение происходит по оси Y, а чтобы оно было более выразительно добавим ещё и перспективу. Для левого элемента поворот происходит относительно центральной точки левого края, а для правого — относительно центральной точки правого края. Для поворота нет разницы, где располагается точка трансформации по оси Y, а вот на вид перспективы это влияет, поэтому располагаем её по центру правого и левого края.

Пример 1. Точки трансформации

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Трансформация</title>
  <style>
   .doors {
    display: inline-block;
   }
   .door {
    width: 200px; height: 360px;
    display: inline-block;
    background: #e79e6d;
    border: 2px solid #333;
    transition: transform 2s;
   }
   .door-left {
    transform-origin: 0 50%; /* Точка трансформации слева */
   }
   .door-right {
    transform-origin: 100% 50%; /* Точка трансформации справа */
   }
   .doors:hover .door-left {
    /* Добавляем перспективу и поворот */
    transform: perspective(400px) rotateY(40deg);
   }
   .doors:hover .door-right {
    transform: perspective(400px) rotateY(-40deg);
   }
  </style>
 </head>
 <body>
  <div class="doors">
   <div class="door door-left"></div>
   <div class="door door-right"></div>
  </div>
 </body>
</html>
Живой пример

Результат данного примера показан на рис. 2.

Вид элементов в момент трансформации

Рис. 2. Вид элементов в момент трансформации


Переходы

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

Рассмотрим для начала простой пример. У нас имеется несколько картинок, каждая должна поворачиваться не небольшой угол при наведении на неё курсора (пример 1).

Пример 1. Применение transition

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Поворот картинок</title>
  <style>
   .thumb {
    display: inline-block;
    border: 1px solid #ccc; /* Параметры рамки */
    padding: 20px; /* Поля вокруг картинки */
    margin-right: 30px; /* Отступ справа */
    box-shadow: 0 0 5px #ccc; /* Добавляем тень  */
    transition: 0.6s ease-out; /* Переход */
   }
   .thumb:hover {
    transform: rotate(-15deg); /* Поворачиваем картинку */
    border: 1px solid green; /* Меняем цвет рамки */
   }
  </style>
 </head>
 <body>
  <div class="thumb"><img src="images/thumb1.jpg" alt=""></div>
  <div class="thumb"><img src="images/thumb2.jpg" alt=""></div>
  <div class="thumb"><img src="images/thumb3.jpg" alt=""></div>
 </body>
</html>
Живой пример

Как только мы наводим курсор на любую картинку, она плавно поворачивается на 15 градусов влево (рис. 1).

Плавный поворот изображения

Рис. 1. Плавный поворот изображения

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

Свойства

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

transition: transform, border 1s;

Продолжительность анимации

Это время, в течение которого будет длиться движение. Задаётся как в секундах (1s, 0.5s), так и в миллисекундах (100ms).

Задержка анимации

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

Функция времени

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

Вид функции времени

Рис. 2. Вид функции времени

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

  • ease — анимация начинается медленно, затем ускоряется и к концу движения опять замедляется.
  • ease-in — анимация медленно начинается, к концу ускоряется.
  • ease-out — анимация начинается быстро, к концу замедляется.
  • ease-in-out — анимация начинается и заканчивается медленно.
  • linear — одинаковая скорость от начала и до конца.

В примере 2 переход применяется для плавного выдвижения панели из-за левого края экрана при наведении на неё курсора мыши.

Пример 2. Использование функции времени

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Обратная связь</title>
  <style>
   .feedback {
    border-radius: 0 10px 10px 0; /*  Скругляем уголки */
    width: 300px; /* Ширина */
    background: #333; /* Цвет фона */
    color: #fff; /* Цвет текста */
    position: fixed; /* Фиксируем на одном месте  */
    min-height: 100px; /* Минимальная высота */
    top: 100px; left: -320px; /* Положение */
    border-right: 20px solid #fc0; /* Оранжевая граница справа */
    padding: 10px; /* Поля вокруг */
    transition: left 1s ease-out; /* Анимация */
   }
   .feedback img {
    float: left;
    margin: 0 10px 0 0;
   }
   .feedback::after {
    content: 'Обратная связь'; /* Выводим текст */
    color: #000; /* Цвет надписи */
    position: absolute; /* Абсолютное позиционирование */
    right: -60px; bottom: 50px; /* Положение текста */
    transform: rotate(-90deg); /* Поворачиваем текст */
   }
   .feedback:hover {
    left: 0; /* При наведении сдвигаем вправо */
   }
  </style>
 </head>
 <body>
  <div class="feedback">
   <img src="images/feedback.jpg" alt="" width="100" height="100">
   Если у вас возникли вопросы по этому коду, звоните мне по телефону:
   555-3298.
  </div>
 </body>
</html>
Живой пример

В данном примере много стилевых свойств, но они предназначены лишь для создания нужного дизайна. Анимация при наведении курсора мыши делается двумя свойствами — transition задаёт параметры анимации, а left — это свойство, значение которого плавно изменяется со временем (в данном случае в течение одной секунды). Исходно left равно -320px и большая часть панели скрыто за левым краем браузера, виден лишь кусочек. Затем left становится равным нулю и таким образом вся панель становится видна.

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

Пример 3. Кнопка с плавным изменением цвета

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Кнопка</title>
  <style>
   button {
    background-color: #828c95;
    color: #fff;
    font-size: 1.5em;
    padding: 10px 40px;
    border-radius: 20px;
    border: 2px solid #b5bdc8;
    transition: background-color, border 1s ease-in, color 2s ease-out;
   }
   button:hover {
    background-color: #fac695;
    color: #333;
    border: 2px solid #ff670f;
   }
  </style>
 </head>
 <body>
  <button>Нажми на меня</button>
 </body>
</html>
Живой пример

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


Анимация

Анимация бывает двух видов — покадровая анимация и анимация по ключевым кадрам. При покадровой анимации важным показателем является частота кадров в секунду. Для ориентира — в кинотеатрах используется 24 кадра в секунду, на телевидении — 25, современные камеры умеют снимать с частотой 50 и более кадров в секунду. Соответственно, чтобы сделать рисованный ролик продолжительностью полминуты и с частотой 24 кадра, потребуется 720 изображений. Некоторые мультипликаторы идут на хитрость и чтобы не рисовать огромное количество картинок сокращают их число в два раза, при этом повторяя каждый кадр дважды.

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

Перемещение квадрата по прямой

Понятно, что это сильно упрощает процесс создания анимации, поскольку число кадров существенно сокращается, а всякая рутина вычисляется автоматически. Вместе с тем есть и ряд ограничений. К примеру, если требуется сделать движение объекта по дуге. Продвинутые программы вроде Adobe Flash позволяют перемещать объекты вдоль произвольной кривой, но браузеры пока сильно уступают им в этом плане. Движение может происходить только линейно, поэтому кривую мы заменяем приближённой ломаной. В математике этот метод называется аппроксимацией. Чем больше точек мы поставим, тем ближе ломаная будет к исходной кривой и тем плавнее движение, но с другой стороны это усложняет работу, фактически приближая её к покадровой анимации. Так что важно соблюдать баланс между качеством и затратами труда.

Перемещение квадрата по кривой

@keyframes

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

animation: переменная
@keyframes переменная

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

Пример 1. Появление текста

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Анимация</title>
  <style>
   .fadeIn {
    animation: fadeIn 3s;
    -webkit-animation: fadeIn 3s;
    background: #fc0;
    padding: 10px;
   }
   @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
   }
   @-webkit-keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
   }
  </style>
 </head>
 <body>
  <div class="fadeIn">Основные области применения заклёпочных соединений —
  авиационная техника и судостроение.</div>
 </body>
</html>
Живой пример

В данном примере мы создаём элемент с классом fadeIn, к которому применяется свойство animation со значением fadeIn 3s. Это означает, что анимация будет длиться три секунды, но что именно будет происходить за это время animation не знает, в его задачу лишь входит перенаправление к @keyframes с именем fadeIn. Внутри @keyframes есть два ключевых слова — from и to, они определяют начальное и конечное значение свойств элемента. Исходя из этого браузер за три секунды плавно меняет значение opacity с 0 до 1.

Обратите внимание на префикс -webkit. Браузер Chrome не поддерживает оригинальные свойства, поэтому приходится дублировать записи, добавляя этот префикс.

Анимация может быть сложной и содержать более двух ключевых кадров, чем это показано в примере выше. Тогда ключевые кадры указываются в процентах от времени всей анимации. 0% — начало анимации, 100% — время её окончания, 50% — середина и т. д. Если какие-то ключевые кадры имеют одинаковое состояние, то их можно группировать, как показано в примере 2.

Пример 2. Ключевые кадры

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Анимация</title>
  <style>
   .tinLeftOut {
    -webkit-animation: tinLeftOut 3s;
    animation: tinLeftOut 3s;
   }
   @-webkit-keyframes tinLeftOut {
    0%, 20%, 40%, 50% {
     opacity: 1; transform: scale(1, 1) translateX(0);
    }
    10%, 30% {
     opacity: 1; transform: scale(1.1, 1.1) translateX(0);
    }
    100% {
     opacity: 0; transform: scale(1, 1) translateX(-900%);
    }
   }
   @keyframes tinLeftOut {
    0%, 20%, 40%, 50% {
     opacity: 1; transform: scale(1, 1) translateX(0);
    }
    10%, 30% {
     opacity: 1; transform: scale(1.1, 1.1) translateX(0);
    }
    100% {
     opacity: 0; transform: scale(1, 1) translateX(-900%);
    }
   }
  </style>
 </head>
 <body>
  <img src="images/cat.jpg" alt="" class="tinLeftOut">
 </body>
</html>
Живой пример

Ключевые слова from и to соответствуют 0% и 100%, поэтому можно указывать как проценты, так и эти ключевые слова, они взаимозаменяемы.

Свойство animation

Правило @keyframes определяет набор ключевых кадров и на этом его функции исчерпываются. Что с этим набором делать, к чему его применять и как, определяет универсальное свойство animation. Чтобы увидеть какое-то подобие движения следует задать переменную указывающую на @keyframes и продолжительность движения в секундах (s) или миллисекундах (ms).

animation: <переменная> <время>

По умолчанию анимация длится указанное время, а затем свойства элемента возвращаются в исходное состояние до начала анимации.

Свойство animation имеет восемь значений, которые могут быть заданы непосредственно через него или через отдельные свойства, вроде animation-duration, оно устанавливает продолжительность анимации.

Библиотека animate.css

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

Animate.css это бесплатная библиотека доступная по адресу http://daneden.github.io/animate.css/. На сайте выбираете из списка готовый эффект и смотрите как он применяется к заголовку.

Для начала следует скачать библиотеку. Есть три варианта.

  • Полная версия. Содержит более трёх тысяч строк кода объёмом около 60 кБ. Она хорошо подходит на первом этапе ознакомления с анимацией в целом, поскольку позволяет взглянуть, как всё устроено.
  • Упакованная версия. В css-файле нет табуляции, пробелов и переносов строк. Объём файла за счёт этого сокращается раза в полтора, но читать код при этом становится затруднительно.
  • Выборочные эффекты. Лучше всего подходит для большинства задач, поскольку позволяет указать только понравившиеся эффекты, избавившись от лишнего.

Далее подключаем файл animate.css через <link> как это делается с любым другим стилевым файлом.

<link href="animate.css" rel="stylesheet">

Чтобы применить эффект анимации к желаемому элементу, добавляем к нему два класса — animated и класс с названием эффекта (список всех эффектов и их названия смотрим на сайте). Например, вы желаете добавить мерцание к изображению на странице. В HTML записываем следующее:

<img src="images/figure.jpg" alt="" class="animated flash">

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

<img src="images/figure.jpg" alt="" class="animated infinite flash">

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

Пример 3. Использование animate.css

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Анимация</title>
  <link href="animate.css" rel="stylesheet">
  <style>
   .animated.flash {
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
   }
  </style>
 </head>
 <body>
  <p><img src="images/figure.jpg" alt="" class="animated infinite flash"></p>
 </body>
</html>
Живой пример

magic

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

http://www.minimamente.com/example/magic_animations/

Скачайте полную или упакованную версию библиотеки по этому адресу https://github.com/miniMAC/magic и подключите её к своему сайту.

<link href="magic.css" rel="stylesheet">

Теперь к выбранным элементам добавляем класс magictime и класс с именем выбранного на сайте эффекта (пример 4). Увеличение продолжительности анимации делается аналогично, с помощью свойства animation-duration.

Пример 4. Использование magic

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Анимация</title>
  <link href="magic.css" rel="stylesheet">
  <style>
   .magictime {
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
   }
  </style>
 </head>
 <body>
  <p><img src="images/figure.jpg" alt="" class="magictime perspectiveUpRetourn"></p>
 </body>
</html>
Живой пример