色彩斑斓: 2007/03

整理了一下链接

此鱼比较懒，几个月都没有关注过那个Links，今天发现好多停止更新，或极少更新，甚至打不开的Blog，所以整理了一下，如果我弄错了，可以留言提醒我。

以后基本上不想添加链接了，也没什么意义。交换链接就像交易，之前不认识，之后更是没有关系。

发现那些链接里经常光顾的一个也没有。

Google reader快捷捷列表

在Google reader中按下"？"号试试。会列出Google reader中所有的快捷键。这样忘记快捷键的时候不用再到Help里查找了吧。

Gmail中新发现的一个快捷键，在Gmail中"#"号或者"Shift＋3"可以删除一封邮件。另附官方Gmail快捷键列表

via googlesystem

本站域名coloor.net

任何时候都可以用此域名访问本站。

http://www.coloor.net

色彩斑斓。

咖啡鱼。

点名游戏

从去年就开始在Blog中流行的游戏没想到今天才被点到，期待了好久，郑重感谢一下一楠，你有空了请你吃饭。^-^

点名链接

一楠 http://yinanyaxia.blogspot.com/2007/03/blog-post_18.html

点名规则：

1.被点到名字的人要在自己的博客里写下自己的答案，然后再在后面加上一个问题，组成更多的问题，传给其他8个人，列出其他8个需要回答问题的人的名字，还要到这8个人的博客里留言通知对方——你被点名了，被点名者不得拒绝回答问题，完成游戏的人将会永远得到大家的祝福。

2.这8个人要在自己的博客里注明是从哪里接到的，并且再想一个问题传给其他8个人，让游戏继续下去，不得回传。被点到名字的人将会得到大家的祝福，并且所有美好的愿望都会在不久的将来实现。

一楠的问题

1,讲出你对google的认识？一楠亚夏http://yinanyaxia.blogspot.com

Google就是那种懂得爱别人，又不向别人索取爱的美女。有时候还带点可爱，长不大。

2你最邪恶的念头是什么?　PSYCHO

应该是某一个学期，天天翘课，老师不点名，考试全Pass。

3.你最害怕失去的是什么?　不会游泳的鱼

最害怕失去我爱的丫头，以及奶奶。

4.你最感动的一首歌是哪首？keledec

仔细想……，嗯，应该没有。没有感动，只有更感动。我最喜欢的歌手是Tamas Wells，极力向大家推荐哦，绝对不同的感觉，他的两张专辑如果下不到，可以向我索取。A mark on the pane和A plea en vendredi。先推荐一首Valder Fields。

5，你的薪水是多少？嘻嘻。小然（不得拒绝回答哦:)）

正在努力想像之中…………，期待不要跟"小胡"一伍。一定要多赚点，嘿嘿。把丫头养得胖胖的。

下面轮到我的问题了，除了上面的问题外，我添加一个。

6.你有多爱自己的女朋友（或男朋友），试举一例。咖啡鱼

下面的朋友请回答我的问题：

通过CSS应用背景图像

因为喜欢新的Office2007的界面，所以很想使用一下，想来想去，觉得写篇Blog过过瘾比较合适，嘿嘿。比较遗憾的是无论是Word2007还是Windows live writer都不支持Blogger的标签，害得我每次发布了还要到Blogger去添加标签。背景图像是CSS中最重要的应用之一。

可以这样说，如果没有背景图像，就不会产生网页设计师这种职业。我们可能遇到过好多非常漂亮的Blog，它们漂亮的原因皆因运用了大量的背景图片。用CSS应用背景图像是非常简单的。

CSS2中暂时不支持对同一标签应用多个背景图像，但在下一代CSS3中将支持多个背景图像。鉴于此，有时候我们不得不添加一些无语义的标签（大多时候添加空DIV），来为同一模块添加多个背景图像。
语法：background : background-color background-image background-repeat background-attachment background-position
现在并不需要记住语法，我们可以在例子中理解。例如我们要给网页的主体应用一个背景图片，我们可能会写下这样的代码：

