首先我们都知道文本输入框如果不做css美化，直接 把它放在页面里面，很难和整体设计融合起来，这也是我们要做美化的主要原因。下面是一个input文本输入框的html代码：

现在我们就开始对其进行美化，这次做的教程是结 合昨天的表单模板给大家做的详细分解，所以代码基本上还是参照昨天的表单模板。首先我们会对所有的input对象进行一个基本设定，把 margin,padding,border,font,float等基本元素进行一个设定，因为这个设定可以继承，所以如果是同样的设定我们在后续对继 承的类或对象进行定义的时候就不用再写了，而只需要写出不一样的的地方即可以。下面我就把基本设定的css代码列出来。

INPUT
{
border-left: #fff 1px solid;
border-top: #fff 1px solid;
border-right: #fff 1px solid;
border-bottom: #fff 1px solid;
margin: 0px 0px 15px 10px;
padding-left: 10px;
background: #ccc;
float: left;
font-size: 1em;
line-height: 1.5em;
height: 20px;
text-align: left;
}
这里我要解释一下，其实在我们经常使用css的过程中会用一些缩写的形式，这样的好处是能够减少 css代码的体积，但是就我的经验来看，其实缩写并不是最好的方式，当然在国内使用浏览器的种类比较少，所以在兼容性方面出现的问题比较小，但是在一些发 达国家的浏览器使用的种类是很多的，经常容易出现缩写不识别的情况。我现在就注意到border和padding这2个属性的设置一般比较有经验的css 作者都会使用不缩写的方式，就比如上面看到的border设定分成了上下左右4个属性来写。

经过上面设定之后大家可以看到input 输入框已经基本上实现了平面效果，具体的分为3部分来了解：
1、边界背景部分

border-left: #fff 1px solid;
border-top: #fff 1px solid;
border-right: #fff 1px solid;
border-bottom: #fff 1px solid;
margin: 0px 0px 15px 10px;
padding-left: 10px;
background: #ccc;

2、浮动设置部分
float: left;

3、文字控制部分
font-size: 1em;
line-height: 1.5em;
height: 20px;
text-align: left;

大家有兴趣可以对上面的设定进行更改，然后再看效果就比较容易理解他们的含义了。
接下来我们还需要对 输入框进行单独的设置定义，主要是定义输入框和基本input定义不相同的地方。大家看代码：

INPUT.textbox
{
margin: 0px 60px 8px 0px;
padding-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
background: url(field.gif) repeat-x left 50%;
width: 270px;
color: #111;
}

这里大家注意到了我们重写了margin、padding-left和background属性，这样 的话这3个属性就是以这里的最后的设置为准，另外我们还添加了宽度width属性和文字颜色color属性。使得整个input文本输入框基本成型，大家 可以运行下面的代码看看最后效果。

下面从前端设计的角度整理的CSS的命名规则，就很好地考虑到了搜索引擎的喜好，在页面设计的过程中，尽量做你懂，搜索引擎也懂，何乐而不为呢。

页头：header

登录条：loginBar

标志：logo

侧栏：sideBar

广告：banner

导航：nav

子导航：subNav

菜单：menu

子菜单：subMenu

搜索：search

滚动：scroll

页面主体：main

内容：content

标签页：tab

文章列表：list

提示信息：msg

小技巧：tips

栏目标题：title

加入：joinus

指南：guild

服务：service

热点：hot

新闻：news

下载：download

注册：regsiter

状态：status

按钮：btn

投票：vote

合作伙伴：partner

友情链接：friendLink

页脚：footer

版权：copyRight

1.CSS ID 的命名

外　套：　　wrap

主导航：　　mainNav

子导航：　　subnav

页　脚：　　footer

整个页面：　content

页　眉：　　header

页　脚：　　footer

商　标：　　label

标　题：　　title

主导航：　　mainNav(globalNav)

顶导航：　　topnav

边导航：　　sidebar

左导航：　　leftsideBar

右导航：　　rightsideBar

旗　志：　　logo

标　语：　　banner

菜单内容1： menu1Content

菜单容量：　menuContainer

子菜单：　　submenu

边导航图标：sidebarIcon

注释：　　　note

面包屑：　　breadCrumb(即页面所处位置导航提示)

容器：　　　container

内容：　　　content

搜索：　　　search

登陆：　　　login

功能区：　　shop(如购物车，收银台)

