Skip to content
Веб-разработка
GitHub

Основы CSS

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

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

  1. Изучить принципы оформления статических веб-страниц, в том числе:
    • основы CSS;
    • селекторы;
    • Свойства и значения;
    • Принципы наследования;
    • Каскадирование и специфичность;
    • изучить единицы измерения:
      • абсолютные: px, pt, cm, mm, in
      • относительные: %, em, rem, ch, vw, vh
    • изучить пути:
      • относительные;
      • относительные корневые;
      • абсолютные.
    • изучить модели и способы задания цветов:
      • Имена;
      • HEX;
      • RGB;
      • RGBA;
      • HSL;
      • HSLA;
  2. Для выполнения работы необходимо к структуре из первой лабораторной работы добавить папку CSS, в нее добавить один из нормализаторов “нормализаторов” стилей (на выбор студента) и создать свой файл style.css.
  3. Подключить таблицы стилей к index.html.
  4. В 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)
  5. Зафиксировать результаты работы с помощью системы контроля версий git и отправить репозиторий на Github.

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

  1. Удобочитаемый код (Руководство по оформлению HTML/CSS кода от Google);
  2. Отсутствие ошибок на валидаторе;

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

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

Normaliz-аторы

От старых к новым:

  1. Reset.css - полный сброс стилей;
  2. Normalize
  3. Modern normalize
  4. Reseter

Материалы

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

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

  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. Чем отличается относительный путь от абсолютного?