Body {background:#FFFFFF url(图片地址) repeat-y fixed left top;}

这条语句的意思是页面的背景颜色为#FFFFFF，背景为"图片地址"，在Y方向上平铺，背景图像固定，对准左上角。可能我们不会应用到背景所有的属性，不需要的可以省略，但要遵从一定的顺序。

以前写过修改页首图片的教程，现在我们看一下Blogger头部的CSS，以及如何修改页首图片。不同的模板CSS可能不一样，请酌情修改，下面是我的模板的CSS：

#header {
width: 96%;
height: 200px;
background-color:
$bodyBgColor;
background: url(http://vvvfly.googlepages.com/f.jpg)
center;
margin: 0 auto;
color: $headerTextColor;
padding: 0;
border-left: 3px solid $borderColor;
border-right: 3px solid
$borderColor;
border-top: 3px solid $borderColor;
}

根据以前我们学过的知识，我们可以知道，这是一个ID为Header的类，应用背景图像的一句为background:
url(http://vvvfly.googlepages.com/f.jpg) center; 这一句很简单，就是引用了http://vvvfly.googlepages.com/f.jpg这张图片，center让它居中显示，没有设定Repeat，浏览器默认水平和垂直的重复显示这个图像，如果你的显示器超过19寸，就可以看到平铺的图片。

对链接应用背景图像

背景图像在网页设计中的应用是非常广泛的，下面再举一个我们司空见惯的例子。我随意找了一个Blog（http://iyubao.blogspot.com/），截取了下面这张图片，这是一组链接，我们可以看到每个链接的左边有一张小小的图片（http://online.sccnn.com/icon/450/arrow_065.gif）。

它是怎么实现的呢？我们通过CSS把内容向右偏移一下为图片留出空间，然后应用背景图像，并让图像对准左边就可以了。在上面的图片中，它可能是这样写的：

.footer-box li {padding-left:20px;
background: url(http://online.sccnn.com/icon/450/arrow_065.gif)
no-repeat left center; }

当然，作者可能对链接还应用了其它样式，或许所写的代码与此有一些出入，但在此我们只介绍与我们所讲的内容有关的样式内容。看了上面的例子，你是不是可以让你的Blog的链接更漂亮一些呢？

CSS背景图像另外比较常用的就是建立圆角框等。

Word 2007发布到Blogger测试

今天把Office2007下载下来了，以前测试版的时候装过，界面焕然一新，看起来很舒服。也算革命性的一个版本了吧。

Word包含了发布到Blog功能，不过好像不能像Windows live writer那样下载博客的样式表。

添加句代码看看会不会被解释

结果：代码不会被解释。发布速度倒是比Windows live writer反应快。

绿色在线视频下载软件

介绍一下一款非常小巧，但功能却十分强大的的绿色软件，压缩包里包含一个FLV视频播放器和一个FLV视频探测器，还有使用介绍，总共才四百多K，解压即可使用。

现在的播客网站数不胜数，在线播放可能太慢，或者非常喜欢想保存下来，那么你一定要试试它。

几乎没有不能下载的视频。佩服。

下载地址

官方网站

请见谅

有些朋友可能觉得我不近人情，对读者太冷淡。实是时间所迫。
我是学电子专业的，这个学期有七门专业课，其中的四科是非常难的，努力学也像天书一样难懂。另外还有五科其它的科目，除去这些时间之后，几乎没什么空闲时间了。这个学期还要准备六级考试。考研或就业的压力也已隐隐的起作用。平时的作业都几乎没时间来做，对比起来我花在Blog上的时间已经很多了。

每天回到寝室最想的就是立即躺下睡觉，每天都很累。如果有怠慢之处请见谅。

Blog可以给我精神享受，但却不能填饱我的肚子，这是现实。

咖啡鱼版CSS教程电子书（更新）

晓月也为此教程制作了电子书，在此表示感谢，但是竟有2.35M，而且Box下载速度极慢，要以B来计算，我下载到中途就不能下载了。所以自己制作了一本电子书，只有23K，把它放在了Google pages上。

下载地址

晓月那有CSS中文手册的下载地址，可以去下载哦。再次感谢！！

晓月重新做了电子书，现在比较小了，而且包含了图片，我做的直接引用了Blogger里的图片，所以推荐下载晓月做的，感谢。

下载地址

3月19日更新：前几天发现下载后没有内容，所以今天又重新上传到BOX上。下载地址。

咖啡鱼版CSS教程十步学会CSS

本教程并没有像普通的教程一样着重介绍各种属性，相反基本上一点都没提及，因为用到属性的时候我们可以查询CSS 2 中文手册（可很容易的从网上下载）。本教程着重介绍了CSS中的各种模型和概念，它们是CSS的灵魂。适合入门者，大虾可略过，欢迎批评指正。

欢迎复制传播或制成电子书。

CSS教程系列十——浮动和清理

这是基本概念的最后一篇，终于写完了。:) 没办法，我这人急性子。

1.浮动

浮动模型是在布局中用到的最重要的概念之一，以前介绍的把Blogger变成三栏的布局中就用到了浮动。我们通过定义float属性来让元素浮动，浮动的元素脱离了文档流，就像上一节讲的绝对定位的元素一样，普通流中的框表现的就像浮动框不存在一样，我们可以形象的把它想像作它在空间中“飘浮”，周围环绕着一些内容。因此，一个向左浮动的元素有文本在它的右侧运动，并环绕着它的底边；一个向右浮动的元素将有内容在它的左侧移动。

浮动的框可以左右移动，直到它的外边缘碰到包含它的框的内边缘或另一个浮动框的边缘;CSS允许任何元素浮动。

对一个元素应用float属性会自动将它转变成一个块级元素，其它元素的内容在其周围流动。利用这个特性我们可以让文字环绕在图片周围，形成Word中文字环绕的效果。例如在Blogger中我们添加图片的时候可以选择向左，向右或者居中，这就是用了Float属性，添加完图片后，你可以查看源代码，其中必有一条float属性。

float属性可以取三个可能的值：left，使元素向左浮动；right，使元素向右浮动；none，消除浮动。

2.浮动的一些规则

多个浮动元素不会相互覆盖，一个浮动元素的框碰到另一个浮动元素的框后便停止运动。
浮动元素的顶端不能高于父元素的内顶端，也不能高于先于它出现的浮动元素或段落的顶端。另外，浮动元素的顶端不能高于行框的顶端，如果行框中有先于浮动元素的内容。这些规则限制了元素向上浮动，使浮动低于其父元素。
一个浮动元素不能伸出其容纳元素的边线，除非它的宽度太大而不能被容纳。如果多个浮动元素，当一行不能全部容纳它们的时候，则另起一行，剩余的被“挤”到下一行。
在遵从其它限制下，浮动元素尽可能高。向左浮动的元素尽可能向左，向右浮动的元素尽可能向右，较高的位置优先给更偏左或偏右的元素。

3.清理

清理(clear)属性是浮动(float)属性的一个同伴。它控制跟随一个浮动元素的元素的位置。这个属性中用来防止内容跟随一个浮动的元素，迫使它移动到浮动的下一行。

clear属性可以取四个值：left，它把元素推到前面生成的向左浮动的元素下面；right，它把元素推到前面生成的向右浮动的元素下面；both，它把元素推到前面生成的所有元素下面；和none，它取消前面的定位。clear属性不仅限于非浮动元素；相反，它还可以用来控制浮动元素的行为，把一个浮动元素推到其它浮动元素下面。

我们可以通过两张图片来明白清理的作用：

第一张图片没有对行框进行清理，它环绕在浮动的图片的周围，第二张图片对段落进行了清理，它便不再环绕图片，到了浮动框的下面，相当于增加了这个段落的顶空白边，为浮动框留出了空间。
对元素进行清理实际上就是为前面的浮动元素留出了垂直空间。

CSS教程系列九——相对定位、绝对定位

定位是网页布局中非常重要的概念，决定了网页的表现形式，是CSS中我们最常用到的功能之一。

学完框模型之后我们知道网页是由一个个的框组成的，那么在最简单的不包含CSS的页面里，浏览器怎样定位各种框呢？在这种情况下，浏览器会根据各个框在Html中出现的顺序，由上而下一个接一个的排列，形象一点我们把这样方式称作“流”，区别于浮动和绝对定位这两种较特殊的定位方式，这种流我们称之为“普通流”。

其实，刚才我们已经提到了CSS中三种基本的定位机制：普通流、浮动和绝对定位。其中相对定位可看作普通流定位的一部分。

1.定位的语法

语法：

position : static absolute fixed relative

取值：

static :　默认值。无特殊定位，对象遵循HTML定位规则。
absolute :　绝对定位。将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性定义。
relative :　相对定位。对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置。
fixed : 固定定位。IE6等版本不支持。它其实是绝对定位的一个子类别，它能使元素出现在页面的相同位置处，而不随页面上下的拖动。一般使用JavaScript实现。

2.相对定位

“相对”定位，“相对”什么地方呢？相对定位是相对于文档流中的初始位置，通过设置垂直或水平距离，让这个元素移动。元素本身即使移动到了别处也要占据原来没有变化时的初始位置。相对定位的元素并没有脱离原Html流。例如：

#box {position:relative;
left:20px;
top:20px;}

3.绝对定位

绝对的意思我们都很清楚，它的功能就是让我们可以把某个元素精确的定位在某个地方。既然我们要自由的把某个元素定位在页面的某个地方，所以绝对定位的元素已经脱离了普通流。这里就像Photoshop里层的概念一样，绝对定位的元素会被放到一个新层上，它可以覆盖普通流的元素。绝对定位的元素不受普通流的影响，仿佛它们不存在一样。我们可以通过设置z-index（z就是指的z轴，各个层相互叠加垂直的方向上）属性来更改它们层叠的顺序。

绝对定位的元素的位置相对于“最近”的“已定位”的祖先元素。如果元素没有已定位的祖先元素，那么它的位置相对于body。图示：

CSS教程系列八——空白边的叠加

上节我们刚学了CSS中的框模型，我们知道了在浏览器中我们所看到的内容的存在形式——它们是由一个个的框组成的。每个框都有一个空白边，两个空白边相遇的时候会遇到什么问题呢？

举一个例子，在一个网页中有几个段落，第一个段落上面的空间等于段落的顶空白边。如果没有空白边叠加，后面的段落之间的空白边将是相邻顶空白边和底空白边的和，这就意味着段落之间的空间是页面顶部的两倍。如果空白边叠加在一起，那么各处的距离就变得一致了。如图

空白边叠加的定义：当两个空白边相遇时，它们将形成一个空白边。这个空白边的高度等于两个发生叠加的空白边的高度中的较大者。

以后我们学到定位和浮动的时候会知道，浮动的元素和绝对定位的元素是脱离了普通文档流的，它们不会发生空白边叠加。行内框也不会发生空白边叠加。

叠加图示（点击放大图片）：

注意：空白边的叠加是相当广泛的，当一个元素包围另一个元素时，如果没有填充或边框将空白边隔开，它们的空白边相遇时也会叠加。空元素的空白边也会自身发生叠加。

CSS教程系列七——标准框模型和IE非标准框模型

CSS中最重要的三个概念是：浮动(float)、定位(position)和框模型(box model，或称作盒模型)。这三种概念控制元素在页面上的排列和显示方式，它们是布局的基础，理解了这三种概念后，CSS在你的手中就如鱼得水，但真正的掌握往往在我们在日常进行了大量实践之后，所以一时不理解没有关系，学习本身就是一个反复的过程，多多实践，自然就会理解。

框模型是CSS的基石之一，网页上的每个元素都是一个矩形框，可能我们没有看到框本身，但是实际上我们所看到的内容都是包含在一个个的框中的，因为我们把框的边框隐藏了，如果需要我们就可以让它显示出来。例如：

一些文字

如果把这个段落放在网页中，我们肉眼上并不能看到框，但内在它就是一个框。我们可以定义样式：p {border:1px;}来把它的边框显示出来。

1.框的组成。

我们先抛开CSS，想像一下我们日常所见的矩形的框。既然是框就要有一个边框，框里面放着东西，里面的东西和框之间往往有一些空间，因为我们不可能把它塞得太满，还有什么呢？如果把这个框放在空间中，这个框与其它的物体往往也有一些距离，放得太挤了不好看。

也可以这样想像，我们在一张白纸上画一个矩形框，在框里面写字的时候，我们不可能紧靠着框的边，那样不美观，这样内容与边框之间就会空出一些距离，另外我们画框的时候也不会紧靠着纸的边，一般会留出一定的页边距。

边框、内容、内容和边框的距离和与其它物体的距离，这就是一般框的四项内容。

同样在CSS中的框也是由这四部分组成的。它们分别是：边框(border)、内容(content)、填充(padding)和边距(margin，也称作空白边)。我们可以形象的通过一张图片来看一下CSS中框的组成。

注意：填充是边框和内容之间的距离，空白边是边框和其它框之间的距离。如果给一个框添加背景，那么背景会应用于内容和填充组成的区域。

2.标准框模型的计算。

在布局的时候我们一般把页面分成几栏，这样就要计算各栏的宽度，框的宽度是怎么计算的呢？在CSS中我们是用width和height来定义框的宽度和高度的，一般意义上，我们会认为这个宽度(或高度)就是包含所有的四项的宽度(或高度)，但实际上不是这样的，标准框模型中，width和height的值仅指的是内容区域的宽度和高度，不包含其它三项，这有些不太合常规，但既然是这样规定的，我们就要接受这样的概念。

那么一个标准框的四项的总的宽度应该怎样计算呢？例如我们定义一个框：

#box {width:70px;
padding:5px;
margin:10px;}

