Jadual Kandungan
Apakah maksud css3?
Ciri baharu CSS3
Tingkatkan pemilih
Tingkatkan kesan visual
Tingkatkan kesan latar belakang
Memperbaiki model kotak
Tingkatkan fungsi latar belakang
Tambah kesan bayang
Bayang-bayang terbahagi kepada dua jenis: bayang-teks dan bayang-bayang kotak.
Tambah reka letak berbilang lajur dan reka letak model kotak fleksibel
Memperbaiki Fon Web dan Ikon Fon Web
Fungsi warna dan ketelusan dipertingkatkan
Tambahan bucu bulat dan fungsi sempadan
Tambah operasi ubah bentuk
Tambah animasi dan kesan interaktif
Tingkatkan ciri media dan susun atur responsif

Apakah maksud css3?

Jan 24, 2022 pm 02:26 PM
css

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.

Apakah maksud css3?

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3&&HTML5, komputer Dell G3.

Apakah maksud css3?

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.

Ciri baharu CSS3

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.

Tingkatkan pemilih

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.

Tingkatkan kesan visual

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.

Tingkatkan kesan latar belakang

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.

Memperbaiki model kotak

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.

Tingkatkan fungsi latar belakang

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.

Tambah kesan bayang

Bayang-bayang terbahagi kepada dua jenis: bayang-teks dan bayang-bayang kotak.

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.

Tambah reka letak berbilang lajur dan reka letak model kotak fleksibel

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.

Memperbaiki Fon Web dan Ikon Fon Web

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.

Fungsi warna dan ketelusan dipertingkatkan

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.

Tambahan bucu bulat dan fungsi sempadan

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.

Tambah operasi ubah bentuk

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.

Tambah animasi dan kesan interaktif

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.

Tingkatkan ciri media dan susun atur responsif

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!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Cara menggunakan butang bootstrap Cara menggunakan butang bootstrap Apr 07, 2025 pm 03:09 PM

Bagaimana cara menggunakan butang bootstrap? Perkenalkan CSS bootstrap untuk membuat elemen butang dan tambahkan kelas butang bootstrap untuk menambah teks butang

Cara memasukkan gambar di bootstrap Cara memasukkan gambar di bootstrap Apr 07, 2025 pm 03:30 PM

Terdapat beberapa cara untuk memasukkan imej dalam bootstrap: masukkan imej secara langsung, menggunakan tag HTML IMG. Dengan komponen imej bootstrap, anda boleh memberikan imej yang responsif dan lebih banyak gaya. Tetapkan saiz imej, gunakan kelas IMG-cecair untuk membuat imej boleh disesuaikan. Tetapkan sempadan, menggunakan kelas IMG-Sempadan. Tetapkan sudut bulat dan gunakan kelas IMG-bulat. Tetapkan bayangan, gunakan kelas bayangan. Saiz semula dan letakkan imej, menggunakan gaya CSS. Menggunakan imej latar belakang, gunakan harta CSS imej latar belakang.

Cara Menyiapkan Kerangka untuk Bootstrap Cara Menyiapkan Kerangka untuk Bootstrap Apr 07, 2025 pm 03:27 PM

Untuk menubuhkan rangka kerja bootstrap, anda perlu mengikuti langkah -langkah ini: 1. Rujuk fail bootstrap melalui CDN; 2. Muat turun dan tuan rumah fail pada pelayan anda sendiri; 3. Sertakan fail bootstrap di HTML; 4. Menyusun sass/kurang seperti yang diperlukan; 5. Import fail tersuai (pilihan). Setelah persediaan selesai, anda boleh menggunakan sistem grid Bootstrap, komponen, dan gaya untuk membuat laman web dan aplikasi yang responsif.

Cara memuat naik fail pada bootstrap Cara memuat naik fail pada bootstrap Apr 07, 2025 pm 01:09 PM

Fungsi muat naik fail boleh dilaksanakan melalui bootstrap. Langkah -langkah adalah seperti berikut: Memperkenalkan fail bootstrap CSS dan JavaScript; Buat medan input fail; Buat butang muat naik fail; mengendalikan muat naik fail (menggunakan FormData untuk mengumpul data dan kemudian hantar ke pelayan); gaya tersuai (pilihan).

Cara menetapkan bar navigasi bootstrap Cara menetapkan bar navigasi bootstrap Apr 07, 2025 pm 01:51 PM

Bootstrap Menyediakan panduan mudah untuk menubuhkan bar navigasi: Memperkenalkan Perpustakaan Bootstrap untuk membuat bar navigasi Tambah Identiti Jenama Buat Pautan Navigasi Tambah Elemen Lain (Pilihan) Laraskan Gaya (Pilihan)

Cara melihat tarikh bootstrap Cara melihat tarikh bootstrap Apr 07, 2025 pm 03:03 PM

Jawapan: Anda boleh menggunakan komponen pemetik tarikh bootstrap untuk melihat tarikh di halaman. Langkah -langkah: Memperkenalkan rangka kerja bootstrap. Buat kotak input pemilih Tarikh dalam HTML. Bootstrap secara automatik akan menambah gaya kepada pemilih. Gunakan JavaScript untuk mendapatkan tarikh yang dipilih.

Cara Mengesahkan Tarikh Bootstrap Cara Mengesahkan Tarikh Bootstrap Apr 07, 2025 pm 03:06 PM

Untuk mengesahkan tarikh dalam bootstrap, ikuti langkah -langkah ini: memperkenalkan skrip dan gaya yang diperlukan; memulakan komponen pemilih tarikh; Tetapkan atribut data-BV-tarikh untuk membolehkan pengesahan; Konfigurasikan peraturan pengesahan (seperti format tarikh, mesej ralat, dll.); Mengintegrasikan rangka kerja pengesahan bootstrap dan mengesahkan input tarikh secara automatik apabila borang dikemukakan.

Cara mengubah saiz bootstrap Cara mengubah saiz bootstrap Apr 07, 2025 pm 03:18 PM

Untuk menyesuaikan saiz unsur-unsur dalam bootstrap, anda boleh menggunakan kelas dimensi, yang termasuk: menyesuaikan lebar: .col-, .w-, .mw-adjust ketinggian: .h-, .min-h-, .max-h-

See all articles