掃一掃微信二維碼
掃一掃微信二維碼
日照網站建設_修復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>元素中不小心添加的所有子元素。
以上是日照網站建設公司（昊諾網絡公司）分享，想了解更多網絡知識請關注我們網站動態！
建站咨詢熱線
15163346885