Terokai sintaks asas CSS3

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;
}

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;
}

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;
}

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%;

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);

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;

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;

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;

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%;

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!