changeColors + autoBordersWithCats

changeColors + autoBordersWithCats

Наши цели

Сегодня на уроке мы будем тренироваться работать с псевдо-классом «hover» и познакомимся с новым HTML-элементом «div»

Начинаем работу с HTML

Multiple Select

Какие заголовки существуют в HTML?

PS: в данном вопросе больше одного ответа :)

• h1

• h100

• h2

• h7

Уже умеешь

Попробуй создать тег заголовка и напиши туда название сайта.

Например можно указать «Auto borders»

Multiple Choice

При помощи какого тега мы можем создать картинку на нашем сайте?

• h1

• img

• p

• ul

Multiple Choice

Какой атрибут мы должны указать тегу «img», чтобы фотография появилась на сайте?

• src

• class

• p

• ul

Уже умеешь

Создай две фотографии.

Уже умеешь

Создай какой-нибудь заголовок и укажи туда текст, который говорит пользователю навести на картинку.

Пример: «Наведи мышкой на картинку, чтобы она ожила»

Начинается магия CSS

Попробуй

Обратись к элементу «img»

Чтобы обратись к элементу, мы используем:

название элемента {

}

Пример: p{

}

Попробуй

После этого укажи CSS-свойство «height» с каким-то значением в пикселях

Пример: height: 20px;

Чтобы задать какое-то свойство:

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

Попробуй

Внутри это же элемента указываем свойство «transition» с каким-то значением.

Пример: transition: 2s

Что-то новенькое

Теперь мы познакомимся с псевдо-классом «hover».

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

название элемента:hover{

Внутри можно написать CSS-свойства, которые будут применяться к элементу при наведении на него мышкой

{

Что-то новенькое

Добавь псевдо-класс «hover» элементу «img»

Что-то новенькое

В скобочках предыдущей конструкции укажем CSS-свойство «border». Данное свойство задает рамку нашему элементу.

Пример: border: 2px solid black;

2px - размер рамки

solid - тип рамки

black - цвет рамки

Что-то новенькое

Теперь познакомимся с CSS-свойством «padding». Оно создает внутренние отступы у элемента.

Пример использования: padding: 20px;

Добавь это свойство в скобочки у конструкции «img:hover»

Что-то новенькое

Теперь добавим CSS-свойство «background-color» в скобочки у конструкции «img:hover».

Пример использования: background-color: red;

Что-то новенькое

Добавь CSS-свойство «height» в скобочки у конструкции «img:hover».

Пример использования: height: 400px;

Знакомство с магическим элементом

Время структуры

Уже умею

Создай заголовок первого уровня и укажи туда вот такой текст: «Скажи привет блокам!»

Уже умею

Создай тег «p» и укажи туда вот такой текст «Наведи на блоки мышкой и посмотри, что произойдет! :)»

PS: Если хочешь ты можем указать любой другой текст

Что-то новенькое

Еще мы познакомимся с новым элементом «div».

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

Что-то новенькое

А еще сегодня мы познакомимся с новым атрибутом «class». Он помогает нам задать элементу еще одно имя, которое мы можем использовать для стилизации этого элемента в CSS.

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

<имя тега class="сюда указываем имя"></имя тега>

Что-то новенькое

После элемента «p» создай новый элемент «div» и укажи у него класс «lineBlock»

Что-то новенькое

Познакомимся с еще одним новым тегом «hr».

Он поможет нам создать разделительную линию на нашем сайте.

Добавь тег «hr» после div-элемента.

Уже научились

Создай тег «div» с классом «squareBlock».

Начинается магия

Что-то новенькое

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

Пример:

.название класса{

}

Уже научились

Обратись к классу «lineBlock» и укажи у него CSS-свойства: «width» и «height».

Сделай так, чтобы значение у элемента «height» было меньше чем у элемента «width».

Уже научились

Укажи у класса «lineBlock» CSS-свойство «background-color»

Что-то новенькое

Мы можем задавать разную рамку со всех сторон. Для этого нам нужно воспользоваться CSS-свойствами:

border-top, border-bottom, border-left, border-right

Пример:

border-top: cyan dotted 2px;

Уже научились

Добавь в класс «lineBlock» CSS-свойства: «border-top» и «border-bottom»

Уже научились

Обратись к классу «squareBlock» и укажи у него CSS-свойства: «width» и «height».

Сделай так, чтобы значения у этих свойств были одинаковыми.

Что-то новенькое

Познакомимся с еще одним новым тегом «margin».

Он поможет нам создать внешний отступ от других элементов.

Попробуй указать свойство «margin-top» у класса «squareBlock».

Пример использования тега «margin-top»:

margin-top: 20px;

Уже научились

Попробуй указать свойство «background-color» у класса «squareBlock».

Что-то новенькое

Мы можем указывать псевдо-классы не только у простых элементов, но и у классов.

Пример:

.имя класса:hover{

}

Что-то новенькое

Укажи классу «lineBlock» псевдо-класс «hover». Внутри скобок этого элемента укажи CSS-свойство «background-color».

Что-то новенькое

Укажи классу «squareBlock» псевдо-класс «hover». Внутри скобок этого элемента укажи CSS-свойство «background-color».

Что-то новенькое

Обратись к элементам: «p» и «h1»

Укажи у них CSS-свойство «color»