Memahami perubahan utama CSS3
Perbezaan terbesar antara CSS2 dan CSS3 ialah CSS3 telah dipecah menjadi bahagian yang berlainan, dipanggil modul. Setiap modul ini sedang berjalan melalui W3C dalam pelbagai peringkat proses cadangan. Proses ini menjadikannya lebih mudah untuk pelbagai potongan CSS3 untuk diterima dan dilaksanakan dalam pelayar oleh pengeluar yang berbeza.
Jika anda membandingkan proses ini dengan apa yang berlaku dengan CSS2, di mana segala sesuatu telah dikemukakan sebagai satu dokumen dengan semua maklumat Lembaran Gaya Cascading di dalamnya, anda mula melihat kelebihan memecahkan syor itu menjadi lebih kecil, kepingan individu. Oleh kerana setiap modul sedang dijalankan secara individu, kami mempunyai pelbagai sokongan penyemak imbas yang lebih luas untuk modul CSS3.
Seperti mana-mana spesifikasi yang baru dan berubah, pastikan anda menguji halaman CSS3 anda dengan teliti dalam seberapa banyak pelayar dan sistem pengendalian yang anda boleh. Ingat tujuannya ialah tidak membuat halaman web yang kelihatan sama dalam setiap penyemak imbas, tetapi untuk memastikan bahawa mana-mana gaya yang anda gunakan, termasuk gaya CSS3, kelihatan hebat di pelayar yang menyokongnya dan mereka kembali dengan anggun untuk pelayar lama jangan.
Pemilih CSS3 Baru
CSS3 menawarkan banyak cara baru yang boleh anda tulis peraturan CSS dengan pemilih CSS baru, serta gabungan baru, dan beberapa unsur-unsur pseudo baru.
Tiga pemilih atribut baru:
- Atribut yang mula sepadan dengan tepat unsur [foo ^ = "bar"] Elemen mempunyai atribut yang dinamakan foo yang bermula dengan "bar" contohnya
- Attribute ending matches exactly element [foo $ = "bar"] Element mempunyai atribut yang dinamakan foo yang berakhir dengan "bar" misalnya
- Atribut mengandungi elemen perlawanan [foo * = "bar"] Elemen mempunyai atribut yang dinamakan foo yang mengandungi rentetan "bar" contohnya
16 pseudo-kelas baru:
- : akar
- Elemen akar dokumen. Dalam HTML ini sentiasa ada.
- : nth-child (n)
- Gunakan ini untuk menyesuaikan unsur kanak-kanak yang tepat atau menggunakan pemboleh ubah untuk mendapatkan padanan bergantian.
- : nth-last-child (n)
- Padan unsur kanak-kanak yang tepat yang dikira dari yang terakhir.
- : nth-of-type (n)
- Memadai elemen saudara dengan nama yang sama sebelum di dalam pokok dokumen.
- : nth-last-of-type (n)
- Memadankan unsur saudara dengan nama yang sama mengira dari bawah.
- :anak bongsu
- Padankan unsur terakhir anak ibu bapa.
- : first-of-type
- Padankan elemen saudara yang pertama jenis itu.
- : last-of-type
- Padankan elemen saudara yang terakhir dari jenis itu.
- :anak tunggal
- Padankan unsur yang merupakan satu-satunya anak kepada ibu bapanya.
- : hanya jenis
- Padankan unsur yang merupakan satu-satunya jenisnya.
- : kosong
- Padankan elemen yang tidak mempunyai anak (termasuk nod teks).
- : sasaran
- Padankan elemen yang merupakan sasaran URI yang merujuk.
- : didayakan
- Padankan elemen apabila ia diaktifkan.
- : kurang upaya
- Padankan elemen apabila ia dilumpuhkan.
- : diperiksa
- Padankan unsur apabila ia diperiksa (butang radio atau kotak semak).
- : tidak (s)
- Padankan apabila unsur tidak sepadan dengan pemilih mudah.
Satu gabungan baru:
- elementA ~ elementB
- Padankan apabila elementB mengikuti suatu tempat selepas elementA, tidak semestinya segera.
Hartanah Baru
CSS3 juga memperkenalkan beberapa sifat CSS baru. Kebanyakan sifat ini adalah untuk mencipta gaya visual yang mungkin lebih banyak dikaitkan dengan program grafik seperti Photoshop. Sebahagian daripada ini, seperti radius sempadan atau bayang-bayang kotak, telah wujud sejak pengenalan jika CSS3. Lain-lain, seperti flexbox atau bahkan CSS Grid adalah gaya baru yang masih sering dianggap penambahan CSS3.
Dalam CSS3, model kotak tidak berubah. Tetapi terdapat sekumpulan ciri-ciri gaya baru yang dapat membantu anda menyusun latar belakang dan sempadan kotak anda.
Latar Belakang Pelbagai Saya mages
Menggunakan latar belakang imej, kedudukan latar belakang, dan gaya latar belakang-ulang anda boleh menentukan imej latar belakang berganda untuk dilapis di atas satu sama lain di dalam kotak. Imej pertama adalah lapisan paling dekat dengan pengguna, dengan yang berikut dicat di belakang. Sekiranya terdapat warna latar belakang, ia dicat di bawah semua lapisan imej.
Ciri-ciri Gaya Latar Belakang Baru
Terdapat juga beberapa ciri latar belakang baharu dalam CSS3.
- klip latar belakang
- Harta ini mentakrifkan bagaimana imej latar belakang perlu dipotong. Lalai adalah kotak sempadan, tetapi ia boleh ditukar ke kotak padding atau kotak kandungan.
- asal-asal
- Harta ini menentukan sama ada latar belakang harus berada di dalam kotak padding, kotak sempadan, atau kotak kandungan.
- saiz latar belakang
- Harta ini membolehkan anda untuk menunjukkan saiz imej latar belakang. Ia membolehkan anda untuk meregangkan imej yang lebih kecil agar sesuai dengan halaman tersebut.
Perubahan kepada Hartanah Gaya Latar Hadapan
Terdapat juga beberapa perubahan pada sifat gaya latar belakang sedia ada:
- ulangi latar belakang
- Terdapat dua nilai baru untuk harta ini: ruang dan bulat. Ruang ruang gambar berjubin sama rata di dalam kotak tanpa dipotong. Pusingan membaik pulih imej latar belakang supaya ia akan menjilid sebilangan besar kali dalam kotak.
- lampiran-lampiran
- Nilai baru "setempat" ditambah supaya latar belakang akan menatal dengan kandungan unsur apabila elemen itu mempunyai bar skrol.
- latar belakang
- Latar Belakang latar belakang menambah sifat saiz dan asal.
Hartanah Sempadan CSS3
Dalam sempadan CSS3 boleh menjadi gaya yang kami gunakan untuk (padat, berganda, putus-putus, dll) atau mereka boleh menjadi imej. Plus, CSS3 membawa keupayaan untuk membuat sudut bulat. Imej sempadan menarik kerana anda membuat imej dari semua empat sempadan dan kemudian memberitahu CSS cara menerapkan imej itu ke sempadan anda.
Hartanah Sempadan Baru
Terdapat beberapa ciri sempadan baru dalam CSS3:
- jejari sempadan
- jejari atas sempadan kanan , sempadan jejari bawah-kanan , jejari bawah-kiri-kiri , sempadan-kiri-jejari jejari
- Ciri-ciri ini membolehkan anda membuat sudut-sudut bulat di sempadan anda.
- sumber imej-sempadan
- Menentukan fail sumber imej yang akan digunakan dan bukannya gaya sempadan yang telah ditentukan.
- sempadan imej-slice
- Mewakili offsets masuk dari tepi imej sempadan
- border-image-width
- Mendefinisikan nilai lebar untuk imej sempadan anda.
- border-image-outset
- Menentukan jumlah yang kawasan imej sempadan melangkaui kotak sempadan.
- border-image-stretch
- Mendefinisikan bagaimana bahagian dan bahagian tengah imej sempadan harus dijubin atau diperkecil.
- imej sempadan
- Sifat tersendiri untuk semua sifat imej sempadan.
Ciri CSS3 Tambahan Berkaitan dengan Sempadan dan Latar Belakang
Apabila kotak pecah pada pecahan halaman, rehat lajur untuk break line (untuk elemen inline) harta box-decoration-break menentukan bagaimana kotak baru dibalut dengan sempadan dan padding. Latar belakang boleh dibahagikan antara beberapa kotak pecah menggunakan harta ini.
Terdapat juga harta kotak-bayangan yang boleh digunakan untuk menambah bayang-bayang ke elemen kotak.
Dengan CSS3, kini anda boleh dengan mudah menubuhkan sebuah laman Web dengan beberapa lajur tanpa jadual atau struktur tag div rumit. Anda hanya memberitahu penyemak imbas berapa banyak lajur elemen badan yang sepatutnya ada dan sejauh mana ia sepatutnya. Plus anda boleh menambah sempadan (peraturan), warna latar belakang yang merangkumi ketinggian lajur, dan teks anda akan mengalir melalui semua lajur secara automatik.
Lajur CSS3 - Tentukan Nombor dan Lebar Lajur
Terdapat tiga sifat baru yang membolehkan anda menentukan bilangan dan lebar lajur anda:
- lebar lajur
- Mendefinisikan lebar lajur anda sepatutnya. Pelayar kemudian akan mengalir teks untuk mengisi ruang dengan lajur yang luas.
- kiraan kira-kira
- Mendefinisikan bilangan lajur pada halaman. Penyemak imbas kemudian akan membuat lajur yang cukup lebar untuk dimuatkan dalam ruang, tetapi hanya nombor yang anda tentukan.
- lajur
- Hartanah shorthand di mana anda boleh menentukan sama ada lebar atau nombor (atau kedua-duanya, tetapi yang jarang masuk akal).
CSS3 Column Jurang dan Peraturan
Jurang dan peraturan diletakkan di antara lajur dalam senario multicolumn yang sama. Jurang akan memisahkan lajur, tetapi peraturan tidak mengambil apa-apa ruang. Sekiranya peraturan lajur lebih luas daripada jurang, ia akan bertindih dengan lajur bersebelahan. terdapat lima sifat baru untuk peraturan lajur dan jurang:
- jurang ruang
- Mendefinisikan lebar jurang di antara lajur.
- warna-peraturan warna
- Mendefinisikan warna peraturan.
- lajur-peraturan-gaya
- Menetapkan gaya peraturan (pepejal, putus-putus, berganda, dan lain-lain).
- lebar lajur-peraturan
- Mendefinisikan lebar peraturan.
- peraturan lajur
- Sifat tersendiri yang menentukan ketiga-tiga sifat peraturan lajur sekaligus.
Carta Kolum CSS3, Ruang Pengesan dan Pengisian Lajur
Kerosakan lajur menggunakan pilihan CSS2 yang sama digunakan untuk menentukan rehat dalam kandungan paged, tetapi dengan tiga sifat baru: break-before , break-after , dan break-in .
Seperti dengan jadual, anda boleh menetapkan unsur-unsur ke span column dengan harta span-span. Ini membolehkan anda membuat tajuk utama yang melengkapkan pelbagai ruangan seperti akhbar.
Mengisi lajur memutuskan berapa banyak kandungan dalam setiap lajur. Lajur yang seimbang cuba untuk meletakkan jumlah kandungan yang sama dalam setiap lajur sementara auto mengalirkan kandungan dalam sehingga lajur penuh dan kemudian pergi ke yang seterusnya.
Ciri-ciri Lebih Lanjut dalam CSS3 Itu Yang Tidak Digabungkan dalam CSS2
Terdapat banyak ciri tambahan dalam CSS3 yang tidak wujud dalam CSS2, termasuk:
- Modul susun atur template CSS dan CSS3 Modul penentududukan Grid : Membuat grid dengan CSS.
- Modul Teks CSS3 : Rangka teks dan juga membuat bayang-bayang dengan CSS.
- Modul CSS3 Warna : Kini dengan kelegapan.
- Perubahan kepada model kotak : Termasuk harta marquee yang bertindak seperti tag IE.
- Modul Antara Muka Pengguna CSS3 : Memberi anda kursor baru, tindak balas kepada tindakan, medan yang diperlukan, dan mengubah saiz elemen .
- Pertanyaan Media : Pertanyaan media membolehkan anda lebih fleksibel apabila menentukan bagaimana lembaran gaya harus digunakan. Sebagai contoh, anda boleh menentukan helaian gaya yang hanya untuk peranti pegang tangan yang mempunyai viewport yang lebih besar daripada 20em.
- Modul Ruby CSS3 : Menyediakan sokongan untuk bahasa yang menggunakan ruby teks untuk memberi penjelasan dokumen.
- Modul Paged Media CSS3 : Untuk lebih banyak sokongan untuk media paged (kertas, telus, dll).
- Kandungan yang dihasilkan : L yang mengetuai tajuk dan footer, nota kaki dan kandungan lain yang dihasilkan secara programatik, terutamanya untuk media paged.
- Modul Ucapan CSS3 : Perubahan kepada CSS aural.