Ag tuiscint na mór-athruithe ar CSS3
Is é an difríocht is mó idir CSS2 agus CSS3 ná go bhfuil CSS3 roinnte ina rannóga éagsúla, ar a dtugtar modúil. Tá gach ceann de na modúil seo ag dul ar aghaidh tríd an W3C i gcéimeanna éagsúla den phróiseas molta. Chuir an próiseas seo i bhfad níos éasca do phíosaí éagsúla CSS3 a bheith glactha agus curtha i bhfeidhm sa bhrabhsálaí ag monaróirí éagsúla.
Má chuireann tú an próiseas seo i gcomparáid leis an méid a tharla le CSS2, i gcás go gcuirfí gach rud isteach mar dhoiciméad aonair leis an bhfaisnéis go léir ar an mBileog Stíl Cascáide taobh istigh de, tosaíonn tú ar na buntáistí a bhaineann leis an moladh a bhriseadh suas i bpíosaí beaga níos lú. Ós rud é go bhfuil gach ceann de na modúil á n-oibriú ar leithligh, tá raon níos leithne de thacaíocht bhrabhsálaí againn do mhodúil CSS3.
Mar aon le haon sonraíocht nua agus athraithe, bí cinnte go ndearna tú do leathanaigh CSS3 a thástáil go maith i cibé brabhsálaithe agus córais oibriúcháin is féidir leat. Cuimhnigh nach é an sprioc ná leathanaigh ghréasáin a chruthú a bhfuil an chuma céanna orthu i ngach brabhsálaí, ach a chinntiú go bhfeicfeá aon stíleanna a úsáideann tú, lena n-áirítear stíleanna CSS3, sna brabhsálaithe a thacaíonn leo agus go dtéann siad siar go grinn do bhrabhsálaithe níos sine ná.
Roghnóirí Nua CSS3
Cuireann CSS3 bealaí nua ar fáil duit is féidir leat rialacha CSS a scríobh le roghnóirí CSS nua, chomh maith le combinator nua, agus roinnt pseudo-eilimintí nua.
Trí roghnóir tréith nua:
- Tagann tús tréith le gné díreach [foo ^ = "bar"] Tá tréith ag an eilimint ar a dtugtar foo a thosaíonn le "barra" m.sh.
- Tagann deireadh le tréith go díreach eilimint [foo $ = "bar"] Tá tréith ag an eilimint ar a dtugtar foo a chríochnaíonn le "barra" eg
- Tá an ghné mheaitseála [foo * = "barra" sa ghné] Tá tréith ag an eilimint ar a dtugtar foo ina bhfuil an "barra" teaghrán m.sh.
16 pseudo-ranganna nua:
- : fréimhe
- Príomheilimint an doiciméid. I HTML tá sé seo i gcónaí.
- : nth-leanbh (n)
- Bain úsáid as seo chun eilimintí leanúnacha cearta a mheaitseáil nó athróga a úsáid chun cluichí alternating a fháil.
- : nth-last-child (n)
- Meaitseáil eilimintí leanúnacha cruinn ag teacht suas ón gceann deireanach.
- : nth-of-type (n)
- Meaitseáil eilimintí deartháireacha leis an ainm céanna roimh an gcrann doiciméad.
- : nth-last-of-type (n)
- Meaitseáil eilimintí deartháireacha leis an ainm céanna ag comhaireamh suas ón mbun.
- : leanbh deireanach
- Meaitseáil leis an eilimint leanbh deiridh den tuismitheoir.
- : chéad-den chineál
- Meaitseáil an chéad eilimint sibling den chineál sin.
- : deiridh den chineál
- Meaitseáil leis an eilimint deirfiúr deiridh den chineál sin.
- :páiste aonair
- Meaitseáil leis an eilimint is í an t-aon leanbh a tuismitheoir.
- : amháin-de-chineál
- Meaitseáil leis an eilimint is é an t-aon cheann dá chineál.
- : folamh
- Meaitseáil leis an eilimint nach bhfuil aon leanaí (lena n-áirítear nóid téacs).
- : sprioc
- Meaitseáil le eilimint is é an sprioc atá ag an URI a thagraíonn.
- : cumasaithe
- Meaitseáil leis an eilimint nuair atá sé cumasaithe.
- :faoi mhíchumas
- Déan an ghné a mheaitseáil nuair atá sé faoi mhíchumas.
- : sheiceáil
- Déan an ghné a mheaitseáil nuair a dhéantar é a sheiceáil (cnaipe raidió nó bosca seiceála).
- : ní (í)
- Meaitseáil nuair nach ionann an eilimint leis an roghnóir simplí.
Combinator nua amháin:
- elementA ~ elementB
- Meaitseáil nuair a leanann elementB áit éigin tar éis elementA, ní gá go láithreach.
Airíonna Nua
Thug CSS3 roinnt maoine nua CSS isteach freisin. Ba é go leor de na hairíonna seo stíleanna amhairc a chruthú a d'fhéadfadh a bheith níos mó le clár grafaicí cosúil le Photoshop. Tá cuid acu seo, cosúil le gaire teorann nó bosca-scáth, thart ó tugadh isteach iad más CSS3. Is iad na daoine eile, cosúil le flexbox nó fiú Grid CSS stíleanna níos nuaí a mheastar go minic breiseáin CSS3.
I CSS3, níor athraigh múnla an bhosca. Ach tá roinnt maoine stíl nua ann a chabhróidh leat stíl a dhéanamh ar chúlraí agus ar theorainneacha do bhoscaí.
Cúlra Il I mages
Ag baint úsáide as an íomhá cúlra, suíomh cúlra, agus stíleanna athchúrsála is féidir leat a dhéanamh go n-áiritheofar íomhánna cúlra éagsúla ar a chéile sa bhosca. Is é an chéad íomhá an ciseal is gaire don úsáideoir, agus na cinn seo a leanas péinteáilte taobh thiar de. Má tá dath cúlra ann, tá sé péinteáilte thíos na sraitheanna íomhá ar fad.
Airíonna Stíl Cúlra Nua
Tá roinnt maoine cúlra nua ann i CSS3 freisin.
- gearr-ghearr
- Sainmhíníonn an mhaoin seo conas ba cheart an íomhá cúlra a bheith clipped. Is é an bosca teorann an réamhshocrú, ach is féidir é a athrú go dtí an bosca padála nó an bosca ábhar.
- bunús cúlra
- Cinneann an mhaoin seo an chóir go mbeadh an cúlra ina n-áiteanna sa bhosca stuála, sa bhosca teorann, nó sa bhosca ábhar.
- méid cúlra
- Ceadaíonn an mhaoin duit méid an íomhá chúlra a léiriú. Ligeann sé duit íomhánna níos lú a shíneadh a d'oirfeadh an leathanach.
Athruithe ar Airíonna Stíl Cúlra atá ann cheana
Tá roinnt athruithe ann freisin ar na hairíonna stíl chúlra atá ann cheana:
- cúlra-athuair
- Tá dhá luach nua ann don mhaoin seo: spás agus babhta. Spásanna spáis an íomhá tíl go cothrom laistigh den bhosca gan a bheith clipped. Déanann an babhta an íomhá cúlra a athsholáthar ionas go mbeidh sé ag líonadh go leor uaireanta sa bhosca.
- cúlra-iatán
- Cuirtear luach "áitiúil" nua ionas go scrollaíonn an cúlra le hábhar an eilimint nuair a bhíonn barra scrollaithe ag an eilimint sin.
- cúlra
- Cuireann an maoin ghearrliosta cúlra sna maoine mhéid agus tionscnaimh.
Airíonna Teorann CSS3
Is féidir le teorainneacha CSS3 na stíleanna a mbainimid úsáid astu (soladach, dúbailte, díshed, etc.) nó is féidir leo a bheith ina íomhá. Ina theannta sin, tugann CSS3 an cumas coirnéil chothromaithe a chruthú. Tá íomhánna teorann suimiúil toisc go gcruthóidh tú íomhá de na ceithre theorainneacha agus ansin insint do CSS conas an íomhá sin a chur i bhfeidhm ar do theorainneacha.
Airíonna Nua Stíl Teorann
Tá roinnt airíonna teorann nua i CSS3:
- ga theorann
- teorainn-barr-dheis-ghaire , gaol -bun-dheis-ghaire , gaol -bun-chlé-gha , teorainn-barr-chlé-gha
- Tugann na hairíonna seo deis duit coirnéil chothromaithe a chruthú ar do theorainneacha.
- teorann-íomhá-fhoinse
- Sonraíonn an comhad foinse íomhá a úsáid in ionad na stíleanna teorann atá sainmhínithe cheana féin.
- teorainn-íomhá-slice
- Léiríonn sé na sreabhadh isteach ó imeall íomhá na teorann
- teorainn-íomhá-leithead
- Sainmhínítear luach an leithead d'íomhá na teorann.
- teorainn-íomhá-outset
- Sonraíonn an méid a shíneann limistéar an íomhá teorann thar an mbosca teorann.
- teorainn-íomhá-stráice
- Sainmhínítear cén chaoi ar chóir taobhanna agus lárchodanna an íomhá teorann a thíleáil nó a scála.
- teorann-íomhá
- An mhaoin ghearrliosta do na hairíonna íomhá teorann go léir.
Airíonna CSS3 breise a bhaineann le Teorainneacha agus Cúlraí
Nuair a bhriseadh bosca ag sos leathanach, briseadh colún do bhriseadh líne (le haghaidh eilimintí inlíne), sainmhíníonn an tseirbhís bhosca-maisiúcháin conas a chuirtear na boscaí nua le teorainn agus le stuáil. Is féidir cúlraí a roinnt idir boscaí briste il a úsáideann an mhaoin seo.
Tá mais bhosca ann freisin ar féidir a úsáid chun scáthanna a chur le heilimintí bhosca.
Le CSS3, is féidir leat leathanach Gréasáin a chur ar bun go héasca le colúin éagsúla gan táblaí nó struchtúir chlib dúchasacha. Inseoidh tú an bhrabhsálaí go simplí cé mhéad colún a bheadh ag an eilimint chomhlachta agus cé chomh leathan agus ba chóir dóibh a bheith. Ina theannta sin is féidir leat teorainneacha (rialacha) a chur le chéile, dathanna cúlra a théann ar airde an cholúin, agus sreabhadh do théacs tríd na colúin go huathoibríoch.
Colúin CSS3 - Sainmhínigh Líon agus Leithead na gColúin
Tá trí mhaoin nua ann a ligeann duit líon agus leithead do cholúin a shainiú:
- colún-leithead
- Sainmhínítear an leithead a d'fhéadfadh do cholúin a bheith. Ansin sreabfaidh an brabhsálaí an téacs chun an spás a líonadh le colúin atá leathan.
- colún-chomhaireamh
- Sainmhínítear líon na gcolún ar an leathanach. Ansin déanfaidh an brabhsálaí colúin leathan go leor a d'oirfeadh sa spás, ach amháin an uimhir a shonraíonn tú.
- colúin
- Maoin ghearrláimhe áit ar féidir leat an leithead nó an líon a shainmhíniú (nó an dá cheann, ach is annamh a chiallaíonn sin).
Bearnaí agus Rialacha Colún CSS3
Cuirtear bearnaí agus rialacha i bhfeidhm idir na colúin sa chás ilbhliantúil céanna. Cuirfidh bearnaí bualadh ar na colúin, ach ní ghlacann rialacha le spás ar bith. Má tá riail colún níos leithne ná an bhearna, déanfaidh sé forluí colúin in aice láimhe. tá cúig mhaoin nua ann maidir le rialacha agus bearnaí colún:
- colún-bhearna
- Sainmhínítear leithead na mbearnaí idir na colúin.
- colún-riail-dath
- Sainmhínítear dath an riail.
- colún-riail-stíl
- Sainmhínítear stíl an riail (soladach, dromchla, dúbailte, etc.).
- colún-riail-leithead
- Sainmhínítear leithead an riail.
- colún-riail
- Maoin ghearrliosta a shainmhínítear na trí réadmhaoin riail ar fad ag an am céanna.
Sosanna Colún CSS3, Colúin a Chuimsiú, agus Colúin a líonadh
Úsáid na sosanna colún na roghanna céanna CSS2 a úsáidtear chun sosanna a shainmhíniú i n-ábhar paged, ach le trí airíonna nua: briseadh roimh , briseadh amach , agus briseadh taobh istigh .
Cosúil le táblaí, is féidir leat eilimintí a leagan síos chun na colúin a sheachadadh leis an maoin cholún. Ligeann sé seo duit ceannlínte a chruthú a chuireann réimse ilcholún níos mó cosúil le nuachtán.
Cinneann colúin líonadh cé mhéad ábhar a bheidh i ngach colún. Déanann colúin chothromaithe an méid céanna ábhar a chur i ngach colún agus sreabhann uathoibríoch an t-ábhar go dtí go mbeidh an colún iomlán agus ansin téann sé go dtí an chéad cheann eile.
Níos mó Gnéithe i CSS3 Nach bhfuil Ailt san áireamh i CSS2
Tá go leor gnéithe breise i CSS3 nach raibh ann i CSS2, lena n-áirítear:
- Modúl leagan amach teimpléad CSS agus modúl suíomh greille CSS3 : Grids a chruthú le CSS.
- Modúl Téacs CSS3 : Téigh imlíne ar théacs agus fiú scaoil-shadail a chruthú le CSS.
- Modúl Dath CSS3 : Anois le héagothroime.
- Athruithe ar mhúnla an bhosca : Lena n-áirítear maoine mara a ghníomhaíonn cosúil leis an gclib IE.
- Modúl Comhéadan Úsáideora CSS3 : Ag tabhairt cúrsóirí nua duit, freagraí ar ghníomhartha, réimsí riachtanacha, agus eilimintí a mhéadú .
- Ceisteanna Meáin : Ceadaíonn na meáin ceisteanna níos mó solúbthachta duit nuair a shainmhínítear conas ba chóir bileog stíl a úsáid. Mar shampla, d'fhéadfá bileog stíl a shainmhíniú nach bhfuil ach le haghaidh feistí láimhe a bhfuil dearcadh níos mó ná 20em acu.
- Modúl Ruby CSS3 : Tugann sé tacaíocht do theangacha a úsáideann Ruby téacsúil chun na doiciméid a anótáil.
- Modúl Paged Media CSS3 : Chun tacaíocht níos mó a fháil do na meáin pháistithe (páipéar, trédhearcachtaí, srl.).
- Ábhar giniúna: Ceannteidil agus footers, nótaí bunúsacha agus ábhar eile a ghiniúint go clárúil, go háirithe i gcás na meáin pháistithe.
- Modúl Urlabhra CSS3 : Athruithe ar CSS cléire.