Image Image Image Image Image Image Image Image Image Image

Блог Indigo | 19.03.2024

Наверх

Наверх

Использование CSS

Второй раздел учебника. Учимся создавать стили

Во втором разделе нашего учебника вы узнаете, как использовать CSS для создания стилей. Вы научитесь работать со шрифтами, красиво оформлять текст, создавать отступы и границы, добавлять фон и графику, украшать таблицы и формы. Также вы познакомитесь с CSS анимацией и трансформацией. Ниже находится содержание этой части учебника. Для перехода к нужной главе кликните по ссылке.

 

Содержание раздела

  1. Работа с текстом:

    1. Подключение шрифтов CSS. Работа с веб-шрифтами. Google Fonts
    2. Установка цвета для текста в CSS. Способы представления цветов
    3. Размер шрифта в CSS. Единицы измерения px, %, em
    4. Жирный шрифт и курсив CSS
    5. Прописные и строчные буквы в CSS: свойство text-transform
    6. Подчеркивание, зачеркивание текста в CSS: свойство text-decoration
    7. Тень для текста: свойство CSS text-shadow
    8. Межсимвольный, межстрочный интервал CSS. Расстояние между словами
    9. Выравнивание текста в CSS: свойство text-align
    10. CSS для списков: свойство list-style и его производные
  2. Работа с блоками:

    1. Вступление. Блоки
    2. Поля и отступы CSS: отличия свойств margin и padding
    3. Блочные и строчные элементы
    4. Свойство border: границы для блоков
    5. Border-radius: закругленные углы в CSS
    6. Box-shadow: тень для элемента
    7. Width и height: определяем размеры элемента
    8. Box-sizing: управляем вычислением ширины и высоты
    9. Overflow: управление переполненными элементами
    10. Max-width, max-height, min-width, min-height: максимальные и минимальные размеры элемента
    11. Поток документа. Свойства float и clear
    12. Практика: делаем адаптивную посадочную страницу
  3. Работа с графикой:

    1. CSS для тега img
    2. Background-image: установка фонового изображения
    3. Относительный и абсолютный путь к файлу
    4. Background-repeat: повторение фоновой картинки
    5. Background-position: позиционирование фона
    6. Background-attachment: фиксация фона
    7. Свойства CSS3 background-origin и background-clip
    8. Background-size: масштабирование фонового рисунка
    9. Свойство background: все настройки фона в одном месте
    10. Несколько фоновых рисунков для одного элемента
    11. Linear-gradient(): линейный градиент в фоне
    12. Repeating-linear-gradient(): градиент с повторением
    13. Radial-gradient(): радиальный градиент
    14. Repeating-radial-gradient(): повторяющийся радиальный градиент
    15. Практика: создаем фотогалерею на CSS
    16. Практика: работаем с фоновыми рисунками
  4. Ссылки и навигация:

    1. Состояния ссылок в CSS. Псевдоклассы
    2. Варианты стилизации ссылок в CSS
    3. Навигационные панели с помощью CSS
    4. Стили для особых ссылок
    5. CSS-спрайты
  5. Трансформирование и анимация:

    1. Свойство transform: трансформация элементов
      1. Функция rotate()
      2. Функция scale()
      3. Функция skew()
      4. Функция translate()
      5. Несколько значений свойства transform
      6. 3D-трансформации в CSS
    2. CSS3 transition: плавные переходы
      1. Свойство transition-property
      2. Свойство transition-duration
      3. Свойство transition-timing-function
      4. Свойство transition-delay
      5. Сокращенная запись transition
    3. CSS3-анимация
      1. Правило @keyframes
      2. Запуск анимации: аnimation-name и animation-duration
      3. Свойства animation-timing-function и animation-delay
      4. Свойство animation-iteration-count
      5. Свойство animation-direction
      6. Свойство animation-fill-mode
      7. Свойство animation-play-state
      8. Сокращенная запись animation
    4. Практика: создание CSS-анимации
  6. Таблицы и формы:

    1. Стилизация таблиц с помощью CSS
    2. CSS-стили для форм
Вернуться к полному содержанию