Diferans ki genyen ant CSS2 ak CSS3

Konprann chanjman enpòtan yo nan CSS3

Diferans ki pi gwo ant CSS2 ak CSS3 se ke CSS3 ki te divize moute nan seksyon diferan, rele modil. Chak nan modil sa yo ap fè wout li nan W3C a nan plizyè etap nan pwosesis rekòmandasyon an. Pwosesis sa a te fè li pi fasil pou plizyè moso CSS3 pou aksepte ak aplike nan navigatè a pa manifaktirè diferan.

Si ou konpare pwosesis sa a nan sa ki te pase ak CSS2, kote tout bagay te soumèt kòm yon dokiman sèl ak tout enfòmasyon yo Cascading Style dra nan li, ou kòmanse wè avantaj ki genyen nan kraze rekòmandasyon an moute nan pi piti, moso endividyèl. Paske chak nan modil yo te travay sou endividyèlman, nou gen yon seri pi laj nan sipò navigatè pou CSS3 modil.

Menm jan ak nenpòt ki spesifikasyon nouvo ak chanje, asire w ke ou teste paj CSS3 ou byen nan kòm anpil navigatè ak sistèm opere jan ou kapab. Sonje objektif la se pa kreye paj wèb ki gade egzakteman menm bagay la tou nan chak navigatè, men asire ke nenpòt estil ke ou itilize, ki gen ladan CSS3 Styles, gade gwo nan navigatè yo ki sipòte yo epi yo ke yo tonbe tounen grasyeu pou pi gran navigatè ki pa fè sa.

Nouvo CSS3 selektè

CSS3 ofri yon pakèt nouvo fason ou ka ekri règ CSS ak nouvo CSS selektè, osi byen ke yon nouvo konbinezon, ak kèk nouvo pseudo-eleman yo.

Twa selektè atribi nouvo:

• Atant la kòmanse alimèt egzakteman eleman [foo = = "bar"] eleman an gen yon atribi rele foo ki kòmanse avèk "bar" egzanp
• Atis ki fini alimèt egzakteman eleman [foo = = "bar"] Eleman an gen yon atribi rele foo ki fini ak "bar" egzanp
• Atribi gen eleman nan matche ak [foo * = "bar"] eleman an gen yon atribi rele foo ki gen fisèl la "bar" egzanp

16 nouvo pseudo-klas:

• :rasin
  • Eleman nan rasin nan dokiman an. Nan HTML sa a se toujou.
• : nth-child (n)
  • Sèvi ak sa a matche ak eleman timoun egzak oswa varyab varyab itilize alimèt altène.
• : nth-last-child (n)
  • Match eleman timoun egzak konte moute soti nan yon sèl ki sot pase a.
• : nth-of-type (n)
  • Koresponn ak eleman sibling ak non an menm anvan li nan pyebwa dokiman an.
• : nth-dènye-of-type (n)
  • Koresponn ak sibling eleman ak non an menm konte moute anba nan fon an.
• : dènye-timoun
  • Koresponn ak eleman timoun nan dènye paran an.
• : premye-of-tip
  • Koresponn ak eleman sibling an premye nan ki kalite.
• : dènye-of-type
  • Koresponn ak eleman sibling an dènye nan ki kalite.
• : sèlman-timoun
  • Koresponn ak eleman ki se sèl pitit paran li.
• : sèlman-of-type
  • Koresponn ak eleman ki se youn nan sèlman nan kalite li yo.
• : vid
  • Koresponn ak eleman ki pa gen timoun (ki gen ladan nœuds tèks).
• : sib
  • Koresponn ak yon eleman ki se sib la URI nan refere.
• : pèmèt
  • Koresponn ak eleman an lè li pèmèt.
• : andikape
  • Koresponn ak eleman an lè li andikape.
• : tcheke
  • Koresponn ak eleman an lè li tcheke (bouton radyo oswa kazye).

• : pa (yo)
  • Koresponn ak lè eleman an pa matche ak s selektè a.

Yon nouvo konbinezon:

• elementA ~ elementB
  • Koresponn ak lè elementB swiv yon kote apre elementA, pa nesesèman imedyatman.

Nouvo Pwopriyete

CSS3 te entwodui tou yon kantite nouvo pwopriyete CSS. Anpil nan pwopriyete sa yo te kreye estil vizyèl ki ta gen anpil chans asosye plis ak yon pwogram grafik tankou fotoschop. Gen kèk nan sa yo, tankou fontyè-reyon oswa bwat lonbraj, yo te alantou depi entwodiksyon an si CSS3. Lòt moun, tankou flexbox oswa menm CSS Grid yo se pi nouvo estil ke yo toujou souvan konsidere CSS3 ajoute.

Nan CSS3, modèl la bwat pa chanje. Men, gen yon pakèt moun sou pwopriyete style nouvo ki ka ede w style orijin yo ak sou fwontyè nan bwat ou yo.

Miltip Istorik mwen maj

Sèvi ak background-imaj la, background-pozisyon, ak background-repete estil ou ka presize imaj plizyè imaj yo dwe kouch sou tèt youn ak lòt nan bwat la. Imaj nan premye se kouch ki pi pre itilizatè a, ak sa ki annapre yo ki pentire dèyè. Si gen yon koulè background, li pentire anba a tout kouch imaj yo.

New Style Style Istorik

Genyen tou kèk pwopriyete background nouvo nan CSS3.

• background-clip
  • Pwopriyete sa a defini ki jan imaj la background yo ta dwe koupe. Default la se bwat fwontyè a, men li ka chanje nan bwat la padding oswa bwat la kontni.
• background-orijin
  • Pwopriyete sa a detèmine si wi ou non background nan yo ta dwe kote nan bwat la padding, bwat fwontyè a, oswa bwat la kontni.
• background-gwosè
  • Pwopriyete sa a pèmèt ou endike gwosè imaj imajinasyon an. Li pèmèt ou detire imaj ki pi piti nan anfòm paj la.

Chanjman nan ki deja egziste pwopriyete Style Istorik

Genyen tou yon chanjman kèk nan pwopriyete ki deja egziste style style:

• background-repete
  • Gen de valè nouvo pou pwopriyete sa a: espas ak wonn. Espas espas imaj la tiled respire nan bwat la san ke yo te koupe. Rezidans wonn imaj la background konsa ke li pral mozayik yon nimewo antye nan fwa nan bwat la.
• background-atachman
  • Yon nouvo valè "lokal" te ajoute pou ke background nan ap woule ak kontni eleman an lè eleman sa a gen yon bar woulo liv.
• background
  • Fondamantalman estati a ajoute nan gwosè a ak pwopriyete orijin yo.

CSS3 Border Pwopriyete

Nan fwontyè CSS3 yo ka estil nou itilize yo (solid, doub, tirè, elatriye) oswa yo ka yon imaj. Plus, CSS3 pote nan kapasite nan kreye kwen awondi. Border imaj yo enteresan paske ou kreye yon imaj de tout kat fwontyè yo ak Lè sa a, di CSS la ki jan pou aplike pou imaj nan fwontyè ou yo.

Nouvo Pwopriyete Border Style

Gen kèk pwopriyete fwontyè nouvo nan CSS3:

• fontyè-reyon
  • fwontyè-tèt-dwa-reyon , fwontyè-anba-dwat-reyon , fwontyè-anba-kite-reyon , fwontyè-tèt-gòch-reyon
  • Pwopriyete sa yo pèmèt ou kreye kwen awondi sou fwontyè ou yo.
• fontyè imaj-sous
  • Espesifye dosye a sous imaj yo dwe itilize olye pou yo Styles fwontyè deja defini.
• fontyè imaj-tranch
  • Reprezante offsets yo anndan soti nan bor yo imaj fwontyè
• fontyè-imaj-lajè
  • Defini valè a nan lajè a pou imaj fwontyè ou.
• fontyè-imaj-kòmansman
  • Espesifye kantite lajan zòn imaj fwontyè a depase bwat fwontyè a.
• fontyè-imaj-detire
  • Defini kijan kote ak pati presegondè nan imaj fwontyè a ta dwe tile oswa scaled.
• fontyè imaj
  • Pwopriyetè a shorthand pou tout pwopriyete yo imaj fwontyè.

Lòt CSS3 Pwopriyete ki gen rapò ak Borders ak Backgrounds

Lè yon bwat kase nan yon paj kraze, kolòn kraze pou kraze liy (pou eleman aliminyòm) pwopriyete bwat-decoration-repo defini kòman nouvo bwat yo vlope ak fwontyè ak padding. Istorik yo ka divize ant plizyè bwat kase lè l sèvi avèk pwopriyete sa a.

Genyen tou se yon pwopriyete bwat-lonbraj ki ka itilize yo ajoute lonbraj nan eleman bwat.