这个框的总宽度是：70+5×2+10×2=100px。如图：

注意：width和height仅指内容区域的宽度和高度。空白边可以是负值。

3.IE的非标准框模型

IE是使用最多的浏览器，正因如此，微软才这样令人可恶，IE中有许多不合标准的地方，框模型就是其中之一。IE中的width和height的值是指除空白边之外的宽度和高度，它包含了内容区域和填充区域。这正是现实世界中我们比较熟悉的框。尽管这样，不同的标准会让网页在不同的浏览器里的显示方式大相径庭，会造成比较严重的后果。如果我们还像上面例子一样定义一个框，那么在IE中框的宽度是多少呢？

此时框的宽度为：70＋10×2＝90px

比上面的框小了10px，这10px是原来的填充的宽度，它现在去哪儿了呢？因为框的宽度为70px，这个宽度包含了内容和填充的宽度，所以内容区域的宽度为70－5×2＝60px。如图：

注意事项：正因为IE的非标准模型，所以在使用的时候，我们尽量不要给具有指定宽度的元素添加填充，而是把填充或空白边添加到元素的父元素或子元素中。

CSS教程系列六——继承、层叠和特殊性

CSS中有一些概念是需要深刻理解的，此节开始将介绍CSS中的一些非常重要的概念。

1.继承。

