css jelas gaya warisan

Dengan pembangunan CSS, reka bentuk web telah menjadi lebih pelbagai dan pewarisan gaya telah menjadi ciri penting. Walau bagaimanapun, dalam beberapa kes, kadangkala kami ingin mengosongkan gaya yang diwarisi untuk mempunyai kawalan yang lebih fleksibel ke atas penampilan dan reka letak halaman. Artikel ini akan memperkenalkan anda kepada beberapa kaedah mengosongkan gaya yang diwarisi.

1. Gunakan set semula helaian gaya

Fungsi menetapkan semula helaian gaya adalah untuk mengosongkan gaya semua elemen sambil mengekalkan gaya lalai penyemak imbas. Menetapkan semula helaian gaya akan menetapkan semula gaya semua elemen secara paksa dan mentakrifkan semula gaya dengan rangka kerja CSS asas untuk mencapai tujuan membina semula helaian gaya tersuai.

Berikut ialah kod untuk menetapkan semula helaian gaya:

/* Reset Styles */
html, body, div, span, applet, object, iframe, /* base elements */
h1, h2, h3, h4, h5, h6, p, blockquote, pre, /* headers */
a, abbr, acronym, address, big, cite, code, /* text markup */
del, dfn, em, img, ins, kbd, q, s, samp, /* text formatting */
small, strike, strong, sub, sup, tt, var, /* text formatting */
b, u, i, center, /* misc inline */
dl, dt, dd, ol, ul, li, /* lists */
fieldset, form, label, legend, /* forms */
table, caption, tbody, tfoot, thead, tr, th, td { /* tables */
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  margin: 0;
  padding: 0;
}

Apabila kami menggunakan helaian gaya tetapan semula, gaya semua elemen akan dikosongkan, tetapi perlu diperhatikan bahawa apabila menggunakan set semula gaya Selepas jadual, kita perlu mentakrifkan semula semua gaya dan susun atur untuk memastikan ketepatan halaman web.

2. Gunakan pemilih teg

Dalam CSS, pemilih teg ialah pemilih paling asas dan boleh digunakan dengan mudah pada semua elemen dokumen. Dengan menggunakan pemilih teg, kami boleh mengosongkan gaya yang diwarisi dan mentakrifkan semula gaya yang kami perlukan.

Berikut ialah kod untuk mengosongkan gaya yang diwarisi menggunakan pemilih teg:

p {
  margin: 0;
  padding: 0;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  color: #333;
}

Dalam contoh di atas, kita dapat melihat bahawa kita menggunakan pemilih teg p, mengosongkan gaya yang diwarisi dan semula - Tentukan gaya yang anda perlukan. Ini adalah kaedah yang sangat praktikal apabila kita perlu mengosongkan gaya yang diwarisi daripada satu elemen.

3. Gunakan kata kunci !important

!kata kunci penting ialah pengubah suai gaya CSS biasa yang boleh digunakan untuk memaksa penggunaan gaya dalam keadaan tertentu. Ia boleh mengatasi peraturan gaya lain dan menghalang perubahan.

Berikut ialah kod untuk mengosongkan gaya yang diwarisi menggunakan !important:

p {
  margin: 0!important;
  padding: 0!important;
  font-size: 16px!important;
  line-height: 1.5!important;
  font-weight: 400!important;
  color: #333!important;
}

Dalam contoh di atas, kita dapat melihat bahawa kita telah menggunakan kata kunci !important untuk mengatasi peraturan gaya lain dan dalam kes tertentu Paksa aplikasi gaya di bawah. Ini adalah kaedah yang sangat praktikal apabila kita perlu memaksa gaya untuk diterapkan.

4. Gunakan pemilih

Dalam CSS, pemilih merujuk kepada corak yang digunakan untuk memilih elemen HTML. Kami boleh menggunakan pemilih untuk mengosongkan gaya yang diwarisi dan mentakrifkan semula gaya yang kami perlukan.

Berikut ialah kod untuk menggunakan pemilih untuk mengosongkan gaya yang diwarisi:

div.header p {
  margin: 0;
  padding: 0;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  color: #333;
}

Dalam contoh di atas, kita dapat melihat bahawa kita menggunakan pemilih untuk memilih semua elemen p dalam elemen pengepala dan mengosongkan Gaya mereka yang diwarisi dan mentakrifkan semula gaya yang diingini. Ini adalah kaedah yang sangat praktikal apabila kita perlu mengosongkan gaya elemen yang diwarisi, terutamanya elemen bersarang.

Ringkasan:

Artikel ini memperkenalkan empat kaedah untuk mengosongkan gaya yang diwarisi. Gunakan helaian gaya tetapan semula, gunakan pemilih teg, gunakan kata kunci !penting dan gunakan pemilih. Dalam pembangunan sebenar, kami memilih kaedah yang sepadan mengikut keperluan kami sendiri untuk mengawal penampilan dan susun atur halaman dengan lebih fleksibel.

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