百科名片

div+css由来

css的优点

css的不足之处

设计师经验

css要点精髓

css的学习方法(书本学习 视频学习)

发展历史

网页设计发展趋势——css将会得到更多关注

CSS标签大全

百科名片

CSS是英文Cascading Style Sheets的缩写，中文可以翻译成层叠样式表。 它的作用是将网页的表现形式与结构代码分离，定义网页的外观（例如字体，颜色等等），也可以和javascript等浏览器端脚本语言合作做出许多动态的效果。所有的浏览器都支持CSS。

div+css由来

起初，一些天才发明了网络，随之研发了出了Html语言，即建立了网页，但最早的网页可不像现在这样，它是相当丑陋的，仅仅有一些简单的定义能让你分辨出哪些是标题哪些是段落内容。 随着网络的迅速发展，网页被广泛地应用、浏览，用户的需求也变得多样化，单一丑陋的网站落伍了，人们希望网页做的漂亮些，因此老式Html页面的局限性就暴露了。人们为了使页面更漂亮研究了许多方法，用table排版的方法盛行一时，但它会造成页面代码臃肿的弊端马上就暴露出来。直到CSS出现，它就像救世主一样拯救了网页。

css的优点

1.大大缩减页面代码，提高页面浏览速度,缩减带宽成本;

2.结构清晰，容易被搜索引擎搜索到，天生优化了seo

3.缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。

4.强大的字体控制和排版能力。CSS控制字体的能力比糟糕的FONT标签好多了，有了CSS，我们不再需要用FONT标签或者透明的1 px GIF图片来控制标题，改变字体颜色，字体样式等等。

5.CSS非常容易编写。你可以象写html代码一样轻松地编写CSS。

6.提高易用性。使用CSS可以结构化HTML，例如：<p>标签只用来控制段落，heading标签只用来控制标题，table标签只用来表现格式化的数据等等。你可以增加更多的用户而不需要建立独立的版本。

7.可以一次设计，随处发布。你的设计不仅仅用于web浏览器，也可以发布在其他设备上，比如PowerPoint。

8.更好的控制页面布局。不用多说。

9.表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中，你可以减少未来网页无效的可能。

10.更方便搜索引擎的搜索。用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到你的内容，并可能给你一个较高的评价(ranking)。

11.Table 布局灵活性不大，你只能遵循 table tr td 的格式。而div 你可以 div ul li 也可以 ol li 还可以 ul li ……但标准语法最好有序的写。

12.另外如果你不是javascrput的高手，你可以不必去写ID，只用class就可以。当客户端程序员写完程序，需要调整时候，你可以在利用他的ID进行控制。

13.Table 中布局中，垃圾代码会很多，一些修饰的样式及布局的代码混合一起，很不利于直观。而Div 更能体现样式和结构相分离，结构的重构性强。

14.在几乎所有的浏览器上都可以使用。

15.以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。

16.使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。

17.你可以轻松地控制页面的布局 。

18.你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。

css的不足之处

浏览器支持的不一致性 浏览器的漏洞或缺乏支持的CSS功能，导致不同的浏览器显示出不同的CSS版面编排。例如在微软Internet Explorer6.0的旧版本 ，执行了许多自己的CSS2.0属性，曲解了很多重要的属性，例如：width，height，和float。许多所谓的CSS人员，必须在最热门的或常用的浏览器中达到一致的版面编排。在不同的浏览器中，要达到像素精准的版面编排，有时候是不可能的。

CSS没有父层选择器 CSS选择器无法提供元素的父层或继承性，以符合某种程度上的标准。先进的选择器（例如 XPath）有助于复杂的样式设计。然而，浏览器的性能和增加彩现的问题关系著父层选择器，却是CSS的工作群组拒绝建议的主要原因。

不能明确地指定继承性 样式的继承性，建立在浏览器中DOM元素的层级和具体的规则上。

