Испытание: форма регистрации [11/18] проверка 4 страница

<!-- добавьте поле сюда->

Тег <p>

</label>

</form>

</body>

</html>

Группа переключателей [13/18]

Теперь добавим ещё один вариант ответа в наш переключатель. Для этого нужно добавить ещё один <input> с таким же именем, но другим значением value.

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

Чтобы сделать какой-либо вариант в переключателе выбранным по умолчанию, нужно добавить к соответствующему тегу <input> атрибут checked, как у поля-галочки.

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

form/form13.html

<html>

<head>

<title>Группа переключателей</title>

<style>

input[type="submit"] {

display: block;

margin-top: 10px;

}

</style>

</head>

<body>

<p>В тестах часто встречаются задания типа «выберите один из предложенных вариантов».</p>

<p><i>Какой тег обозначает «абзац»?</i></p>

<label>

Тег <p>

</label>

<br>

<label>

<!-- добавьте второй переключатель сюда->

Тег <b>

</label>

</form>

</body>

</html>

Раскрывающийся список или «селект» [14/18]

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

Раскрывающийся список создаётся с помощью парного тега <select>, у которого есть знакомые атрибуты name и id.

Варианты ответов задаются с помощью парных тегов <option>, которые должны располагаться внутри тега <select>. Например:

<option value="light">Светлая тема</option>

<option value="dark">Тёмная тема</option>

...

</select>

В атрибуте value тега <option> задаётся значение варианта ответа, а внутри этого тега располагается подпись варианта ответа.

Если при отправке формы у выбранного варианта задан value, то на сервер отправится значение этого атрибута. В противном случае будет отправлен текст подписи.

«Мультиселект» [15/18]

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

Чтобы сделать это, нужно добавить к тегу <select> атрибут multiple.

Выбрать несколько вариантов можно, щёлкая по ним с зажатой клавишей Ctrl на Windows или Command на OS X.

Высоту мультиселекта можно изменять с помощью атрибута size тега <select>.

Чтобы отметить как выбранные по умолчанию одно или несколько значений, нужно к соответствующим тегам <option> добавить атрибут selected.

Поле для загрузки файлов [16/18]

Поле для загрузки файлов — это тег <input> с типом file. Для этого поля обязательным атрибутом является имя.

Чтобы поле заработало и браузер смог передать выбранный файл на сервер, необходимо добавить форме атрибут enctype со значением multipart/form-data. Не полю, а форме.

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

Скрытое поле [17/18]

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

Например, это могут быть реквизиты заказа или номер пользователя в форме оплаты.

Скрытое поле — это тег <input> с типом hidden.

Работа с CSS

Введение в CSS [1/15]

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

Напомним, что CSS расшифровывается как «каскадные таблицы стилей». Этот язык отвечает за внешний вид HTML-страницы. Синтаксис языка достаточно прост: он состоит из селекторов и свойств.

С помощью селекторов можно сказать браузеру какие именно элементы мы хотим оформить. Свойства описывают как именно мы хотим оформить эти элементы. То есть селекторы — это снайперский прицел, а свойства — это кисть, рубанок, скальпель и перфоратор.

css / css 1. html

CSS-правила [2/15]

Весь CSS-код состоит из повторяющихся блоков следующего вида:

селектор {

свойство1: значение;

свойство2: значение;

}

Такой блок называется «CSS-правило». Каждое CSS-правило содержит хотя бы один селектор и свойство.

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

p {

/* стили для абзацев */

}

h1 {

/* стили для заголовков */

}

css / css 2. html

Продвинутые селекторы [3/15]

К более сложным селекторам можно отнести селекторы с использованием классов и псевдоклассов.

Класс позволяет объединять разные элементы в смысловые группы и применять к ним одинаковое оформление. Например, можно создать класс «элементы с ошибкой» и задать ему красный цвет текста. Затем можно добавлять этот класс к любому HTML-тегу: абзацу, заголовку, элементу списка и так далее.

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

