3.7 CSS属性常见错误与调试

原创声明。未经许可，不得转载，作者：小步教程。

CSS代码经过浏览器解析生成解析结果。当CSS代码出现错误时，属性设置被忽略，开发者工具提示错误信息。

3.7.1 查看元素应用的样式

正确代码

<body>
    <div style="background-color: #0aaa76;text-align: center;">
        小步教程 xiaobuteach.com
    </div>
</body>

样式面板查看div元素成功设置样式。“element.style”表示style属性设置样式。

故意改错代码：去除各CSS属性之间的分号，改为空格。

<div style="background-color: #0aaa76 text-align: center;">

运行效果

问题现象。样式无效。

定位方法1。样式面板查看浏览器解析CSS代码后的应用样式。

前方黄色警告图标，鼠标放在上面显示“属性值无效”，右边值显示删除线。

定位方法2。通过VSCode查看语法错误。

两处红色波浪线表示附近有语法错误。

正确代码

<div style="background-color: #0aaa76;text-align: center;">

故意改错代码。属性名与属性值之间的冒号改为等于符。

<div style="background-color=#0aaa76; text-align: center;">

查看应用样式。只有第2个属性生效，说明第1个属性设置出现问题导致被忽略。

正确代码

<div style="background-color: #0aaa76;text-align: center;">

故意改错代码。将background-color名称改错成background-color1。

<div style="background-color1: #0aaa76 text-align: center;">

定位方法。样式面板查看错误信息“属性名称无效”，属性名称与值都有删除线。

故意改错代码。将属性值center改错成center1。

<div style="background-color: #0aaa76;text-align: center1;">

定位方法：样式面板查看错误信息“属性值无效”，属性值上有删除线。