垂直控制的局限元素的水平放置普遍地易于控制，垂直控制则非凭直觉性的、较迂回的甚至是不可能的。简单来说，例如：垂直地围绕一个元素、页尾的放置不能高于可见视窗（viewport，视窗或屏幕的可见范围）的底部范围、需要复杂而非凭直觉性的样式规则，或是简单但不被广泛支持的规则。

显示的缺乏目前的CSS没有办法明确又简单的显示属性值（例如：margin-left: 10% - 3em +4px;）。这在很多情况下都是非常有用的，例如：总字段中计算字段的尺寸限制。无论如何，CSS WG发表了CSS局限性的草案，而InternetExplorer 5 以后的版本支持相似功能的语法显示。

缺乏正交性同样的效果可以用不同的属性来完成，这经常会造成困扰。例如position、display与float定义了不同的配置方式，而且不能有效的交替使用。 一个display: table-cell元素不能指定 float或是position: relative，因为指定float:left的元素不应该受到display效果的影响。再者，没有考虑到新建立属性所造成的影响，例如在表格中你应该使用border-spacing而不是margin-*来指定表格元素。这是因为依照CSS准则，表格内部元素是没有边界（margin）的。

设计师经验

一、用class_name方式写类名。

以前喜欢用class-name写，不过好像两样也没什么差别。但我比较反对用className写类名，因为始终对浏览器大小写敏感的问题抱有怀疑态度。但是id我会写成驼峰式，理由见下一条。

二、样式都用class而不用id。

有三个理由，一，id不可以重复，所以用class的话，可以肆无忌惮的用无数次。二，id的优先级太高，若是写了一个#page_content a {color:#f60} ，那你完蛋了，里面要改链接颜色，都必须加上#page_content才能越过这个优先级。三，id专门留给JS用，这样才符合表现与行为分离的原则。所以id我用驼峰式，也是为了体现这一点。

三、margin和padding，尽量省略最后一个值。

比如margin: 20px 10px 5px 10px; ，左右值是一样的，就应该省略掉最后一个值，写成margin: 20px 10px 5px; 这样到时候要改左右间距，改一个就好，免得改漏了。其实这个问题虽然很细小，但是可以看得出对margin四个值省略规则的熟练程度。

css要点精髓

1.CSS是英文Cascading Style Sheets的缩写，即层叠样式表；

2.CSS样式是用来定义HTML元素如何显示的；

3.CSS样式一般保存在样式表中；

4.CSS样式能解决了Html页面的局限性；

5.外部CSS样式表保存在一个CSS文件里；

6.外部CSS样式表能让你做网页事半功倍；

7.多项样式定义将会层叠成一项；

css的学习方法

书本学习

css的学习和其他的学习一样,都需要特定的方法才能比较快的去掌握它.要想掌握CSS, 首先要学会HTML，我刚开始是从零开始学习的，花了一个月时间学习HTML，没有老师，书就是我唯一的老师，也没有上网的条件！一个月过后，我就开始学习CSS，刚开始看的第一本CSS书是《CSS网页样式设计》看了几天后发现根本看不懂！，之后换了一本《HTML参考大全》，这本书是网页制作师的案头常备之书！之所以更换这本书来学习CSS，是因为这里面有一部分是CSS，就成了我的CSS启蒙书。看了几段后，觉得外国人写的教程很有条理，由浅入深，一步一步引领你向前走，让你明白他们在说什么，而不是象国内的书讲的深浅不一，缺乏条理，好象怕你不知道他很有学问！就象前面所说的那本书《CSS网页样式设计》当时看了，对于初学CSS的我来说，真的不知道它在说什么！

