css怎么去掉默认样式-前端问答-PHP中文网

css怎么去掉默认样式

PHPz

发布： 2023-04-21 11:20:00

原创

2580人浏览过

css去掉默认样式

在网站设计与开发过程中，重置或去掉浏览器自带的默认样式是一个基础但又必要的步骤。一些浏览器默认样式比如边距、补白、字体、颜色等，可能会与我们的样式冲突，因此我们需要自定义样式。

下面是一些方法来去掉浏览器自带的默认样式。

CSS Reset

CSS Reset是一个CSS文件，它的作用是重置默认样式，让所有的浏览器都使用相同的样式。他们通常包括重置边距、补白、字体、颜色等样式。

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

登录后复制

如上重置，就可以清除所有默认的样式了。

Robovision AI

一个强大的视觉AI管理平台

查看详情

Normalize.css

Normalize.css 是一个相对于 CSS Reset 更为友好的样式库，它不是清除默认样式，而是规范化不同浏览器的默认样式，让所有浏览器都会表现出相同的效果。同时，有些元素是必需增加默认修饰的，Normalize也会帮你完成。

下面是引用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>

登录后复制

自定义

自定义默认样式，针对我们自身业务的需求，仅仅覆盖浏览器默认样式即可。例如我们针对默认链接的颜色：

a {
    color: black;
    text-decoration: none;
}

a:hover {
    color: red;
    text-decoration: underline;
}

登录后复制

这样，我们就可以自定义默认链接样式。

以上就是自定义样式去掉默认样式的三种方法，建议使用Normalize.css，因为它会处理大多数你会遇到的浏览器默认问题，同时它也不会暴力清除所有默认样式。使用正确的方法去掉默认样式将会让你的网站具有更好的浏览体验。

以上就是css怎么去掉默认样式的详细内容，更多请关注php中文网其它相关文章！