Mismunurinn á milli CSS2 og CSS3

Skilningur á helstu breytingum á CSS3

Stærsti munurinn á CSS2 og CSS3 er sú að CSS3 hefur verið skipt í mismunandi hluta sem kallast einingar. Hver þessara einingar er að komast í gegnum W3C á mismunandi stigum meðferðarferlisins. Þetta ferli hefur gert það miklu auðveldara fyrir ýmsar stykki af CSS3 að vera samþykkt og innleitt í vafranum af mismunandi framleiðendum.

Ef þú bera saman þetta ferli við það sem gerðist við CSS2, þar sem allt var sent sem eitt skjal með öllum Cascading Style Sheets upplýsingum innan þess, byrjarðu að sjá kosti þess að brjóta tilmælin upp í smærri einstakra stykki. Vegna þess að hver einingar er unnið á sig, höfum við mikið úrval af stuðningi við vafra fyrir CSS3 einingar.

Eins og með allar nýjar og breyttar forskriftir, vertu viss um að prófa CSS3 síðurnar þínar vandlega í eins mörgum vöfrum og stýrikerfum eins og þú getur. Mundu að markmiðið er ekki að búa til vefsíður sem eru nákvæmlega þau sömu í öllum vafrunum en til að tryggja að allar stíll sem þú notar, þar á meðal CSS3 stíl, líta vel út í vafranum sem styður þá og að þeir falli aftur tignarlega fyrir eldri vafra sem ekki gera.

Nýr CSS3 veljari

CSS3 býður upp á fullt af nýjum leiðum sem hægt er að skrifa CSS reglur með nýjum CSS-valmönnum, auk nýrra combinator og nokkrar nýjar gerviþættir.

Þrír nýir eiginleikar:

• Attribute byrjun passar nákvæmlega þáttur [foo ^ = "bar"] Einingin hefur eiginleika sem kallast foo sem byrjar með "bar" td
• Attribute ending passar nákvæmlega þáttur [foo $ = "bar"] Einingin hefur eiginleika sem kallast foo sem endar með "bar" td
• Eignin inniheldur samsvörunarhlutinn [foo * = "bar"] Einingin hefur eiginleika sem kallast foo sem inniheldur strenginn "bar" td

16 nýjar gervi-flokkar:

• : rót
  • Rót þáttur skjalsins. Í HTML er þetta alltaf.
• : nth-barn (n)
  • Notaðu þetta til að passa nákvæmlega barnsþætti eða nota breytur til að fá til skiptis samsvörunar.
• : n-síðasta barn (n)
  • Samsvörun nákvæmra barnaþátta sem teljast upp frá síðasta.
• : nth-of-type (n)
  • Passaðu systkini þætti með sama nafni fyrir það í skjalatréinu.
• : n-síðasta-af-gerð (n)
  • Passaðu systkini með sama nafni og telja upp frá botninum.
• : síðasta barn
  • Samsvaraðu síðasta barnsþáttur foreldrisins.
• : Fyrstu tegundirnar
  • Passaðu fyrsta systkini frumefnið af þeirri gerð.
• : síðast-af-gerð
  • Passaðu síðustu systkini frumefni af þeirri tegund.
• :einkabarnið
  • Passaðu þáttinn sem er eini barn foreldris síns.
• : eingöngu af gerðinni
  • Passaðu þáttinn sem er eini tegund þess.
• : tómt
  • Passaðu þáttinn sem hefur engin börn (þ.mt textahnútar).
• :skotmark
  • Passaðu þátt sem er miða á tilvísunarnúmerið.
• : virkt
  • Passaðu þáttinn þegar hann er virkur.
• : óvirk
  • Passaðu þáttinn þegar hann er óvirkur.
• : athugað
  • Passaðu þáttinn þegar hann er valinn (hnappur eða kassi).

• : ekki (s)
  • Passa þegar þátturinn passar ekki við einfalda valið s.

Eitt nýtt blöndunartæki:

• þátturA ~ þátturB
  • Samsvörun þegar þáttur B fylgist einhversstaðar eftir elementA, ekki endilega strax.

Nýr eignir

CSS3 kynnti einnig fjölda nýrra CSS eiginleika. Margar af þessum eiginleikum voru að búa til sjónræna stíl sem myndi líklega tengja meira við grafík forrit eins og Photoshop. Sumir af þessum, eins og landamærum radíus eða kassaskugga, hafa verið í kringum kynninguna ef CSS3. Aðrir, eins og flexbox eða jafnvel CSS rist, eru nýrri stíl sem eru enn oft talin CSS3 viðbætur.