再来谈一下学习过程中的细节，因为一个样式它是不可能脱离HTML页面的，HTML不与样式结合的话, CSS就失去了存在的意义。所以一般书中都会举一个例子，然后让你上机测试效果，这是笔者想让你有对样式表CSS有一个初步的印象，告诉你CSS能做什么。一个小例子：“麻雀虽小，五脏俱全”，你可能看不懂每一个语句的真正意思。但是你可以记得例子的模式，以后在实践中不断地用，不断用的过程就是不断记的过程，所以不能恢心，不能总认为自己记忆力不好，但不管你骑的是牛也好，千里马也罢，只要有恒心，一定会到达终点的。

阅读一本书，一般来说第一次要先把整个书通读一遍，不理解的也要往下看，在往下看的过程中你也许会找到那个问题的答案。看完后你有一个大概的印象，但一定有很多不明白的地方，没关系，继续往下看。

第二遍你就要边看边做学习笔记了，把你认为是重点的部分写上，还有，你觉得有疑问的部分也要记下，带着疑问看下去，如果没有答案，你可以去BBS上发一个贴子，好心人还是很多的，提示一句：“一定要学会如何去问问题！” 这里就不说了。你还要上机去练习书上的例子，最让你困惑的：“一是记不住，二是对概念的理解有误（这一条可能是书译的不好，另外就是你的理解不对）”，对于第一条你就要树立信心，坚持再坚持下去。当你到达终点时你回发现一切都是顺理成章的事。因为你努力了，努力了就会有回报，有结果。

有好多人也看了，但是没有什么进步，我分析主要有以下几个原因：

原因一：压力不够，因为有不少人比如美工学CSS，因为是看别人学，所以学之，不学就没优势！这样的压力是很小的，学不好还有美工这碗饭。

原因二：只是业余学习，这样学还只是玩一玩，因为你不一定非要以这门技术吃饭。

原因三：方法不对，有的人只是在看教程，但他不动手去做，我以前就是看的太多，做的太少，所以有了实践你才能把理论的东西揉进去。

视频学习

随着互联网的广泛应用 ，一种新的教学模式应运而生——网上教学。众多的视频教学网站如雨后春笋般诞生。在div+css是网页设计的基础技术，学起来有一定难度，如果能采用视频教学模式，一定能取得更好的学习效果。

发展历史

从20世纪90年代初，在HTML被发明开始，样式表就以各种形式出现了，不同的浏览器结合了它们各自的样式语言，读者可以使用这些样式语言来调节网页的显示方式。一开始样式表是给读者用的，最初的HTML版本只含有很少的显示属性，读者来决定网页应该怎样被显示。

但随着HTML的成长，为了满足设计师的要求，HTML获得了很多显示功能。随着这些功能的增加，使用外来定义样式的语言越来越没有意义了。

1994年哈坤·利提出了CSS的最初建议。伯特·波斯（Bert Bos）当时正在设计一个叫做Argo的浏览器，他们决定一起合作设计CSS。

当时已经有过一些样式表语言的建议了，但CSS是第一个含有"层叠"的主意的。在CSS中，一个文件的样式可以从其他的样式表中继承下来。读者在有些地方可以使用他自己更喜欢的样式，在其他地方则继承，或"层叠"作者的样式。这种层叠的方式使作者和读者都可以灵活地加入自己的设计，混合各人的爱好。

哈坤于1994年在芝加哥的一次会议上第一次展示了CSS的建议，1995年他与波斯一起再次展示这个建议。当时W3C刚刚建立，W3C对CSS的发展很感兴趣，它为此组织了一次讨论会。哈坤、

波斯和其他一些人（比如微软的托马斯·雷尔登）是这个项目的主要技术负责人。1996年底，CSS已经完成。1996年12月CSS要求的第一版本发布。

1997年初，W3C内组织了专门管理CSS的工作组，其负责人是克里斯·里雷。这个工作组开始讨论第一版中没有涉及到的问题，其结果是1998年5月发布的第二版要求。到2007年为止，第三版还未完备。

网页设计发展趋势——css将会得到更多关注

