Ho utloisisa liphetoho tse kholo ho CSS3
Phapang e kholo ka ho fetisisa pakeng tsa CSS2 le CSS3 ke hore CSS3 e arotsoe likarolo tse sa tšoaneng, tse bitsoa modules. E 'ngoe le e' ngoe ea li-modules tsena e ntse e tsoela pele ka W3C ka mekhahlelo e fapaneng ea ts'ebetso. Ts'ebetso ena e entse hore ho be bonolo haholo likarolong tse sa tšoaneng tsa CSS3 ho amoheloa le ho kenngoa ts'ebetsong ho sebapali ka bahlahisi ba fapaneng.
Haeba u bapisa ts'ebetso ena le se etsahetseng ka CSS2, moo ntho e 'ngoe le e' ngoe e neng e rometsoe e le tokomane e le 'ngoe le boitsebiso bohle ba Li-Sheetting tsa Sheetse ka hare ho eona, u qala ho bona melemo ea ho tlōla khothatso ho fihlela likaroloana tse nyenyane. Kahobane e 'ngoe le e' ngoe ea li-modules e ntse e sebetsoa ho motho ka bomong, re na le liphallelo tse ngata tsa sebapali bakeng sa li-modules tsa CSS3.
Joalokaha ho na le moqapi ofe kapa ofe o mocha le oa ho fetola, etsa bonnete ba hore u leka maqephe a hau a CSS3 ka ho feletseng libukeng tse ngata le lisebelisoa tsa ho sebetsa kamoo u ka khonang. Hopola hore sepheo hase ho etsa maqephe a hau a marang-rang a shebahalang hantle ho sebapali se seng le se seng, empa ho netefatsa hore mekhoa leha e le efe eo ue sebelisang, ho kenyeletsa le mekhoa ea CSS3, e shebahala e kholo libukeng tse li tšehetsang le hore li khutlela ka mofuthu ho bapalami ba khale se ke oa.
Likhetho tse ncha tsa CSS3
CSS3 e fana ka lethathamo la litsela tse ncha tseo u ka ngolang CSS ho li khetha ka likhetho tse ncha tsa CSS, hammoho le motsoako o mocha, le likarolo tse ling tse ncha.
Likhetho tse tharo tsa khetho:
- Fana ka lipapali tsa mathomo a qalang hantle ntlha [foo ^ = "bar"] The element e na le tšobotsi e bitsoang foo e qalang ka "bar" mohlala
- Etsa hore qetello e tšoane hantle le ntlha [foo $ = "bar"] The element e na le tšobotsi e bitsoang foo e qetellang ka "bar" mohlala
- Tšobotsi e na le karolo ea match [foo * = "bar"] The element e na le tšobotsi e bitsoang foo e nang le khoele "bar" mohlala
Lihlopha tse 16 tse ncha:
- : motso
- Motsoako oa motsoako. Ka HTML sena ke kamehla.
- : nth-child (n)
- Sebelisa sena ho bapisa lintlha tsa bana hantle kapa sebelisa mefuta-futa ho fumana lipapaling tse ling.
- : Nth-child-child (n)
- Bapisa lintho hantle tsa bana tsa bana ho tloha ho ea ho qetela.
- : nth-of-type (n)
- Metsoalle banab'abo rona ba nang le lebitso le le leng pele ho lona sefateng sa document.
- : nth-last-of-type (n)
- Metsoalle banab'abo rona ba nang le lebitso le tšoanang le ho bala ho tloha ka tlaase.
- : ngoana oa ho qetela
- Bapisa karolo ea ho qetela ea ngoana ea motsoali.
- : oa pele-oa-mofuta
- Tšoana le ngoana oa pele oa mofuta oa mofuta oo.
- : oa ho qetela oa mofuta
- Bapisa ntlha ea ho qetela ea ngoana oa mofuta oo.
- : ngoana feela
- Tšoaea motsoako eo e leng eena feela ngoana oa motsoali oa hae.
- : feela-ea-mofuta
- Bapisa ntho e le 'ngoe feela ea mofuta oa eona.
- : ha e na letho
- Bapisa ntho e se nang bana (ho akarelletsa le li-nodes).
- : sepheo
- Bapisa ntho e hlalosang URI.
- : e nolofalitsoe
- Bapisa ntlha ea eona ha e nolofalitsoe.
- : ba holofetse
- Match the element ha e holofetse.
- : a hlahlojoa
- Tšoaea ntho ea bohlokoa ha e hlahlojoa (sesebelisoa sa seea-le-moea kapa lebokose la poso).
- : ha (s)
- Bapisa ha ntlha e sa lumellane le sesebelisoa se bonolo.
Mochine o mong o mocha:
- elementA ~ elementB
- Bapisa ha elementB e latela kae-kae ka mor'a lintho tsa motheoA, eseng hang-hang.
Mehaho e mecha
CSS3 e boetse e hlahisitse thepa e ncha ea CSS. Boholo ba thepa ena e ne e le ho etsa mekhoa e bonts'ang e ka 'nang ea amahanya haholo le lenaneo la litšoantšo tse kang Photoshop. Tse ling tsa tsena, tse kang moeli-radius kapa lebokose la mokopu, li 'nile tsa e-ba teng ho tloha kenyelletsong haeba CSS3. Tse ling, tse kang flexbox kapa CSS Grid ke mekhoa e ncha e ntseng e atisa ho nkoa e le likarolo tsa CSS3.
Ka CSS3, lebokose la mohlala ha lea fetoha. Empa ho na le sehlopha sa mekhoa e mecha ea mekhoa e ka u thusang hore u khetholle metso le meeli ea mabokose a hau.
Tlhaloso e 'maloa ke lits'ebeletso
U sebelisa setšoantšo sa mokokotlo, boemo ba morao-rao, le mekhoa ea ho khutlela morao u ka hlalosa litšoantšo tse ngata tse ka morao holimo ka lebokoseng. Setšoantšo sa pele ke mocheso o haufi le mofani, 'me tse latelang li pentiloe ka morao. Haeba ho na le 'mala oa mokokotlo, o pentiloe ka tlase ho litšoantšo tsohle.
Matšeliso a Matla a Ncha
Hape ho boetse ho na le matlotlo a macha a CSS3.
- background-clip
- Setša sena se hlalosa kamoo setšoantšo sa mokokotlo se lokelang ho behoa kateng. Ntho e sa lekanyetsoang ke lebokose la moeli, empa le ka fetoloa lebokoseng kapa ho lebokose la litaba.
- semelo sa mokokotlo
- Sebaka sena se etsa hore na semelo se lokela ho ba libaka lebokoseng la marang-rang, lebokose la moeli, kapa lebokoseng la litaba.
- boholo ba mokokotlo
- Setša sena se u lumella ho bontša boholo ba setšoantšo sa morao. E nolofalletsa ho otlolla litšoantšo tse nyenyane ho lumellana le leqephe.
Liphetoho ho Phello ea Hantle Lihlahisoa tsa Matla
Hape ho na le liphetoho tse fokolang ho thepa ea setaele se teng:
- mokokotlo-pheta
- Ho na le litekanyetso tse peli tse ncha tsa thepa ena: sebaka le ho pota. Sebaka se na le setšoantšo se tlamang ka tsela e tšoanang ka hare ho lebokose le se nang ho koaloa. Nako e pota-posa setšoantšo sa mokokotlo e le hore e kenye makhetlo a mangata ka lebokoseng.
- sethaleng sa maqheku
- Ntho e ncha ea "sebaka" e kenyelloa e le hore mokokotlo o tla phalla ka lintho tsa elements ha ntlha eo e e-na le sebaka sa moqolo.
- mokokotlo
- Sebaka sa morao-rao sa thepa se phaella ka boholo le mohloli oa thepa.
CSS3 Matlotlo a Moeli
Ka meeli ea CSS3 e ka ba mekhoa eo re tloaetseng ho e sebelisa (e tiileng, e habeli, e pshatlehileng, joalo-joalo) kapa e ka ba setšoantšo. Ho feta moo, CSS3 e tlisa bokhoni ba ho etsa likhutlo tse pota-potileng. Litšoantšo tse fapaneng li thahasellisa hobane u bōpa setšoantšo sa meeli e mene 'me u bolella CSS hore na u ka sebelisa setšoantšo seo joang ho meeli ea hau.
Mehaho ea Mefuta e Mecha ea Meeli
Ho na le mehaho e mecha ea moeli CSS3:
- moeli-radius
- moeli-ka holimo-lehare-radius , moeli-ka tlaase ho le letona-radius , moeli-ka tlaase-ka letsohong le letšehali-moeli , moeli-ka holimo-lehlakoreng le letšehali
- Lintho tsena li u lumella hore u bōpe likhutlo tse pota-potileng meeli ea hau.
- moeli-image-source
- E khetholla setšoantšo sa mohloli oa setšoantšo se tla sebelisoa ho e-na le mekhoa ea moeli e seng e hlalosoa.
- moeli-image-slice
- E hlahisa li-offset tse ka hare ho tloha meeling ea litšoantšo tsa moeli
- moeli-image-width
- E hlalosa boleng ba bophara bakeng sa setšoantšo sa moeli oa hau.
- moeli-setšoantšo
- E totobatsa chelete eo sebaka sa setšoantšo sa moeli se fetang ka lebokose la moeli.
- border-image-stretch
- E hlalosa kamoo likarolo le likarolo tse bohareng tsa setšoantšo sa moeli li lokelang ho tlameletsoe kateng kapa li fokotsehe.
- moeli-setšoantšo
- Thepa ea shorthand bakeng sa litšoantšo tsohle tsa moeli.
Matlotlo a mang a CSS3 a amanang le Borders le Backgrounds
Ha lebokose le robehile leqepheng la khefu, ho na le khoeli ea khethollo ea mela (bakeng sa lintlha tse ka hare) lebokose-mochine o senyang mokhoa o hlalosang kamoo mabokose a macha a koahetsoeng ka moeli le ho pata. Meeli e ka aroloa pakeng tsa mabokose a mangata a robehileng a sebelisang thepa ena.
Hape ho na le mohaho oa lebokose la lebokose le ka sebelisoang ho eketsa litšoantšo ho lebokose lintlha.
Ka CSS3, joale u ka khona ho theha leqephe la Websaete ka mehala e mengata ntle le litafole kapa mekhoa e thata ea div tag. U mpa u bolella sebadi hore na lihlopha tse ngata tsa 'mele li lokela ho ba le mefuta e mengata hakae. Ho feta moo o ka eketsa meeli (melao), mebala ea mokokotlo e lekanyang bophahamo ba moeli, 'me temana ea hau e tla phalla ka har'a mela e ikemetseng.
Li-Columns tsa CSS3 - Hlalosa Nomoro le Bophara ba Li-Columns
Ho na le lintho tse tharo tse ncha tse u lumellang hore u hlalose palo le bophara ba mehala ea hao:
- bophara ba likarolo
- E hlalosa bophara hore li-columns tsa hau li lokela ho ba. Sebapali se tla phalla temana ho tlatsa sebaka ka mela e kholo.
- khoeli-palo
- E hlalosa palo ea lihlopha leqepheng. Ka mor'a moo, sebapali se tla etsa hore ho be le mehala e mengata e lekaneng ho lumellana le sebaka, empa ke palo feela eo u e hlalosang.
- litšiea
- Sebaka sa Shorthand moo o ka hlalosoang ka bophara kapa palo (kapa ka bobeli, empa seoelo ha se utloahale).
Likhetho le Melao ea Conne ea CSS3
Likhetho le melao li behoa pakeng tsa lihlopha tse tšoanang ka boemo bo tšoanang. Likheo li tla sutumelletsa meqomo, empa melao ha e nke sebaka leha e le sefe. Haeba molao oa khohlopo o le moholo ho feta lekhalo, o tla kopana le lihlopha tse haufi. ho na le thepa e mecha e mehlano bakeng sa melao ea mela le likheo:
- khalase-gap
- E hlalosa bophara ba likheo pakeng tsa lihlopha.
- 'mala-puso-taolo
- E hlalosa 'mala oa molao.
- mokhoa oa puso ea khoeli
- E hlalosa mokhoa oa puso (e tiileng, e nang le makhasi, lebeli, joalo-joalo).
- bophara-puso-bophara
- E hlalosa bophara ba puso.
- puso ea khoeli
- Sebaka se khutsufatsang se hlalosang mekhoa eohle ea litekanyetso tse tharo ka nako e le 'ngoe.
CSS3 Likhetho tsa meqomo, Liqhobo tse qaqileng, le ho tlatsa li-columns
Ho khetholla ha khoeli ho sebelisa likhetho tse tšoanang tsa CSS2 tse sebelisetsoang ho hlalosa likhetho tse nang le likarolo tse fapaneng, empa li na le matlotlo a mararo a macha: khefu-pele , ho senya-ka morao , le ho robeha-ka hare .
Joaloka ka litafole, u ka beha lisebelisoa ho qeta mela e nang le thepa ea mohala-span. Sena se o nolofalletsa ho etsa lihlooho tsa lihlooho tse fanang ka mela e mengata joaloka koranta.
Ho tlatsa li-columns ho etsa qeto ea hore na bokahohleng bo tla ba bokae. Mekhoa e leka-lekaneng e leka ho beha lintho tse lekanang molomong o mong le o mong ha koloi e ntse e phalla likahare ho fihlela moqolo o tletse ebe o ea o latelang.
Lintlha Tse ling tsa CSS3 E le Aren & # 39; t Ho kenyelelitsoe CSS2
Ho na le likarolo tse ling tse ngata tsa CSS3 tse neng li le sieo CSS2, ho akarelletsa:
- Setsi sa mohaho oa setšoantšo sa CSS le modemiso ea CSS3 ea Grid : Ho hlahisa li-gri le CSS.
- CSS3 Mochini oa lenaneo : Tlhalosa molaetsa mme u bōpe litšoantšo ka CSS.
- CSS3 Motsoako oa mobala : Joale o na le opacity.
- Liphetoho ho mohlala oa lebokose : Ho akarelletsa le marquee thepa e sebetsang joaloka letšoao la IE.
- CSS3 Module ea Sebedisa sa Mofuta : Ho u fa li-cursor tse ncha, likarabo ho liketso, masimo a hlokehang, esita le lintho tse nchafatso .
- Lipotso Tsa Media Ka mohlala, u ka hlalosa leqhepe la mokhoa oa matsoho feela bakeng sa lisebelisoa tse nkiloeng ka letsoho tse nang le pono e kholo ho feta 20em.
- Mochini oa Ruby oa CSS3 : O fana ka tšehetso bakeng sa lipuo tse sebelisang texy ruby ho hlahisa mangolo.
- CSS3 Paged Media module : Bakeng sa ts'ehetso e eketsehileng bakeng sa mecha ea phatlalatso ea papali (pampiri, liphatlalatso, joalo-joalo).
- E hlahisitsoeng ka lintho tse latelang: L lihlooho tsa lihlooho le lihlooho tse tlaase, li-footnotes tsa tlaase, le litaba tse ling tse hlahisoang ka lenaneo, haholo-holo bakeng sa mecha ea litaba.
- Mokhoa oa puo oa CSS3 : Liphetoho ho a CSS.