Similar presentations:
Тема 3.1. Кроссбраузерность, CSS reset. Понятие кроссбраузерности, использование CSS Reset
1.
Тема 3.1.Кроссбраузерность,
CSS reset
Понятие
кроссбраузерности,
использование CSS Reset
Лекция
2.
Цели занятия1
Понять, зачем нужен
CSS Reset
2
Сравнить способы
сброса стилей
с помощью CSS Reset
3
Разобрать, как
применять CSS Reset
3.
План занятияПонятие
кроссбраузерности
Библиотеки
сброса
1
2
4.
Понятиекроссбраузерности
5.
БраузерБраузер — программа, которая
понимает язык разметки и может
отобразить размеченную страницу
Chrome
Firefox
Microsoft
Edge
Opera
и другие
6.
Что мы увидим в браузере?7.
Зачем нужен сброс CSS?➜
Нет такого понятия, как элемент
HTML без стилей
➜
Каждая веб-страница использует
по крайней мере один CSS:стиль
клиентского приложения
➜
Каждый браузер содержит свой
собственный клиентский CSS
8.
Стили браузеровпо умолчанию
Таблица стилей
Таблица стилей
Таблица стилей
Chromium UA
Mozilla UA
WebKit UA
Google Chrome
и Opera
Firefox
Safari
Кроссбраузерность — свойство веб-сайта, которое
заключается в идентичности отображения
информации во всех современных браузерах
9.
CSS Reset — решениепроблемы кроссбраузерности
➜
Стиль браузера по умолчанию
может мешать стилям веб-страниц
➜
CSS Reset обеспечивает
совместимую основу для всех
браузеров
➜
CSS Reset полезен
для нормализации размера текста
и удаления полей и отступов
10.
Библиотекисброса
11.
Давайте вспомнимселекторы CSS
Что делает этот CSS-код?
12.
Сброс универсальногоселектора
Самый простой способ сбросить
клиентские настройки CSS
13.
Tantek Celik’sTantek’s CSS reset
14.
CSS Reset Эрика МейераMeyer’s CSS reset
15.
Normalize.css➜
Является альтернативой
CSS Reset
➜
Сохраняет полезные настройки
браузеров
➜
Нормализует стили
для большого количества
элементов HTML5, типографики,
списков, встроенного
содержимого, форм и таблиц
➜
Исправляет распространенные
ошибки и несоответствия
браузеров
Normalize.css
16.
Давайте порассуждаемКак вы думаете, нужен
ли CSS Reset?
17.
CSS Reset: за и против➜
Используйте CSS Reset в том
случае, если это упрощает
вёрстку
➜
Если необходимо, используйте
свой файл CSS Reset
18.
Как использовать CSS Reset1
Выбрать библиотеку
CSS Reset
2
Поместить стили CSS
Reset в отдельный файл
(reset.css)
➜
reset.css помещают
до пользовательской таблицы
стилей
➜
Используйте
универсальный
селектор для небольших проектов
➜
Нет необходимости использовать
CSS Reset при вёрстке с помощью
Bootstrap
19.
Свойство CSS all➜
Cбрасывает все свойства, кроме
Unicode-двунаправленного письма
и направления, в исходное
или унаследованное значение
➜
Может принимать значения
initial
inherit
unset
20.
Немного практикиВ какой последовательности
должны идти строки кода
для корректного отображения
страницы в браузере?
1
<head>
2
<link rel=”stylesheet” href=”style.css”>
3
<link rel=”stylesheet” href=”reset.css”>
4
<!DOCTYPE html>
5
</html>
6
<body>
7
<body>
8
<html>
9
<title>Моя первая страница</title>
10
</head>
11
<p>Какой-то текст</p>
21.
Итоги занятия✔
Разобрали, зачем нужен CSS Reset
✔
Рассмотрели и сравнили способы
сброса стилей с помощью CSS Reset
✔
Знаем, как применять CSS Reset
22.
Вашивопросы