CSS开发手册 撰写人:nilxin
基础篇:
一、三种样式选择器
属性选择器 p {color:red;}
类选择器 .p {color:red;}
ID选择器 #p {color:red;}
二、transparent
Background:transparent; 防止定义背景被覆盖
三、Netscape4.X(IE/WINDOWS4.0以前的版本)下错误的透明背景理解
Background:inhrit; 在netscape4.x下透明背景将被理解为黑绿
四、字体默认选择:
Body { }
按顺序调用不同平台的默认字体
五、如何解决旧浏览器不支持CSS的情况
使用群选择器 例如:p,td,ul,ol,li,dl,dt,dd {font-size:small;}
六、使用netscape4友好规则
Body {}
p,td,ul,ol,li,dl,dt,dd {font-size:small;}
七、方法重载细节规则:
Body {}
p,td,ul,ol,li,dl,dt,dd {font-size:small;}
p {}
八、内容(派生)选择器
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>
二、嵌入式样式表:
<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”>
<
<place w:st="on"></place><city w:st="on"></city>parma name=”movie” value=”movie.swf”>
</object>
Flash空白故障(IE/WIN 5,5.5,6 Version)
解决办法:使用JavaScript的doucuemnt来欺骗效验系统
<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<chmetcnv w:st="on" unitname="”" sourcevalue="15" hasspace="False" negative="False" numbertype="1" tcsc="0"></chmetcnv>15”><a href=”/daily/1.html”></a></p>
</noscript>
Tabindex属性提供连接到属性的快捷方法
使用Tab换档键的屏幕阅读器,可迅速查询相关内容
区域显示和隐藏效果
解决办法:
http://www.zeldman.com/j/nu.js
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 (‘outside<chmetcnv w:st="on" unitname="’" sourcevalue="2" hasspace="False" negative="False" numbertype="1" tcsc="0"></chmetcnv>2’) ;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=”outside<chmetcnv w:st="on" unitname="”" sourcevalue="2" hasspace="False" negative="False" numbertype="1" tcsc="0"></chmetcnv>2” style=”display:none;”>
<dt>Relevant Externals:</dt>
我们把规则写入CSS外联表中
#outside2 {
Display:block;
}
如果你需要一个元素在页面中是不可见的但仍需其占据空间
解决办法:visibility:hidden;
动态菜单(下拉和展开)
不支持Javascritp脚本的浏览器,如何实现正常浏览
解决办法:在<head></head>之间插入
<script type=”text/javascritp”>
<!-- //
If (!doucument.getElementById) {
}
当浏览器不支持Javascript时,window.location将跳转到一个提示页面或者是一个不需要Javascript脚本的纯网页
转帖自:http://blog.csdn.net/nilxin/archive/2005/09/04/470917.aspx
greenerycn意见:非常好的一篇文章,补充了好多我不知道的东西.赞!
分享到:
相关推荐
CSS实例教程.chm css开发手册.chm CSS实例教程.chm css开发手册.chm
CSS开发手册(含有多个版本)、HTML开发手册帮助文档。
CSS完全开发手册,绝对物超所值 绝对完整版
html开发的css开发手册样式表,里面有所有的样式
php css mysqL javascript html css开发手册
CSS2.0手册HTML版本,纯HTML文件,下载下来可以直接运行,或者放到自己的web网站当做在线手册。
CSS参考手册CSS参考手册CSS参考手册CSS参考手册CSS参考手册CSS参考手册CSS参考手册CSS参考手册CSS参考手册CSS参考手册CSS参考手册CSS参考手册CSS参考手册CSS参考手册
css参考手册v4.2.4
CSS 参考手册.rar CSS 参考手册.rar CSS 参考手册.rar
css与html开发者手册,较全面的涵盖了前端页面开发需要的技术与方法,通过该api帮助文档,可以快速的了解自己需要的方法。
css3参考手册,走过路过不要错过哈。css3参考手册 css3参考手册
web前端开发参考手册系列之CSS参考手册 版本:v1.2.2 最后更新时间:2011.5.21 编著:飘零雾雨 什么是层叠样式表: CSS是Cascading Style Sheet(层叠样式表)的缩写。是用于(增强)控制网页样式并允许将样式信息...
CSS网页开发手册CSS网页开发手册CSS网页开发手册CSS网页开发手册CSS网页开发手册CSS网页开发手册CSS网页开发手册CSS网页开发手册
div+css手册,比较不错呀!
html手册+样式表手册,页面开发人员手册。
绝非苏沈小雨版的CSS2.0手册,前端开发必备。 列举手册的几个特征: 内容包括CSS2.1和大部分CSS3 所有手册内容都写有对IE6, IE7, IE8, IE9, Firefox, Chrome, Safari, Opera支持程度 每个属性及其它相关内容都...
web前端开发参考CSS参考手册 不会的时候查一下 方便哦
css开发参考手册是在网页开发中的很有用的参考手册。