Глава 2. CSS и CSS3


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

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

2.1. Основы CSS

CSS (Cascading Style Sheets), или каскадные таблицы стилей, описывают правила форматирования отдельного элемента веб-страницы. Определение стиля состоит из двух основных частей: самого элемента веб-страницы – селектора, и команды форматирования – блока объявления. Селектор сообщает браузеру, какой именно элемент форматировать, в блоке объявления перечисляются форматирующие команды.

2.2. Блочные и строчные элементы

Модель визуального форматирования CSS основывается на возможности изменения представления элемента браузером пользователя, используя значения свойства display.

2.3. CSS позиционирование

CSS позиционирование управляет местоположением элементов на странице. Изменять положение элементов на странице можно с помощью следующих CSS-свойств: position и float. Для одного элемента нельзя одновременно применять свойства position и float.

2.4. CSS текст

Текст представляет собой основное содержимое веб-страницы. Использование CSS-стилей для форматирования текста позволяет придать HTML-элементам желаемый вид, благодаря чему HTML-теги могут применяться только по своему прямому назначению – для определения структуры документа.

2.5. CSS шрифты

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

2.6. CSS ссылки

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

2.7. CSS таблицы

Базовая единица таблицы – “ячейка сетки”, которая представляет собой одиночный участок между линиями сетки, на которых отрисовывается сама таблица. В простой таблице из двух столбцов и двух строк, ячейки сетки соответствуют ячейкам таблицы. В более сложной таблице контуры ячеек сетки соответствуют рамкам ячеек таблицы, но пересекают те ячейки, которые охватывают несколько строк или столбцов.

2.8. CSS списки

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

2.9. CSS фон

Каждая веб-страница имеет фон, на котором можно размещать рисунки и текст. В качестве фона как страницы целиком, так и любого элемента страницы можно задавать цвет, градиент, или изображение. Свойства фона не наследуются, но фон родительского блока всегда будет виден.

2.10. CSS рамка

Рамка элемента представляет собой одну или несколько линий, окружающих содержимое элемента и его отступы (padding). Стиль рамки задается с помощью трех свойств: стиль, цвет и ширина.

2.11. CSS content

CSS content дает возможность генерации содержимого и отображения его браузером на экране монитора пользователя. С помощью CSS можно добавить содержимое, не принадлежащее дереву HTML, с использованием свойства content в сочетании с псевдоэлементами :before и :after, с помощью автоматической нумерации свойствами counter-increment и counter-reset.

2.12. CSS генераторы

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

2.13. CSS цвета

В спецификации CSS определены 140 имен цветов, из них 17 стандартных цветов плюс 123 дополнительных. К стандартным относятся следующие цвета: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow. Запись цвета элемента в формате цвет: имя цвета (color: orangered;) более наглядна, чем кодировка.

2.14. CSS3 текст

В спецификацию CSS3 были добавлены свойства для работы с текстом, позволяющие решить проблемы с переносом текста и обрезкой текста в пределах содержимого.

2.15. CSS3 градиент

Градиенты представляют собой переходы от одного цвета к другому. CSS3 поддерживает два типа градиентов: линейные градиенты, в которых переход цветов осуществляется от одной полосы цвета к другой, и радиальные градиенты, в которых переход идет радиально от центра концентрических или эллипсовидных кругов.

2.16. CSS3 рамка

Спецификация CSS3 дополнила возможности форматирования границ элементов с помощью свойств, позволяющих закруглить углы элемента, а также использовать изображения для оформления границ элемента.

2.17. CSS3 тень текста

Свойство text-shadow используется для добавления тени к тексту. Тень текста — интересный инструмент, который позволяет создавать удивительные эффекты. Тени могут быть однослойными или многослойными, размытыми, цветными или полупрозрачными.

2.18. CSS3 тень блока

Свойство box-shadow используется, чтобы добавить элементу одну или более теней. Тень представляет собой копию элемента, смещенную на указанное расстояние. Каждая тень принимает от одного до пяти параметров: горизонтальное смещение, вертикальное смещение, радиус размытия (необязательное значение), радиус распространения (необязательное значение) и цвет тени.

2.19. CSS3 переходы

CSS3 переходы обеспечивают плавные переходы из одного состояния в другое при наведении курсора мыши на элемент, а также дают возможность контролировать скорость изменения CSS-свойств при анимации элементов. Наиболее часто используются для стилизации ссылок и кнопок в состоянии :hover или :focus.

2.20. CSS3 трансформации

CSS3 трансформации определяют, каким станет тот или иной блочный элемент. Существуют два вида CSS3 трансформаций – 2D и 3D. 2D-трансформации, в отличие от 3D-трансформаций, имеют более широкую поддержку браузерами.

2.21. CSS3 анимация

CSS3 анимация — вдохновение для веб-разработчиков. С ее помощью можно создавать эффекты, которые раньше воспроизводились с помощью скрипта и с использованием графических редакторов. Анимация применяется к любым html-элементам, а также к псевдоэлементам :before и :after.

2.22. CSS3 flexbox

CSS flexbox (Flexible Box Layout Module) — это система компоновки элементов. Она состоит из flex-контейнера — родительского контейнера и flex-элементов — дочерних блоков. Дочерние элементы могут выстраиваться в строку или столбик, а оставшееся свободное пространство распределяется между ними различными способами.

2.23. CSS3 columns

CSS3 columns — концепция многоколоночной разметки, которая позволяет разбивать контент на колонки. Вы можете создать многоколоночную разметку с заголовками, текстом, картинками и другими inline-элементами.

2.24. CSS3 3D-трансформации

CSS3 3D-трансформации работают аналогично с 2D-трансформациями с разницей в том, что элементы могут перемещаться вдоль оси Z, вглубь экрана и из него. Чтобы активизировать 3D-пространство, нужно установить свойство perspective для родительского контейнера.

2.25. CSS3 медиа запросы

CSS3 медиа запросы позволяют задать набор стилей, которые будут применяться для заданных типов носителей и устройств.
Медиа запросы проверяют такие свойства, как ширина и высота окна браузера, ширина и высота экрана устройства, ориентация планшета или телефона (альбомная или портретная) и много другое, но чаще всего проверяется ширина области просмотра и ширина экрана устройства.

2.26. CSS3 фильтры

CSS3 фильтры воспроизводят в браузере визуальные эффекты, похожие на фильтры Photoshop. Применение фильтров не ограничивается отдельными элементами, такими как изображения, их можно добавлять к любым непустым элементам. Набор фильтров не ограничивается предустановленным в браузере. Вы также можете использовать фильтры SVG, загрузив их по ссылке вместе с svg-элементом.