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

Содержание

Слайд 2

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

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

CSS-код
Украшаем дневник Белки и Стрелки

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

Слайд 3

Игра! Learning Apps

Игра!
Learning Apps

Слайд 4

Практика Скоростное исправление ошибок Откройте код по ссылке, скопируйте в

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

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

ссылка)

1

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

2

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

3

Слайд 5

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

просто.html

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

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

Привет!


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



Слайд 6

Снова привет! Я - уже не такая простая страница. У

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

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

расположение, фоновый цвет и много других свойств.

© 2019 Котик & Co

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

html+css.html

Слайд 7

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

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

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

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

Слайд 8

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

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

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

Стрелки
Слайд 9

Практика Внутренние стили В тег h1 добавьте следующий атрибут:


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

В тег h1

добавьте следующий атрибут:
Слайд 10

Практика Внутренние стили Определите, как связан записанный код и изменившийся вид тега h1?


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

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

записанный код и изменившийся вид тега h1?
Слайд 11

p { color: purple; line-height: 1.25; margin-bottom: 1em; } Практика


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

Внутри тега head создайте

следующий тег:
Слайд 12

p { color: purple; line-height: 1.25; margin-bottom: 1em; } Практика


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

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

и изменившийся вид тега p?
Слайд 13

p { color: green } Привет! Это Белка. Я в

p {
color: green
}

Привет!


Это Белка.


Я в ракете.


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

CSS

HTML

Браузер

Узнаём новое Как

работают селекторы
Слайд 14

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

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

Привет!


Это Белка.


Я в

ракете.


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

CSS

HTML

Браузер

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

Слайд 15

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

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

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

.first { color:

navy; font-weight: bold; border-left: 5px solid beige;
}

...

Слайд 16

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

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

Привет!


Это

Белка.


Я в ракете.


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

CSS

HTML

Браузер

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

Слайд 17

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

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

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

Слайд 18

Практика Подключаем CSS В Brackets создайте файл style.css и сохраните

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

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

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

1

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