Разликата между CSS2 и CSS3

Най-голямата разлика между CSS2 и CSS3 е, че CSS3 е разделен на различни раздели, наречен модули. Всеки от тези модули си проправя път през W3C на различни етапи от процеса на препоръка. Този процес улесни много приемането и внедряването на различни части на CSS3 в браузъра от различни производители.

Ако сравните този процес с това, което се случи с CSS2, където всичко беше представено като един документ с всички Каскадни таблици със стилове информация в него, вие започвате да виждате предимствата на разделянето на препоръката на по-малки, отделни парчета. Тъй като по всеки от модулите се работи индивидуално, разработчиците се радват на много по-широка гама от поддръжка на браузъри за CSS3 модули.

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

CSS3 предлага няколко нови начина за писане на CSS правила с нови селектори на CSS, както и нов комбинатор и някои нови псевдоелементи.

Има три нови селектора на атрибути:

• Атрибутът съвпада точно:

  елемент [foo ^ = "bar"]

  Елементът има атрибут, наречен foo, който започва с "bar" напр.
instagram viewer
• Атрибутът съвпада точно:

  елемент [foo $ = "bar"]

  Елементът има атрибут, наречен foo, който завършва с "bar" напр.
• Атрибутът съдържа съвпадението:

  елемент [foo * = "bar"]

  Елементът има атрибут Наречен foo който съдържа низа „бар“.

Въведени са 16 нови псевдокласа:

• : корен
  • Основният елемент на документа.
• : n-то дете (n)
  • Използвайте това за съвпадение на точните дъщерни елементи или използвайте променливи, за да получите редуващи се съвпадения.
• : n-то-последно дете (n)
  • Съвпадение на точни дъщерни елементи, отброяващи от последния.
• : nth-of-type (n)
  • Съпоставете елементите на брат и сестра със същото име пред него в дървото на документа.
• : n-ти-последен от типа (n)
  • Съчетайте братя и сестри с едно и също име, отброяващи отдолу.
• :последно дете
  • Съвпадение с последното детски елемент на родителя.
• : първи от типа
  • Съответства на първия елемент от този тип.
• : последен тип
  • Съвпадение на последния елемент на сестра от този тип.
• :единствено дете
  • Съпоставете елемента, който е единственият дъщерен елемент на родителя си.
• : само от тип
  • Съпоставете елемента, който е единственият от своя тип.
• : празен
  • Съпоставете елемента, който няма деца (включително текстови възли).
• :мишена
  • Съвпадение на елемент, който е целта на препращащия URI.
• : активиран
  • Съпоставете елемента, когато е активиран.
• :хора с увреждания
  • Съответства на елемента, когато е деактивиран.
• : проверено
  • Съпоставете елемента, когато е маркиран (радио бутон или квадратче за отметка).
• : не (а)
  • Съвпадение, когато елементът не съвпада с простия селектори.

Има един нов комбинатор:

• elementA ~ елементB
  • Съвпадение, когато елемент Б следва някъде след елемент А, не непременно веднага.

Нови имоти

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

В CSS3 моделът на кутията не се е променил. Но има куп нови свойства за стил, които могат да ви помогнат да оформите фона и границите на вашите кутии.

Множество фонови изображения

Използвайки стиловете background-image, background-position и background-repeat, можете да зададете множество фонови изображения, които да се наслояват едно върху друго в полето. Първото изображение е най-близкият до потребителя слой, като следните са боядисани отзад. Ако има цвят на фона, той се рисува под всички слоеве на изображението.

Нови свойства на стила на фона

В CSS3 има и някои нови свойства на фона:

• фонов клип
• Това свойство определя как да се изрязва фоновото изображение. По подразбиране е границата, но тя може да бъде променена на полето за подплънки или съдържанието.
• фон-произход
• Това свойство определя дали фонът да се поставя в полето за подплънки, рамката или полето за съдържание.
• размер на фона
• Това свойство показва размер на фоновото изображение. Това ви позволява да разтегнете по-малки изображения, за да се поберат на страницата.

Промени в съществуващите свойства на фоновия стил

Има и няколко промени в съществуващите свойства на фоновия стил:

• фон-повторение
  • Има две нови стойности за това свойство - пространство и кръгъл. Пространството разпределя изображението с плочки равномерно в кутията, без да бъде изрязано. Кръглото преоразмерява фоновото изображение, така че да се поставя цял брой пъти в кутията.
• фон-прикачен файл
  • Добавя се нова стойност „local“, така че фонът ще се превърта със съдържанието на елемента, когато този елемент има лента за превъртане.
• заден план
  • Свойството за стенография на фона добавя свойствата за размер и произход.

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