Í CSS3 hefur reit líkanið ekki breyst. En það eru fullt af nýjum stílum sem geta hjálpað þér að stilla bakgrunn og landamæri kassanna.

Margfeldi bakgrunni ég mages

Með því að nota bakgrunnsmyndina, bakgrunnsstöðu og bakgrunnsstígunarstíll getur þú tilgreint margar bakgrunnsmyndar sem eru lagskiptir ofan á annan í kassanum. Fyrsta myndin er lagið sem er næst notandanum, með eftirfarandi mála á bak við. Ef bakgrunnslit er, er hún máluð undir öllum myndalögum.

Eiginleikar New Bakgrunnur Style

Það eru einnig nokkrar nýjar bakgrunnsstaðir í CSS3.

• bakgrunnsmynd
  • Þessi eign skilgreinir hvernig á að klippa bakgrunnsmyndina. Sjálfgefin er landamærakassinn, en það er hægt að breyta í padding kassann eða efnisreitinn.
• bakgrunnur uppruna
  • Þessi eign ákvarðar hvort bakgrunnurinn ætti að vera staður í pökkunarglugganum, landamærumarkinu eða efnisreitnum.
• bakgrunnsstærð
  • Þessi eign gerir þér kleift að tilgreina stærð bakgrunnsmyndarinnar. Það gerir þér kleift að teygja smærri myndir til að passa við síðuna.

Breytingar á núverandi eiginleikum bakgrunni

Það eru einnig nokkrar breytingar á núverandi bakgrunnsstílareiginleika:

• bakgrunnur-endurtaka
  • Það eru tvö ný gildi fyrir þessa eign: rúm og umferð. Space rými flísar myndina jafnt innan kassans án þess að vera klippt. Umferð rescales bakgrunnsmyndina þannig að það muni flísar heilmikið í kassanum.
• bakgrunnur-viðhengi
  • Nýtt gildi "staðbundið" er bætt við þannig að bakgrunnurinn muni fletta með innihaldi frumefnisins þegar þessi þáttur hefur skrunastiku.
• bakgrunnur
  • Bakgrunnshorthand eign bætir við í stærð og uppruna eiginleika.

CSS3 Border Properties

Í CSS3 landamærum getur verið stíllinn sem við erum vanir (solid, tvöfaldur, þjóta, osfrv.) Eða þeir geta verið mynd. Auk þess fær CSS3 getu til að búa til ávalar horn. Border myndir eru áhugaverðar vegna þess að þú býrð til mynd af öllum fjórum landamærum og þá segir CSS hvernig á að beita þessari mynd að mörkum þínum.

New Border Style Properties

Það eru nokkur ný landamæri í CSS3:

• landamæris radíus
  • landamæri efst í hægri radíus , landamæris neðst til hægri, radíus neðst til vinstri, radíus efst á vinstri radíus
  • Þessar eiginleikar leyfa þér að búa til ávalar horn á mörkum þínum.
• landamæri-mynd-uppspretta
  • Tilgreinir myndskrármyndina sem á að nota í stað þess að skilgreina landamæri sem eru skilgreindar.
• landamæri-mynd-sneið
  • Táknar inná móti frá landamærum myndarbrúnum
• landamæri-breidd
  • Skilgreinir gildi breiddar fyrir landamæri þitt.
• Landamæri-mynd-upphafi
  • Tilgreinir magnið sem landamæri myndasvæðisins nær lengra en landamærakassinn.
• landamæri-mynd-teygja
  • Skilgreinir hvernig hliðar og miðhlutar landamæra myndarinnar skal flísar eða minnkaðar.
• landamæri-mynd
  • The shorthand eign fyrir alla landamæri mynd eiginleika.

Viðbótarupplýsingar CSS3 Eiginleikar sem tengjast grindum og bakgrunni

Þegar kassi er brotinn á blaðsíðu, dálkhlé fyrir línuskil (fyrir innsláttarþætti) skilgreinir kassaskreytingahlutfallið hvernig nýju kassarnir eru pakkaðar með landamærum og púði. Bakgrunnur má skipta á milli margra brotinna reiti með þessari eign.

Það er líka kassi-skuggi eign sem hægt er að nota til að bæta skugga við kassa þætti.

