《你必须知道的css系列.doc》由会员分享，可在线阅读，更多相关《你必须知道的css系列.doc（10页珍藏版）》请在金锄头文库上搜索。
1、CSS这个话题在WEB2.0即将走到终端，3.0即将到来的今天可以相信绝大多数的开发人员都不陌生。其实这门技术本身并不难掌握，就拿我自己来说，记得07年因为当初工作需要从第一次知道CSS这个概念到能上手使用，前后好像就用了一个礼拜的时间，当时还自以为是的觉得CSS也就是这么回事，但随着时间的推移，才发现也仅仅局限于能上手使用，有些东西稍微变换一下就没辙了。很多人认为CSS难学，无法彻底掌握，可能都跟我一样，做出来的页面总是在各个浏览器中出现一大堆让人崩溃的异常现象，从而放弃了继续钻研这门技术。今天写这篇文章只是个开篇，也是我长期思考的结果。一方面发现自己做事总是没有持续性，做什么事情都是三分钟
2、的热度，想起来干就干，完了干着干着就没下文了，正好借写这个东西的机会培养一下自己的毅力。另一方面我虽然一个无名小辈，但长期在园子这样一个环境呆着，也潜移默化的受到了些影响。也想写点值得自己记住的东西，所以这就动手了。也就有了我即将要写的这一系列你必须知道的CSS。对了这个名字是仿Anytao的你必须知道的.net来的。不晓得这算不算侵权，如果他看到了还忘他见谅。“授人以鱼不如授人以渔”之前公司招聘过来的新人，好多时候他们问我一个问题，我都是直接把他们拉开，坐过去，啪啦帕拉几分钟解决完了就走了，后来被经理严厉训了一次说：你这不是在带团队，而是在当他们的工人。这时我反复思考才意识到这句话是对的。对
3、CSS的学习也是这样，这一系列不会介绍所谓的“CSS 小技巧”，也不会花大幅介绍CSS的的起源、前景、展望.那种很虚的东西。而是会花大量时间介绍CSS样式是如何实现页面布局的，我们常见的一些很炫的效果其背后的原理是什么，拿出来一一晒个遍，其实更加注重的是思维方法与实践应用。我坚信大家多少会有些收获，这也是我敢保证的！对了，在今天写这篇文章前，把博客每篇文章加了一笼包子，其实没啥原因，就是感觉图标做得很精致，在大晚上一两点钟的时候，看到这么个图标心里会舒畅一些，精神会饱满一些经。哈哈，大家别见笑了。CSS的作用及其基本结构css的作用之前在上一篇写过不会介绍太多CSS虚的东西，但还是决定把“CS
4、S的作用”这个话题搬上来说，是因为我有一次找工作面试，很直接的那个面试官就问了我“CSS的作用是什么？”我当时回答也很搞笑，就说了句，“现在做网站离不开CSS，这个就像鱼离不开水一样”。可能觉得说得也没错。但深层次的想，确实没有回答人家的问题。记得在很久以前，久得我都记不清楚了。那时我刚接触做网页的时候，要让页面中的某个段落加粗一下，就要添加一个HTML标签并加上相应的属性。要让某个段落对齐，我会在dreamweaver的设计器里打一大堆空格，然后代码里会产生一大堆的 （不好意思，我当时根本不知道）。每次要修改都要经历这样一个过程，光不谈HTML代码的臃肿不说，维护起来更
5、是一个让人崩溃的事。还好不久CSS就出现了，在这儿要感谢那些前辈们。通过他们的努力上面的问题得到了很好的解决。抛开各个浏览器对CSS解析的不同不说，最起码CSS让页面不再那么难维护了。我认为CSS的出现具有以下几个重要作用：1）修饰页面的元素时，避免了对HTML元素的改动(也就是现在流行的一个概念：“语义化”结构与表现分享了)每个浏览器对HTML的解析都不同。HTML原来设计的时候定位于定义文档的内容，通过使用,各类标签，所要表达的初衷是“段落”、“表格”之类的信息。但随着各大浏览器的出现，也逐渐将新的HTML标签和属性到HTML规范中，以至于使得创建一个合理的语义化的页面结构变得困难许多。通
6、过使用CSS样式，可以定义字体、颜色，那么就可以让这些原本不需要的表现形式的标记消失，使合理的语义化标记处于更好的位置，更好的发挥标记的作用。2) 使我们能够更轻松的控制页面结构和布局网站重构随着这个概念的出现，也带来了DIV结构的流行，因此也就出现了我们现在口头常说的“DIV+CSS做网站”。单从这个DIV+CSS的叫法来分析，可以了解到CSS已经被大家用在了页面布局上了。但一个页面不是只有控制DIV就控制了全面，还有很多其它的HTML标记，以前用table布局的页面，一样可以用CSS来控制它。3）最根本的也是我们开发人员关心的，提高开发和维护的效率一个网站，如果有很多相同的结构的文件需要修
7、改，涉及到的工作量是巨大的，但如果通过改CSS来实现页面的灵活变换，只需要修改某个样式就可以上，效率上大大提升。CSS的基本结构:selectorproperty:value;CSS的语法结构由两部分组成即：选择器和规则。规则也就是花括号中包含的内容。选择符（selector）:主要是告诉浏览器这个样式是用于页面中的哪些对象的，这个对象可以是HTML中的某个标记，也可以是指定的Class或ID。这个后面会详细的说。声明：声明主要是告诉浏览器怎样去渲染页面中的与选择符相匹配的对象。由属性与属性值组成，冒号相隔、分号结束的声明形式可以一个或者多个的组合而成。属性：属性主要以一个单词的形式出现，并且
8、都是CSS约定的，不可以自己定义。属性值：属性值将根据属性改变形式，包括数值，单位等。说理论一般都不容易让人记住，来举个例子吧。现在我要将页面中的也就是body下的所有的文字设为红色，且要18号字体，加粗显示，可以这样写：bodycolor:red;/*红色，以后我会专门写一下关于CSS中颜色的表现方面的东西*/font-size:18px;/*大小18px*/font-weight:bold;/*加粗，还有一种写法font-weight:700;这两个是相等的*/怎么样很清楚吧，注释也够详尽了，但这样的做法有个弊端就是，注释很详尽，样式一多的时间，文件会很大。在HTTP请求非常奢侈的今天任何
9、一点额外的负担都是要注意的。所以我们下面可以再简一下，这样：/*对body下所有的文字以红色加粗并以18像素显示*/bodycolor:red;font-size:18px;font-weight:bold可能有的人认为这没什么，而且会带来阅读上的不便。但你想一下，我们现在做的一般互联网项目有哪个少于十个八个样式表的。不管什么东西在小的时候都无所谓，但一大一多，就不得不考虑一些性能上的问题(当然关于CSS的执行效率方面的知识也有很多的学问，以后看情况也会介绍)这边就压缩CSS给大家两个有用的在线工具，可以作为参考一下，我平时一直在用非常不错：http:/ 元素选择符（例如：body 、a 、l
10、i ） ID选择符（例如：#head、#body、#foot） 类选择符（例如：.red、.item、.content）今天我们把所有的选择符统统拿出来说个遍。1)通配符选择符所谓通配符其实只是一个星号而已，但这么一个简单的星号作用却是很强大的。通配符一般用来对页面所有元素应用样式。例如：/*将页面中所有元素的内边距和外边距设置为0*/*margin:0;padding:0;在有些情况下，可以对特定元素的所有后代元素(后代元素其实就类似是子元素ppppstrong,strong就是P的后代元素)应用样式。例如，将页面中h1标签所包含的所有后代元素的字体设置为黄色，例如：代码*font-size
11、:14px;h1color:blue;/*将h1下面所有的内容设为蓝色*/h1*color:yellow;/*将h1下面所有的子标记中的内容设为黄色*/h1p*color:red;/*将h1下面P标记下面的所有内容设为红色*/h1h1里面包含个spanh1里面的P三级strong效果如图：最后关于通配符还有一点想说的就是，效率的问题。通配符把所有标签都要初始化一遍，浏览器的渲染消耗一定的资源。但是我在想，对于这点资源，除非是那种对性能要求极高，否则我认为没必要太刻意在乎，毕竟还是很方便吗！2）类选择符通配符与标签作为选择符确实很强大，也很好用，但涉及的范围太广泛。如果希望同一个标签在不同位置显
12、示不同的样式，那就需要改变选择符的使用方式，否则存在的弊端太多，这个时候就应该考虑换个方式去定义CSs样式。类这个概念可能我们大家在C#编程中都接触过，这里提的类选择器其实跟C#中的类是差不多的概念，目的就是体现复用性。减少相同的样式定义多次。来看例子：divfont-size:14px;color:#ff0000;text-decoration:underline;div1div2div3div4这边我让所有div标签下的文字14px大小带下划线红色文字。现在想一下如何让第三个DIV变为18px的字体。看例子：.div3font-size:18px;div1div2div3div4类选择器在
13、CSS中必须以“.”作为前缀，后面紧跟一个定义的类名。这样只要类是“div3”的DIV都以18PX字体显示从而达到了复用的效果了。3)ID选择符ID选择符的形式与类选择符极其相近，只不过类选择符是以点(.) 为前缀的，而ID选择符是以井号(#)为前缀。而两个选择符的用法也很相似。但一个页面中使用ID选择符建议不要出现同名的ID，因为javascript操作的时候，容易引起操作判断错误。示例：#testdivcolor:red;font-size:15px;div带ID的DIV是不是与上面的类选择符很相似呢。这个就介绍到这边！4)包含选择符 包含选择符很多人称它为派生选择符或者后代选择符，因为该选择符类型是作用于某个元素中的子元
