Розніца паміж CSS2 і CSS3

Разуменне асноўных змяненняў у CSS3

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

Калі параўнаць гэты працэс з таго, што здарылася з CSS2, дзе ўсё было прадстаўлена ў выглядзе адзінага дакумента з усімі каскадныя табліцы стыляў інфармацыі ў ім, вы пачынаеце бачыць перавагі ломкі рэкамендацыю на больш дробныя, асобныя кавалкі. Паколькі кожны з модуляў прапрацоўваецца індывідуальна, у нас ёсць значна больш шырокі спектр падтрымкі браўзэра для CSS3 модуляў.

Як і з любой новай і якое змяняецца спецыфікацыі, не забудзьцеся старанна праверыць свае CSS3 старонкі, як многія браўзэры і аперацыйныя сістэмы, як вы можаце. Памятаеце, мэта складаецца ў тым, каб не ствараць вэб-старонкі, якія выглядаюць сапраўды гэтак жа ў любым браўзэры, але для таго, каб любыя стылі, якія вы выкарыстоўваеце, у тым ліку стылі CSS3, выдатна глядзяцца ў браўзэрах, якія падтрымліваюць іх, і што яны адступаюць грацыёзна для старых браўзэраў, не.

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

CSS3 прапануе кучу новых спосабаў, вы можаце напісаць правілы CSS з новымі CSS селектараў, а таксама новы камбінатар, а таксама некалькі новых псеўда-элементаў.

Тры новыя селектары атрыбутаў:

• Атрыбут пачатку дакладна адпавядае элементу [Foo = «бар»] Элемент мае атрыбут з імем Foo , які пачынаецца з «барам» , напрыклад ,
• Атрыбут сканчаюцца матчаў менавіта элемент [Foo $ = «бар»] Элемент мае атрыбут з імем Foo , які заканчваецца «бар» , напрыклад ,
• Атрыбут ўтрымлівае элемент адпаведнасці [Foo = «бар»] Элемент мае атрыбут з імем Foo , які змяшчае радок «бар» , напрыклад ,

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

• : корань
  • Каранёвай элемент дакумента. У HTML гэта заўсёды.
• : П-й дзіця (п)
  • Выкарыстоўвайце гэта, каб адпавядаць дакладным даччыным элементаў, ці выкарыстоўваць зменныя, каб атрымаць чаргуюцца матчы.
• : П-га апошняга дзіцяці (п)
  • Дакладнае супадзенне даччыных элементаў падлічваючы ад апошняга.
• : П-га з-тыпу (п)
  • Матч аднаўзроўневых элементаў з тым жа імем, перад гэтым у дрэве дакумента.
• : П-й апошні з-тыпу (п)
  • Матч аднаўзроўневых элементаў з тым жа імем лічачы знізу ўверх.
• : Апошні дзіця
  • Супастаўце апошні даччыны элемент з бацькоў.
• : Ва- першых, з-тыпу
  • Матч першага роднаснага элемента гэтага тыпу.
• : Апошні з тыпу
  • Матч апошняга роднаснага элемента гэтага тыпу.
• : Толькі-дзіця
  • Супастаўце элемент, які з'яўляецца адзіным нашчадкам свайго бацькі.
• : Толькі-оф-тыпу
  • Супастаўце элемент, які з'яўляецца адзіным у сваім родзе.
• : пуста
  • Супастаўце элемент, які не мае дзяцей (у тым ліку тэкставых вузлоў).
• : мэта
  • Матч элемент, які з'яўляецца аб'ектам які спасылаецца URI.
• : уключаны
  • Супастаўце элемент, калі ён уключаны.
• : адключана
  • Супастаўце элемент, калі ён адключаны.
• : праверана
  • Супастаўце элемент, калі ён праверыў (кнопка радыё або сцяжок).

• : Не (ы)
  • Калі элемент не адпавядае простаму селектары с.

Адзін новы камбінатар:

• Elementa ~ elementB
  • Матч, калі elementB варта дзесьці пасля Elementa, не абавязкова адразу.

новыя ўласцівасці

CSS3 таксама прадставіў шэраг новых уласцівасцяў CSS. Многія з гэтых уласцівасцяў былі ствараць візуальныя стылі, якія, хутчэй за ўсё, асацыююцца больш з графічнай праграмай, як Photoshop. Некаторыя з іх, такія як межы радыуса або каробкавай цені, былі вакол з моманту ўвядзення, калі CSS3. Іншыя, такія як Flexbox ці нават CSS сеткі з'яўляюцца новымі стылямі, якія да гэтага часу часта лічыцца CSS3 дадаткам.

