ГЛАВА 1 – ТЕГИ (часть 1)


<input>
– Элемент формы, который позволяет обеспечить взаимодействие с пользователем

Он является строчным, если вы хотите чтобы каждый элемент был на отдельной строке, оберните его в тег <p>

У <input> обязательный атрибут – type
Он определяет тип элемента


•text – текстовое поле
•password – поле с паролем, вместо символов появляются – "*" (дополнительные атрибуты minlength и maxlength – указывают на минимальное и максимальное количество символов)
•email – то же самое, что и text, только на клавиатуре телефона сразу предлагаются символы "@" и "."
•submit – кнопка отправки формы
•reset – кнопка сброса формы


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

<p><input type="text" placeholder="Ваше имя"></p>
<p><input type="password" minlength="5"></p>


Пока мы только визуально оформляем сайт, кнопка отправки работать не будет❕

Функционал мы изучим позже

ГЛАВА 1 - ТЕГИ (часть 2)


Продолжаем изучать <input> и атрибуты

Атрибуты:

🔹radio – переключатель (с одним выбором)
Дополнительные атрибуты

🔹name (поскольку это одна группа, которая связана, то обязательно имя должно быть одинаковое)

🔹value - значение (когда пользователь отправит форму, вам придут результаты на сервер, и именно что вы впишите в этот атрибут, будет у вас выведено)

🔹checked (изначально ставит галочку, сразу выделен один пункт):

<p><input type="radio" name="gender" value="male" checked>Мужской</p>
<p><input type="radio" name="gender" value="female">Женский</p>

🔹checkbox – в этом случае, можно выбрать много вариантов, отмечаются галочкой
Такие же доп атрибуты как и у radio – name, value, checked

<p>Какие ваши любимые цвета?</p>

<p><input type="checkbox" name="color" value="green">Зеленый</p>
<p><input type="checkbox" name="color" value="red">Красный</p>
<p><input type="checkbox" name="color" value="blue">Синий</p>
<p><input type="checkbox" name="color" value="yellow">Желтый</p>

ГЛАВА 1 - ТЕГИ (часть 3)


Атрибуты:

•number – как и текст, только на клавиатуре открывается раскладка с цифрами

<p><input type="number"
placeholder="ваш заработок"><p>

•time – Определяет время в 24-часовом формате

<p><input type="time"></p>

•week - позволяет выбрать одну неделю

<p><input type="week"></p>

•month – позволяет выбрать один месяц в формате месяца и года

<p><input type="month"></p>

•date – позволяет определить год, месяц и день

<p>Дата рождения:</p>
<p><input type="date"></p>

•datetime – определяет и дату и время

<p><input type="datetime"></p>

•tel – как и number, только добавляет на клавиатуре знаки «+», «*», «#»


✳️ также есть дополнительный атрибут «required», делает поле обязательным для заполнения (если поле не заполнить, браузер об этом напомнит)


Практикуйтесь с формами

ГЛАВА 1 - ТЕГИ (часть 4)


Атрибуты:

•search – определяет текстовое поле для поиска (добавляет лупу)

<p><input type="search"></p>

•range – ползунок для ввода чисел в заданном диапазоне

Доп атрибуты:
•min – минимальное значение
•max – максимальное значение
•step – шаг изменения чисел

<p><input type="range" min="0" max="10" step="2"></p>

•color – генерирует палитру цветов, где пользователи могут выбрать любой цвет

<p><input type="color"></p>

•file – дает пользователю загрузить файлы, добавляя кнопку «Обзор»

<p><input type="file"></p>

ГЛАВА 1 - ТЕГИ

Тег <abbr> – аббревиатура

С помощью атрибута title – пишем расшифровку

❗️ Браузеры никак не выделяют текст внутри <abbr>, за исключением браузера Opera до 15 версии, которая выделяет текст пунктиром ❗️

Пример:

В <abbr title="Московский государственный университет">МГУ</abbr> ученик занял первое место во всемирной олимпиаде по биологии!

Если навести курсор на слово, то наш тег предоставит расшифровку 😎

ФИШКА #1

Цель:
Обращение к любому элементу с общим классом

HTML:

<div class="main">
<div class="block "></div>
… (еще 6 раз)
<div class="block "></div>
</div> // 8 блоков

CSS:

.main {
display: flex; // гибкость
flex-wrap: wrap; // перенос блоков на новую строку
justify-content: center; // расположение блоков по центру страницы
}

.block {
width: 300px; // ширина
height: 300px; // высота
background-color: blue; // синий фон
}

.block:nth-child(-n + 4) {
margin-bottom: 30px; // отступ снизу у первых четырех блоков
}

.block:not(:nth-child(4n)) {
margin-right: 30px; // отступ справа у всех кроме каждого 4-ого блока
}

Получилось так —>

#1.1

Если нам нужно обратиться к первому элементу, то нам нужно использовать псевдокласс – first-child

Перед псевдоклассом ставим двоеточие ❗️❗️❗️

.block:first-child {
background-color: green; // зеленый фон
}

Есть и другой вариант:

.block:nth-child(1) {
background-color: green; // зеленый фон
}

Про nth-child в #1.3

#1.2

Чтобы обратиться к последнему, нужно обратиться к псевдоклассу – last-child

.block:last-child {
background-color: green;
}

Или

Можно посчитать сколько у нас элементов с классом block (в нашем случае их 8) и обратиться через nth-child

.block:nth-child(8) {
background-color: green;
}

После nth-child обязательно ставим скобочки и значение внутри – (8)

Еще один способ будет в #1.7

#1.3

Обратиться к конкретному элементу можно через nth-child

В скобочках после псевдокласса ставим значение

Мы хотим изменить элемент под номером 6:

.block:nth-child(6) {
background-color: red: // красный фон
}

А если мы хотим изменить 2 элемент и 6
Тогда:

.block:nth-child(2) {
background-color: red: // красный фон
}

.block:nth-child(6) {
background-color: red: // красный фон
}

Пишем два раза, с разными значениями внутри nth-child

#1.4

Если нам нужны четные элементы (2,4,6…)

Тогда пишем внутри nth-child слово "even"

Или комбинацию 2n

.block:nth-child(2n) {
background-color: green;
}

Или

.block:nth-child(even) {
background-color: green;
}

Как вам удобнее, так и делайте

#1.5

Если нам нужны нечетные элементы (1,3,5…)

Тогда пишем внутри nth-child слово "odd"

Или комбинацию 2n + 1 (пробелы можно не ставить, но код будет нечитабельным)

.block:nth-child(2n + 1) {
background-color: green;
}

Мли

.block:nth-child(odd) {
background-color: green;
}

Как не путать even и odd ❓

В слове even – 4 буквы (четное число)
В слове odd – 3 буквы (нечетное число) и в

#1.6

Можно выделять подряд, начиная с первого, несколько элементов, допустим первые 4 (или другое количество)

Для этого надо написать:

.block:nth-child(-n + 4) {
background-color: purple; // фиолетовый фон
}

Вместо 4 можно написать, то количество элементов, которые нужно взять в охват, начиная с первого

#1.7

Можно выделять подряд, начиная с последнего, несколько элементов, допустим последние 3 (или другое количество)

Для этого надо написать:

.block:nth-last-child(-n + 3) {
background-color: grey; // серый фон
}

Вместо 3 можно написать другое количество

nth-last-child(); это тоже самое только что и nth-child, только с конца, например если написать:

.block:nth-last-child(1) {
background-color: orange; // оранжевый фон
} // закрасится последний блок в оранжевый

Тренируйтесь, пробуйте закрасить любой блок, который вы захотите, особенно попробуйте nth-last-child с разными значениями

и также формулы

(2n + 3) значит (3,5,7…) начиная с 3

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

Фишка #2.1

Цель: Анимированная полоска под контентом

HTML:

<p class="word">
Меню
</p>

CSS:

.word {
display: inline; // слово занимает не всю ширину
font-size: 30px; // размер шрифта
position: relative; // позиция относительная
cursor: pointer; // активный курсор
}

.word::before {
content: ' '; // контент
position: absolute; // абсолютная позиция, зависит от relative
height: 3px; // высота полоски
bottom: 0; // полоска будет снизу
left: 0; // анимация начнется слева
width: 0; // ширина 0, элемент будет только видно при наведении
background-color: #000; // цвет полоски (черный)
transition: width 0.3s ease-in-out; // плавная анимации появление полоски (ширины), можно вместо 0.3s задать другую задержку в секундах
}

.word:hover::before {
width: 100%; // при наведении полоска появляется
}

Если хотите анимацию справа:
вместо left: 0; поставьте right: 0;

#2.2

Если хотите сделать анимацию из центра, то:

+ Тень полоски

.word {
оставляем как и в #2.1
}

.word::before {
content: ' ';
position: absolute;
height: 3px;
bottom: 0;
left: 0;
right: 0; // добавляем этот параметр
margin: 0 auto; // сделает анимацию из центра
width: 0;
background-color: #000;
box-shadow: 2px 2px 5px #000; // сделает полоске тень
transition: width 0.3s ease-in-out;
}

.word:hover::before {
оставляем как и в #2.1
}

Фишка #3

Зона клика карточки

Можем нажать на любое место в карточке, а не только на ссылку или кнопку

HTML:

<div>
<img class="img" src="img/cat.jpg" alt="cat">
<button class="btn">
Подробнее
</button>
</div>

CSS:

.card {
background-color: #333;
border: 1px solid #000;
border-radius: 15px;
overflow: hidden;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center; // кнопка по центру карточки
justify-content: space-between; // расстояние между картинкой и кнопкой
width: 200px;
height: 300px;
position: relative;
margin: 0 auto; // по центру страницы (чисто стилизация)
}

.img {
width: 100%;
}

.btn {
cursor: pointer; // активный курсор
background-color: purple;
border: none;
padding: 15px;
border-radius: 20px;
font-weight: 700;
color: white; // цвет шрифта белый
max-width: 200px;
}

.btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%; // растянуть по ширине
height: 100%; // растянуть по высоте
}

Фишка #4.2

в input "поиск" убираем крестик

HTML:

<input class="search" type="search" placeholder="Поиск">

CSS:

.search {
padding: 10px;
width: 300px;
border-radius: 20px;
border: 3px solid #000;
}

.search::-webkit-search-cancel-button {
appearance: none; // Убираем крестик
}

Теперь можем добавить свой крестик или не добавлять вовсе

Фишка #4.3

У любого input меняем placeholder (подсказка при пустом input)

HTML:

<input class="search" type="search" placeholder="Поиск">

CSS:

.search {
padding: 10px;
width: 300px;
border-radius: 20px;
border: 3px solid #000;
}

.search::-webkit-input-placeholder {
color: blue;
font-weight: 700;
}

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