基础篇
一、三种样式选择器
属性选择器 p {color:red;}
类选择器 .p {color:red;}
id选择器 #p {color:red;} =v=
ViD2tXb
~ [ 本 资 料 来 源 于 贵 州 学 习 网 网页设计CSS教程 http://Www.gzU521.com ] =v=
ViD2tXb
~
二、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混合布局应用
一、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
那么整个盒的面积为：content＋padding*2+border*2
盒模式失效及解决办法：（ie4到ie5.5/windows）
正确理解盒模式的浏览器
（ie6/win,ie5/mac,netscpae6+,mozilla,chimera,kmeleon,opera5+）
float漂浮属性用来使用在两在不同id选择器中相连
{float:left;}
对于使用padding的表格将使用以下解决方法：
oprea友好规则（box盒状模型）
解决办法：
#nav
{
width:151px;/* false value for ie4-5.x/win */
voice-family:"\"}\"";
voice-family:inherit;
width:100px; /* actual value for conformant browsers */
}
html>body #nav {
width:100px;/* be nice to opera */
}
ie上的空白bug
解决方法：缩进代码，<td><a href="#foo"><img src="1.gif" alt="/" /></a></td>
ie6/windows上的漂浮bug
解决办法：使用
Javascript id名称：content
if (document.all && window.attachevent) windows.attachevent ("onload",fixwinie);
fuction fixwinie() {
if (doucument.all.cotent.offsetheight) {
doucument.all.content.style.display="block";
}
}
嵌入flash的bug：
解决办法：在xhtml中嵌入以下代码：
<object type:"application/x-shockwave-flash" data="movie.swf"
width="400px" height="300px">
<
parma name="movie" value="movie.swf">
</object>
flash空白故障（ie/win 5,5.5,6 version）
<script type="text/javascript">
//[cdata[
if (navigator.mimetypes && navigator.mimetypes["application/x-shockwave-flash"]){
doucument.write ('<object src="/media/yourflashmovie.swf"……</object>);
}
关键字fahrner方法：（ie5.x/winodws 提供伪关键字号）
解决办法：
p {
font-size:x-small;
/* flase value for winie4/5 */
voice-family:"\"}\"";
/* trick winie4/5 into thinking the rule is over */
voice-familt:inherit;
/* recover from trick */
font-size:small;
/* intended value for better browsers */
}
html>p {
font-size:small;
/* be nice to opera */
}
区别alt属性与title属性
alt:注释文档不显示
title:显示文档不注释
提高可访问性（wai与508条款）
bobby的可访问性测试
能帮助你使网页适应wai或508条款
为非鼠标用户提供一个选择
解决办法：使用javascript
<form action="fooaction">
<input type="button" onclick="setactivestylesheet('default'); return false; onkeypress="setactivestylesheet'default');return false; />
onkeypress对于非鼠标用户就相当于onclick
对于不能使用javascript的用户
<noscript>
<p class="vs
15"><a href="/daily/1.html"></a></p>
</noscript>
tabindex属性提供连接到属性的快捷方法
使用tab换档键的屏幕阅读器，可迅速查询相关内容
区域显示和隐藏效果
解决办法：
function toggle (targeted ) {
if (doucument.getelementbyid ) {
targeted = doucument.getelementbyid (targeted);
if (target.style.display = "";
} else {
target.style.display = "none";
}
xhtml部分：
<p><a href="/" onclick="toggle ('outside2') ;return false;" onmouseover="changeimages
('ch','/i/p/cho.gif ');return ture;
title="hide or show relevant externals (below)."> toggle externals </a></p>
定义css规则：
<dl id="outside2" style="display:none;">
<dt>relevant externals:</dt>
<dd><a href=http://www.gzu521.com titile="description" >site names</a></dd>
我们把规则写入css外联表中
#outside2 {
display:block;
}
如果你需要一个元素在页面中是不可见的但仍需其占据空间
解决办法：visibility:hidden;
动态菜单（下拉和展开）
不支持javascritp脚本的浏览器，如何实现正常浏览
解决办法：在<head></head>之间插入
<script type="text/javascritp">
<!-- //
if (!doucument.getelementbyid) {
window.location = http://www.somesite.com/somepage/
}
当浏览器不支持javascript时，window.location将跳转到一个提示页面或者是一个不需要javascript脚本的纯网页
页面打开中,请稍候...
您的位置：
