silence

例如我想美化输入框的效果：
<input type="text" name="textfield" />


避免给这样的通配属性：
input{background:#222; border:1px solid #4a4a49; color:#ccc; padding:1px 3px; }


否则所有的输入框、按钮、单选框、复选框都会跟着变化。

给通配属性容易，再删通配属性，恢复input的默认值就麻烦了。
如果你不幸，也犯了这种错误，考虑一下批量替换的方法来解决：

首先将
input{background:#222; border:1px solid #4a4a49; color:#ccc; padding:1px 3px; }
变更为
.input-beauty{background:#222; border:1px solid #4a4a49; color:#ccc; padding:1px 3px; }


然后批量替换
type="text" 变更为 type="text"type="password" 变更为 type="password"这样哪个输入框需要美化，就调用样式，不需要就不调用。

由此，更加渴望CSS3的早日普及，将来直接用input[type="text"]这种玩意来实现。

我们浏览任何一个网页，仅从界面上就可以轻易的识别出专业和非专业的区别，那么怎么才能让网页设计的专业、漂亮、好看？这就要涉及到美术的一些基本常识。首先网页风格的形成主要依赖于网页的版式设计，页面的色调处理，还有图片与文字的组合形式等。
一、版面编排
网页设计首先涉及到的是页面的版面编排问题。”版面编排”实际上就是中国古代画论中的”经营位置”。网页作为一种版面，既有文字，又有图片。文字有大有小，还有标题和正文之分；图片也有大小，而且有横有竖之别。图片和文字都需要同时展示给观众，不能简单地罗列在一个页面上，这样往往会搞得杂乱无章。必须根据内容的需要，将这些图片和文字按照一定的次序进行合理的编排和布局，使它们组成一个有机的整体，展现给广大的观众。
1.主次分明，中心突出。在一个页面上，必然考虑视觉的中心，这个中心一般在屏幕的中央，或者在中间偏上的部位。因此，一些重要的文章和图片一般可以安排在这个部位，在视觉中心以外的地方就可以安排那些稍微次要的内容，这样在页面上就突出了重点，做到了主次有别。
2.大小搭配，相互呼应。较长的文章或标题，不要编排在一起，要有一定的距离，同样，较短的文章，也不能编排在一起。对待图片的安排也是这样，要互相错开，造成大小之间有一定的间隔，这样可以使页面错落有致，避免重心的偏离。
3.图文并茂，相得益彰。文字和图片具有一种相互补充的视觉关系，页面上文字太多，就显得沉闷，缺乏生气。页面上图片太多，缺少文字，必然就会减少页面的信息容量。因此，最理想的效果是文字与图片的密切配合，互为衬托，既能活跃页面，又使网页有丰富的内容。
二、线条和形状
文字、标题、图片等的组合，会在页面上形成各种各样的线条和形状。这些线条与形状的组合，构成了网页的总体艺术效果。必须注意艺术地搭配好这些线条和形状，才能增强页面的艺术魅力。
1.直线（矩形）的应用。直线条的艺术效果是流畅、挺拔、规矩、整齐，所谓有轮有廓。直线和矩形在页面上的重复组合可以呈现井井有条、泾渭分明的视觉效果。一般应用于比较庄重、严肃的网页题材。
2.曲线（弧形）的应用。曲线的效果是流动、活跃，具有动感。曲线和弧形在页面上的重复组合可以呈现流畅、轻快，富有活力的视觉效果。一般应用于青春、活泼的网页题材。
3.曲、直线（矩形、弧形）的综合应用。把以上两种线条和形状结合起来运用，可以大大丰富网页的表现力，使页面呈现更加丰富多彩的艺术效果。这种形式的网页，适应的范围更大，各种主题的网页都可以应用。但是，在页面的编排处理上，难度也会相应大一些，处理得不好会产生凌乱的效果。最简单的途径是，在一个页面上以一种线条（形状）为主，只在局部的范围内适当用一些其它线条（形状）。
三、色彩处理
色彩是人的视觉最敏感的东西。网页的色彩处理得好，可以锦上添花，达到事半功倍的效果。色彩总的应用原则应该是”总体协调，局部对比”，也就是：网页的整体色彩效果应该是和谐的，只有局部的、小范围的地方可以有一些强烈色彩的对比。在色彩的运用上，可以根据网页内容的需要，分别采用不同的主色调。因为色彩具有象征性，例如：嫩绿色、翠绿色、金黄色、灰褐色就可以分别象征着春、夏、秋、冬。其次还有职业的标志色，例如：军警的橄榄绿，医疗卫生的白色等。色彩还具有明显的心理感觉，例如冷、暖的感觉，进、退的效果等。另外，色彩还有民族性，各个民族由于环境、文化、传统等因素的影响，对于色彩的喜好也存在着较大的差异。充分运用色彩的这些特性，可以使我们的网页具有深刻的艺术内涵，从而提升网页的文化品位。下面介绍几种常用的配色方案：
1.暖色调。即红色、橙色、黄色、赭色等色彩的搭配。这种色调的运用，可使网页呈现温馨、和煦、热情的氛围。
2.冷色调。即青色、绿色、紫色等色彩的搭配。这种色调的运用，可使网页呈现宁静、清凉、高雅的氛围。
3.对比色调。即把色性完全相反的色彩搭配在同一个空间里。例如：红与绿、黄与紫、橙与蓝等。
这种色彩的搭配，可以产生强烈的视觉效果，给人亮丽、鲜艳、喜庆的感觉。当然，对比色调如果用得不好，会适得其反，产生俗气、刺眼的不良效果。这就要把握”大调和，小对比”这一个重要原则，即总体的色调应该是统一和谐的，局部的地方可以有一些小的强烈对比。
最后，还要考虑网页底色（背景色）的深、浅，这里借用摄影中的一个术语，就是”高调”和”低调”。底色浅的称为高调；底色深的称为低调。底色深，文字的颜色就要浅，以深色的背景衬托浅色的内容（文字或图片）；反之，底色淡的，文字的颜色就要深些，以浅色的背景衬托深色的内容（文字或图片）。这种深浅的变化在色彩学中称为”明度变化”。有些网页，底色是黑的，但文字也选用了较深的色彩，由于色彩的明度比较接近，读者在阅览时，眼睛就会感觉很吃力，影响阅读效果。

CSS.3.0的出现，对网页设计师来说无疑是一个很大的惊喜，仔细看完各项功能，大致整理出了一些个人认为比较实用的更新。当然，我们要想在设计中用到CSS3.0，估计要等到五年以后吧。

border：
border-radius ： none | <length>{1,4} [ / <length>{1,4} ]
有了这个属性，设计师再也不用费劲心思去研究圆角的实现方式了。

background：
background-origin ： border | padding | content
border：从border区域开始显示背景。
padding：从padding区域开始显示背景。
content：从content区域开始显示背景。
background-clip ： border-box | padding-box | content-box | no-clip
border-box：从border区域向外裁剪背景。
padding-box：从padding区域向外裁剪背景。
content-box：从content区域向外裁剪背景。
no-clip：从border区域向外裁剪背景。
background-size ：[ <length> | <percentage> | auto ]{1,2} | cover | contain
multiple backgrounds:可以把多个背景图片写到一起，既节省代码，又方便控制。
(有了这几个属性，背景图的位置变得更加灵活。)

color：
opacity ： <length> | inherit     这个属性的最大用处就是设置文字或图片的透明度，很实用。

text：
text-overflow ： clip | ellipsis
clip：不显示省略标记（…），而是简单的裁切。
ellipsis：当对象内文本溢出时显示省略标记（…）
相信大多数人都很熟悉这个属性的，也是我们梦寐以求的标签之一。

generated content：
content ： normal | string | attr() | uri() | counter()clip：
content用于插入生成内容；
content属性与 :before 及 :after 伪元素配合使用，将生成内容放在一个元素内容的前面或后面。

other modules：
columns：宽度 || 栏目数    
这个功能很不错的，可以让设置内容以几栏显示，以及每栏的宽度。配套的还有很多相关属性。
@font-face：{属性: 取值;} 
(有了它你就可以自定义字体了，用src链接到你的字体路径就ok。)

而事实上css3.0最为强大的地方在于css3.0的选择器，可以帮助我们很轻松的实现以往那些很复杂的效果，用过jquery的应该不会对这些陌生。

p[title^="val"] {color:#FF0000;}选择所有title以value开头的元素

p[title$="val"] {font-weight:bold;}选择所有title以value结尾的元素

p[title*="val"] {text-decoration:underline;}选择所有title里包含value的元素

p:nth-child(n) {color:#FF0000;}匹配父元素中的第n个结构子元素

p:nth-last-child(n){color:#FF0000;}匹配父元素中的倒数第n个结构子元素

p:nth-of-type(n) {color:#FF0000;}匹配同类型中的第n个同级兄弟元素

p:nth-last-of-type(n) {color:#FF0000;}匹配同类型中的倒数第n个同级兄弟元素

p:last-child {color:#FF0000;}匹配父元素中的最后一个子元素

p:first-of-type{color:#FF0000;}匹配同类型中的第一个同级兄弟元素

p:only-child {color:#FF0000;}匹配属于父元素中唯一子元素的

p:only-of-type {color:#FF0000;}匹配属于同类型中唯一兄弟元素的

p:empty {background-color:#EEEEEE;}匹配没有任何子元素（包括text节点）的元素

input:checked {margin:0 50px;}匹配所有用户界面（form表单）中处于选中状态的元素

input:enabled {background-color:#FF0000;}匹配所有用户界面（form表单）中处于可用状态的元素

input:disabled {border:1px solid #FF0000;}匹配所有用户界面（form表单）中处于不可用状态的元素

p:selection {background-color:#00FF00;}匹配元素中被用户选中或处于高亮状态的部分

p:not(s) {background-color:#00FF00;}匹配所有不匹配简单选择符s的元素

div ~ p {background-color:#00FF00;} ||||E ~ F ： {attribute}匹配E元素之后的F元素

css3.0+html5确实是很强大的，不过也许真到那一天的时候，我们又会想念现在这种想尽办法去实现想要效果的生活，也会少了这其中所包含的乐趣了。就好像如果真的没了ie6，也就没了与ie6斗其乐无穷的体验了。

所谓DIV滚动条，就是利用DIV标签，在里面嵌入CSS样式表，加入overflow的属性值，这样，当div所规范的区域内的内容达到一定程序时，滚动条就派上用场。其功能大约是为了节约页面空间，就是所谓的“缩地”了。看看效果如何吧!

参考核心代码：
div{
height:270px;
width:120px;
padding:0 10px;
margin-top:5px;
overflow:auto;
color:blue;
line-height:100%;
font-family:宋体;
letter-spacing:1pt;
text-aligh:left;
font-size:11pt;
border:1px solid #D9DEE2;
scrollbar-face-color:#ECEEF0;
scrollbar-highlight-color:#ffffff;
scrollbar-shadow-color:#919192;
scrollbar-3dlight-color:#ffffff;
scrollbar-arrow-color:#919192;
scrollbar-track-color:#ffffff;
scrollbar-darkshadow-color:#ffffff;
}

滚动条相关颜色属性：
face-color：滑块颜色
hightlight-color：高亮颜色
3dlight-color：三维光线颜色
darkshadow-color：暗影颜色
shadow-color：阴影颜色
arrow-color：箭头颜色
tack-color：滑道颜色

滚动条属性：
overflow：auto为自动，yes为有，no为无
overflow-x：横向滚动条
overflow-y：纵向滚动条

注意：在论坛中，要成功使用DIV滚动条，需要在HTML编辑模式下编写代码，发布前将“自动修正”前的“√”去掉。