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:

1. Pemilih Elemen: Memilih elemen mengikut nama elemen HTML mereka. Contohnya: p{}.
2. Pemilih kelas: Pilih elemen mengikut nilai atribut kelas HTML. Contohnya: .classname{}.
3. Pemilih ID: Pilih elemen mengikut nilai atribut id HTML. Contohnya: #idname{}.
4. Pemilih atribut: Pilih elemen mengikut nilai atributnya. Contohnya: [attr=value]{}.
5. Pemilih kelas pseudo: Pilih elemen mengikut status atau kedudukannya. Contohnya: :hover{}, :nth-child(){}.
6. Pemilih elemen pseudo: digunakan untuk memilih bahagian tertentu elemen, seperti::selepas{}, ::sebelum{}.

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:

1. muka fon: Digunakan untuk menentukan fon tersuai yang dimuatkan untuk halaman web.
2. bayang-teks: Digunakan untuk menambah bayangan teks.
3. text-overflow: Digunakan untuk mengawal perkara yang berlaku apabila teks melimpah unsur.
4. pembalut perkataan: Digunakan untuk mengawal tempoh pembungkusan perkataan dalam teks.

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!