我在第九区 上发表了这个系列的笔记，并上传了原作电子书，今天有空，转一下过来。
第一章、基础知识
1.1设计代码的结构
设计代码时应该使用有意义的标记，比如，xHTML里包含很多有意义的元素，如h1、ul、strong、thead等等，应用使用所有意义合适的元素；当现有元素不足以描述页面内容时，可以用id或是class来赋予它们额外的意义(显然，目前用XML来创建自己的元素仍然是不现实的)。
一个id只能命名页面上的一个元素，而在整个站点上，id命名仍应该保持一致;
class适合用来标识同一类型或相似的条目，比如，一个新闻页面中每条新闻的日期，都可以统一分配class为date;
命名id和class时，应该尽量保持名称有意义且和表现方式无关。比如，一开始你的导航栏出现在右边，于是就给它分配id:rightHandNav，可是不久之后，想把它的位置改到左边，名称就不合适了，所以，应该把它命名为subHandNav更加合理。同样道理，即使你希望所有错误消息以红色显示，也应该将它命名为error，而不是red
传统的HTML中，id和class的大小写是不区分的，但是在XHTML中，则是区分大小写的，所以，我们应该养成习惯保持大小写统一。
应该删除不必要的类，以简化代码，使页面整洁。如果你的类很多 ......
【简 介】
为方便站点哀悼,特提供css滤镜代码,以表哀悼.以下为全站CSS代码
为方便站点哀悼,特提供css滤镜代码,以表哀悼.以下为全站CSS代码.
html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }
使用方法:这段代码可以变网页为黑白,将代码加到CSS最顶端就可以实现素装.建议全国站长动起来.为在地震中遇难的同胞哀悼.
如果网站没有使用CSS,可以在网页/模板的HTML代码和 之间插入:
有一些站长的网站可能使用这个css 不能生效,是因为网站没有使用最新的网页标准协议
请将网页最头部的替换为以上代码.
有一些网站FLASH动画的颜色不能被CSS滤镜控制,可以在FLASH代码的和之间插入:
最简单的把页面变成灰色的代码是在head 之间加
一般的discuz论坛在 你的控制css 文件下修改
/images/header/header.css 这个文件,点源码即可看到.
或者/templates/default/header.htm,也可以直接到模板文件下修改header.htm,加入上面的代码.
动网论坛修改:
DVBBS8.2之前的在 /Css/cndw/pub_cndw.css 中修改
DVBBS8.2.X在/skins/default.css中修改
另在哀悼日或遇难的新闻,所有专题和主题 图片上不能使用红色标题,尽量用灰色. ......
我在www.c09.com 发表了这个笔记并上传了原著的PDF，今天有空，转到BLOG上来。
第四章、对应链接样式
4.1 简单的链接样式[code]
/*所有链接红色*/
a{color:red;}
/*未访问链接蓝色，已访问红色*/
a:link{color:blue;}
a:visited{color:green}
/*鼠标悬停时链接红色*/
a:hover,active{color:red;}
/*平时不显示下划线，鼠标悬停时显示下划线*/
a:link,avisited{text-decoration:none;}
a:hover,a:active{text-decoration:underline}
[/code]4.2 让下划线更有趣[code]
/*用加粗效果代替下划线*/
a:link,avisited{
text-decoration:none;
font-weight:bold;
}
/*鼠标悬停时显示下划线*/
a:hover,avisited{
text-decoration:none;
border-bottom:1px dotted #000;
}
/*改变下划线式样*/
a:hover,a:active{
border-bottom-style:solid;
}
/*用图片绘制下划线*/
a:link,a:visited{
color:#666;
text-decoration:none;
background:url(images/underline1.gif) repeat-x left bottom;
}
/*鼠标悬停时显示动画背景*/
a:hover,a: ......
我在www.c09.com 发表了这个笔记并上传了原著的PDF，今天有空，转到BLOG上来。
第七章 布局
所有CSS布局技术都依赖于三个基本概念：定位、浮动和空白边操纵
7.1 让设计居中[code]
<body>
<div id='wrapper'>
</div>
</body>
/*最明了的居中方案，可惜IE6不支持*/
#wrapper{
width:720px;
margin:0 auto;
}
/*利用Ie对text-align的理解BUG解决IE6支持问题*/
body{
text-algin:center;
min-width:760px;/*如果窗口宽度小于760px就不再自适应缩小*/
}
#wrapper{
width:720px;
margin:0 auto;
text-algin:left;
}
/*也可以采用这种方法,只需定义wrapper一个元素*/
#wrapper{
width:720px;
position:relative;
left:50%;
margin-left:-360px;
}
[/code]7.2 固定宽度的布局[code]
/*这是一个非常常见的两列布局*/
<div id='wrapper'>
<div id='branding'>
...
</div>
<div id='content'>
...
</div>
<div id='mainNav'> ......
我在www.c09.com 发表了这个笔记并上传了原著的PDF，今天有空，转到BLOG上来。
招数和过滤器
IE的有条件注释：仅用这一项，就可以解决IE的兼容问题，至于其它浏览器的不同版本，我们完全可以忽略不计。[code]
/*有条件注释仅在IE中支持且IE5以后的所有版本均支持*/
<!--[if IE]
<style type='text/css'>
@import("ie.css");
</style>
-->
/*指定IE版本*/
<!--[if IE 5]
<style type='text/css'>
@import("ie50.css");
</style>
-->
/*指定IE5.5和更高版本*/
<!--[if gte IE 5.5]
<style type='text/css'>
@import("ie55up.css");
</style>
-->
/*指定IE5.5和更低版本*/
<!--[if lt IE 6]
<style type='text/css'>
@import("ie.css");
</style>
-->
[/code]子选择器、属性选择器和* HTML招数招数:[code]
/*由于IE6还不支持子选择器和属性选择器，所以可以通过它们让设定在IE6中无效*/
html>body{
background-image:url(bg.png);
}
div[id='content']{
background-image:url(bg.png);
}
/*星号HTML将设定限于IE6以下选择器，但我� ......
我在www.c09.com 发表了这个笔记并上传了原著的PDF，今天有空，转到BLOG上来。
第九章、bug和bug修复
9.1 常见CSS问题[code]
/*以下代码视图让所有.intro的段落显示橙色的背景*/
#content p{
background-color:transparent;
}
.intro{
background-color:#FEECA9;
}
/*以上代码失败的原因是.intro的优先级小于#content，解决方式如下*/
#content .intro{
background-color:#FEECA9;
}
/*空白边叠加问题*/
<div id='box'>
<p>This paragraph has a 20px margin.</p>
</div>
/*对以上代码设置CSS试图留出足够的空白边*/
#box{
margin:10px;
background-color:#d5d5d5;
}
p{
margin:20px;
background-color:#6699ff;
}
/*失败的原因是垂直方向的空白边距离叠加了，而且p的垂直空白边突破了box的空白边，使之不可见，解决方法是给box加一个填充值，使之不被叠加*/
#box{
margin:10px;
padding:1px;
background-color:#d5d5d5;
}
p{
margin:20px; ......
最新文章 : css