您的位置：首页 > Web前端 > CSS

4.转换标签类型&重置样式&前端规范

2018-02-01 10:35 543 查看
标签默认样式重置（css  reset）

body

1. 用chrome浏览器（按F12）审查元素，可以很直观的看到元素样式。

a) 可以用它测试各个元素的默认样式。

b) 例：

i. 代码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

<title>默认样式重置</title>

    <style>

body{border:1px solid red;}

</style>

</head>

<body>

<p>P标签</p>

</body>

</html>

 

ii. 审查

 


2. body默认一周有8px的外边距（margin）

3. 重置

a) 在开发中，是不是每一次都需要body有8px的外边距呢，很显然不是，所以我们需要重置body的外边距，添加如下样式：

i. body{margin:0;}

p

1. p标签默认上下有16px的外边距（margin）

2. 重置

a) 每次在使用p标签时都需要它上下有16px的外边距吗，很显然不是，即便是真有的话，咱们也不会加上下，因为可能出现上下外边距叠压的问题（如果p标签下面仅接着又有一个p标签，就会产生上一个p标签的下外边距与下一个p标签的上外边距叠压，这样不好），所以开发中我们也需要将p标签的默认外边距清掉，如下：

i. p{ margin:0;}

ii. 利用群组将body和p标签的外边距一起清掉：“body , p {margin:0;}” 。

hn

1. 所有的标题标签都有默认大小不一的上下外边距。

2. 重置

a) 道理上面说过两遍了，这里就不废话了，直接清掉，如下：

i. h1,h2,h3,h4,h5,h6{margin:0;}

ii. 群组清理：“ body,p,h1,h2,h3,h4,h5,h6{margin:0;} ” 。

ol/ul

1. 重置 列表样式

a) 有序/无序列表自带的列表样式（如：有序的1、2、3标号）其实开发中不会使用。

i. 所以需要清掉有序/无序列表的默认列表样式，语法如下：

1. ol,ul { list-style:none; }

2. 重置 外边距

a) ol/ul标签默认上下有16px的外边距（margin）,清除如下：

i. ol , ul {margin:0;}

3. 重置 内边距

a) ol/ul标签默认左边有40px的内边距（padding）,清除如下：

i. ol , ul {padding:0;}

4. 总结：

a) ou/ul清除所有自带样式如下：

i. ol,ul{list-style:none;padding:0;margin:0;}

dl/dd

1. 定义列表格式，如下：

a) 代码

        <dl>

         <dt>定义列表标题</dt>

            <dd>定义列表项</dd>

            <dd>定义列表项</dd>

            <dd>定义列表项</dd>

        </dl>

2. 定义列表中涉及到三个元素“dl”、“dt”、“dd”

a) 其中“dl”标签默认有上下16px的外边距。

b) 其中“dt”什么都没有，不用清除。

c) 其中“dd”标签默认有左边40px的外边距。

3. 重置

a) 那我们现在知道了“dl”与“dd”都只是有外边距，那么清除如下：

i. dl , dd {margin:0;}

ii. 群组进化得到：“body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0;}”

字体大小

1. 问题：通过上面一个过程下来，我们发现虽然外边距内边距等样式得到了解决，但发现在不同浏览器下这些标签的字体大小又不太相同。

2. 重置

a) 设置统一的字体大小，代码进化成如下：

i. body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0;font-size:12px;}

字体

1. 工作中通常也会重置字体，常用的有“微软雅黑”、“arial”等。

2. 重置

a) 为页面设置统一的字体，代码进化成如下：

i. body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0;font-size:12px;font-family:

微软雅黑,arial;}

a

1. a标签默认有文本修饰

a) text-decoration: underline

2. 重置

a) 添加一句样式，如下：

i. a{text-decoration:none;}

img

1. img与a标签结合会出现问题：

a) <img src="icon.jpg"> 图片不会出现边框

b) <a href="#"><img src="icon.jpg"></a> 在IE低版本中图片会出现边框。

