Bagaimana untuk membatalkan gaya css

<p>CSS (Cascading Style Sheets) ialah kemahiran penting dalam reka bentuk web. Melalui gaya CSS, kami boleh menjadikan halaman web lebih cantik, praktikal dan mudah dibaca. Walau bagaimanapun, kadangkala anda mungkin menghadapi situasi di mana anda perlu membatalkan gaya CSS pada elemen. Artikel ini akan membincangkan cara membatalkan gaya CSS dengan betul.

<p>Apabila menggunakan gaya CSS, kami biasanya menggunakan rujukan fail helaian gaya, seperti:

<link rel="stylesheet" href="styles.css">

<p> dan kemudian menggunakan gaya pada elemen HTML:

<div class="container">
  <h1 class="title">我的网站</h1>
  <p class="content">欢迎来到我的网站！</p>
</div>

<p> dalam Dalam contoh kod di atas, kami menambah kelas gaya CSS pada elemen bekas <div> dan dua elemen dalaman <h1> dan <p>. Kelas gaya CSS boleh digunakan pada satu atau lebih elemen, yang menjadikan reka bentuk helaian gaya lebih cekap.

<p>Walau bagaimanapun, kadangkala anda mungkin perlu membatalkan gaya CSS pada elemen. Satu penyelesaian ialah menggantikan gaya asal dengan mengatasi nilai atribut kelas gaya. Sebagai contoh, jika anda tidak mahu elemen <h1> menggunakan saiz fon kelas gaya .title, anda boleh menulis:

h1.title {
  font-size: 16px;
}

h1 {
  font-size: inherit;
}

<p> Dalam contoh di atas, kami mula-mula mentakrifkan .title gaya kelas Saiz fon di bawah ialah 16 piksel. Walau bagaimanapun, dengan mengatasi gaya elemen h1 dalam kod di bawah, kita boleh menetapkan saiz fon kepada saiz fon lalai bagi elemen induk (elemen bekas inherit ialah kata kunci untuk nilai sifat CSS). yang membolehkan unsur mewarisi Gaya unsur induknya.

<p>Walau bagaimanapun, menggunakan sifat warisan CSS tidak dapat menjamin konsistensi merentas semua penyemak imbas, sistem pengendalian dan peranti, terutamanya pada penyemak imbas mudah alih.

<p>Penyelesaian lain ialah menggunakan atribut all dan tetapkannya kepada initial. Atribut all akan mengatasi semua gaya CSS pada elemen, manakala nilai initial akan menetapkan semua gaya kepada nilai lalainya. Kaedah ini adalah yang paling mudah, tetapi ia mungkin mempunyai beberapa kesan sampingan, seperti ia tidak mengosongkan gaya sebaris elemen.

h1 {
  all: initial;
}

<p>Jika anda ingin menyekat gaya CSS pada berbilang elemen, anda boleh mengalihkannya ke dalam kelas CSS yang berasingan dan menambah atau mengalih keluar kelas seperti yang diperlukan:

.cancel-all {
  all: initial;
}

<p>Kemudian tambahkan ini kelas pada elemen yang perlu ditindas:

<h1 class="title cancel-all">我的网站</h1>

<p>Memandangkan terdapat banyak cara untuk membatalkan gaya CSS, kita perlu berhati-hati memilih kaedah yang harus digunakan dalam situasi tertentu. Dalam amalan, kita harus mengguna pakai beberapa amalan terbaik untuk memastikan kod kita memenuhi piawaian prestasi dan kebolehbacaan terbaik.

<p>Untuk meringkaskan, membatalkan gaya CSS sama ada boleh dibatalkan dengan mengatasi nilai sifat kelas gaya atau dengan menetapkan semula semua gaya CSS kepada nilai lalainya. Dengan menambahkan elemen yang perlu dinyahgayakan ke dalam kelas CSS yang berasingan, kami boleh menambah atau mengalih keluar kelas dengan mudah apabila diperlukan. Akhir sekali, kita harus berhati-hati tentang cara kita memilih untuk membatalkan gaya CSS dan mengamalkan beberapa amalan terbaik untuk memastikan prestasi dan kebolehbacaan kod kita.

Atas ialah kandungan terperinci Bagaimana untuk membatalkan gaya css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!