План занять

  1. Атрибут style
  2. Поняття CSS. Селектори
    1. HTML код окремо, стилі окремо
    2. Селетор - тег
    3. Селетор - клас
    4. Селетор - ідентифікатор (id)
    5. Де розташувати css код і як його під'єднати до html коду
  3. Властивості тла
    1. Колір тла background-color
    2. Зображення тла background-image
    3. Властивість Background-repeat
  4. Стилі шрифтів
    1. Колір текста (color)
    2. Колір тла (background - color)
    3. Шрифт (font-family)
    4. Розмір шрифта (font-size)
    5. Стиль шрифта (font-style)
    6. Насиченість шрифта (font-weight)
    7. Співвідношення тексту та лінії (text-decoration)
    8. Обгортка для тексту - контейнер span
  5. Форматування тексту
    1. Форматування тексту text-align
    2. Відстань між буквами letter-spacing
    3. Зміна висоти рядка без зміни висоти символів. line-height.
  6. Стилі списків
    1. Стилі маркерів нумерованого списку
    2. Стилі маркерів маркованого списку
    3. Графічні файли в якості маркерів
  7. Рамки навколо елементів
    1. Стиль рамки border-style
    2. Товщина рамки border-width
    3. Колір рамки border-color
    4. Скорочений запис властивостей рамки border
    5. Круглі кути
    6. Окремі налаштування сторін рамки
  8. Стилі таблиць
    1. Тло елементів таблиці
    2. Рамки елементів таблиці
    3. Згортання рамок
    4. Розміри елементів таблиці
    5. Форматування вмісту таблиці
  9. Блоки
    1. Розмір блоку - width height
    2. Рамка border
    3. Відступ від границі блоку до його вмісту - padding
    4. Відступ до оточення блока - margin
  10. Взаєморозташування блоків. Float
    1. Властивість float
    2. Властивість clear:both;
  11. Макетування сторінки. Flex-box(1).
    1. Поняття адаптивної верстки
    2. flex контейнер
    3. Форматування блоків всередені контейнера justify-content
    4. Властивість flex-direction
  12. Макетування сторінки. Flex-box(2).
    1. Налаштування дочірних блоків (items)
    2. Скорочена властивість flex число
  13. Макетування сторінки. Grid.
    1. Контейнер grid
    2. Об'єднання елементів сітки
  14. Медіазапити
    1. Контейнер grid
    2. Список стандартних контрольних точок (breakpoints)

Зрізи знань

Практичні роботи: