02

Основы CSS

Основы CSS

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

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

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

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

  • Код отформатирован;
  • Корректное использование тегов;
  • Отсутствие ошибок на валидаторе для html и css.

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

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

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

Материалы

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

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

  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?
  15. Как работает rem?
  16. Почему px не лучший вариант задать размер текста?
Задать вопрос наставнику
Предыдущая Следующая