继承是一个非常容易理解的概念，我们可以形象的把它比作遗传，父元素的特性会继承给它的子元素。

body {color:red;}
<body>
一些文字
</body>

上面的代码我们没有定义P的颜色，但它包围的文字的颜色为红色，因为它继承了父元素body的颜色。

2.层叠和特殊性。

body {color:red;}
p {color:green;}
<body>
段落一
段落二
</body>

我们把第一个例子稍稍修改一下，现在的结果是段落一为红色，段落二为绿色。

有些人或许会有疑问，根据刚才介绍的继承，段落二是不是应该继承红色呢？

实际中，在CSS里，某个元素的某个属性，我们可能在不同的地方定义了多次，这样它的样式就会发生“层叠”，这时候浏览器会不会不知所措呢？究竟应该应用哪种样式呢？

CSS中以不同规则的“特殊性”来决定应该应用何种样式，特殊性高的规则优先，若两个规则特殊性相同，则后定义的规则优先。

另外，对于我们正在浏览的同一网页，可能会有多个样式表对其产生作用，一般有原网页作者的样式表，浏览的用户的样式表以及浏览器或用户代理使用的默认样式表。将样式标记上!important会提高它的重要度，可以优先于任何规则。

层叠的重要度次序：

标有!important的用户样式
标有!important的作者样式
作者样式
用户样式
浏览器/用户代理应用的样式
最后根据选择器的特殊性决定规则的次序。