Með CSS3 getur þú nú auðveldlega sett upp vefsíðu með mörgum dálkum án þess að borða eða flókið skipulag. Þú segir einfaldlega vafranum hversu mörg dálkar líkamsstilinn ætti að hafa og hversu breiður þeir ættu að vera. Auk þess er hægt að bæta við landamærum (reglum), bakgrunnslitum sem ná yfir hæð dálksins og textinn mun flæða í gegnum alla dálka sjálfkrafa.

CSS3 dálkar - Tilgreina fjölda og breidd dálka

Það eru þrjár nýjar eignir sem leyfa þér að skilgreina fjölda og breidd dálka þinnar:

• dálkbreidd
  • Skilgreinir breiddina sem dálkarnir þínir ættu að vera. Vafrinn rennur síðan í textann til að fylla rýmið með dálkum sem eru breiður.
• dálk-telja
  • Skilgreinir fjölda dálka á síðunni. Vafrinn mun síðan búa til dálka sem eru nógu breiður til að passa inn í rýmið, en aðeins númerið sem þú tilgreinir.
• dálka
  • Shorthand eign þar sem þú getur skilgreint annaðhvort breidd eða númer (eða bæði, en það er sjaldan skynsamlegt).

CSS3 dálkur og reglur

Göllum og reglum eru settar á milli dálka í sama fjölskammta atburðarás. Hlið mun ýta í sundur dálkunum, en reglur taka ekki upp pláss. Ef dálkuregla er breiðari en bilið er, mun það skarast við samliggjandi dálka. Það eru fimm nýir eiginleikar fyrir reglur og eyður dálks:

• dálkur-bilið
  • Skilgreinir breidd eyðurnar milli dálka.
• dálkur-regla-litur
  • Skilgreinir lit reglunnar.
• dálkur-regla-stíl
  • Skilgreinir stíl reglunnar (solid, dotted, double, etc.).
• dálkur-regla-breidd
  • Skilgreinir breidd reglunnar.
• dálkurregla
  • A shorthand eign sem skilgreinir allar þrjár dálkur reglu eiginleika í einu.

CSS3 Column Breaks, spennandi dálka og fyllingarsúlur

Dálkurhlé notar sömu CSS2 valkosti sem notaðir eru til að skilgreina brot í síðari innihaldi, en með þremur nýjum eiginleikum: brjóta fyrir , brotna og brjóta inni .

Eins og með töflur er hægt að stilla þætti til að spanna dálkum með dálkssvæðinu. Þetta gerir þér kleift að búa til fyrirsagnir sem ná yfir margar dálkar meira eins og dagblað.

Fyllingartól ákvarðar hversu mikið efni verður í hverri dálki. Balanced dálkar reyna að setja sama magn af efni í hverri dálki meðan sjálfvirk flæði strax innihaldinu þar til dálkurinn er fullur og fer síðan á næsta.

Fleiri eiginleikar í CSS3 Það er ekki innifalið í CSS2

Það eru fullt af viðbótarþáttum í CSS3 sem ekki var til í CSS2, þar á meðal:

• CSS sniðmát skipulagseining og CSS3 Grid staðsetningareining : Búa til rist með CSS.
• CSS3 Textareining : Skýringartexta og jafnvel búið til skuggahugmyndir með CSS.
• CSS3 Litur mát : Nú með ógagnsæi.
• Breytingar á kassamódelinu : Þar með talið eignarmerki sem virkar eins og IE merkið.
• CSS3 User Interface mát : Að gefa þér nýja bendil, svör við aðgerðum, nauðsynlegum reitum og jafnvel stærðarmörkum .
• Fjölmiðlafyrirspurnir : Fjölmiðlafyrirspurnir leyfa þér meiri sveigjanleika þegar þú skilgreinir hvernig stíll lak ætti að nota. Til dæmis gætir þú skilgreint stílblöð sem er aðeins fyrir handfesta tæki sem hafa skoðunarport stærri en 20em.
• CSS3 Ruby mát : Veitir stuðning fyrir tungumál sem nota texta ruby ​​að annotate skjöl.
• CSS3 Paged Media mát : Til að fá meiri stuðning við paged fjölmiðla (pappír, gagnsæi osfrv.).
• Búið til efni : L rásarhausar og fætur, neðanmálsgreinar og annað efni sem er búið til forritað, sérstaklega fyrir paged fjölmiðla.
• CSS3 Talseining : Breytingar á heyrnartækni CSS.