Выравнивание содержимого в ячейках
За выравнивание по горизонтали отвечает CSS-свойство text-align. Чаще всего используются значения left, center и right.
За выравнивание по вертикали отвечает CSS-свойство vertical-align. Чаще всего используются значения top, middle и bottom.
Подпись к таблице задается через тег<caption>. Ипозиционируетсячерез text-align: center; и caption-side:bottom;
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
ФОРМЫ
Формы нужны для того, чтобы отправлять данные с веб-страницы на веб-сервер, который сможет эти данные обработать: зарегистрировать пользователя, создать сообщение на форуме, отправить письмо и так далее. В общем, формы в вебе просто необходимы.
Чтобы создать форму, нужно использовать парный тег <form>, внутри которого размещаются поля формы. У тега <form> есть два важных атрибута:
· action задаёт адрес, URL, отправки формы;
· method задаёт метод отправки формы.
Метод get лучше использовать в поисковых формах, потому что он позволяет получить ссылку на результаты поиска и передать её кому-то.
Метод post посылает данные в теле HTTP-запроса и используется, когда нужно отправить много данных и ссылка на результат обработки этих данных не нужна. Например, при редактировании личного профиля.
Большинство полей форм создаётся с помощью одиночного тега <input>. У этого тега два обязательных атрибута:
· type задаёт тип поля;
· name задаёт имя поля.
Тип полявлияет на то, как оно будет отображаться и вести себя. Самый распространённый тип — это text, который обозначает текстовое поле.
Имя поля нужно, чтобы правильно обработать данные на сервере. Обычно, имя поля должно быть уникальным в пределах формы, хотя есть исключения.
На сервер посылается ИМЯ поля. Таким образом мы разбираем
Подпись для поля ввода
Можно подумать, что сделать подпись к полю очень просто. Пишем текст рядом с полем и всё готово.На самом деле этого недостаточно — мы получили просто кусок текста и поле, которые расположены рядом друг с другом, но логически никак не связаны.
Есть специальный тег, который позволяет смело сказать: «Этот кусок текста действительно подпись к этому полю!». Это парный тег <label>.
Он связывает текст и поле ввода логически. А ещё если щёлкнуть по тексту в такой подписи, то курсор переместится в соответствующее поле.
Иногда обернуть поле и текст подписи в тег <label> нельзя. Например, когда они размещены в разных ячейках таблицы.
В этом случае можно связать подпись с полем с помощью атрибута id. Алгоритм такой:
1. Добавляем к полю ввода идентификатор с помощью атрибута id.
2. Оборачиваем текст подписи в тег <label>.
3. Добавляем тегу <label> атрибут for.
4. В атрибут for записываем такое же значение, что и в атрибуте id у поля.
<label for="user-field-id">Имяпользователя</label>...много-многодругихтегов...<input id="user-field-id" type="text" name="username">Многострочное текстовое поле создаётся с помощью парного тега <textarea>. У него есть атрибуты name и id, которые аналогичны атрибутам текстового поля.
Атрибут rows принимает целочисленное значение и задаёт высоту многострочного поля в строках. Атрибут cols задаёт ширину поля в символах. В качестве ширины символа берётся некоторая «усреднённая ширина».
Атрибут value у многострочного поля отсутствует, а значение по умолчанию задаётся по-другому. Текст, расположенный между открывающим и закрывающим тегом <textarea>и является значением по умолчанию. Вот так:
<textarea>Значение по умолчанию</textarea>Поле-галочка — это тег <input> с типом checkbox.
Галочка работает по принципу «либо да, либо нет». Если галочка стоит, то браузер посылает переменную с именем поля на сервер, если галочки нет, то не посылается ничего. Таким образом, атрибут value не является обязательным.
Чтобы галочка стояла по умолчанию, нужно добавить к тегу атрибут checked. Вот так:
<input type="checkbox" checked>Поле-переключатель — это тег <input> с типом radio.
Обычно переключатели размещают группами по несколько штук. Причём у переключателей из одной группы должно быть одинаковое имя и разные значения, которые задаются c помощью value.
Таким образом, атрибут value является для переключателей обязательным. Браузер отправляет на сервер значение value выбранного переключателя.
Раскрывающийся список так же, как и переключатель, позволяет выбрать один вариант ответа из нескольких.
Раскрывающийся список создаётся с помощью парного тега <select>, у которого есть знакомые атрибуты name и id.
Варианты ответов задаются с помощью парных тегов <option>, которые должны располагаться внутри тега <select>. Например:
<select name="theme"><option value="light">Светлаятема</option><option value="dark">Тёмнаятема</option>...</select>В атрибуте value тега <option> задаётся значение варианта ответа, а внутри этого тега располагается подпись варианта ответа.
Если при отправке формы у выбранного варианта задан value, то на сервер отправится значение этого атрибута. В противном случае будет отправлен текст подписи.
«Мультиселект»
Раскрывающийся список можно превратить в так называемый «мультиселект», то есть список, в котором можно выбрать не один, а несколько вариантов.
Чтобы сделать это, нужно добавить к тегу <select> атрибут multiple
Чтобы отметить как выбранные по умолчанию одно или несколько значений, нужно к соответствующим тегам <option> добавить атрибут selected.
При отправке данных мультиселекта на сервер с PHP после имени в значении атрибута nameставятся символы квадратных скобок []. Например, <select name="days[]">. Это необязательное требование для имени мультиселекта, а нужно только для корректной обработки данных в PHP.
Поле для загрузки файлов
Поле для загрузки файлов — это тег <input> с типом file. Для этого поля обязательным атрибутом является имя.
Чтобы поле заработало и браузер смог передать выбранный файл на сервер, необходимо добавить форме атрибут enctype со значением multipart/form-data. Не полю, а форме.
Скрытое поле
И ещё одно невидимое и очень полезное поле. Это скрытое поле. Его используют, когда в форме нужно отправить какие-то дополнительные служебные данные, которые не вводятся пользователем.
Например, это могут быть реквизиты заказа или номер пользователя в форме оплаты.
Скрытое поле — это тег <input> с типом hidden.
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
Введение в CSS
В CSS существует огромное количество свойств. Их можно разбить на следующие группы:
· оформление текста;
· работа с размерами и отступами;
· позиционирование элементов;
· создание сеток;
· декоративные: цвета, фон, тени;
· другие.
Когда для одного и того же элемента есть несколько CSS-правил с одинаковыми свойствами, браузер использует понятия приоритетов и специфичности, чтобы выбрать значение свойства из нескольких возможных. Упрощённо, можно сказать что:
1. CSS-правила в значении атрибута style самые приоритетные,
2. за ними идёт селектор с id,
3. затем селектор с классом,
4. затем селектор с именем тега.
Если селекторы однотипные, как в нашем случае, то тогда более приоритетным является CSS-правило, которое расположено ниже в коде.
Другой важный механизм CSS — это наследование. Он заключается в том, что часть стилей может передаваться от родительского элемента к дочерним (вложенным в него).
Например, все элементы внутри тега body являются дочерними по отношению к нему. Если для body в стилях задать цвет текста красным, то цвет всех остальных элементов тоже станет красным.
Ещё пример: тег ul является родительским по отношению к вложенным в него тегам li. Если задать для ul шрифт курсивом, то и внутри всех li шрифт станет курсивным.
Контекстные селекторы используются для вложенных друг в друга элементов, а соседние — для расположенных рядом.
Например, теги <li> в списке являются соседними по отношению друг к другу и вложенными в тег <ul>.
Соседние селекторы записываются с помощью знака +, например, селектор1 + селектор2. Стили применятся к элементу, подходящему под селектор2, только если сразу перед ним расположен элемент, подходящий под селектор1.
Пример. Есть два элемента списка:
<li class="hit"></li><li class="miss"></li>Селектор .hit + .miss применит стили к элементу с классом miss, так как перед ним есть элемент с классом hit.
Контекстные селекторы влияют на всех потомков, что не всегда удобно. Иногда необходимо задать стили только для дочерних элементов. Особенно это полезно при работе с многоуровневыми списками.
Для этого существует дочерний селектор, в котором используется символ >. Например: ul > li или ul > li > span.
Псевдоклассы
Псевдокласс добавляется к селектору c помощью символа :, вот так селектор:псевдокласс. Например:
a:visited { ... }li:last-child { ... }.alert:hover { ... }Псевдокласс first-child позволяет выбрать первый дочерний элемент родителя, а last-child — последний дочерний элемент.
С помощью псевдокласса nth-child можно выбирать теги по порядковому номеру, не используя классы. Синтаксис псевдокласса: селектор:nth-child(выражение). Выражением может быть число или формула. Например:
1. li:nth-child(2) { ... }2. li:nth-child(4) { ... }3. li:nth-child(2n) { ... }Первый селектор выберет второй элемент списка, второй селектор — четвёртый элемент списка, третий селектор — все чётные элементы.
Сначала познакомимся с псевдоклассом :hover.
Этот псевдокласс позволяет выбрать элемент, когда на него наведён курсор мыши и кнопка мыши не нажата. Примеры:
1. a:hover { ... }2. tr:hover { ... }3 .menu-item:hover { ... }селектор1:hover селектор2.
Это означает, что при наведении на селектор1 мы изменяем свойства селектор2