Deall y newidiadau mawr i CSS3
Y gwahaniaeth mwyaf rhwng CSS2 a CSS3 yw bod CSS3 wedi'i rannu'n wahanol adrannau, a elwir yn fodiwlau. Mae pob un o'r modiwlau hyn yn gwneud ei ffordd drwy'r W3C mewn gwahanol gamau o'r broses argymhelliad. Mae'r broses hon wedi ei gwneud hi'n llawer haws i wahanol ddarnau o CSS3 gael eu derbyn a'u gweithredu yn y porwr gan wneuthurwyr gwahanol.
Os cymharwch y broses hon i'r hyn a ddigwyddodd gyda CSS2, lle cyflwynwyd popeth fel un ddogfen gyda'r holl wybodaeth Casgliadau Arddull Casgliadau ynddo, byddwch yn dechrau gweld manteision torri'r argymhelliad i fod yn ddarnau unigol llai. Oherwydd bod pob un o'r modiwlau yn cael ei weithio ar ei phen ei hun, mae gennym ystod ehangach o gefnogaeth porwr ar gyfer modiwlau CSS3.
Fel gydag unrhyw fanyleb newydd a newidiol, sicrhewch eich bod yn profi tudalennau CSS3 yn drylwyr â chymaint o borwyr a systemau gweithredu ag y gallwch. Cofiwch nad yw'r nod yn creu tudalennau gwe sy'n edrych yn union yr un fath ym mhob porwr, ond er mwyn sicrhau bod unrhyw arddulliau a ddefnyddiwch, gan gynnwys arddulliau CSS3, yn edrych yn wych yn y porwyr sy'n eu cefnogi a'u bod yn cwympo'n ôl yn greiddiol ar gyfer porwyr hŷn sy'n peidiwch â
Dewiswyr CSS3 Newydd
Mae CSS3 yn cynnig nifer o ffyrdd newydd y gallwch chi ysgrifennu rheolau CSS gyda detholwyr CSS newydd, yn ogystal â chydlynydd newydd, a rhai ffug-elfennau newydd.
Tri detholwr priodoldeb newydd:
- Mae dechrau nodwedd yn cyfateb yn union elfen [foo ^ = "bar"] Mae gan yr elfen briodoldeb o'r enw foo sy'n dechrau gyda "bar" ee
- Mae'r gorffeniad nodwedd yn cyfateb yn union elfen [foo $ = "bar"] Mae gan yr elfen briodoldeb o'r enw foo sy'n dod i ben gyda "bar" ee
- Mae'r nodwedd yn cynnwys yr elfen gêm [foo * = "bar"] Mae gan yr elfen briodoldeb o'r enw foo sy'n cynnwys y "bar" llinyn ee
16 ffug ddosbarth newydd:
- : gwreiddiau
- Elfen wraidd y ddogfen. Yn HTML mae hyn bob amser.
- : nth-plentyn (n)
- Defnyddiwch hyn i gyd-fynd ag elfennau plentyn union neu ddefnyddio newidynnau i gael gemau amgen.
- : nth-last-child (n)
- Cyfateb elfennau plentyn union sy'n cyfrif o'r un olaf.
- : nth-of-type (n)
- Eitemau brawddegau cyfatebol gyda'r un enw o'i flaen yn y goeden ddogfen.
- : nth-last-of-type (n)
- Eitemau brawddegau cyfatebol gyda'r un enw yn cyfrif o'r gwaelod.
- : plentyn olaf
- Cydweddu elfen plentyn olaf y rhiant.
- : o'r math cyntaf
- Cydweddwch yr elfen brawddegau gyntaf o'r math hwnnw.
- : olaf-o-fath
- Cydweddwch yr elfen brawddegau olaf o'r math hwnnw.
- :unig blentyn
- Cydweddwch yr elfen sy'n unig blentyn ei riant.
- : dim ond o fath
- Cydweddwch yr elfen sef yr unig un o'i fath.
- : gwag
- Cydweddwch yr elfen sydd heb blant (gan gynnwys nodau testun).
- : targed
- Cydweddu elfen sef targed yr URI cyfeiriol.
- : wedi ei alluogi
- Cydweddwch yr elfen pan gaiff ei alluogi.
- : anabl
- Cydweddwch yr elfen pan fydd yn anabl.
- : gwirio
- Cydweddwch yr elfen pan gaiff ei wirio (botwm radio neu flybox).
- : nid (au)
- Cydweddu pan nad yw'r elfen yn cyd-fynd â'r dewisydd syml.
Un cyfunwr newydd:
- elementA ~ elementB
- Cydweddu pan fo elementB yn dilyn rhywle ar ôl elementA, nid o reidrwydd yn syth.
Eiddo Newydd
Hefyd, cyflwynodd CSS3 nifer o eiddo CSS newydd. Roedd llawer o'r tai hyn yn creu arddulliau gweledol a fyddai'n debygol o gysylltu mwy â rhaglen graffeg fel Photoshop. Mae rhai o'r rhain, fel radiws y ffin neu gysgod blwch, wedi bod o gwmpas ers y cyflwyniad os yw CSS3. Mae eraill, fel flexbox neu hyd yn oed Grid CSS, yn arddulliau newydd sy'n cael eu hystyried yn aml yn cael eu hychwanegu at CSS3.
Yn CSS3, nid yw'r model blwch wedi newid. Ond mae yna nifer o eiddo arddull newydd a all eich helpu i arddull cefndiroedd a ffiniau'ch bocsys.
Cefndir Lluosog Rwy'n magu
Gan ddefnyddio'r delwedd gefndir, lleoliad cefndir, ac arddulliau ailadrodd cefndir, gallwch bennu delweddau cefndir lluosog i'w haenu ar ben ei gilydd yn y blwch. Y ddelwedd gyntaf yw'r haen agosaf at y defnyddiwr, gyda'r rhai canlynol wedi'u paentio y tu ôl. Os oes lliw cefndir, caiff ei baentio isod yr holl haenau delwedd.
Eiddo Arddull Cefndir Newydd
Mae yna rai eiddo cefndirol newydd yn CSS3 hefyd.
- cefndir-clip
- Mae'r eiddo hwn yn diffinio sut y dylid clipio'r ddelwedd gefndirol. Y rhagosodiad yw'r blwch ffiniau, ond gellir ei newid i'r blwch padio neu'r blwch cynnwys.
- darddiad cefndirol
- Mae'r eiddo hwn yn penderfynu a ddylai'r cefndir fod yn fannau yn y blwch padio, y blwch ffiniau, neu'r blwch cynnwys.
- maint cefndir
- Mae'r eiddo hwn yn caniatáu ichi nodi maint y ddelwedd gefndirol. Mae'n eich galluogi i ymestyn delweddau llai i ffitio'r dudalen.
Newidiadau i'r Eiddo Arddull Cefndirol Presennol
Mae yna ychydig o newidiadau hefyd i eiddo presennol yr arddull cefndir:
- cefndir-ailadrodd
- Mae dau werthoedd newydd ar gyfer yr eiddo hwn: gofod a rownd. Gofodwch y llun teils yn gyfartal o fewn y blwch heb gael ei gludo. Mae crwn yn rhestru'r ddelwedd gefndir fel y bydd yn teils sawl gwaith yn y blwch.
- atodiad cefndir
- Ychwanegir gwerth "lleol" newydd fel y bydd y cefndir yn sgrolio gyda chynnwys yr elfen pan fydd bar sgrolio ar yr elfen honno.
- cefndir
- Mae'r eiddo cefndir-law yn ychwanegu yn yr eiddo maint a tharddiad.
Eiddo Gororau CSS3
Gall ffiniau CSS3 fod yr arddulliau y byddwn ni'n eu defnyddio (solid, dwbl, dashed, ac ati) neu gallant fod yn ddelwedd. Hefyd, mae CSS3 yn dod â'r gallu i greu corneli crwn. Mae delweddau ffiniol yn ddiddorol oherwydd eich bod yn creu delwedd o'r pedair ffin ac yna dywedwch wrth yr CSS sut i gymhwyso'r ddelwedd honno at eich ffiniau.
Eiddo Arddull y Ffin Newydd
Mae rhai eiddo ffin newydd yn CSS3:
- radiws ffiniol
- radiws-top-right-radius , radiws -gwaelod-dde-radiws , radiws y chwith-y-chwith-radiws , y ffin-top-left-radius
- Mae'r eiddo hyn yn caniatáu ichi greu corneli crwn ar eich ffiniau.
- ffin-delwedd-ffynhonnell
- Yn nodi'r ffeil ffynhonnell delwedd i'w defnyddio yn lle arddulliau ffin sydd eisoes wedi'u diffinio.
- ffin-ddelwedd-slice
- Yn cynrychioli'r cyrff allanol oddi wrth ymylon delwedd y ffin
- ffin-ddelwedd-led
- Yn diffinio gwerth y lled ar gyfer delwedd eich ffin.
- ffin-delwedd-cychwyn
- Yn dynodi'r swm y mae ardal delwedd y ffin yn ymestyn y tu hwnt i'r blwch ffiniau.
- ffin-ddelwedd-ymestyn
- Mae'n diffinio sut y dylai teithiau neu rannau canol y delwedd ffiniau gael eu teilsio neu eu graddio.
- ffin-delwedd
- Yr eiddo llaw llaw ar gyfer holl eiddo delwedd y ffin.
Eiddo CSS3 Ychwanegol sy'n gysylltiedig â Gororau a Chefndiroedd
Pan dorri bocs ar doriad tudalen, toriad colofn ar gyfer egwyl llinell (ar gyfer elfennau mewn-lein) mae'r eiddo torri-blwch addurno yn diffinio sut mae'r blychau newydd yn cael eu lapio â ffin a paddio. Gellir rhannu'r cefndir rhwng blychau torri lluosog gan ddefnyddio'r eiddo hwn.
Mae yna hefyd eiddo cysgod blwch y gellir ei ddefnyddio i ychwanegu cysgodion i elfennau blwch.
Gyda CSS3, gallwch nawr yn hawdd sefydlu tudalen We gyda cholofnau lluosog heb fyrddau neu strwythurau tagiau cymhleth. Rydych chi'n dweud wrth y porwr faint o golofnau y dylai elfen y corff eu cael a pha mor eang y dylent fod. Yn ogystal, gallwch ychwanegu ffiniau (rheolau), lliwiau cefndir sy'n rhychwantu uchder y golofn, a bydd eich testun yn llifo drwy'r holl golofnau yn awtomatig.
Colofnau CSS3 - Diffiniwch Nifer a Lled y Colofnau
Mae yna dri eiddo newydd sy'n eich galluogi i ddiffinio nifer a lled eich colofnau:
- colofn-led
- Yn diffinio'r lled dylai'ch colofnau fod. Yna bydd y porwr yn llifo'r testun i lenwi'r gofod gyda cholofnau sy'n eang.
- colofn-gyfrif
- Yn diffinio nifer y colofnau ar y dudalen. Yna bydd y porwr yn creu colofnau'n ddigon eang i ffitio yn y gofod, ond dim ond y rhif rydych chi'n ei nodi.
- colofnau
- Manylion llaw lle gallwch chi ddiffinio naill ai lled neu rif (neu'r ddau, ond anaml y bydd hynny'n gwneud synnwyr).
Bylchau a Rheolau Colofn CSS3
Rhoddir bylchau a rheolau rhwng colofnau yn yr un sefyllfa aml-gyfunol. Bydd bylchau yn gwthio ar wahân y colofnau, ond nid yw'r rheolau yn cymryd unrhyw le. Os yw rheol colofn yn ehangach na'r bwlch, bydd yn gorgyffwrdd â cholofnau cyfagos. mae pum eiddo newydd ar gyfer rheolau colofn a bylchau:
- bwlch golofn
- Yn diffinio lled y bylchau rhwng y colofnau.
- colofn-rheol-liw
- Yn diffinio lliw y rheol.
- colofn-rheol-arddull
- Yn diffinio arddull y rheol (solet, dot, dwbl, ac ati).
- colofn-rheol-led
- Yn diffinio lled y rheol.
- rheol-golofn
- Eiddo llaw byr sy'n diffinio'r holl eiddo rheol tri golofn ar unwaith.
Colofnau Colofn CSS3, Ehangu Colofnau, a Llenwi Colofnau
Mae gwyliau'r colofn yn defnyddio'r un opsiynau CSS2 a ddefnyddir i ddiffinio seibiannau mewn cynnwys sy'n cael eu paged, ond gyda thri eiddo newydd: toriad cyn , toriad ar ôl , a thorri'r tu mewn .
Fel gyda thablau, gallwch osod elfennau i rannu colofnau gyda'r eiddo ar y golofn. Mae hyn yn eich galluogi i greu penawdau sy'n rhychwantu lluosog o golofnau fel papur newydd.
Mae llenwi colofnau yn penderfynu faint o gynnwys fydd ym mhob colofn. Mae colofnau cytbwys yn ceisio rhoi'r un faint o gynnwys ym mhob colofn tra bod auto yn llifo'r cynnwys hyd nes bod y golofn yn llawn ac yna'n mynd i'r un nesaf.
Mwy o Nodweddion yn CSS3 Aren A # 39; t Wedi'i gynnwys yn CSS2
Mae llawer o nodweddion ychwanegol yn CSS3 nad oeddent yn bodoli yn CSS2, gan gynnwys:
- Modiwl cynllun Templed CSS a modiwl lleoli Grid CSS3 : Creu gridiau gyda CSS.
- Modiwl testun CSS3 : Amlinellwch destun a hyd yn oed greu cysgodion galw heibio gyda CSS.
- Modiwl Lliw CSS3 : Nawr gyda chryn dipyn.
- Newidiadau i'r model blwch : Gan gynnwys eiddo pâr sy'n gweithredu fel y tag IE.
- Modiwl Rhyngwyneb Defnyddiwr CSS3 : Rhoi cyrchyddion newydd i chi, ymatebion i gamau gweithredu, meysydd gofynnol, a hyd yn oed newid maint yr elfennau .
- Ymholiadau gan y Cyfryngau : Mae ymholiadau'r cyfryngau yn caniatáu mwy o hyblygrwydd i chi wrth ddiffinio sut y dylid defnyddio dalen arddull. Er enghraifft, gallech ddiffinio dalen arddull sydd ar gyfer dyfeisiau llaw yn unig sydd â golygfa fwy na 20em.
- Modiwl CSS3 Ruby : Yn darparu cefnogaeth i ieithoedd sy'n defnyddio Ruby testunol i anodi dogfennau.
- Modiwl Cyfryngau Paged Media CSS3 : I gael mwy o gefnogaeth hyd yn oed ar gyfer cyfryngau paged (papur, tryloywderau, ac ati).
- Cynnwys a gynhyrchir : Penawdau a footers rhedeg, troednodiadau, a chynnwys arall sy'n cael ei gynhyrchu'n rhaglennol, yn enwedig ar gyfer cyfryngau paged.
- Modiwl Lleferydd CSS3 : Newidiadau i CSS glywedol.