Heim > Artikel > Web-Frontend > CSS之旅（1）：为什么要用CSS_html/css_WEB-ITnose
CSS之旅（1）：为什么要用CSS_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 09:11:08958Durchsuche
不知道有多少码农和我一样，css一直是一个软肋，软到全身酥麻。。。既然软肋来了，只能是要想办法解决，所以就找本CSS权威指南看一看，都说CSS权威指南这本书比较过时，但是内容还是比较充实的，而且内容基本上就是和你交谈一样，非常舒服，好了，下面从正文说起。
一：为啥要学习CSS
当你知道CSS的历史还是蛮有味道的，在很久很久以前，web上没有css，只有一些html的标签，比如p，h1…h5… div span,ul 等等，这些html标记
都是一个具有特定含义的html标签，过去人很实在，不讲究排版，只要内容是干货就好了，就比如现在的博客园排版，简洁美，我们这些码农同样也不在乎这
个，只要文章是干货就好，但是呢？web用户不是程序员，他们才不讲究干货不干货，他们讲究外表，讲究炫酷，讲究如何的个性，这样的话Html就扛不住了，
W3C组织就为了满足这些人的胃口，提供了一些装饰html标记的标记，比如strong，font,b,u等等。。。就比如下面这样。
<body> <font size="20" color="red"><b>你好</b></font></body>
然后的然后，程序员就有了下面这样的抱怨了。。。
第一： 老子为了decorate个text，要写无数个标签，我操。。。多麻烦。。。
第二：马丹，现在我们的页面结构开始越来越复杂，这些几把font, b压根就不能重用，根本就是完蛋的东西。。。。高个毛啊。。。
第三：现在国家这么穷，带宽这么贵，我的html体积真tmd的大，内容其实仅仅占不到html的1/10。。。我的客户有时候要几分钟才能打开。。。这样下去，
我要失业了。。
结果就这样W3C招致网上程序员的骂声一片，原本的想法就是想通过一些样式的html标记来修饰html的结构内容，结果导致现在的一片混乱，而且页面结构失
衡。。。面对三大问题，W3C就开始推出了CSS，这个装修Html的层叠样式表。彻底的解决了程序员提出的三大难题。。。
二：如何解决三大难题
1. 无数个标签的问题
css采用一条条规则来decorate各个html的结构元素，规则的结构采用 “标签+内容声明” 的方式，比如：
<style type="text/css"> p { font-size: 20px; color: red; margin: auto 0; width: 50%; } </style> 这种定义我想没什么好说的，这样的话，我们把html中的装饰标签全部拿出来了，放到一个专门的css规则中，这样的好处大家也看到了，”内容“和”展示”的分离，
这样的话就解决了程序员们的第一个抱怨。
2. 装饰标签的重用问题。
确实，原始的html装饰标签无法做到重用，这样的话自然就会导致页面膨胀，css就采用了规则组来解决这个问题，先把规则写好，然后哪个标签想用的话，自己套用
下已设定的css定义就可以了。这样的话也就解决了重用的问题。
3. 体积膨胀的问题
如果第一，第二个问题没有解决好，第三个问题自然会发生，而且我想还有其他一连串的连锁反映，那么css都采取了哪些手段来解决的，为了突出css的终极目标，必须
严格的做到“内容”和“展现”的分离，要做到“分离”，那就必须将css单独的封装到一个专门的css文件，这样的话，就不光可以做到单个html页面的标签重用，甚至可以多页
面重用，多站点重用。那下一个问题就来了，引用css文件的方式有哪些？？？ 哪些是不值得提倡的？
三：css文件的引用方式
1. link引用
当你把css拖入到vs的时候，默认就是link模式，link它本来就是xhtml的一个标签，所以我们还可以用js来动态追加和控制，这个我想大家都清楚，还有一点好玩的地方就
是可以做“候选样式表”，在浏览器中可以动态选择自己想要的样式，比如下面我定义了两个css文件，分别让页面展示 red 和 blue 的背景。
然后我们可以在浏览器中可以动态切换我想要的css样式，蛮有意思的，虽然这种作用相对比较少见，由于截图不好截，大家可以使用 工具栏中的 ”查看“=> “样式”。
2.import引用
同样这个标记也可以导入，就像下面这样。
<html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> @import url(blue.css) </style></head><body> hello world;</body></html>
最后值得一提的是，尽量避免使用“内联样式”的style，如果这样的话，跟使用font，strong这样的标记几乎没有什么区别，就比如下面这样，所以我们尽量避免。
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title></head><body style="color: red; margin: 0 auto"> hello world;</body></html>
好了，第一篇大概就这么说了，后续的我们再延伸，周末愉快。