网站制作越简单越好(四):明确CSS定义单位、区分CSS元素大小写、取消class和id前的元素限定 、CSS元素默认值、CSS优先级

(1)
主页 > SEO > SEO技术 > 阅读: 作者: CRAZYSEO 发布日期: 2017-10-27 12:01:30
SEO诊断、外包、顾问业务 请联系QQ:3534790242
明确定义单位 忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=100,但是在CSS中,你必须给一个准确的单位,比如:width:100px width:100em。只有两个例外情况可以不定义单...

 

明确定义单位

忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=100,但是在CSS中,你必须给一个准确的单位,比如:width:100px width:100em。只有两个例外情况可以不定义单位:行高和0值。除此以外,其他值都必须紧跟单位,注意,不要在数值和单位之间加空格。

区分大小写

当在XHTML中使用CSS,CSS里定义的元素名称是区分大小写的。为了避免这种错误,CRAZYSEO工程师建议所有的定义名称都采用小写。

class和id的值在HTML和XHTML中也是区分大小写的,如果你一定要大小写混合写,请仔细确认你在CSS的定义和XHTML里的标签是一致的。

取消class和id前的元素限定

当你写给一个元素定义class或者id,你可以省略前面的元素限定,因为ID在一个页面里是唯一的,class可以在页面中多次使用。你限定某个元素毫无意义。例如:

div#id1{}可以写成#id1{}

这样可以节省一些字节。

默认值

通常padding和margin的默认值为0,background-color的默认值是transparent。但是在不同的浏览器默认值可能不同。如果怕有冲突,可以在样式表一开始就先定义所有元素的margin和padding值都为0,象这样:

* {

padding:0;

margin:0

}

或者是针对某元素来定义:

ul,li,div,span {

padding:0;

margin:0

}

CSS的优先级

行内样式(inline style) > ID选择符 > 样式(class),伪类(pseudo-class)和属性(attribute)选择符 > 类别(type),伪对象(pseudo-element)

解释:

*内联样式(inline style):元素的style属性,比如 <div style="color:red;"></div> ,其中的color:red;就是行内样式

*ID选择符:元素的id属性,比如 <div></div> 可以用ID选择符#content

*伪类(pseudo-class):最常见的是锚(a)伪类,比如a:link,a:visited.

*属性选择符(attribute selectors):比如div[class=demo],含有class为demo的div元素. 

*类别选择器(type selector):HTML标签选择,比如div .demo,div元素下含有class为demo的元素. 

*伪对象选择器(pseudo-element selector):比如div:first-letter,div元素下的第一个单词。

相关文章

QQ咨询