A 'tuigsinn nan atharrachaidhean mòra ann an CSS3
Is e an t-eadar-dhealachadh as motha eadar CSS2 agus CSS3 gu bheil CSS3 air a roinn ann an earrannan eadar-dhealaichte, ris an canar modalan. Tha gach aon de na modalan seo a 'dèanamh adhartas tron W3C ann an diofar ìrean den phròiseas molaidh. Tha am pròiseas seo air a dhèanamh nas fhasa dha diofar pìosan CSS3 a bhith air an gabhail ris agus air an cur an gnìomh sa bhrobhsair le luchd-dèanamh eadar-dhealaichte.
Ma choimheadas tu ris a 'phròiseas seo gu dè thachair le CSS2, far an deach a h-uile càil a chuir a-steach mar aon phàipear leis a h-uile fiosrachadh Cascading Style Sheets taobh a-staigh e, bidh thu a' faicinn na buannachdan a tha ann a bhith a 'briseadh a' mholaidh gu pìosan beaga. Seach gu bheil gach aon de na modalan air a h-obrachadh leotha fhèin, tha raon nas fharsainge de thaic bhrabhsair againn airson modalan CSS3.
Coltach ri sònrachadh ùr is atharrachaidh sam bith, dèan cinnteach gun dèan thu sgrùdadh air na duilleagan CSS3 agad gu math ann an uiread de bhrabhsairean agus de shiostaman obrachaidh mar as urrainn dhut. Cuimhnich nach e an amas a bhith a 'cruthachadh duilleagan lìn a tha a' coimhead dìreach mar a tha anns gach brabhsair, ach dèanamh cinnteach gu bheil stoidhlichean sam bith a chleachdas tu, a 'gabhail a-steach stoidhlean CSS3, a' coimhead math anns na brabhsairean a bheir taic dhaibh agus gu bheil iad a 'tuiteam air ais gu gràsmhor airson brabhsairean nas sine Na dèan.
Roghnairean ùra CSS3
Tha CSS3 a 'tabhann grunn dhòighean ùra air an urrainn dhut riaghailtean CSS a sgrìobhadh le luchd-taisbeanaidh CSS ùr, a bharrachd air co-chomharra ùr, agus cuid de na h-eileamaidean ùra.
Trì taghraichean gnè ùr:
- Tòisichidh toiseach a 'maidseadh dìreach an eileamaid [foo ^ = "bar"] Tha adhbhar aig an eileamaid ris an canar foo a tha a' tòiseachadh le "bar" me
- Bidh an crìoch a 'maidseadh rudeigin dìreach [foo $ = "bar"] Tha adhbhar aig an eileamaid ris an canar foo a tha a' crìochnachadh le "bar" me
- Tha gnè anns a 'gheama [foo * = "bar"] Tha adhbhar aig an eileamaid ris an canar foo anns a bheil an "slat" sreang
16 clasaichean fiadhaich ùra:
- : root
- Am prìomh phàirt den sgrìobhainn. Ann an HTML tha seo an-còmhnaidh.
- : nth-leanabh (n)
- Cleachd seo gus rudan eile a cho-fhreagairt airson pàiste no atharrachaidhean a chleachdadh gus maidsean alternating fhaighinn.
- : nth-last-child (n)
- Maids eilthranan mionaideach cloinne a 'cunntadh bhon aon mu dheireadh.
- : nth-de-seòrsa (n)
- Dèanamaidean maids sibling leis an aon ainm ro-làimh sa chraobh sgrìobhainnean.
- : nth-last-of-type (n)
- Eilimearan sibling maids leis an aon ainm a 'cunntadh suas bhon bhonn.
- : leanabh mu dheireadh
- Dèan maids eadar an eileamaid leanabh mu dheireadh den phàrant.
- : a 'chiad-de-seòrsa
- Maids a 'chiad eileamaid sibling den t-seòrsa sin.
- : last-of-type
- Dèan maids eadar an eileamaid mu dheireadh sibling den t-seòrsa sin.
- : aon-leanabh
- Maids an eileamaid a tha an aon phàiste a phàrant.
- : dìreach-de-seòrsa
- Dèan maids eadar an eileamaid a tha an aon fhear den t-seòrsa aice.
- : falamh
- Maids an eileamaid aig nach eil clann (a 'gabhail a-steach nodan teacsa).
- : targaid
- Maids eileamaid a tha mar amas air an URI a tha a 'toirt iomradh.
- : comas
- Dèan maids eadar an eileamaid nuair a tha e comasach.
- : ciorramach
- Maids an eileamaid nuair a tha e ciorramach.
- : sgrùdadh
- Maids an eileamaid nuair a thèid a sgrùdadh (putan rèidio no bogsa-dearbhaidh).
- : chan eil (ean)
Aon co-luadar ùr:
- elementA ~ elementB
- Dèan maids nuair a bhios elementB a 'leantainn an àiteigin às dèidh elementA, chan e gu feum sa bhad.
Feartan ùra
Thug CSS3 cuideachd grunn thogalaichean ùra CSS. B 'e mòran de na togalaichean sin stoidhlichean lèirsinneach a chruthachadh a bhiodh dualtach a bhith a' ceangal barrachd ri prògram grafaigeach leithid Photoshop. Tha cuid dhiubh sin, mar radius crìoch no bogsa-bogsa, air a bhith mun cuairt bhon ro-ràdh ma tha CSS3. Tha feadhainn eile, leithid flexbox no eadhon Grid CSS nan stoidhlichean nas ùire a tha fhathast air am meas gu mòr ri cuiridhean CSS3.
Ann an CSS3, chan eil modail na bogsa air atharrachadh. Ach tha grunn thogalaichean stoidhle ùra a dh'fhaodas do chuideachadh a 'stoidhle cùl-ionadan agus crìochan nam bogsaichean agad.
Iomadh cùl-fhiosrachadh Bidh mi a 'magadh
A 'cleachdadh cùl-ìomhaigh, suidheachadh cùl-raoin, agus stoidhle cùl-ath-bheothachaidh, faodaidh tu iomadh ìomhaigh cùl-raoin a chomharrachadh a tha air a cheangal air mullach a chèile sa bhogsa. Is e a 'chiad ìomhaigh an tè as fhaisg air an neach-cleachdaidh, le na leanas air an peantadh air a chùlaibh. Ma tha dath cùl-raoin ann, thèid a pheantadh gu h-ìosal air fad nan seallaidhean deilbh.
Ainmean Stoidhle Cùl-fhiosrachadh Ùra
Tha cuid de thogalaichean ùra ann an CSS3 cuideachd.
- cùl-clip
- Tha an togalach seo a 'mìneachadh mar a bu chòir an ìomhaigh cùil a bhith air a ghearradh. Is e am bogsa bunaiteach am bogsa crìche, ach faodar an atharrachadh chun a 'bhogsa pàdachaidh no am bogsa susbaint.
- cùl-eachdraidh
- Tha an togalach seo a 'co-dhùnadh am bu chòir don chùl-raon a bhith nan àiteachan anns a' bhogsa pàirdidh, am bogsa crìche, no am bogsa susbaint.
- meud-cùil
- Tha an togalach seo a 'leigeil leat sealltainn meud an ìomhaigh cùil. Tha e a 'toirt cothrom dhut ìomhaighean nas lugha a shìneadh gus an duilleag fhilleadh.
Atharrachaidhean air togalaichean stoidhle cùl-fhiosrachadh a tha ann an-dràsta
Tha beagan atharrachaidhean ann cuideachd ri togalaichean a tha ann mar-thà:
- cùl-ath-aithris
- Tha dà luach ùr ann airson an togalaich seo: àite agus cuairt. Bidh àite air a chlò-bhualadh gu h-ìosal anns a 'bhogsa gun a bhith air a ghearradh. Bidh a 'chuairt cruinn ag ath-dhealbhadh an ìomhaigh cùil gus am bi e na laighe grunn thursan sa bhogsa.
- cùl-ceangail
- Thèid luach ùr "ionadail" a chur ris gus am bi an cùl-raon a 'gluasad le susbaint an eileamaid nuair a bhios barra-scrollaidh aig an eileamaid sin.
- cùl-raon
- Tha an cùl-raon cùl-raoin a 'cur ri togalaichean meud agus tùs.
Feartan Crìochan CSS3
Ann an crìochan CSS3 's urrainn dhuinn na stoidhlichean a bhios sinn a' cleachdadh (cruaidh, dùbailte, dùbailte, msaa) no faodaidh iad a bhith nan ìomhaigh. Cuideachd, bheir CSS3 a-steach comas oiseanan cruinne a chruthachadh. Tha ìomhaighean crìche inntinneach oir tha thu a 'cruthachadh ìomhaigh de na ceithir crìochan agus an uair sin innis do CSS mar a chuireas tu an dealbh sin a-steach gu do chrìochan.
Dealbhan stoidhle ùra a 'chrìochan
Tha cuid de thaighean crìche ùr ann an CSS3:
- radius-crìche
- radius top-top-right , radius bonn-clì-deas , radius bonn-clì-clì- , radius clì -mullach-clì-clì
- Leigidh na feartan sin dhut oiseanan cruinne a chruthachadh air do chrìochan.
- border-image-source
- A 'sònrachadh an fhaidhle stòr ìomhaigh a thèid a chleachdadh an àite stoidhlichean crìche a chaidh a mhìneachadh mar-thà
- border-image-slice
- Bidh iad a 'riochdachadh na tobhtaichean a-staigh bho na h-oirean ìomhaighean crìche
- crìochan-ìomhaigh-leud
- A 'mìneachadh luach an leud airson an ìomhaigh chrìche agad.
- border-image-outset
- A 'sònrachadh an t-sùim a tha a' cheàrnaidh deilbh crìche a 'sìneadh seachad air a' bhogsa chrìche
- border-image-stretch
- A 'mìneachadh mar a bu chòir taobhan agus pàirtean meadhain ìomhaigh na crìche a bhith air an dèanamh le clach no sgèile.
- dealbh-crìche
- An sealbhachd goirid airson na togalaichean ìomhaighean crìche uile.
Feartan CSS3 a bharrachd co-cheangailte ri Crìochan agus Cùl-fhiosrachadh
Nuair a thèid bocsa a bhriseadh aig briseadh duilleag, briseadh colbh airson briseadh loidhne (airson eileamaidean in-loidhne) tha an t-seilbh briste-sgeadachadh a 'mìneachadh mar a tha na bogsaichean ùra air an ceangal le crìochan agus rèiteachadh. Faodar cùl-fhiosrachadh a roinn eadar iomadh bogsa briste a tha a 'cleachdadh an togalaich seo.
Tha cuideachd seilbh bogsa-bogsa ann a dh'fhaodar a chleachdadh gus sgàilean a chur ri eileamaidean bogsa.
Le CSS3, is urrainn dhut a-nis gu furasta làrach-lìn a stèidheachadh le iomadh colbhan gun bhùird no structaran tagaichean iom-fhillte. Tha thu dìreach ag innse don bhrobhsair cia mheud colbhan a bu chòir a bhith aig an eileamaid corp agus dè cho leathann 'sa bu chòir dhaibh a bhith. A bharrachd, faodaidh tu crìoch a chur air crìochan (riaghailtean), dathan cùl-raon a tha a 'ruith àirde a' cholbh, agus sgaoilidh an teacsa tro na colbhan gu fèin-obrachail.
Colbhan CSS3 - Sgrìobh àireamh agus leud na Colbhan
Tha trì thogalaichean ùra a leigeas leat mìneachadh àireamh agus leud nan colbhan agad:
- leud-colbh
- A 'mìneachadh an leud a bu chòir do cholbhan a bhith. An uairsin sruthaidh am brabhsair an teacsa gus an àite a lìonadh le colbhan a tha farsaing.
- cunntas-colbh
- A 'mìneachadh àireamh nan colbhan air an duilleig. An uairsin cruthaichidh am brabhsair colbhan farsaing gu leòr gus a dhol a-steach don àite, ach dìreach an àireamh a tha thu a 'sònrachadh.
- colbhan
- Maoin ghoirid far am faod thu a bhith a 'mìneachadh an leud no an àireamh (no an dà chuid, ach glè thric a' dèanamh ciall).
Beàrnan agus Riaghailtean Colbh CSS3
Tha beàrnan agus riaghailtean air an cur eadar colbhan anns an aon suidheachadh multicolumn. Bidh beàrnan a 'putadh air falbh bho na colbhan, ach cha bhi riaghailtean a' gabhail àite sam bith. Ma tha riaghailt colbh nas fharsainge na beàrn a th 'ann, bidh e a' dol thairis air colbhan faisg air làimh. tha còig togalaichean ùra ann airson riaghailtean colbh agus beàrnan:
- bheàrn-colbh
- A 'mìneachadh farsaingeachd nam beàrnan eadar na colbhan.
- colbh-riaghailt-dath
- A 'mìneachadh dath an riaghailt.
- colbh-riaghailt-stoidhle
- A 'mìneachadh stoidhle an riaghailt (cruaidh, lùbte, dùbailte, msaa).
- leud-riaghailt colbh
- A 'mìneachadh farsaingeachd an riaghailt.
- riaghailt colbh
- Togal goirid goirid a 'mìneachadh nan seilbh trì riaghailtean colbh aig an aon àm.
Briseadh colbh CSS3, a 'toirt seachad colbhan, agus colbhan lìonadh
Bidh briseadh colbh a ' cleachdadh na h-aon roghainnean CSS2 a thathar a' cleachdadh gus briseadh ann an susbaint paged, ach le trì togalaichean ùra: briste-before , break-after , agus break-inside .
Coltach ri clàran, faodaidh tu na h-eileamaidean a rèiteachadh gus colbhan a shealbhachadh le seilbh an colbh-span. Leigidh seo leat cinn-chinn a chruthachadh a tha a 'sgaoileadh grunn cholbhan nas coltaiche ri pàipear-naidheachd.
Bidh colbhan lìonadh a 'co-dhùnadh dè an t-susbaint a bhios anns gach colbh. Feuchaidh colbhan co-chothrom an aon uiread de shusbaint a chur anns gach colbh fhad 's a tha uidheam dìreach a' sruthadh an stuth gus am bi a 'cholbh làn agus an uairsin a' dol chun an ath fhear.
Barrachd fheartan ann an CSS3 nach gabh a ghabhail a-steach ann an CSS2
Tha mòran de fheartan a bharrachd ann an CSS3 nach robh ann an CSS2, nam measg:
- Modal cruth CSS template agus CSS3 Modal suidheachadh grid : A 'cruthachadh ghriodaichean le CSS.
- Modal Teacs CSS3 : Thoir cunntas air teacsa agus eadhon cruthaich drop-shadows le CSS.
- Modal dath dath CSS3 : A-nis le dìomhaireachd.
- Atharrachaidhean air modail a 'bhogsa : A' gabhail a-steach togalach seilbh a tha mar an tag IE.
- Modal Eadar-aghaidh Cleachdaiche CSS3 : A 'toirt dhut cùrsaran ùra, freagairtean do ghnìomhan, raointean riatanach, agus eadhon eilthireachd ath-mheudachadh .
- Ceistean mu na meadhanan : Leigidh ceistean nam meadhanan barrachd sùbailteachd dhut nuair a tha thu a 'mìneachadh mar a bu chòir duilleag stoidhle a chleachdadh. Mar eisimpleir, dh'fhaodadh tu duilleag stoidhle a mhìneachadh a tha a-mhàin airson innealan-làimhe aig a bheil sealladh nas motha na 20em.
- Modal Ruby CSS3 : A 'toirt taic do chànanan a bhios a' cleachdadh ruby teacsa gus sgrìobhainnean a sgrìobhadh.
- Modal Paged Media : Airson taic a bharrachd a bharrachd airson meadhanan paged (pàipear, transparencies, msaa).
- Susbaint air a ghinealachadh : cinn-cinn agus sgeirean-ruith L, notaichean-coise, agus susbaint eile a thèid a chruthachadh gu prògramach, gu h-àraidh airson meadhanan paged.
- Modal òraid CSS3 : Atharrachaidhean air CSS fuaimneach.