特殊性的一般规律：行内样式，即用Style属性编写的规则特殊性最高，其次，具有ID选择器的规则比没有ID选择器的规则特殊，再次具有类选择器的规则比只有类型选择器的规则特殊。最后，如果两个规则特殊性相同，那么后定义的规则优先。

注意：继承的样式的特殊性为空，即直接应用于元素的任何样式一定会覆盖继承的样式，这就是为什么第二个例子中P的颜色没有继承Body颜色的原因。

3.特殊性的计算

除了上述的一般规律外，我们也可以计算出某个规则的特殊性。

行内样式是最高的，如果是行内样式则无需计算。
计算ID选择器的数量 a
计算类和伪类的数量 b
计算类型选择器的数量 c

上面我们一共算了三个数，假设ID选择器的数量为a，类和伪类的数量为b，类型选择器的数量为c。最后得到它的特殊性为：abc （并非三个值相加，而是按顺序排列）

例如，有这样一条规则：#wrapper #content .post p {color:red;}

这条规则中共有两个ID，一个类和一个类型选择器，则计算出的三个值为：2，1，1。将它们按顺序排列起来得到的数值是211。如果还有一条规则也定义了P的样式，但计算出的值小于211，那么第一条规则的特殊性就高。

CSS教程系列五——常用的选择器

在上一篇教程中，我们了解到类非常灵活且功能强大，但我们在使用中却极容易过份依赖它。我们应该如何去避免类的滥用呢？我们可以通过使用“后代选择器”来减少类的使用。

最常用的选择器是类型选择器（或称作元素选择器、简单选择器）和后代选择器。

1.类型选择器。

这种类型的选择器已被我们熟知，它用来筛选特定类型的元素。如段落、锚或标题元素等。

p {color:black;}
a {text-decoration:underline;}
h1 {font-weight:blod;}

2.后代选择器。

后代选择器用来筛选特定元素或元素组的后代。后代选择器的表示方法很简单，在父选择器和子选择器之间加一个空格。举个例子。

p span {color:red;}
这是第一段文字这是被Span标记包围的文字，颜色为红色
这是第二段文字，颜色不变

在上面的例子中被第一段文字中被Span包含的部分的颜色将是红色，其余文字颜色不变。

理解后代选择器的作用了吗？在第一段文字中Span是P的子代（或叫做后代），因为Span包含于P中。所以这段文字的颜色将是CSS中定义的红色。而第二段文字并非P的子代，所以不会应用样式，颜色不变。

现在你可以理解为什么我们不需要很多类了吗？不妨思考一下。

3.伪类

如果你之前没有接触过编程，伪类这个名字乍听起来有点怪。为什么会称作“伪”类呢？（日伪军是不是很熟悉，^-^）

