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