一个页面,不管多么复杂,都是由三块组成:
- 内容(HTML)
- 样式(CSS)
- 行为(JavaScript)
一个好的页面,我们希望这三块都各司其职,写HTML的时候,只关注页面的内容与结构,不管样式。
CSS样式分为外部样式,内部样式,内联样式。外部样式,内部样式,都能通过修改一个CSS代码来控制整个页面的样式,更加合理高效。
做一个比喻就是,给一个人文身和换衣服的区别:
如果用内联样式,属性写在HTML里面,那么每次修改样式的时候,都要一条一条去修改,相当于给人文身,如果想换一个外貌,要全身都重新文,很麻烦,效率低下,显得很low。
如果用外部样式、内部样式,属性是拉出来单独写的,HTML里面只写样式的名称,那么,我只修改一处样式的代码,就能控制整个页面的样式,方便维护与修改代码,相当于给人换衣服,想改变外貌只要换一件衣服就好了,特别的高效准确。
JavaScript控制页面的行为,不要直接用JavaScript去控制样式,而是通过给元素添加删除class来控制样式变化,这样方便以后的维护与修改代码。