Rumah > Artikel > hujung hadapan web > Bagaimana untuk mengalih keluar gaya lalai dalam css
Bagaimana untuk mengalih keluar gaya lalai dalam css
- PHPzasal
- 2023-04-21 11:20:001321semak imbas
Alih keluar gaya lalai dengan CSS
Dalam proses reka bentuk dan pembangunan tapak web, menetapkan semula atau mengalih keluar gaya lalai yang disertakan dengan penyemak imbas ialah langkah asas tetapi perlu. Sesetengah gaya lalai penyemak imbas, seperti jidar, padding, fon, warna, dsb., mungkin bercanggah dengan gaya kami, jadi kami perlu menyesuaikan gaya.
Berikut ialah beberapa cara untuk mengalih keluar gaya lalai yang disertakan dengan penyemak imbas.
- Tetap Semula CSS
Tetap Semula CSS ialah fail CSS, fungsinya untuk menetapkan semula gaya lalai supaya semua pelayar menggunakan gaya yang sama. Ia biasanya termasuk menetapkan semula margin, padding, fon, warna, dsb.
reset.css
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
box-sizing: border-box;
font-family: inherit;
font-weight: inherit;
font-style: inherit;
line-height: inherit;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* inputs, textarea */
input[type="text"],input[type="password"], textarea {
margin: 0;
padding: 0;
border: none;
outline: none;
font-family: inherit;
font-size: 100%;
vertical-align: bottom;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
input[type="checkbox"], input[type="radio"] {
margin: 0;
padding: 0;
vertical-align: middle;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
border: 1px solid #999;
width: 13px;
height: 13px;
outline: none;
}
/* buttons */
button {
margin: 0;
padding: 0;
border: none;
outline: none;
background: transparent;
font-family: inherit;
font-size: 100%;
vertical-align: middle;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
}
/* images */
img {
border: none;
outline: none;
vertical-align: middle;
}
Tetapkan semula seperti di atas untuk mengosongkan semua gaya lalai.
- Normalize.css
Normalize.css ialah pustaka gaya yang lebih mesra daripada CSS Reset Ia tidak mengosongkan gaya lalai, tetapi menyeragamkan penyemak imbas yang berbeza gaya, supaya semua pelayar akan menunjukkan kesan yang sama. Pada masa yang sama, beberapa elemen perlu diubah suai secara lalai, dan Normalize akan membantu anda menyelesaikannya.
Berikut ialah contoh petikan Normalize:
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css"> </head> <body> <p class="text-muted">This is paragraph text.</p> </body> </html>
- Disesuaikan
Gaya lalai tersuai, berdasarkan keperluan perniagaan kami sendiri, hanya meliputi menyemak imbas Hanya gunakan gaya lalai peranti. Contohnya, untuk warna pautan lalai:
a {
color: black;
text-decoration: none;
}
a:hover {
color: red;
text-decoration: underline;
}
Dengan cara ini, kami boleh menyesuaikan gaya pautan lalai.
Di atas ialah tiga kaedah menyesuaikan gaya untuk mengalih keluar gaya lalai Adalah disyorkan untuk menggunakan Normalize.css, kerana ia akan menangani kebanyakan masalah lalai penyemak imbas yang anda akan hadapi, dan ia tidak akan mengosongkan semua lalai secara ganas. . Menggunakan kaedah yang betul untuk mengalih keluar gaya lalai akan menjadikan tapak web anda mempunyai pengalaman menyemak imbas yang lebih baik.
Atas ialah kandungan terperinci Bagaimana untuk mengalih keluar gaya lalai dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!