Основы CSS

Цель: изучить основы CSS, принципы использования селекторов, приобрести навыки оформления статических веб-страниц.

Порядок выполнения лабораторной работы:

1. Изучить принципы оформления статических веб-страниц, в том числе:
   • Основы CSS;
   • Селекторы;
   • Свойства и значения;
   • Принципы наследования;
   • Каскадирование и специфичность;
2. К результату первой лабораторной работы в папку css добавить или normalize.css или reseter.css или reset.css.
3. Подключить стилевые таблицы css к index.html в head.
4. Проанализировать макет на предмет используемых шрифтов и цветов.
5. Цвета в style.css организовать с помощью пользовательских свойств (Custom Properties/CSS Variables) на корневом элементе :root {}.
6. В style.css сформировать стили для текста:
   • подключить шрифты из макета или визуально похожие из Google Fonts,
   • создать переменные для основных цветов,
   • задать размер текста (font-size) и жирность (font-weight),
   • изменить межстрочный интервал (line-height),
   • выровнять текст (text-align)
   • задать цвета к тексту и ссылкам (color) с помощью var(),
   • задать фонам элементов (background-color),
   • убрать подчеркивание у ссылок если требуется по макету (text-decoration)
   • задать границы и их скругления (border, border-radius)
7. Зафиксировать результаты работы с помощью системы контроля версий git и отправить репозиторий на github.
8. Загрузить проект на сервер через sftp или используя ssh.

Требования к html и css:

• Удобочитаемый код (Руководство по оформлению HTML/CSS кода от Google);
• Код отформатирован;
• Корректное использование тегов;
• Отсутствие ошибок на валидаторе для html и css.

Результаты выполнения лабораторной работы:

Результаты работы проверены наставником.

Статическая веб-страница на хостинге, со структурой и оформлением, которая соответствует требованиям и сохранена в системе контроля версий.

Материалы

• Normalize
• Reseter
• Шрифты
• Google Fonts Helper

Дополнительные источники

• Интерактивный курс «Основы CSS»
• MDN CSS
• Справочная информация
• Проверка тегов и свойств на степень внедрения
• Проверка тегов на возможность вложения
• Chrome DevTools

Вопросы для защиты

1. Что такое CSS?
2. Что такое каскад?
3. Как рассчитывается специфичность?
4. Как специфичность влияет на каскад?
5. Что подразумевает наследование и как его использовать на благо?
6. Из чего состоят правила?
7. Какие бывают селекторы?
8. Для чего нужны normalize.css или reseter.css?
9. Какие существуют 3 способа подключения стилей?
10. Как создаются Custom Properties?
11. Классификация шрифтов.
12. На что влияет свойство font-weight?
13. Почему в для свойства font-family лучше указывать несколько шрифтов?
14. Что меняет свойство color?

Задать вопрос наставнику