Основы CSS
Цель: изучить основы CSS, принципы использования селекторов и единиц измерения, приобрести навыки оформления статических веб-страниц.
Порядок выполнения лабораторной работы:
- Изучить принципы оформления статических веб-страниц, в том числе:
- основы CSS;
- селекторы;
- Свойства и значения;
- Принципы наследования;
- Каскадирование и специфичность;
- изучить единицы измерения:
- абсолютные: px, pt, cm, mm, in
- относительные: %, em, rem, ch, vw, vh
- изучить пути:
- относительные;
- относительные корневые;
- абсолютные.
- изучить модели и способы задания цветов:
- Имена;
- HEX;
- RGB;
- RGBA;
- HSL;
- HSLA;
- Для выполнения работы необходимо к структуре из первой лабораторной работы добавить папку CSS, в нее добавить один из нормализаторов “нормализаторов” стилей (на выбор студента) и создать свой файл style.css.
- Подключить таблицы стилей к index.html.
- В style.css:
- подключить шрифты из макета или визуально похожие из Google Fonts,
- создать переменные для всех цветов
--custom-property: __;
в:root {}
, - задать размер текста (font-size) для в rem. Рекомендуется в этом случае для
html
задать font-size в 62.5%, тогда будет проще рассчитывать rem для остального текста. - жирность (font-weight),
- изменить межстрочный интервал (line-height),
- выровнять текст (text-align)
- задать цвета к тексту и ссылкам (color)
используя var()
с переменными, - задать фоны элементов (background-color),
- убрать подчеркивание у ссылок если требуется по макету (text-decoration)
- задать границы и их скругления (border, border-radius)
- Зафиксировать результаты работы с помощью системы контроля версий git и отправить репозиторий на Github.
Требования к index.html:
- Удобочитаемый код (Руководство по оформлению HTML/CSS кода от Google);
- Отсутствие ошибок на валидаторе;
Результаты выполнения лабораторной работы:
Статическая веб-страница на хостинге, со структурой, которая соответствует требованиям и сохранена в системе контроля версий.
Normaliz-аторы
От старых к новым:
- Reset.css - полный сброс стилей;
- Normalize
- Modern normalize
- Reseter
Материалы
Дополнительные источники
- Интерактивный курс «Основы CSS»
- MDN CSS
- Справочная информация
- Проверка тегов и свойств на степень ведрения
- Проверка тегов на возможность вложения
- Chrome DevTools
Вопросы для защиты
- Что такое CSS?
- Что такое каскад?
- Как рассчитывается специфичность?
- Как специфичность влияет на каскад?
- Что подразумевает наследование и как его использовать на благо?
- Из чего состоят правила?
- Какие бывают селекторы?
- Для чего нужны normalize.css или reseter.css?
- Какие существуют 3 способа подключения стилей?
- Как создаются Custom Properties?
- Классификация шрифтов.
- На что влияет свойство font-weight?
- Почему в для свойства font-family лучше указывать несколько шрифтов?
- Что меняет свойство color?
- Как работает rem?
- Чем отличается относительный путь от абсолютного?