样式表（css）经析一
样式表简介
样式表（或者称为层叠样式表，英文名Cascading Style Sheet，即CSS）是HTML的一部分，但作为对HTML元素（或者标识）展示效果的一种扩展，其功能极为强大，可以说，有了样式表，你可以完全放弃HTML元素的属性不用就能实现精美的网页排版于布局，因此本站将样式表和HTML分开来，作为专门的一块进行讲诉。对于有HTML基础的朋友来说，学习样式表是非常轻松自在的事。
样式表不算是什么新东西，它已经诞生了许多年了，但因为在实现方面的缺乏，它的强大性和重要性在很大程度上未被注意到。网页制作者渴望通过改善WEB的展示样式来为自己的网页加入创新的动力，于是开始使用NETSCAPE或者IE专有的扩展功能，而不是功能更加强大的样式表。这是很自然的，因为这些专有的扩展功能能被大多数的浏览者看见，而强大的样式表却很少人看见。
而今越来越多的浏览齐支持样式表，样式表允许改善整个展示样式的同时保留平台独立性的独有特性开阔了网页制作者的视野。样式表的优点变得更加明显，实现一个满意的效果更加容易。虽然不断的为展示效果不断地加入越来越多的HTML标记是一个缺点。
Netscape的BODY属性现在被广泛的使用，成了HTML3.2及HTML4.0的标准。可是其bgcolor，text等属性和其他属性的灵活程度完全比不上样式表。大部分的背景图象会任由网页不能让那些只有16色显示的人所接受。而对于一些网页256色仍很难接受。使用传统的BODY属性，一个网页制作者必须权衡使用背景图象带来的好处是否比付出的代价还重。使用样式表的话，网页制作者可以用一些不同的样式表提交一批不同的图象，以便用户可以根据自己的系统可以显示的颜色而选择是24位样式表还是8位样式表。如果网页制作者提供的样式表都不适合用户，用户只要忽略网页制作者的样式表就是了。
样式表可以令网页制作者的工作更加轻松，当每个水平线语句都需要使用<hr width="75%" size=5 align="center">的时候，网页制作者将觉得非常麻烦。使用样式表，只需要指定这样的参数一次，网页样式就可以被整个网站应用。而且如果网页制作者觉得width=50%更好需要更改的话，那么他只需要在一个地方改变这个参数，而不是找遍几百页来更改HTML。不仅仅如此，当一个文件包含了所有的样式信息时，样式表还可以减少下载的时间。
样式表也为他们提供的展示效果的项目给予更多的灵活性。属性，如颜色，背景，边界，边框和许多其他的属性都能被所有的元素应用（包括在通常情况下无法使用背景和边框属性的<p>,<a>,<b>,<h1>~<h6>等元素）。仅仅使用HTML和它专有的扩展，必须依赖象bgcolor之类的属性，而这些属性只对于少数的一些元素有效（比如对前面提到的<p>,<a>等元素就无效）。样式表给予应用一个样式到所有段落，或所有的二级标题，或所有的强调文字很大的灵活性。
在段落中，通常都会让首行文字前面会留些空白，这就叫缩进。使用样式表，网页制作者可以使用文本缩进属性来缩进文本，而不是非常麻烦的键入 来用空格进行缩进。如果网页制作者决定改变网站中所有段落的缩进，他只需要改变样式表中的一行就行了。
使用HTML的<font size=#>元素定义网页中的文字大小，不但只有size=1~7共七种效果供选择，浏览者还可以通过浏览器的一个菜单来进行调整，这常常会使原本排版精美的页面变得凌乱不堪，更不用说精确定位了。使用样式表，不但可以任意选择文字大小，而且还提供了常规的静态定位，相对定位甚至是绝对定位。
样式表在WEB方面迈开了一个巨大的前进步伐。随着HTML和样式表的内容和展示效果的差距，WEB不需要放弃优秀的思想??平台独立性。今天，样式表已经成为HTML4.0的一个事实标准。谁都愿意看到逻辑清晰，简洁而优美的HTML源代码。网页制作者最终可以改善文档的展示而不会使源代码太复杂以至于拥护根本不能阅读网页。
样式表实例讲解
有好几种方法将样式表应用到网页中，最简单的就是使用HTML的style组件并且放置在网页的头元素<head></head>中，比如下面的代码实现段落呈黑色背景，白色字体显示的代码：
<html>
<head>
<title>样式表范例</title>
<style type="text/css">
p{background-color:#000000;color:#ffffff}
</style>
</head>
<body>
<p>样式表不算是什么新东西，它已经诞生了许多年了，但因为在实现方面的缺乏，它的强大性和重要性在很大程度上未被注意到。网页制作者渴望通过改善WEB的展示样式来为自己的网页加入创新的动力，于是开始使用NETSCAPE或者IE专有的扩展功能，而不是功能更加强大的样式表。这是很自然的，因为这些专有的扩展功能能被大多数的浏览者看见，而强大的样式表却很少人看见。
</p>
</body>
</html>
显示效果如下：
样式表不算是什么新东西，它已经诞生了许多年了，但因为在实现方面的缺乏，它的强大性和重要性在很大程度上未被注意到。网页制作者渴望通过改善WEB的展示样式来为自己的网页加入创新的动力，于是开始使用NETSCAPE或者IE专有的扩展功能，而不是功能更加强大的样式表。这是很自然的，因为这些专有的扩展功能能被大多数的浏览者看见，而强大的样式表却很少人看见。
下面就让我们来分析一下样式表的构成。style标识是HTML原有的，在这里其type=text/css属性是必须的。夹在style标识之间的就是样式表定义的内容了。考虑到用户的浏览器版本过低不支持样式表的情况下会错误的将style中的内容显示在页面上，这是网页设计者所不愿见到的，因此还需要在style内加上HTML的注释标识<!-- -->，这样高版本的浏览器可以正确读取样式信息，同时不会在低版本的浏览器中显示出来。即写成：
<style type="text/css">
<!--
p{background-color:#000000;color:#ffffff}
-->
</style>
今后我们将只书写样式表中的内容，省略其他部分（包括style标识），请自己添加。
你可能已经注意到style标识中仅有p{background:#000000;color:#ffffff;}这么短短的一点代码，对，就是它在起作用。花括号前面的p称为选择符，表示对该文件中的<p>标识起作用，同样的道理，你可以将其换为body{……}，就可以控制<body>标识了。
花括号中的background-color当然是背景颜色了，color则是文字颜色，它们都可以称为样式表中的属性，至于#000000和#ffffff则是属性对应的值，他们代表什么就不用我多说了吧！属性和值之间用冒号':'分隔。多个属性之间用分号';'分隔。冒号和分号前后如果有空格不会对样式语法及效果表产生影响。如果是有多个选择符，没关系直接写下去就可以了，比如下面的样子：
body{width:600px}p{color:#000000}
当然为了美观建议在定义完body后，即在p之前换行，当然这样仅仅是为了美观，如下：
body{width:600px}
p{color:#000000}
你甚至可以将包括style标识在内的所有代码都写在一行以内，前提是你不怕样式表修改时不易阅读的话。
假如有如下的样式定义：
body{font-size:12px}
p{font-size:12px}
即定义两个或者多个元素具有相同的属性，我们是否可以将其合并一次定义呢？答案是肯定的。只要用逗号分隔两个选择符即可：
body,p{font-size:12px;}
如果一个页面中有很多个链接元素<a>，而现在只需要定义所有位于段落中的<a>元素（即形如：<p>……<a href=#>……</a>……</p>的链接元素）带删除线而不影响位于table中的a元素怎么办呢？写成下面这样就可以了：
p a{text-decoration:line-through}
即用空格表示元素的包含关系。那么假如一个属性具有的两个或者多个值可以并存怎么办呢？也用空格分隔属性值即可，比如定义链接具有上划线和下划线：
a{text-decoration:underline overline}
样式表定义的几种方法
上一讲中只能对同一类元素进行样式定义，假如我们只需要定义某一个元素，比如在一个HTML页面中有许多p元素，现在我只想定义其中一个p元素怎么办呢？这就是我们这一讲中将要阐明的。事实上样式表共有4中方法进行表示，上一讲只提到两种，剩下的两种都可以解决这个问题。让我们看看：
1，以HTML元素作为选择符方式：
这就是上一讲的主要内容，用法很简单，HTML元素后紧跟花括号进行定义即可。
2，关联选择符方式：
就是前面提到的只定义位于某一类元素中的HTML元素，比如只定义嵌套在表格table中的表格宽300个象素：
table table{width:300px}
其中px是象素单位，当然也可以用绝对单位如毫米mm，厘米cm，磅pt及百分比单位40%；
3，类选择符方式：
自定义一个类名进行定义，并在HTML元素中加上属性class=#，其中#表示自定义的类名。比如定义样式：
.warning{color:#ff0000;}
其中warning是自定义的类名，可以随意取名。注意在warning前面有个小圆点。然后在body中对需要应用该样式的地方加上属性class=类名，如：
<p class="warning">类选择符进行定义</p>
类选择符方式是样式表应用最多的方式，或者说正是有了class属性才要学习样式表。用这种方式即可解决本讲开篇提到的问题。
4，ID选择符方式：
给需要进行样式定义的HTML元素赋一个ID，比如<p id="source">……</p>，然后以如下的方式定义样式：
#source{color:#0000ff;}
其实ID选择符方式跟类选择符方式很相似，不同的是类选择符可以认为是先定义类样式，然后应用到HTML元素，因此一个类可以应用到多个不同的HTML元素，比如上面定义的类如果需要还可以应用到<b>元素等其他中。ID选择符则应该是HTML元素的身份标识，如同我们的身份证一样是唯一的，因此其样式也就是根据ID量身定做的。
上面的例子汇总成完整的文档如下：
<html>
<head>
<title>css教程</title>
<style type=text/css>
<!--
p{text-decoration:line-through;}
p a{text-decoration:none;}
.warning{font-size:15px;color:#ff0000;}
#abc{color:#0000ff;}
-->
</style>
</head>
<body>
<p><a href=html.htm>样式表</a>不算是什么新东西，它已经诞生了许多年了，但因为在实现方面的缺乏，它的强大性和重要性在很大程度上未被注意到。</p>
<h4 class="warning">类选择符定义样式</h4>
<h5 id=abc>ID选择符定义样式</h5>
</body>
</html>
显示效果如下：
样式表不算是什么新东西，它已经诞生了许多年了，但因为在实现方面的缺乏，它的强大性和重要性在很大程度上未被注意到。
类选择符定义样式
ID选择符定义样式
加入样式表的几种方法
前面讲解的样式表不管通过何种方式定义都是通过style元素嵌入到HTML文件的头文件HEAD中的，称为嵌入样式，实际应用中主要用这种方式。事实上还有外部样式和style属性内联样式两种方式加入样式表。
外部样式表就是将原本放置在<head><style><!-- --></style></head>中的内容存成一个扩展名为.css的样式表文件（假设为abc.css），在需要应用该样式表的HTML文档的HEAD元素中使用link元素链接：
<link href="abc.css" rel=stylesheet type="text/css">
注意样式文件中仅仅包含样式规则或者声明，而不能包含任何象<head><style>之类的HTML标记。一个单独由p{font-size:12px}组成的文件就可以用做样式表文件了。
一个外部样式文件可以为多个HTML页面所应用，因此当一个网站的一个多个页面共用一个外部样式文件时即可实现只更改一个样式文件即全面更改所有页面的风格。
一个外部样式还可以由多个样式文件共同给出，只要在每个应用样式表的link标识中使用相同的title属性即可：
<link rel=stylesheet href=basic.css title=content>
<link rel=stylesheet href=table.css title=content>
<link rel=stylesheet href=forms.css title=content>
内联样式则使用HTML元素的通用属性style="样式定义"来实现，比如要定义某个段落为15象素的红色文字，则：<p style="color:#ff0000;font-size:15px"></p>即可。
有html的基础，再加上这四讲，相信您对样式表已经有一定的了解了，所欠缺的只是实践经验了。从下一讲开始，将着重讲诉样式表的具体属性，真正精彩的开始啦！
组合继承注解及伪类
(1) 组合：
定义样式表时为了减少样式表的重复声明，可以使用组合的选择符进行定义。方法很简单：将两个或者多个选择符使用逗号进行分隔定义即可：
h1,h2,h3,h4,h5,h5{color:red}
(2) 继承：
所谓继承即一类元素因为另一类元素具有某种属性而使自己具有该种属性称为继承。实际上，所有在选择符中嵌套的选择符都会继承外层选择符指定的属性值。除非另外更改。例如，一个body定义了的颜色值也会应用到段落文本中。
但有些情况下内部的选择符不继承周围的选择符的值，但理论上这些都是特殊的。例如，上边界属性是不会继承的，直觉上，一个段落文本不会有同文档body一样的上边界值。
(3) 注解:
样式表里面也允许进行注解，注解使用和C语言编程一样的约定方法去指定。CSS注解的例子如下格式：
/*comments cannot be nested*/
伪类是特殊的类，能自动的被支持CSS的浏览器所识别。伪类区别开不同类的元素。例如，visited links（已访问链接）和active links（可激活链接）描述了两个定位锚（anchors）的类型。伪类的形式如下：
选择符:伪类{属性:值}
伪类不应用HTML的class属性来指定。一般的类可以与伪类一起使用。例如：
选择符.类:伪类{属性:值}
伪类通常只有一种：定义锚伪类
伪类可以指定A元素以不同的方式显示链接（links），已访问链接（visited links），可激活链接（active links）和鼠标悬停时的链接。定义锚元素可给出伪类link，visited，active,hover。一个已访问链接可以定义为不同颜色显示，生殖不同字体大小和风格。
一个有趣的效果是使当前（或可激活）链接以不同的颜色，更大的字体显示。然后，当网页的已访问链接被重选时，又以不同的颜色，更小的字体显示。这个样式表的示例如下：
a:link{color:red}
a:active{color:blue;font-size:125%}
a:visited{color:green;font-size:85%}
CSS的字体属性
包括字体科族属性font-family，字体风格font-style，字体变形font-variant，字体加粗font-weight，字体大小font-size以及用于不同属性汇总略写的字体属性font。其中字体大小和字体加粗是比较常用的。
1.字体科族font-family相当于HTML标记的<font face=#>用于设定文字的字体，当所设定的字体在用户端没有时会用浏览器默认的字体（通常为宋体）代替。
语法：font-family:[<科族名称>,<科族名称>]
初始值：由用户浏览器决定
实用于：所有对象
向下兼容：是
注：尖括号中包含的文字“科族名称”表示在实际使用时应换为具体的值（此处为字体），下同。
该样式允许指定多种字体供选择，用逗号进行分隔即可。在用户端，会根据字体指定的优先级（先后顺序）寻找字体予以显示。比如:
font-family:华文行楷,楷体_GB2312,宋体
定义了三种字体，当浏览者的计算机中有华文行楷则用华文行楷显示，没有则看是否有楷体，有则显示，没有则继续搜索是否有指定的下一种字体宋体，若还没有则用浏览器的默认字体显示。
2.字体风格font-style用normal（普通），italic（斜体），oblique（倾斜）三种方法中的一种来显示字体。
语法：font-style:[normal|italic|oblique]
初始值：normal
实用于：所有对象
向下兼容：是
用法够简单吧！比如想用斜体显示则font-style:italic即可。
3.字体变形font-variant决定了字体的显示是用normal（普通）还是用small-caps（小型大写字母）显示。显然这个属性是专门为英文设计的，中文当然没有大小写之分了。当使用small-caps属性时，不论大小写都会以小型大写字母显示，换句话说就是是否转换为大写字母。
语法：font-variant:[normal|small-caps]
初始值：normal
实用于：所有对象
向下兼容：是
范例：p{font-variant:small-caps}
4.字体加粗font-weight属性用于设定字体的粗细。跟HTML的<b>标记效果差不多，不同的是它包括9个不同级别的加粗（或者减细）。
语法：font-weight:[normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900]
初始值：normal
实用于：所有对象
向下兼容：是
其中属性值bolder和lighter是相对加粗和减细，即相对于上级元素或者初始值进行加粗。初始值normal相当于数字的400，bold则相当于700。
需要特别说明的是，不是所有的字体都有9个有效的加粗显示，一些加粗会在指定下组合。如果指定的加粗无效，会按以下原则选择：
● 500会被400代替，反之亦然。
● 100-300会被指定为下一较细的加粗，如果有的话。否则就是下一较粗的加粗。
● 600-900会被指定为下一较粗的加粗，如果有的话。否则就是下一较细的加粗。
实际使用中发现，当使用100-500时效果都相当于normal，当使用600-900时效果相当于使用了<b>标记。
5.字体大小font-size用语修改显示的字体的大小。可以使用的值包括绝对大小，相对大小，长度，百分比，其中使用长度时单位又分为绝对单位pt[（磅），mm（毫米），cm（厘米），pc（帕），in（英寸）]和相对单位[px（象素），em]。
语法：font-size:[<绝对大小>|<相对大小>|<长度>|<百分比>]
初始值：medium
实用于：所有对象
向下兼容：是
其中<绝对大小>允许值：xx-small|x-small|small|medium|large|x-large|xx-large
<相对大小>允许值：larger|smaller
<长度>允许值：所有大于零的正值
<百分比>允许值：同上
使用长度值时常用的单位是pt和px，实际上我们在使用HTML元素的属性width=#时用的就是px（象素）做单位，虽然没有书写出来。关于长度的单位以后会专门讲解。
6.字体属性font其实就是将前面的属性进行合并略写
语法：font:[<字体风格>||<字体变形>||<字体加粗>||<字体大小>||[/<行高>]||<字体科族>]
初始值：未定义。
实用于：所有对象
向下兼容：是
范例：p{font:italic bold 15px/20px} 宋体
字体属性就介绍完了，一时看不明白不要紧，慢慢使用就熟悉了。你可能会说，还有字体颜色之类的属性还没有介绍呀，怎么就完了呢？不要着急，这些属于颜色及文本属性，想了解吗？往后看吧。
颜色和背景属性
1.颜色属性允许网页制作者指定一个元素的颜色。实际上就是一个元素的文字颜色。
语法color:[<颜色>]
允许值：<颜色>
初始值：由浏览器决定
适用于：所有对象
向下兼容：是
颜色的描述规则就是HTML标记的颜色属性所使用的规则，包括如下几种（以定义红色为例）：
p{color:red}
p{color:#ff0000}
p{color:#f00}
p{color:rgb(255,0,0}}
2.背景颜色属性background-color用于设定一个元素的背景颜色。用法跟上面的颜色属性相同。
语法background-color:[<颜色>|transparent]
初始值：transparent（透明）
适用于：所有对象
向下兼容：否
范例：body{background-color:white}
为了避免与用户的样式表之间的冲突，无论任何背景颜色被使用的时候，背景图象都应该被指定。而在大多数情况下，设置无背景图象background-image:none都是合适的。
3.背景图象属性background-image用于设定一个元素的背景图象。它相当于HTML中的<body>标记的background属性，只是它可以给更多元素指定背景图象。
语法：background-image:[<图象url>|none]
初始值：none（无）
适用于：所有对象
向下兼容：否
其中指定图象时可以使用相对路径也可以使用绝对路径，格式为url(图象路径)。
范例：p{background-image:url(bg.jpg)}
4.背景重复属性background-repeat用于指定当背景图象尺寸小于相应元素尺寸时如何被重复。可以定义为平铺，仅横向平铺，仅纵向平铺，不平铺。
语法：background-repeat:[repeat|repeat-x|repeat-y|no-repeat]
初始值：repeat
适用于：所有对象
向下兼容：否
范例：p{background-repeat:no-repeat}
5.背景附件属性background-attachment用于指定背景图象是随内容滚动还是被看作油画固定不动。相当于<body>的bgproperties属性。
语法：background-attachment:[scroll|fixed]
初始值：scroll
适用于：所有对象
向下兼容：否
范例：body{background-attachment:fixed}
6.背景位置属性background-position用于指定背景图象的最初位置。这个属性只能应用于块级元素和替换元素（替换元素仅指一些已知原有尺寸的元素。HTML的替换元素包括img,input,textarea,select和object）
语法：background-position:[<百分比>|<长度>]{1,2}|[top|center|bottom]||[left|center|right]
初始值：0% 0%
适用于：块级元素和替换元素
向下兼容：否
范例：body{background-position:50% 50%}（注意中间需一空格）
7.背景属性background同样是前面几种属性的略写组合。用法自然不用多说了。
语法：background:[<背景颜色>||<背景图象>||<背景重复>||<背景附件>||<背景位置>]
初始值：未定义
适用于：所有对象
向下兼容：否
范例：body{background:#0099cc url(1.gif)}
CSS的文本属性
本部分内容包括：文字间隔（称为单词间隔也许更合适）属性word-spacing、字母间隔属性letter-spacing、文字修饰属性text-decoration、纵向排列属性vertical-align、文本转换属性text-transform、文本排列属性text-align、文本缩进属性text-indent以及行高属性line-height。常用的属性包括文字修饰，纵向排列，文本缩进和行高属性。
1.文字间隔属性word-spacing定义一个附加在文字（单词）之间的间隔数量。该值必须符合长度格式，允许使用负值。
语法：word-spacing:[normal|<长度>]
初始值：normal
适用于：所有元素
向下兼容：是
需要特别说明的是，该属性是针对英文单词的间隔，而不是中文的文字间隔，中文的文字间隔应该用下面讲到的letter-spacing。同时在中文版的IE浏览齐中也不支持该文字间隔属性（也许microsoft认为中国人不需要英语单词吧^_^）。
2.字母间隔属性letter-spacing定义一个附加在字符之间的间隔数量。该值必须符合长度格式，允许使用负值，一个设为0的值会阻止显示文字时的间隔调整。
语法：letter-spacing:[normal|<长度>]
初始值：normal
适用于：所有元素
向下兼容：是
范例：p{letter-spacing:3px;}
3.文字修饰属性text-decoration允许通过5个属性中的一个来修饰文本：underline（下划线）、overline（上划线）、line-through（删除线）、blink（闪烁）、或者缺省地使用无。该属性常用来设置链接样式。
语法：text-decoration:[none|[underline||overline||line-through||blink]]
初始值：none
适用于：所有元素
向下兼容：否
范例：a:link,a:active,a:visited{text-decoration:none}a:hover{text-decoration:underline}
另外IE浏览器并不支持文字修饰属性值blink（闪烁），因此如果你使用该属性时看不到效果就不用奇怪了。还有就是链接的初始文字修饰属性就是下划线，要是你觉得不够美观，用该属性去掉就可以了。
4.纵向排列属性vertical-align可以用做定义一个内部元素的纵向位置，相对于它的上级元素或者相对于元素行。该值可以是一个相对于元素行高属性的百分比，它会在上级基线上增高元素基线的指定数量。允许使用负值。也可以是一个关键字。该属性对于图象设置特别有用。
语法：vertical-align:[baseline|sub|super|top|text-top|middle|bottom|text-bottom|<百分比>|baseline]
初始值：baseline
适用于：内部元素
向下兼容：否
范例：img{text-decoration:underline}
其中baseline：基线对齐，sub：下标，super：上标，text-top：与上级元素文字顶端对齐，text-bottom：与上级元素底端对齐，top：顶端与该行最高元素对齐，middle和bottom类似。
5.文本转换属性text-transform允许通过四个属性中的一个来转换文本：capitalize（每个字的第一个字母大写），uppercase（每个字母大写），lowercase（字母小写），none（使用原始值）。
语法：text-transform:[none|capitalize|uppercase|lowercase]
初始值：none
适用于：所有元素
向下兼容：是
范例：p{text-transform:capitalize}
6.文本排列属性text-align跟HTML元素中的align属性的用法是相同的，比较简单。
语法：text-align:[left|right|center|justify]
初始值：由浏览器决定
适用于：块级元素
向下兼容：是
范例：p{text-align:center}
其中的属性值justify是使文字两端对齐，若浏览器不支持该属性则使用左对齐或者右对齐代替。
7.文本缩进属性可以应用于块级元素（p，h1等），以定义该块级元素第一行可以接受的缩进数量。该值必须是一个长度或者百分比。若百分比则视上级元素的宽度而定。该属性常用于段落的缩进。
语法：text-indent:[<长度>|<百分比>]
初始值：0
适用于：块级元素
向下兼容：是
范例：p{text-indent:25px}
8.行高属性line-height用于设定元素内部文字基线之间的间隔值。当值为数字时，行高有元素字体大小的量与该数字相乘所得。百分比的值相对于元素字体的大小而定。不允许使用负值。
语法：line-height:[normal|<数字>|<长度>|<百分比>]
初始值：normal
适用于：所有元素
向下兼容：是
范例：p{line-height:200%}
此外还有一个用于英文单词断行的属性：word-break
范例：p{word-break:break-all}
原创文章如转载，请注明：转载自常州SEO-网站推广优化-iitding
原文地址：http://www.dingseo.com.cn/post/12.html