Rumah > Artikel > hujung hadapan web > Cara menggunakan css3
CSS (Cascading Style Sheets) ialah bahasa yang digunakan untuk menggayakan elemen web. Ia dikeluarkan semula pada tahun 1996, dan selepas bertahun-tahun pembangunan dan penambahbaikan, ia kini telah dikeluarkan kepada CSS3.
CSS3 menyediakan pembangun dengan banyak fungsi dan ciri baharu, seperti kesan animasi, mengawal penampilan dan reka letak teks, dan banyak lagi. Dalam artikel ini, kita akan melihat dengan lebih dekat cara menggunakan CSS3.
1. Pemilih CSS3
CSS3 memperkenalkan banyak pemilih baharu, membolehkan pembangun memilih elemen dengan lebih tepat untuk menggunakan gaya. Berikut ialah beberapa pemilih biasa:
2. Animasi CSS3
Animasi CSS3 ialah kaedah untuk mengubah elemen secara dinamik pada halaman. Ia menggunakan peraturan @keyframes baharu dan beberapa sifat baharu seperti nama animasi, tempoh animasi dan fungsi pemasaan animasi.
Berikut ialah contoh mudah:
/* 定义动画 */ @keyframes mymove { from {left: 0px;} to {left: 200px;} } /* 应用动画 */ div { animation-name: mymove; animation-duration: 5s; }
Contoh ini akan mengalihkan elemen div pada halaman 200 piksel sepanjang paksi-x, mengambil masa 5 saat untuk dianimasikan.
3. Model kotak CSS3
Model kotak bermaksud bahawa apabila meletakkan elemen pada halaman web, elemen itu dianggap sebagai "kotak", termasuk kawasan kandungan, padding, sempadan dan margin . CSS3 memperkenalkan model kotak baharu yang membenarkan kawalan yang lebih tepat ke atas saiz dan kedudukan elemen halaman. Ia menambah lebar sempadan dan padding pada lebar dan ketinggian elemen itu sendiri.
Berikut ialah contoh:
/* 使用新的盒模型 */ div { box-sizing: border-box; width: 50%; padding: 20px; border: 1px solid black; }
Contoh ini akan menetapkan lebar div pada halaman kepada 50% daripada elemen induk, termasuk kawasan kandungan, padding dan sempadan. Tanpa model kotak baharu, sempadan dan pelapik akan meningkatkan lebar dan ketinggian elemen itu sendiri.
4. Fon CSS3
Menggunakan CSS3, anda boleh mengawal penampilan dan reka letak teks anda dengan lebih tepat. Berikut ialah beberapa sifat baharu:
Berikut ialah beberapa contoh:
/* 定义字体 */ @font-face { font-family: "MyFont"; src: url("myfont.ttf"); } /* 应用字体 */ body { font-family: "MyFont"; } /* 添加文本阴影 */ h1 { text-shadow: 2px 2px #000000; } /* 控制文本溢出 */ p { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } /* 控制长单词的换行方式 */ p2 { word-wrap: break-word; }
5 pertanyaan media CSS3
Pertanyaan media ialah kaedah menggunakan CSS3 untuk melaraskan saiz tetingkap penyemak imbas. berdasarkan saiz tetingkap penyemak imbas atau ciri peranti lain untuk menggunakan gaya yang berbeza. Ini membolehkan tapak web menyesuaikan dengan lebih baik kepada saiz dan peranti monitor yang berbeza.
Berikut ialah contoh:
/* 当浏览器窗口小于 600 像素时应用不同的样式 */ @media only screen and (max-width: 600px) { body { background-color: lightblue; } }
Contoh ini akan menukar warna latar belakang halaman kepada biru muda apabila tetingkap penyemak imbas lebih kecil daripada 600 piksel.
Ringkasan:
CSS3 memperkenalkan banyak fungsi dan ciri baharu yang memudahkan pembangun mengawal gaya dan reka letak elemen halaman web. Artikel ini memperkenalkan beberapa ciri CSS3 yang biasa digunakan, termasuk pemilih, animasi, model kotak, fon dan pertanyaan media. Semoga artikel ini dapat membantu pembaca lebih memahami cara menggunakan CSS3.
Atas ialah kandungan terperinci Cara menggunakan css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!