Глава 2. CSS и CSS3
2.1. Основы CSS
- Виды таблиц стилей
- Виды селекторов
- Комбинация селекторов
- Группировка селекторов
- Наследование и каскад
2.2. Блочные и строчные элементы
- Модель визуального форматирования
- Блочная модель
- Блочные элементы и блочные контейнеры
- Строчные элементы и строчные контейнеры
- Строчно-блочные элементы
- Как сделать строчный элемент блочным
- Схлопывание вертикальных отступов
- Отрицательные отступы
- Выпадание вертикальных отступов
2.3. CSS-позиционирование
- Типы позиционирования
- Свойства смещения
- Позиционирование внутри элемента
- Проблемы позиционирования
- Свободное перемещение элементов
- Отмена обтекания элементов
2.4. CSS-текст
- Горизонтальное выравнивание text-align
- Отступ text-indent
- Высота строки line-height
- Вертикальное выравнивание vertical-align
- Расстояние между словами word-spacing
- Расстояние между буквами letter-spacing
- Обработка пробелов white-space
- Настройка табуляции tab-size
- Преобразование текста text-transform
- Направление написания текста direction
- Направление написания слов в тексте unicode-bidi
- Декорирование текста text-decoration
- Форматирование первой буквы и первой строки абзаца :first-letter и :first-line
- Кавычки quotes
2.5. CSS-шрифты
- Семейство шрифтов font-family
- Стиль начертания шрифта font-style
- Вариант начертания шрифта font-variant
- Насыщенность шрифта font-weight
- Размер шрифта font-size
- Цвет шрифта color
- Краткая запись свойств шрифта font
2.6. CSS-ссылки
- Псевдоклассы состояний гипертекстовых ссылок
- Выборка отдельных ссылок
- Подчеркивание ссылок
- Внешний вид курсора мыши cursor
- Использование фонового изображения
- Изображения для ссылок
- Ссылки-кнопки
- Примеры оформления ссылок
2.7. CSS-таблицы
- Границы таблицы border
- Как задать ширину и высоту таблицы
- Как задать фон таблицы
- Столбцы таблицы
- Как добавить таблице заголовок
- Как убрать промежуток между рамками ячеек
- Как увеличить промежуток между рамками ячеек
- Как скрыть пустые ячейки таблицы
- Компоновка макета таблицы table-layout
- Лучшие макеты таблиц
2.8. CSS-списки
- Тип маркера списка list-style-type
- Изображения для элементов списка list-style-image
- Местоположение маркера списка list-style-position
- Краткая форма задания стилей списка list-style
- Примеры красивого оформления списков
2.9. CSS-фон
- Цвет фона background-color
- Фоновое изображение background-image
- Повтор фоновых изображений background-repeat>
- Позиционирование фоновых изображений background-position
- Фиксация изображения на месте background-attachment
- Заполнение фоном отступов и границ элемента background-clip
- Положение фонового изображения относительно его родительского блока background-origin
- Размер изображения background-size
- Задание фона элемента одним свойством background
- Множественные фоны
2.10. CSS-рамка
- Стиль рамки border-style
- Цвет рамки border-color
- Ширина рамки border-width
- Задание рамки одним свойством border
- Задание рамки для одной границы элемента
- Внешний контур outline
- Стиль внешнего контура outline-style
- Цвет внешнего контура outline-color
- Толщина внешнего контура outline-width
2.11. CSS-content
- Свойство content
- Добавление специального символа
- Добавление текста
- Добавление изображения
- Добавление блочного содержимого
- Добавление значения атрибута
- Добавление кавычек
- Добавление счетчика элементов
- Свойство display: list-item
2.12. CSS-генераторы
2.13. CSS-цвета
2.14. CSS3-текст
2.15. CSS3-градиент
- Линейный градиент: linear-gradient()
- Радиальный градиент: radial-gradient()
- Повтор градиента: repeating-linear-gradient() и repeating-radial-gradient()
- Кроссбраузерный градиент
- Комбинация градиента и фонового изображения
2.16. CSS3-рамка
- Закругление углов с помощью border-radius
- Рамки-изображения border-image
- Ширина рамки-изображения border-image-width
- Ресурс рамки-изображения border-image-source
- Элементы рамки-изображения border-image-slice
- Повтор рамки-изображения border-image-repeat
- Смещение рамки-изображения border-image-outset
- Смещение внешней рамки outline-offset
- Градиентная рамка
2.17. CSS3-тень текста
2.18. CSS3-тень блока
2.19. CSS3-переходы
- Название свойства transition-property
- Продолжительность перехода transition-duration
- Функция перехода transition-timing-function
- Задержка перехода transition-delay
- Краткая запись перехода transition
- Плавный переход нескольких свойств
- Примеры переходов для различных свойств
2.20. CSS3-трансформации
- Функции 2D-трансформации transform
- Точка трансформации transform-origin
- Множественные трансформации
- Трансформации на практике: как сделать ленточки
2.21. CSS3-анимация
- Правило @keyframes
- Название анимации animation-name
- Продолжительность анимации animation-duration
- Временная функция animation-timing-function
- Анимация с задержкой animation-delay
- Повтор анимации animation-iteration-count
- Направление анимации animation-direction
- Краткая запись анимации animation
- Проигрывание анимации animation-play-state
- Состояние элемента до и после воспроизведения анимации animation-fill-mode
- Множественные анимации
2.22. CSS3 flexbox
- Свойство display: flex
- Выравнивание элементов по горизонтали justify-content
- Выравнивание элементов по вертикали align-items
- Направление главной оси flex-direction
- Многострочность элементов flex-wrap
- Краткая запись направления и многострочности flex-flow
- Многострочное выравнивание align-content
- Порядок отображения элементов order
- Базовая ширина элемента flex-basis>
- Растяжение элементов flex-grow
- Сужение элементов flex-shrink
- Задание базовой ширины и трансформации элемента одним свойством flex
- Выравнивание отдельных элементов align-self
2.23. CSS3 columns
- Количество колонок column-count
- Ширина колонок column-width
- Ширина пустого пространства между колонками column-gap
- Позиционирование элемента на несколько колонок column-span
- Стиль разделительной линии column-rule-style
- Ширина разделительной линии column-rule-width
- Цвет разделительной линии column-rule-color
- Краткая запись стилей разделительной линии column-rule
- Установка колонок с помощью одного свойства columns
2.24. CSS3 3D-трансформации
- Установка 3D перспективы perspective
- Задание точки трансформации для 3D элемента perspective-origin
- Стиль 3D преобразований transform-style
- Видимость обратной стороны элемента backface-visibility
- Функции 3D трансформации
2.25. CSS3-медиазапросы
- Структура медиазапроса @media
- Логические операторы
- Тип носителя
- Характеристики носителя
- На какие разрешения экрана нужно ориентироваться