css如何去掉默认样式
这篇文章主要介绍“css如何去掉默认样式”,在日常操作中,相信很多人在css如何去掉默认样式问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”css如何去掉默认样式”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
CSS去掉默认样式
在网站设计与开发过程中,重置或去掉浏览器自带的默认样式是一个基础但又必要的步骤。一些浏览器默认样式比如边距、补白、字体、颜色等,可能会与我们的样式冲突,因此我们需要自定义样式。
下面是一些方法来去掉浏览器自带的默认样式。
CSS Reset
CSS Reset是一个CSS文件,它的作用是重置默认样式,让所有的浏览器都使用相同的样式。他们通常包括重置边距、补白、字体、颜色等样式。
reset.css
html, body, div, span, applet, object, iframe,
h2, h3, h4, h5, h6, h7, 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;
}
如上重置,就可以清除所有默认的样式了。
Normalize.css
Normalize.css 是一个相对于 CSS Reset 更为友好的样式库,它不是清除默认样式,而是规范化不同浏览器的默认样式,让所有浏览器都会表现出相同的效果。同时,有些元素是必需增加默认修饰的,Normalize也会帮你完成。
下面是引用Normalize示例:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="https://www.19jp.com">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;
}
这样,我们就可以自定义默认链接样式。
相关内容
这些是最新的
热门排行
- THINKPHP5+GatewayWorker+Workerman 开发在线客服系统
- 在手机浏览器网页中点击链接跳转到微信界面的方法
- 尊云网站目录系统 ThinkPHP5网站分类目录程序 v2.2.221011
- CentOS 7安装shadowsock(一键安装脚本)
- AdminTemplate 基于LayUI 2.4.5实现的网站后台管理模板
- 用NW.js(node-webkit)开发多平台的桌面客户端
- PHP生成随机昵称/用户名
- THINKPHP5网站分类目录程序 尊云网站目录系统
- 织梦(DEDECMS)微信支付接口 微信插件
- 基于LayUI开发的 网站后台管理模板 BeginnerAdmin
- 响应式后台网站模板 - AMA.ADMIN
- layuiAdmin后台管理模板 Iframe版
- LayUI 1.0.9 升级 至 LayUI 2.1.4 方法
- 简洁清爽的会员中心模板
- jQuery幸运大转盘抽奖活动代码