首页 > Web开发 > 详细

妙味课堂——HTML+CSS(第三课)

时间:2016-04-03 10:28:42      阅读:282      评论:0      收藏:0      [点我收藏+]

   常见标签我已经在上一篇文章中提及,我们做前端设计时,主要也是用这些标签(最常用的)。

   然而有一个问题,就是有的标签都有自己的默认样式。试通过如下代码来说明:

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

技术分享
技术分享
技术分享
<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(第三课)

原文:http://www.cnblogs.com/yerenyuan/p/5349204.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!