В примере у первого абзаца задан класс help, у второго абзаца заданы классы help и error.

Селектор с использованием класса задаётся так:.имя_класса. Например:

.help {... }.error {... }

Более подробно об использовании селекторов, рассказано в курсе «Селекторы». Также вы можете посмотреть демонстрацию об использовании псевдокласса:nth-child.

css / css 3. html

Свойства для оформления текста [4/15]

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

· оформление текста;

· работа с размерами и отступами;

· позиционирование элементов;

· создание сеток;

· декоративные: цвета, фон, тени;

· другие.

В этом задании мы познакомимся с несколькими свойствами для оформления текста, а более подробно эти свойства рассмотрим в курсе «Оформление текста с помощью CSS».

css / css 4. html

Свойства для задания размеров и отступов [5/15]

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

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

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

css / css 5. html

Позиционирование элементов [6/15]

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

Главным свойством для работы с позиционированием является position, которое переключает режимы позиционирования элемента. Ещё четыре свойства: top, right, bottom, left, управляют расположением элемента. И последнее свойство z-index управляет порядком слоёв.

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

Более подробно теория и практика позиционирования элементов будет рассмотрена в курсе «Позиционирование».

css / css 6. html

Создание сетки страницы [7/15]

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

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

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

css / css 7. html

Декоративные свойства [8/15]

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

Работа с декоративными свойствами будет подробно рассмотрена в серии курсов и демонстраций, например, в курсах «Фоны» и «Оформление текста с помощью CSS».

Пример создания красивых полей и кнопок вы можете увидеть в демонстрации Progressive Enhancement на примере формы входа.

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

css / css 8. html

Каскадность [9/15]

Напомним, что CSS расшифровывается как «каскадные таблицы стилей». Почему именно каскадные?

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

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

Название «каскадные» появилось из-за описанного механизма комбинирования стилей из разных CSS-правил.

В этом задании мы скомбинируем стили для одного из абзацев.

css / css 9. html

Каскадность. Переопределение стилей [10/15]

В предыдущем примере мы с помощью класса добавили ко второму абзацу дополнительные стили. CSS-правило для абзацев и CSS-правило для класса содержали по одному свойству. Когда мы добавили класс ко второму абзацу, в его наборе стилей стало два свойства. Вот так:

p {

padding: 10px;

}

.truth {

background-color: #dff0d8;

}

стили второго абзаца {

padding: 10px;

background-color: #dff0d8;

}

Свойства в CSS-правилах были разными. А что произойдёт, если в разных CSS-правилах будут совпадающие свойства? Сейчас и проверим.

css / css 10. html

Каскадность и приоритеты [11/15]

Когда в предыдущем задании мы задали цвет фона для правила с классом truth, одно из свойств второго абзаца переопределилось:

