Bagaimana untuk mengosongkan gaya lalai dalam css

CSS ialah teknologi pembangunan bahagian hadapan yang boleh menjadikan halaman web lebih cantik dan lebih mudah untuk dikendalikan. Walau bagaimanapun, untuk menjadikan halaman web kelihatan lebih cantik, kita mungkin menggunakan banyak gaya CSS, yang akan menyebabkan halaman web kehilangan gaya asalnya, atau malah tidak konsisten dengan kesan yang kita inginkan. Artikel ini akan memperkenalkan beberapa teknik untuk mengosongkan gaya CSS lalai untuk memahami prinsip asas CSS dengan lebih baik.

1. Tetapan Semula CSS

Tetapan Semula CSS ialah teknik untuk mengosongkan gaya lalai. Ia boleh memadamkan semua gaya lalai dalam penyemak imbas, dengan itu mengosongkan semua penampilan dan kesan lalai dalam halaman web. Tetapan Semula CSS boleh dilaksanakan secara manual atau dengan menggunakan beberapa alat siap sedia. Berikut ialah contoh Tetapan Semula CSS tulisan tangan:

*{

margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-weight: normal;
font-style: normal;
line-height: 1;
vertical-align: baseline;
list-style: none;

}

Kod ini akan menukar jidar, padding, jidar, saiz fon semua elemen , berat fon, gaya fon, ketinggian garisan, penjajaran menegak dan gaya senarai semuanya ditetapkan semula kepada nilai lalai. Dengan cara ini kami memastikan bahawa setiap elemen hanya berfungsi di atas CSS asas dan tidak dipengaruhi oleh CSS asal dan penggayaan lalai penyemak imbas.

2. Normalize.css

Walaupun Tetapan Semula CSS boleh mengosongkan gaya lalai sepenuhnya, kadangkala kami mahu mengekalkan beberapa gaya lalai dan hanya mahu mengawalnya dengan lebih baik. Pada masa ini, anda perlu menggunakan Normalize.css. Normalize.css ialah fail CSS yang digunakan untuk menyeragamkan gaya, yang boleh mengekalkan gaya lalai penyemak imbas itu sendiri sambil menyatukan perbezaan gaya antara penyemak imbas. Berikut ialah kod contoh:

/! normalize.css v8.0.1 |. github.com/necolas/normalize.css /

/* Dokumen.
================================================ =========================== */

/**

• 1. Betulkan ketinggian garisan dalam semua penyemak imbas.
• 2. Halang pelarasan saiz fon selepas perubahan orientasi dalam iOS.
     */

html {
ketinggian baris: 1.15; / 1 /
-laraskan-teks-webkit: 100%; >/ -ms-text-size-adjust: 100%; / 2
/ -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased;
saiz kotak: kotak sempadan;
}

/* Bahagian

==================== ================================================================== == = */

/**

Alih keluar jidar dalam semua penyemak imbas.

*/
• 
  
badan {

jidar: 0;

pelapik: 0;
}
. ..

Kod di atas hanyalah sebahagian kecil daripada Normalize.css, yang menetapkan semula bahagian HTML biasa penyemak imbas seperti yang diperlukan. Menggunakan Normalize.css, kami boleh memastikan bahawa penyemak imbas yang berbeza boleh memaparkan halaman web secara normal tanpa sebarang gangguan daripada gaya lalai.

3. Gunakan pemilih

Selain menggunakan CSS Reset dan Normalize.css, kami juga boleh menggunakan pemilih untuk mengosongkan gaya lalai. Dengan menambahkan gaya pemilih, kami boleh menghapuskan gaya lalai dalam penyemak imbas dengan mudah. Berikut ialah kod sampel:

html,body,h1,h2,h3,h4,p,ol,ul,li,blockquote {

}

margin:0;
padding:0;

di Di sini, kami telah menggunakan senarai elemen yang dipisahkan koma untuk menetapkan semula beberapa gaya elemen HTML yang paling biasa digunakan kepada 0. Dengan cara ini, kami boleh menambah elemen yang perlu ditetapkan semula pada bila-bila masa dan mengosongkan gaya lalai penyemak imbas.

4. Gunakan pustaka CSS

Untuk mengelakkan penulisan Semula CSS atau Normalize.css secara manual, kami boleh menggunakan perpustakaan CSS pratulis. Berikut ialah senarai beberapa perpustakaan CSS biasa:

Bootstrap;

1. Bulma;
2. Yayasan;
3. UI Semantik.
4. Perpustakaan ini menyediakan satu set gaya CSS lanjutan, yang sangat mudah dan praktikal semasa mereka bentuk tapak web. Dengan bantuan perpustakaan ini, kami boleh menggunakan banyak gaya pratetap, mengosongkan gaya lalai dan menggunakan gaya dan reka letak asas yang stabil, dengan itu mempercepatkan pembangunan tapak web.

Apabila menggunakan perpustakaan ini, kita harus memberi perhatian kepada pratonton katalog dan dokumentasi mereka untuk memahami cara ia dikodkan dan maksud di sebalik setiap gaya untuk menggunakannya dengan berkesan.

Ringkasan

Teknologi gaya lalai jelas CSS ialah operasi asas dalam pembangunan bahagian hadapan. Dengan bantuan CSS Reset, Normalize.css dan gaya pemilih, kami boleh mengosongkan gaya lalai penyemak imbas, membolehkan kami mereka bentuk halaman web yang lebih cantik dan elegan dengan mudah. Sudah tentu, dalam proses pembangunan sebenar, memilih untuk menggunakan perpustakaan CSS juga merupakan pilihan yang baik, yang boleh memberikan kami gaya asas yang cekap, stabil dan serasi.

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