内容、样式、行为分离

一个页面,不管多么复杂,都是由三块组成:

  • 内容(HTML)
  • 样式(CSS)
  • 行为(JavaScript)

一个好的页面,我们希望这三块都各司其职,写HTML的时候,只关注页面的内容与结构,不管样式。

CSS样式分为外部样式,内部样式,内联样式。外部样式,内部样式,都能通过修改一个CSS代码来控制整个页面的样式,更加合理高效。

做一个比喻就是,给一个人文身和换衣服的区别:

  • 如果用内联样式,属性写在HTML里面,那么每次修改样式的时候,都要一条一条去修改,相当于给人文身,如果想换一个外貌,要全身都重新文,很麻烦,效率低下,显得很low。

  • 如果用外部样式、内部样式,属性是拉出来单独写的,HTML里面只写样式的名称,那么,我只修改一处样式的代码,就能控制整个页面的样式,方便维护与修改代码,相当于给人换衣服,想改变外貌只要换一件衣服就好了,特别的高效准确。

JavaScript控制页面的行为,不要直接用JavaScript去控制样式,而是通过给元素添加删除class来控制样式变化,这样方便以后的维护与修改代码。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,870评论 1 92
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,887评论 25 709
  • 清晓妆成香满袖,风起薄衣透。 含酒误寻春,绿柳成荫,红落君知否? 淡烟流水朱船瘦,雨打青山皱。 只影顾徘徊,云鬓蛾...
    洛书月阅读 376评论 4 5
  • 有一个早晨,很普通的天气,也没有什么风,路刚刚醒过来,走满了眯着眼的小汽车。 爸爸上班去啦。 抱抱,抱我,我要抱,...
    一盒车厘子阅读 442评论 2 1
  • 如果,你和我也这样每天记录青春成长的细节,时刻凝视自己的成长,现在我们会不会不太一样,何炅说。刘同用150万字记载...
    尘嚣中的微粒阅读 671评论 2 7