美文网首页
怎样理解内容与样式分离的原则

怎样理解内容与样式分离的原则

作者: 水剑承王 | 来源:发表于2017-02-06 23:15 被阅读0次

怎样理解内容与样式分离的原则

在 Web 开发中,所谓内容与样式分离,就是让内容的归 HTML, 样式归 CSS, 不要混着用。

为了理解为什么要把内容与样式分离,我们先来看看,在互联网早期,内容和样式混在一起是什么样。

<p font="Arial" color="pink"></p>

  • 上面这个例子,在元素 p 里,加入了字体和字体颜色这两个表示样式的属性,如果我一篇文档里有好几个段落,都要设置成这样,那我就要为每一个 <p> 加上这两个属性。是不是觉得有点麻烦?

  • 接下来,我觉得这个字体和颜色不好看,要换成别的,那我就要找开文件,找到每一个 <p>, 把相应的属性一个一个来更改。是不是觉得更麻烦了?麻烦的还在后面!

  • 接下来,我这个项目里面有好几个、甚至几十个网页,都要用同样的字体和颜色,怎么办?只有一个一个去改喽!是不是瞬间觉得崩溃了?

  • 如果把样式单独抽离出来,就不会存在上面的问题了,代码会得到精简和重用,后期的维护会变得非常简单。我只用写一个 class 的样式,就可以同时更改多个有相同 class 的元素的样式;只用一个 css 文件,就可以同时链接到多个 HTML 页面上。

这样,整套文档就变得清晰易读、易维护!

相关文章

  • 怎样理解内容与样式分离的原则

    怎样理解内容与样式分离的原则 在 Web 开发中,所谓内容与样式分离,就是让内容的归 HTML, 样式归 CSS,...

  • 任务四——课程作业3

    三、怎样理解内容与样式分离的原则 3.1 首先理解内容和样式分别是什么? 当我们谈内容和样式的时候,我们在谈什么?...

  • 入门任务4交作业

    提问 HTML、XML、XHTML 有什么区别 怎样理解 HTML 语义化 怎样理解内容与样式分离的原则 有...

  • 入门任务四——作业

    HTML、XML、XHTML 有什么区别点击查看 怎样理解 HTML 语义化点击查看 怎样理解内容与样式分离的原则...

  • 入门-task4

    HTML、XML、XHTML 有什么区别 怎样理解 HTML 语义化 怎样理解内容与样式分离的原则 有哪些常见的m...

  • HTML知识点

    HTML、XML、XHTML 有什么区别 怎样理解 HTML 语义化 怎样理解内容与样式分离的原则 有哪些常见的m...

  • 怎样理解内容与样式分离的原则?

    1.一个网页可以简单的分为三个部分:HTML——结构,CSS——表现,JavaScrip——行为。内容和样式的分离...

  • 怎样理解 HTML 语义化?怎样理解内容与样式分离的原则?

    怎样理解 HTML 语义化? 什么是HTML的语义,直观的说就是HTML的含义,从HTML代码本身就可以判断包含内...

  • 内容与样式分离原则

    内容与样式分离原则,等同于现在比较火的概念:结构、样式和行为分离原则。它们的中心思想是一样的,实现不同作用的代码进...

  • 内容与样式分离的原则

    html主要是控制页面内容结构就像页面的骨架,css主要是控制页面样式,js主要控制页面的元素的行为。他们三者相互...

网友评论

      本文标题:怎样理解内容与样式分离的原则

      本文链接:https://www.haomeiwen.com/subject/dvzuittx.html