初学者调试CSS之前的Checklist(Common CSS Mistakes for a Beginner – CSS Bugs and Debugging Checklist)

from Common CSS Mistakes for a Beginner – CSS Bugs and Debugging Checklist translated by lyonmire & revised by 丑鑫鑫

我指导过很多朋友的网页设计/前端开发,我注意到几乎所有人会犯一个很普遍的错误,今天我想与大家一起分享。尽管以下的例子或许看起来很平淡无奇,但是对于大多数初学者来说都会经常犯这种错误。所以,若你是一个初学者,请读下去 !

场景:
初学css设计师说:我需要帮助!我加了一个类在我的样式表里,但是并没有起到我想像中的作用。肯定是我的css代码问题,你能解决吗?

到底是什么地方错了呢?

很显然可能是你css的问题,但当我们要纠结在这个结论中时,确保你是根据一个逻辑的思维过程而得出的结论。缩小问题的可能性,这就是你应该如何调试。

checklist

1.你的样式表没有上传或保存?

你在浏览器中看过已改动的css代码了吗?你忽略了这一步,如果你没有看这个改动。

2.你在html代码里面引用了你的css了吗?

html需要引用样式表来表现其属性

3.确保你使用了正确的语法

css是区分大小写的。

类名的开头不能是数字或特殊字符(如:连字符号“-”)开头,它必须以字母(a-z)开头
确保类以.开头(如:.classname),ID以#字开头(如:#idname)。确保你没有丢失或者混淆他们。

确保你的类或ID组是放在圆括弧里,你的类或ID的属性以分号结束。

确保你的类或ID名拼写正确。听起来似乎很荒唐,但我们都会犯错!加倍的检查类/ID或属性值的拼写.

4.你是否确保你所编辑的是正确的网址/样式/文件?

很多人确实会犯这种错误,所以通篇检查你的css代码是很重要的。你首先应该做的事情通常来说要加倍的检查你的代码。

5.你是否声明了正确了文档类型?
如果你没有申明你的文档类型(特别是ie浏览器),很有可能会出现意想不到的异常

6.你的css是有效的吗?

运行起来验证你的css问题。在你开发的过程中这通常是一个好的方法使你的css有效。这会使你有检查代码的良好习惯,并且你还会发现在你即将要发现的错误。

如果你证实到以上所述是正确的,那么是时候从行为观点的角度去置疑你的css.试试我之前在如何调试css上的建议,配备上合适的调试工具去进一步的研究。

结论
我认为很多这种错误都是源于对基础网页和html知识的缺乏。如果你发现基础不够扎实,你要通过全面的理解html和网页通常是如何起作用的来建立扎实的基础。一旦你有扎实的基础,加上足够的锻炼,你会逐步发现你自己会在分秒内解决问题。坚持,不要放弃,你会成功的。

留下评论

您的电子邮箱地址不会被公开。 必填项已用*标注