Ngerteni owah-owahan utama kanggo CSS3
Prabédan paling gedhe antara CSS2 lan CSS3 yaiku yen CSS3 wis dipisahake dadi bagean sing beda, disebut modul. Saben modul iki nggawe cara liwat W3C ing macem-macem tahapan proses rekomendasi. Proses iki nggawe luwih gampang kanggo macem-macem potongan CSS3 sing bakal ditampa lan dileksanakake ing browser kanthi manufaktur beda.
Yen sampeyan mbandhingake proses iki kanggo apa kedaden karo CSS2, ing ngendi kabeh kasebut diajukake minangka dokumen siji kanthi kabeh informasi Cascading Style Sheets ing jero, sampeyan bakal miwiti ndeleng kaluwihan rekaman kasebut dadi luwih cilik, potongan individu. Amarga saben modul digawé ing individu, kita duwe dhukungan browser kanggo modhèl CSS3 sing luwih akeh.
Minangka spesifikasi anyar lan ganti, manawa sampeyan nyoba kaca CSS3 saksampune minangka akeh browser lan sistem operasi sing bisa. Elinga, tujuane ora nggawe kaca web sing katon persis ing saben browser, nanging kanggo mesthekake yen gaya apa wae sing sampeyan gunakake, kalebu gaya CSS3, katon apik ing browser sing ndhukung lan mbalik maneh apik kanggo browser lawas sing ojo.
New CSS3 Selectors
CSS3 nawakake akeh cara anyar sing bisa nulis aturan CSS karo pemilih CSS anyar, uga kombinator anyar, lan sawetara pseudo-elemen anyar.
Tiga pilihan atribut:
- Atribut sing diwiwiti cocog karo persis unsur [foo ^ = "bar"] Unsur nduweni atribut sing disebut foo sing diawali karo "bar" eg
- Atribut pungkasan sing cocog karo persis unsur [foo $ = "bar"] Unsur iki nduweni atribut sing diarani foo sing diakhiri karo "bar" eg
- Atribut ngemot elemen pencocokan [foo * = "bar"] Unsur nduweni atribut sing disebut foo sing ngemot string "bar" eg
16 kelas pseudo anyar:
- : ROOT
- Unsur ROOT saka dokumen kasebut. Ing HTML iki tansah.
- : nth-child (n)
- Gunakake iki kanggo cocog karo unsur anak sing tepat utawa nggunakake variabel kanggo entuk padanan gantian.
- : nth-last-child (n)
- Memadai unsur anak sing mesthi ngitung saka sing pungkasan.
- : nth-of-type (n)
- Cocog karo unsur sandhing kanthi jeneng sing padha sadurunge ing wit document.
- : nth-last-of-type (n)
- Cocokake unsur sandhing kanthi jeneng sing padha ngitung saka ngisor.
- : pungkasan anak
- Cocokake unsur pungkasan anak saka pasangan.
- : pisanan-saka-jinis
- Cocog karo unsur saudara sing pisanan saka jinis kasebut.
- : pungkasan-saka-jinis
- Cocokake unsur saudara pungkasan saka jinis kasebut.
- : mung anak
- Cocog karo unsur sing minangka anak mung wong tuwa kasebut.
- : mung-saka-jinis
- Cocog unsur sing mung siji saka sawijining jinis.
- : kosong
- Cocog karo unsur sing ora duwe anak (kalebu kelenjar teks).
- : target
- Cocog karo unsur sing dadi target URI sing dimaksud.
- : aktif
- Cocog elemen kasebut nalika iku aktif.
- : dipatèni
- Cocog karo unsur kasebut nalika dipateni.
- : dicenthang
- Cocog elemen kasebut nalika dicenthang (tombol radio utawa kothak).
- : ora (s)
- Cocog nalika elemen ora cocog karo pemilih prasaja.
Siji kombinasi anyar:
- elementA ~ elementB
- Cocog nalika elementB nderek ing ngendi waé sawise elementA, ora kudu langsung.
Properti Anyar
CSS3 uga ngenalake sawetara sifat CSS anyar. Akeh situs iki nggawe gaya visual sing bakal digandhengake karo program grafis kaya Photoshop. Sawetara, kaya radius wates utawa kotak-kotak, wis ana wiwit wiwitan nalika CSS3. Liyane, kaya flexbox utawa malah CSS Grid iku gaya sing luwih anyar sing isih dianggep tambahan CSS3.
Ing CSS3, model kothak ora diganti. Nanging ana akeh sifat gaya anyar sing bisa mbantu sampeyan ngowahi latar mburi lan wates kothak sampeyan.
Multiple Background I mages
Nggunakake latar mburi gambar, latar mburi, lan gaya latar mburi sampeyan bisa nemtokake macem-macem gambar latar mburi kanggo dilapisi ing ndhuwur siji liyane ing kothak. Gambar pisanan minangka lapisan sing paling cedhak karo pangguna, karo sing ana ing ngisor iki dicet. Yen ana werna latar mburi, dicet ngisor kabeh lapisan gambar.
Properti Gaya Latar belakang Anyar
Ana uga sawetara sifat latar mburi sing anyar ing CSS3.
- latar mburi
- Properti kasebut nemtokake cara gambar latar mburi kudu ditumpuk. Default iki minangka kothak perbatasan, nanging bisa diganti menyang kotak padding utawa kothak isi.
- latar mburi
- Iki nemtokake manawa latar mburi kudu panggonan ing kothak padding, kothak perbatasan, utawa kothak isi.
- ukuran latar mburi
- Properti iki ngidini sampeyan kanggo nuduhaké ukuran gambar latar mburi. Iki ngidini sampeyan kanggo ngluwihi gambar sing luwih cilik supaya pas karo kaca kasebut.
Owah-owahan menyang Properti Gaya Latar
Ana uga owah-owahan sawetara sifat gaya latar mburi sing ana:
- latar mburi-ulang
- Ana rong nilai anyar kanggo sifat iki: papan lan babak. Ruang spasi ngiringké gambar kanthi rapi ing jero kotak tanpa dikunci. Babak rescales gambar latar mburi supaya kothak jumlah kakehan ing kothak.
- latar mburi-lampiran
- Nilai anyar "lokal" ditambahake supaya latar mburi bakal nggulung kanthi isi unsur nalika unsur kasebut nduweni garis gulung.
- latar mburi
- Sifat dhiskusi latar mburi nambah sifat ukuran lan asal.
CSS3 Border Properties
Ing wates CSS3 bisa dadi gaya sing digunakake kanggo (solid, kaping pindho, putus, dll) utawa bisa dadi gambar. Plus, CSS3 ndadekake kemampuan nggawe pinggir bunder. Gambar-gambar wewatesan sing menarik amarga sampeyan nggawe gambar kabeh papat wates lan banjur marang CSS cara ngaplikake gambar kasebut ing watesmu.
Properties Gaya Baru Border
Ana sawetara wewatesan anyar ing CSS3:
- wates-radius
- Radius-Radius-Radius-tengen , Radius-Dhuwur-Radius -tengen , Radius-Dhuwur-Radius
- Sifat-sifat kasebut ngijini sampeyan nggawe pinggiran bunder ing wates sampeyan.
- border-image-source
- Nemtokake file sumber gambar sing arep digunakake tinimbang gaya tapel wates sing wis ditetepake.
- border-image-slice
- Ngartekne offset simpul saka pinggir gambar wewatesan
- border-image-width
- Ndetepake nilai jembar kanggo gambar wewatesane.
- border-image-outset
- Nemtokake jumlah sing wilayah gambar wewatesan ngluwihi wates kothak.
- border-image-stretch
- Nemtokake cara sisih lan bagéan tengah saka gambar wewatesan kudu dilapis utawa dipirsani.
- border-image
- Properti sithik kanggo kabeh sifat wewatesan watesan.
Tambahan CSS3 Properties Related to Borders and Backgrounds
Nalika kothak dipérang ing kaca, break kolom kanggo baris break (kanggo unsur-unsur inline) properti kotak-hiasan-break nemtokake cara kothak anyar kabungkus karo tapel lan padding. Latar bisa dipérang ing antarane pirang-pirang kotak rusak kanthi nggunakake properti iki.
Ana uga properti kotak-bayang sing bisa digunakake kanggo nambah bayangan menyang unsur kothak.
Kanthi CSS3, sampeyan saiki bisa kanthi gampang nyiyapake kaca Web kanthi sawetara kolom tanpa tabel utawa struktur tag rum rum. Sampeyan mung ngomongake browser carane akeh kolom unsur awak kudu lan carane sudhut padha kudu. Plus sampeyan bisa nambah wates (aturan), werna latar mburi sing jembar ing dhuwur kolom, lan teks sampeyan bakal mili liwat kabeh kolom kanthi otomatis.
CSS3 Kolom - Netepake Nomer lan Lebar Columns
Ana telung sifat anyar sing ngidini sampeyan nemtokake jumlah lan jembar kolom sampeyan:
- jembar kolom
- Nemtokake jembar kolom sampeyan kudu. Browser kasebut bakal mili teks kanggo ngisi ruang kanthi kolom sing jembar.
- column-count
- Nemtokake nomer kolom ing kaca. Browser bakal nggawe kolom cukup lebar supaya pas ing papan, nanging mung nomer sing sampeyan pilih.
- kolom
- Properti Shorthand ing ngendi sampeyan bisa nemtokake manawa jembar utawa nomer (utawa loro-lorone, nanging sing arang akal).
CSS3 Column Gaps lan Aturan
Kesepakatan lan aturan diselehake antarane kolom ing skenario multikolumn sing padha. Kesenjangan bakal nyurung kolom kasebut, nanging aturan ora njupuk papan apa wae. Yen aturan kolom luwih akeh tinimbang celah kasebut, bakal tumpang tindih kolom jejer. ana limang sifat anyar kanggo aturan kolom lan celah:
- kolom-gap
- Nemtokake jembaré kesenjangan ing antarane kolom.
- kolom-aturan-werna
- Nemtokake warna aturan kasebut.
- kolom-aturan-gaya
- Nemtokake gaya aturan (padhet, dotted, dobel, lan liya-liyane).
- kolom-rule-width
- Netepake jembar aturan.
- kolom-aturan
- A property shorthand sing nemtokake kabeh sifat aturan kolom telu bebarengan.
CSS3 Column Breaks, Spanning Columns, lan Fill Columns
Kolom break nggunakake opsi CSS2 sing digunakake kanggo netepake break ing konten paged, nanging kanthi telung properti anyar: break-before , break-after , lan break-inside .
Kaya karo tabel, sampeyan bisa nyetel elemen kanggo jembar kolom kanthi kolom span. Iki ngidini sampeyan nggawe berita sing akeh kolom kaya koran.
Isi kolom bakal nemtokake jumlah konten ing saben kolom. Kolom seimbang nyoba kanggo nyelehake jumlah konten sing padha ing saben kolom nalika otomatis mung mili isi nganti kolom lengkap lan banjur pindhah menyang sing sabanjuré.
Fitur liyane ing CSS3 Sing Aren & # 39; t Klebu ing CSS2
Ana akeh fitur tambahan ing CSS3 sing ora ana ing CSS2, kalebu:
- CSS Modul tata letak template lan CSS3 Modul pemisahan Grid : Nggawe grid nganggo CSS.
- Modul Teks CSS3 : Njlentrehake teks lan malah nggawe gandrung-bayangan kanthi CSS.
- Modul werna CSS3 : Saiki nganggo opacity.
- Owah-owahan menyang model kothak : Kalebu properti marquee sing tumindak kaya tag IE.
- Modul Panganggo CSS3 : Nyedhiyani sampeyan kursor anyar, tanggapan tumindak, kothak sing dibutuhake, lan uga ngowahi ukurane elemen .
- Media Queries : Queries media ngijini sampeyan luwih keluwesan nalika nemtokake carane gaya sheet ngirim digunakake. Contone, sampeyan bisa netepake sheet style sing mung kanggo piranti genggam sing duwe viewport luwih gedhe tinimbang 20em.
- Modul Ruby CSS3 : Nyedhiyakake dhukungan kanggo basa sing nggunakake ruby teks kanggo menehi annotate documents.
- Modul Paged Media CSS3 : Kanggo malah luwih ndhukung media paged (kertas, transparan, dsb).
- Isi sing diduweni : L header lan sikil mlaku, footnotes, lan isi liyane sing dikembangake kanthi cara pamrograman, utamane kanggo media paged.
- Modul Speech CSS3 : Owah-owahan menyang CSS dhasar.