Avèk CSS3, ou kapab kounye a fasilman mete kanpe yon paj entènèt ak kolòn miltip san tab oswa estrikti konplè tag div. Ou senpleman di navigatè a ki jan anpil kolòn eleman kò a ta dwe gen ak ki jan lajè yo ta dwe. Plus ou ka ajoute sou fwontyè (règ yo), koulè background ki span wotè nan kolòn nan, ak tèks ou ap koule nan tout kolòn yo otomatikman.

CSS3 Kolòn - Defini Nimewo ak Lajè Kolòn yo

Gen twa pwopriyete nouvo ki pèmèt ou defini nimewo a ak lajè nan kolòn ou:

• kolòn-lajè
  • Defini lajè kolòn ou yo ta dwe. Navigatè a pral Lè sa a, koule tèks la ranpli espas ki la ak kolòn ki lajè.
• kolòn-konte
  • Defini kantite kolòn nan paj la. Navigatè a pral Lè sa a, kreye kolòn lajè ase yo anfòm nan espas ki la, men se sèlman nimewo a ou presize.
• kolòn
  • Shorthand pwopriyete kote ou ka defini swa lajè a oswa nimewo (oswa tou de, men sa raman fè sans).

CSS3 Kolòn twou vid ki genyen ak Règ

Twou vid yo ak règ yo mete ant kolòn nan menm senaryo a multikolumn. Twou vid pral pouse apa kolòn yo, men règleman pa pran tout espas. Si yon règ kolòn se pi laj pase li nan espas, li pral sipèpoze kolòn adjasan. gen senk pwopriyete nouvo pou règ kolòn ak twou vid ki genyen:

• kolòn-espas
  • Defini lajè twou vid ki genyen yo ant kolòn yo.
• kolòn-règ-koulè
  • Defini koulè règ la.
• kolòn-règ-style
  • Defini style la nan règ la (solid, pwent, doub, elatriye).
• kolòn-règ-lajè
  • Defini lajè règ la.
• kolòn-règ
  • Yon pwopriyete shorthand defini tout twa pwopriyete règ kolòn nan yon fwa.

CSS3 Kolòn Breaks, Spanning Columns, ak Kolòn ranpli

Kolòn repo sèvi ak opsyon yo CSS2 menm itilize yo defini repo nan kontni paged, men ak twa pwopriyete nouvo: kraze-anvan , repo-apre , ak kraze-andedan .

Menm jan ak tab, ou ka mete eleman nan kolòn span ak pwopriyete a kolòn-span. Sa a pèmèt ou kreye tit ki span kolòn miltip plis tankou yon jounal.

Konble kolòn yo deside konbyen kontni yo pral nan chak kolòn. Kolòn Balanse eseye mete menm kantite lajan an nan kontni nan chak kolòn pandan y ap oto jis koule kontni an nan jouk kolòn a se plen ak Lè sa a, ale nan yon sèl kap vini an.

Plis karakteristik nan CSS3 ki Aren & # 39; T Enkli nan CSS2

Gen anpil karakteristik adisyonèl nan CSS3 ki pa t egziste nan CSS2, tankou:

• CSS modèl Layout modil ak modil CSS3 gri pwezante : Kreye grilles ak CSS.
• CSS3 Modil tèks : Plan tèks e menm kreye gout-lonbraj ak CSS.
• Modil CSS3 Koulè : Kounye a ak stupidity.
• Chanjman nan modèl la bwat : Ki gen ladan yon pwopriyete marque ki aji tankou tag IE a.
• CSS3 Modil entèfas Itilizatè : Bay ou kurseur nouvo, repons a aksyon, jaden obligatwa, e menm rdimansyonman eleman .
• Media Queries : Demann medya pèmèt ou plis fleksibilite lè ou defini kijan yo ta dwe itilize yon fèy estil. Pou egzanp, ou ta ka defini yon fèy style ki se sèlman pou aparèy pòtatif ki gen yon Viewport pi gwo pase 20em.
• CSS3 Ruby modil : Bay sipò pou lang ki itilize Ruby textuelle pou anote dokiman yo.
• CSS3 Paged Media modil : Pou plis sipò pou medya paged (papye, transparans, elatriye).
• Jenere kontni : L kouri Tèt ak pye, nòt anba tè, ak lòt kontni ki pwodwi pwogramatik, sitou pou medya paged.
• CSS3 Speech modil : Chanjman nan CSS aural.