Bagaimana untuk mengalih keluar gaya lalai dalam css-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk mengalih keluar gaya lalai dalam css

PHPz

Lepaskan： 2023-04-21 13:46:37

asal

1374 orang telah melayarinya

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;
}

Salin selepas log masuk

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>

Salin selepas log masuk

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;
}

Salin selepas log masuk

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!