2. 重置

a) 添加如下一句样式：

i. img{border:none;}

总结

1. 通过上面的演变过程得到如下一个重置样式通用代码：

a) css reset代码 （注意:这里还并不完整，以后学习时还会填充）

body,p,h1,h2,h3,h4,h5,h6,ol,ul,dl,dd{margin:0;font-size:12px;font-family:微软雅黑,arial;}

ol,ul{list-style:none;padding:0;}

a{text-decoration:none;}

img{border:none;}

 

2. 关于“ *{margin:0;padding:0;}”

a) 有人喜欢这样做，看起来很短，性能貌似很高，但实际上性能很差，因为通配符“*”会选中页面中所有元素，但其实像“div”这样的，根本就没有内外边距不需要清理，所以这样做远不如我们上面一个个的列出来性能高。

块和内联（内嵌）

标签的基本特性

1. 我们根据标签的基本特性将标签分为两大类：块和内联。

2. 标签的基本特性如下：

a) 内联：默认同行可以继续跟同类型标签 ;

i. 内联 又叫内嵌
或 行内属性标签。

b) 块：默认独占一行显示
。

3. 例

a) 常见内联标签有：

i. a标签

ii. img标签（严格上它是inline-block类型）

iii. span标签

iv. strong标签

v. em标签

vi. 等等

b) 常见块标签有：

i. div标签

ii. p标签

iii. hn标签

iv. ol/ul/dl/li/dt/dd标签

v. 等等

块与内联的特性

1. 详解1

a) 代码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

<title>块和内嵌的特性</title>

    <style>

span,div{background:blue;}

</style>

</head>

<body>

<span>区分样式</span>

        <span>区分样式</span>

        <span>区分样式</span>

        <div>块</div>

        <div>块</div>

        <div>块</div>

</body>

</html>

b) 效果

 


c) 小结

块
内联
默认独占一行

同排可以继续跟同类的标签

没有宽度时，默认撑满一排

内容撑开宽度

待续…

待续…

 

2. 详解2

a) 代码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

<title>块和内嵌的特性</title>

    <style>

span,div{background:blue;width:100px;height:100px;}

</style>

</head>

<body>

<span>区分样式</span>

        <span>区分样式</span>

        <span>区分样式</span>

        <div>块</div>

        <div>块</div>

        <div>块</div>

</body>

</html>

b) 效果

 


c) 小结

块
内联
默认独占一行

同排可以继续跟同类的标签

没有宽度时，默认撑满一排

内容撑开宽度

待续…

内嵌不支持宽高

 

待续…

 

3. 详解3

a) 代码

<!DOCTYPE html>

<html>

<head>

&
fa24
lt;meta charset="utf-8"/>

<title>块和内嵌的特性</title>

    <style>

span,div{background:blue;width:100px;height:100px;}

span{margin:100px;}

</style>

</head>

<body>

<span>区分样式</span>

        <span>区分样式</span>

        <span>区分样式</span>

        <div>块</div>

        <div>块</div>

        <div>块</div>

</body>

</html>

 

b) 效果

 


c) 小结

块
内联
默认独占一行

同排可以继续跟同类的标签

没有宽度时，默认撑满一排

内容撑开宽度

待续…

内嵌不支持宽高

 

内嵌不支持上下外边距（margin）

 

待续…

4. 详解4

a) 代码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

<title>块和内嵌的特性</title>

    <style>

span,div{background:blue;width:100px;height:100px;}

span{padding:100px;}

</style>

</head>

<body>

<span>区分样式</span>

        <span>区分样式</span>

        <span>区分样式</span>

        <div>块</div>

        <div>块</div>

        <div>块</div>

</body>

</html>

 

b) 效果

 


c) 小结

i. 首先左右内边距是支持的，看似好像也支持上下内边距似的，其实并不支持，因为它并没有起到实际性的作用（没有向下挤出100像素的空间）。

