Разбиране на основните промени в CSS3
Най-голямата разлика между CSS2 и CSS3 е, че CSS3 е разделена на различни секции, наречени модули. Всеки от тези модули преминава през W3C в различни етапи от процеса на препоръка. Този процес направи много по-лесно различните стилове CSS3 да бъдат приети и въведени в браузъра от различни производители.
Ако сравните този процес с това, което се случи с CSS2, където всичко е изпратено като един документ с цялата информация за каскадните стилни листове в него, вие започвате да виждате предимствата на прекратяването на препоръката на по-малки, отделни части. Тъй като всеки от модулите се обработва индивидуално, имаме много по-широк обхват на поддръжка на браузъра за CSS3 модули.
Както при всяка нова и променяща се спецификация, не забравяйте да тествате страниците си CSS3 старателно в толкова браузъри и операционни системи, колкото можете. Запомнете, че целта не е да създавате уеб страници, които изглеждат еднакви във всеки браузър, но да се уверите, че всички стилове, които използвате, включително CSS3 стилове, изглеждат страхотно в браузърите, които ги поддържат, и че те се връщат назад с грациозност за по-старите браузъри Недей.
Нови селектори за CSS3
CSS3 предлага куп нови начини, по които можете да напишете CSS правила с нови CSS селектори, както и нов комбинат и някои нови псевдоелементи.
Три селектора на нови атрибути:
- Началото на атрибута съвпада точно с елемента [foo ^ = "bar"] Елементът има атрибут, наречен foo, който започва с "bar" например
- Атрибутът завършва съвпаденията точно елемент [foo $ = "bar"] Елементът има атрибут, наречен foo, който завършва с "bar" например
- Атрибутът съдържа елемент на съвпадението [foo * = "bar"] Елементът има атрибут, наречен foo, който съдържа низа "bar", напр.
16 нови псевдо-класа:
- : корен
- Коренният елемент на документа. В HTML това винаги е.
- : тото-дете (п)
- Използвайте това, за да съответствате на точните детски елементи или да използвате променливи, за да получите променливи съвпадения.
- : п по-миналата дете (п)
- Съчетайте точните детски елементи, които се броят от последния.
- : тото-на-тип (п)
- Съчетайте близки елементи със същото име преди това в дървото на документите.
- : тото последна от тип (п)
- Съчетайте близки елементи със същото име, които се броят отдолу.
- :последно дете
- Съответства на последния детски елемент на родителя.
- : първата по вид
- Сравнете първия елемент на сестра от този тип.
- : последната от тип
- Сравнете последния сестра на този тип.
- :единствено дете
- Съчетайте елемента, който е единственото дете на неговия родител.
- : само-на-тип
- Съответства на елемента, който е единственият от типа му.
- : празна
- Съчетайте елемента, който няма деца (включително текстови възли).
- :мишена
- Съответства елемент, който е целта на препращащия URI.
- Ограничение на трафика
- Съчетайте елемента, когато е активиран.
- :хора с увреждания
- Съчетайте елемента, когато е деактивиран.
- : проверява
- Съчетайте елемента, когато е отметнат (бутон за избор или квадратче за отметка).
- : не (и)
- Съвпадение, когато елементът не съвпада с обикновения селектор s.
Един нов комбайн:
- елементA ~ елементB
- Съвпадение, когато elementB следва някъде след elementA, не непременно незабавно.
Нови свойства
CSS3 въведе и редица нови CSS свойства. Много от тези свойства са създавали визуални стилове, които вероятно биха се асоциирали повече с графична програма като Photoshop. Някои от тях, като радиус на границата или кутия-сянка, са били наоколо от въвеждането, ако CSS3. Други, като flexbox или дори CSS Grid, са по-нови стилове, които все още се смятат за CSS3 допълнения.
В CSS3 моделът на кутията не се е променил. Но има куп нови стил свойства, които могат да ви помогнат стил на фона и границите на вашите кутии.
Множество основи I mages
Използвайки стиловете за фоново изображение, фоново разположение и повторение на фона, можете да зададете множество фонови изображения, които да се наслагват един върху друг в кутията. Първото изображение е слоят, който е най-близък до потребителя, със следните оцветени зад него. Ако има цвят на фона, той е боядисан под всички слоеве на изображението.
Нови характеристики на стил на фона
Има и някои нови свойства във фонов режим в CSS3.
- фон-клип
- Тази собственост дефинира как трябва да се фиксира фоновото изображение. По подразбиране е полето за полета, но може да бъде променено в квадратчето или полето за съдържание.
- фон-произход
- Тази характеристика определя дали фонът трябва да бъде поставен в полето за подложка, кутийката за полета или полето за съдържание.
- фон размер
- Тази характеристика ви позволява да посочите размера на фоновото изображение. Той ви позволява да разтегнете по-малки изображения, за да се поберат на страницата.
Промени в съществуващите стил на фона
Съществуват и няколко промени в съществуващите свойства на стил на фона:
- фон-повторение
- Има две нови стойности за тази собственост: пространство и кръг. Космическите пространства изобразяват равномерно изображението в кутията, без да бъдат подрязани. Кръгът преоразмерява фоновото изображение, така че той да се напечата цял брой пъти в кутията.
- фон-закрепване
- Добавя се нова стойност "локално", така че фонът да се придвижва със съдържанието на елемента, когато този елемент има лента за превъртане.
- заден план
- Характеристиката на стенограмата добавя към размера и свойствата на произхода.
CSS3 гранични свойства
В CSS3 границите могат да бъдат стиловете, за които сме свикнали (твърди, двойни, пунктирани и т.н.) или те могат да бъдат изображение. Плюс това, CSS3 дава възможност за създаване на заоблени ъгли. Граничните изображения са интересни, защото създавате изображение на всичките четири граници и след това кажете на CSS как да приложите това изображение на вашите граници.
Нови характеристики на граничния стил
Има няколко нови свойства на границата в CSS3:
- граничен радиус
- радиус отгоре-десен, радиус отгоре-десен-радиус , радиус отгоре-отдолу-ляв , отгоре-ляв радиус
- Тези свойства ви позволяват да създавате заоблени ъгли на вашите граници.
- гранично-образ-източник
- Задава файла с източник на изображение, който ще се използва вместо вече дефинирани стилове на граници.
- гранично-образ-парче
- Представлява вътрешните офсетни от ръбовете на изображението
- гранично-образ-широчина
- Определя стойността на ширината на вашето изображение на границата.
- гранично-образ-маргинал
- Задава сумата, която граничната площ на изображението се простира извън полето за очертаване.
- гранично-образ-стреч
- Определя как страничните и средните части на изображението на рамката трябва да бъдат покрити или мащабирани.
- гранично-изображение
- Съкращението собственост за всички свойства границата на изображението.
Допълнителни свойства на CSS3, свързани с граници и фонове
Когато една кутия е счупена при прекъсване на страницата, прекъсване на колона за прекъсване на реда (за вградени елементи), собствеността на декорация-декорация дефинира начина, по който новите полета са обвити с граница и подложка. Фонът може да бъде разделен на няколко разделени кутии, използващи това свойство.
Също така има свойство кутия-сянка, която може да се използва за добавяне на сенки към елементите на кутията.
С CSS3 можете лесно да настроите уеб страница с няколко колони без таблици или сложни структури на тагове div. Просто казвате на браузъра колко колони трябва да има елементът на тялото и колко широка трябва да са. Освен това можете да добавите граници (правила), цветове на фона, които покриват височината на колоната и текстът ви ще тече автоматично през всички колони.
CSS3 Columns - Определете броя и ширината на колоните
Има три нови свойства, които ви позволяват да определите броя и ширината на колоните си:
- колона ширина
- Определя ширината, която трябва да бъдат колоните ви. След това браузърът ще потокне текста, за да запълни пространството с широки колони.
- колона броене
- Определя броя на колоните в страницата. След това браузърът ще създаде достатъчно широки колони, които да се поберат в пространството, но само номерът, който посочите.
- колони
- Съдържание на стенограма, където можете да определите ширината или числото (или и двете, но рядко има смисъл).
Кодови празнини и правила в CSS3
Пропуските и правилата се поставят между колоните в един и същи многоцветен сценарий. Пропуските ще изтласкат колоните, но правилата не заемат никакво място. Ако правилото за колона е по-голямо от разликата, то ще се припокрие със съседните колони. има пет нови свойства за правилата и пропуските в колоните:
- колона междина
- Определя ширината на празнините между колоните.
- колонна правило цвят
- Определя цвета на правилото.
- колона правило стил
- Определя стила на правилото (твърдо, пунктирано, двойно и т.н.).
- колонна правило ширина
- Определя ширината на правилото.
- колонна правило
- Съкращаваща собственост, която дефинира всичките три свойства на правилата на колоните наведнъж.
CSS3 прекъсвания на колони, преливане на колони и попълване на колони
Прекъсванията на колони използват същите опции за CSS2, използвани за дефиниране на прекъсвания в страничното съдържание, но с три нови свойства: прекъсване , прекъсване и разбиване .
Подобно на таблиците, можете да зададете елементите, за да обхващате колони с свойството "span column". Това ви позволява да създавате заглавия, които обхващат няколко колони повече като вестник.
Попълващите графи решават колко съдържание ще бъде във всяка колона. Балансираните колони се опитват да поставят една и съща сума от съдържанието във всяка колона, докато автоматичното прехвърляне на съдържанието, докато колоната се запълни и след това отива към следващата.
Още функции в CSS3, които не са включени в CSS2
Има много допълнителни функции в CSS3, които не съществуват в CSS2, включително:
- CSS Модул за оформление на шаблони и CSS3 Модул за позициониране на мрежата : Създаване на решетки с CSS.
- CSS3 Текстов модул : Очертайте текст и дори създавайте кадри с CSS.
- CSS3 Цветен модул : Сега с непрозрачност.
- Промени в модела на кутията : Включително маркерен имот, който действа като IE таг.
- Модул за потребителски интерфейс на CSS3 : Предоставя нови курсори, отговори на действия, задължителни полета и дори елементи с преоразмеряване .
- Заявки за медии : Заявките за медии ви позволяват по-голяма гъвкавост при дефиниране на начина, по който трябва да се използва лист стил. Например можете да определите стилов лист, който е само за ръчни устройства, които имат прозорец за разглеждане, който е по-голям от 20 грама.
- CSS3 Ruby модул : Предоставя поддръжка за езици, които използват текстова рубинка за анотиране на документи.
- CSS3 Paged Media модул : За още по-голяма поддръжка на пейджинг медии (хартия, прозрачно фолио и др.).
- Генерирано съдържание : L изпълняващи заглавки и долни колонтитули, бележки под линия и друго съдържание, което се генерира програмно, особено за пейджинг медии.
- CSS3 Реч модул : Промени в аура CSS.