CSS 样式重置_ 字节宝

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

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

默认样式

标题 <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; 去掉

代码语言：javascript复制

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

代码语言：javascript复制

<!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>

字体图标

优点：可以跟字体一样，设置大小/颜色，放大不会失真、模糊

缺点：只能出现一种颜色，额外加载字体库

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

代码语言：javascript复制

<!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>

css

0 人点赞