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 条评论
登录 后参与评论

相关文章

  • ECMAScript6 解构赋值

    在 ES6 中,关于解构的含义为:允许按照一定模式,从数组和对象中提取值,对变量进行赋值,而数组、对象和字符串,都能通过这种方式进行赋值

    Nian糕
  • Type Script 的基本概念及常用语法

    TypeScript 是一种由微软开发的自由和开源的编程语言,它作为 JavaScript 的一个超集,扩展了JavaScript 的语法,而且本质上向这个语言...

    Nian糕
  • CSS 消除 inline-block 元素间的间隙

    从上图的运行结果可以看到,添加 display: inline-block; 属性后,水平呈现的元素间产生了空隙,出现这一现象的本质是,HTML 中存在的空白符...

    Nian糕
  • 设计师也能轻松掌握的前端小知识

    阅读须知: 工具不重要,工具不重要,工具不重要……OK?有人说DW早就淘汰了,我造啊,然后呢?我还打算用小红本(editPlus)讲呢,哈哈哈哈…… 希望乃们接...

    前朝楚水
  • 【数据科学】数据科学的教育体系

    在数据科学领域里工作的人才需要具备两方面的素质:一是概念性的,主要是对模型的理解和运用;二是实践性的,主要是处理实际数据的能力。培养这样的人才,需要数学、统计和...

    陆勤_数据人网
  • 如何采用DevOps模式

    向 DevOps 的过渡需要文化理念和心态上的转变。简单来说,DevOps 的宗旨就是消除两个传统上孤立的团队(开发团队和运营团队)之间的壁垒。有些组织甚至没有...

    Peter Shen
  • 了解HDFS的数据存取机制

    HDFS是大数据存取的基础,很多数据都依赖于HDFS,如HBase数据库。作为Hadoop的基础,HDFS的数据读取机制有很多细节。我们今天来看一下。

    希望的田野
  • 「不容错过」Chrome DevTools 七大新功能

    看到这个功能的时候, 你可能会好奇, Chrome Devtool 不是早就可以编辑css了吗?

    用户6900878
  • 数据库的AI到底是真的吗?

    腾讯云数据库国产数据库专题线上技术沙龙已圆满结束,本期带来邢家树分享的《CDB Tune:腾讯云数据库的AI技术实践》直播视频和文字回顾。 关注“腾讯云数据库...

    腾讯云数据库 TencentDB
  • 总结 | 叶志豪:介绍强化学习及其在 NLP 上的应用

    AI 科技评论按:当 AlphaGO 横扫之后,越来越多的学者意识到强化学习在人工智能领域所扮演的重要角色。同时随着深度学习的发展,应用深度学习,很多自然语言的...

    AI科技评论

扫码关注云+社区

领取腾讯云代金券