У CSS3, мадэль скрынкі не змянілася. Але ёсць куча новых уласцівасцяў стылю, якія могуць дапамагчы вам стыль фоны і рамкі вашых скрынь.

Некалькі чараўнікоў Фон I

Выкарыстанне фонавага малюнка, фон-пазіцыю, і фон-паўтарыць стылі можна пазначыць некалькі фонавых малюнкаў напластоўваць адзін на аднаго ў поле. Першае выява ўяўляе сабой пласт бліжэй да карыстача, з наступнымі з іх афарбаваны ззаду. Калі ёсць колер фону, распісана ніжэй усіх слаёў выявы.

Новыя ўласцівасці фону Стыль

Ёсць таксама некаторыя новыя ўласцівасці фону ў CSS3.

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

Змены існуючых уласцівасцяў фону Стыль

Ёсць таксама некалькі зменаў у існуючыя ўласцівасці фону ў стылі:

• фон-паўтарыць
  • Ёсць два новых значэння для гэтага ўласцівасці: прастора і круглыя. Касмічныя прасторы пліткавых малюнкаў раўнамерна ўнутры скрынкі без абрэжуць. Круглыя ​​перемасштабирует фонавы малюнак, так што ён будзе плітка цэлага ліку раз у поле.
• фон-ўкладанне
  • Новае значэнне «лакальнае" дадаецца так, што фон будзе пракручваць з змесцівам элемента, калі гэты элемент мае паласу пракруткі.
• фон
  • Фон скарочанае ўласцівасць дадае памеру і паходжання уласцівасцяў.

CSS3 ўласцівасць Памежнага

У CSS3 мяжы могуць быць стылі мы прывыклі (суцэльная, двайная, пункцірнай і г.д.), або яны могуць быць малюнак. Акрамя таго, CSS3 прыносіць здольнасць ствараць закругленыя куты. Памежныя малюнка цікавыя тым, што вы ствараеце вобраз усіх чатырох межаў, а затым сказаць CSS, як прымяніць гэты вобраз да вашых межаў.

Новыя ўласцівасці Border Style

Ёсць некаторыя новыя ўласцівасці межаў у CSS3:

• мяжа радыусу
  • мяжы верхняга правага радыусу, межы ніжняга правага радыусу, межы ніжні левы-радыус, межы верхняга левага радыуса
  • Гэтыя ўласцівасці дазваляюць ствараць закругленыя куты на сваіх межах.
• межы малюнка крыніцы
  • Паказвае крыніца малюнка файл, які будзе выкарыстоўвацца замест стыляў межаў ужо вызначаны.
• межы малюнка зрэзу
  • Ўяўляе сабой унутранае зрушэнне ад краёў малюнка мяжы
• межы малюнка шырыня
  • Вызначае значэнне шырыні для вашай межы малюнка.
• межы малюнка боковик
  • Паказвае колькасць, што вобласць малюнка мяжа выходзіць за межы акна мяжы.
• межы малюнка расцяжэння
  • Вызначае, як бакі і сярэднія часткі межы малюнка павінны быць выкладзеныя пліткай або маштабаванне.
• межы малюнка
  • Скарочанае ўласцівасць для ўсіх уласцівасцяў выявы мяжы.

Дадатковыя ўласцівасці CSS3, якія адносяцца да межаў і фону

Калі акно разбіваюцца на разрыве старонкі, калонкі перапынак для разрыву радка (для ўбудаваных элементаў) ўласцівасць каробкавай ўпрыгожвання-брэйк вызначае, як новыя скрынкі абгорнутыя межамі і абіўкай. Фон можа быць падзелены паміж некалькімі зламанымі скрынямі, выкарыстоўваючы гэтую ўласцівасць.

Там таксама ёсць акно-цень ўласцівасць, якое можа быць выкарыстана для дадання цені баксаваць элементы.

З дапамогай CSS3, зараз вы можаце лёгка наладзіць вэб-старонку з некалькімі калонкамі без табліц або складаных структур Div тэгаў. Вы проста паведаміць браўзэру, колькі калонак элемент кузава павінен мець і наколькі шырока яны павінны быць. Акрамя таго, вы можаце дадаць мяжы (правілы), колер фону, якія ахопліваюць вышыню слупа, і ваш тэкст будзе цячы праз усе слупкі аўтаматычна.

