CSS 样式重置

Nian糕

修改于 2024-03-23 11:27:26

4.1K0

修改于 2024-03-23 11:27:26

标签具有默认样式，由浏览器所决定的，为了达到在各个主流内核的浏览器页面样式显示一致，会重置具有默认样式的标签，得到样式表，就是 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; 去掉

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

字体图标

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

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

想要引用 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>

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2017.02.09 ，如有侵权请联系 cloudcommunity@tencent.com 删除

css

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

css

登录后参与评论

0 条评论

热度