Содержание
- 1 Новые CSS3 селекторы
- 2 Новые свойства
- 3 Несколько фоновых изображений
- 4 Новые свойства стиля фона
- 5 Изменения в существующих свойствах стиля фона
- 6 CSS3 Border Properties
- 7 Новые свойства стиля границы
- 8 Дополнительные свойства CSS3, связанные с границами и фоном
- 9 CSS3 Columns — Определите количество и ширину столбцов.
- 10 CSS3 столбцы пробелы и правила
- 11 CSS3 Разрывы столбцов, Охватывающие столбцы и Заполнение столбцов
- 12 Дополнительные функции в CSS3, которые не включены в CSS2
Самое большое различие между CSS2 и CSS3 состоит в том, что CSS3 был разделен на различные разделы, называемые модулями. Каждый из этих модулей проходит через W3C на разных этапах процесса рекомендации. Этот процесс значительно облегчает принятие и реализацию различных компонентов CSS3 в браузере различными производителями.
Если вы сравните этот процесс с тем, что произошло с CSS2, где все было представлено в виде единого документа со всей информацией каскадных таблиц стилей в нем, вы увидите преимущества разделения рекомендации на более мелкие отдельные части. Поскольку каждый из модулей разрабатывается индивидуально, у нас гораздо более широкий диапазон поддержки браузером модулей CSS3.
Как и в случае любой новой и изменяющейся спецификации, обязательно тщательно протестируйте свои страницы CSS3 в максимально возможном количестве браузеров и операционных систем. Помните, что цель состоит не в том, чтобы создавать веб-страницы, которые выглядят одинаково в каждом браузере, а в том, чтобы все используемые вами стили, в том числе стили CSS3, отлично выглядели в браузерах, которые их поддерживают, и чтобы они изящно использовались для старых браузеров, которые не надо.
Новые CSS3 селекторы
CSS3 предлагает множество новых способов написания правил CSS с помощью новых селекторов CSS, а также нового комбинатора и некоторых новых псевдоэлементов.
Есть три новых селектора атрибута:
- Начало атрибута точно соответствует
элемент [Foo = "бар"]
Элемент имеет атрибут foo, который начинается с «bar», например
- Окончание атрибута точно соответствует
элемент [Foo $ = "бар"]
Элемент имеет атрибут foo, который оканчивается на «bar», например
- Атрибут содержит совпадение
Элемент [Foo * = "бар"]
Элемент имеет атрибут с именем foo, который содержит строку «bar», например
Введено 16 новых псевдоклассов:
- : корень
- Корневой элемент документа.
- : П-й ребенок (п)
- Используйте это для точного соответствия дочерних элементов или используйте переменные для получения чередующихся совпадений.
- : П-го последнего ребенка (п)
- Совпадение точных дочерних элементов, считая от последнего.
- : П-го из-типа (п)
- Сопоставьте одноуровневые элементы с тем же именем перед ним в дереве документа.
- : П-й последний из-типа (п)
- Подбирайте одноуровневые элементы с одинаковым именем, считая снизу вверх
- :последний ребенок
- Соответствует последнему дочернему элементу родителя.
- : Во-первых, из-типа
- Сопоставьте первый родственный элемент этого типа.
- : Последний из типа
- Соответствуйте последнему элементу этого типа.
- :единственный ребенок
- Сопоставьте элемент, который является единственным потомком своего родителя.
- : Только-оф-типа
- Сопоставьте элемент, который является единственным в своем типе.
- : пусто
- Сопоставьте элемент, который не имеет дочерних элементов (включая текстовые узлы).
- : цель
- Соответствует элементу, который является целью ссылающегося URI.
- : включен
- Сопоставьте элемент, когда он включен.
- :отключен
- Соответствуйте элементу, когда он отключен.
- : проверено
- Сопоставьте элемент, когда он отмечен (переключатель или флажок).
- : Нет (ы)
- Совпадение, когда элемент не соответствует простым селекторам.
Есть один новый комбинатор:
- elementA ~ elementB
- Соответствует, когда elementB следует где-то после elementA, не обязательно сразу.
Новые свойства
CSS3 также представил ряд новых свойств CSS. Многие из этих свойств должны были создавать визуальные стили, которые, вероятно, больше ассоциировались бы с графической программой, такой как Photoshop. Некоторые из них, такие как border-radius или box-shadow, появились с момента появления CSS3. Другие, такие как flexbox или даже CSS Grid, являются более новыми стилями, которые до сих пор часто считаются дополнениями CSS3.
В CSS3 блочная модель не изменилась. Но есть множество новых стилевых свойств, которые могут помочь вам стилизовать фон и границы ваших рамок.
Несколько фоновых изображений
Используя стили background-image, background-position и background-repeat, вы можете указать несколько фоновых изображений для наложения друг на друга в окне. Первое изображение — это слой, ближайший к пользователю, а следующие закрашены. Если есть цвет фона, он окрашивается под всеми слоями изображения.
Новые свойства стиля фона
В CSS3 также есть несколько новых фоновых свойств.
- фон-клип
- Это свойство определяет, как фоновое изображение должно быть обрезано. По умолчанию это поле рамки, но его можно изменить на поле дополнения или поле содержимого.
- фон-происхождения
- Это свойство определяет, следует ли помещать фон в поле отступов, поле границы или поле содержимого.
- фон-размер
- Это свойство позволяет указывать размер фонового изображения. Это позволяет растягивать меньшие изображения, чтобы соответствовать странице.
Изменения в существующих свойствах стиля фона
Есть также несколько изменений в существующих свойствах стиля фона:
- фон-повторить
- Для этого свойства есть два новых значения: пробел и раунд. Пространственное пространство равномерно размещает мозаичное изображение внутри рамки, не обрезаясь. Округление изменяет масштаб фонового изображения, чтобы оно помещалось в поле целое число раз.
- фон-вложение
- Добавлено новое значение «local», чтобы фон прокручивался с содержимым элемента, когда у этого элемента есть полоса прокрутки.
- фон
- Свойство фонового сокращения добавляет свойства размера и источника.
CSS3 Border Properties
В CSS3 границы могут быть стилями, к которым мы привыкли (сплошной, двойной, пунктирный и т. Д.), Или они могут быть изображениями. Кроме того, CSS3 дает возможность создавать закругленные углы. Изображения границ интересны тем, что вы создаете изображение всех четырех границ и затем рассказываете CSS, как применить это изображение к вашим границам.
Новые свойства стиля границы
В CSS3 появилось несколько новых свойств границ:
- граница радиуса
- границы верхнего правого радиуса, границы нижнего правого радиуса, Граница-нижний левый-радиус, границы левого верхнего радиуса
- Эти свойства позволяют создавать закругленные углы на ваших границах.
- границы изображения источника
- Задает исходный файл изображения, который будет использоваться вместо уже определенных стилей границ.
- границы изображения среза
- Представляет смещения внутрь от краев изображения краев.
- границы изображения ширина
- Определяет значение ширины для вашего изображения границы.
- границы изображения боковик
- Определяет величину, на которую область изображения границы выходит за границы рамки.
- границы изображения растяжения
- Определяет, как стороны и средние части изображения границы должны быть выложены плиткой или масштабированы.
- границы изображения
- Сокращенное свойство для всех свойств изображения границы.
Дополнительные свойства CSS3, связанные с границами и фоном
Когда блок разбивается при разрыве страницы, столбца или строки (для встроенных элементов), свойство box-художественное оформление-разрыв определяет способ обтекания новых блоков рамкой и отступами. С помощью этого свойства фоны можно разделить между несколькими разбитыми прямоугольниками.
Также есть свойство box-shadow, которое можно использовать для добавления теней к элементам box.
С помощью CSS3 вы можете легко настроить веб-страницу с несколькими столбцами без таблиц или сложных структур тегов div. Вы просто сообщаете браузеру, сколько столбцов должно иметь элемент body и насколько они должны быть широки. Кроме того, вы можете добавить границы (правила), цвета фона, которые охватывают высоту столбца, и ваш текст будет автоматически проходить через все столбцы.
CSS3 Columns — Определите количество и ширину столбцов.
Есть три новых свойства, которые позволяют вам определять количество и ширину ваших столбцов:
- ширина колонки
- Определяет ширину ваших столбцов. Затем браузер будет передавать текст, чтобы заполнить пространство столбцами этой ширины.
- колонка подсчета
- Определяет количество столбцов на странице. Затем браузер создаст столбцы, достаточно широкие, чтобы поместиться в пространство, но только указанное вами число.
- столбцы
- Сокращенное свойство, где вы можете определить ширину или число (или оба, но это редко имеет смысл).
CSS3 столбцы пробелы и правила
Пробелы и правила размещаются между столбцами в одном многоколоночном сценарии. Пробелы будут раздвигать столбцы, но правила не занимают места. Если правило столбца шире его пробела, оно будет перекрывать соседние столбцы. Есть пять новых свойств для правил столбцов и пробелов:
- Колонка зазор
- Определяет ширину промежутков между столбцами.
- колонного правило цвета
- Определяет цвет правила.
- колонного правило стиля
- Определяет стиль правила (сплошное, пунктирное, двойное и т. Д.).
- колонного правило ширины
- Определяет ширину правила.
- колонного правило
- Сокращенное свойство, определяющее все три свойства правила столбца одновременно.
CSS3 Разрывы столбцов, Охватывающие столбцы и Заполнение столбцов
Разрывы столбцов используют те же опции CSS2, которые используются для определения разрывов в выгружаемом контенте, но с тремя новыми свойствами: брейк-перед тем, брейк-после, а также брейк-внутри.
Как и в случае с таблицами, вы можете установить элементы для охвата столбцов с помощью свойства column-span. Это позволяет создавать заголовки, которые охватывают несколько столбцов, как газета.
Заполнение столбцов решает, сколько контента будет в каждом столбце. Сбалансированные столбцы пытаются поместить одинаковое количество содержимого в каждый столбец, в то время как auto просто передает содержимое до тех пор, пока столбец не заполнится, а затем переходит к следующему.
Дополнительные функции в CSS3, которые не включены в CSS2
В CSS3 есть множество дополнительных функций, которых не было в CSS2, в том числе:
- Модуль макета шаблона CSS и модуль позиционирования CSS3 Grid: Создание сеток с помощью CSS.
- Текстовый модуль CSS3: Выделение текста и даже создание теней с помощью CSS.
- CSS3 Color module: Теперь с непрозрачностью.
- Изменения в блочной модели: Включая свойство выделения, которое действует как тег IE.
- Модуль интерфейса пользователя CSS3: Предоставление вам новых курсоров, ответов на действия, обязательных полей и даже изменения размера элементов.
- Медиа-запросыМедиа-запросы обеспечивают большую гибкость при определении того, как следует использовать таблицу стилей. Например, вы можете определить таблицу стилей, которая предназначена только для карманных устройств с областью просмотра больше 20em.
- CSS3 Ruby модуль: Обеспечивает поддержку языков, которые используют текстовый ruby для аннотирования документов.
- CSS3 Paged Media модуль: Для еще большей поддержки постраничных носителей (бумага, прозрачная пленка и т. Д.).
- Созданный контент: Запуск верхних и нижних колонтитулов, сносок и другого контента, который создается программно, особенно для выгружаемых носителей.
- CSS3 Речевой модуль: Изменения в слуховом CSS.