Учебник «Основы CSS с нуля»

Наш учебник (самоучитель) по основам каскадных таблиц стилей CSS в первую очередь предназначен для начинающих веб-программистов, которые уже познакомились с азами логической разметки веб-документов и готовы приступить к изучению правил оформления внешнего вида страниц. А за это как раз и отвечает описываемый в данном учебнике формальный высокоуровневый язык программирования CSS, который при помощи специальных таблиц стилей позволяет оформить дизайн сайта по усмотрению программиста. И несмотря на то, что синтаксис CSS в корне отличается от синтаксиса языка HTML, он также довольно прост как в изучении, так и в последующем использовании в процессе верстки страниц веб-сайтов.

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

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

Чтобы посмотреть результат выполнения исходного кода примеров учебника во фрейме кодового блока, используйте кнопку «Результат».

• Глава 1. Введение в CSS
  • §1. Для чего нужен CSS?
    • Определение CSS
    • Преимущества использования CSS
  • §2. Синтаксис CSS
    • Правила CSS
    • Форматирование кода CSS
    • Комментарии в CSS
    • Символы в CSS
  • §3. Подключение CSS к html-документу
    • Определение таблицы стилей CSS
    • Виды таблиц стилей CSS и способы их подключения к html-странице
  • §4. Селекторы CSS
    • Назначение селекторов
    • Универсальный селектор
    • Селектор по типу
    • Селектор по классу
    • Селектор по идентификатору
    • Селектор по атрибуту
    • Селектор потомков
    • Селектор дочерних элементов
    • Селектор соседних элементов
    • Селектор родственных элементов
    • Селекторы псевдоклассов
    • Селекторы псевдоэлементов
    • Комбинирование селекторов CSS
  • §5. Наследование, каскадирование и приоритетность стилей CSS
    • Наследование в CSS
    • Каскадирование стилей CSS
    • Специфичность селекторов CSS
    • Виды и приоритет стилей CSS
    • Служебный параметр !important
    • Использование одинаковых свойств CSS в одном правиле
  • §6. Единицы измерения, использующиеся в CSS
    • Два вида единиц измерения
    • Абсолютные единицы измерения
    • Относительные единицы измерения
    • Единицы измерения углов в CSS
  • §7. Использование цветов в CSS
    • Цвета в CSS
    • Цветовая модель RGB
    • Цветовая модель RGBA
    • Цветовая модель HSL
    • Цветовая модель HSLA

• Глава 2. Свойства CSS для текста, шрифта, списков и таблиц
  • §8. Оформление внешнего вида текста
    • Использование CSS для форматирования текста
    • css-свойства word-spacing и letter-spacing
    • Высота строки и css-cвойство line-height
    • Красная строка и css-cвойство text-indent
    • Выравнивание текста и css-cвойства text-align и text-align-last
    • Направление письма и символов, css-свойства direction, ...
    • Пробельные символы и css-cвойство white-space
    • Переносы строк и css-cвойства word-break и word-wrap
    • Заглавные и строчные буквы, css-cвойство text-transform
    • Декоративная линия и подчеркивание текста
    • Установка теней для текста и css-cвойство text-shadow
  • §9. Определение характеристик шрифтов
    • Шрифты в CSS
    • Установка шрифта и css-свойство font-family
    • Размер шрифта и css-свойство font-size
    • Насыщенность шрифта и css-свойство font-weight
    • Стиль шрифта и css-свойство font-style
    • Капитель и css-свойство font-variant
    • Сокращенное css-свойство font
  • §10. Оформление внешнего вида списков
    • Тип маркера списка и css-свойство list-style-type
    • Расположение маркеров списка и css-свойство list-style-position
    • Использование изображений в качестве маркеров списка
    • Сокращенное css-свойство list-style
  • §11. Оформление внешнего вида таблиц
    • Заголовок таблицы и css-свойство caption-side
    • Границы таблицы и css-свойства border-collapse и border-spacing
    • Границы и фон ячеек таблицы css-свойство empty-cells
    • Формирование таблицы и css-свойство table-layout
  • §12. Оформление внешнего вида колонок
    • Создание многоколоночных элементов, css-cвойство column-count
    • Оптимальная ширина колонок, css-cвойство column-width
    • Сокращенное css-cвойство columns
    • Расстояние между колонками, css-cвойство column-gap
    • Порядок заполнения колонок, css-cвойство column-fill
    • Установка разделительной линии колонок
    • css-cвойство column-span

