妙味课堂——HTML+CSS(第三课)
Posted 叶十一少
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了妙味课堂——HTML+CSS(第三课)相关的知识，希望对你有一定的参考价值。
常见标签我已经在上一篇文章中提及，我们做前端设计时，主要也是用这些标签(最常用的)。
然而有一个问题，就是有的标签都有自己的默认样式。试通过如下代码来说明：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <a href="#">a标签（链接、下载、锚点）</a> <img src="1.png" alt="" /> <a href="#"><img src="1.png" alt="" /></a> <span>区分样式</span> <strong>强调(粗体)</strong> <em>强调(斜体)</em> <p>段落</p> <div>块</div> <h1>标题1</h1> <h6>标题6</h6> <ol> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ol> <ul> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ul> <dl> <dt>定义列表标题</dt> <dd>定义列表项</dd> <dd>定义列表项</dd> <dd>定义列表项</dd> </dl> </body> </html>
我们在chrome浏览器中运行时，可以通过开发者工具(快捷键Ctrl+Shift+I)来一个个审查元素，来看看它们的默认样式：
<body></body>
发现<body>标签的margin为8px。
KB_P[BXY9BKG8.png)
<p>段落</p>
发现<p>标签的上下外边距为16px。相反，<div>块</div>没有margin或padding。
<h1>标题1</h1>
发现<h1>标签的上下外边距为21.440px。
<h6>标题6</h6>
发现<h6>标签的上下外边距为27.960px。
<ol></ol>
发现<ol>标签的上下外边距为16px，左内边距为40px。
<ul></ul>
同上，发现<ul>标签的上下外边距也为16px，左内边距也为40px。
<dl></dl>
发现<dl>标签的上下外边距为16px。
<dd>定义列表项</dd>
发现<dd>标签的左外边距为40px。
至此所有有默认样式的标签，我们已分析完了。注意一点：上下外边距会叠压。
那么为了兼容性，凡是浏览默认的样式，都不要使用，所以重置默认样式，引出——默认样式重置(css reset)。css reset后的代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /*默认样式重置(css reset)*/ body,p,h1,h2,h3,h4,h5,h6,dl,dd{ margin: 0; font-size: 12px; /* 中文字体大小的最小值 */ /* font-family: xx; 也可以设置字体 */ } ol,ul { list-style: none; /* 去除列表样式 */ padding: 0; margin: 0; } a { text-decoration: none; } img { border: none; /* 在IE6中<a>标签包裹的<img>标签显示时有边框，故清除 */ } /* *代表所有页面中的标签，也可以如下重置默认样式，但一般不这样做， 依然一个一个标签重置 * { margin: 0; padding: 0; } */ </style> </head> <body> <a href="#">a标签（链接、下载、锚点）</a> <img src="1.png" alt="" /> <a href="#"><img src="1.png" alt="" /></a> <span>区分样式</span> <strong>强调(粗体)</strong> <em>强调(斜体)</em> <p>段落</p> <div>块</div> <h1>标题1</h1> <h6>标题6</h6> <ol> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ol> <ul> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ul> <dl> <dt>定义列表标题</dt> <dd>定义列表项</dd> <dd>定义列表项</dd> <dd>定义列表项</dd> </dl> </body> </html>
以上是关于妙味课堂——HTML+CSS(第三课)的主要内容，如果未能解决你的问题，请参考以下文章