CSS 样式重置

Unsplash

标签具有默认样式,由浏览器所决定的,为了达到在各个主流内核的浏览器页面样式显示一致,会重置具有默认样式的标签,得到样式表,就是 reset.css / base.css

以下的默认样式是在 Chrome 取得的

1. 默认样式

标题 <h1>~<h6> 默认样式:加粗 font-weight:bold;,字号 2em/1.5em/1.17em/1em/0.83em/0.67em,外边距 margin-top/ margin-bottom

超链接 <a>,必定会有 href 属性 默认样式:颜色:color,下划线:text-decoration:underline;,光标:cuisor:auto/pointer;

强调 <strong> 默认样式:加粗:font-weight:bold;

强调 <em> 默认样式:加粗:font-weight:bold;,斜体:font-style:italic;

段落 <p> 默认样式:上下外边距,1em

无序列表 <ul>、有序列表 <ol> 默认样式:① 上下外边距 1em,通过设置 margin:0; 去掉;② 左边的内边距 40px,通过设置 padding:0; 去掉;③ 默认的圆点 / 数字,通过设置 list-style:none; 去掉

定义列表 <dl> 默认样式:上下外边距 1em 通过设置 margin:0; 去掉 <dd> 默认样式:左外边距 40px 通过设置 margin:0; 去掉

/*reset.css/base.css 重置浏览器默认样式*/

h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd {
  /* 群组选择器 */
  margin: 0;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  font-size: 1em;
}
ul, ol {
  padding: 0;
  list-style: none;
}
a {
  text-decoration: none;
  color: #000;
}
a:hover {
  text-decoration: underline;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>heading</title>
  <!-- <link rel="stylesheet" type="text/css" href="./css/reset.css"> -->
</head>
<body>
  <h1>title 1</h1>
  <h2>title 2</h2>
  <h3>title 3</h3>
  <h4>title 4</h4>
  <h5>title 5</h5>
  <h6>title 6</h6>
  <a href="###">超链接</a>
  <strong>strong</strong>
  <div>
    div div div div div
  </div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, dolor.
  </p>
  <ul>
    <li>list -01</li>
    <li>list -02</li>
    <li>list -03</li>
  </ul>
  <ol>
    <li> order-list 1</li>
    <li> order-list 2</li>
    <li> order-list 3</li>
  </ol>
  <dl>
    <dt>html5</dt>
    <dd>html5 css3</dd>
  </dl>
</body>
</html>

运行结果 标签默认样式

运行结果 标签默认样式被重置

2. 字体图标

优点:可以跟字体一样,设置大小/颜色,放大不会失真、模糊 缺点:只能出现一种颜色,额外加载字体库

想要引用 bootstrap 的字体图标,就必须将 dist 文件夹下的 fonts 文件夹拷贝到你的项目里,然后按照 Glyphicons 字体图标 对应的字体图标名称引用即可

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>bootstrap-fonts</title>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>
  <i class="glyphicon glyphicon-heart"></i>
  <i class="glyphicon glyphicon-star" style="font-size:100px; color:red;"></i>
</body>
</html>

运行结果

Iconfont-阿里巴巴矢量图标库 的使用方法: ① 选取所属图片,下载,解压 ② 复制文件 iconfont.cssiconfont.eoticonfont.svgiconfont.ttficonfont.woff 到项目的 css 文件夹下 ③ 引入项目下面生成的 fontclass 代码:<link rel="stylesheet" type="text/css" href="./css/iconfont.css"> ④ 挑选相应图标并获取类名,应用于页面:<i class="iconfont icon-xxx"></i>

End of File

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏柠檬先生

jquery mobile 移动web(3)

可折叠功能块。   div 元素的 data-role 属性设置为 collapsible   代码如下:     <div data-role="...

213100
来自专栏我分享我快乐

jquery中使用event.stopPropagation()阻止事件冒泡

案例如上图:点文档关闭菜单,点按钮打开菜单。因为按钮在文档内,所以会产生事件冒泡使得在点按钮打开菜单时无法正常执行。所以我们需要阻止事件冒泡。例子代码如下: ...

422130
来自专栏极客编程

jQueryMobile快速入门

  jQuery Mobile是jQuery 在手机上和平板设备上的版本。它不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动...

14020
来自专栏河湾欢儿的专栏

display:inline-block

1.块在一行显示 2.行内属性标签支持宽高 3.没有宽度的时候内容撑开宽度 4.标签之间的换行被解析(问题) 5.Ie6 7不支持inline-bloc...

9130
来自专栏谦谦君子修罗刀

react-navigation,刷新你的导航一、属性介绍二、案例

在2017年1月,新开源的react-navigation库备受瞩目。它有类似于原生版性能的体验效果,可能会成为未来RN导航组件中的主力军。该库包含三类组件: ...

2.1K90
来自专栏企鹅号快讯

自动化平台搭建之css样式详解(二)

往往在搭建自动化平台时,我们可能涉及到一些页面,搭建页面对于CSS样式比较头大,那么今天为大家总结一篇文章,希望对大家有帮助,以及页面涉及验证,简单使用vali...

21550
来自专栏知道一点点

bootstrap快速入门笔记(七)-表格,表单

2,条纹表格:通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。

26230
来自专栏问天丶天问

Javascript 获取div真实高度

24730
来自专栏韩东吉的Unity杂货铺

零基础入门 8: Canvas和EventSystem

UGUI是新版Unity自带的原生UI系统,组件也在不断的增加扩展,基本的贴图,文本,按钮等还是可以用的。接下来的几篇内容会以UGUI展开分享。

14730
来自专栏Java帮帮-微信公众号-技术文章全总结

开发者需要掌握的JS事件

JavaScript事件 ? 事件通常与函数配合使用,这样就可以通过发生的事件来驱动函数执行。事件是基于对象存在,事件通常可以修饰多种对象。 1.为对象添加事件...

45180

扫码关注云+社区

领取腾讯云代金券