当前的　　　current

2.另外在编辑样式表时可用的注释可这样写：

<– Footer –>

内容区

<– End Footer –>

3.样式文件命名

主要的 master.css

布局，版面 layout.css

专栏 columns.css

文字 font.css

打印样式 print.css

主题 themes.css

• Last Amish shooting victim to be released from hospital
• Last Amish shooting victim to be released from hospital
• Last Amish shooting victim to be released from hospital
• Last Amish shooting victim to be released from hospital
• Last Amish shooting victim to be released from hospital

我们将“超阅读”理解为针对超文本的非线性阅读，而将针对线性文本的线性阅读称为传统阅读。传统阅读的过程中，读者要花很大力气才能找到他们想要的信息。渐渐的，链接也成了技术问题，因为大部分网页在搜索引擎中都有一个特定的级别，而该级别取决于网页外部链接的数量和质量。

说到链接问题，还值得一提的是链接设计师们都使用了相关的链接标签，给链接一致添加了暗示“可点击”的标识，并用颜色把“已点击”和“未点击”的链接区分开来。

1. 使用相关的链接描述

应不惜一切代价避免用户的困惑！也就是说，要保证用户能够认出每一个链接，能够在某种程度上预测目的页的内容，或者说他们即将访问的网站的内容。会让用户困惑的一个经典实例就是使用“点击此处”的标签，这并没有提供任何与链接目的页相关的信息，因此会让人十分疑惑。

另一个例子就是嵌入式链接—一旦使用了这类链接，链接文本就应该准确指出链接的去向。一般来说，用户都倾向于忽略文本中的嵌入式链接，因此，我建议你最好不要使用。

2. 要知道链接都有一定的特征：像下划线和特殊的颜色

实际上，第二个特征远远没有第一个重要，但在某些特殊的情况下，下划线还是可以去除的，尤其是当某些区域绝对明显时—访问者一看就知道是链接；例如，当鼠标放在超链接上时，光标会变成手的形状。建立链接时，你应该为用户提供足够明显的标识，让他们知道此处是“可点击”的链接。与此同时，还值得我们铭记于心的是，一个网页的不同区域链接出现的概率也有所不同；举例来说，网页中间、左边及右边的标题成为链接的可能性会大些。

3.用不同的颜色区分已访问和未访问的链接

文本链接一定要和页面的其他文字有所区分，避免在链接处使用特殊的色彩，我们应该使用标准、醒目的颜色—总之，链接应该尽可能从电脑屏幕中突现出来。还值得注意的是，已点击的链接也必须以某种方式与未点击的链接区别开来，其中最好的方法就是采用不同的颜色。

与尚未被点击的链接刚好相反，点击过的链接应该采用比较朦胧的、淡的色彩，像灰色或栗色。使用两种不同的颜色，但如果他们的色彩强度一致，也可能会带来不好的效果，因为这样用户也很难区别已访问和未访问的链接。我们可以考虑使用其他颜色替代，像蓝色就是最经典的链接色。

4.避免其它文字使用颜色

在我看来，颜色应该仅仅用于超链接上。不过一些特殊的词语也可以使用普遍的公认的色彩，像红色代表错误或警告，绿色代表通过或成功。从技术上讲，涉及到文件的色彩时， 你最好在属性设置中分别指定所有的颜色（像bgcolor,text,link,vlink,alink）,以确保网站各部分的易读性。

强调这一点主要是因为许多用户会设置某种颜色为默认，所以如果你不指明文件的所有颜色，他们最终会变为很难辨认的文件。而且，就算你使用了图片作背景，但仍然应该指明文件的bgcolor（背景色），不能掉以轻心，因为用户很可能没有载入图片。

5. 光标指向超链接时，别乱用“特殊效果”

我们之前已经说过，下划线文本是超链接最明显的标识，但在一些特殊的情况可以除去超链接的下划线，且不影响它的效果及可用性。例如，只有当用户指向某一链接时，我们才显示此处是可点击的—或者说，只有当鼠标放在链接上时，才会出现下划线，标志着是“可点击”的。

不过我并不建议你使用“粗体”的效果，因为这样可能使得整个文本都重新编制。相反的，其他像链接标题的效果在创建有用的网站时（网站导航的可用性）会显得特别成功，不过最近用户们还是发现了许多问题，他们发现大多数情况下自己根本就不知道将要点击的链接的去向。为了满足用户的需求，许多浏览器都扩展了一项功能，它们能略微预览链接到的地址。这一扩展在很大程度上减少了用户的疑惑。

