Разбирање на главните промени во CSS3
Најголемата разлика помеѓу CSS2 и CSS3 е дека CSS3 е поделена на различни делови, наречени модули. Секој од овие модули се пробива низ W3C во различни фази од процесот на препорака. Овој процес го направи многу полесно за разни парчиња CSS3 да бидат прифатени и имплементирани во прелистувачот од страна на различни производители.
Ако го споредите овој процес со она што се случи со CSS2, каде што сè беше поднесено како единствен документ со сите информации за Каскадни стилски листови во него, ќе почнете да ги видите предностите на кршење на препораката на помали, индивидуални парчиња. Бидејќи секој од модулите се работи индивидуално, имаме многу поширок опсег на поддршка за CSS3 на пребарувачот.
Како и со секоја нова и променлива спецификација, проверете ги вашите CSS3 страници темелно во што повеќе прелистувачи и оперативни системи што можеш. Запомнете дека целта не е да се креираат веб-страници кои изгледаат сосема исти во секој прелистувач, туку да се осигураат дека сите стилови што ги користите, вклучувајќи ги стиловите CSS3, изгледаат одлично во прелистувачите што ги поддржуваат и дека благодатно се враќаат за постарите пребарувачи што немој.
Нови CSS3 селектори
CSS3 нуди голем број нови начини на кои можете да напишете CSS правила со новите CSS селектори, како и нов комбинатор и некои нови псевдо-елементи.
Три нови атрибути селектори:
- Почетниот атрибут е точно елемент [foo ^ = "bar"] Елементот има атрибут наречен foo кој започнува со "бар"
- Етикетите што завршуваат на атрибутот се точно елемент [foo $ = "bar"] Елементот има атрибут наречен foo кој завршува со "бар"
- Атрибутот го содржи елементот за совпаѓање [foo * = "bar"] Елементот има атрибут наречен foo кој содржи низа "бар", на пр.
16 нови псевдокласи:
- : root
- Кореновиот елемент на документот. Во HTML тоа е секогаш.
- : nth-child (n)
- Користете го ова за да одредите точни дете елементи или да користите променливи за да добиете наизменични натпревари.
- : nth-last-child (n)
- Подесете ги точните дете елементи што се бројат од последниот.
- : nth-of-type (n)
- Споредете ги елементите на братството со исто име пред него во дрвото на документи.
- : nth-last-of-type (n)
- Усогласете ги елементите со исто име што се бројат од дното.
- : последно дете
- Одговара на последниот дете елемент на родителот.
- : прв-на-тип
- Одговарајте на првиот елемент на бродот од тој тип.
- : последен-на-тип
- Одговарајте го последниот елемент на братството од тој тип.
- :единствено дете
- Појавете го елементот што е единственото дете на нејзиниот родител.
- : само-од-тип
- Појавете го елементот што е единствен од неговиот тип.
- : празно
- Одговара на елементот кој нема деца (вклучувајќи ги и текстуалните јазли).
- : цел
- Съвпадете елемент, кој е цел на референтниот URI.
- :овозможено
- Подесете го елементот кога е овозможено.
- : оневозможено
- Подесете го елементот кога тој е оневозможен.
- : проверен
- Подесете го елементот кога е проверено (радио копче или поле за избор).
- : не (и)
- Се совпаѓа кога елементот не се совпаѓа со едноставниот селектор .
Еден нов комбинатор:
- елемент А елемент Б
- Се совпаѓа кога елементот Б следи некаде по елементот А, не мора веднаш.
Нови својства
CSS3, исто така, воведе голем број на нови CSS особини. Многу од овие својства беа да се создадат визуелни стилови кои најверојатно би се поврзале повеќе со графичка програма како Фотошоп. Некои од нив, како граница-радиус или сенка за кутија, се околу од воведувањето ако CSS3. Други, како флексибилни или дури и CSS Grid, се понови стилови кои сеуште често се сметаат за CSS3 дополнувања.
Во CSS3 моделот на кутиите не е променет. Но, постојат неколку нови својства кои можат да ви помогнат да ги стимулирате позадините и границите на вашите кутии.
Повеќекратна позадина која ја мислам
Користејќи ги позадинските слики, позадината и позадината-повторувачки стилови, можете да наведете повеќе слики во заднина, кои треба да се вклопуваат едно од друго во полето. Првата слика е слојот најблизок до корисникот, со следните слики насликани позади. Ако има боја на позадина, таа е насликана под сите слоеви на сликата.
Својства на нов стил на позадина
Исто така, постојат некои нови својства во позадина во CSS3.
- позадина-клип
- Оваа особина дефинира како треба да се исече позадинската слика. Стандардно е границата, но може да се смени во полето за пополнување или полето за содржина.
- потекло-потекло
- Овој својство одредува дали позадината треба да биде места во полето за пополнување, границата или кутијата со содржина.
- позадина-големина
- Овој својство ви овозможува да ја наведете големината на позадината. Тоа ви овозможува да ги истегнете помалите слики за да одговараат на страницата.
Промени во постоечките стилови на стил на позадина
Исто така, постојат неколку промени во постоечките својства на стилот на позадина:
- повторување на позадина
- Постојат два нови вредности за овој имот: простор и круг. Просторни простори на плочка слика рамномерно во рамките на кутијата, без да бидат исечени. Кругот ја рефундира сликата во заднина, така што ќе го поплочи цел број пати во полето.
- позадина-приврзаност
- Се додава нова вредност "локална", така што позадината ќе се движи со содржината на елементот кога тој елемент има лента за лизгање.
- позадина
- Скратен стекнатиот имот додава во својствата на големината и потеклото.
CSS3 гранични својства
Во границите на CSS3 можат да бидат стилови на кои сме навикнати (цврсти, двојни, попарени, итн.) Или тие можат да бидат слика. Плус, CSS3 носи можност за создавање заоблени агли. Сликите на границата се интересни затоа што креирате слика од сите четири граници и потоа кажете на CSS како да ја примени таа слика на вашите граници.
Својства на новиот стил на границата
Постојат некои нови граници својства во CSS3:
- граничен радиус
- граница-горен десен-радиус , граница-долен десен-радиус , граница-долен лев радиус , граница-горе-лев радиус
- Овие својства ви овозможуваат да креирате заоблени агли на вашите граници.
- граница-слика-извор
- Ја одредува изворната датотека на сликата која ќе се користи наместо веќе дефинираните гранични стилови.
- граница-слика-парче
- Ги претставува внатрешните поместувања од рабовите на границите на сликата
- граница-слика-ширина
- Ја дефинира вредноста на ширината за вашата граница.
- граница-слика-почеток
- Ја одредува износот што областа на границата се протега надвор од границата.
- граница-слика-се водат
- Дефинира како страничните и средните делови на граничната слика треба да се поплочат или да се измерат.
- граница-слика
- Скратен имот за сите карактеристики на граничната слика.
Дополнителни CSS3 имот поврзани со границите и позадините
Кога кутија е скршена на прекин на страницата, прекин на колоната за прекин на линија (за вградени елементи), сопственоста на кутијата-декорација-пауза дефинира како новите кутии се завиткани со граница и поплочување. Позадините можат да бидат поделени помеѓу повеќе скршени кутии со користење на овој имот.
Исто така има и својство на кутија во сенка што може да се користи за додавање сенки во кутијата.
Со CSS3, сега можете лесно да поставите веб-страница со повеќе колони без табели или сложени структури на одделни ознаки. Едноставно му кажете на прелистувачот колку колони треба да има телесниот елемент и колку треба да бидат широк. Плус можете да додавате граници (правила), бои во заднина кои ја опфаќаат висината на колоната и вашиот текст автоматски ќе тече низ сите колони.
Колони CSS3 - Дефинирајте го бројот и ширината на колоните
Постојат три нови својства кои ви овозможуваат да го дефинирате бројот и ширината на вашите колони:
- Ширина на колона
- Дефинира ширината која треба да биде вашата колумна. Прелистувачот потоа ќе го проследи текстот за да го пополни просторот со шири колони.
- колона-брои
- Го дефинира бројот на колони на страницата. Прегледувачот потоа ќе креира колони доволно широк за да се вклопи во просторот, но само бројот што го одредувате.
- колони
- Скратен имот каде што можете да дефинирате или ширина или број (или и двете, но тоа ретко има смисла).
CSS3 Колонски пропусти и правила
Празнините и правилата се поставени помеѓу колоните во истото повеќеколесно сценарио. Празнините ќе ги издвојат колоните, но правилата не заземаат никаков простор. Ако правилото на колоната е пошироко од тоа, тој ќе се преклопува со соседните колони. постојат пет нови својства за правилата и празнините на колоната:
- колона-јаз
- Ја дефинира ширината на празнините помеѓу колоните.
- колона правило-боја
- Ја дефинира бојата на правилото.
- стил на колона-правило
- Го дефинира стилот на правилото (цврсто, точки, двојно, итн.).
- ширина на колона-правило
- Ја дефинира ширината на правилото.
- колоново правило
- Скратен имот кој ги дефинира сите три својства на правилата на колоната одеднаш.
CSS3 колона паузи, опфаќајќи колони и пополнување колони
Колонските паузи ги користат истите CSS2 опции што се користат за дефинирање на паузи во содржината на paged, но со три нови својства: прекин , прекин и пробивање внатре .
Како и со табели, можете да поставите елементи за да ги распоредите колоните со својството column-span. Ова ви овозможува да креирате наслови кои повеќе ги опфаќаат повеќе колони како весник.
Коловите за полнење одлучуваат колку содржина ќе биде во секоја колона. Балансираните колони се обидуваат да го стават истиот износ на содржина во секоја колона, додека автоматски ја проследува содржината сè додека колоната не е полна, а потоа оди на следното.
Повеќе функции во CSS3 кои не се вклучени во CSS2
Постојат многу дополнителни функции во CSS3 кои не постоеле во CSS2, вклучувајќи:
- Модул за изглед на CSS и модул за позиционирање на мрежни мрежи CSS3 : Креирање мрежи со CSS.
- CSS3 Текст модул : Нацртај текст, па дури и креираш капки со CSS.
- CSS3 Боја модул : Сега со непроѕирност.
- Промени на кутијата модел : Вклучувајќи својство на marquee што делува како ознаката IE.
- Модул за кориснички интерфејс на CSS3 : Ви дава нови курсори, одговори на дејства, потребни полиња, па дури и елементи за промена на големината .
- Медиумски пребарувања : Медиумските пребарувања ви овозможуваат поголема флексибилност при дефинирање како треба да се користи лист со стил. На пример, можете да дефинирате лист со стил кој е само за рачни уреди што имаат преглед поголем од 20em.
- Модул CSS3 Ruby : Обезбедува поддршка за јазици што користат текстуален рубин за да ги коментираат документите.
- CSS3 Paged Media модул : За уште поголема поддршка за paged медиуми (хартија, transparencies, итн).
- Генерирана содржина : L заглавени заглавија и подножја, фусноти и друга содржина што е генерирана програмски, особено за paged медиуми.
- CSS3 Говор модул : Промени на аура CSS.