Miiye awọn ayipada pataki si CSS3
Iyatọ ti o tobi ju laarin CSS2 ati CSS3 ni pe CSS3 ti pin si awọn apakan oriṣiriṣi, ti a npe ni modulu. Kọọkan ninu awọn modulu wọnyi n ṣe ọna nipasẹ W3C ni orisirisi awọn ipo ti ilana iṣeduro. Ilana yii ti jẹ ki o rọrun fun awọn oriṣiriṣi oriṣiriṣi CSS3 lati gba ati ki a ṣe ni aṣàwákiri nipasẹ awọn oniṣowo oriṣiriṣi.
Ti o ba ṣe afiwe ilana yii si ohun ti o ṣẹlẹ pẹlu CSS2, nibiti a ti gbe ohun gbogbo silẹ gẹgẹbi iwe-kikọ kan pẹlu gbogbo alaye Alaye Cascading Style Sheets ti o wa ninu rẹ, o bẹrẹ lati ri awọn anfani ti fifọ iṣeduro naa sinu diẹ, awọn ege kọọkan. Nitori pe a n ṣiṣẹ kọọkan ninu awọn modulu naa ni oriṣiriṣi, a ni aaye ti o pọju lọpọlọpọ fun atilẹyin ẹrọ lilọ kiri ayelujara fun awọn modulu CSS3.
Gẹgẹbi iyasọtọ titun ati iyipada, ṣe idaniloju lati ṣayẹwo awọn oju-iwe CSS3 rẹ daradara ni ọpọlọpọ awọn aṣàwákiri ati awọn ọna šiše bi o ti le. Ranti awọn ìlépa kii ṣe lati ṣẹda oju-iwe wẹẹbu ti o ni iru kanna ni gbogbo aṣàwákiri, ṣugbọn lati rii daju pe eyikeyi awọn aza ti o lo, pẹlu awọn aza CSS3, wo nla ninu awọn aṣàwákiri ti o ṣe atilẹyin fun wọn ati pe wọn ṣubu ni ore-ọfẹ fun awọn aṣàwákiri àgbàlagbà ma ṣe.
Awọn Aṣayan CSS3 titun
CSS3 nfunni ọpọlọpọ awọn ọna tuntun ti o le kọ awọn ofin CSS pẹlu awọn olutọsọna CSS tuntun, bii olutọpọ tuntun, ati awọn ohun-elo titun ti o jẹ.
Awọn ayanfẹ apẹrẹ titun mẹta:
- Ero ti o bẹrẹ ibaamu gangan ano [foo ^ = "bar"] Awọn eefin ni o ni ẹya ti a npe ni foo ti o bẹrẹ pẹlu "igi" fun apẹẹrẹ
- Awọn ami-ifunni ijinlẹ aṣiṣe gangan gangan [foo $ = "bar"] Iwọn naa ni ẹya ti a npe ni foo ti o pari pẹlu "igi" fun apẹẹrẹ
- Ero ti o ni awọn idiyele tuntun [foo * = "bar"] Iwọn naa ni ẹya ti a npe ni foo ti o ni "igi" okun
16 awọn oju-iwe-pamọ tuntun titun:
- : root
- Awọn orisun root ti iwe-ipamọ. Ni HTML o jẹ nigbagbogbo.
- : nth-ọmọ (n)
- Lo eyi lati baramu awọn ohun elo ọmọ tabi lo awọn oniyipada lati gba awọn ere-idaraya miiran.
- : ọmọ-nth-last (n)
- Ṣe deede ṣe awọn ohun elo ọmọ ti o ka soke lati ọkan ti o kẹhin.
- : nth-of-type (n)
- Ṣe awọn eroja ibọn ti o baamu pẹlu orukọ kanna ṣaaju ki o to ni igi iwe.
- : Nth-last-of-type (n)
- Jẹ ki awọn eroja ti o wa pẹlu ara kanna pẹlu kika kanna lati isalẹ.
- : ọmọ-ikẹhin
- Ṣe afiwe ọmọ ti o kẹhin ọmọ ti obi naa.
- : akọkọ-ti-iru
- Ṣe afiwe aṣiṣe akọkọ ti iru ti iru.
- : igbẹhin-ti-iru
- Ṣe afiwe eleyi ti o kẹhin ti iru rẹ.
- : nikan-ọmọ
- Ṣe afiwe aṣiṣe ti o jẹ ọmọ kanṣoṣo ti obi rẹ.
- : nikan-ti-iru
- Ṣe afiwe aṣiṣe ti o jẹ ọkanṣoṣo ti iru rẹ.
- : sofo
- Ṣe afiwe aṣiṣe ti ko ni ọmọ (pẹlu awọn ọrọ ọrọ).
- : afojusun
- Ṣe afikun ohun ti o jẹ afojusun ti URI ifilo.
- : ṣiṣẹ
- Ṣe afiwe aṣiṣe nigba ti o ṣiṣẹ.
- : alaabo
- Ṣe afiwe aṣiṣe nigba ti o jẹ alaabo.
- : ṣayẹwo
- Ṣe afiwe aṣiṣe nigba ti o ṣayẹwo (bọtini redio tabi apo leta).
- : ko (s)
- Ṣe afiwe nigba ti aṣiṣe ko baramu fun oludari iyankan s.
Olukọni titun kan:
- elementA ~ elementB
- Ṣe afiwe nigba ti anobi ba tẹle ni ibikan lẹhin anoA, kii ṣe dandan lẹsẹkẹsẹ.
Awọn Ohun-ini titun
CSS3 tun ṣe awọn nọmba titun CSS. Ọpọlọpọ awọn ohun-ini wọnyi ni lati ṣẹda awọn aza ti o ṣe ojulowo ti o le ṣe pe diẹ sii pẹlu eto eto eya bi Photoshop. Diẹ ninu awọn wọnyi, bi redio-agbegbe tabi apoti-ojiji, ti wa ni ayika niwon ifihan ti o ba jẹ CSS3. Awọn ẹlomiiran, bi flexbox tabi koda CSS Grid jẹ awọn ti o jẹ titun tuntun ti a tun n ka awọn afikun CSS3.
Ni CSS3, awoṣe apoti ko ti yipada. Ṣugbọn awọn ọna-ara tuntun ti o wa ti o le ṣe iranlọwọ fun ọ lati ṣe igbasilẹ awọn ẹhin ati awọn ẹgbe apoti rẹ.
Orisirisi Isẹle Awọn Mages
Lilo awọn aworan atẹle, ipo-lẹhin, ati awọn ọna kika tun-atunṣe ti o le ṣafihan awọn aworan atẹhin diẹ lati wa ni ori lori ara wọn ninu apoti. Aworan akọkọ jẹ Layer ti o sunmọ ẹlomiran, pẹlu awọn wọnyi ti a ya lẹhin. Ti awọ-awọ lẹhin ba wa, o ya ni isalẹ gbogbo awọn aworan fẹlẹfẹlẹ.
Awọn Ohun-ini Ẹda Titun Titun
Awọn ohun elo tuntun miiran ni CSS3 tun wa.
- lẹhin-agekuru
- Ilẹ-ini yii ṣe apejuwe bi o ṣe yẹ ki o pa aworan ti o kọja. Iyipada ni apoti aala, ṣugbọn o le ṣe iyipada si apoti apamọ tabi apoti akoonu.
- isale-ibẹrẹ
- Ohun ini yi pinnu boya isale yẹ ki o wa ni awọn aaye ninu apoti ipamọ, apoti aala, tabi apoti akoonu.
- lẹhin-iwọn
- Ilẹ-ini yi jẹ ki o tọka iwọn ti aworan lẹhin. O faye gba o lati ṣafihan awọn aworan kekere lati fi oju si oju-iwe naa.
Awọn ayipada si awọn abuda Awọn ẹya ara wa tẹlẹ
Tun wa awọn ayipada diẹ si awọn ẹya-ara ti o wa tẹlẹ:
- lẹhin-tun
- Awọn nọmba tuntun titun fun ohun-ini yi: aaye ati yika. Awọn aaye Space fun awọn aworan ti a fi oju ṣe laileto laarin apoti lai ni pa. Yika ṣe atigbese aworan atẹle ki o yoo gba gbogbo nọmba igba ni apoti.
- lẹhin-asomọ
- A ṣe afikun "agbegbe" tuntun kan ki lẹhin naa yoo yi lọ pẹlu akoonu ti ero nigba ti o ba ni ifilelẹ yiyan.
- lẹhin
- Ohun-ini itanran-lẹhin ti ṣe afikun ni awọn iwọn ati awọn ohun ini.
Awọn Ile-iṣẹ Border Agbegbe CSS3
Ni awọn aala CSS3 le jẹ awọn aza ti a nlo si (ti o lagbara, ti ilọpo, dashed, bbl) tabi ti wọn le jẹ aworan. Pẹlupẹlu, CSS3 n mu agbara wa lati ṣẹda awọn igun yika. Awọn aworan aala jẹ awon nitori o ṣẹda aworan ti gbogbo awọn aala mẹrin ati lẹhinna sọ fun CSS bi o ṣe le lo aworan naa si awọn aala rẹ.
Awọn Ohun-ini Ọpa Titun Titun
Awọn ohun-ini ile-iṣẹ titun wa ni CSS3:
- radius-aala-eti
- ẹẹmeji-oke-ọtun-radius , radius- aala-ọtun-radius , aala-isalẹ-osi-radius , aala-oke-osi-radius
- Awọn ohun-ini wọnyi gba ọ laaye lati ṣẹda awọn igun-agunka lori awọn aala rẹ.
- orisun-ala-orisun
- N ṣe apejuwe faili orisun aworan lati lo dipo awọn ami ti aala ti tẹlẹ ti ṣe alaye.
- Bọtini-aworan-ala-ilẹ
- O n gbe awọn inward offs lati awọn igun aworan aala
- ifilelẹ-aworan-iwọn
- Ṣe alaye iye ti iwọn fun aworan aala rẹ.
- Ifilelẹ awọn aworan-ala-ilẹ
- N ṣe iyeye iye ti agbegbe aworan agbegbe ti o kọja kọja apoti apoti.
- ifilelẹ-aworan-na
- Ṣe apejuwe bi o ṣe yẹ ki awọn ẹgbẹ ati awọn ẹya arin ti aworan ti a ni ẹwọn ti ni ẹda tabi ti iwọn.
- aworan-aala
- Ohun-ini ti a ti kuru fun gbogbo awọn ohun-ini ere-aala.
Awọn Ohun-elo CSS3 afikun awọn ti o ni ibatan si Awọn aala ati abẹlẹ
Nigbati apoti kan ba ṣẹ ni oju-iwe iwe, adehun iwe fun isinmi ila (fun awọn eroja inline) ohun-ọṣọ-ọṣọ-adehun jẹ alaye bi a ṣe ṣajọ awọn apoti titun pẹlu aala ati iderun. A le pin abẹlẹ laarin ọpọlọpọ awọn apoti fifọ lilo ohun ini yii.
Tun wa ti ohun-ini ojiji-apoti ti a le lo lati fi awọn ojiji si awọn eroja apoti.
Pẹlu CSS3, o le ni iṣeto ṣeto oju-iwe ayelujara kan pẹlu awọn ọwọn ti kii ṣe pẹlu awọn tabili tabi awọn aami tag tag. O sọ fun aṣàwákiri bi ọpọlọpọ awọn ọwọn ẹya ara gbọdọ ni ati bi o ṣe yẹ ki wọn jẹ. Pẹpẹ o le fi awọn aala kun (awọn ofin), awọn awọ lẹhin ti o ni gigun ti iwe, ati ọrọ rẹ yoo ṣàn gbogbo awọn ọwọn laifọwọyi.
Awọn ọwọn CSS3 - Ṣeto awọn Nọmba ati Iwọn ti Awọn ọwọn
Awọn ohun-elo titun titun wa ti o gba ọ laaye lati ṣọkasi nọmba ati iwọn ti awọn ọwọn rẹ:
- iwe-ẹgbẹ-ẹgbẹ
- Ṣe apejuwe iwọn rẹ awọn ọwọn yẹ ki o jẹ. Nigbakugba naa yoo ṣawari ọrọ naa lati kun aaye pẹlu awọn ọwọn ti o gbooro.
- iwe-iwe-iwe
- Ṣe alaye awọn nọmba ti awọn ọwọn lori iwe. Oluṣakoso naa yoo ṣẹda awọn ọwọn jakejado to gun lati fi ipele ti aaye, ṣugbọn nọmba nikan ti o pato.
- awọn ọwọn
- Ohun ini kukuru nibi ti o ti le ṣalaye boya awọn iwọn tabi nọmba (tabi mejeeji, ṣugbọn ti o ṣọwọn ko ni oye).
CSS3 Awọn Ipele iwe ati awọn Ofin
Awọn aaye ati awọn ofin wa ni aarin laarin awọn ọwọn ni iṣiro multicolumn kanna. Awọn iwọla yoo fa awọn ọwọn kuro, ṣugbọn awọn ofin ko gba aaye kankan. Ti o ba jẹ opo ofin ti o tobi ju ti o gboro lọ, o yoo ṣe afikun awọn ọwọn ti o sunmọ. awọn ohun titun titun wa fun awọn ofin ẹgbẹ ati awọn ela:
- iwe-igun-iwe
- Ṣe alaye iwọn awọn ela laarin awọn ọwọn.
- iwe-ofin-iwe
- Ṣe alaye awọ ti ofin naa.
- iwe-aṣẹ-iwe-ofin
- Ṣe apejuwe ara ti ofin (aṣoju, ti o ni ami, meji, bbl).
- iwe-iṣakoso-ẹgbẹ-iwe
- Ṣe apejuwe iwọn ti ofin naa.
- Ofin-ẹgbẹ
- Ohun ini kukuru ti o ṣalaye gbogbo awọn ofin ijọba mẹta ni ẹẹkan.
CSS3 Awọn Ipa iwe, Awọn itọka ti a ṣafihan, ati Awọn ọwọn Awọn kikun
Ilana kọlu lilo awọn CSS2 kanna awọn aṣayan ti a lo lati ṣe ipinnu fi opin si akoonu ti o bajẹ, ṣugbọn pẹlu awọn ohun-ini titun: fifin-ṣaaju , isinmi , ati fifọ-inu .
Gẹgẹbi awọn tabili, o le ṣeto awọn eroja lati gbin awọn ọwọn pẹlu ohun ini ile-iwe. Eyi n gba ọ laaye lati ṣẹda awọn akọle ti o tẹ awọn ọwọn ọpọ sii diẹ sii bi irohin kan.
Nmu awọn ọwọn ti pinnu iye ti akoonu yoo wa ni awọn iwe-iwe kọọkan. Awọn ọwọn ti o ṣe deede ṣe igbiyanju lati fi iye kanna ti awọn akoonu inu iwe kọọkan nigba ti idojukọ kan n ṣabọ akoonu inu titi ti iwe naa yoo kun ati lẹhin naa lọ si ekeji.
Awọn ẹya ara ẹrọ diẹ sii ni CSS3 Pe Aren & Fi kun ni CSS2
Ọpọlọpọ awọn ẹya afikun ni CSS3 ti ko si tẹlẹ ni CSS2, pẹlu:
- CSS Ipele agbekalẹ awoṣe ati CSS3 Grid module module : Ṣiṣẹda awọn grids pẹlu CSS.
- CSS3 Ikọkọ ọrọ : Ọrọ ti a firanṣẹ ati paapaa ṣẹda awọn ojiji-oju-iboju pẹlu CSS.
- CSS3 Awọ awo : Nisisiyi pẹlu opacity.
- Awọn ayipada si awoṣe apoti : Pẹlú ohun elo ti o jẹ ami ti o ṣe bi IE tag.
- CSS3 Atọka Ọlọpọọmídíà olumulo : Fun ọ ni awọn olubisi tuntun, awọn esi si awọn iṣẹ, awọn aaye ti a beere, ati paapaa awọn ohun elo ti n ṣalaye .
- Awọn Iwadi Media : Iwadi igbasilẹ gba ọ laaye diẹ sii ni irọrun nigbati o ba ṣe alaye bi o ṣe yẹ ki a lo iru aṣọ kan. Fun apeere, o le ṣafọjuwe asomọ ti ara ti o jẹ fun awọn ẹrọ isakoṣo nikan ti o ni oju-wiwo ti o tobi ju 20m lọ.
- CSS3 Ruby module : N pese atilẹyin fun awọn ede ti o lo rubii ọrọ sii lati ṣafọ iwe.
- CSS3 Paged Media module : Fun ani atilẹyin diẹ sii fun paged media (iwe, transparencies, ati be be lo).
- Awọn akoonu ti o ṣẹda : L nkọ awọn akọle ati awọn ẹlẹsẹ, awọn akọsilẹ ẹsẹ, ati awọn akoonu miiran ti a ṣe ipilẹṣẹ eto eto, paapaa fun media media.
- CSS3 Ọrọ igbimọ : Awọn ayipada si CSS iral.