伪类也是类，但它是固定的，CSS中事先定义好的，用来根据文档结构之外的其它条件对元素应用样式。比如链接的状态。它是类，但又不是我们通常意义上的类，所以称作伪类。

我们常用的伪类有四个，其它的一些伪类因在IE中不支持，所以一般不用。

这四个伪类是（伪类前有一个冒号）：

:link （链接） :visited （已访问的链接） :hover （鼠标停留状态） :active （激活状态）

其中前面两种称为链接伪类，只能应用于锚（a）元素。后两种称为动态伪类，理论上可以应用于任何元素。

例如，假设默认的标题颜色为黑，访问后是白色，鼠标停留时字体为红色，激活状态为黄色，那么CSS应该怎么写呢？

a:link {color:black;}
a:visited {color:white;}
a:hover {color:red;}
a:active {color:yellow;}

注意事项：这几个伪类组合的时候根据叠层顺序，我们在定义这些链接样式时，一定要按照a:link， a:visited， a:hover， a:actived的顺序书写。可以记为“LoVe HAte”。

4.通用选择器

我觉得它就是个通配符，通用选择器用*表示，它一般用来对页面上所有元素应用样式。例如：让所有元素的填充和空白边置0。

* {padding:0;
margin:0;}

另外，通用选择器和其他选择器结合使用时，通用选择器可以用来对特定元素的所有后代应用样式，或者跳过一级后代。

5.高级选择器

IE对高级选择器基本上不支持，平时用到的很少，但功能却极为强大。此处略去。

CSS教程系列四——ID和类

尽管所有的Html标记都可以用作选择符，但是现实中我们仍需要实现更加精细，更加复杂的目的。例如：有三个段落，我们希望每个段落有不同的颜色。以前我们用类型选择符定义段落颜色，代码会这样写：p {color:red;} 但是这条规则只能让所有的段落字体变成红色。这时我们就用到了ID和类。

1.ID和类的规则及使用方法

（1）定义ID

#名称｛属性：值;｝

（2）定义类

.名称 {属性:值;}

它们跟以前的选择符格式上差不多，ID前面加一个#号，类名前面加一个点（半角）。

2.ID和类的命名

在命名上，ID和类是随意的，你几乎可以将它们命名为任何的名字。比如上面的三个段落，我们把第一段的类名命名为：first，代码就要这样写，

.first {color:red;}

但为了规范我们最好使用有意义容易理解的名字，让名称尽可能与表现方式无关。书写上一般采用驼峰式大小写，即多个单词的情况下，首单词无大写字母，其后单词首字母大写，如topNav,leftSidebar。

3.ID和类的使用

我们在CSS中定义了类或ID，那么我们怎么把它应用到Html中呢？

第一个段落

若当初我们定义的是ID，#first {color:red;}。那么现在我们应该这样写：

第一个段落

这样应用了之后，只有第一个段落的颜色为红色，其它段落便不受First类影响。

4.ID和类的区别

看了上面的几个例子之后，你可能会觉得ID和类除了书写上的区别之外，功能上好像没有区别。的确，它们在功能上也没有区别，它们的区别就是ID在页面上必须是唯一的。而类可以被任意使用。例如我们定义一个ID，一个类。

#first {color:red;}
.second {color:green;}

first因为前面有个#号所以属于ID，Second则属于类。则：

段落一
段落二
段落三

上面的代码中“Second”这个类被使用了两次，说明类可以被多次使用，但ID在页面中只能被使用一次。

我们一般用ID来标识持久的结构性元素。使用更多的是类。

5.防止类的滥用

类是非常灵活和强大的，正因如此，它也极易被过度的使用。在实际中我们应尽可能少的使用类。大多数时候我们所创建的文档中只需要添加几个类。

买了两个域名

coloor.net和给丫头注册的ifay.cn
好像现在没什么用处，嘿嘿。总会有用的。
cn无法注册Google Apps，注册过net后立即试了一下Google Apps，好可惜，最重要的一个功能因Ghs.google.com在中国被封而无法使用。遗憾，好遗憾。

CSS教程系列三——CSS语法和应用

大虾请略过，本人菜鸟。

这一节我们终于真正的开始接触CSS本身了，会不会等得有点久呢？呵呵，开始吧。

一、基本语法

掌握一件事物最快的方法就是直接去使用，看看下面一段代码，这段代码来自Blogger模板。它是介于<b:skin><![CDATA[ 和 ]]></b:skin>之间的部分。这部分包含了XML的变量定义（Variable definitions）和CSS。类似下面的代码就是CSS。

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
text-align: center;
}

仔细观察上面的代码，我们可以分析出CSS的规则，实际上CSS只包含了三部分，大括号外的，冒号前面的，最后就是冒号后面的。这三部分是什么？起什么作用呢？