6. 链接不能太过密集

要保证互联网用户是自愿到达到目的页的，而不是因为由于链接太过密集，使得用户在点击其他链接时误点到这些链接。不过这点不是很重要，我们大可跳过不讲，我想网友们也不会很感兴趣；但我们还是要给予一定的重视和适当的考虑，将每一网页上的链接数量限制在合理的范围内(少于100)，以防访问者总是误入其他页面。

7. 确保重要的网页内容可通过多个路径进行访问

设置多个路径访问同一信息，能帮助用户快速找到他们想要的信息。不同的用户会以不同的方式查询，这完全取决于用户各自的爱好偏向、及他们网站上不同的网页布局。

8.使用文字链接而不是图象链接

如我们之前所说的，文本链接能给人一种“可点击”的感觉。文本链接通常都有很快的下载速度，是用户偏爱的链接；要注意的是，链接被选中后，颜色也应发生相应的改变。

即使从技术的角度来看，也是很有道理的，在链接的目的地设置文本要比使用图象简单的多。如果是图象链接，用户会表现的相当困惑，他们通常都不能确定眼前的图片是否是可点击的，或者是否会链接到某些恶意网站，让人似乎没有了安全感。因此，链接的链接按钮，不要用图片，要用文字！

9. 合理的链接长度

超链接要足够长才能被用户理解，但也不能过长，一般都不能超过50个字符。

10. 试着提醒访问者，以防他们退出页面

当访问者在不知情的情况下可能将要退出页面并转向其它网站时，你最好能事先提醒他。一般来说，用户都期望即将访问的新页面与当前浏览的网页是出自同一网站，如果最终出现的是另一种情况，他们会觉的无所适从。因此，我最后要说的是，在创建网站时可以考虑设置提示信息，当访问者要离开网站时，提醒他们是否真的要退出网站。

11. 在网站上提供有用信息的链接

如果你使用超链接进一步定义、解释或说明网页内容，能改善你网站的导航系统。这些链接能补充说明某些概念，对缺少经验的用户会有很大帮助！

12.保留的字符引发的问题

这也是技术问题：为了可以用作网址，保留的字符是需要以十六进制格式编码的。部分浏览器可以正确显示这些字符，但这并不意味着使用这些字符时完全不需要设置浏览器的编码。

举例来说，空格就是特殊的字符，需要进行编码；不过我劝你最好不要使用需要编码的字符。此外，还有一个问题，URL字母的大小写敏感性（case sensitivity）也可能会给你造成不必要的麻烦，我建议你在开始设计数据库时就考虑大小写敏感性，防止它们在你从某一服务器转向另一服务器时发生改变。

13.导航系统的规范建设

切记，在某一区域中将相关的链接集合到一起是至关重要的。在屏幕读者用户浏览网页时，似乎人人都期望网站主要的导航菜单能显示在网页内容之前，出现在网页最主要的位置。几乎没有用户会更希望先看到网页内容，不过把网页内容放置在像广告、友情链接及页脚这类不相关的信息之前，还是很可取的。

原文地址:

http://perishablepress.com/press/2007/10/23/a-killer-collection-of-global-css-reset-styles/

PS：

* {
padding: 0;
margin: 0;
}

这就是最常用的Css Reset，但是这里会有很多问题。

原文前部分说了很多关于Css,以及各浏览器的css规则的不同,而制定”Css Reset”也是为了兼容与统一,正确有效的使用”Css Reset”可以在某种程度上节约时间与金钱.

非常感谢Perishable的整理与归纳

下面是关于几类Css Reset的简单介绍,本人能力有限.只能理解大概意思,还请各位看官见谅.

Minimalistic Reset [ Version 1 ]
相信这一段你经常看到.而且也是我们经常用到的

* {
padding: 0;
margin: 0;
}

Minimalistic Reset [ Version 2 ]
border:0的设计有些不靠谱了

* {
padding: 0;
margin: 0;
border: 0;
}
Minimalistic Reset [ Version 3 ]
当然这个也是不推荐的.会跟某些默认样式有冲突

* {
outline: 0;
padding: 0;
margin: 0;
border: 0;
}

Condensed Universal Reset
这是作者当前比较钟意的一种写法.保证了相对普遍浏览器样式的统一性.

