网页制作中CSS样式常用技巧

· ul 标签在 Mozilla 中默认是有 padding 值的，而在 IE 中只有 margin 有值。

· 同一个的 class 选择符可以在一个文档中重复出现，而 id 选择符却只能出现一次；对一个标签同时使用 class和 id 进行 CSS 定义，如果定义有重复，id 选择符做的定义有效。

· 初学可能会碰到这样一个情况，同样一个标签的属性在 IE 设置成 A 显示是正常的，而在 Mozilla 里必须要设成 B 才能正常显示，或者两个倒过来。
临时解决方法：选择符 {属性名:B !important ; 属性名:A;} //IE7 下无效

· 如果一组要嵌套的标签之间需要些间距的话，那就留给位于里面的标签的 margin 属性吧，而不要去定义位于外面的标签的 padding

· li 标签前面的图标推荐使用 background-image 而不是 list-style-image

· IE 分不清继承关系和父子关系的差别，全部都是继承关系。

· 在给你的标签疯狂加选择符的时候，别忘了在 CSS 里给选择符加上注释。 等你以后修改你的 CSS 的时候就知道为什么要这么做了。

· 如果你给一个标签设置了一个深色调的背景图片和亮色调的文字效果。建议这个时候给你的标签再设置一个深色调的背景颜色。

· 定义链接的四种状态要注意先后顺序： Link Visited Hover Active

· 与内容无关的图片请使用 background

· 定义颜色可以缩写 #8899FF = #89F

· table 在某些方面比其它标签表现的要好的多。请在需要列对齐的地方用它。

· <script> 没有 language 这个属性，应该写成这样：<script type="text/javascript">

· 标题是标题，标题的文字是标题的文字。有时候标题不一定需要显示文字，所以：<h1>标题内容</h1> 改成 <h1><span>标题内容</span></h1>

· 完美的单象素外框线表格（在IE5.0　IE6.0及 FF 中均可通过测试，其它未测试）table {border-collapse:collapse;} td {border:#000 solid 1px;}

· margin 取负值可以在标签使用绝对定位的时候起到相对定位的作用，在页面居中显示时，使用绝对定位的层不适合使用 left:XXpx 这个属性。 把这个层放到一个要相对定位的标签旁，然后使用 margin 的负值是个好方法。

· 绝对定位时使用 margin 值定位可以达到相对于本身所在位置的定，这与 top，left 等属性相对与窗口边缘的定位不同。绝对定位的优势在于可以让其它元素忽略它的存在。

几个常用到的 CSS 样式

· 1.中文字两端对齐：text-align:justify; text-justify:inter-ideograph;

· 2.固定宽度汉字截断：overflow:hidden;text-overflow:ellipsis;white-space:nowrap;(不过只能处理文字在一行上的截断，不能处理多行。)（IE5以上）

· 3.固定宽度汉字（词）折行：table-layout:fixed; word-break:break-all;（IE5以上）

· 4.<acronym style="cursor: help" title="输入要提示的文字">文字</acronym> 用鼠标放在前面的文字上看效果。这个效果在国外的很多网站都可以看到，而国内的少又少。

· 5.图片设为半透明：.halfalpha { background-color: #000000; filter: Alpha(Opacity=50)} 在 IE6 及 IE5 测试通过，FF未通过。

· 6.FLASH透明： 选中 swf，打开原代码窗口，在 </object> 前输入 <param name="wmode" value="transparent"> 我们在做网页时常用到把鼠标放在图片上会出现图片变亮的效果，可以用图片替换的技巧，也可以用如下的滤镜，代码如下：

.pictures img { filter: alpha(opacity=45); }
.pictures a:hover img { filter: alpha(opacity=90); }

· 如果文字过长,则将过长的部分变成省略号显示：IE5、FF 无效，但可以隐藏，IE6 有效
<div style="width: 120px; height: 50px; border: 1px solid blue; overflow: hidden; text-overflow:ellipsis">
<NOBR>就是比如有一行文字，很长，表格内一行显示不下.</NOBR>

· title 换行用的符号或在 IE 中可能由于注释带来的文字重复问题时可以把注释改为：<!--[if !IE]>
Put your commentary in here...
<![endif]-->

· 如何用 CSS 调用外部字体语法：@font-face { font-family : name; src: url ( url ); sRules }取值：
name :　 字体名称。任何可能的 font-family 属性的值
url ( url ) :　 使用绝对或相对 url 地址指定OpenType字体文件
sRules :　 样式表定义

图片自动适应大小是一个非常常用的功能，在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制。

代码：

.img {
max-width:600px;
width:600px;
width:e­xpression(document.body.clientWidth>600?"600px":"auto");
overflow:hidden;
}

◎ max-width:600px; 在IE7、FF等其他非IE浏览器下最大宽度为600px。但在IE6中无效。
◎ width:600px; 在所有浏览器中图片的大小为600px;
◎ 当图片大小大于600px，自动缩小为600px。在IE6中有效。
◎ overflow:hidden; 超出的部分隐藏，避免控制图片大小失败而引起的撑开变形。
 

发表评论

您的IP：18.97.14.82，来自：