CSS日常公用样式与一些解决方案

 

一、自己总结的公用样式解析

html, body, div, p, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, input, select, button, textarea, iframe, table, th, td { margin: 0; padding: 0; }

img { border: 0 none; vertical-align: top; }

ul, li { list-style-type: none; }

h1, h2, h3, h4, h5, h6 { font-size: 14px; }

body, input, select, button, textarea { font-size: 12px; font-family: Tahoma, Geneva, sans-serif; }

button { cursor: pointer; }

i, em, cite { font-style: normal; }

body { background: #fff; color: #363636; line-height: 1.2; }

a, a:link { color: #222; text-decoration: none; }

a:visited {  }

a:active, a:hover { text-decoration: underline; }

a:focus { outline: none; }

.fixed:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; }

.fixed { display: block; min-height: 1%; }

*html .fixed { height: 1%; }

.clear { diplay: block!important; float: none!important; clear: both; overflow: hidden; width: auto!important; height: 0!important; margin: 0 auto!important; padding: 0!important; font-size: 0; line-height: 0; }

.more { float: right; }

.more a { font-weight: normal; font-size: 12px; }

.fl, .fr { display: inline; float: left; }

.fr { float: right; }

这是我做网页制作近三年来经过参考和自己研究出来的公用样式，大体就是这样，样式会根据网页具体的效果进行微调。

注：在这里写这些注解就是为了让刚接触到CSS的朋友明白一些东西 不至于绕弯路，知道这些代码都是怎么回事的就可以跳到第三条了，可能写的有些啰嗦。呵呵！

第一行html, body, div, p, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, input, select, button, textarea, iframe, table, th, td 样式大家应该都明白这样是把原先的选择器自带的外填充和内填充去掉归0

也许有人还在用“ * ” 通配符，但是这样是有缺点的 会让代码变得冗余 尤其是子父级嵌套关系越深越麻烦，建议大家要尽量减少使用，在这里建议大家多使用我在第一行里写的通用样式，可能选择器还比较少，但是我日常用到的选择器就这么些，如果大家有用到 pre fieldset blockquote 这些选择器 或是其他的选择器 一样可以写到里面。

第二行里 img 图片标签的样式 大家是各有不同，目的都是一个让浏览器里默认图片是没有边框的，还有ie6里图片底部出现的空白间隔消失掉。有的爱用 display:block; border: none;

但是这样写的话，都会有这样或那样的缺点，display: block; 这样写的话 你要让图片左右居中于一个盒子内的时候 你怎么办？ margin: auto; 这样吗？但是你要让外面的盒子有一个实际的宽度，如果是换成 vertival-align: top; 或是 vertival-align: middle; 的话那么这个实际的宽度就不必写了，只用加一个 text-align: center;  图片也不用加外填充了。

还有就是有的酷友会奇怪我写的 border: 0 none; 这里要写 0 再加一个 none，这个问题我还是想说一下是因为我在写文本框 input 的时候，发现在不同的 windows 系统外观下，你光写border: none 或是 border: 0; 都不行，文本框的边框还是在的，所以就必须写 border: 0 none; 这个习惯也就留到了img 上，所以大家还是可以写成 border: none; 但是写 input 的时候，要边框没有的时候还是要写 border: 0 none;

第三行 ul, li 里就不用解释了吧，大家都明白怎么回事。

第四行h1, h2, h3, h4, h5, h6 还是根据要搭的页面标题字体大小来修改，或是把 h1 h2 h3 h4 这些选择器分开来写各自的字体大小。

第五行body, input, select, button, textarea 是因为我搭页面的时候发现ie6里的文本框和下拉菜单等... 里的字体大小不是正常的12号字体，所以在兼容性上不是很完美，所以我就写了字体的大小为12号，然后在 firfox 里这些标签的字体默认又是宋体，所以我就又写上了字体，然后 body 也要写字体大小和大小，所以就在 input 的前面加上了 body，所以后面就不用再写了。

第六行 button 这个按钮的鼠标触发属性是默认的箭头，在用户体验上不是特别好，所以我把鼠标触发的属性改成了小手。

第七行就是在写一些不是特别重要 或是装饰的标签时我就是用到这些选择器 由于他们都有文字的默认属性，所以我去掉了，在用到的时候不至于出问题。

第八行 body 写背景色 是因为有的 windows 系统外观会把浏览器背景色也改成别的色，所以为了不会问题，就加上背景白色了，然后再加上文字颜色，字体大小和字体我在前面已经写了。

第九行到第十一行 a:link 这些大家写的都差不多吧?

第十二行 点击链接时出现的虚线框消失，就是消除焦点。（描述不太专业，见谅！）

在下面我写了 .fixed 和 .clear 这两个清除浮动的样式

具体这两个我都用在什么地方呢？我画了两张示意图看了后 大家就会明白了！

.fixed 的例子

 

.clear 的例子

 

还有就是讲解一下 关于 .clear 里面很多属性我要写 !important 的问题

因为我们在写子级盒子浮动的时候 肯定会写到 float: left; margin或是 padding，还有 width 等等，我也在 .clear的属性里把尽可能会发生冲突的属性加了!important，浏览器就会把这些属性的优先级排到最前，并且ie6也是支持读取!important的，大家会想到，ie6浏览器只要读到相同的属性，以最后的属性为优先级，但是他是对于在同一样式内的，而不是同一样式内的属性他就不会以最后的属性为优先了 看下面这段代码

大家看完这两段代码后就会明白了！

.more 这个样式 搭页面的过程中 栏目或是标题栏肯定会有更多这个链接，所以我就在前面加了这个样式，在后面就减少了 float: right 这个属性，这个的意义不是很大。

.fl .fr 这两个我是在一些需要向左或是向右浮动的盒子上附加的，这样写灵活性很高，也可以省掉一部分css代码。

二、讲一些自己对ie6浏览器显示bug的一些兼容样式

我想现在大家都在用 jquery 或是其他一些的js框架吧？

我们在用到这些框架开发出的灯箱相册时（就是点击图片后 图片弹出 图片与网页之间有一层遮罩类的）。

有的灯箱相册代码写的不是很完善，例如：ie6下，当内容的高度不足以撑满整个页面时，再点击相册中的一张图片时，我们发现图片后面的遮罩层并没有把整个浏览器占满。

如下图：

 

 

这时候我们会想到要不要换一个代码来用，但是这个相册代码除了遮罩这个外其他都很完善，找不到其他的完善的相册时。我们怎么办？

下面就是我写的css 解决方案！浏览器分辨率目前测试最高的是1050px。

代码如下：

*html body { overflow-x: hidden; position: relative; height: 99%; margin-top: -1.5%; padding-top: 1%; }

*html { padding-top: 1.5%; }

接下来我来做一下解释

overflow-x: hidden; position: relative; margin-top: -1.5% 这三个属性是为了让高度为 99%的时候不在右侧出现滚动条，而padding-top: 1%; 这个是为了让在高分辨率显示器下右侧不出现滚动条

而 *html { padding-top: 1.5%; } 则是为了添补上面样式中写到的 margin-top: -1.5%; 这个负值。

大家可以在用jquery或是其他js框架的开发出来有缺陷的代码中测试一下这段代码

三、写css时和程序员之间的沟通

各位酷友在搭完页面后与程序员沟通时会有些小问题。

注：下面的建议里写的都是关于和asp.net程序员之样式命名的问题。

例如我们在写子级样式时，会这样写：.wraper form {}，这样写的时候，我们要考虑这个页面内有没有分页之类的代码了，因为asp.net程序员会在有分页的页面内加一个 form 控件 这样我们写在里面的form 就会被去掉，所以我们要把.wraper form {} 改成.wraper .formWraper {} 就可以，这样问题就会解决了

还有就是复选框和单选框的地方。

 

 

 

类似于这样的写法 在asp.net里 大部分程序员还是爱拿服务器控件，输出到前台页面后，就会变成

变成这样后，前台页面就会变乱，所以我们碰到类似的情况时还是要更改一下写法

还有一个就是 button {}

在asp.net 里也会用到服务器控件，输出到前台，就会就成  这样的话 我们的样式又无效了，所以要给这个按钮起一个样式名，而不能用选择器，例：.message_btn {}

 

 

 

 

差不多就这些问题。以后有了会继续更新的！

四、一些自己对大家的建议。

由于自己是自学的css样式，还有就是没有英语基础，所以在这里建议和我一样也没有什么英语基础的也在自学或是有一部分基础的酷友们在写样式的时候尽量手写，不要用软件自带的联想功能，当你没有这个软件的时候，你就会有些困难了，还有就是样式的名称尽量用英文，就算你不明白这个名字是什么意思，也可以先翻译一下，知道大概的意思，以后用的多了自然也就知道是什么意思了，对于以后学习其他的东西是有帮助的。

推荐刚刚学习和有了一部分基础的酷友们一本CSS的进阶书籍，精通CSS：高级Web标准解决方案 这本书的封面是青灰色的。大家可以上网看看！

呃.. 这就是目前自己写的一些心得吧，写的比较乱，也比较啰嗦，如果文章内有错误的地方，请大家提出，我会尽快修改，和大家一起进步，一起学习！

这是做网页制作到现在自己认为搭的最好的网站！还未上线

嫣然基金的静态网站 http://www.simleangelfoundation.org/index.html

新年到了，祝大家在新的一年里，在各自的领域里，取得更大的进步！

本文由 站酷网 - sblqtd 原创，转载请保留此信息，多谢合作。