ii. 接下来我们将span的蓝色背景去掉（将代码中“span{padding:100px;}”改成“span{padding:100px;background:none;}”），再刷新页面效果就很直观了，效果如下：



 

iii. 结论

块
内联
默认独占一行

同排可以继续跟同类的标签

没有宽度时，默认撑满一排

内容撑开宽度

待续…

内嵌不支持宽高

 

内嵌不支持上下外边距（margin）

 

内嵌不支持上下内边距（padding）

 

待续…

 

5. 详解5

a) 代码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

<title>块和内嵌的特性</title>

    <style>

span,div{background:blue;width:100px;height:100px;}

</style>

</head>

<body>

<span>区分样式</span><span>区分样式</span> <span>区分样式</span>

        <span>区分样式</span>

        

        <div>块</div><div>块</div> <div>块</div>

        <div>块</div>

</body>

</html>

 

b) 效果

 


 

c) 小结

块
内联
默认独占一行

同排可以继续跟同类的标签

没有宽度时，默认撑满一排

内容撑开宽度

支持所有css样式 （这里就不做演示了）

内嵌不支持宽高

 

内嵌不支持上下外边距（margin）

 

内嵌不支持上下内边距（padding）

 

代码换行、空格被解析

 

6. 总结

块
内联
默认独占一行

同排可以继续跟同类的标签

没有宽度时，默认撑满一排

内容撑开宽度

支持所有css样式

内嵌不支持宽高

 

内嵌不支持上下内/外边距

 

代码换行、空格被解析

转换（块与内嵌）

1. 可以通过“display”属性使块转变为内嵌的特性，内嵌转变为块的特性。

2. 例：

a) 代码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

<title>块和内嵌的特性</title>

    <style>

span,div{background:blue;width:100px;height:100px;}

span{display:block;} /*显示为块*/

div{display:inline;} /*显示为内嵌*/

</style>

</head>

<body>

<span>区分样式</span><span>区分样式</span> <span>区分样式</span>

        <span>区分样式</span>

        

        <div>块</div><div>块</div> <div>块</div>

        <div>块</div>

</body>

</html>

b) 效果

 


inline-block

理解inline-block

1. “inline-block”能在一行显示并且支持宽高（如：img标签）。

2. “inline-block”可以理解为“一行内的块”，它同时具有块和内嵌中的某些特性，例如：

a) 同排可以继续跟同类的标签。

i. 使块支持同排显示

b) 支持宽高。

i. 使内联支持宽高

3. 虽然我们根据标签的特性将标签分为两大类（块和内嵌），但其实在此之外还有一些其他的特性，比如“inline-block”就是典型的。

inline-block的问题

[b]空格、换行被解析[/b]
1. 例：

a) 代码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

<title>块和内嵌的特性</title>

    <style>

span,div{background:blue;width:100px;height:100px;display:inline-block;}

</style>

</head>

<body>

<span>区分样式</span><span>区分样式</span> <span>区分样式</span>

        <span>区分样式</span>

        

        <div>块</div><div>块</div> <div>块</div>

        <div>块</div>

</body>

</html>

b) 效果

 


c) 小结

i. 既然空格、换行被解析成半个文字大小的空隙，那么如果将页面中文字大小设置为0，那是不是就解决了空格、换行被解析的问题呢？

1. 添加一句样式“body{font-size:0;}”，将页面中的文字大小设置为0，再刷新页面得到如下效果：

 


[b]IE6、IE7兼容问题[/b]
1. IE6、IE7不支持块属性的inline-block

2. 例：

a) 代码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

<title>块和内嵌的特性</title>

    <style>

span,div{background:blue;width:100px;height:100px;display:inline-block;}

</style>

</head>

<body>

<span>区分样式</span><span>区分样式</span> <span>区分样式</span>

        <span>区分样式</span>

        

        <div>块</div><div>块</div> <div>块</div>

        <div>块</div>

</body>

</html>

b) 效果

 

总结

1. 特性与问题总结

特性
存在的问题
块在一行显示

