1.05M

Category:

internet

Урок 15

1.

Урок 15. ОСНОВЫ CSS.
ВСТРОЕННЫЕ ТАБЛИЦЫ
СТИЛЕЙ

Как пройдет
наше занятие
Познакомимся с CSS и встроенными таблицами
стилей
1
Научимся меня цвет и размер элементов
2 HTML с помощью CSS
Разберем, как можно редактировать
3 расположение текста и контейнеров
также познакомимся с изменением стиля
4 Ашрифта
и страницы – поменяем задний фон на
картинку
2

3.

ОСНОВЫ CSS
3

4.

ОСНОВЫ CSS
CSS (Cascading Style
Sheets) – каскадные
таблицы стилей – набор
правил или свойств,
которые описывают, как тот
или иной элемент или
группа элементов будут
отображаться на экране
монитора в браузере.
4

5.

Возможности CSS
Осуществление выбора элемента,
к которому будет применен стиль
Создание блоков и изменение их
стиля
Управление шрифтом на странице
Создание стилей для текста
Управление фоном страницы
Управление списками
5

6.

Подключение CSS
Включение в тег
Инлайновые
таблицы стилей
Описание стиля в
заголовке
документа
Встроенные
таблицы стилей
Подключение
стилевого файла
Внешние
таблицы стилей
Нас интересуют инлайновые и встроенные
таблицы стилей
6

7.

Подключение CSS
Инлайновые таблицы стилей:
Чтобы их подключить необходимо включить таблицы стилей
в тег HTML-файла:
Это выполняется с помощью атрибута style.
Применяется только к конкретному элементу.
7

8.

Подключение CSS
Встроенные таблицы стилей:
Когда вы встраиваете таблицы стилей, то необходимо
работать в HTML-файле:
Секция style размещается
внутри тега <head> и определяет
стили для элементов на
странице.
8

9.

ОСНОВЫ CSS
Самостоятельная работа
1. Создайте новый текстовый файл и сохраните его
как 01html.html.
2. Напишите базовую структуру HTML-документа.
3. Добавьте информацию на сайт как на картинке
(информация может быть о вас, картинку можно
использовать любую)
9

10.

ОСНОВЫ CSS
Результат работы
10

11.

ОСНОВЫ CSS
Цвет любого текста можно задать с помощью
атрибута color:
11

12.

ОСНОВЫ CSS
Цвет можно задать:
1. С помощью буквенночисловым кодом, для
этого используй
символ #:
2. С помощью палитры
RGB
3. помощью названий
цветов
12

13.

ОСНОВЫ CSS
Самостоятельная работа
1. Измените цвет заголовка h1.
13

14.

ОСНОВЫ CSS
Цвет фона можно задать с помощью
атрибута background-color:
Можно применять несколько
стилей к одному тегу через ;
14

15.

ОСНОВЫ CSS
Самостоятельная работа
1. Измените цвет фона и цвет заголовка h2.
15

16.

ПЕРЕРЫВ
16

17.

ОСНОВЫ CSS
Шрифт можно задать с помощью
атрибута font-family: sans-serif
Шрифт — это набор букв и символов,
написанных в определённом стиле.
с засечками serif:
текст
без засечек sans-serif:
текст
Примеры:
font-family: Georgia, serif;
font-family: "Gill Sans", sans-serif;
font-family: cursive;
17

18.

ОСНОВЫ CSS
Самостоятельная работа
1. Измените шрифт заголовка h1 и h2, и шрифт абзаца.
18

19.

ОСНОВЫ CSS
Размер текста: высота строки в пикселях — font-size
19

20.

ОСНОВЫ CSS
Самостоятельная работа
1. Измените размер заголовка h2, абзаца и подвала.
20

21.

ОСНОВЫ CSS
Выравнивание текста — text-align
center — выравнивание по
центру страницы;
right — по правому краю;
left — по левому краю,
значение по умолчанию.
21

22.

ОСНОВЫ CSS
Самостоятельная работа
1. Измените выравнивание заголовка h1,h2 и подвала.
22

23.

ОСНОВЫ CSS
Расположение нескольких контейнеров на одной строке
23

24.

ОСНОВЫ CSS
Расположение нескольких контейнеров на одной строке
Свойство overflow управляет
отображением содержания блочного
элемента, если оно целиком не
помещается и выходит за область
заданных размеров
Значение hidden отображается только
область внутри элемента, остальное
будет скрыто
24

25.

ОСНОВЫ CSS
Расположение нескольких контейнеров на одной строке
Свойство float определяет, по какой
стороне будет выравниваться элемент,
при этом остальные элементы будут
обтекать его с других сторон.
25

26.

ОСНОВЫ CSS
Расположение нескольких контейнеров на одной строке
26

27.

ОСНОВЫ CSS
Самостоятельная работа
1. Создайте контейнеры из заголовка и картинки и
объедините в одну строку.
27

28.

ОСНОВЫ CSS
Цвет фона документа определяется следующим
свойством background-color
28

29.

ОСНОВЫ CSS
Самостоятельная работа
1. Измените фон веб-страницы и определите её цвет.
29

30.

ОСНОВЫ CSS
Изображение фона документа определяется
следующими свойствами background-image,
background-size, background-repeat
background-image – вставляет изображение
background-size – растягивает изображение на весь экран
background-repeat – запрет на повтор изображения
30

31.

ОСНОВЫ CSS
Так будет выглядеть сайт с фоновой картинкой:
31

32.

ОСНОВЫ CSS
Самостоятельная работа
1. Добавьте на фон страницы картинку и
отредактируйте ее так, чтобы она растягивалась на
экран и не повторялась.
32

33.

РЕФЛЕКСИЯ
33

34.

РЕФЛЕКСИЯ
РЕФЛЕКСИЯ
1.
Как я себя чувствовал(а) во время урока и что могло на это повлиять?
2.
Какой материал или тема вызвали у меня наибольший интерес и
почему?
3.
Какие вопросы у меня остались после урока и как я могу на них
ответить?
4.
Как я оценю свою активность и участие в классе?
5.
Какой аспект урока мне показался наиболее полезным для моего
обучения?
34

35.

ДО ВСТРЕЧИ!
35

English Русский Rules