微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

CSS之旅(1):为什么要用CSS

2015-05-12 20:31 前端大全
(点击 上方蓝字 ,可快速关注我们)

不知道有多少码农和我一样,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>


好了,第一篇大概就这么说了,后续的我们再延伸,周末愉快。



来自:一线码农

链接:http://www.cnblogs.com/huangxincheng/p/4472781.html




前端大全』分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯,相关职位。欢迎关注。


微信号:FrontDev

(长按上图,弹出“识别二维码”后可快速关注)




 
前端大全 更多文章 5个典型的JavaScript面试题(上) Limu:JavaScript的那些书 Web开发:我希望得到的编程学习路线图 JavaScript基础工具清单 常用排序算法之JavaScript实现
猜您喜欢 Android 开机速度优化-----ART 预先优化 The Swift Programming Language--语言指南--附属脚本 前端Talk月刊第二期(2016年二月) 物理学,心理学,神经科学教授跨界对话:脑科学仍处于“前开普勒时代” 关于有效的性能调优的一些建议