这是期待已久的事情。在过去的几年设计师已经开始关注和使用CSS3+HTML5，但在2011年CSS3+HTML5将会得到更广泛的应用。网页设计师最终会抛弃Flash。Flash不再是昔日的王者，新技术（指CSS3+HTML5）将会取而代之。2011年，Flash渐行渐远，魔术师“HTML5”成为舞台的主角：

当然，说HTML5代替Flash为时还早。从上面的两幅截图你可以知道Flash和HTML5还是有差距的。因此，2011年两者会各自保持属于自己的位置。不过2010年以前网页设计师滥用Flash的现象会慢慢减少。现在很少设计师会整个网站都是用Flash设计，他们会在一些可用的地方使用HTML5替代Flash，使网站变得简单运行更快速。然而，目前HTML5还不能够取代Flash，Flash的某些效果HTML5暂时还不能够实现。

然而最值得人兴奋的是CSS3的应用越来越广，在某些地方甚至超越PS（Adobe表示有鸭梨），因为利用CSS3来实现文字阴影、图片圆角和图片透明实在是easy job。如果你还不会，是时候去了解CSS3和HTML5。

CSS标签大全

颜色与背景类

color 设置文字颜色

#rgb

#rrggbb

rgb(255,255,255)

rgb(100%,100%,100%) H1{color:red}