В CSS3 границите могат да бъдат стиловете, с които сме свикнали (плътни, двойни, прекъснати и т.н.) или могат да бъдат изображение. Освен това CSS3 поддържа заоблени ъгли. Границите са интересни, защото създавате изображение на четирите граници и след това казвате на CSS как да приложите това изображение към вашите граници.

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

В CSS3 има някои нови свойства на границата:

• граница-радиус
• граница-горе-вдясно-радиус, граница-отдолу-вдясно-радиус, граница-отдолу-вляво-радиус, граница-горе-ляво-радиус
• Тези свойства ви позволяват да създавате заоблени ъгли на вашите граници.
• border-image-source
• Задава файла с източник на изображение, който да се използва вместо вече дефинираните стилове на граници.
• border-image-slice
• Представлява вътрешните отмествания от ръбовете на граничното изображение.
• border-image-width
• Определя стойността на ширината за вашето гранично изображение.
• граница-изображение-начало
• Задава количеството, което граничната област на изображението се простира отвъд граничната кутия.
• border-image-stretch
• Определя как страните и средните части на граничното изображение трябва да бъдат облицовани или мащабирани.
• граница-изображение
• Стенографското свойство за всички свойства на граничното изображение.

Допълнителни CSS3 свойства, свързани с граници и фонове

Когато полето е счупено при прекъсване на страница, прекъсване на колона или прекъсване на ред (за вградени елементи), кутия-декорация-почивка свойството дефинира как новите кутии се увиват с контури и подплънки. Фоновете се разделят между няколко счупени кутии, използващи това свойство.

Нова кутия-сянка свойството добавя сенки към елементите на кутията.

С CSS3 вече можете лесно да настроите уеб страница с няколко колони без таблици или сложно div структури на тагове. Просто казвате на браузъра колко колони трябва да има елементът на тялото и колко широки трябва да бъдат. Освен това можете да добавите граници (правила) и цветове на фона, които обхващат височината на колоната, и вашият текст ще преминава автоматично през всички колони.

Определете броя и ширината на колоните

Има три нови Имоти които ви позволяват да дефинирате броя и ширината на колоните си:

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

CSS3 пропуски в колоните и правила

Пропуски и правила се поставят между колони в същия сценарий с много колони. Празнините ще раздалечат колоните, но правилата не заемат място. Ако правило на колона е по-широко от празнината си, то ще припокрива съседни колони. Има пет нови свойства за правила и пропуски в колони:

• колонна пролука
  • Определя ширината на пролуките между колоните.
• колона-правило-цвят
  • Определя цвета на правилото.
• колона-правило-стил
  • Определя стила на правилото (плътно, пунктирано, двойно и т.н.).
• колона-правило-ширина
  • Определя ширината на правилото.
• колона-правило
  • Стенографско свойство, дефиниращо всичките три свойства на правило на колона наведнъж.

CSS3 Прекъсвания на колони, обхващащи се колони и запълващи колони

Колона break използва същите CSS2 опции, използвани за дефиниране на почивки в странично съдържание, но с три нови свойства: прекъсване, прекъсване, и проникване.

Подобно на таблиците, можете да зададете елементи да обхващат колони със свойството колона-обхват. Това ви позволява да създавате заглавия, които обхващат няколко колони, по-скоро като вестник.

Попълването на колони решава колко съдържание ще бъде във всяка колона. Балансираните колони се опитват да поставят еднакво количество съдържание във всяка колона, докато auto просто пренася съдържанието, докато колоната се запълни и след това преминава към следващата.

Още функции в CSS3, които не са включени в CSS2

Има много допълнителни функции в CSS3, които не са съществували в CSS2, включително:

• Модул за оформление на CSS шаблон и модул за позициониране на мрежата CSS3: Създаване на мрежи с CSS.
• CSS3 Текстов модул: Очертайте текст и дори създайте сенки с CSS.
• Цветен модул CSS3: Сега с непрозрачност.
• Промени в модела на кутията: Включително a шатра свойство, което действа като IE таг.
• Модул за потребителски интерфейс CSS3: Предоставя ви нови курсори, отговори на действия, задължителни полета и дори преоразмеряване на елементи.
• Заявки за медии: Медийни заявки ви позволяват по-голяма гъвкавост при определяне на начина, по който трябва да се използва таблица със стилове. Например, можете да дефинирате таблица със стилове, която е само за преносими устройства, които имат прозорец за преглед по-голям от 20em.
• CSS3 Ruby модул: Осигурява поддръжка за езици, които използват текстов рубин за анотиране на документи.
• CSS3 модул за странична медия: За още по-голяма поддръжка на странични носители (хартия, фолиа и др.).
• Генерирано съдържание: Изпълнение на горни и долни колонтитули, бележки под линия и друго съдържание, което се генерира програмно, особено за странични медии.
• CSS3 Речев модул: Промени в звуковия CSS.