Petua pengoptimuman atribut gaya jelas CSS: tetapkan semula dan normalkan

Petua pengoptimuman atribut gaya jelas CSS: tetapkan semula dan normalkan

Apabila membangunkan halaman web, kami sering menghadapi gangguan daripada gaya lalai penyemak imbas, mengakibatkan kesan paparan halaman web yang tidak konsisten. Untuk menyelesaikan masalah ini, kita boleh menggunakan teknik pengoptimuman CSS untuk membersihkan atribut gaya. Artikel ini akan memperkenalkan dua kaedah yang biasa digunakan: menetapkan semula dan menormalkan, dan memberikan contoh kod khusus.

1. Tetapkan Semula

Tetapkan semula gaya merujuk kepada menetapkan semua gaya lalai penyemak imbas kepada keadaan awal yang sama. Dengan cara ini, apabila kami membangunkan halaman web, kami boleh mereka bentuk gaya dari asas yang agak bersih dan mengelakkan gangguan gaya lalai penyemak imbas.

Berikut ialah contoh gaya tetapan semula biasa:

html,
body,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
img,
strong,
em,
ol,
ul,
li,
form,
fieldset,
input,
textarea,
button,
blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  box-sizing: border-box;
}

/* Add your own reset styles here */

Dalam contoh di atas, kami telah memilih elemen HTML biasa, menetapkan jidar, padding dan atribut jidarnya kepada sifar, dan tetapkan atribut saiz fon kepada 100 % (simpan saiz fon lalai penyemak imbas), dan tetapkan sifat saiz kotak kepada kotak sempadan (pastikan pengiraan saiz elemen termasuk sempadan dan pelapik).

Sila ambil perhatian bahawa selepas bahagian tetapan semula mengulas, anda boleh menambah gaya tetapan semula anda sendiri untuk memenuhi keperluan projek khusus anda.

2. Normalize (penyeragaman)

Normalize ialah penyelesaian tetapan semula gaya yang lebih terperinci dan boleh disesuaikan. Ia membetulkan beberapa isu keserasian penyemak imbas biasa sambil mengekalkan gaya lalai yang berharga. Berbanding dengan tetapan semula lengkap, normalize boleh mengekalkan konsistensi dengan lebih baik sambil mengurangkan jumlah kod.

Berikut ialah contoh gaya normalize biasa:

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. 设置默认的样式（如 margin 和 padding）
 * 2. 使得元素在更一致的方式下工作
 * 3. 修复浏览器常见的不一致性问题（如 button 样式）
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

body {
  margin: 0; /* 1 */
}

/* ... more normalize styles ... */

Dalam contoh di atas, kami merujuk versi 8.0.1 normalize.css dan menggunakan ulasan untuk menerangkan perkara yang dilakukan oleh setiap gaya. Gaya ini mempunyai pelaksanaan kod terperinci secara dalaman, termasuk pemprosesan keserasian untuk penyemak imbas yang berbeza.

Berbanding dengan tetapan semula, normalize boleh mengekalkan konsistensi gaya lalai penyemak imbas dengan lebih baik sambil menyelesaikan beberapa isu keserasian biasa.

Gunakan tetapan semula atau normalkan?

Kedua-dua kaedah penetapan semula dan penyeragaman mempunyai kelebihan dan keburukan tertentu yang mana satu yang anda pilih untuk digunakan bergantung pada keperluan projek dan pilihan peribadi anda. Jika anda ingin memulakan penggayaan dari keadaan bersih, anda boleh memilih tetapan semula jika anda ingin mengekalkan konsistensi dan menyelesaikan masalah keserasian, anda boleh memilih normalkan.

Sudah tentu, anda juga boleh menyesuaikan gaya mengikut keperluan khusus projek, dan anda tidak perlu bergantung sepenuhnya pada tetapan semula atau penyelesaian standard ini.

Kesimpulan

Kemahiran pengoptimuman CSS untuk membersihkan atribut gaya boleh membantu kami mengelakkan gangguan gaya lalai penyemak imbas dalam pembangunan web dan meningkatkan kecekapan dan konsistensi pembangunan. Artikel ini memperkenalkan dua kaedah yang biasa digunakan: tetapkan semula dan normalkan serta menyediakan contoh kod khusus. Pilih kaedah yang sesuai dengan projek anda dan sesuaikan mengikut keperluan sebenar untuk memaksimumkan kesan paparan dan pengalaman pengguna halaman web.

Atas ialah kandungan terperinci Petua pengoptimuman atribut gaya jelas CSS: tetapkan semula dan normalkan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!