我们用一条更简单的规则来说明：

H1 { color: green;}

这里有三个概念，分别是大括号外的“选择符（Selector）”、冒号前的“属性（Property）”以及冒号后面的“属性的值”或者说是“属性的参数”。

上面一条代码具有什么作用呢？它告诉浏览器将所有<H1></H1>包围的文字以绿色显示。

1.选择符（有的地方称作选择器）。上面代码中的H1。顾名思义，它的作用就是起筛选的作用。就像上一条代码，它只对所有<H1></H1>包围的文字起作用。所有的Html标记都可以充当选择符，所以你可以将CSS的任何信息应用到任何元素。如果有不同的选择符，但他们的属性及值是完全一样的，为了方便，我们可以将它们合并起来写，例如：

H1, P, Span
{ font-family: arial;}

上面的代码就会把所有的H1,P,Span包围起来的文字的字体设置为Arial。

2.属性。上面代码中的color。每件东西都有属性。比如人类，性别，肤色，体重等等都是人类的属性。一段文字，一个段落也有自己的属性，比如字体类型，大小，颜色之类。不同的对象属性也有所不同。在CSS中要掌握很多属性，可以搜索“CSS 2 中文手册”，下载一份。在以后的使用中也会介绍一些常用的属性。

3.属性的值。上面代码中的green。这更容易理解了吧，比如性别男，肤色是黄色。字体类型为黑体……

4.最后不要漏了那个小分号，每一句后面都要加上分号。

5./*注释性文字*/ 夹在/*和*/之间的是注释,不执行.

二、CSS的应用

应用CSS一般有三种

1.内嵌样式. 它写在标记里面，只对此标记起作用。格式：

这个Style定义里面的文字是20pt字体，字体颜色是红色。

2.内部样式表。写在所在网页的<head></head>之间，只对所在网页起作用。格式：

<STYLE type="text/css">
......
</STYLE>

3.外部样式表。用Link链接到网页，可重复应用到许多网页。格式：

<link href="css文件地址" rel="stylesheet" type="text/css">

下一节我们将接触类和ID。越来越觉得自己脑子里的东西太凌乱，在短时间内将它们写出来有好多地方前言不搭后语，不条理，请见谅。

CSS教程系列——简单的Html语法

大虾请略过，本人菜鸟。欢迎批评指正。

看到有人留言及在抓虾推荐上一篇文章，深受鼓励，我想自己一定可以把它写完的。欢迎订阅本Blog，以关注最新教程：http://feeds.feedburner.com/eool（推荐）以及http://feed.feedsky.com/ifly

在此系列教程中，我主要是根据自己的学习经历和经验，以最通俗的语言及例子说明一些抽象的概念，相信即使你从来没有接触过Html或CSS都可以学会。另外本教程所介绍的也是最基本的概念及最常用到的知识。

我接触Html也是从Blogger开始的，以前的Blogger模板是纯Html格式的。相信好多朋友连最基本的Html标记都不清楚，在学CSS之前，我将介绍我们最常用到的一些Html标记。算是CSS的基础。

1.Html简介

HTML的英文全称是Hyper Text MarkUp Language，中文叫做“超文本标记语言”。

HTML文件看上去和一般文本类似，但是它比一般文本多了Tag（标记），比如<html>，等，通过这些Tag，可以告诉浏览器如何显示这个文件。我们用记事本就可以编辑Html。

我们平常浏览网页是通过IE,Firefox此类的浏览器，为什么需要浏览器呢？浏览器是一种翻译工具，它会解释看起来复杂、凌乱的Html，让人们得到最直观的表现方式。先介绍一下Html的几个基本概念：（1）标记（Tag），有的地方也称作标签。标记在Html中是用于描述功能的符号。标记是用来实现某种功能的，标记必须用<>括起来.举个例子吧.

一些文字

在上面的一行代码中,和就是标记,那么它们可以实现什么功能呢?这两个标记只有一个差别,就是后面的标记多了一个'/',这个标记的功能就是让两个标记中间的文字加粗显示.我们会注意到在浏览器中标记是不会显示的,显示出来的是它们之间的内容.所以我们可以看出,标记在这儿就起了某种功能的作用,标记指出了处于它们之间的内容在浏览器中的表现方式.

标记一般都有一个“始标记”和一个“尾标记”，像上面例子中就是始标记，带上一个斜线就变成了尾标记。那么为什么需要两个标记呢？只用一个不行吗？其中始标记告诉浏览器从此处开始标记所表示的功能，而尾标记则告诉浏览器到这里该功能结束。相信这是很容易理解的。当然也有一些单标记，比如最常用的单标记 ，它用来表示换行。

