Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Terokai sintaks asas CSS3

Terokai sintaks asas CSS3

PHPz
Lepaskan: 2023-04-13 10:05:05
asal
657 orang telah melayarinya

CSS ialah bahasa helaian gaya yang digunakan untuk reka bentuk web CSS3 ialah versi CSS yang ditingkatkan, memberikan lebih banyak gaya dan kesan khas. Dalam artikel ini, kami akan meneroka cara menulis CSS3 supaya anda boleh mengaplikasikannya dengan lebih baik.

1. Pemilih

Dalam CSS3, terdapat banyak pemilih baharu yang boleh digunakan untuk memilih elemen HTML yang berbeza termasuk:

  1. Pemilihan atribut
Menggunakan pemilih atribut, anda boleh memilih elemen berdasarkan nilai atributnya. Sebagai contoh, peraturan CSS berikut akan memilih semua elemen dengan nilai atribut tajuk "contoh":

[title=example] {
  color: red;
}
Salin selepas log masuk
    Pemilih Padanan Subrentetan
Pemilih Padanan Subrentetan Dibenarkan Anda pilih elemen berdasarkan subrentetan dalam nilai atribut. Berikut ialah contoh penggunaan * untuk memadankan elemen:

a[href*="example"] {
  color: red;
}
Salin selepas log masuk
Ini memilih semua elemen utama yang nilai atribut hrefnya mengandungi rentetan "contoh".

    Pemilih elemen pseudo
CSS3 juga menambah beberapa pemilih elemen pseudo baharu yang boleh menambah gaya pada bahagian tertentu elemen, seperti:

p::first-letter {
  font-size: 200%;
}

p::first-line {
  color: red;
}
Salin selepas log masuk
Peraturan di atas akan menukar saiz fon huruf pertama dalam perenggan, serta warna baris pertama teks.

2. Ciri baharu

CSS3 juga menyediakan banyak ciri baharu, termasuk:

    Sudut bulat
border-radius: 50%;
Salin selepas log masuk
Perkara di atas kod akan menjadikan elemen mempunyai sudut bulat.

    Kecerunan
Gunakan kecerunan untuk menambah peralihan warna yang lancar pada elemen. Berikut ialah contoh menggunakan kecerunan:

background: linear-gradient(to bottom right, red, yellow);
Salin selepas log masuk
Ini akan menyerlahkan latar belakang elemen dari sudut kiri atas ke sudut kanan bawah, daripada merah ke kuning.

    Bayang-kotak
CSS3 juga menyediakan sifat bayang-kotak baharu yang boleh anda gunakan untuk menambah bayang-bayang pada elemen. Contohnya:

box-shadow: 10px 10px 5px grey;
Salin selepas log masuk
Peraturan di atas akan menambah bayang pada sudut kanan bawah elemen.

    Peralihan
Kesan peralihan boleh menjadikan perubahan elemen lebih lancar. Berikut ialah contoh menggunakan peralihan:

transition: width 2s;
Salin selepas log masuk
Ini menjadikan masa dua saat untuk lebar elemen berubah daripada satu nilai ke nilai yang lain.

    Animasi
Animasi boleh menjadikan elemen lebih menarik dan jelas. Berikut ialah contoh penggunaan animasi:

animation: example 5s infinite;
Salin selepas log masuk
Ini menambahkan animasi yang dipanggil "contoh" pada elemen yang bertahan selama 5 saat dan gelung selama-lamanya.

3. Keserasian penyemak imbas

Perlu diambil perhatian bahawa ciri CSS3 mempunyai keserasian yang berbeza dalam penyemak imbas yang berbeza. Untuk memastikan tapak web anda berfungsi dengan baik dalam semua penyemak imbas, terdapat beberapa helah yang perlu anda gunakan untuk melaksanakan sokongan penyemak imbas.

Satu penyelesaian ialah menggunakan awalan penyemak imbas, memberi awalan sifat CSS dengan -vendor- supaya penyemak imbas yang berbeza boleh menghuraikan kod anda dengan betul. Contohnya:

-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
Salin selepas log masuk
Anda juga boleh menggunakan prapemproses CSS seperti Sass atau Less, yang menjadikan penulisan CSS lebih bersih dan menyediakan ciri seperti campuran dan pembolehubah.

Ringkasnya, CSS3 menyediakan banyak ciri dan pemilih baharu yang boleh menjadikan reka bentuk web lebih jelas dan menarik. Memahami ciri baharu dan kaedah penulisan ini boleh menjadikan halaman web anda lebih menarik dan memberikan pengguna pengalaman yang lebih baik.

Atas ialah kandungan terperinci Terokai sintaks asas CSS3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan