Debugging CSS
| 先决条件: | 基本计算机知识，安装的基本软件，基本知识 developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files\">处理文件，HTML基础(学习 HTML简介)，以及 CSS的工作原理(了解此模块中的以前的文章)。 |
|---|---|
| 目的: | 学习如何调试CSS的基础知识。 |
就像调试HTML一样，调试CSS与调试许多其他类型的代码相比并不是非常可怕。 我们建议您在继续之前(重新)阅读调试不可怕。
CSS和调试
就像HTML一样，CSS是 permissive (继续之前，请阅读许可代码。)在CSS的情况下 ，如果声明无效(包含语法错误，或浏览器不支持该功能)，浏览器会完全忽略它，并移动到下一个找到的。
如果一个选择器无效，那么它不会选择任何东西，整个规则什么都不做 - 再次，浏览器只是移动到下一个规则。
这在很多方面是伟大的 - 在大多数情况下，您的内容将显示给您的用户，即使它的风格不是很正确。 但这不是很有帮助，当你试图调试的问题，你甚至不会得到任何类型的错误信息，以帮助你找到它。 当内容不可被用户查看时，这更是一个痛苦 - 也许一个关键的风格没有被应用，导致布局错误？
幸运的是有一些工具可以帮助你。 让我们来看看这些吧。
检查DOM和CSS
现在，所有的网络浏览器都提供开发工具，帮助您检查和理解网页。 在他们提供的各种工具中，有两种在所有浏览器中可用:DOM检查器和CSS编辑器，可在Firefox中的 / docs / Tools / Page_Inspector">页面检查器工具。 我们已经在调试HTML 中查看了DOM检查器，以及如何使用它来检查HTML。 在这里，我们将看看这个和 CSS编辑器，以及如何使用它们一起来调试CSS问题。
注意:在以下示例中，我们使用 Firefox ，但所有 浏览器提供相同类型的工具 - 它们可能只是在稍微不同的地方可用。 请阅读探索浏览器开发人员工具，了解有关在不同浏览器中访问这些工具的详情。
通过此示例时，我们会先打开我们的 外部"> CSS调试示例。 如果您想通过修复代码问题并创建完成版本的示例，我们建议您复制 tree / master / css / introduction-to-css / debugging-css"class ="external"> HTML和CSS文件，并在本地实现修复。
它的意思是一个简单明了的一栏网页包含一个简单的文章:
在这一刻，但它是一个混乱:
让我们开始调查具有页面检查器的功能的页面。 在Firefox中，您可以使用Cmd / Ctrl + I(或从菜单中选择工具> Web开发器>检查器)打开页面检查器，这将为您提供在窗口中打开的一组工具 在浏览器的底部如下:
如果你点击左边的DOM Inspector中的一个元素，右边的CSS编辑器将更新以显示应用于该元素的所有CSS规则。 这是非常有用的，特别是当任何无效的属性出现一行通过他们和一个警告符号旁边他们。 这将在下面派上用场！
;">
注意:每个属性旁边都有一个复选框，可以选中/取消选中，以允许您通过属性启用/禁用CSS属性。 这对于弄清楚可能导致错误的原因也非常有用。
主动学习:找到错误！
所以，使用工具基础概述，让我们尝试找到我们的错误。 在每种情况下，您应该尝试点击故障所在的元素，以查看应用的CSS的外观。
- The
<header>and<footer>elements are supposed have a background color, but no color appears. - The
<h1>and the<p>inside the footer are both too high up on the page — this is especially apparent on the<h1>, which is nearly off the screen! You could try clicking on the<h1>and unchecking the applied declarations to find out which one is causing the problem. - The
<img>is supposed to be floated down and to the right so it sits to the right of some of the text, but it isn't — it's directly above all of the text. - The text in the
<main>content area is far too small — the paragraphs and list items should have a larger font-size applied to it, but it doesn't seem to have been applied to either. Hint: This one is a bit harder, as it is a problem with the selector rather than a property. You may have to study the source code to find this — you can find it in the Style Editor in Firefox's developer tools.
如果您遇到困难，可以查看 Github上的固定源代码。
CSS验证
我们已查看 W3C HTML验证程序，但他们有一个 w3.org/css-validator/"class ="external"> CSS Validator 。 此方法的工作方式相同，您可以通过特定网址验证CSS， 上传本地文件，或通过 w3.org/css-validator/#validate_by_input"class ="external">直接CSS输入。
主动学习:验证我们的CSS
让我们尝试把我们的CSS喂入验证器，看看它是什么吐出。
- Go to the CSS Validation Service Validate by direct input view.
- Copy our error-filled CSS into the text area on the validation service.
- Press the Check button.
您现在将看到一个错误列表。 只返回两个:
0px auto; width:816px;">
这些是有用的消息，特别是因为它们包括行号和在每种情况下的操作中的选择器。 让我们看看我们如何解释这些。
- Property background-colour doesn't exist : teal — simple; this is telling us that a property doesn't exist, which makes it clear what needs to be done.
- Value Error : float attempt to find a semi-colon before the property name. add it — this is telling us that a semi-colon is missing. Looking at the line number of where this is occuring makes this easy to find.
你可能会认为这比浏览器开发者工具不太有用 - 它不允许你在引用错误的时候查看呈现的代码，并且它不是找到选择器不正确的实例，或者语法是 正确，你只是为你的设计选择了不正确的值。 但我们认为，对于一个大的样式表，值得运行它通过这个服务，以摆脱任何基本的语法错误，然后依靠浏览器开发工具来确定其他问题。
注意: CSS Lint 是一个类似的工具，用于验证CSS和发现错误，它也可以显示 一些有用的提示和给出有趣的警告。
概要
完成了完成第一个CSS模块的最后一篇文章！ 现在您已经到达这里，您可以完成我们的 CSS评估，然后开始探索其他一些CSS和HTML模块。