Знакомство с CSS. Украшаем HTML-код презентация

Содержание

Слайд 2

Как CSS помогает HTML выглядеть круто
Что такое свойства и селекторы
Где располагается CSS-код
Украшаем

дневник Белки и Стрелки

Тема 3
Знакомство с CSS
Украшаем HTML-код

Слайд 3

Игра!
Learning Apps

Слайд 4

Практика Скоростное исправление ошибок

Откройте код по ссылке, скопируйте в Brackets
https://vk.cc/8VUWOD https://clck.ru/HxTLL (альтернативная ссылка)

1

У вас

есть 10 минут на исправление ошибок

2

Сравните результат с образцом и результатами соседа

3

Слайд 5

просто.html

Привет!
Я - простая веб-страница на HTML.
Все элементы расположены друг за другом по

прямой, у них нет никаких внешних отличий.

Привет!


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



Слайд 6

Снова привет!

Я - уже не такая простая страница.
У моих элементов есть расположение, фоновый

цвет и много других свойств.

© 2019 Котик & Co

Это достигнуто за счёт применения языка CSS

html+css.html

Слайд 7

CSS — Cascading Style Sheets или каскадный язык стилей.
{•} отвечает за внешний вид

тегов
{•} язык стилей, а не разметки — содержит в себе только понятия касательно стиля тегов
{•} может задать стиль для каждого элемента на странице с помощью классов и id
{•} описание стилей заключает внутри {фигурных скобок}

Узнаём новое Что такое CSS

Слайд 8

Практика Дневник Белки и Стрелки

В Brackets откройте HTML-файл дневника Белки и Стрелки

Слайд 9


Практика Внутренние стили

В тег h1 добавьте следующий

атрибут:

Слайд 10


Практика Внутренние стили

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

и изменившийся вид тега h1?

Слайд 11


Практика Глобальные стили

Внутри тега head создайте следующий тег:

Слайд 12


Практика Глобальные стили

Как связан записанный код и изменившийся

вид тега p?

Слайд 13

p {
color: green
}

Привет!


Это Белка.


Я в ракете.


Привет!
Это Белка.
Я в ракете.

CSS

HTML

Браузер

Узнаём новое Как работают селекторы

Слайд 14

p {
color: green;
}
.blue {
color: blue;
}

Привет!


Это Белка.


Я в ракете.


Привет!
Это Белка.
Я

в ракете.

CSS

HTML

Браузер

Узнаём новое Класс

Слайд 15

Практика Добавляем классы

Добавьте первому параграфу класс first и дополните CSS-код

.first { color: navy; font-weight:

bold; border-left: 5px solid beige;
}

...

Слайд 16

p {
color: green;
}
.blue {
color: blue;
}
#red {
color: red;
}

Привет!


Это Белка.


Я

в ракете.


Привет!
Это Белка.
Я в ракете.

CSS

HTML

Браузер

Узнаём новое Классы и ID

Слайд 17

Практика Закрепляем знакомство с CSS

Курс Основы CSS, Задания 1-2
Знакомство с CSS https://htmlacademy.ru/courses/307

Слайд 18

Практика Подключаем CSS

В Brackets создайте файл style.css и сохраните его в папке css

внутри вашего проекта

1

Вырежьте CSS-код из страницы HTML и перенесите его в файл CSS. Удалите тег