Разница между CSS2 и CSS3

Дженнифер Кирнин — профессиональный веб-разработчик, помогающий другим в изучении веб-дизайна, HTML, CSS и XML.

Самая большая разница между CSS2 и CSS3 заключается в том, что CSS3 разделен на разные разделы, называемые модули. Каждый из этих модулей проходит через W3C на разных этапах процесса рекомендаций. Этот процесс значительно упростил принятие и реализацию различных частей CSS3 в браузерах разными производителями.

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

Новые селекторы CSS3

CSS3 предлагает несколько новых способов написания правил CSS с новыми селекторами CSS, а также новый комбинатор и некоторые новые псевдоэлементы.

Есть три новых селектора атрибутов:

• Начало атрибута точно соответствует: Элемент имеет атрибут с именем foo, который начинается с «bar», например.
• Окончание атрибута точно совпадает: Элемент имеет атрибут с именем foo, который заканчивается на «bar», например.
• Атрибут содержит совпадение:Элемент имеет атрибут, называемый фу который содержит строку «бар».

Введено 16 новых псевдоклассов:

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

  Есть один новый комбинатор:

  • элементА ~ элементВ
    • Соответствует, когда элемент B следует где-то после элемента A, не обязательно сразу.

    Новые свойства

    CSS3 также представил несколько новых свойств CSS. Многие из этих свойств создают визуальные стили, которые, вероятно, больше ассоциируются с графической программой, такой как Photoshop. Некоторые из них, такие как border-radius или box-shadow, существуют с момента появления CSS3. Другие, такие как flexbox или даже CSS Grid, представляют собой более новые стили, которые до сих пор часто считаются дополнениями CSS3.

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

    Несколько фоновых изображений

    Используя стили background-image, background-position и background-repeat, вы можете указать несколько фоновых изображений, которые будут накладываться друг на друга в поле. Первое изображение — это ближайший к пользователю слой, а следующие — за ним. Если есть фоновый цвет, он закрашивается под всеми слоями изображения.

    Новые свойства стиля фона

    В CSS3 также есть несколько новых свойств фона:

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

    Изменения существующих свойств стиля фона

    Есть также несколько изменений в существующих свойствах стиля фона:

    • фоновый повтор
      • Для этого свойства есть два новых значения — пространство а также круглый. Пространство равномерно размещает мозаичное изображение внутри поля без обрезки. Round изменяет масштаб фонового изображения так, чтобы оно отображалось в поле целое число раз.
      • Добавлено новое значение «local», чтобы фон прокручивался вместе с содержимым элемента, когда этот элемент имеет полосу прокрутки.
      • Свойство сокращенного фона добавляет свойства размера и происхождения.

      Свойства границы CSS3

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

      Новые свойства стиля границы

      В CSS3 есть несколько новых свойств границ:

      • радиус границы
      • граница-верхний-правый-радиус, граница-нижний-правый-радиус, граница-нижний-левый-радиус, граница-верхний-левый-радиус
      • Эти свойства позволяют создавать закругленные углы на границах.
      • граница-изображение-источник
      • Указывает исходный файл изображения, который будет использоваться вместо уже определенных стилей границ.
      • граница-изображение-срез
      • Представляет внутренние смещения от краев изображения границы.
      • граница-изображение-ширина
      • Определяет значение ширины вашего изображения границы.
      • граница-изображение-начало
      • Определяет величину, на которую область изображения границы выходит за границы рамки.
      • граница-изображение-стрейч
      • Определяет, как стороны и средние части изображения границы должны быть мозаичными или масштабированными.
      • граница-изображение
      • Сокращенное свойство для всех свойств border-image.

      Дополнительные свойства CSS3, относящиеся к границам и фону

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

      новый коробка-тень свойство добавляет тени к элементам блока.

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

      Определите количество и ширину столбцов

      Есть три новых свойства, которые позволяют вам определять количество и ширину ваших столбцов:

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

        Пробелы в столбцах CSS3 и правила

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

        • разрыв столбца
          • Определяет ширину промежутков между столбцами.
          • Определяет цвет правила.
          • Определяет стиль линейки (сплошная, пунктирная, двойная и т. д.).
          • Определяет ширину правила.
          • Сокращенное свойство, определяющее сразу все три свойства правила столбца.

          Разрывы столбцов CSS3, связующие столбцы и заполнение столбцов

          Разрывы столбцов используют те же параметры CSS2, что и для определения разрывов в постраничном содержимом, но с тремя новыми свойствами: перерыв перед, перерыв после, а также взлом.

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

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

          Дополнительные возможности CSS3, которых нет в CSS2

          В CSS3 есть множество дополнительных функций, которых не было в CSS2, в том числе:

          голоса

          Рейтинг статьи
          Статья в тему:  14 университетов SEC, Юго-Восточная конференция