• Глава 3. Установка размеров, границ и отступов элементов в CSS
  • §13. Определение размеров элементов
    • Размеры элементов и css-свойства width и height
    • css-свойство box-sizing
    • css-свойства min-width, min-height, max-width, max-height
  • §14. Установка границ элементов
    • Стиль границ элемента, css-свойство border-style и его производные
    • Ширина границ элемента, css-свойство border-width и его производные
    • Цвет границ элемента, css-свойство border-color и его производные
    • Универсальные css-свойства border, border-top, border-bottom, ...
    • Скругление границ элемента, css-свойство border-radius и его производные
    • Внешняя рамка элемента, css-свойства outline, outline-style, ...
    • Расстояние между внешней и внутренней границами, ...
    • Создание теней, css-свойство box-shadow
  • §15. Определение отступов элементов
    • Внешние отступы элементов
    • Внутренние отступы элементов

• Глава 4. Установка цвета и фона, использование анимации в CSS
  • §16. Установка цвета
  • §17. Установка фона
    • Фон элемента, css-свойства background-color и background-image
    • Повторение фона, css-свойство background-repeat
    • Стартовая позиция фона, css-свойство background-position
    • Масштабирование фона, css-свойство background-size
    • Выделение области под фон, css-свойство background-clip
    • css-свойство background-attachment
    • css-свойство background-origin
    • Сокращенное css-свойство background
    • css-функции linear-gradient() и repeating-linear-gradient()
    • css-функции radial-gradient() и repeating-radial-gradient()
    • Использование фильтров изображений
  • §18. Анимация в CSS
    • Правило keyframes и его синтаксис
    • Имя анимации, css-свойство animation-name
    • Задержка анимации, css-свойство animation-delay
    • Длительность анимации, css-свойство animation-duration
    • Повторение анимации, css-свойство animation-iteration-count
    • Направление анимации, css-свойство animation-direction
    • Плавность анимации, css-свойство animation-timing-function
    • Постановка анимации на паузу, css-свойство animation-play-state
    • css-свойство animation-fill-mode
    • Сокращенное css-свойство animation
    • Создание эффекта перехода, css-свойство transition-property
    • css-свойство transition-delay
    • css-свойство transition-duration
    • css-свойство transition-timing-function
    • Сокращенное css-свойство transition

• Глава 5. Форматирование элементов в CSS
  • §19. Свойство display
  • §20. Позиционирование элементов
    • css-свойства position, left, right, top, bottom
    • css-свойство z-index
    • css-свойство clip
  • §21. Трансформация элементов
    • Трансформация элемента и свойство transform
    • Функция трансформации translate()
    • Функция трансформации scale()
    • Функция трансформации rotate()
    • Функция трансформации skew()
    • Функция трансформации matrix()
    • Функция perspective()
    • css-свойство perspective
    • css-свойство perspective-origin
    • css-свойство transform-origin
    • css-свойство transform-style
    • css-свойство backface-visibility
    • Пару слов о 3D-функциях трансформации
  • §22. Плавающие элементы
    • css-свойство float
    • css-свойство clear
  • §23. Видимость элементов
    • css-свойство visibility
    • css-свойство opacity
  • §24. Отображение содержимого элементов
    • css-свойство overflow
    • Вертикальное выравнивание, css-свойство vertical-align
    • Изменение размеров элемента, css-свойство resize
  • §25. Свойства связанные с курсором мыши
    • Оформление внешнего вида курсора и css-свойство cursor
    • События мыши и css-свойство pointer-events
  • §26. Модуль CSS Flexbox
    • Введение в модуль CSS Flexbox
    • Создание flex-контейнера
    • css-свойство flex-direction
    • css-свойство flex-wrap
    • Сокращенное css-свойство flex-flow
    • css-свойство order
    • css-свойство flex-grow
    • css-свойство flex-shrink
    • css-свойство flex-basis
    • Сокращенное css-свойство flex
    • css-свойство justify-content
    • css-свойства align-items и align-self
    • css-свойство align-content

• Глава 6. @-правила. Печать документа. Вставка контента.
  • §27. @-правила
    • css-правило @import
    • Указание кодировки страницы, css-правило @charset
    • Подключение собственных шрифтов к странице, css-правило @font-face
    • css-правило @page
    • css-правило @supports
    • css-правило @keyframes
  • §28. Медиа-запросы
  • §29. Печать документа
    • css-свойство orphans
    • css-свойство widows
    • css-свойства page-break-before и page-break-after
    • css-свойство page-break-inside
  • §30. Вставка генерируемого контента
    • css-свойство content
    • css-свойство counter-reset
    • css-свойство counter-increment
    • css-свойство quotes