"Manual Rujukan Edisi Terkini CSS3" ialah manual pembelajaran rujukan dalam talian CSS3 yang rasmi Manual pembangunan dalam talian CSS3 ini mengandungi pelbagai sifat CSS3, sintaks, takrifan, kaedah penggunaan, contoh operasi, dll. Ia amat diperlukan untuk pelajar dan pembangun bahagian hadapan web. Semak dokumen manual dalam talian! Nota: CSS3 ialah versi teknologi CSS yang dipertingkatkan pembangunan bahasa CSS3 ke arah modularisasi Modul ini termasuk: model kotak, modul senarai, kaedah hiperpautan, modul bahasa, latar belakang dan sempadan, kesan teks, reka letak berbilang lajur, dsb.
CSS3 ialah versi teknologi CSS (Cascading Style Sheets) yang dinaik taraf Ia telah dirumuskan pada tahun 1999. Pada 23 Mei 2001, W3C telah melengkapkan draf kerja CSS3, yang terutamanya merangkumi model kotak, modul senarai, kaedah hiperpautan, modul bahasa, dan latar belakang dan modul seperti sempadan, kesan teks dan reka letak berbilang lajur.
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 penyemak imbas yang berbeza menyokong ciri yang berbeza pada masa yang berbeza, yang juga menjadikan pembangunan merentas penyemak imbas menjadi rumit.
Petua: Sebelum meneruskan pembelajaran CSS3, anda perlu mempunyai pemahaman asas tentang CSS dan HTML.
CSS digunakan untuk mengawal gaya dan susun atur halaman web. CSS3 ialah standard CSS terkini.
Asas Bahasa CSS3
Sintaks CSS3 adalah berdasarkan versi asal CSS, yang membolehkan pengguna menentukan elemen HTML tertentu dalam teg tanpa menggunakan kelas berlebihan, ID atau JavaScript.
Kebanyakan pemilih CSS bukan baru ditambah dalam CSS3, cuma ia tidak digunakan secara meluas dalam versi sebelumnya.
Jika anda ingin mencuba untuk mencapai teg yang bersih, ringan dan pemisahan struktur dan prestasi yang lebih baik, pemilih lanjutan sangat berguna untuk mengurangkan bilangan kelas dan ID dalam teg dan membolehkan pereka bentuk untuk Mengekalkan helaian gaya dengan lebih banyak dengan mudah.
Buat dan jalankan contoh CSS3 pertama
Instance
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
}
div#div2
{
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-moz-transform:rotate(30deg); /* Firefox */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
-o-transform:rotate(30deg); /* Opera */
}
</style>
</head>
<body>
<div>你好。这是一个 div 元素。</div>
<div id="div2">你好。这是一个 div 元素。</div>
</body>
</html>Run Instance »
Klik butang "Run Instance" untuk melihat contoh dalam talian
Bukankah ia sangat mudah dan menyeronokkan! Prinsip CSS3 adalah sama seperti CSS Ia adalah untuk menyesuaikan pemilih helaian gaya dalam halaman web, dan kemudian merujuk pemilih ini dalam jumlah yang besar dalam halaman web.
Petua: Tutorial CSS3 kami akan membantu anda mempelajari langkah demi langkah ciri baharu dalam CSS3 dan cara mengawal gaya dan reka letak berbilang halaman web pada masa yang sama. Jika anda mempunyai sebarang soalan, sila pergi ke laman web PHP Cina Komuniti CSS3 untuk bertanya soalan anda, dan netizen yang bersemangat akan menjawabnya untuk anda.
Kelebihan CSS3
Mengurangkan kos pembangunan dan kos penyelenggaraan
Sebelum kemunculan CSS3, pembangun sering perlu menambah tag HTML tambahan untuk mencapai kesan sudut bulat, menggunakan satu atau lebih imej untuk melengkapkan CSS3 hanya memerlukan satu teg, yang boleh dicapai menggunakan sifat jejari sempadan dalam CSS3.
Dengan cara ini, teknologi CSS3 boleh membebaskan orang daripada kerja melukis, memotong dan mengoptimumkan imej.
Jika anda perlu melaraskan lengkok atau warna sudut bulat kemudian, menggunakan CSS2.1, anda perlu melukis dan memotong imej dari awal untuk mencapainya Menggunakan CSS3, anda hanya perlu mengubah suai nilai atribut jejari sempadan untuk menyelesaikan pengubahsuaian dengan cepat.
Ciri animasi yang disediakan oleh CSS3 membolehkan pembangun menjauhkan diri daripada JavaScript apabila melaksanakan beberapa butang dinamik atau navigasi dinamik, supaya pembangun tidak perlu menghabiskan banyak masa menulis skrip atau mencari pemalam skrip yang sesuai untuk disesuaikan dengan beberapa kesan laman web dinamik.
Tingkatkan prestasi halaman
Banyak teknik CSS3 menjadi "penggantian" untuk imej dengan memberikan kesan visual yang sama, dengan kata lain, mengurangkan sarang tag berlebihan dan bilangan imej yang digunakan semasa membuat pembangunan web, bermakna pengguna akan mempunyai kurang kandungan untuk dimuat turun dan halaman akan dimuatkan dengan lebih cepat.
Selain itu, lebih sedikit imej, skrip dan fail Flash boleh mengurangkan bilangan permintaan HTTP apabila pengguna melawati tapak web, yang merupakan salah satu cara terbaik untuk meningkatkan kelajuan pemuatan halaman. Menggunakan CSS3 untuk mencipta tapak web grafik tidak memerlukan sebarang imej, yang sangat mengurangkan bilangan permintaan HTTP dan meningkatkan kelajuan pemuatan halaman.
Sebagai contoh, kesan animasi CSS3 boleh mengurangkan permintaan HTTP untuk fail JavaScript dan Flash, tetapi mungkin memerlukan penyemak imbas melakukan banyak kerja untuk menyelesaikan pemaparan kesan animasi ini, yang mungkin menyebabkan penyemak imbas bertindak balas dengan perlahan dan menyebabkan kehilangan pengguna .
Oleh itu, anda perlu berfikir dengan teliti apabila menggunakan beberapa kesan khas yang kompleks. Malah, banyak teknologi CSS3 boleh meningkatkan prestasi halaman dengan baik dalam apa jua keadaan.
CSS3 akan serasi sepenuhnya ke belakang, jadi tidak perlu mengubah suai reka bentuk untuk memastikan ia berfungsi. Pelayar web juga akan terus menyokong CSS2.
Apa yang diliputi oleh manual tutorial CSS3 ini
Manual tutorial CSS3 ini merangkumi semua ciri CSS3 baharu, termasuk kesan sudut bulat, sempadan grafik, bayang blok dan bayang teks, menggunakan RGBA untuk mencapai kesan ketelusan, kesan kecerunan, menggunakan alat @ Font-Face fon tersuai, berbilang imej latar belakang, pemprosesan ubah bentuk teks atau imej (putaran, penskalaan, condong, pergerakan), reka letak berbilang lajur, pertanyaan media dan pengenalan ciri baharu dan contoh larian.
Petua: Setiap bab dalam tutorial ini mengandungi banyak contoh CSS3 Anda boleh terus klik butang "Jalankan Contoh" untuk melihat keputusan berjalan dalam talian. Contoh ini akan membantu anda memahami dan menggunakan ciri CSS3 baharu dengan lebih baik.
Sumber rujukan pembelajaran berkaitan CSS3 lain
Selain pengembangan pengetahuan di sebelah kanan halaman ini, sumber berikut juga dipilih untuk semua orang
- , sangat praktikal
- Halaman hadapan laluan pembelajaran: Bagaimana untuk menjadi pembangun bahagian hadapan yang Cemerlang!
Bab terbaru
- CSS3 多媒体查询实例 2016-10-18
- CSS3 多媒体查询 2016-10-18
- CSS3 弹性盒子 2016-10-18
- CSS3 框大小 2016-10-18
- CSS 分页 2016-10-18
- CSS 按钮 2016-10-18
- CSS 图片 2016-10-18
- CSS3 用户界面 2016-10-18
Kursus berkaitan
- Pengenalan pantas kepada pembangunan bahagian hadapan web 2021-12-10
- Kursus bahagian hadapan yang paling memahami anda: HTML5/CSS3/ES6/NPM/Vue/...[Asal] 2022-09-30
- Tutorial Video Permulaan Gulp 2022-04-18
- Tutorial video Brothers in Arms Gao Luofeng CSS3 2022-04-20
- Aplikasi web pembangunan AngularJS contoh tutorial video asas 2022-04-18
- Kenalan penuh Ajax 2022-04-13
- Tutorial video asas rangka kerja MUI 2022-04-13
- Kelas percubaan kelas latihan dalam talian 2019-01-10
-
Perluasan pengetahuan
-
Navigasi Tutorial