CSS3 Стоўбцы - вызначыць колькасць і шырыню слупкоў

Ёсць тры новыя ўласцівасці , якія дазваляюць вызначыць колькасць і шырыню вашых калонак:

• калонка шырыня
  • Вызначае шырыню вашых калонкі павінны быць. Браўзэр будзе цячы тэкст, каб запоўніць прастору з калонамі, якія шырока.
• калонка падліку
  • Вызначае колькасць слупкоў на старонцы. Браўзэр будзе ствараць слупкі досыць шырокія, каб змясціцца ў прасторы, але толькі нумар, які вы пакажа.
• слупкі
  • Скарочаныя ўласцівасць, дзе вы можаце вызначыць шырыню альбо лічбу (або абодва, але гэта рэдка мае сэнс).

CSS3 Прабелы слупкоў і правілы

Прабелу і правілы змяшчаюцца паміж калонамі ў тым жа многоколоночный сцэнары. Прабелы будуць расштурхваюць слупкі, але правілы не займаюць месцы. Калі правіла слупка шырэй, чым гэта разрыў, яна будзе перакрываць суседнія слупкі. Ёсць пяць новых уласцівасцяў для правілаў слупкоў і прабелаў:

• калонка зазор
  • Вызначае шырыню зазораў паміж калонамі.
• калоннай правіла колеру
  • Вызначае колер правілы.
• калоннай правіла стылю
  • Вызначае стыль правілы (суцэльная, пункцір, двайны і г.д.).
• калоннай правіла шырыні
  • Вызначае шырыню правілы.
• калоннай правіла
  • Скарочанае ўласцівасць вызначэння ўсіх трох уласцівасцяў правілы калонкі адразу.

CSS3 Перапынкі Калонка, Spanning Калоны і заправачныя калонкі

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

Як з табліцамі, вы можаце ўсталяваць элементы для перакрыцця слупкоў з уласцівасцю слупка дыяпазону. Гэта дазваляе ствараць загалоўкі, якія ахопліваюць некалькі слупкоў больш нагадвае газета.

Запаўненне слупкоў вырашае, колькі змест будзе ў кожным слупку. Збалансаваныя калонкі спрабуюць паставіць аднолькавая колькасць змесціва ў кожнай калонцы ў той час як аўто проста цякуць змесціва, пакуль калона не запоўненая, а затым пераходзіць да наступнага.

Дадатковыя функцыі ў CSS3 Гэта Арэны & # 39; T Уключаныя ў CSS2

Ёсць шмат дадатковых функцый у CSS3, якія не існуюць у CSS2, у тым ліку:

• CSS модуль макета шаблону і модуль пазіцыянавання CSS3 сеткі: Стварэнне сеткі з дапамогай CSS.
• CSS3 Text модуль: Схема тэкст і нават стварыць падальную цень з дапамогай CSS.
• Модуль CSS3 Color: Зараз з непразрыстасцю.
• Змены ў мадэлі скрынкі: у тым ліку ў шацёр уласнасці , які дзейнічае як тэг IE.
• CSS3 Модуль інтэрфейсу карыстальніка: Прадастаўленне Вам новыя курсоры, адказы на дзеянні, неабходныя палі, і нават змена памераў элементаў .
• Медыя запыты: СМІ запыты дазваляюць вялікую гнуткасць пры вызначэнні таго, як варта выкарыстоўваць табліцы стыляў. Напрыклад, вы маглі б вызначыць табліцу стыляў, якая прызначана толькі для партатыўных прылад, якія маюць відавы экран большага памеру, чым 20em.
• Модуль CSS3 Ruby: Забяспечвае падтрымку для моў, якія выкарыстоўваюць тэкставы лал для анатаваньня дакументаў.
• Модуль CSS3 Paged СМІ: Для яшчэ большай падтрымкі для старонкавых носьбітаў (папера, празрыстыя плёнкі і г.д.).
• Сфармавана змест: L працуе загалоўкі і ніжнія калантытула, зноскі, і іншы кантэнт , які генеруецца праграмна, асабліва для старонкавых СМІ.
• CSS3 Модуль прамовы: Змены ў слыхавым CSS.