日照网站建设_修复CSS中的错误

昊诺网络o2017-08-22 14:51:00o网络知识o

日照网站建设_修复CSS中的错误

我们在日常网站建设过程中会遇到很多CSS中样式表错误问题，可以通过下面的步骤修复错误的样式表。按照此处所列步骤的顺序，就可以快速解决问题。

(1) 验证HTML文档的有效性。确保文档不存在语法问题，这样浏览器才能按预期解析文档结构。开发者可以使用W3C验证服务、W3C麒麟验证器或者各种浏览器插件进行标签和样式验证。

(2) 验证每一个CSS样式表。确保样式表不存在语法问题，从而确保所有规则都是有效的。

确保在非零度量值之后使用正确的度量单位（UOM），并且数字与UOM之间不能添加空格，如1em或loo%。（line-height例外，它允许使用不带单位的非零度量值。）
确保属性名称与值之间只有一个冒号（:），但是可以有若干空格，如width:1oo%或width：loo%。
确保每一条规则均以分号（;）结尾，如width:loo%;。
(3) 使用Mozilla浏览器的错误控制台，检查CSS解析错误清单。浏览器会忽略解析出错的规则，但是与其他编程语言不同，它们会继续解析和应用其他的规则。

(4) 确认选择器选择且只选择了全部应该选择的元素。只需要在选择器中添加outline:2px solid invert;，就能够看到选择器的结果。（注意，Internet Explorer 7不支持outline，但是支持border。）

(5) 仔细检查每一个没有成功应用的规则的层叠优先级。层叠优先级高于文档顺序。例如，#myid {color:red;}优先级高于*.myclass{color:blue;}，而#myid *.myclass{color:green;}优先级至高，这与它们在样式表的位置无关，而且与它们所在样式表的加载顺序也无关。这经常会导致出现问题，因为具有更高优先级的规则可能位于任意样式表的任意位置。假设已经验证过样式表的有效性，但是发现选择器中有一些属性有效，有一些属性无效，那么无论使用了什么值，往往都可以确定是层叠优先级出现了问题。而且，一般情况下这都是因为某个具有更高层叠优先级的规则覆盖了其中一些属性。通常，我们可以在属性后添加!important来确认这个问题。!important使属性的优先级高于所有非!important的属性。如果!important使一个属性生效，那么就可以确定发生了层叠优先级问题。

(6) 确认样式表中元素、类和ID的大小写与HTML文档的大小写完全匹配。这是很重要的，因为XHTML区分大小写。可以总是选择使用小写值，以避免出现意外错误。

(7) 仔细检查简写属性，检查规则中是否遗漏了属性值。注意，简写属性会将值赋给它所代表的全部属性，哪怕只设置了一个值。例如，background:blue;会将background-color设置为blue，同时将background-image设置为none，将background-repeat设置为repeat，将background -attachment设置为scroll，以及将background-position设置为0% 0%。如果有一条层叠优先级较高的规则包含background:blue;，而另一条低优先级的规则原本将backgroundimage设置为url("image.jpg")，那么这条规则会被覆盖，背景图片就不会显示，因为简写属性background:blue;已经重写了这个属性，将background-image变成none。

简写属性包括margin、border、padding、background、font和list-style。
font是一个非常复杂的简写属性，因为它组合了许多个属性，而且所有值都是可以继承的！这些属性包括font-family、font-size、font-weight、font-variant、font-style和line-height。注意，即使只给font添加一个值，如font:1em;，浏览器也会给全部属性设置默认值。
(8) 确认浏览器加载了所有样式表。要确认所有样式表都通过HTML文档中<head>部分的<link>语句或样式表中@import语句成功引用。如果不确定一个样式表是否被加载，那么可以在样式表中添加一条特殊规则，然后再检查它是否可以成功应用。这条规则通常要设置非常显眼的效果，如*{border:1px solid black;}。

(9) 避免使用@import语句。如果使用了@import语句，一定要将它们写在样式表开头，确保它的优先级低于样式表中的其他规则。

(10) 确认样式表加载顺序符合要求，将<link>和@import语句按优先级升序排列。在同一层叠级别的规则中，后面链接或导入样式表的规则会覆盖前面的规则。但是，无论规则位于样式表什么位置，无论规则位于链接样式表或是后面导入样式表，较高层叠优先级的规则一定会覆盖较低层叠优先级的规则。

(11) 确认服务器是将text/css作为CSS样式表的Content-Type头信息发送。Mozilla浏览器只接受内容类型为text/css的样式表。在Mozilla浏览器中，选择Web开发者工具条的菜单项View Response Headers（查看响应头），就可以查看HTTP头信息。

(12) 删除CSS样式表中可能存在的HTML元素，如<style>。而且，一定要删除HTML文档头部<style>元素中不小心添加的所有子元素。

以上是日照网站建设公司（昊诺网络公司）分享，想了解更多网络知识请关注我们网站动态！

文章关键词