p { padding: 10px; background-color: #dff0d8;} +.truth { background-color: #aaddff;} = стили второго абзаца { padding: 10px; background-color: #dff0d8; background-color: #aaddff;}

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

1. CSS-правила в значении атрибута style самые приоритетные,

2. за ними идёт селектор с id,

3. затем селектор с классом,

4. затем селектор с именем тега.

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

css / css 11. html

Каскадность. Коктейль из классов [12/15]

Похоже, вы решили головоломку! Поздравляем!

Для решения нужно было лишь переместить CSS-правило для класса green ниже CSS-правила для класса blue. Когда к одному элементу применяются несколько CSS-правил, то приоритетность этих правил определяется по их селектору. Если селекторы однотипные, как в нашем случае, то тогда более приоритетным является CSS-правило, которое расположено ниже в коде.

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

Назначение нескольких классов одному элементу — очень гибкий и мощный приём в арсенале веб-разработчика. Он позволяет упрощать и значительно сокращать CSS-код.

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

css / css 12. html

Наследование [13/15]

Другой важный механизм CSS — это наследование. Он заключается в том, что часть стилей может передаваться от родительского элемента к дочерним (вложенным в него).

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

Ещё пример: тег ul является родительским по отношению к вложенным в него тегам li. Если задать для ul шрифт курсивом, то и внутри всех li шрифт станет курсивным.

css / css 13. html

Испытание: макет-прототип [15/15]

В этом испытании вам нужно привести в порядок простой прототип макета. Код HTML-редактора заблокирован, поэтому вам придётся использовать только стили.

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

· ширина и внешние отступы,

· цвета фона и текста,

· начертание и толщина шрифта,

· построение сеток.

Подсказки:

· Использованные цвета: #ffffff и #333333.

· Для одного элемента нужно будет изменить размер шрифта, для этого используйте свойство font-size.

· Значения отступов, ширины блоков, а также неизвестных размеров шрифта кратны 10,

· Свойства для позиционирования position, top, left и другие не использовались.

Селекторы

Селекторы по классам [3/18]

Класс — это один из атрибутов тегов. Выглядит он вот так:

Этот атрибут особенный, так как в CSS существует возможность выбирать элементы по классу. Делается это с помощью такого селектора:. имя_класса. Например:

.first {

/* стили для класса first */

}

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

Отрабатываем селекторы по классам [4/18]

В этом курсе ваша задача — раскрашивать мишени в определённые цвета, применяя подходящие селекторы.

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

1. Мишень закрыта — background-color: white;

2. Выстрел мимо — background-color: red;

3. Ошибка техники (попадание есть, но мишень не закрылась) — background-color: yellow;

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

css / css 4-16. html

Контекстные селекторы [5/18]

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

p strong {... }

ul.hit {... }

.footer.menu a {... }

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

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

Читать их проще всего справа налево:

/* выбрать все теги strong внутри тегов p */

p strong {... }

/* выбрать все элементы с классом.hit внутри тегов ul */

ul.hit {... }

/* выбрать все ссылки внутри элементов с классом.menu,

которые лежат внутри элементов с классом.footer */

.footer.menu a {... }

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

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

css /css4-17.html

Соседние селекторы [6/18]

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

Например, теги <li> в списке являются соседними по отношению друг к другу и вложенными в тег <ul>.

Соседние селекторы записываются с помощью знака +, например, селектор1 + селектор2. Стили применятся к элементу, подходящему под селектор2, только если сразу перед ним расположен элемент, подходящий под селектор1.

Пример. Есть два элемента списка:

Селектор.hit +.miss применит стили к элементу с классом miss, так как перед ним есть элемент с классом hit.

Селектор.hit + li тоже применит стили к элементу с классом miss, а селектор.miss +.hit не сработает.

Соседние два элемента

<style>

.hit {

background-color: white;

}

.hit +.mis {

background-color: red;

}

Css/css4-18.html

Контекстные и соседние селекторы [7/18]

Селекторы в CSS можно очень гибко комбинировать. В частности, можно комбинировать контекстные и соседние селекторы.

Например, селектор.player-1.hit +.miss сработает для тега с классом miss, если сразу перед ним расположен тег с классом hit и оба тега расположены внутри тега с классом player-1.

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

css/css4-19.html

Потомки [7/19]

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

По отношению к <ul> <li> являются дочерними элементами и потомками, а <span> — потомки, но не дочерние элементы.

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

Для этого существует дочерний селектор, в котором используется символ >. Например: ul > li или ul > li > span.

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

css/ css4-20.html

Псевдоклассы

Псевдоклассы [9/18]

Псевдоклассы — это дополнения к обычным селекторам, которые делают их ещё точнее и мощнее. Обычный селектор — это снайперский прицел, а с псевдоклассом он становится прибором ночного видения.

Псевдокласс добавляется к селектору c помощью символа:, вот так селектор:псевдокласс. Например:

a:visited {... }

li:last-child {... }

.alert:hover {... }

Знакомство с псевдоклассами мы начнём с first-child и last-child.

Псевдокласс first-child позволяет выбрать первый дочерний элемент родителя, а last-child— последний дочерний элемент. Например:

li:last-child {... }

Этот селектор выберет последний элемент списка.

css/ css4-21.html

Псевдокласс:nth-child [10/18]

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

Вспомним задание 4. В нём каждому тегу <li> был задан собственный класс. Используя классы, мы могли выбрать любой из пяти тегов. Если бы тегов было десять, то пришлось бы использовать десять разных классов.

С помощью псевдокласса nth-child можно выбирать теги по порядковому номеру, не используя классы. Синтаксис псевдокласса: селектор:nth-child(выражение). Выражением может быть число или формула. Например:

1. li:nth-child(2) {... }2. li:nth-child(4) {... }3. li:nth-child(2n) {... }

Первый селектор выберет второй элемент списка, второй селектор — четвёртый элемент списка, третий селектор — все чётные элементы.

Подробнее об:nth-child и синтаксисе его выражений рассказано в демо-курсе Использование псевдокласса:nth-child.

css /css4-22.html

Курс «Селекторы, часть 1»

:nth-child и контекстные селекторы [11/18]

Селекторы с псевдоклассами хорошо сочетаются с контекстными селекторами.

Например, селектор:

.shooter-2 li:nth-child(3) {... }

Выберет третий тег <li> внутри блока с классом shooter-2.

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

css / css 4-23. html

Псевдокласс:hover [12/18]

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

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

1. a:hover {... }

2. tr:hover {... }

3.menu-item:hover {... }

Первый селектор выбирает ссылку, второй строку таблицы, третий элемент с классом menu-item, но только в том случае, если на них наведён курсор мыши.

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

css/css4-24.html

<!DOCTYPE html>

<html>

<head>

<title>Псевдокласс:hover</title>

<style>

table {

background: rgba(255, 255, 255, 0.95);

}

tr:hover {

background-color: #fcf8e3;

}

strong:hover {

color: #0088cc;

}

</style>

</head>

<body>

<h1>Личный зачёт кубка мира</h1>

<table>

<tr>

<th>Спортсмен</th>

</tr>

<tr>

<td>Мартен Фуркад <em>Франция</em></td>

</tr>

<tr>

<td>Эмиль-Хегле Свендсен <em>Норвегия</em></td>

</tr>

<tr>

<td>Алексис Бёф <em>Франция</em></td>

</tr>

<tr>

<td>Арнд Пайффер <em>Германия</em></td>

</tr>

<tr>

<td>Евгений Устюгов <em>Россия</em></td>

</tr>

</table>

</div>

</body>

</html>

Динамические эффекты с помощью:hover [13/18]

Интересовались ли вы, как с помощью CSS создаются выпадающие меню?

Львиная доля динамических эффектов, создаваемых с помощью CSS, опираются на несколько псевдоклассов, главный из которых, конечно же,:hover. Весь секрет заключается в сочетании контекстных селекторов и псевдоклассов. Посмотрите на пример:

li.top ul.submenu {

display: none;

}

li.top:hover ul.submenu {

display: block;

}

Первое правило прячет список-подменю. Второе правило гласит: «если на верхний пункт меню, в котором находится подменю, наведут курсор, то надо показать подменю». Вот так всё просто.

Общий принцип такой: родительский элемент реагирует на наведение мыши и изменяет свойства элементов-потомков. То есть всё работает на контекстных селекторах видаселектор1:hover селектор2.

Css/css4-25.html

<!DOCTYPE html>

<html>

<head>

<title>Псевдокласс:hover</title>

<style>

table {

background: rgba(255, 255, 255, 0.95);

}

tr:hover {

background-color: #fcf8e3;

}

strong:hover {

color: #0088cc;

}

</style>

</head>

<body>

<h1>Личный зачёт кубка мира</h1>

<table>

<tr>

<th>Спортсмен</th>

</tr>

<tr>

<td>Мартен Фуркад <em>Франция</em></td>

</tr>

<tr>

<td>Эмиль-Хегле Свендсен <em>Норвегия</em></td>

</tr>

<tr>

<td>Алексис Бёф <em>Франция</em></td>