14.3 CSS中的常见错误
上一节介绍了HTML代码中的常见错误,本节介绍CSS中的常见错误。
虽然CSS的语法非常简单,但是在书写CSS代码的时候也会出现一些常见错误。CSS的错误可以使用CSS验证器来查找。下面看这些CSS中的常见错误。
(1)属性和属性值的分隔。
在CSS中,属性和属性值是通过冒号分隔的,而在HTML代码中,属性和属性值是通过等号分隔的,所以在书写的时候要注意不要因为习惯HTML代码而错写CSS代码。下面就是一个典型的CSS错误:
以上代码中等号的使用是完全错误的(虽然要改变用等号分隔属性和属性值的习惯是比较难的),代码修改如下:
属性和属性值之间应该使用冒号隔开,在冒号之前或之后添加额外的空格不会产生错误,也不会影响显示,但习惯上通常在冒号之后加上一个空格。
(2)分号的使用。
在CSS代码中,每个声明结束后都应该有一个分号,不要多也不要少。想更清晰地检查分号的使用,最好的方法就是让每个声明都单独使用一行,这样错误就更容易发现了。看以下代码:
在上面这段代码中,多写了一个分号,每个声明后面有且仅有一个分号,并且所有的声明在一行书写,这样的习惯并不好。代码修改如下:
(3)注意单位的使用。
在有些声明中需要使用单位,在单位前面出现的是数值,数值和单位之间是不允许出现空格的。看以下代码:
上面代码width宽度的设置中,数值和单位之间出现了空格,这样是错误的。代码修改如下:
(4)属性和属性值的匹配。
在使用属性和属性值的时候,要注意它们的匹配。例如text-align属性的取值只能是left、right、center、justify和inherit,则语句“text-align:top;”是无效的,因为top不是text-align属性可以取的值。
(5)使用样式表时,不要丢掉</style>结束标签。
(6)建立正确的HTML文档指向CSS文件,而且URL地址正确。
(7)使用选择器时注意空格和符号的使用。
(8)确认浏览器是否支持编写的CSS代码,特别是新的语法。
(9)确认括号的配对。