代码的空格、换行被解析

内嵌支持宽高

IE6、IE7不支持块属性标签的inline-block

没有宽度时，内容撑开宽度

 

指针样式（cursor）

1. “cursor”属性规定要显示的光标的类型。

2. 常用属性值

a) pointer （手型）

b) text （文本）

c) move （移动）

d) 自定义

i. cursor:url(hand.cur),pointer ;

1. 尽量使用cur图片，其他如png等兼容性不太好。

2. 当hand.cur不支持时，就会使用后面的pointer。

练习

做一个翻页栏

1. 代码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

<title>练习</title>

    <style>

/****默认样式重置start****/

body,p,h1,h2,h3,h4,h5,h6,ol,ul,dl,dd{margin:0;font-size:12px;

font-family:微软雅黑,arial;}

ol,ul{list-style:none;padding:0;}

a{text-decoration:none;}

img{border:none;}

/******默认样式重置end****/

/***PLF样式开始***/

.pages{height:50px;width:500px;background:#fbf4ea;margin:90px auto;

text-align:center;}

.pages a{height:28px;line-height:28px;background:#fff;

border:1px solid #e4dad8;color:#3f4346;padding:0 8px 0 9px;

display:inline-block;} /*a标签是内嵌标签不支持高，所以使用了inline-block*/

.pages a:hover{border-color:red;color:red;} /* 鼠标划过边框和文字变红色*/

.pages .active{text-weight:bold;background:#ffcfcb;} /*当前页效果*/

 /*设置当前页没有鼠标划过样式（这样做是为了避免给人能点击的错觉），

 再声明一下，看起来没有不代表真的没有，只是我给了一个跟默认样式相同的样式而已。

 "cursor:text"光标放上去显示文本线（默认小手，也是为了避免给人能点击的错觉）

 ".pages .active:hover"是两个类选择符，

 而".pages a:hover"是一个类选择符加一个元素选择符，所以前者优先级高，

 所以当前页的".pages .active:hover"样式会覆盖上面的".pages a:hover"样式。

 */

.pages .active:hover{border-color:#e4dad8;color:#3f4346;cursor:text;}

/***PLF样式结束***/

</style>

</head>

<body>

     <div class="pages">

            <a href="#">上一页</a>

            <a href="#">1</a>

            <a href="#">2</a>

            <a href="#" class="active">3</a>

            <a href="#">4</a>

            <a href="#">5</a>

            <a href="#">10</a>

            <a href="#">255...</a>

            <a href="#">下一页</a>

        </div>

</body>

</html>

 

2. 运行效果

 


雅虎经典面试题

1. 题目：有这么一段HTML，请挑毛病：

<P>  哥写的不是HTML,是寂寞。<br><br>  我说：<br>不要迷恋哥,哥只是一个传说

2. 解答：

a) 标准答案

<p>哥写的不是HTML,是寂寞。</p>

<p>我说：<br/>不要迷恋哥,哥只是一个传说</p>

b) 最佳答案

<p>哥写的不是<abbr title="Hypertext Markup Language">HTML</abbr>,是寂寞。</p>

<p><cite>我</cite>说：<br/><q>不要迷恋哥,哥只是一个传说</q></p>

 

前端规范

1. 所有书写均在英文半角状态下的小写

2. id、class属性值必须以字母开头

3. 所有标签必须闭合

4. html标签用tab/空格键缩进，代码要有层次结构

5. 属性值必须带引号

6. <!--  html注解 -->（注解标签与注解内容留有空格）

7. /*  css样式  */（注解标签与注解内容留有空格）

8. ul,li/ol,li/dl,dt,dd拥有父子级关系

9. p、dt、h标签 里面不能嵌套块属性标签（如：“<p><div>块</div></p>”
是不行的）

10. a标签不能嵌套a标签（如果嵌套了，点击时到底触发哪一个呢，那另一个又怎么办）

11. 内联元素不能嵌套块元素

 
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航