* {
vertical-align: baselinebaseline;
font-weight: inherit;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: 0 none;
outline: 0;
padding: 0;
margin: 0;
}
Poor Man’s Reset
其实这也是我们常用的一类Css Reset.对字体的大小复位,以及图片链接的边框处理.
也经常在某些站点看到

html, body {
padding: 0;
margin: 0;
}
html {
font-size: 1em;
}
body {
font-size: 100%;
}
a img, :link img, :visited img {
border: 0;
}

Shaun Inman’s Global Reset
作者认为Shaun写这类的Css Reset是有某种目的性.
而且这类规则是针对的是某些重要的常用浏览器.
比如ie,firefox等

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre,
form, fieldset, input, p, blockquote, table, th, td, embed, object {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset, img, abbr {
border: 0;
}
address, caption, cite, code, dfn, em,
h1, h2, h3, h4, h5, h6, strong, th, var {
font-weight: normal;
font-style: normal;
}
ul {
list-style: none;
}
caption, th {
text-align: left;
}
h1, h2, h3, h4, h5, h6 {
font-size: 1.0em;
}
q:before, q:after {
content: ”;
}
a, ins {
text-decoration: none;
}

Yahoo CSS Reset
yahoo这帮家伙写的Reset个人觉得可以推荐

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,
fieldset,input,textarea,p,blockquote,th,td {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset,img {
border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-weight: normal;
font-style: normal;
}
ol,ul {
list-style: none;
}
caption,th {
text-align: left;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
font-size: 100%;
}
q:before,q:after {
content:”;
}
abbr,acronym { border: 0;
}
Erik Meyer’s CSS Reset
作者将Erik Meyer的代码重新整理了.但功能上还是一样的
这套Css Reset是业内是使用最多的

html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td,
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
vertical-align: baselinebaseline;
font-family: inherit;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
outline: 0;
padding: 0;
margin: 0;
border: 0;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
background: white;
line-height: 1;
color: black;
}
ol, ul {
list-style: none;
}
/* tables still need cellspacing=”0″ in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
font-weight: normal;
text-align: left;
}
/* remove possible quote marks (“) from <q> & <blockquote> */
blockquote:before, blockquote:after, q:before, q:after {
content: “”;
}
blockquote, q {
quotes: “” “”;
}

Condensed Meyer Reset
总的来说这是对Erik Meyer的Css Reset的修改与提升.

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6,
pre, form, fieldset, input, textarea, p, blockquote, th, td {
padding: 0;
margin: 0;
}
fieldset, img {
border: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
ol, ul {
list-style: none;
}
address, caption, cite, code, dfn, em, strong, th, var {
font-weight: normal;
font-style: normal;
}
caption, th {
text-align: left;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
font-size: 100%;
}
q:before, q:after {
content: ”;
}
abbr, acronym {
border: 0;
}

最后有份关于Css Reset的使用者调查

http://css-tricks.com/poll-results-what-css-reset-do-you-use/

此时在IE中到底是什么在影响着最终的显示，又是如何解析的呢？

可能的影响因素：字体大小（font-size），字体行高（line-height），高度（height），溢出（overflow）

我们对上面的代码逐一添加过滤属性（具体的过程有兴趣的朋友，可以私下里实验一下，“自己动手，丰衣足食”！）

在测试的过程中，你会发现IE6和IE7的解析也不尽相同，比如在给div设置了line-height:0; height:0; 的样式后，IE7中显示正常了，不再占据物理空间了，而IE6却依然我行我素，亦或是悲！

最终的测试结果，最简单的方法是，给div设置高度（height）和溢出（overflow）属性。

当然，大家也可以把自己的试验心得写下来。

我们可以让我们的博客或者网站根据当前的时间自动更换风格，比如我们制作两套css，一套上午用，一套下午用。这样我们可以设定12点以前使用上午的css，过了12点就自动换成下午的css。

实现起来也很简单，我用php的，所以只发php版本了。

< 12) echo “am.css”; else echo “pm.css”; ?>” />

看到了？实际上就是利用php的date函数和echo来控制输出css文件名，简单吧？

一. CSS学习重在方法!

学习任何东西都是一样，从小学、中学、大学，除了学习知识外就是去学习方法!

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

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

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

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

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

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

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

二. 掌握CSS的四个学习阶段

学CSS可以分成以下几个阶段：

阶段一：不去想浏览器的兼容性问题的情况下能做出页面，但页面里到处用TABLE的 模式DIV写出的页面。

阶段二：想到了兼容性问题，但无法提前预防，只会修补问题，大量使用HACK技术(我对HACK技术只是知道，但用的很少)

阶段三：可提前预防BUG，但样式表中大量应用了ID,CLASS，CSS译过来是重叠样式表，比如“DIV P SPAN”。这句代码是标明DIV子元素中P的子元素SPAN，这样写就可以定义SPAN的样式了，不用在SPAN中加入CLASS了。这也就是CSS的 优点所在，为什么不好好利用而一定要定义一个CLASS呢!

阶段四：这一阶段是最难的，良好的HTML语义结构、合理的CSS、可重复利用的样式。良好的语义有这方面的文章,合理的CSS，这两方面以后一定会写专题来研究 .

推荐本书：《css禅意花园》

一、看下面的样式：

在<head>和</head>之间加上如下的CSS语法控制：
<style type=”text/css”> //也可以直接就写<style>
<!–

a:link { text-decoration: none} //a:link 指正常的未被访问过的链接
a:visited { text-decoration: none } //a:visited 指已经访问过的链接
a:hover { text-decoration: none; } //a:hover 指鼠标放上去链接出现的情况
a:active { text-decoration: none } //a:active 指点击链接的瞬间出现的链接情况
–>
</style>
hover 是一个经常会被混淆的属性，一般大家都认为链接是三个属性：link,visited,active，而且一般的网页制作软件里也只有这三个设置，但是 hover其实也是一个非常重要的属性，它还可以在链接上加上背景色（background:#ccffcc;），其它的设置与上面三个一样，所以大家现在可以记住，链接上可以做四个属性设置，分别是：link,visited,hover,active

text-decoration是文字修饰效果的意思，none参数表示使有超级链接的文字不显示下划线。如果讲none替换成underline 就表示有下划线，换成overline则给超连文字加上划线，换成 line-through给超连文字加上删除线。还有一个是blink参数，顾名思义是闪烁效果，但是他要在NetScape浏览器上才能显示。

二、使粗体文字加上删除线。

粗体文字使用的代码是：B { text-decoration: line-through }

使粗体文字中所有的字母大写。使用代码： B { text-transform: uppercase }（这个在NS中才显示出来，IE没有相应效果显示）

产生既大写，又有颜色，又有删除线的效果 i love you!

以上的代码是：b { text-decoration: line-through; text-transform: uppercase; color: #66FFFF}

另外，用lowercase使所有字母小写显示，capitalize 使每个单词的首字母大写显示。

三、产生链接变色效果：

经过在对链接的几个属性进行颜色设置后，可以使具有link,active,visited属性的链接显示不同的颜色，但是却不会产生鼠标覆盖变色效果。
<style type=”text/css”>
<!–
a:link { text-decoration: none ; color: green } //正常链接文字显示绿色
a:visited { text-decoration: none ; color: red } //已经访问过的链接显示红色
a:active { text-decoration: none ; color: yellow } //点击瞬间的链接显示黄色
–>
</style>

要想产生鼠标放上去产生变色效果，就要用到另一个属性了,这就是 hover（上面提到过的）。

a:hover { text-decoration: none ; color: yellow；background:white; } 表示鼠标移动到链接文字上时，文字修饰风格为“无”，同时链接文字显示黄色，链接文字的底色显示为白色。

四、看一下下面链接设置的总体运用情况：
<style type=”text/css”>
<!–
a:link { text-decoration: none ; color: blue ; font-size: 9pt }
a:visited { text-decoration: none ; color: red;font-size: 10.5pt }
a:hover { text-decoration: underline; color: green ; font-size: 11pt;background:white; }
a:active { text-decoration: underline ; color: yellow;font-size: 10pt }
–>
</style>

上面这样设置的总体解释为：
1，链接文字没有下划线，蓝色（blue）显示，字为9pt大小；
2，访问过的链接没有下划线，文字变成红色（red），同时文字大小变成10.5pt；
3，鼠标放到链接上时出现下划线，颜色为绿色（green），字符大小11pt，同时文字上出现一个白色（white）的背景区域。
4，鼠标点击链接的瞬间文字再现下划线，颜色变成黄色（yellow），并且文字大小变成10pt；