Ngarti kana parobahan utama pikeun CSS3
Beda pangbadagna diantara CSS2 na CSS3 éta CSS3 geus dibeulah nepi ka bagian béda, disebut modul. Unggal modul ieu nyieun cara na ngaliwatan W3C di sagala rupa hambalan tina prosés rekomendasi. prosés ieu dijieun loba gampang pikeun sagala rupa potongan CSS3 bisa katampa sarta dilaksanakeun dina browser anu ku pabrik béda.
Lamun ngabandingkeun proses ieu naon kajadian kalawan CSS2, dimana sagalana ieu dikintunkeun salaku dokumen tunggal kalayan sagala Cascading Style cadar informasi dina eta, anjeun ngawitan tingali kaunggulan tina megatkeun rekomendasi nu nepi kana nu leuwih leutik, potongan individu. Kusabab unggal modul keur dikeureuyeuh individual, urang boga rentang teuing lega pangrojong browser pikeun modul CSS3.
Salaku kalayan sagala spésifikasi anyar jeung ngarobah, pastikeun pikeun nguji Kaca CSS3 Anjeun tuntas dina salaku panyungsi jeung sistem operasi loba anjeun tiasa. Inget gawang geus teu nyieun kaca web nu kasampak persis sarua di unggal browser, tapi pikeun mastikeun yén sagala gaya nu make, kaasup gaya CSS3, kasampak hébat dina panyungsi nu ngarojong éta sarta yén maranéhna turun deui gracefully pikeun panyungsi heubeul nu ulah.
Anyar CSS3 Selectors
CSS3 nawarkeun kebat tina cara anyar anjeun tiasa nyerat aturan CSS jeung selectors anyar CSS, kitu ogé mangrupa combinator anyar, sarta sababaraha pseudo-elemen anyar.
Tilu selectors atribut anyar:
- Atribut dimimitian patandingan persis unsur [foo ^ = "bar"] Unsur ieu miboga hiji atribut disebut foo anu dimimitian kalawan "bar" misalna
- Atribut tungtung patandingan persis unsur [foo $ = "bar"] Unsur ieu miboga hiji atribut disebut foo nu ditungtungan make "bar" misalna
- Atribut ngandung unsur cocok [foo * = "bar"] Unsur ieu miboga hiji atribut disebut foo nu ngandung string "bar" misalna
16 anyar pseudo-kelas:
- : akar
- Akar unsur dokumen teh. Dina HTML ieu salawasna.
- : nth-anak (n)
- Paké ieu cocog elemen anak pasti atanapi nganggo variabel pikeun meunangkeun alik patandingan.
- : nth-tukang-anak (n)
- Cocog elemen anak pasti cacah nepi ti hiji panungtungan.
- : nth-of-jenis (n)
- Cocog elemen sibling nu ngaranna sarua saméméh éta dina tangkal dokumen.
- : nth panungtungan-of-jenis-(n)
- Cocog elemen sibling nu ngaranna sarua cacah nepi ti handap.
- : panungtungan-anak
- Cocog unsur anak tukang indungna.
- : munggaran-di-tipe
- Cocog unsur sibling mimiti tipe éta.
- : ahir-jenis-
- Cocog unsur sibling panungtungan sahiji tipe éta.
- : ngan-anak
- Cocog unsur anu mangrupa hiji-hijina anak indungna na.
- : ngan-of-tipe
- Cocog unsur anu mangrupa hiji-hijina salah sahiji jenis na.
- : kosong
- Cocog unsur anu boga barudak (kaasup tempat ngumpulna téks).
- : target
- Cocog unsur nu aya udagan URI ngarujuk.
- : sangkan
- Cocog unsur lamun ayeuna teh diaktipkeun.
- : ditumpurkeun
- Cocog unsur lamun ayeuna teh ditumpurkeun.
- : dipariksa
- Cocog unsur lamun ayeuna teh dipariksa (tombol radio atawa centang).
- : teu (s)
- Cocog lamun unsur henteu cocog basajan pamilihan s.
Hiji combinator anyar:
- elementA ~ elementB
- Cocog lamun elementB kieu wae sanggeus elementA, teu merta langsung.
Pasipatan anyar
CSS3 ogé diwanohkeun sababaraha pasipatan CSS anyar. Loba sipat ieu nya mun nyieun gaya visual nu dipikaresep bakal ngahubungkeun leuwih mibanda program grafik kawas Photoshop. Sababaraha ieu, kawas wates-radius atawa kotak-kalangkang, geus sabudeureun saprak bubuka lamun CSS3. Batur, kawas flexbox atawa malah CSS Grid aya gaya anyar nu masih sering dianggap tambahan CSS3.
Dina CSS3, model kotak teu robah. Tapi aya kebat sipat gaya anyar nu bisa nulungan anjeun gaya nu backgrounds sarta wates buleud Anjeun.
Sababaraha mages Latar I
Ngagunakeun tukang-gambar, latar-posisi, jeung gaya latar tukang-ulang bisa nangtukeun sababaraha gambar latar bisa layered on luhureun karana dina kotak. Gambar munggaran teh lapisan pangdeukeutna ka pamaké, jeung leuwih handap dicét balik. Mun aya hiji warna tukang, mangka dicét handap sakabeh lapisan gambar.
Anyar Latar Style Pasipatan
Aya ogé sababaraha pasipatan tukang anyar dina CSS3.
- tukang-klip
- sipat ieu ngahartikeun kumaha gambar tukang kudu clipped. standar kasebut kotak wates tapi bisa robah jadi kotak padding atanapi kotak eusi.
- tukang-usul
- sipat ieu nangtukeun naha tukang kedah tempat dina kotak padding, kotak wates, atawa kotak eusi.
- tukang-ukuran
- sipat ieu ngidinan Anjeun pikeun nandaan ukuran gambar tukang. Eta ngidinan Anjeun pikeun manteng gambar leutik pikeun nyocogkeun kaca.
Parobahan aya Latar Style Pasipatan
Aya ogé sababaraha parobahan pasipatan gaya latar tukang aya:
- tukang-ulang
- Aya dua nilai anyar pikeun sipat ieu: spasi tur buleud. Spasi spasi gambar tiled merata dina kotak tanpa keur clipped. Babak rescales gambar tukang meh bakal kotak jumlah sakabéhna hasil kali dina kotak.
- tukang-kantétan
- A nilai anyar "lokal" anu ditambahkeun ambéh tukang bakal ngagulung jeung eusi unsur urang lamun unsur anu miboga watang ngagugulung.
- kasang tukang
- Kasang tukang sipat shorthand nambihan dina ukuran sarta asal sipat.
CSS3 Pasipatan Border
Dina CSS3 wates bisa gaya urang nuju dipaké pikeun (padet, ganda, dashed, jsb) atanapi aranjeunna tiasa hiji gambar. Tambih Deui, CSS3 brings di kamampuhan pikeun nyieun sudut rounded. Gambar wates nu metot sabab nyieun hiji gambar sadaya opat wates lajeng ngabejaan CSS nu kumaha nerapkeun gambar nu keur wates Anjeun.
Anyar Border Style Pasipatan
Aya sababaraha pasipatan wates anyar dina CSS3:
- Wates-radius
- Wates-luhur-katuhu-radius, wates-handap-katuhu-radius, wates-handap-kénca-radius, wates-luhur-kénca-radius
- Sipat ieu ngidinan Anjeun pikeun nyieun sudut rounded on wates Anjeun.
- Wates-gambar-sumber
- Hususna file sumber gambar bisa dipake gaganti gaya wates geus tangtu.
- Wates-gambar-nyiksikan
- Ngawakilan offsets jero ti edges gambar wates
- Wates-gambar-lebar
- Ngahartikeun nilai lebar pikeun gambar wates Anjeun.
- Wates-gambar-outset
- Hususna jumlah yén aréa gambar wates ngalegaan leuwih kotak wates.
- Wates-gambar-manteng
- Ngahartikeun kumaha sisi jeung bagian tengah gambar wates kudu tiled atanapi diskalakeun.
- Wates-gambar
- Harta shorthand pikeun sakabéh sipat gambar wates.
Pasipatan CSS3 tambahan nu patali jeung wates jeung backgrounds
Lamun kotak anu pegat dina kaca break, kolom putus pikeun garis putus (pikeun elemen inline) harta kotak-dekorasi-break ngahartikeun kumaha wadah buleud anyar anu dibungkus kalayan wawatesan jeung padding. Backgrounds bisa dibagi up antara sababaraha buleud pegat maké sipat ieu.
Aya ogé mangrupakeun sipat kotak-kalangkang nu bisa dipaké pikeun nambahkeun bayangan ka kotak elemen.
Kalawan CSS3, Anjeun ayeuna bisa gampang nyetél kaca Wéb kalawan sababaraha kolom tanpa tabel atanapi div struktur tag pajeulit. Anjeun saukur ngabejaan browser sabaraha kolom unsur awakna kudu boga tur sabaraha lega maranéhanana kudu. Tambah bisa nambahkeun wates (aturan), kelir tukang nu bentang jangkungna kolom, jeung téks anjeun bakal ngalir ngaliwatan sagala kolom otomatis.
Kolom CSS3 - ngartikeun Jumlah na Width tina Kolom
Aya tilu anyar sipat nu ngidinan Anjeun pikeun nangtukeun jumlah na rubak kolom anjeun:
- kolom-lebar
- Ngahartikeun lebar kolom Anjeun kedah. browser nu lajeng bakal ngalir téks pikeun ngeusian rohangan kalawan kolom nu lega.
- kolom-count
- Ngahartikeun Jumlah kolom dina kaca. browser nu lajeng bakal nyieun kolom cukup lega pikeun pas dina spasi, tapi ukur angka nu nangtukeun.
- kolom
- sipat Shorthand mana anjeun bisa nangtukeun boh lebar atawa jumlah (atawa duanana, tapi anu jarang ngajadikeun rasa).
CSS3 sela Tihang jeung Aturan
Sela jeung aturan disimpen diantara kolom dina skenario multicolumn sarua. Sela baris nyorong eta teh kolom, tapi aturan teu butuh nepi spasi nanaon. Mun aturan kolom téh lega ti éta gap, éta bakal tumpang tindih kolom anu tangtu. aya lima sipat anyar pikeun aturan kolom na sela:
- kolom-celah
- Ngahartikeun lebar tina jurang antawis kolom.
- kolom-aturan-warna
- Ngahartikeun warna aturan.
- kolom-aturan-gaya
- Ngahartikeun gaya aturan (padet, dotted, ganda, jsb).
- kolom-aturan-lebar
- Ngahartikeun rubak aturan.
- kolom-aturan
- Hiji sipat shorthand watesan sakabeh tilu pasipatan aturan kolom sakaligus.
CSS3 ngarecah Tihang, Manjang Kolom, sarta ngeusian Kolom
Kolom ngarecah nganggo pilihan CSS2 sami dipake keur ngartikeun ngarecah di eusi paged, tapi mibanda tilu pasipatan anyar: megatkeun-méméh, megatkeun-sanggeus, sarta megatkeun-jero.
Kawas kalawan tabel, Anjeun tiasa nyetel elemen pikeun bentang kolom jeung sipat kolom-bentang. Ieu ngidinan Anjeun pikeun nyieun headline eta bentang sababaraha kolom langkung kawas koran a.
Ngeusian kolom megatkeun sabaraha eusi bakal di unggal kolom. kolom saimbang coba nempatkeun jumlah sarua eusi di unggal kolom bari otomatis ngan ngalir eusi dina dugi kolom pinuh lajeng mana anu ka hiji ka hareup.
Fitur nu leuwih di CSS3 Éta Karangkemiri & # 39; T Kaasup dina CSS2
Aya kavling fitur tambahan dina CSS3 nu teu aya di CSS2, kaasup:
- CSS perenah Citakan modul jeung modul positioning CSS3 Grid: Nyieun grids kalawan CSS.
- CSS3 téks modul: Outline téks na malah nyieun serelek-bayangan kalawan CSS.
- Modul CSS3 Warna: Ayeuna jeung opacity.
- Parobahan model kotak: Kaasup nu marquee sipat nu tindakan kawas tag IE.
- CSS3 pamaké Interface modul: Jokowi Anjeun cursors anyar, réspon kana lampah, sawah diperlukeun, sarta malah pangaturan ukuran jadi elemen .
- Media queries: Media queries ngidinan Anjeun langkung kalenturan nalika watesan sabaraha hiji lambar gaya kudu dipake. Contona, Anjeun bisa nangtukeun hiji lambar gaya nu ngan alat handheld nu boga viewport leuwih badag batan 20em.
- CSS3 Ruby modul: Nyadiakeun pangrojong pikeun basa nu make tékstual Ruby jeung annotate dokumén.
- Modul CSS3 Paged Media: Pikeun rojongan malah leuwih media paged (kertas, transparencies, jsb).
- Dihasilkeun eusi: L ngajalankeun headers na footers, footnotes, sarta kandungan lianna nu dihasilkeun programmatically, hususna keur média paged.
- CSS3 Biantara modul: Parobahan kana CSS aural.