新版的Blogger用的是XML，它对标记的检查非常严格，一般标记必须含有结束标记，有时候我们修改了代码却无法保存，或许就是漏了结束标记。

（2）属性。HTML元素可以拥有属性。属性可以扩展HTML元素的能力。

比如你可以使用一个bgcolor属性，使得页面的背景色成为红色，就像这样：

<body bgcolor="red">

（3）注释语句。注释语句的格式为：

2.Html的基本结构

<html>

  <head>

    <title>Title of page</title>

  </head>

  <body>

    This is my first homepage. <b>This   text    is bold</b>

  </body>

</html>

浏览器在解释Html的时候会由上而下执行，像流水一样，这就是以后我们会接触Html的一个“流”的概念，尽管简单，却是基础。

上面的Html基本结构的第一个Tag是<html>，这个Tag告诉你的浏览器这是HTML文件的头。文件的最后一个Tag是</html>，表示HTML文件到此结束。

在<head>和</head>之间的内容，是Head信息。Head信息是不显示出来的，你在浏览器里看不到。但是这并不表示这些信息没有用处。Head信息是预加载的一些信息，比如CSS以及JS就可以放在Head里。

在<title>和</title>之间的内容，是这个文件的标题。你可以在浏览器最顶端的标题栏看到这个标题。

在<body>和</body>之间的信息，是正文。

在和之间的文字，用粗体表示。顾名思义，就是bold的意思。

3.本节最重要的内容，介绍常用的标记。大多数将会在使用的时候简单介绍。Html标记是CSS的样式附着的地方，是“钩子”。

h1,h2等
ul li等
div span p等

CSS简易教程系列——CSS的产生

大虾请略过，欢迎批评指正。本人菜鸟。

话说盘古开天那会，嗯，还没有网络，再后来出现了网络，一种简单的容易理解的语言——HTML出现了。或许现在的网页都很漂亮，但用最原始的有语义的HTML形成的网页只能用简陋来形容。
再后来，网页变得越来越复杂，直到很少有人能再看懂自己写的代码。那个时代，Html的最重要的作用变成表现页面的一种方式，那么当时是怎么来修饰页面的呢？

人们用块引用（Blockquote）来添加空白而不是表示引用;表格完全成了布局工具，而不是来显示数据;用字体和粗体标签的组合来创建所需的视觉效果，而不只是用标题元素突出显示页面标题。总之，Html这种原本为非表现性语言变成了多能的，后果就是谁也理不清那一堆乱乱的代码。

这时人们急需一种独立的，细化的，简单的，易实现的表现性语言，来独立于Html之外表现页面。CSS出现了。

CSS全称为Cascading Style Sheets，翻译过来为层叠样式表，一般称样式表。它是Html的一种扩展语言。

那么我们可以用CSS来做什么呢？
有了CSS，我们就可以控制网页外观并且将文档的表现部分与内容分离开来。例如我们可以用CSS直接控制布局，而不是没有语义的表格。总之，CSS让以前复杂难懂的Html变得简单，有意义。

CSS的语法是非常简单的，但CSS在大多数人眼里是难掌握的。这并不是CSS本身的错，而是浏览器Bug和不一致的显示方式导致的。像我们最常用的IE就是最令设计人员头痛的一个非常糟的浏览器。我们日常使用一般都要尽量避免这些因浏览器而导致的BUG。比如最常见的一种就是网页在Firefox下显示正常，而在IE下，侧边栏却被“挤”到了下面，这就是由于IE错误的不符合标准的框模型造成的。当然，也存在一些修复Bug的方法（一般称Hack），但并不推荐。当你在不同浏览器上测试代码时，你的设计可能在一种浏览器上显示的很好，但在另一浏览器上布局可能会支离破碎。不要惊讶，这是一个现实的世界，并不完美。可以尽量找一些修复的方法。

现在用的CSS标准一般为2.1。

第一次写系列教程，肯定有好多好多疏漏和错误，以后发现了会逐步完善，欢迎指正哦。以后尽量先写到纸上，这样思考的会细一些。这也是本人的一个深入学习的机会。记住：我也是菜鸟哦，比你知道的多不了多少。

回到开封元宵节快乐

去武汉丫头那玩了几天，在开封的烟花下，元宵节的晚上回来了。

新的学期，新的开始。新学期本Blog的目标是普及一下CSS，让大多数本Blog的读者至少可以看懂CSS。求人不如求已嘛。

上学期还蛮顺利的，没有挂科，四级也过了。但是应该考虑考研的问题了。这个学期将会是充实前进的一个学期。

如果你也有新的目标，我们一起努力哦

订阅：博文 (Atom)

存档

链接