CSS开发手册
2008-02-23 08:30:12来源：互联网 阅读 ()
基础篇：
一、三种样式选择器
属性选择器 p {color:red;}
类选择器 .p {color:red;}
ID选择器 #p {color:red;}
二、transparent
Background:transparent; 防止定义背景被覆盖
三、Netscape4.X（IE/WINDOWS4.0以前的版本）下错误的透明背景理解
Background:inhrit; 在netscape4.x下透明背景将被理解为黑绿
四、字体默认选择：
Body {font-family:”lucida Grande”,Verdana,Lucida,Arial,Helvetica,sans-serif; }
按顺序调用不同平台的默认字体
五、如何解决旧浏览器不支持CSS的情况
使用群选择器 例如：p,td,ul,ol,li,dl,dt,dd {font-size:small;}
六、使用netscape4友好规则
Body {font-family:Verdana,sans-serif;}
p,td,ul,ol,li,dl,dt,dd {font-size:small;}
七、方法重载细节规则：
Body {font-family:Verdana,sans-serif;}
p,td,ul,ol,li,dl,dt,dd {font-size:small;}
p {font-family:times,”Times New Roman”,serif;}
八、内容（派生）选择器
Li strong {font-style:italic; font-weight:normal }
例如：strong {color:red;} h2{color:red;} strong h2 {color:blue;}
例如：#sidebar {color:red} #sidebar p {color:blue;}
例如：.fancy {color:red;} .fancy p {color:blue;} / li.fancy {color:black;}
CSS嵌入
一、 外联样式表：
<link rel=”StyleSheet” href=”/css/basic.css” type=”text/css” media=”all”>
<style type=”text/css” media=”all>
@import url(“/Styles/mystylesheet.css”);
</style>
注意：使用@import用来对IE4.0以下浏览器进行屏蔽
二、 嵌入式样式表：
<head>
<style type=”text/css” >
<!- -
Body {color:red;}
- ->
</style>
</head>
注意：为了IE3下访问站点，我们可以使用嵌入式样式表（建议在页面中使用内联成功后，剪切到外联样式表中）
CSS混合布局应用
www.i3forum.com
一、 Margin（框距）padding（边框距）
margin属性设置顺序：上左下右
padding属性设置顺序：上左下右
margin:25px 0 25px 0;
简写：margin:25px 0;
二、Display显示属性设置
（1）、Display属性none (隐藏)
.alt {display:none;}
<span class=”alt”>Content List Part</span>
（2）、Display属性block (块/区域)
Img {display:block;}
<img href=”1.gif”></img>
块级元素：存在自身的“盒”中，后面跟随一个默认的回车
内联元素：是流的一部分，后面不跟随回车
（3）、Display属性inline
区别block元素，使用inline状态时，显示方式按照内联元素显示
三、 动态链接属性设置：
a:link {
font-weight : bold;
text-decoration : none;
color: #c30;
background: transparent;
}
a:visited {
font-weight : bold;
text-decoration : none;
color: #c30;
background: transparent;
}
a:hover {
font-weight : bold;
text-decoration : underline;
color: #f60;
background: transparent;
}
a:active {
font-weight : bold;
text-decoration : none;
color: #f90;
background: transparent;
}
（1） 文字修饰属性（text-decoration）
Text-decoration:underline overline none;
Underline:链接时有下划线
Overline:连接时有上划线
None:连接时无下划线
（2） 动态连接属性顺序
（LVHA）－ LoVe－HA！
（3） IE/WINDOWS的伪装欺骗性
应避免使用a:active属性：出现bug 连接会出现冻结现象
四、 如何设置行高（line-height）
Line-height:1.5;
五、 如何设置文章位置（text-align）
可选择属性（left middle right）
IE6/WINDOWS的BUG会错误使文档居中
六、 对于字体的完整CSS应用
Font:13px/1.5 Georigia,”New Centeury Schoolbook”,Times,serif;
七、 设置页面分界限
（1） vertical-align:middle; 等于 <td valign=”middle”>设置垂直对齐
（2） background:none 等于 background:url(images/1.gif) repeat;
八、 设置显示器设备
<style type=”text/css” media=”screen”> media属性
使用HTML4.01转换到XHTML1.0过渡式transitional
（早期的基于Gecko核心的浏览器如：netscpae6.0 Mozilla1.0）
一、 在Gecko核心浏览器清除CSS间隙
规则如下：
Img {display:block;} 使用块级元素清楚间隙
.inline {display:inline;} 使用内联元素显示方式
页面如下：
<img class=”inline” alt=”/” />
也可用
Td img {display:block;}
二、在Gecko核心img默认作为内联函数处理
在内联元素下方默认留有空白，这是为了给所包含的块下行字母流出的空间
盒模型、Bug和工作区
CSS四个区域：内容、边框距、边界和边距
在使用CSS设置表格之前：
{width:400px; height:75px;}
错误的理解：表格面积＝400px; height:75px;
实际上CSS设置的表格：
Width:400px height:75px 内容为 Content
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
下一篇：对“重构”适用范围的思考
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
