文档中心

浏览器越来越多，不同的浏览器，不同的版本在页面的渲染上都各不相同。这让网页开发人员很头疼，为了能兼容各个浏览器，人们挖掘出了很多 CSS Hack。下面进行一下总结，如果还有其他的 CSS Hack 欢迎提供。
一) 针对 IE 的 Hack
大部分 CSS Hack 都是针对 IE 的，这是用于我们的 IE "坚强"所致，尤其是 IE6。
#test {
    color:red; /*所有浏览器*/
    +color:blue; /*所有 IE */
    _color:green; /*IE 6及以下*/
    _color /**/:pink; /*IE 5*/
}
由于 CSS 是后面的覆盖前面的。所以以上 CSS 分别对应非IE，IE7,8，IE6，IE5。以上 Hack 基本可以满足需求。
不过 IE 还有一些其他的 Hack。
\9 Hack:
#test {
    color:red; /*所有浏览器*/
    +color:blue\9; /*IE 5 以上*/
}
在属性后面加个 "\9" 就可以了。你可能会奇怪：其他的数字不行吗？我试了下，好像是不行，不过 9 前面可以加几个 0。我觉得这个不必深究，能用就行了。
* html Hack:
#test { /*所有浏览器*/
    color:red;
}
* html ......

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
以上结构可以组合使用，例如：左列标题lefttitle；底部导航footernav 书写原则是： 1.一律小写； 2.尽量用英文； 3.不加中杠和下划线； 4.尽量不缩写，除非一看就明白的单词 ......

從上到下
body{
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#000000);
} 二、从左上至右下渐变
body{
FILTER: Alpha( style=1,opacity=25,finishOpacity=100,
startX=50,finishX= 100,startY=50,finishY=100);
background-color: skyblue;
三、从左往右渐变
body{
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#ffffff,endColorStr=#000000);
}
四、从上往下渐变 style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=0,startColorStr=blue,endColorStr=#ffffff)

......

这本书不错，详细介绍了CSS的相关知识，对初学者和想进一步学习的人都有帮助。
相关笔记：
     行内样式>ID样式>类样式>标记样式
     font-weight:bold;
     font-size:30px;
     text-decoration:underline;
     <em>强调标签
    盒子模型：
        给出2个值,前者表示上下，后者为左右
        给出3个值，前者上，中间左右，后者为下
        给出4个值，上，右，下，左
    div 块级元素 block
    span 行内元素 inline
    border-style:solid;
    border-width
    border-color
    border:2px black solid;
    font-family:宋体;
    text-align:center;
   盒子定位：
   1.static 默认，按照标准流
   2.re ......

虽然我们一直建议大家不用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规则的执行顺序
　　&mi ......

1.直接加在对象上
　　<html>
　　　<head>
　　　　<title>title</title>
　　　</head>
　　　<body>
　　　　<span style="color:red">red</span>
　　　</body>
　　</html>
2.加到页面头部
　　<html>
　　　<head>
　　　　<title>title</title>
　　　　<style>span{color:red}</style>
　　　</head>
　　　<body>
　　　　<span>red</span>
　　　</body>
　　</html>
3.链接外部的样式表文件
　　<html>
　　　<head>
　　　　<title>title</title>
　　　　<link href="demo.css" rel="stylesheet" type="text/css">
　　　</head>
　　　<body>
　　　　<span>red</span>
　　　</body>
　　</html>
4.导入外部的样式文件
　　<html>
　　　<head>
　　　　<title>title</title>
　　　　<style>@import url (demo.css)</style>
　　　</head>
　　　<body>
　 ......

CSS Hack 总结

CSS命名规范

网页渐变背景 css 转

CSS设计彻底研究

Dreamweaver CS3中的CSS布局规则

Dreamweaver CS3中的CSS布局规则

在网页中加入CSS的方法