H1{color:#f00}

H1{color:#ff0000}

H1{color:rgb(255,0,0)}

H1{color:rgb(100%,0%,0%)}

background-color 设置背景颜色，格式同上。 BODY{background-color:red}

BODY{background-color:#f00}

BODY{background-color:#ff0000}

BODY{background-color:rgb(255,0,0)}

BODY{background-color:rgb(100%,0%,0%)}

background-image 设置背景图片，

url(/imageURL) body{backround-image:url(/back.jpg);}

background-repeat 设置背景图片是否重复排列:

repeat-x(X轴重复排列);

repeat-y(Y轴重复排列);

No-repeat(不重复排列) BODY{background-repeat:repeat-x;}

BODY{background-repeat:No-repeat;}

background-attachment 设定背景图片是否卷动，默认为卷动。

scroll(卷动)

fixed(不卷动) BODY{background-attachment:fixed;}

background-position 设定背景图片或背景颜色开始显示的位置，取值格式：

top,buttom,left,right,center(用关键字)

70px 10px(用长度值)

50% 30%(用百分比) BODY{background-position:right top;}

BODY{background-position:50px 10px;}

BODY{background-position:20% 50%;}

background 定义背景综合属性，不要求顺序，各属性值以空格分开。 BODY{background:#ffcc00 url(/bg.jpg) fixed center}

字型类

font-family 设置字型属性，取值可以是任何字型名称，缺省为浏览器内定字型，可以设多个以逗号(,)分开，有空格的英文字型可用单引号或双引号括起来。 P{font-family:宋体,楷体,黑体,"Time New Rom";}

font-style 设定字型样式：Normal(正常),italic、objlique(斜体) P{font-style:italic;}

font-variant 取值：Normal(默认)，small-caps(如果是中文字型则将字型缩小显示，如果是英文则全部改为较小的大写) H3{font-variant:small-caps;}

font-weight 设定字体粗细，取值有：

Normal(默认),bold,lighter,border,100,200...900

由于浏览器支持程度不同，一般只用normal和bold两种属性。 P{font-weight:bold;}

font-size 设定字体的大小；

绝对大小：xx-small,x-small,small,mediumlarge,x-large,xx-large;

相对大小：larger,smaller;

数字表示可用单位：磅(pt),像素(px),英寸(in),厘米(cm);

亦可用百分比表示。 H2{font-size:36pt;}

P{font-size:200%;}

font 设定字型的综合属性，其顺序如下：

{font-style font-variant font-weight font-size /line-height font-family;} P{bold 12pt/14pt impact,Arial;}

文字类

letter-spacing 设定文字间距。 P{letter-spacing:5pt;}

text-decoration 设定文字加上下划线、删除线等效果：

none(无)

underline(下划线)

overline(上划线)

line-through(删除线)

vertical-align 设定文字或图片垂直方向的对齐方式：

baseline:默认值 sub:下标 super:上标 top:垂直向上对齐 middle:垂直居中 bottom:垂直向下对齐。

text-transform 转换英文字母大小写：

none:默认值 capitalize:首字母大写 uppercase:所有英文字母大写 lowercase:所有英文字母小写。

text-align 设置文字的水平对齐方式：

left:左对齐 right:右对齐 center:水平居中 justify:左右对齐。

text-indent 设定标记元素内文字的首行缩进或配合margin-left属性设定首行凸排。

line-height 设定行高，声明方式有标准行高、固定值表示法、百分比行高、字型大小比例行高等。

列表类

list-style-type 有序列表的编号方式（供<OL>标记使用）：

none:无编号 decimal:阿拉伯数字 lower-roman:小写罗马数字 upper-roman:大写罗马数字 lower-alpha:小写英文字母 upper-alpha:大写英文字母。

list-style-type 无序列表的符号样式（供<UL>使用）：

none:无符号 disc:实心圆符号 circle:空心圆符号 square:实心方形符号。

list-style-image 无序列表的自定义符号样式：

格式：url(图片名称) UL{list-style-imag:url(/dd.gif);}

list-style-position 设置列表清单符号缩排属性：

outside:凸排 inside:缩排 UL{list-style-imag:url(/dd.gif); list-style-position:outside;}

list-style 列表清单项目的综合设定，属性之间用空格隔开。 UL{list-style-imag:url(/dd.gif) inside;}

边界及其相关类

margin 标记元素边界值的综合设定。（其规则见右边范例）

亦可以用margin-top、margin-right、margin-bottom、margin-left分开设定各边的边界。 声明4个值，其顺序为上、右、下、左边界，如：DIV{margin:12pt 15pt 20pt 16pt;}

声明3个值，其顺序为上、右、下，缺少的左边界取其对边（右），如：DIV{margin:12pt 15pt 16pt;}

声明2个值，其顺序为上、右，缺少的下、左边界取其对边，如：DIV{margin:12pt 15pt;}

声明1个值，则4个边界同一个值，如：DIV{margin:15pt;}

padding 设定标记内容与标记边框之间的留白的综合设定（规则见margin属性的范例）。 也可分开设定padding-top、padding-right、padding-bottom、padding-left各值。

border-width 标记元素边框宽度的综合设定（规则类似于margin属性）。 也可分开设定border-top-width、border-right-width、border-bottom-width、border-left-width各值。

border-color 标记元素边框颜色的综合设定（规则类似于margin属性）。颜色取值见color属性。 也可分开设定border-top-color、border-right-color、border-bottom-color、border-left-color各值。

border-style 标记元素边框样式的综合设定（规则类似于margin属性）。边框样式有solid,double,goove,ridge,inset,outset等。 也可分开设定border-top-style、border-right-style、border-bottom-style、border-left-style各值。

border 标记元素4个边框的综合设定，可以分别声明边框宽度、边框样式、和边框颜色。 DIV{border:5pt solid #ff0000;}

width 设定标记元素的宽度。

height 设定标记元素的高度。

float 设定标记元素与文字间的相对位置（文字绕排方式）。取值：

none:以默认方式显示；

left:标记元素靠左，文字在右边绕排；

right:标记元素靠右，文字在左边绕排；

clear 设定标记元素与文字间的相对位置（与float不同的是标记元素两边都不绕排）。取值：

none:以默认方式显示；

left:标记元素靠左，右边无文字绕排；

right:标记元素靠右，左边无文字绕排；

其他类

z-index 设定标记元素的堆叠层次，取值为整数，也可以是负数，数值大的在上层。

visibility 设定标记元素是否可见，取值有：

inherit:取默认值 visible:可见 hidden:不可见（隐藏）