Ang Pagkakaiba sa Pagitan ng CSS2 at CSS3

Pag-unawa sa mga pangunahing pagbabago sa CSS3

Ang pinakamalaking pagkakaiba sa pagitan ng CSS2 at CSS3 ay ang CSS3 ay nahati sa iba't ibang mga seksyon, na tinatawag na mga module. Ang bawat isa sa mga modyum ay nagpapatuloy sa pamamagitan ng W3C sa iba't ibang yugto ng proseso ng rekomendasyon. Ginawa ng prosesong ito na mas madali para sa iba't ibang mga piraso ng CSS3 na tanggapin at ipatupad sa browser ng iba't ibang mga tagagawa.

Kung ihambing mo ang prosesong ito sa kung ano ang nangyari sa CSS2, kung saan ang lahat ay isinumite bilang isang dokumento sa lahat ng impormasyon ng Cascading Style Sheets sa loob nito, sinisimulan mong makita ang mga pakinabang ng pagbasura ng rekomendasyon hanggang sa mas maliit, indibidwal na mga piraso. Dahil ang bawat isa sa mga module ay nagtrabaho sa isa-isa, mayroon kaming mas malawak na hanay ng suporta sa browser para sa mga module ng CSS3.

Tulad ng anumang mga bago at pagbabago na detalye, siguraduhin na subukan ang iyong mga pahina ng CSS3 lubusan sa maraming mga browser at operating system hangga't maaari. Tandaan na ang layunin ay hindi upang lumikha ng mga web page na mukhang eksakto ang parehong sa bawat browser, ngunit upang matiyak na ang anumang mga estilo na iyong ginagamit, kabilang ang mga estilo ng CSS3, mukhang mahusay sa mga browser na sumusuporta sa mga ito at mahulog sila nang maganda para sa mas lumang mga browser na Huwag.

Bagong CSS3 Selectors

Nag-aalok ang CSS3 ng isang grupo ng mga bagong paraan na maaari mong isulat ang mga panuntunan sa CSS gamit ang mga bagong tagapili ng CSS, pati na rin ang isang bagong kombinatorya, at ilang bagong mga elementong hindi tunay.

Tatlong bagong tagapili ng katangian:

• Ang attribute na nagsisimula tumutugma sa eksaktong elemento [foo ^ = "bar"] Ang elemento ay may katangian na tinatawag na foo na nagsisimula sa "bar" eg
• Ang pagtatapos ng attribute ay tumutugma sa eksaktong elemento [foo $ = "bar"] Ang elemento ay may katangian na tinatawag na foo na nagtatapos sa "bar" eg
• Ang attribute ay naglalaman ng elemento ng tugma [foo * = "bar"] Ang elemento ay may isang katangian na tinatawag na foo na naglalaman ng string na "bar" eg

16 bagong pseudo-klase:

• : ugat
  • Ang ugat ng elemento ng dokumento. Sa HTML ito ay laging.
• : nth-child (n)
  • Gamitin ito upang tumugma sa eksaktong mga elemento ng bata o gumamit ng mga variable upang makakuha ng mga alternating tugma.
• : nth-last-child (n)
  • Itugma ang eksaktong mga elemento ng bata na nagbibilang mula sa huli.
• : nth-of-type (n)
  • Itugma ang mga sangkap ng kapatid na may parehong pangalan bago ito sa puno ng dokumento.
• : nth-last-of-type (n)
  • Itugma ang mga elemento ng kapatid na may parehong pangalan na nagbibilang mula sa ibaba.
• : huling-anak
  • Itugma ang huling elemento ng magulang ng magulang.
• : first-of-type
  • Itugma ang unang kapatid na elemento ng ganitong uri.
• : huling-uri
  • Itugma ang huling sangkap ng kapatid sa ganitong uri.
• :nag-iisang anak
  • Itugma ang elemento na ang tanging anak ng magulang nito.
• : only-of-type
  • Itugma ang elemento na isa lamang sa uri nito.
• : walang laman
  • Itugma ang elemento na walang mga anak (kabilang ang mga node ng teksto).
• : target
  • Itugma ang isang elemento na siyang target ng nagre-refer na URI.
• : pinagana
  • Itugma ang elemento kapag pinagana ito.
• : hindi pinagana
  • Itugma ang elemento kapag hindi pinagana.
• : naka-check
  • Itugma ang elemento kapag nasuri ito (radio button o checkbox).

• : hindi (mga)
  • Itugma kapag ang elemento ay hindi tumutugma sa simpleng selector s.

Isang bagong kombinatorya:

• elementA ~ elementB
  • Itugma kapag ang elementB ay sumusunod sa isang lugar matapos ang elementA, hindi kinakailangang agad.

Bagong Mga Katangian

Ipinakilala din ng CSS3 ang isang bilang ng mga bagong katangian ng CSS. Marami sa mga pag-aari na ito ay upang lumikha ng mga visual na estilo na malamang na mag-uugnay nang higit pa sa isang programa ng graphics tulad ng Photoshop. Ang ilan sa mga ito, tulad ng hangganan-radius o kahon ng anino, ay nakapaligid na mula noong pagpapakilala kung CSS3. Ang iba, tulad ng flexbox o kahit CSS Grid ay mas bagong mga estilo na madalas na itinuturing na mga karagdagan sa CSS3.

