Debugging CSS

就像調(diào)試HTML一樣，調(diào)試CSS與調(diào)試許多其他類型的代碼相比并不是非?？膳?。 我們建議您在繼續(xù)之前(重新)閱讀調(diào)試不可怕。

CSS和調(diào)試

就像HTML一樣，CSS是 permissive (繼續(xù)之前，請閱讀許可代碼。)在CSS的情況下 ，如果聲明無效(包含語法錯誤，或瀏覽器不支持該功能)，瀏覽器會完全忽略它，并移動到下一個找到的。

如果一個選擇器無效，那么它不會選擇任何東西，整個規(guī)則什么都不做 - 再次，瀏覽器只是移動到下一個規(guī)則。

這在很多方面是偉大的 - 在大多數(shù)情況下，您的內(nèi)容將顯示給您的用戶，即使它的風格不是很正確。 但這不是很有幫助，當你試圖調(diào)試的問題，你甚至不會得到任何類型的錯誤信息，以幫助你找到它。 當內(nèi)容不可被用戶查看時，這更是一個痛苦 - 也許一個關(guān)鍵的風格沒有被應用，導致布局錯誤？

幸運的是有一些工具可以幫助你。 讓我們來看看這些吧。

檢查DOM和CSS

現(xiàn)在，所有的網(wǎng)絡瀏覽器都提供開發(fā)工具，幫助您檢查和理解網(wǎng)頁。 在他們提供的各種工具中，有兩種在所有瀏覽器中可用:DOM檢查器和CSS編輯器，可在Firefox中的 / docs / Tools / Page_Inspector">頁面檢查器工具。 我們已經(jīng)在調(diào)試HTML 中查看了DOM檢查器，以及如何使用它來檢查HTML。 在這里，我們將看看這個和 CSS編輯器，以及如何使用它們一起來調(diào)試CSS問題。

通過此示例時，我們會先打開我們的 外部"> CSS調(diào)試示例。 如果您想通過修復代碼問題并創(chuàng)建完成版本的示例，我們建議您復制 tree / master / css / introduction-to-css / debugging-css"class ="external"> HTML和CSS文件，并在本地實現(xiàn)修復。

它的意思是一個簡單明了的一欄網(wǎng)頁包含一個簡單的文章:

在這一刻，但它是一個混亂:

讓我們開始調(diào)查具有頁面檢查器的功能的頁面。 在Firefox中，您可以使用Cmd / Ctrl + I(或從菜單中選擇工具> Web開發(fā)器>檢查器)打開頁面檢查器，這將為您提供在窗口中打開的一組工具 在瀏覽器的底部如下:

如果你點擊左邊的DOM Inspector中的一個元素，右邊的CSS編輯器將更新以顯示應用于該元素的所有CSS規(guī)則。 這是非常有用的，特別是當任何無效的屬性出現(xiàn)一行通過他們和一個警告符號旁邊他們。 這將在下面派上用場！

;">

主動學習:找到錯誤！

所以，使用工具基礎(chǔ)概述，讓我們嘗試找到我們的錯誤。 在每種情況下，您應該嘗試點擊故障所在的元素，以查看應用的CSS的外觀。

1. The <header> and <footer> elements are supposed have a background color, but no color appears.
2. 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.
3. 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.
4. 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 。 此方法的工作方式相同，您可以通過特定網(wǎng)址驗證CSS， 上傳本地文件，或通過 w3.org/css-validator/#validate_by_input"class ="external">直接CSS輸入。

主動學習:驗證我們的CSS

讓我們嘗試把我們的CSS喂入驗證器，看看它是什么吐出。

1. Go to the CSS Validation Service Validate by direct input view.
2. Copy our error-filled CSS into the text area on the validation service.
3. Press the Check button.

您現(xiàn)在將看到一個錯誤列表。 只返回兩個:

0px auto; width:816px;">

這些是有用的消息，特別是因為它們包括行號和在每種情況下的操作中的選擇器。 讓我們看看我們?nèi)绾谓忉屵@些。

• 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.

你可能會認為這比瀏覽器開發(fā)者工具不太有用 - 它不允許你在引用錯誤的時候查看呈現(xiàn)的代碼，并且它不是找到選擇器不正確的實例，或者語法是 正確，你只是為你的設(shè)計選擇了不正確的值。 但我們認為，對于一個大的樣式表，值得運行它通過這個服務，以擺脫任何基本的語法錯誤，然后依靠瀏覽器開發(fā)工具來確定其他問題。

概要

完成了完成第一個CSS模塊的最后一篇文章！ 現(xiàn)在您已經(jīng)到達這里，您可以完成我們的 CSS評估，然后開始探索其他一些CSS和HTML模塊。