Cara mengosongkan gaya yang diwarisi dalam CSS

Dalam bidang reka bentuk web, CSS (Cascading Style Sheets) sering digunakan untuk mengawal reka letak dan gaya halaman web. Faedah CSS ialah anda boleh meningkatkan kecekapan dengan menggunakan peraturan pada berbilang elemen dan anda boleh menentukan berbilang peraturan untuk setiap elemen. Walau bagaimanapun, masalah timbul apabila berbilang peraturan digunakan pada elemen yang sama: CSS diwarisi. Iaitu, elemen mewarisi beberapa gaya daripada elemen induknya, dan gaya ini mungkin tidak dipaparkan pada halaman seperti yang kita jangkakan.

Dalam artikel ini, kita akan membincangkan cara mengosongkan CSS yang diwarisi dan memperkenalkan beberapa penyelesaian.

1. Gunakan !important

!important ialah pengisytiharan keutamaan dalam peraturan CSS. Ini boleh ditambahkan pada peraturan untuk mengatasi peraturan lain yang digunakan pada elemen yang sama. Berhati-hati apabila menggunakan !important kerana ia mungkin mempunyai kesan buruk pada kod dan penyelenggaraan anda. Kami hanya mengesyorkan menggunakan !important apabila perlu.

Sebagai contoh, jika anda ingin mengosongkan gaya warna yang diwarisi bagi elemen h1, anda boleh menambah peraturan berikut dalam CSS:

h1{
warna: hitam!penting;
}

Ini akan mengalih keluar gaya warna daripada elemen h1 dan menetapkannya kepada hitam.

2. Menggunakan pemilih universal

Pemilih universal (*) ialah peraturan CSS yang memilih semua elemen. Anda boleh menggunakan pemilih universal untuk mengosongkan gaya yang diwarisi dan menggunakan gaya tertentu pada semua elemen.

Sebagai contoh, jika anda ingin mengosongkan gaya fon yang diwarisi daripada semua elemen perenggan dan menetapkan gaya fonnya kepada "Helvetica", anda boleh menggunakan peraturan berikut:

*{
font-family: Helvetica;
}

Ini akan mengosongkan gaya warisan semua elemen perenggan dan menetapkan gaya fon mereka kepada Helvetica.

3. Gunakan id dan kelas

Gunakan id dan kelas untuk menentukan gaya dan pengecam unik untuk elemen dalam CSS, mengelakkan kesan gaya yang digunakan pada elemen lain. Dalam CSS, kedua-dua id dan kelas mempunyai format sintaks yang berbeza.

Sebagai contoh, jika anda ingin mengosongkan gaya yang diwarisi pada elemen div dengan id "bar sisi" dan menetapkan warna latar belakangnya kepada kelabu, gunakan peraturan berikut:

bar sisi{

warna latar belakang: kelabu;
}

Ini akan mengosongkan gaya warisan elemen div dengan id "bar sisi" dan menetapkan warna latar belakangnya kepada kelabu.

Jika anda ingin mengosongkan gaya yang diwarisi semua elemen ul dengan "menu" kelas dan menetapkan gaya fonnya kepada Verdana, gunakan peraturan berikut:

ul.menu{
fon -keluarga: Verdana;
}

Ini akan mengalih keluar gaya yang diwarisi daripada semua elemen ul dengan "menu" kelas dan menetapkan gaya fonnya kepada Verdana.

4. Tetapkan semula lembaran gaya

Tetapan semula gaya ialah kaedah biasa untuk menyeragamkan gaya CSS antara penyemak imbas yang berbeza. Ini bukan pembersihan lengkap gaya yang diwarisi, tetapi ia mencipta set peraturan baharu dalam CSS supaya anda boleh mengawal penampilan dan gaya setiap elemen.

Rangka kerja tetapan semula CSS yang popular ialah Tetapkan Semula CSS, yang menetapkan gaya lalai semua elemen kepada sifar dan menyediakan gaya tersuai untuk setiap elemen. Anda boleh menggunakan Reset CSS dengan mudah dalam projek anda untuk mengelakkan ketidakkonsistenan gaya antara penyemak imbas dan halaman reka bentuk dari awal.

Kesimpulan

Mengosongkan CSS yang diwarisi ialah isu penting dalam reka bentuk web. Dengan menggunakan kaedah seperti pemilih, id dan kelas universal yang penting dan rangka kerja tetapan semula gaya, anda boleh mengurus gaya CSS dengan mudah dalam halaman web anda untuk sentiasa menampilkan penampilan dan prestasi terbaik.

Atas ialah kandungan terperinci Cara mengosongkan gaya yang diwarisi dalam CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!