Sa CSS3, ang modelo ng kahon ay hindi nagbago. Ngunit mayroong isang grupo ng mga bagong katangian ng estilo na maaaring makatulong sa iyo na estilo ang mga background at mga hangganan ng iyong mga kahon.

Maraming Background ko mages

Gamit ang background-image, background-position, at background-ulitin ang mga estilo maaari mong tukuyin ang maramihang mga larawan sa background na layered sa tuktok ng isa sa kahon. Ang unang larawan ay ang pinakamalapit na layer sa user, na may mga sumusunod na mga ipininta sa likod. Kung mayroong isang kulay ng background, ito ay pininturahan sa ibaba ang lahat ng mga layer ng imahe.

Mga Propesyonal ng Estilo ng Bagong Background

Mayroon ding ilang mga bagong pag-aari ng background sa CSS3.

• background-clip
  • Tinutukoy ng property na ito kung paano dapat i-clipped ang larawan sa background. Ang default ay ang border box, ngunit maaari itong mabago sa padding box o sa kahon ng nilalaman.
• pinagmulang pinagmulan
  • Tinutukoy ng property na ito kung ang background ay dapat na mga lugar sa padding box, ang border box, o ang kahon ng nilalaman.
• laki ng background
  • Pinapahintulutan ka ng property na ito na ipahiwatig ang laki ng larawan sa background. Pinapayagan ka nitong mahatak ang mas maliliit na larawan upang umangkop sa pahina.

Pagbabago sa Mga Katangian ng Estilo ng Nag-iisang Background

Mayroon ding ilang mga pagbabago sa mga umiiral na mga katangian ng estilo ng background:

• Ulitin ang background
  • Mayroong dalawang mga bagong halaga para sa ari-arian na ito: espasyo at pag-ikot. Ang puwang ng puwang ang pantay-pantay na larawan sa loob ng kahon nang hindi pinutol. Round rescales ang larawan sa background upang ito ay tile ng isang buong bilang ng beses sa kahon.
• background-attachment
  • Ang isang bagong "lokal" na halaga ay idinagdag upang ang background ay mag-scroll sa nilalaman ng elemento kapag ang elementong iyon ay may scroll bar.
• background
  • Ang background ng shorthand property ay nagdaragdag sa laki at mga katangian ng pinagmulan.

CSS3 Border Properties

Sa mga hangganan ng CSS3 maaaring maging mga estilo na ginamit namin sa (solid, doble, dashed, atbp.) O maaari silang maging isang imahe. Plus, CSS3 ay nagdudulot ng kakayahang lumikha ng mga bilugan na sulok. Ang mga hangganan ng mga larawan ay kagiliw-giliw dahil lumikha ka ng isang imahe ng lahat ng apat na mga hangganan at pagkatapos ay sabihin sa CSS kung paano ilapat ang larawang iyon sa iyong mga hangganan.

Bagong Border Estilo Properties

Mayroong ilang mga bagong katangian sa hangganan sa CSS3:

• border-radius
  • border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius , border-top-left-radius
  • Pinapayagan ka ng mga pag-aari na ito na lumikha ng mga bilugan na sulok sa iyong mga hangganan.
• border-image-source
  • Tinutukoy ang file na pinagmulan ng imahe na gagamitin sa halip na mga tinukoy na estilo ng hangganan.
• border-image-slice
  • Kinakatawan ang mga inward offset mula sa mga gilid ng border ng imahe
• hangganan-imahe-lapad
  • Tinutukoy ang halaga ng lapad para sa iyong hangganan ng imahe.
• border-image-outset
  • Tinutukoy ang halaga na ang lugar ng imahe ng hangganan ay umaabot nang lampas sa kahon ng hangganan.
• border-image-stretch
  • Tinutukoy kung paano ang mga gilid at gitnang bahagi ng hangganan ng imahe ay dapat na naka-tile o naka-scale.
• hangganan-larawan
  • Ang shorthand property para sa lahat ng mga katangian ng imahen sa hangganan.

Karagdagang Mga Katangian ng CSS3 na Nauugnay sa Mga Hangganan at Mga Background

Kapag ang isang kahon ay nasira sa isang break na pahina, ang break na hanay para sa line break (para sa mga inline na elemento) ang kahon ng box-decoration-break na tumutukoy kung paano ang mga bagong kahon ay nakabalot sa hangganan at padding. Maaaring mahati ang mga background sa pagitan ng maramihang mga sirang kahon gamit ang property na ito.

Mayroon ding isang kahon-anino na pag-aari na maaaring magamit upang magdagdag ng mga anino sa mga elemento ng kahon.

