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

Основы CSS

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

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

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

Требования к коду:

  1. Отсутствие ошибок на валидаторе для html и css;
  2. Код отформатирован.

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

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

Normaliz-аторы

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

Материалы

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

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

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