css3 ialah versi teknologi helaian gaya cascading css yang dinaik taraf, yang bermaksud "lembaran gaya cascading tahap tiga"; css3 menambah banyak fungsi berdasarkan css2.1 untuk membantu pembangun menyelesaikan beberapa masalah praktikal, terutamanya termasuk kotak model, modul senarai, mod hiperpautan, modul bahasa, latar belakang dan sempadan, kesan teks, susun atur berbilang lajur dan modul lain.
Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3&&HTML5, komputer Dell G3.
CSS3 ialah versi teknologi CSS (Cascading Style Sheet) yang dinaik taraf, yang merujuk kepada "Cascading Style Sheet Level 3" dan ditambah berdasarkan CSS2. 1 Ia mempunyai banyak ciri baharu yang berkuasa untuk membantu pembangun menyelesaikan beberapa masalah praktikal dan tidak lagi memerlukan teg bukan semantik, skrip dan imej JavaScript yang kompleks.
CSS3 ialah versi teknologi CSS (Cascading Style Sheets) yang dinaik taraf, yang merujuk kepada "Cascading Style Sheets Level 3". Ia telah dirumuskan pada tahun 1999. Pada 23 Mei 2001, W3C telah menyiapkan draf kerja CSS3. , pelan hala tuju pembangunan CSS3 telah dirumuskan dalam draf ini, yang menyenaraikan semua modul secara terperinci dan merancang untuk menyeragamkannya secara beransur-ansur pada masa hadapan.
CSS3 ialah versi terbaru spesifikasi CSS. Ia menambahkan banyak ciri baharu yang berkuasa berdasarkan CSS2.1 untuk membantu pembangun menyelesaikan beberapa masalah praktikal dan tidak lagi memerlukan teg bukan semantik dan skrip dan imej JavaScript . Contohnya, CSS3 menyokong sudut bulat, berbilang latar belakang, ketelusan, bayang-bayang, animasi, carta dan banyak lagi.
Spesifikasi CSS3 dibahagikan kepada modul
CSS1 dan CSS2.1 kedua-duanya adalah spesifikasi tunggal CSS1 terutamanya mentakrifkan gaya asas objek halaman web, seperti fon, warna, latar belakang, sempadan, dll. . CSS2 menambahkan konsep lanjutan seperti terapung, penentududukan, pemilih lanjutan seperti subpemilih, pemilih bersebelahan, pemilih universal, dsb.
Perubahan besar dalam evolusi CSS ialah keputusan W3C untuk memecahkan CSS3 kepada satu siri modul. Vendor penyemak imbas membuat inovasi dengan pantas mengikut kadar CSS, jadi dengan menggunakan pendekatan modul, elemen dalam spesifikasi CSS3 boleh bergerak ke hadapan pada kelajuan yang berbeza kerana vendor penyemak imbas yang berbeza hanya menyokong ciri yang diberikan. Tetapi pelayar yang berbeza menyokong ciri yang berbeza pada masa yang berbeza, yang juga merumitkan pembangunan merentas pelayar.
CSS3 dibahagikan kepada berbilang modul, setiap modul mempunyai spesifikasi tersendiri:
Pengeluaran keseluruhan spesifikasi CSS3 tidak akan menjejaskan bahagian lain kerana pertikaian .
Untuk penyemak imbas, anda boleh memutuskan fungsi CSS mana yang disokong mengikut keperluan.
Bagi pembangun W3C, kemas kini yang disasarkan boleh dibuat mengikut keperluan, menjadikan spesifikasi keseluruhan lebih fleksibel dan boleh disemak tepat pada masanya, menjadikannya lebih mudah untuk mengembangkan spesifikasi khusus teknologi baharu.
Spesifikasi CSS3 bukanlah baharu sepenuhnya. Ia menyepadukan sebahagian daripada kandungan CSS2.1, tetapi telah membuat banyak penambahan dan semakan berdasarkannya.
Berbanding dengan CSS1 dan CSS2, CSS3 telah mengalami peningkatan revolusioner, dan tidak terhad kepada semakan dan penambahbaikan fungsi setempat Walaupun sokongan penyemak imbas untuk banyak ciri baharu CSS3 masih belum sempurna, ia masih membenarkan Pengguna lihat hala tuju pembangunan dan misi gaya halaman web masa hadapan.
CSS3 mempunyai banyak ciri baharu Berikut ialah senarai ringkas ciri praktikal yang disokong secara meluas oleh penyemak imbas.
Pemilih CSS3 dipertingkatkan berdasarkan CSS2.1, yang membolehkan pereka bentuk menentukan elemen HTML tertentu dalam teg tanpa menggunakan kelas dan ID yang berlebihan atau skrip JavaScript.
Pemilih lanjutan sangat berguna jika anda ingin mereka bentuk teg halaman web yang bersih dan ringan serta struktur dan pembentangan berasingan yang lebih baik. Ia boleh mengurangkan bilangan penambahan sebilangan besar atribut kelas dan id dalam teg dan memudahkan pereka bentuk untuk mengekalkan helaian gaya.
Kesan yang paling biasa dalam halaman web termasuk sudut bulat, bayang-bayang, latar belakang kecerunan, lutsinar, sempadan gambar, dsb. Kesan visual sedemikian dicapai dalam CSS dengan bergantung pada pereka bentuk untuk mencipta imej atau skrip JavaScript.
Sesetengah ciri baharu CSS3 boleh digunakan untuk mencipta beberapa kesan visual khas Bab berikut akan menunjukkan kepada anda cara ciri baharu ini mencapai kesan visual ini.
Jika latar belakang dalam CSS membawa terlalu banyak sekatan kepada anda, maka CSS3 akan membawa perubahan revolusioner.
CSS3 tidak lagi terhad kepada penggunaan warna latar belakang dan imej latar belakang Beberapa nilai atribut baharu telah ditambahkan pada ciri baharu, seperti asal latar belakang, klip latar belakang dan saiz latar belakang; selain itu, anda juga boleh menambah Tetapkan berbilang imej latar belakang pada elemen.
Dengan cara ini, jika anda ingin mereka bentuk kesan halaman yang lebih kompleks, anda tidak perlu lagi menggunakan beberapa teg berlebihan untuk membantu pelaksanaan. Sebagai contoh, untuk mencapai kesan pintu gelangsar dalam CSS, anda pada asasnya perlu menambah 2 atau 3 teg tambahan dalam CSS untuk membantu pelaksanaan, tetapi ciri baharu dalam CSS3 ini boleh mencapai kesan yang sama dalam satu teg.
Model kotak adalah keutamaan utama dalam CSS Model kotak dalam CSS2 hanya boleh melaksanakan beberapa fungsi asas dan beberapa fungsi khas perlu dilaksanakan berdasarkan JavaScript. Dalam CSS3, ini telah banyak dipertingkatkan, dan pereka boleh melaksanakannya secara langsung melalui CSS3.
Sebagai contoh, kotak fleksibel dalam CSS3, atribut ini akan memperkenalkan konsep susun atur baharu kepada semua orang, yang boleh merealisasikan pelbagai susun atur dengan mudah, terutamanya susun atur pada terminal mudah alih, fungsinya lebih berkuasa.
CSS3 membenarkan atribut latar belakang menetapkan berbilang nilai atribut, seperti imej latar belakang, ulangan latar belakang, saiz latar belakang, kedudukan latar belakang, asal latar belakang, klip latar belakang , dsb. , supaya anda boleh menambah berbilang lapisan imej latar belakang pada elemen. Jika anda ingin mereka bentuk kesan halaman web yang kompleks (seperti sudut bulat, pertindihan latar belakang, dll.), anda tidak perlu menambah berbilang teg yang tidak berguna pada dokumen HTML untuk mengoptimumkan struktur dokumen halaman web.
Bayang-bayang teks sudah wujud dalam CSS, tetapi tidak digunakan secara meluas. CSS3 meneruskan ciri ini dengan definisi baharu yang menyediakan penyelesaian silang pelayar baharu untuk menjadikan teks kelihatan lebih menarik perhatian.
Pelaksanaan bayangan kotak agak menyedihkan dalam CSS2 Untuk mencapai kesan sedemikian, tag dan imej baharu perlu ditambah, dan kesannya tidak semestinya sempurna. Bayangan kotak CSS3 akan memecahkan situasi ini dan memudahkan untuk menambah bayangan kotak pada mana-mana elemen.
CSS3 memperkenalkan beberapa modul baharu untuk mencipta reka letak berbilang lajur dengan lebih mudah.
Modul Reka Letak Berbilang lajur menerangkan cara membahagikan blok ringkas kepada berbilang lajur seperti surat khabar atau majalah.
Modul Susun Atur Kotak Fleksibel membenarkan blok dijajarkan secara mendatar dan menegak, membenarkan blok menyesuaikan diri dengan saiz skrin, berbanding dengan susun atur terapung CSS, susun atur blok sebaris dan kedudukan mutlak Dari segi reka letak, ia kelihatan lebih selesa dan fleksibel.
Kelemahannya ialah: kedua-dua modul ini belum lagi disokong dalam sesetengah penyemak imbas, tetapi dengan perkembangan teknologi, pelayar utama akan menyokongnya secara aktif.
Penyemak imbas mempunyai banyak sekatan pada fon Web dan ikon Fon Web lebih mewah untuk pereka bentuk. CSS3 memperkenalkan semula @font-face, yang sudah pasti merupakan perkara yang baik untuk pereka bentuk.
@font-face ialah cara untuk memautkan fon pada pelayan ini boleh menjadi fon yang selamat untuk penyemak imbas Anda tidak perlu lagi risau tentang masalah yang tidak dapat dipaparkan oleh pengguna dengan betul tanpa fon ini selamat tinggal kepada mereka. Zaman reka bentuk yang menggunakan gambar dan bukannya fon khas.
Pengenalan modul warna CSS3 membolehkan anda tidak lagi terhad kepada mod RGB dan heksadesimal semasa mencipta kesan halaman. CSS3 menambah beberapa mod warna baharu: HSL, HSLA dan RGBA. Dalam reka bentuk web, mudah untuk membuat warna lebih cerah atau lebih gelap. Antaranya, HSLA dan RGBA juga menambah saluran ketelusan, yang boleh menukar ketelusan mana-mana elemen dengan mudah.
Selain itu, anda juga boleh menggunakan atribut kelegapan untuk menjadikan elemen telus. Mulai sekarang, mencipta ketelusan tidak lagi bergantung pada imej atau skrip JavaScript.
Sudut bulat ialah sifat yang paling banyak digunakan dalam CSS3 atas sebab mudah: sudut bulat lebih cantik daripada garis lurus dan tidak akan bercanggah dengan reka bentuk. Perbezaan daripada membuat sudut bulat dengan CSS ialah CSS3 tidak perlu menambah sebarang elemen tag dan imej, juga tidak perlu meminjam sebarang skrip JavaScript Ia boleh dilakukan dengan hanya satu atribut.
Untuk sempadan, CSS terhad kepada menetapkan jenis garisan, ketebalan dan warna jidar Jika anda memerlukan kesan sempadan khas, anda hanya boleh menggunakan imej latar belakang untuk menirunya. Sifat imej sempadan CSS3 memperkayakan gaya sempadan elemen Anda juga boleh menggunakan sifat ini untuk mencapai kesan seperti latar belakang, memusing, meregang dan sempadan berjubin, dsb.
Dalam era CSS2, mengubah bentuk elemen adalah idea yang tidak boleh dicapai untuk mencapai kesan sedemikian, banyak kod JavaScript perlu ditulis. CSS3 memperkenalkan sifat transformasi yang boleh memanipulasi kedudukan dan bentuk objek web dalam ruang 2D atau 3D, seperti putaran, herotan, penskalaan atau anjakan.
Ciri peralihan CSS3 boleh merealisasikan beberapa kesan animasi mudah dalam penghasilan halaman web, menjadikan beberapa kesan lebih lancar dan lancar.
Ciri animasi CSS3 boleh mencapai perubahan gaya yang lebih kompleks dan beberapa kesan interaktif tanpa menggunakan sebarang kod skrip Flash atau JavaScript.
Ciri media CSS3 boleh melaksanakan susun atur responsif (Responsif), supaya susun atur boleh memilih fail gaya yang sepadan mengikut terminal paparan pengguna atau ciri peranti, oleh itu Adalah sesuai untuk mempunyai kesan susun atur yang berbeza di bawah resolusi paparan atau peranti yang berbeza, terutamanya pada terminal mudah alih.
(Mempelajari perkongsian video: tutorial video css)
Atas ialah kandungan terperinci Apakah maksud css3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