Sa CSS3, maaari mo na ngayong madaling i-set up ang isang Web page na may maramihang mga hanay na walang mga talahanayan o kumplikadong mga istraktura ng div tag. Sasabihin mo lamang sa browser kung gaano karaming mga haligi ang kailangang sangkap ng katawan at kung gaano kalaki ang dapat na ito. Plus maaari kang magdagdag ng mga hangganan (mga panuntunan), mga kulay ng background na sumasaklaw sa taas ng hanay, at awtomatikong dumadaloy ang iyong teksto sa lahat ng mga haligi.

CSS3 Mga Haligi - Itakda ang Numero at Lapad ng Mga Haligi

May tatlong bagong katangian na nagpapahintulot sa iyo na tukuyin ang bilang at lapad ng iyong mga haligi:

• lapad ng haligi
  • Tinutukoy ang lapad ng iyong mga haligi. Pagkatapos ay dadaloy ng browser ang teksto upang punan ang puwang na may mga hanay na malawak.
• count-count
  • Tinutukoy ang bilang ng mga haligi sa pahina. Pagkatapos ay bubuo ng browser ang mga hanay na sapat upang magkasya sa espasyo, ngunit lamang ang numero na tinukoy mo.
• mga haligi
  • Pagkakulong sa ari-arian na kung saan maaari mong tukuyin ang alinman sa lapad o numero (o pareho, ngunit bihirang may katuturan).

CSS3 Column Gaps and Rules

Ang mga kakulangan at mga tuntunin ay inilalagay sa pagitan ng mga haligi sa parehong sitwasyon ng multicolumn. Gaps ay itulak ang mga haligi, ngunit ang mga tuntunin ay hindi tumagal ng anumang puwang. Kung ang haligi ng haligi ay mas malawak kaysa sa agwat na ito, ito ay magkakapatong sa mga katabing haligi. mayroong limang bagong mga katangian para sa mga tuntunin at mga puwang sa haligi:

• haligi-puwang
  • Tinutukoy ang lapad ng mga puwang sa pagitan ng mga haligi.
• haligi-panuntunan-kulay
  • Tinutukoy ang kulay ng panuntunan.
• haligi-rule-style
  • Tinutukoy ang estilo ng panuntunan (solid, may tuldok, double, atbp.).
• haligi-panuntunan-lapad
  • Tinutukoy ang lapad ng panuntunan.
• haligi-panuntunan
  • Isang takbuhan ng ari-arian na tumutukoy sa lahat ng tatlong hanay ng mga katangian ng panuntunan nang sabay-sabay.

CSS3 Column Breaks, Spanning Columns, at Filling Columns

Ang mga break ng hanay ay gumagamit ng parehong mga pagpipilian sa CSS2 na ginamit upang tukuyin ang mga break sa paged na nilalaman, ngunit may tatlong bagong mga katangian: break-bago , break-after , at break-inside .

Tulad ng mga talahanayan, maaari kang magtakda ng mga elemento sa mga haligi ng span sa hanay ng ari-arian. Ito ay nagbibigay-daan sa iyo upang lumikha ng mga headline na sumasaklaw ng maramihang mga haligi nang higit pa tulad ng isang pahayagan.

Ang pagpupuno ng mga hanay ay nagpapasya kung magkano ang nilalaman sa bawat haligi. Sinusubukan ng balanseng mga haligi ang parehong halaga ng nilalaman sa bawat haligi habang ang auto ay dumadaloy sa nilalaman hanggang sa ang hanay ay puno at pagkatapos ay papunta sa susunod na hanay.

Higit pang mga Tampok sa CSS3 Na Hindi Naisama sa CSS2

Mayroong maraming mga karagdagang tampok sa CSS3 na hindi umiiral sa CSS2, kabilang ang:

• CSS Template layout ng module at CSS3 Grid pagpoposisyon module : Paglikha ng grids na may CSS.
• CSS3 Text module : Balangkas na teksto at lumikha ng mga drop-shadow na may CSS.
• CSS3 Kulay ng module : Ngayon na may opacity.
• Mga pagbabago sa modelo ng kahon : Kabilang ang isang marquee property na gumaganap tulad ng IE tag.
• Module ng User Interface ng CSS3 : Nagbibigay sa iyo ng mga bagong cursor, mga tugon sa mga pagkilos, kinakailangang mga patlang, at kahit na pagbabago ng laki ng mga elemento .
• Mga Query sa Media : Pinapayagan ka ng mga query sa media ng higit na kakayahang umangkop kapag tinutukoy kung paano dapat gamitin ang style sheet. Halimbawa, maaari mong tukuyin ang isang style sheet na para lamang sa mga handheld device na may viewport na mas malaki kaysa sa 20em.
• CSS3 Ruby module : Nagbibigay ng suporta para sa mga wika na gumagamit ng tekstuwal ruby ​​upang i-annotate ang mga dokumento.
• CSS3 Paged Media module : Para sa higit pang suporta para sa paged media (papel, transparency, atbp).
• Binuo ng nilalaman : L tumatakbo header at footer, footnote, at iba pang nilalaman na binuo ng programming, lalo na para sa paged media.
• CSS3 Speech module : Pagbabago sa pandinig CSS.