css对网页样式控制
时间：2015-01-24 17:10:32
收藏：0
阅读：5522
1、方便修改网页格式：css对网页样式的控制可以独立地进行，因而修改、更新起网页起来都显得异常轻松容易。
2、轻松增加网页的特殊效果：在网页中过多的使用图像会破坏原有文字的存储格式，并且会加长下载时间，如果使用了css中的图像滤镜，就可以在不增加网页体积的情况下实现一些特殊的视觉效果，为网页添加生气。
3、使用网页元素更准确的定位：之前HTML中使用的表格用来定位表格元素，而且表格只适用于规则的网页排版，对于复杂的不规则的网页结构就显得力不从心，而css能很好的解决排版问题。
4、良好的适应性：许多浏览器都支持css。
同时我们更深刻的了解了css样式表的功能：
1、灵活定制网页元素风格：用css可以将元素逐个地定义其在页面中的显示风格。如果想让某种元素有多种外观，可以创建这种元素的多个类，把网页中的该元素用不同的类定义就可以了。
2、迅速更新网站风格：使用css，可以把整个网站的风格信息集中在外部css样式表的文件中，它的扩展名为.css，从而，HTML或XML可以通过一定的语句对这个文件样式进行引用。
3、组合不同风格的网页：每个人制作网页的风格和思路是不一样的，最后把每个人的网页和已开发出的网页完美组合起来是相当困难的，而css技术可以让每个人把自己的内容直接放到网页中去后，然后将网页与相应的css文件相连接，组合后的风格就较为一致，也节省了许多不必要的麻烦。
怎样做CSS布局呢? CSS文件的链接方式
1、附加链接：外部CSS文件
2、导入CSS：常用应用多个CSS文件时，将多个CSS导入一个CSS文件中
CSS规则定义有三种
1、类比如“.RedText”、“.BlueText”和“.BigText”等等
2、标签针对原有HTML标签做的重新CSS定义
1、附加链接：外部CSS文件
2、导入CSS：常用应用多个CSS文件时，将多个CSS导入一个CSS文件中
CSS规则定义有三种
1、类比如“.RedText”、“.BlueText”和“.BigText”等等
2、标签针对原有HTML标签做的重新CSS定义
3、高级伪类、定义了ID的元素，以及综合性定义
CSS规则的应用
1、只有“类”样式才需要应用，class=”xxxx”。任何元素都可以应用类。
2、class与id的区别
3、标签应用一般对于“body”标签一次性使用，对于诸如“li”、“td”等在页面中重复性比较大的标签不推荐定义。
4、高级多运用，定义“#id li”比定义“li”要好得多。
CSS规则的执行顺序
1、按照CSS代码的执行先后顺序
2、如果有重复的规则，按照后执行的定义
3、最终规则是多个定义规则的综合
重点：高级规则定义
1、对于不同表格的文字样式定义。(不同表格使用不同ID、使用类样式定义)
2、一页中的多种超级链接样式定义
3、多个相同规则不同对象的CSS共同定义
4、对于同一对象定义的多种CSS方式考虑哪种更科学(扩展性和代码精简性)
CSS规则的应用
1、只有“类”样式才需要应用，class=”xxxx”。任何元素都可以应用类。
2、class与id的区别
3、标签应用一般对于“body”标签一次性使用，对于诸如“li”、“td”等在页面中重复性比较大的标签不推荐定义。
4、高级多运用，定义“#id li”比定义“li”要好得多。
CSS规则的执行顺序
1、按照CSS代码的执行先后顺序
2、如果有重复的规则，按照后执行的定义
3、最终规则是多个定义规则的综合
重点：高级规则定义
1、对于不同表格的文字样式定义。(不同表格使用不同ID、使用类样式定义)
2、一页中的多种超级链接样式定义
3、多个相同规则不同对象的CSS共同定义
4、对于同一对象定义的多种CSS方式考虑哪种更科学(扩展性和代码精简性)
overflow与text-indent:-9999px
通常偏移掉字体的方式是
使用text-indent:-9999px;
可是他有一个局限性 他只适用于块级元素block
而我们往往有时候想偏移掉的a上的字体
所以问题就来了
text-indent:-9999px;虽然用起来比较惬意
将a转化成block的话 往往 他身后的的元素就被他赶到下一行了
如果正好这个a后面 是一个a按钮
就要用float来浮动以使他身后再出现簇拥者
这样是不是有些麻烦呢
所以推荐使用
line-height:0;
font-size:0;
overflow:hidden;
能完美“隐藏”掉你background之上的字体
经测试 ie6.0 、 7.0 、8.0、firefox 3.010 通过
而针对input value的隐藏这个方式就有些吃力了
所以还是只能用block加text-indent来“偏移”模拟隐藏了
display:block;
font-size:0;
line-height:0;
text-indent:-9999px;
经测试 ie6.0 、 7.0 、firefox 3.010 通过
使用text-indent:-9999px;
可是他有一个局限性 他只适用于块级元素block
而我们往往有时候想偏移掉的a上的字体
所以问题就来了
text-indent:-9999px;虽然用起来比较惬意
将a转化成block的话 往往 他身后的的元素就被他赶到下一行了
如果正好这个a后面 是一个a按钮
就要用float来浮动以使他身后再出现簇拥者
这样是不是有些麻烦呢
所以推荐使用
line-height:0;
font-size:0;
overflow:hidden;
能完美“隐藏”掉你background之上的字体
经测试 ie6.0 、 7.0 、8.0、firefox 3.010 通过
而针对input value的隐藏这个方式就有些吃力了
所以还是只能用block加text-indent来“偏移”模拟隐藏了
display:block;
font-size:0;
line-height:0;
text-indent:-9999px;
经测试 ie6.0 、 7.0 、firefox 3.010 通过
网站重构
一、使用css缩写
使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》，这里就不展开描述。
二.明确定义单位，除非值为0
忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=100，但是在CSS中，你必须给一个准确的单位，比如:width:100px width:100em。只有两个例外情况可以不定义单位:行高和0值。除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。
三.区分大小写
当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。
class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。
四.取消class和id前的元素限定
当你写给一个元素定义class或者id，你可以省略前面的元素限定，因为ID在一个页面里是唯一的，鴆las s可以在页面中多次使用。你限定某个元素毫无意义。例如:
div#content { }
fieldset.details { }
可以写成
#content { }
.details { }
这样可以节省一些字节。
五.默认值
通常padding的默认值为0，background-color的默认值是transparent。但是在不同的浏览器默认值可能不同。如果怕有冲突，可以在样式表一开始就先定义所有元素的margin和padding值都为0，象这样:
* {
margin:0;
padding:0;
}
六.不需要重复定义可继承的值
CSS中，子元素自动继承父元素的属性值，象颜色、字体等，已经在父元素中定义过的，在子元素中可以直接继承，不需要重复定义。但是要注意，浏览器可能用一些默认值覆盖你的定义。
七.最近优先原则
如果对同一个元素的定义有多种，以最接近(最小一级)的定义为最优先，例如有这么一段代码
Update: Lorem ipsum dolor set
在CSS文件中，你已经定义了元素p，又定义了一个classupdate
p {
margin:1em 0;
font-size:1em;
color:#333;
}
.update {
font-weight:bold;
color:#600;
}
这两个定义中，class=update将被使用，因为class比p更近。你可以查阅W3C的《 Calculating a selector’s specificity》 了解更多。
八.多重class定义
一个标签可以同时定义多个class。例如:我们先定义两个样式，第一个样式背景为#666;第二个样式有10 px的边框。
.one{width:200px;background:#666;}
.two{border:10px solid #F00;}
在页面代码中，我们可以这样调用
这样最终的显示效果是这个div既有#666的背景，也有10px的边框。是的，这样做是可以的，你可以尝试一下。
九.使用子选择器(descendant selectors)
CSS初学者不知道使用子选择器是影响他们效率的原因之一。子选择器可以帮助你节约大量的class定义。我们来看下面这段代码:
<div id=subnav>
使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》，这里就不展开描述。
二.明确定义单位，除非值为0
忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=100，但是在CSS中，你必须给一个准确的单位，比如:width:100px width:100em。只有两个例外情况可以不定义单位:行高和0值。除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。
三.区分大小写
当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。
class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。
四.取消class和id前的元素限定
当你写给一个元素定义class或者id，你可以省略前面的元素限定，因为ID在一个页面里是唯一的，鴆las s可以在页面中多次使用。你限定某个元素毫无意义。例如:
div#content { }
fieldset.details { }
可以写成
#content { }
.details { }
这样可以节省一些字节。
五.默认值
通常padding的默认值为0，background-color的默认值是transparent。但是在不同的浏览器默认值可能不同。如果怕有冲突，可以在样式表一开始就先定义所有元素的margin和padding值都为0，象这样:
* {
margin:0;
padding:0;
}
六.不需要重复定义可继承的值
CSS中，子元素自动继承父元素的属性值，象颜色、字体等，已经在父元素中定义过的，在子元素中可以直接继承，不需要重复定义。但是要注意，浏览器可能用一些默认值覆盖你的定义。
七.最近优先原则
如果对同一个元素的定义有多种，以最接近(最小一级)的定义为最优先，例如有这么一段代码
Update: Lorem ipsum dolor set
在CSS文件中，你已经定义了元素p，又定义了一个classupdate
p {
margin:1em 0;
font-size:1em;
color:#333;
}
.update {
font-weight:bold;
color:#600;
}
这两个定义中，class=update将被使用，因为class比p更近。你可以查阅W3C的《 Calculating a selector’s specificity》 了解更多。
八.多重class定义
一个标签可以同时定义多个class。例如:我们先定义两个样式，第一个样式背景为#666;第二个样式有10 px的边框。
.one{width:200px;background:#666;}
.two{border:10px solid #F00;}
在页面代码中，我们可以这样调用
这样最终的显示效果是这个div既有#666的背景，也有10px的边框。是的，这样做是可以的，你可以尝试一下。
九.使用子选择器(descendant selectors)
CSS初学者不知道使用子选择器是影响他们效率的原因之一。子选择器可以帮助你节约大量的class定义。我们来看下面这段代码:
<div id=subnav>
- <li class=subnavitem>
- >
- <li class=subnavitemselected>
- <li class=subnavitem>
这段代码的CSS定义是：
div#subnav ul { }
div#subnav ul li.subnavitem { }
div#subnav ul li.subnavitem a.subnavitem { }
div#subnav ul li.subnavitemselected { }
div#subnav ul li.subnavitemselected a.subnavitemselected { }
你可以用下面的方法替代上面的代码
<ul id=subnav>
- Item 1
<li class=sel> Item 1 - Item 1
样式定义是:
#subnav { }
#subnav li { }
#subnav a { }
#subnav .sel { }
#subnav .sel a { }
用子选择器可以使你的代码和CSS更加简洁、更加容易阅读。
十.不需要给背景图片路径加引号
为了节省字节，我建议不要给背景图片路径加引号，因为引号不是必须的。例如:
background:url(images
margin:0 auto;
}
但是IE5/Win不能正确显示这个定义，我们采用一个非常有用的技巧来解决:用text-align属性。就象这样:
body {
text-align:center;
}
#wrap {
width:760px;
margin:0 auto;
text-align:left;
}
第一个body的text-align:center; 规则定义IE5/Win中body的所有元素居中(其他浏览器只是将文字居中) ，第二个text-align:left;是将#warp中的文字居左。
十五.导入(Import)和隐藏CSS
因为老版本浏览器不支持CSS，一个通常的做法是使用@import技巧来把CSS隐藏起来。例如:
@import url(main.css);
然而，这个方法对IE4不起作用，这让我很是头疼了一阵子。后来我用这样的写法:
@import main.css;
这样就可以在IE4中也隐藏CSS了，呵呵，还节省了5个字节呢。想了解@import语法的详细说明，可以看这里《centricle’s css filter chart》
十六.针对IE的优化
有些时候，你需要对IE浏览器的bug定义一些特别的规则，这里有太多的CSS技巧(hacks)，我只使用其中的两种方法，不管微软在即将发布的IE7 beta版里是否更好的支持CSS，这两种方法都是最安全的。
1.注释的方法
(a)在IE中隐藏一个CSS定义，你可以使用子选择器(child selector):
html>body p {
}
(b)下面这个写法只有IE浏览器可以理解(对其他浏览器都隐藏)
* html p {
}
(c)还有些时候，你希望IE/Win有效而IE/Mac隐藏，你可以使用反斜线技巧:
* html p {
declarations
}
2.条件注释(conditional comments)的方法
另外一种方法，我认为比CSS Hacks更加经得起考验就是采用微软的私有属性条件注释(conditional comments)。用这个方法你可以给IE单独定义一些样式，而不影响主样式表的定义。
十七.调试技巧:层有多大?
当调试CSS发生错误，你就要象排版工人，逐行分析CSS代码。我通常在出问题的层上定义一个背景颜色，这样就能很明显看到层占据多大空间。有些人建议用border，一般情况也是可以的，但问题是，有时候border 会增加元素的尺寸，border-top和boeder-bottom会破坏纵向margin的值，所以使用background更加安全些。
另外一个经常出问题的属性是outline。outline看起来象boeder，但不会影响元素的尺寸或者位置。只有少数浏览器支持outline属性，我所知道的只有Safari、OmniWeb、和Opera。
十八.CSS代码书写样式
在写CSS代码的时候，对于缩进、断行、空格，每个人有每个人的书写习惯。在经过不断实践后，我决定采用下面这样的书写样式:
selector1,
selector2 {
property:value;
}
当使用联合定义时，我通常将每个选择器单独写一行，这样方便在CSS文件中找到它们。在最后一个选择器和大括号{之间加一个空格，每个定义也单独写一行，分号直接在属性值后，不要加空格。
我习惯在每个属性值后面都加分号，虽然规则上允许最后一个属性值后面可以不写分号，但是如果你要加新样式时容易忘记补上分号而产生错误，所以还是都加比较好。
最后，关闭的大括号}单独写一行。
空格和换行有助与阅读。
用XHTML+CSS创建基于Web标准的网页
这是一篇很久以前的文章了，现在看来，其中的思想很值得大家学习，在52CSS.com学习案例的同时，不仿学习一些理论的知识，对您知识的突破会很有帮助。大家加油！
自从看了Zeldman先生的力作“Designing with Web Standards”中文版为《网站重构》（第2版）一书，感受颇深，坚定了我用web标准的思想，去开发实践我们的项目。但是仅知道一些什么是web标准以及如何应用到实际项目中，还是远远不够的。必须对web标准中的每个组成部分，逐一学习应用，各个击破，方能发现它们的本质！对于像我这样的web开发设计人员，懂得这个道理，进行针对性的学习与实践，我相信我们一定会收获的更多，同时也算是为web标准在中国的应用做一点贡献！（呵呵，这个可能有些吹牛，但是的确是我们大多数软件从业人员的理想。）
现在是web2.0乃至3.0的时代，是XHTML,XML,CSS,ECMAScript和DOM的时代。虽然它们不是最终的技术，但它们组合起来就成为一个解决方案——我们规划建立一个向后兼容的网站的基础，同时也是做符合web标准的网站的必要的技术基础。我们不仅要做到希望获得更多的用户支持与访问，更要建立长久的，漂亮的网站长时间吸引他们的注意力。我相信学会使用CSS来改善我们的网站，是吸引他们注意力的好办法，也是在web2.0时代中时髦的发展趋势。下面我仅就CSS技术谈一下我从中获得到的经验。
想成为一名CSS专家，仅仅熟练使用CSS选择符（selectors）是远远不够的。还在于对工作的整体规划，工作流程的掌握以及提高样式表的可维护性和效率。用CSS可以创建出我们想要的美妙绝伦的网站，而写CSS本身就是一种享受。 那么我们应该如何创建更具吸引力的样式表？你的样式表应该具有哪些特性呢？通过学习并结合我自己的工作经验，总结出一套制作精美样式表的好方法。
一、不要让CSS有过多的标记
链接或者导入样式表听起来好像是一种无头绪的工作。我看过很多的网站开发都有着整洁的、组织严密的css文档，但是慢慢的，由于可能达不到在短期内快速更新，或者懒得再去管理，这使得先前创建的精致的样式表变成了垃圾。如果我们工作在需要发布上百条内容的庞大网站上面。因为时间有限，所以你需要通过嵌套或者排列css来进行快速修改或更新。随着时间的推移，这种习惯维持着，直到有一天你被告知这个网站要完全推翻重新设计（但是内容还是一样）而且你只有一周的时间去创建（包括测试）。一般来说，更新样式表还算是一个非常简单的方法，除非你长时间对网站零散的区域做修改，你就不能对网站样式表结构有一个整体的把握。
链接或者导入你的样式表不是随意的事情。创建干净整洁的样式表并保持下去，工作就会更开心。注意：如果你试图在每次更新或者添加新内容的时候创建新的样式表，那你肯定是自找麻烦。过多的链接和导入样式表会使消除bug变得异常困难，让样式表很难维持。大一点的网站分别建立不同部分的样式表这是可以理解的。就是小心不要走极端。添加很多的样式表，会增加更多的http请求，可能还会影响到后面的工作。
二、语义定义明确易懂
除了选择最合适的，最有意义的元素来表述外，还要确定选择class 和id属性值。定义明确可以让维护变得简单，小组里的成员都会看懂。看这个定义：
.l10k { color: #369; } ，.left-blue { color: #369; } ，如果是我做的我可能知道是啥意思，但是比人不一定就懂了。即使今天知道它的意思，但是能保证很多年后还知道它的意思吗？ 最好不要在类属性里面去加入颜色或者长宽的尺寸。更恰当的命名规范：. work-description { color: #369; }
三、知道什么时候添加有条件的注释和运用技巧
很多文章写过一些关于问题解决的技巧，有条件的注释是控制IE发布的一个好方法。我同意有条件的注释比在你的css文档里乱写要好得多，但是最近我开始慢慢意识到，很多证据表明，这并不是最好的解决办法。想在一个元素中设置它的最低高度，但是IE6浏览器却不执行它，所以你知道自己能够使用的高度，也同样会被同样的处理。重新建一个样式表，然后把有条件的注释加入到你的标识中，你所有的需要都是要遵循这个规定？保持最低的高度和高度的规则在一起，选择一个小技巧在同样的css文档里，这样会更好吗？在这种情况下，我觉得用这种方法很难奏效。
四、应用CSS到网页中尽量使用外部样式表
好处吗？大家都比较清楚，当然有一点是不可否认的，可以最大限度的实现代码的重用及最优化配置网站文件。
好了，以上就是我的一些个人见解，希望各位朋友们多给提意见，您的建议是我挑战困难的动力！谢谢！
自从看了Zeldman先生的力作“Designing with Web Standards”中文版为《网站重构》（第2版）一书，感受颇深，坚定了我用web标准的思想，去开发实践我们的项目。但是仅知道一些什么是web标准以及如何应用到实际项目中，还是远远不够的。必须对web标准中的每个组成部分，逐一学习应用，各个击破，方能发现它们的本质！对于像我这样的web开发设计人员，懂得这个道理，进行针对性的学习与实践，我相信我们一定会收获的更多，同时也算是为web标准在中国的应用做一点贡献！（呵呵，这个可能有些吹牛，但是的确是我们大多数软件从业人员的理想。）
现在是web2.0乃至3.0的时代，是XHTML,XML,CSS,ECMAScript和DOM的时代。虽然它们不是最终的技术，但它们组合起来就成为一个解决方案——我们规划建立一个向后兼容的网站的基础，同时也是做符合web标准的网站的必要的技术基础。我们不仅要做到希望获得更多的用户支持与访问，更要建立长久的，漂亮的网站长时间吸引他们的注意力。我相信学会使用CSS来改善我们的网站，是吸引他们注意力的好办法，也是在web2.0时代中时髦的发展趋势。下面我仅就CSS技术谈一下我从中获得到的经验。
想成为一名CSS专家，仅仅熟练使用CSS选择符（selectors）是远远不够的。还在于对工作的整体规划，工作流程的掌握以及提高样式表的可维护性和效率。用CSS可以创建出我们想要的美妙绝伦的网站，而写CSS本身就是一种享受。 那么我们应该如何创建更具吸引力的样式表？你的样式表应该具有哪些特性呢？通过学习并结合我自己的工作经验，总结出一套制作精美样式表的好方法。
一、不要让CSS有过多的标记
链接或者导入样式表听起来好像是一种无头绪的工作。我看过很多的网站开发都有着整洁的、组织严密的css文档，但是慢慢的，由于可能达不到在短期内快速更新，或者懒得再去管理，这使得先前创建的精致的样式表变成了垃圾。如果我们工作在需要发布上百条内容的庞大网站上面。因为时间有限，所以你需要通过嵌套或者排列css来进行快速修改或更新。随着时间的推移，这种习惯维持着，直到有一天你被告知这个网站要完全推翻重新设计（但是内容还是一样）而且你只有一周的时间去创建（包括测试）。一般来说，更新样式表还算是一个非常简单的方法，除非你长时间对网站零散的区域做修改，你就不能对网站样式表结构有一个整体的把握。
链接或者导入你的样式表不是随意的事情。创建干净整洁的样式表并保持下去，工作就会更开心。注意：如果你试图在每次更新或者添加新内容的时候创建新的样式表，那你肯定是自找麻烦。过多的链接和导入样式表会使消除bug变得异常困难，让样式表很难维持。大一点的网站分别建立不同部分的样式表这是可以理解的。就是小心不要走极端。添加很多的样式表，会增加更多的http请求，可能还会影响到后面的工作。
二、语义定义明确易懂
除了选择最合适的，最有意义的元素来表述外，还要确定选择class 和id属性值。定义明确可以让维护变得简单，小组里的成员都会看懂。看这个定义：
.l10k { color: #369; } ，.left-blue { color: #369; } ，如果是我做的我可能知道是啥意思，但是比人不一定就懂了。即使今天知道它的意思，但是能保证很多年后还知道它的意思吗？ 最好不要在类属性里面去加入颜色或者长宽的尺寸。更恰当的命名规范：. work-description { color: #369; }
三、知道什么时候添加有条件的注释和运用技巧
很多文章写过一些关于问题解决的技巧，有条件的注释是控制IE发布的一个好方法。我同意有条件的注释比在你的css文档里乱写要好得多，但是最近我开始慢慢意识到，很多证据表明，这并不是最好的解决办法。想在一个元素中设置它的最低高度，但是IE6浏览器却不执行它，所以你知道自己能够使用的高度，也同样会被同样的处理。重新建一个样式表，然后把有条件的注释加入到你的标识中，你所有的需要都是要遵循这个规定？保持最低的高度和高度的规则在一起，选择一个小技巧在同样的css文档里，这样会更好吗？在这种情况下，我觉得用这种方法很难奏效。
四、应用CSS到网页中尽量使用外部样式表
好处吗？大家都比较清楚，当然有一点是不可否认的，可以最大限度的实现代码的重用及最优化配置网站文件。
好了，以上就是我的一些个人见解，希望各位朋友们多给提意见，您的建议是我挑战困难的动力！谢谢！
虽然一直建议大家不用Dreamweaver可视化编辑的方式进行CSS网页布局，但依然很多朋友在使用。建立您可以使用DW的代码编辑器进行CSS代码的编写。今天向大家介绍Dreamweaver CS3网页制作中的CSS布局规则 。
CSS文件的链接方式
·附加链接：外部CSS文件
·导入CSS：常用应用多个CSS文件时，将多个CSS导入一个CSS文件中
CSS规则定义有三种
·类比如“.RedText”、“.BlueText”和“.BigText”等等
·标签针对原有HTML标签做的重新CSS定义
·高级伪类、定义了ID的元素，以及综合性定义
CSS规则的应用
·只有“类”样式才需要应用，class=”xxxx”。任何元素都可以应用类。
·class与id的区别
·标签应用一般对于“body”标签一次性使用，对于诸如“li”、“td”等在页面中重复性比较大的标签不推荐定义。
·高级多运用，定义“#id li”比定义“li”要好得多。
CSS规则的执行顺序
·按照CSS代码的执行先后顺序
·如果有重复的规则，按照后执行的定义
·最终规则是多个定义规则的综合
重点：高级规则定义
·对于不同表格的文字样式定义。（不同表格使用不同ID、使用类样式定义）
·一页中的多种超级链接样式定义
·多个相同规则不同对象的CSS共同定义
·对于同一对象定义的多种CSS方式考虑哪种更科学（扩展性和代码精简性）
CSS文件的链接方式
·附加链接：外部CSS文件
·导入CSS：常用应用多个CSS文件时，将多个CSS导入一个CSS文件中
CSS规则定义有三种
·类比如“.RedText”、“.BlueText”和“.BigText”等等
·标签针对原有HTML标签做的重新CSS定义
·高级伪类、定义了ID的元素，以及综合性定义
CSS规则的应用
·只有“类”样式才需要应用，class=”xxxx”。任何元素都可以应用类。
·class与id的区别
·标签应用一般对于“body”标签一次性使用，对于诸如“li”、“td”等在页面中重复性比较大的标签不推荐定义。
·高级多运用，定义“#id li”比定义“li”要好得多。
CSS规则的执行顺序
·按照CSS代码的执行先后顺序
·如果有重复的规则，按照后执行的定义
·最终规则是多个定义规则的综合
重点：高级规则定义
·对于不同表格的文字样式定义。（不同表格使用不同ID、使用类样式定义）
·一页中的多种超级链接样式定义
·多个相同规则不同对象的CSS共同定义
·对于同一对象定义的多种CSS方式考虑哪种更科学（扩展性和代码精简性）
CSS3 备受期待的八大功能
CSS3 仍遥遥无期，还是指日可待，这不是一个技术问题，而是人们什么时候可以彻底放弃那些不符合 W3C标准的旧浏览器的问题。CSS3 备受期待是肯定的，CSS Tricks 网站做了一次投票调查，票选备受期待的 CSS 功能，一共有7000人参与，结果如下。有趣的是结果的前三名非常的接近。
#1) 圆角 (22.0%, 1,541 票)
这个功能已经在诸如 Mozilla, Webkit 等浏览器广泛使用，对 Web 设计者来说无疑是最受期待的，然而 IE 仍然没有要支持这个功能的迹象。
#2) 多背景(22.0%, 1,523 票)
这个功能是我最期待的，但向后兼容会是一个很大的问题。
#3) @font-face (21.0%, 1,424 票)
Firefox 的最新版本将支持该功能，Safari，Opera 甚至 IE 也将支持或已经支持该功能，我们会看到该功能的广泛应用，只是字体的版权问题会很麻烦。
#4) 动画与渐变(12.0%, 818 票)
Webkit 在这方面是领头军，动画也是设计的一部分，也该属于 CSS。这些会慢慢实现，当 Webkit 之外的浏览器也开始支持这个功能，我们会看到很多令人惊讶的效果。
#5) 渐变色 (8.0%, 535 票)
定义一个固定色背景很简单，但渐变色就没有那么简单了，渐变色很适合通过代码实现，Webkit 又在这方面抢了先。
#6) Box 阴影(4.0%, 271 票)
阴影也是一种渐变色，以往是通过背景图片实现的，如果考虑到多方向的阴影，事情会变得更复杂，Box 阴影机制让一切问题迎刃而解。
#7) RGBa - 加入透明色 (3.0%, 234 票)
RGBa 中的 a 代表透明色，透明对设计者来说非常重要，目前除了 IE，这一功能正在被广泛采用。
#8) 文字阴影(2.0%, 140 票)
也属于渐变色的概念，让文字拥有阴影，以前甚至无法通过图片背景实现，因此这将为设计者带来前所未有的方便。
这个功能已经在诸如 Mozilla, Webkit 等浏览器广泛使用，对 Web 设计者来说无疑是最受期待的，然而 IE 仍然没有要支持这个功能的迹象。
#2) 多背景(22.0%, 1,523 票)
这个功能是我最期待的，但向后兼容会是一个很大的问题。
#3) @font-face (21.0%, 1,424 票)
Firefox 的最新版本将支持该功能，Safari，Opera 甚至 IE 也将支持或已经支持该功能，我们会看到该功能的广泛应用，只是字体的版权问题会很麻烦。
#4) 动画与渐变(12.0%, 818 票)
Webkit 在这方面是领头军，动画也是设计的一部分，也该属于 CSS。这些会慢慢实现，当 Webkit 之外的浏览器也开始支持这个功能，我们会看到很多令人惊讶的效果。
#5) 渐变色 (8.0%, 535 票)
定义一个固定色背景很简单，但渐变色就没有那么简单了，渐变色很适合通过代码实现，Webkit 又在这方面抢了先。
#6) Box 阴影(4.0%, 271 票)
阴影也是一种渐变色，以往是通过背景图片实现的，如果考虑到多方向的阴影，事情会变得更复杂，Box 阴影机制让一切问题迎刃而解。
#7) RGBa - 加入透明色 (3.0%, 234 票)
RGBa 中的 a 代表透明色，透明对设计者来说非常重要，目前除了 IE，这一功能正在被广泛采用。
#8) 文字阴影(2.0%, 140 票)
也属于渐变色的概念，让文字拥有阴影，以前甚至无法通过图片背景实现，因此这将为设计者带来前所未有的方便。
CSS布局口诀 - CSS BUG顺口溜 查看全文2009-05-04 23:44:22
在进行CSS网页布局时遇到BUG，请认真阅读以下内容，非常容易记忆的，不知道哪位高人把CSS BUG编成了顺口溜了！看看好不好记住呢？
一、IE边框若显若无，须注意，定是高度设置已忘记；
二、浮动产生有缘故，若要父层包含住，紧跟浮动要清除，容器自然显其中；
三、三像素文本慢移不必慌，高度设置帮你忙；
四、兼容各个浏览须注意，默认设置行高可能是杀手；
五、独立清除浮动须铭记，行高设无，高设零，设计效果兼浏览；
六、学布局须思路，路随布局原理自然直，轻松驾驭html，流水布局少hack，代码清爽，兼容好，友好引擎喜欢迎。
七、所有标签皆有源，只是默认各不同，span是无极，无极生两仪—内联和块级，img较特殊，但也遵法理，其他只是改造各不同，一个*号全归原，层叠样式理须多练习，万物皆规律。
八、图片链接排版须小心，图片链接文字链接若对齐，padding和vertical-align:middle要设定，虽差微细倒无妨。
九、IE浮动双边距，请用display：inline拘。
十、列表横向排版，列表代码须紧靠，空隙自消须铭记。
评论（0）