<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>web集结号 &#187; css</title>
	<atom:link href="http://www.songlecn.com/category/css/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.songlecn.com</link>
	<description>专注于web表现层技术</description>
	<lastBuildDate>Wed, 04 Nov 2009 02:46:32 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.4</generator>
		<item>
		<title>CSS初级教程 颜色</title>
		<link>http://www.songlecn.com/2009/06/1165/</link>
		<comments>http://www.songlecn.com/2009/06/1165/#comments</comments>
		<pubDate>Fri, 26 Jun 2009 01:57:58 +0000</pubDate>
		<dc:creator>船长</dc:creator>
				<category><![CDATA[css]]></category>
		<category><![CDATA[color]]></category>
		<category><![CDATA[css教程]]></category>

		<guid isPermaLink="false">http://www.songlecn.com/?p=1165</guid>
		<description><![CDATA[CSS拥有1677216色供你处置，可以用名字，rgb（红绿蓝）值或者十六进制代码（hex）值来表示。 Example Source Code 红色red 相同于 rgb(255,0,0) 相同于 rgb(100%,0%,0%) 相同于 #ff0000 相同于 #f00 有16中合法的预定义颜色名字。它们是：aqua（水绿）、 black（黑）、blue（蓝）、 fuchsia（紫红）、 gray（灰）、 green（绿）、lime（浅绿）、 maroon（褐）、navy（深蓝）、 olive（橄榄）、purple（紫）、 red（红）、silver（银）、 teal（深青）、white（白）和 yellow（黄）。 透明transparent也是一个合法值。 在rgb的从0至255的三个值中，0是最低阶的（如没有红色），255是最高阶（如全是红色）。这些值也可以是百分比。 十六进制Hexadecimal（以“Sexadecimal”更为人知和更正确的用法）是16位的系统。我们日常生活中常用的是十进制系统（基于10，从0到9），但十六进制有16个数字，从0到f。 在CSS中的十六进制用半角英文井号#来定义，后面跟随3或6位数字。基本上，3位是6位的压缩版（#f00就是#ff0000，#c96就是#cc9966等等）。3位版本比较容易解释（第一个数字，像rgb的第一个值，是红色的，第二个绿色，不用说，第三个就是蓝色了），但6位版本给你更多的颜色精确控制权。 前景色和背景色 颜色可以用color和background-color（注意这必须用美式英语中的color而不是colour）来应用。 下面演示一段有蓝色背景和黄色前景的文本的CSS： Example Source Code h1 {  color: yellow;  background-color: blue;  }  这些颜色让人感到有点粗糙，所以你可以进一步改进CSS代码，使文本看起来清爽一点： Example Source Code body {  font-size: 0.8em;  color: navy;  }  h1 {  color: #ffc;  background-color: #009;  }  保存这个CSS文档，然后刷新浏览器。你可以看到第一级标题（h1元素）已经变成介于黄蓝之间的混色。 你可以应用color和background-color的属性到大部分的HTML元素中，包括body，它可以改变整个页面所有东西的颜色。]]></description>
		<wfw:commentRss>http://www.songlecn.com/2009/06/1165/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>CSS初级教程 文本</title>
		<link>http://www.songlecn.com/2009/06/1160/</link>
		<comments>http://www.songlecn.com/2009/06/1160/#comments</comments>
		<pubDate>Thu, 25 Jun 2009 01:40:43 +0000</pubDate>
		<dc:creator>船长</dc:creator>
				<category><![CDATA[css]]></category>
		<category><![CDATA[css教程]]></category>
		<category><![CDATA[font]]></category>

		<guid isPermaLink="false">http://www.songlecn.com/?p=1160</guid>
		<description><![CDATA[你可以用大量的属性来改变文本的大小和形态，概括如下： 字体font-family 这是字体本身的名称，如“Times News Roman”，“Arial”或者“Verdana”（又如“宋体”等中文字体名称&#8211;译者著）。 你指定的字体必须存在在用户的电脑上，所以在CSS使用字体会存在某种程度上的不确定性。有少量“安全”的字体（最常用的是Arial，Verdana和Times New Roman）。但你可以指定不止一种字体，只要用半角英文逗号,隔开就行。这样做的目的是如果用户的电脑上没有你指定的第一个字体，浏览器会逐遍寻找罗列的字体直到找到电脑上安装有的字体为止。这很有用因为不同的电脑有时侯有不同的安装字体。所以，例子font-family: arial, helvetica的目的就是用在PC（一般情况下有arial字体而没有helvetica字体）和Apple Mac上（一般有helvetica字体而没有arial字体）。 注意：如果一个字体的名称超过一个单词，它应该用英文双引号括起来，如：font-family: &#8221;Times New Roman&#8221;。 字体尺寸font-size 定义字体的尺寸。必须小心──像标题一样的文本不应该是段落中的大字体而已，你应该使用标题标签（h1，h2 等）。甚至，在练习中，你可以使段落文本字体尺寸大于标题（不推荐使用，如果你明智的话）。 字体加粗font-weight 这用来声明文本粗细与否。实际应用中一般只有两种形式：font-weight: bold（粗体）和font-weight: normal（普通）。在理论上，它们的值有bolder（更粗），lighter（更细），100，200，300，400，500，600，700，800或者900，但许多浏览器会摇摇头，说：“我不认为这样”，所以使用bold和normal是比较安全的。 字体样式font-style 这定义文本正斜与否。可以这样使用 font-style: italic（倾斜）或者font-style: normal（正常）。 文本装饰text-decoration 这用来声明文本是否有划线。可以这样使用： text-decoration: overline──文本上面的划线。  text-decoration: line-through──穿过文本的删除线。  text-decoration: underline──这应该只使用在连接中，因为用户一般认为连接才有下划线。 这个属性通常用来装饰连接，而 text-decoration: none则是表示没有任何划线。  文本转换text-transform 这可以转换文本的大小写。 text-transform: capitalize把每个单词的首字母转换成大写。 text-transform: uppercase把所有的字母都转换成大写。 text-transform: lowercase把所有的字母都转换成小写。 text-transform: none？你自己试一试啦。 Example Source Code body {  font-family: arial, helvetica, serif;  font-size: 0.8em;  }  h1 {  font-size: 2em;  }  h2 {  font-size: 1.5em;  }  a {  text-decoration: none;  }  strong {  font-style: italic;  text-transform: uppercase;  }   文本间距 字母间隔letter-spacing和文本间隔 word-spacing属性分别用在字母间和单词间的距离。它们的值可以是长度或者默认的普通normal。 line-height属性为比如段落等元素设置行高，它并不改变字体的尺寸。它的值可以是长度，百分比或者默认的normal。 文本水平对齐text-align属性将对元素里的文本向左、右、中间或者两端对齐，自然，它们的值分别left（左）、 right（右）、center（中间）或者 justify（两端）。 文本缩进text-indent属性依据你设置的长度或者百分比值对文本段落的第一行进行缩进。在印刷中经常会用到这样的格式，然而在像网页这样的电子媒体中并不常用。 Example Source Code p {  letter-spacing: 0.5em;  word-spacing: 2em;  [...]]]></description>
		<wfw:commentRss>http://www.songlecn.com/2009/06/1160/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>CSS初级教程 边框</title>
		<link>http://www.songlecn.com/2009/06/1150/</link>
		<comments>http://www.songlecn.com/2009/06/1150/#comments</comments>
		<pubDate>Tue, 23 Jun 2009 02:11:10 +0000</pubDate>
		<dc:creator>船长</dc:creator>
				<category><![CDATA[css]]></category>
		<category><![CDATA[border]]></category>
		<category><![CDATA[css教程]]></category>
		<category><![CDATA[边框]]></category>

		<guid isPermaLink="false">http://www.songlecn.com/?p=1150</guid>
		<description><![CDATA[边框可以应用到在主体元素body中的绝大部分HTML元素中。  创建一个包围着元素的边框，你所需要的是边框样式border-style。它们的值可以是 solid、dotted、dashed、double、groove、ridge、 inset和outset。（你有必要每个值都试一试，看看效果如何——译者注） 边框宽度border-width为边框设置宽度，通常用像素来表示。当然，还可以单独设置四个方向的边框属性，它们是border-top-width、border-right-width、 border-bottom-width和border-left-width。 最后，边框颜色border-color设置颜色。 为下面的CSS文档添加如下代码： Example Source Code h2 {  border-style: dashed;  border-width: 3px;  border-left-width: 10px;  border-right-width: 10px;  border-color: red;  }  这将会使所有的HTML二级标题（h2）产生红色的破折号（dashed）边框，上下各3像素宽，左右则各10像素宽（取代了3像素宽的全局设置）。]]></description>
		<wfw:commentRss>http://www.songlecn.com/2009/06/1150/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>CSS初级教程 综合应用</title>
		<link>http://www.songlecn.com/2009/06/1145/</link>
		<comments>http://www.songlecn.com/2009/06/1145/#comments</comments>
		<pubDate>Mon, 22 Jun 2009 02:11:08 +0000</pubDate>
		<dc:creator>船长</dc:creator>
				<category><![CDATA[css]]></category>
		<category><![CDATA[css教程]]></category>

		<guid isPermaLink="false">http://www.songlecn.com/?p=1145</guid>
		<description><![CDATA[你应该已经在HTML初级教程的综合中创作了一个HTML文档，而且在CSS初级教程的的开始中增加了一行，用以把HTML文档和CSS文档联系起来。 下面的代码包括了所有我们在初级教程中所学习的方法。只要你把下面的保存起来作为CSS文档，然后在浏览器中查看HTML文档，你就可以理解每一个CSS的属性的表现和怎么应用。最好的方法就是花费时间修改CSS文档和HTML文档上的代码，然后在浏览器中查看到底发生了什么。 Example Source Code body {  font-family: arial, helvetica, sans-serif;  font-size: 80%;  color: black;  background-color: #ffc;  margin: 1em;  padding: 0;  }  /* 顺便说一句，这是注释 */  p { line-height: 1.5em;  }  h1 {  color: #ffc;  background-color: #900;  font-size: 2em;  margin: 0;  margin-bottom: 0.5em;  padding: 0.25em;  font-style: italic;  text-align: center;  letter-spacing: 0.5em;  border-bottom-style: solid;  border-bottom-width: 0.5em;  border-bottom-color: #c00;  }  h2 {  color: white;  background-color: #090;  font-size: 1.5em;  margin: 0;  padding: 0.1em; padding-left: 1em;  }  h3 {  color: #999;  font-size: 1.25em;  }  img {  border-style: dashed;  border-width: 2px;  border-color: #ccc;  }  a {  text-decoration: none;  }  strong {  font-style: italic;  text-transform: uppercase;  }  [...]]]></description>
		<wfw:commentRss>http://www.songlecn.com/2009/06/1145/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>CSS中级教程 class和id选择符</title>
		<link>http://www.songlecn.com/2009/06/1138/</link>
		<comments>http://www.songlecn.com/2009/06/1138/#comments</comments>
		<pubDate>Fri, 19 Jun 2009 02:48:02 +0000</pubDate>
		<dc:creator>船长</dc:creator>
				<category><![CDATA[css]]></category>
		<category><![CDATA[class和id选择符]]></category>
		<category><![CDATA[css教程]]></category>

		<guid isPermaLink="false">http://www.songlecn.com/?p=1138</guid>
		<description><![CDATA[在CSS初级教程中我们仅仅考虑了HTML选择符──以HTML标签形式出现。 你当然可以用类选择符class和标识选择符id来定义自己的选择符。 这样做的好处是，依赖于class或者id，你可以不同地表现相同的HTML元素。 在CSS中，类选择符在一个半角英文句点（.）之前，而id则在半角英文井号（#）之前。 看起来像这样： Example Source Code #top {  background-color: #ccc;  padding: 1em  }  .intro {  color: red;  font-weight: bold;  }  HTML与CSS的连接用属性id和class。像这样： Example Source Code &#60;div id=&#8221;top&#8221;&#62; &#60;h1&#62;Chocolate curry&#60;/h1&#62; &#60;p class=&#8221;intro&#8221;&#62;This is my recipe for making curry purely with chocolate&#60;/p&#62; &#60;p class=&#8221;intro&#8221;&#62;Mmm mm mmmmm&#60;/p&#62; &#60;/div&#62;  id和class不同之处在于，id用在唯一的元素上，而class则用在不止一个的元素上。 你也可以为一个指定的HTML元素应用选择符，把HTML选择符放置在前面就可以了，所以， p.jam { whatever }会应用在有类“jam”的段落上。]]></description>
		<wfw:commentRss>http://www.songlecn.com/2009/06/1138/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>CSS中级教程 组合与嵌套</title>
		<link>http://www.songlecn.com/2009/06/1131/</link>
		<comments>http://www.songlecn.com/2009/06/1131/#comments</comments>
		<pubDate>Thu, 18 Jun 2009 02:11:36 +0000</pubDate>
		<dc:creator>船长</dc:creator>
				<category><![CDATA[css]]></category>
		<category><![CDATA[css教程]]></category>
		<category><![CDATA[组合与嵌套]]></category>

		<guid isPermaLink="false">http://www.songlecn.com/?p=1131</guid>
		<description><![CDATA[组合 你不必重复有相同属性的多个选择符，你只要用英文逗号（,）隔开选择符就可以了。 比如，你有如下的代码： Example Source Code h2 {  color: red;  }  .thisOtherClass {  color: red;  }  .yetAnotherClass {  color: red;  }  则你可以这样写： Example Source Code h2, .thisOtherClass, .yetAnotherClass {  color: red;  }  嵌套 CSS结构好的话，没有必要使用过多的类或者标识选择符。这是因为你可以指定在选择符内的选择符。（或者更好的说法，上下文选择符&#8211;译者著） 比如： Example Source Code #top {  background-color: #ccc;  padding: 1em  }  #top h1 {  color: #ff0;  }  #top p {  color: red;  font-weight: bold;  }  这就减去不必要的类或者标识选择符，如果应用到像这样的HTML中： Example Source Code &#60;div id=&#8221;top&#8221;&#62;  &#60;h1&#62;Chocolate curry&#60;/h1&#62;  &#60;p&#62;This is my recipe for making curry purely with chocolate&#60;/p&#62;  &#60;p&#62;Mmm mm mmmmm&#60;/p&#62;  &#60;/div&#62; ]]></description>
		<wfw:commentRss>http://www.songlecn.com/2009/06/1131/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>CSS中级教程 CSS伪类</title>
		<link>http://www.songlecn.com/2009/06/1124/</link>
		<comments>http://www.songlecn.com/2009/06/1124/#comments</comments>
		<pubDate>Wed, 17 Jun 2009 02:23:11 +0000</pubDate>
		<dc:creator>船长</dc:creator>
				<category><![CDATA[css]]></category>
		<category><![CDATA[CSS伪类]]></category>
		<category><![CDATA[css教程]]></category>

		<guid isPermaLink="false">http://www.songlecn.com/?p=1124</guid>
		<description><![CDATA[伪类（Pseudo classes）是选择符的螺栓，用来指定一个或者与其相关的选择符的状态。它们的形式是selector:pseudo class { property: value; }，简单地用一个半角英文冒号（:）来隔开选择符和伪类。 CSS很多的建议并没有得到浏览器的支持，但有四个可以安全使用的用在连接上的伪类。 link用在为访问的连接上。  visited用在已经访问过的连接上。  active用于获得焦点（比如，被点击）的连接上。  hoverhover用于鼠标光标置于其上的连接。  Example Source Code a.snowman:link {  color: blue;  }  a.snowman:visited {  color: purple;  }  a.snowman:active {  color: red;  }  a.snowman:hover {  text-decoration: none;  color: blue;  background-color: yellow;  }  注意 尽管CSS给予你绕开的控制权，用不同的颜色表示已经访问过的连接是一个很好的习惯，因为很多用户还是这样预期的。伪类（除了hover）不常用，恐怕也没有过去常用。因此，它没有过去那样有用了。但如果你能收集常用用户的意见，你会发现应该使用它。 传统上，连接文本是蓝色的，已访问的连接是紫色的。也许，这是最有效、最有用的颜色。然而，伴随着CSS的广泛发展，这种颜色不会是平常的了，用户也不再假设连接必须是蓝色或紫色的。 注意 你应该也可以在除了连接的其他元素上使用hover伪类。不幸的是，Internet Explore并不支持。这真是一个极大的烦恼，因为在其它浏览器上可以有很多小技巧让你的页面看起来更令人愉快。]]></description>
		<wfw:commentRss>http://www.songlecn.com/2009/06/1124/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>CSS中级教程 快捷属性缩写</title>
		<link>http://www.songlecn.com/2009/06/1116/</link>
		<comments>http://www.songlecn.com/2009/06/1116/#comments</comments>
		<pubDate>Tue, 16 Jun 2009 01:50:46 +0000</pubDate>
		<dc:creator>船长</dc:creator>
				<category><![CDATA[css]]></category>
		<category><![CDATA[css教程]]></category>
		<category><![CDATA[属性缩写]]></category>

		<guid isPermaLink="false">http://www.songlecn.com/?p=1116</guid>
		<description><![CDATA[有些CSS属性允许一连串的属性组合，用英文半角空格隔开即可。 margin、padding和border-width允许你把诸如margin-top-width，margin-right-width，margin-bottom-width等用属性: 上 右 下 左（property: top right bottom left;）组合起来。 所以： Example Source Code p {  border-top-width: 1px;  border-right-width: 5px;  border-bottom-width: 10px;  border-left-width: 20px;  }  可以概括起来： Example Source Code p {  border: 1px red solid;  }  （这也可应用到border-top，border-right等） 加入只指定两个值（比如margin: 1em 10em;），第一个值是上和下，第二个值是右和左。 字体相关的属性还可以聚合在font的属性下： Example Source Code p {  font: italic bold 1em/1.5 courier;  }  （1.5是行高） 所以，组合起来吧，试试这个： Example Source Code p {  font: 1em/1.5 &#8221;Times New Roman&#8221;, times, serif;  padding: 3em 1em;  border: 1px black solid;  border-width: 1px 5px 5px 1px;  border-color: red green blue yellow;  margin: 1em 5em;  } ]]></description>
		<wfw:commentRss>http://www.songlecn.com/2009/06/1116/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>CSS中级教程 背景图片</title>
		<link>http://www.songlecn.com/2009/06/1107/</link>
		<comments>http://www.songlecn.com/2009/06/1107/#comments</comments>
		<pubDate>Mon, 15 Jun 2009 02:35:53 +0000</pubDate>
		<dc:creator>船长</dc:creator>
				<category><![CDATA[css]]></category>
		<category><![CDATA[background]]></category>
		<category><![CDATA[css教程]]></category>
		<category><![CDATA[背景图片]]></category>

		<guid isPermaLink="false">http://www.songlecn.com/?p=1107</guid>
		<description><![CDATA[应用xhtml+css进行网页布局，有很多属性跟背景图片的操作相关。很多表现因素上的图片，大部分用背景来进行处理。CSS的background的属性可以全部处理它们。 Example Source Code body { background: white url(images/bg.gif) no-repeat top right; } 这是如下属性的组合： Example Source Code background-color，在前面我们已经说过了。 background-image，图片的存储位置。 background-repeat，图片如何平铺。可以是 repeat（将会平铺整个页面），repeat-y（在y轴上平铺，上下）repeat-x （在x轴上平铺，左右），或者no-repeat（图片不重复）。 background-position，可以是top、center、bottom、left、right或者像上面的任意组合。 背景图片可以用在绝大部分的HTML元素上而不仅仅是整个页面（body）。简单使用但可以获得良好效果，比如角落的阴影。 注意 Example Source Code 很容易对背景图片失去控制和把你的网页涂得到处都是。一些明显活跃过度的人可能认为在一个页面的背景铺上一个色彩鲜明的图片看起来会很酷，然而却给用户判读前景文本带来识别一个Ж面的挑战。这是一个极端的例子。实践中，用户界面友好的可读文本是在白色朴素的背景上黑色或者在黑色朴素的背景上的白色（当然还有一个建议：米黄色的背景或浅灰色背景会更好，因为会减少刺眼的光）。 所以，最佳地使用背景是用在无内容在上的地方，或者使背景图片比较淡，这也可以减少图片文件的容量，因为没有更多涉及更多的颜色（假设你是使用索引颜色的格式，比如GIF）。]]></description>
		<wfw:commentRss>http://www.songlecn.com/2009/06/1107/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>CSS高级教程 显示属性</title>
		<link>http://www.songlecn.com/2009/06/1100/</link>
		<comments>http://www.songlecn.com/2009/06/1100/#comments</comments>
		<pubDate>Sat, 13 Jun 2009 01:56:53 +0000</pubDate>
		<dc:creator>船长</dc:creator>
				<category><![CDATA[css]]></category>
		<category><![CDATA[css教程]]></category>
		<category><![CDATA[display]]></category>
		<category><![CDATA[显示属性]]></category>

		<guid isPermaLink="false">http://www.songlecn.com/?p=1100</guid>
		<description><![CDATA[CSS高级教程意在发挥CSS的极限，然而这些醒目的方法对中级用户的效果并不是马上就显现出来的。 现在，可能显得有些烦琐，我们来学习替换样式表，设置打印样式等等。 处理HTML元素最关键的一个窍门，没有任何特别的，就是理解他们是如何工作的。大部分页面都可以使用一点点的标签组合起来，你可以为每一个你选定的标签样式化。浏览器默认的可视化样式元素由变化的字体样式、边界、补白和，和重要的，显示类型。 最基本的显示类型是内联inline、块block和清除none，他们分别可以用inline、block和none的值赋予display属性来操作。 inline就如本身语义所明示的，显示随着行流动的元素。锚和强调元素都是传统的内联元素。 block使元素前后都有断行。标题和段落元素都是传统的块元素的例子。 none，嗯，不显示这个元素，听起来毫无用处，但于易用性考虑（请看亲和连接），改变样式表，或者高级的翻转效果都有很好的用途。 比如这个站点的默认原始版本，通过操纵一些传统的内联和块元素来适应设计。 Example Source Code h1 {  display: inline;  font-size: 2em;  }  #header p {  display: inline;  font-size: 0.9em;  padding-left: 2em;  }  这使得“htmldog.com”的标题和标签行可以并排，而不是一上一下，维护最优的易用性。 Example Source Code #navigation, #seeAlso, #comments, #standards {  display: none;  }  上述代码使用在打印样式中，用于“关闭”这些元素，比如，对于一个单一的页面导航通常是不必须的。 注意 Example Source Code display: none和visibility: hidden不同之处在于display: none使元素完全是个死球，然而visibility: hidden虽不出现在内容中但保留着这个元素的流位置。比如，如果三段中的第二端设为display: none，第一段会直接到达第三段，而设为visibility: hidden的话，这个段落会有一个间隔。 表格 也许理解表格相关的显示属性值的最好方法是关心HTML表格。table是初始化的显示，你可以用tr和td分别摹拟table-row和table-cell值。 display属性走得更远，提供table-column、table-row-group、table-column-group、table-header-group、table-footer-group和table-caption的值， 都是自描述的。这些值显而易见的好处是，你可以用列来构造表格，代替有偏见的row。 最后，inline-table设置前后不断行的表格。 注意 对CSS表格失去控制的话，可能严重的损害你网页的亲和力（易用性）。HTML应该用来传达内容的，所以你有表格式数据的话，你应该用HTML表格来安排它们。使用CSS表格仅仅能给数据调调味，如果没有CSS的话完全不可读。十分不好。别走Michael Jackson的路。 其他显示类型 list-item也是自描述的，一般以列表的形式显示，使用在除li的HTML元素上。为了显示正确，使用这个显示类型的应该嵌套在ul或者ol元素内。 run-in使元素内联或块显示，取决于其父元素的的显示属性。在IE和基于Mozilla的浏览器中都不能工作。 campact也使元素内联或者块显示，同样取决于上下文。它也不能很好工作。 marker仅仅是与:before和:after伪元素一起来定义content属性的值。content属性的自动值已经是marker，所以这只对覆盖掉前面的content的显示属性有用。]]></description>
		<wfw:commentRss>http://www.songlecn.com/2009/06/1100/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>CSS高级教程 页面布局</title>
		<link>http://www.songlecn.com/2009/06/1091/</link>
		<comments>http://www.songlecn.com/2009/06/1091/#comments</comments>
		<pubDate>Fri, 12 Jun 2009 02:20:14 +0000</pubDate>
		<dc:creator>船长</dc:creator>
				<category><![CDATA[css]]></category>
		<category><![CDATA[css教程]]></category>
		<category><![CDATA[页面布局]]></category>

		<guid isPermaLink="false">http://www.songlecn.com/?p=1091</guid>
		<description><![CDATA[用CSS 来布局很容易。如果你已经习惯用表格布局的话，起先会感觉比较困难。其实不难，只不过动机不同，并且在实践中更有意义。 你可以把这一页面的各个部分当作独立的版块来看待，无论你选择哪一块。你可以绝对或相对地用彼块取代此块。 定位 定位属性position用于定义一个元素是否absolute（绝对），relative（相对），static（静态），或者fixed（固定）。 static值是元素的默认值，它会按照普通顺序生成，就如它们在HTML的出现一般。 relative很像static，但可用top、right、bottom和left属性来偏移原始位置。 absolute使元素从HTML普通流中分离出来，并把它送到一个完全属于自己的定位世界。在这个稍微疯狂的世界，这个绝对的元素可以放置到任何地方，只要设置了top、right、bottom和left的值。 fixed的行为也很像absolute，但参考于浏览器窗口相对于页面而放置绝对的元素，所以，理论上，当页面滚动的时候，固定元素完全保持在浏览器视区中。为什么说理论上的？不为别的，在Mozilla和Opera中工作得很好，但IE不会。 用绝对定位布局 你可以用绝对定位来创建一个传统两列布局，只要在HTML中使用如下面的类似规则： Example Source Code &#60;div id=&#8221;navigation&#8221;&#62;  &#60;ul&#62;  &#60;li&#62;&#60;a href=&#8221;this.html&#8221;&#62;This&#60;/a&#62;&#60;/li&#62;  &#60;li&#62;&#60;a href=&#8221;that.html&#8221;&#62;That&#60;/a&#62;&#60;/li&#62;  &#60;li&#62;&#60;a href=&#8221;theOther.html&#8221;&#62;The Other&#60;/a&#62;&#60;/li&#62;  &#60;/ul&#62;  &#60;/div&#62;  &#60;div id=&#8221;content&#8221;&#62;  &#60;h1&#62;Ra ra banjo banjo&#60;/h1&#62;  &#60;p&#62;Welcome to the Ra ra banjo banjo page. Ra ra banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo.&#60;/p&#62;  &#60;p&#62;(Ra ra banjo banjo)&#60;/p&#62;  &#60;/div&#62;   并且应用如下的CSS： Example Source Code #navigation {  position: absolute; top: 0; left: 0; width: 10em;  }  #content {  margin-left: 10em;  }  你将看到，长度为10em的导航条被设置在左边。因为导航是绝对定位的，对页面的其他部分的流动不会有任何影响，所以所需要做的只是把内容区域的左边界宽度设置为与导航条宽度一样就可以了。 实在是太容易了！然而你并不受这个两列方法的限制。用精明的定位，你可以布置你所如你所需的更多的块。比如，你需要增加第三列，你可以为HTML增加“navigation2”块并且应用如下CSS： Example Source Code #navigation {  position: absolute; top: 0; left: 0; width: 10em;  }  #navigation2 {  position: absolute; top: 0; right: 0; width: 10em;  }  #content {  margin: 0 10em; /* setting top and bottom margin to 0 and right and left margin to 10em */  }  绝对定位元素的唯一副作用是，因为它们生活自己的世界里，没有办法精确决定它们在哪儿结束。如果你使用上面的例子在一个少导航和多内容区域，没有什么问题，但是，特别是使用长度和宽度的相对值时，你经常得放弃在下面放置任何事物如脚注的希望。如果你真的要做，与其绝对定位它们，不如浮动它们。 浮动 浮动将移动一个元素到同一线上的左边或者右边，而周围也会有内容浮动。 浮动经常用在定位一个页面内的小型的元素（在本站的原始默认CSS中HTML初级指南和CSS初级指南的“下一页”连接就是浮动到右边的。同样参阅伪元素中的:first-letter例子），但同样可以用在更大的块中，比如导航列。 拿下面的HTML例子，你可以应用随后的CSS： [...]]]></description>
		<wfw:commentRss>http://www.songlecn.com/2009/06/1091/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>CSS高级教程@规则</title>
		<link>http://www.songlecn.com/2009/06/1084/</link>
		<comments>http://www.songlecn.com/2009/06/1084/#comments</comments>
		<pubDate>Thu, 11 Jun 2009 02:20:24 +0000</pubDate>
		<dc:creator>船长</dc:creator>
				<category><![CDATA[css]]></category>
		<category><![CDATA[css教程]]></category>
		<category><![CDATA[import规则]]></category>

		<guid isPermaLink="false">http://www.songlecn.com/?p=1084</guid>
		<description><![CDATA[at（@）规则把CSS规则都注入了一个压缩胶囊中，并且应用到指定的某些事物中。喔。 导入 导入import at规则将吞入另外的样式表。比如，如果你需要把另外的样式表的样式添加到现有的，你可以这样做： @import url(addonstyles.css);  这经常用来取代连接CSS到HTML中的&#60;link&#62;标签，本质上就是一个内部样式表的形式，看起来像这样：  Example Source Code &#60;style type=&#8221;text/css&#8221; media=&#8221;all&#8221;&#62;@import url(monkey.css);&#60;/style&#62;  这样做的好处是，一些老浏览器如Netscape 4.x不接受at规则，进而不连接样式表，从而，如果你有良好结构的标记，只剩下朴素功能的HTML（尽管没有样式）。 媒体类型 媒体media at规则将把内容应用到指定的媒体，比如打印。比如 Example Source Code @media print {  body { font-size: 10pt; font-family: times new roman, times, serif; }  #navigation { display: none; }  }  媒体类型可以是： all──每一个太阳下、上、周围、里面的所有媒体类型。  aural──语音合成器。  handheld──手持设备。  print──打印机。  projection──投影仪。  screen──电脑屏幕。  还可以使用braille（布莱叶点字）、embossed（压印）、tty（终端）和tv（电视）。 字符集 字符集charset at规则设置一个外部样式的字符编码，它应该出现在样式的顶端，大致如此：@charset &#8221;ISO-8859-1&#8243;; 字体外观 字体外观font-face at规则用来详细描述一个能嵌入CSS的外部字体。 它必须一个font-family的字体可以参考的描述符，值可以是系统已经存在的字体名称（这种情况发生时会覆盖掉该字体），也可以是全新的名字。为了嵌入一个字体，需用使用src描述符。字体外观at规则的其他描述符是使用该字体的一些条件，比如，在at规则里面增加一条font-weight: bold样式，如果font-weight属性也设置了bold，font-family的src将应用该规则到带有font-family属性的选择符。 使用字体外形at规则看起来像这样： Example Source Code @font-face {  font-family: somerandomfontname; src: url(somefont.eot);  font-weight: bold;  }  p {  font-family: somerandomfontname;  font-weight: bold;  }  这将使somefont.eot这个字体应用到段落里（如果p选择符没有设置成font-weight: bold的话就不会）。 注意 现在内嵌字体的支持度还算凑合。基于Mozilla的浏览器不支持，并且也没有最近的计划显示它会支持。仅Internet Explorer似有一定程度上的支持，但也没有直接得方法。为了在IE中嵌入字体，你需要使用微软的WEFT软件，它会把一个TrueType字体转换成一个压缩的OpenType字体（这也值嗯嗯在指定的URI上使用）。因为有限的（也相当复杂）的兼容性，最好不要使用没有适合的可替换系统字体的内嵌字体。 页面 页面page at规则用于页式（分页）媒体，是一个把样式应用到打印媒体的先进方法。它定义页面块的盒状模型（见边界和补白）扩展因此你可以定义一个独立页面的尺寸和表现。 应用page at规则有许多约定，比如没有补白和边界，我们也没有谈论电脑屏幕──点（pixel）和em作为单位是不可以的。 可以使用很多指定属性，比如尺寸size，可以设置为portrait（竖排格式）、landscape（横排格式）、auto（自动）或者一个高度。marks属性也可以用来定义裁剪标志。 Example Source Code @page {  [...]]]></description>
		<wfw:commentRss>http://www.songlecn.com/2009/06/1084/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>CSS高级教程 伪元素</title>
		<link>http://www.songlecn.com/2009/06/1075/</link>
		<comments>http://www.songlecn.com/2009/06/1075/#comments</comments>
		<pubDate>Tue, 09 Jun 2009 02:11:39 +0000</pubDate>
		<dc:creator>船长</dc:creator>
				<category><![CDATA[css]]></category>
		<category><![CDATA[css教程]]></category>
		<category><![CDATA[伪元素]]></category>

		<guid isPermaLink="false">http://www.songlecn.com/?p=1075</guid>
		<description><![CDATA[伪元素（pseudo elements）跟伪类一样吮吸选择符，使用selector:pseudoelement { property: value; }的形式。有四个吮吸器。 首字和首行 首字first-letter 伪元素应用到元素的第一个字，而首行first-line则是元素的顶行。你可以，比如，创建一个首行粗体和首字下沉的段落，像这样： Example Source Code p:first-letter {  font-size: 3em; float: left;  }  p:first-line {  font-weight: bold;  }  前和后 前before和后after伪元素与内容content属性用于元素的两边，在不更改HTML的情况下改变内容的两边事物。 内容属性的值可以open-quote（开引号）、close-quote（闭括号）、no-open-quote（无开括号）、no-close-quote（无闭括号），任何附上引号的字符串或者图片，使用url(imagename)。 Example Source Code blockquote:before {  content: open-quote;  }  blockquote:after {  content: close-quote;  }  li:before {  content: &#8221;POW: &#8221;  }  p:before {  content: url(images/jam.jpg)  }]]></description>
		<wfw:commentRss>http://www.songlecn.com/2009/06/1075/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>修改及利用CSS，可以改善网站可访问性</title>
		<link>http://www.songlecn.com/2009/06/1067/</link>
		<comments>http://www.songlecn.com/2009/06/1067/#comments</comments>
		<pubDate>Mon, 08 Jun 2009 02:29:03 +0000</pubDate>
		<dc:creator>船长</dc:creator>
				<category><![CDATA[css]]></category>
		<category><![CDATA[可访问性]]></category>

		<guid isPermaLink="false">http://www.songlecn.com/?p=1067</guid>
		<description><![CDATA[　　一个客户的旧网站需要更新，使得它能够达到可访问性的标准。对三四年前的旧代码进行挖掘的想法根本没有吸引力，主要是因为我曾经使用的很多编程惯例已经不再适用，特别是从可访问性上来讲。我曾经使用绝对的字体大小，固定的页面宽度和表格来做版面设计和空间分配。    　　像那时建构的很多网站一样，我的客户的网站使用了Cascading Style Sheets (CSS)来格式化文本。它没有使用任何CSS的更加强有力的版面设计功能，也没有允许HTML设备独立，而这是CSS可访问性的主要优点之一。 　　问题是如何出现的？ 　　在我概述使网站更加具有可访问性的方法之前，了解现今众多的访问性问题的起因也许是很有帮助的： 　　对HTML肤浅的理解：在1990年代的互联网大发展时期中，所有人都开始建构网站。WYSIWYG编辑器使得几乎每个人都可以很容易地建构一个网站，而不用费心去学习HTML。但不幸的是，这种在使用上的便利带来了一些蹩脚的代码，对可访问性造成了妨碍。 　　HTML在设计方面的局限性：开发者和设计者经常会故意错用HTML标签，特别是&#60;table&#62;标签，来克服HTML在版面和设计上的局限性。这种设计方式也会带来妨碍可访问性的代码。 　　什么使得CSS更具有访问性？ 　　CSS在1996年出现，用来解决上述的问题。通过使用CSS，你可以将一个HTML文件的内容与有关它的表现形式或风格的信息分离开来。这就使你可以应用准确的格式化并达到想要得到的版面设计，而无需使用可能会让屏幕阅读器和专门的浏览器软件产生困惑的HTML代码。 　　例如，虽然HTML表格是用来排列表格式数据的，但他们也经常被用来排列对齐一个页面上的元素的。但是阅读器和例如语音合成器的软件要求有效的HTML代码。因此当他们遇到一个页面错误地使用了诸如一个表格的元素，产生的结果就会让使用者感到莫名其妙。 　　CSS的另一个可访问性的优点就是它允许使用者定义他们自己的风格单，这个风格单可以与网站的风格单共同工作。因此，例如一个使用者可以设定，所有通过&#60;p&#62;标签定义的文本都应该是1.5em Arial，即使这个网站的风格单表示它应该是18px Verdana Bold。 　　要注意用户定义的风格只有在用户的风格名称与HTML页面中的标签相符时才会起作用，这是很重要的。这就将确保兼容性的责任交到了开发者的手中。例如，如果用户的风格单指定&#60;p&#62;标签应显示1.5em Arial文本，但是HTML页面并不使用&#60;p&#62;标签来从风格单中调用一个风格（也许它使用&#60;font class=”bodytext”&#62;），用户对于&#60;p&#62;标签定义的风格将会被忽略。因此要确保你对你的标题和段落使用标准的HTML标签，这将减少用户定义的风格单被忽略的机会。 　　开始 　　如果你是从头开始建构一个新的网站，那么通过CSS来改善可访问性就会很容易。但你仍然可以轻松地将现有的网站转变为CSS形式。 　　步骤1：检查现有代码 　　为了更好地说明，我将用在表A中这个简单的HTML代码来代表一个使用CSS的页面。这个例子假设页面还没有使用CSS，不过你也可以使用相似的方法来评价一个基于CSS的站点。主要的不同点就是大多数的改变将发生在CSS文件中而不是HTML文件中。 　　步骤2：从HTML中去掉所有特殊风格标签 　　要在这个页面中加入CSS，我首先需要去掉所有要控制内容表现的标签。样本代码使用了字体标签来定义字体外观，风格和颜色。去掉这些元素使得样本代码如表B所示。 　　步骤3：从HTML中去掉并替换任何错用的标签 　　现在我要去掉任何错用的HTML标签。在样本代码之中，一个表格用来在页面的内容创建一个15象素的边缘，代码还使用&#60;br&#62;标签来创建段落。 　　在我去掉表格和&#60;br&#62;标签之后，我将他们替换为适当的标签。例如，我对页面标题使用&#60;h2&#62;标签，用&#60;p&#62;标签来显示段落。使用这些标准HTML标签使得之后的CSS的应用变得非常容易，而且与用户定义的风格单更加兼容。现在的样本代码如表C所示。 　　步骤4：建构一个CSS文件来覆盖风格信息 　　现在我已经从HTML文件中去掉了所有风格信息，我需要将这些信息转移至一个CSS文件中。CSS文件仅仅是一个存为.css扩展名的文本文件，因此它可以在任何一个文本编辑器中进行创建。我使用的是Dreamweaver MX。 　　为了使在HTML中应用CSS文件变得容易，我使用了名为p和h2的风格来对应标准HTML标签。我使用了可变的字体大小，使得用户可以轻松地在浏览器中增大或缩小字体大小。使用绝对大小可以防止浏览器对字体进行大小的调整（除了Netscape 6或以后的版本之外，它将不考虑绝对字体大小）。我还在需要的地方指定了字体的种类，重量和颜色。 　　要重新产生由HTML标记代码创建的版面，我需要将&#60;p&#62;和&#60;h2&#62;标签设置宽度为780象素。然而，由于我们的目的是将可访问性最大化，因此我将去掉宽度设置使得页面能符合浏览器窗口的大小。而且我将让HTML页面使用浏览器的缺省边缘，而不是用原始代码的&#60;table&#62;标签来重新创建15象素的空白，这也使得其它例如打印机等的设备来使用它的缺省边缘设置。 　　表D显示了我创建的CSS文件。我将它命名为Mystylesheet.css并将它放置在网站根目录下的一个风格文件夹之中。 　　步骤5：在HTML文件上附加新的风格单 　　在创建了CSS文件之后，我在HTML文件中插入了它的风格。因为HTML文件已经包括了所有在CSS文件中引用的标签(&#60;h2&#62;和&#60;p&#62;)，所以我只需要连接到HTML文件头部的风格单上就可以了。HTML文件从CSS文件中获得风格并将他们应用到&#60;h2&#62;和&#60;p&#62;标签当中，如表E所示。 　　步骤6：验证代码 　　整个过程的最后一个步骤就是验证HTML代码的可访问性。如果你对于CSS来说是个新手的话，你最好对CSS代码也进行验证。有很多种的工具都可以帮你对二者进行验证。 　　我使用Dreamweaver MX来检查我的样本代码的可访问性。你可以通过在文件菜单中选择Check Page然后选择Check Accessibility来实现。任何错误或是警告都会显示出来，还包括出现位置的行号以及对问题简要的解释。你可以在Dreamweaver MX的Reference工具中找到更多关于这些错误和警告的内容。你只要从Dreamweaver的Windows菜单中选择Reference然后从Book菜单中选择UsableNet Accessibility Reference就可以了。 　　此外，World Wide Web Consortium (W3C)提供了超过30个的可访问性评估工具的链接。W3C还提供了针对HTML和CSS的基于Web的免费验证器。 　　可访问性和简单的管理 　　虽然这里给出的例子是很简单的，但它说明了利用CSS使你的站点更加具有可访问性是非常容易的。而且，对于CSS的使用不止这一个优点而已。 　　基于CSS的网站要比仅仅只有HTML的网站要好管理得多。CSS文件中的风格上的变化可以应用到整个网站中而不需要改变网站中任何的HTML文件。而且CSS的使用缩小了每一个HTML文件的整体文件大小，因为所有的风格信息都存储在了CSS文件之中。 　　因此如果你想要改善可访问性的话，将其视为一个机会，而不是一个障碍。要了解更多关于CSS和可访问性的内容，你可以去看一看World Wide Web Consortium中的Web Accessibility Initiative。  ]]></description>
		<wfw:commentRss>http://www.songlecn.com/2009/06/1067/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>解决IE和Mozilla的布局差别的利器：“!important”</title>
		<link>http://www.songlecn.com/2009/06/1058/</link>
		<comments>http://www.songlecn.com/2009/06/1058/#comments</comments>
		<pubDate>Fri, 05 Jun 2009 02:11:10 +0000</pubDate>
		<dc:creator>船长</dc:creator>
				<category><![CDATA[css]]></category>
		<category><![CDATA[css教程]]></category>
		<category><![CDATA[important]]></category>

		<guid isPermaLink="false">http://www.songlecn.com/?p=1058</guid>
		<description><![CDATA[初学div+css网页布局的设计者常常会被一个问题困扰着。 在IE和其他(Mozilla、Opera等)浏览器里显示的效果常常会偏差2px。 这是因为IE对盒之间距离的解释的bug造成的。一个技巧提示帮我们找到了解决的方法：用!important。 !important是CSS1就定义的语法，作用是提高指定样式规则的应用优先权。 语法格式{ sRule!important }，即写在定义的最后面，如： Example Source Code box{color:red !important;}  最重要的一点是：IE一直都不支持这个语法，而其他的浏览器都支持。我们就可以利用这一点来分别给IE和其它浏览器不同的样式定义。如： Example Source Code .colortest {  border:20px  solid #000 !important; border:20px  solid #CCC; padding: 30px; width : 300px; }  在Mozilla中浏览时候，能够理解!important的优先级，因此显示#000的颜色； 在IE中浏览时候，不能够理解!important的优先级，因此显示#CCC的颜色。 可以看到，利用!important，我们可以针对IE和非IE浏览器设置不同的样式，只要在非IE浏览器样式的后面加上!important。  !important必定成为CSS布局的利器，请记住它、掌握它、并合理的加以利用！]]></description>
		<wfw:commentRss>http://www.songlecn.com/2009/06/1058/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>css教程：CSS语法</title>
		<link>http://www.songlecn.com/2009/06/1052/</link>
		<comments>http://www.songlecn.com/2009/06/1052/#comments</comments>
		<pubDate>Thu, 04 Jun 2009 02:22:16 +0000</pubDate>
		<dc:creator>船长</dc:creator>
				<category><![CDATA[css]]></category>
		<category><![CDATA[css教程]]></category>
		<category><![CDATA[CSS语法]]></category>

		<guid isPermaLink="false">http://www.songlecn.com/?p=1052</guid>
		<description><![CDATA[CSS语法 The CSS syntax is made up of three parts: a selector, a property and a value: CSS的语法由三部分组成: 一个选择器，一个属性和一个值： Example Source Code selector {property: value} The selector is normally the HTML element/tag you wish to define,  the property is the attribute you wish to change, and each property can take a value.  The property and value are separated by a colon, and surrounded by curly braces: 选择器是你希望去定义的HTML元素/标签，改变属性，每个属性可以有一个值，属性和值由冒号区分开外面用大括号括起来： Example Source Code body {color: black} Note: If  the value is multiple words, put quotes around the value: 注意：如果值为多个单词则用双引号括起来： Example Source Code p {font-family: &#8221;sans serif&#8221;} Note: If you wish to specify more than one property, you must separate each property with a semicolon. The example below shows how to define a center aligned paragraph, with a red text color: 注意：如果你想指定多个属性，你就必须将每个属性用分号隔开，下面的例子就演示了怎样定义居中红色文字段落： Example Source Code p {text-align:center;color:red} To make the style definitions more readable, you can describe one property on each line, like this: 为了让样式定义更有可读性，你可以像这样分行描述属性： Example Source Code p { text-align: center; color: black; font-family: aria l} Grouping 组合 You can group selectors. Separate each selector with a comma. In the example below we have grouped all the header elements. All header elements will be displayed in green text color: 你可以将选择器组合。用逗号分隔每个选择器。下的例子将所有的标题元素组合起来，它们的颜色都变为绿色：   Example Source Code h1,h2,h3,h4,h5,h6  { color: green } The class Selector 类选择器 With the class selector you can define different styles for the same type of HTML element. 用选择器类你可以将同一类型的HTML元素定义出不同的样式。 Say that you would like to have two types of paragraphs in your document: one right-aligned paragraph, and one center-aligned paragraph. Here is how you can do it with styles:  [...]]]></description>
		<wfw:commentRss>http://www.songlecn.com/2009/06/1052/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>css教程：如何正确的使用CSS？</title>
		<link>http://www.songlecn.com/2009/06/1043/</link>
		<comments>http://www.songlecn.com/2009/06/1043/#comments</comments>
		<pubDate>Wed, 03 Jun 2009 02:11:49 +0000</pubDate>
		<dc:creator>船长</dc:creator>
				<category><![CDATA[css]]></category>
		<category><![CDATA[css教程]]></category>
		<category><![CDATA[插入样式表]]></category>

		<guid isPermaLink="false">http://www.songlecn.com/?p=1043</guid>
		<description><![CDATA[How to Insert a Style Sheet 怎样插入样式表 When a browser reads a style sheet, it will format the document according to it. There are three ways of inserting a style sheet:  当浏览器阅读样式表，它会依据它（样式表）来格式化文档。有三种方法可以插入样式表： External Style Sheet 外部样式表 An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the &#60;link&#62; tag. The &#60;link&#62; tag goes inside the head section:  使用外部样式表是使样式应用于多张网页的理想方法。通过这个方法你只需改动一个文件就能改变整个网站的外观。使用&#60;link&#62;标签让每个页面都连接到样式表。&#60;link&#62;标签在head区域使用： Example Source Code &#60;head&#62; &#60;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221;href=&#8221;mystyle.css&#8221; /&#62; &#60;/head&#62; The browser will read the style definitions from the file mystyle.css, and format the document according to it.  浏览器将从mystyle.css文件中读取样式定义信息，并依据它来格式化文档  An external style sheet can be written in any text editor. The file should not contain any html tags. Your style sheet should be saved with a .css extension. An example of a style sheet file is shown below:  外部样式表可以用任何一个文字编辑器来书写。文件不应该包含任何的html标签。并保存为一个后缀为.css的文件.下面是一个样式表文件的内容: Example Source Code hr {color: sienna} p {margin-left: 20px} body {background-image: url(&#8220;/gyang/editer/UploadFile/08-4/2008415101052300.gif&#8221;)} Do NOT leave spaces between the property value and the units! If you use &#8221;margin-left: 20 px&#8221; instead of &#8221;margin-left: 20px&#8221; it will only work properly in IE6 but it will not work in Mozilla/Firefox or Netscape. 请不要在属性值和其单位间加上空格！如果你用&#8221;margin-left: 20 px“来代替&#8221;margin-left: 20px&#8221;的话，这也许在IE6中能正常工作,但在Mozilla/Firefox或Netscape中就无法正常显示了。 Internal Style Sheet 内嵌样式表 An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section by using the &#60;style&#62; tag, like this:  一份内嵌样式表应该在当有单独文档有特殊样式的时候使用。使用&#60;style&#62;标签在head区域内定义样式，像这样： &#60;head&#62; &#60;style type=&#8221;text/css&#8221;&#62; hr {color: sienna} p {margin-left: 20px} body {background-image: url(&#8220;/gyang/editer/UploadFile/08-4/2008415101052300.gif&#8221;)} &#60;/style&#62; &#60;/head&#62; The browser will now read the style definitions, and format the document according to it.  浏览器将立即读取样式定义，并依据它来格式化文档。 Note: A browser normally ignores unknown tags. This means that an old browser that does not support styles, will ignore the &#60;style&#62; tag, but the content of the &#60;style&#62; tag will be displayed on the page. It is possible to prevent an old browser from displaying the content by hiding it in the HTML comment element:   注意：浏览器一般会忽略未知的标签。这就意味着老的浏览器不能支持样式，会忽略&#60;style&#62;标签，但&#60;style&#62;里的内容会显示在页面上。在HTML注释元素中隐藏它可以来避免这类情况在老的浏览器中发生： Example Source Code &#60;head&#62; &#60;style type=&#8221;text/css&#8221;&#62; &#60;!&#8211; hr {color: sienna} p {margin-left: 20px} body {background-image: url(&#8220;/gyang/editer/UploadFile/08-4/2008415101052300.gif&#8221;)} &#8211;&#62; &#60;/style&#62; &#60;/head&#62; Inline Styles 行内样式  [...]]]></description>
		<wfw:commentRss>http://www.songlecn.com/2009/06/1043/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>css教程：CSS背景background属性的应用</title>
		<link>http://www.songlecn.com/2009/06/1038/</link>
		<comments>http://www.songlecn.com/2009/06/1038/#comments</comments>
		<pubDate>Tue, 02 Jun 2009 02:27:53 +0000</pubDate>
		<dc:creator>船长</dc:creator>
				<category><![CDATA[css]]></category>
		<category><![CDATA[background]]></category>
		<category><![CDATA[css教程]]></category>

		<guid isPermaLink="false">http://www.songlecn.com/?p=1038</guid>
		<description><![CDATA[The CSS background properties define the background effects of an element. CSS的background属性可为元素定义背景效果。 设置背景颜色 Set the background color This example demonstrates how to set the background color for an element. 实例： &#60;html&#62; &#60;head&#62; &#60;style type=&#8221;text/css&#8221;&#62; body {background-color: yellow} h1 {background-color: #00ff00} h2 {background-color: transparent} p {background-color: rgb(250,0,255)} &#60;/style&#62; &#60;/head&#62; &#60;body&#62; &#60;h1&#62;标题一&#60;/h1&#62; &#60;h2&#62;标题二&#60;/h2&#62; &#60;p&#62;段落&#60;/p&#62; &#60;/body&#62; &#60;/html&#62; 设置背景图片 Set an image as the background This example demonstrates how to set an image as the background 实例： &#60;html&#62; &#60;head&#62; &#60;style type=&#8221;text/css&#8221;&#62; body { background-image:url(&#8216;attachments/month_0612/52006129151936.jpg&#8217;) } &#60;/style&#62; &#60;/head&#62; &#60;body&#62; &#60;/body&#62; &#60;/html&#62; 重复背景图片 How to repeat a background image This example demonstrates how to repeat a background image. 实例： &#60;html&#62; &#60;head&#62; &#60;style type=&#8221;text/css&#8221;&#62; body { background-image: [...]]]></description>
		<wfw:commentRss>http://www.songlecn.com/2009/06/1038/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>css教程：CSS文字属性的应用</title>
		<link>http://www.songlecn.com/2009/06/1032/</link>
		<comments>http://www.songlecn.com/2009/06/1032/#comments</comments>
		<pubDate>Mon, 01 Jun 2009 02:06:02 +0000</pubDate>
		<dc:creator>船长</dc:creator>
				<category><![CDATA[css]]></category>
		<category><![CDATA[css教程]]></category>
		<category><![CDATA[文字属性]]></category>

		<guid isPermaLink="false">http://www.songlecn.com/?p=1032</guid>
		<description><![CDATA[The CSS text properties define the appearance of text. CSS文字属性可用来定义文字的外观 设置文字的颜色 Set the color of the text This example demonstrates how to set the color of the text. &#60;html&#62; &#60;head&#62; &#60;style type=&#8221;text/css&#8221;&#62; h1 {color: #00ff00} h2 {color: #dda0dd} p {color: rgb(0,0,255)} &#60;/style&#62; &#60;/head&#62; &#60;body&#62; &#60;h1&#62;标题一&#60;/h1&#62; &#60;h2&#62;标题二52css.com&#60;/h2&#62; &#60;p&#62;段落&#60;/p&#62; &#60;/body&#62; &#60;/html&#62; 设置文字背景色 Set the background-color of the text This example demonstrates how to set the background-color of a part of the text. Examples 实例： &#60;html&#62; &#60;head&#62; &#60;style type=&#8221;text/css&#8221;&#62; span.highlight { background-color:yellow } &#60;/style&#62; &#60;/head&#62; &#60;body&#62; &#60;p&#62; &#60;span class=&#8221;highlight&#8221;&#62;This is a text.&#60;/span&#62; This is a text. This is a text. &#60;span class=&#8221;highlight&#8221;&#62;52css.com [...]]]></description>
		<wfw:commentRss>http://www.songlecn.com/2009/06/1032/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>css教程：CSS字体font属性的应用</title>
		<link>http://www.songlecn.com/2009/05/1024/</link>
		<comments>http://www.songlecn.com/2009/05/1024/#comments</comments>
		<pubDate>Sun, 31 May 2009 02:53:53 +0000</pubDate>
		<dc:creator>船长</dc:creator>
				<category><![CDATA[css]]></category>
		<category><![CDATA[css教程]]></category>
		<category><![CDATA[font]]></category>

		<guid isPermaLink="false">http://www.songlecn.com/?p=1024</guid>
		<description><![CDATA[The CSS font properties define the font in text. CSS字体属性可定义文字所使用的字体。 设置文字的字体 Set the font of a text This example demonstrates how to set a font of a text. Examples 实例： &#60;html&#62; &#60;head&#62; &#60;style type=&#8221;text/css&#8221;&#62; h3 {font-family: times} h5 {font-family: arial} p {font-family: courier} p.sansserif {font-family: sans-serif} &#60;/style&#62; &#60;/head&#62; &#60;body&#62; &#60;h3&#62;This is header 3&#60;/h3&#62; &#60;h5&#62;www.52css.com&#60;/h5&#62; &#60;p&#62;This is a paragraph&#60;/p&#62; &#60;p class=&#8221;sansserif&#8221;&#62;This is a paragraph&#60;/p&#62; &#60;/body&#62; &#60;/html&#62; 设置字体的大小 Set the size of the font This example demonstrates how to set the size of a font. Examples 实例： &#60;html&#62; &#60;head&#62; &#60;style type=&#8221;text/css&#8221;&#62; h1 {font-size: 150%} h2 {font-size: 130%} p {font-size: [...]]]></description>
		<wfw:commentRss>http://www.songlecn.com/2009/05/1024/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>css教程：CSS边框border属性的应用</title>
		<link>http://www.songlecn.com/2009/05/1017/</link>
		<comments>http://www.songlecn.com/2009/05/1017/#comments</comments>
		<pubDate>Wed, 27 May 2009 02:54:18 +0000</pubDate>
		<dc:creator>船长</dc:creator>
				<category><![CDATA[css]]></category>
		<category><![CDATA[border]]></category>
		<category><![CDATA[css教程]]></category>

		<guid isPermaLink="false">http://www.songlecn.com/?p=1017</guid>
		<description><![CDATA[The CSS border properties define the borders around an element. CSS边框属性用来定义环绕元素的边框（样式） 设置四个边框的样式 Set the style of the four borders This example demonstrates how to set the style of the four borders. Examples 实例： &#60;html&#62; &#60;head&#62; &#60;style type=&#8221;text/css&#8221;&#62; p.dotted {border-style: dotted} p.dashed {border-style: dashed} p.solid {border-style: solid} p.double {border-style: double} p.groove {border-style: groove} p.ridge {border-style: ridge} p.inset {border-style: inset} p.outset {border-style: outset} &#60;/style&#62; &#60;/head&#62; &#60;body&#62; &#60;p class=&#8221;dotted&#8221;&#62;虚点边框&#60;/p&#62; &#60;p class=&#8221;dashed&#8221;&#62;虚线边框&#60;/p&#62; &#60;p class=&#8221;solid&#8221;&#62;实线边框&#60;/p&#62; &#60;p class=&#8221;double&#8221;&#62;空心边框&#60;/p&#62; &#60;p class=&#8221;groove&#8221;&#62;虚边框&#60;/p&#62; &#60;p class=&#8221;ridge&#8221;&#62;实边框&#60;/p&#62; &#60;p class=&#8221;inset&#8221;&#62;凹边框&#60;/p&#62; &#60;p class=&#8221;outset&#8221;&#62;凸边框&#60;/p&#62; &#60;/body&#62; &#60;/html&#62; 分别设置每个边框 Set different borders on each side [...]]]></description>
		<wfw:commentRss>http://www.songlecn.com/2009/05/1017/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>css教程：CSS边距margin属性的应用</title>
		<link>http://www.songlecn.com/2009/05/1009/</link>
		<comments>http://www.songlecn.com/2009/05/1009/#comments</comments>
		<pubDate>Tue, 26 May 2009 01:47:58 +0000</pubDate>
		<dc:creator>船长</dc:creator>
				<category><![CDATA[css]]></category>
		<category><![CDATA[css教程]]></category>
		<category><![CDATA[margin]]></category>

		<guid isPermaLink="false">http://www.songlecn.com/?p=1009</guid>
		<description><![CDATA[The CSS margin properties define the space around elements. CSS的边距属性定义元素周围的空间范围  设置文字左边距 Set the left margin of a text This example demonstrates how to set the left margin of a text. Examples 实例： &#60;html&#62; &#60;head&#62; &#60;style type=&#8221;text/css&#8221;&#62; p.leftmargin {margin-left: 2cm} &#60;/style&#62; &#60;/head&#62; &#60;body&#62; &#60;p&#62;This is a paragraph with no margin specified&#60;/p&#62; &#60;p class=&#8221;leftmargin&#8221;&#62;This is a paragraph with a specified left margin [www.52css.com]&#60;/p&#62; &#60;/body&#62; &#60;/html&#62; 设置文字右边距 Set the right margin of a text This example demonstrates how to set the right margin of a text. Examples 实例： &#60;html&#62; &#60;head&#62; &#60;style type=&#8221;text/css&#8221;&#62; p.rightmargin {margin-right: 8cm} &#60;/style&#62; &#60;/head&#62; &#60;body&#62; &#60;p&#62;This is a paragraph with no [...]]]></description>
		<wfw:commentRss>http://www.songlecn.com/2009/05/1009/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>css教程：CSS填充padding属性的应用</title>
		<link>http://www.songlecn.com/2009/05/1002/</link>
		<comments>http://www.songlecn.com/2009/05/1002/#comments</comments>
		<pubDate>Mon, 25 May 2009 02:06:53 +0000</pubDate>
		<dc:creator>船长</dc:creator>
				<category><![CDATA[css]]></category>
		<category><![CDATA[css教程]]></category>
		<category><![CDATA[padding]]></category>

		<guid isPermaLink="false">http://www.songlecn.com/?p=1002</guid>
		<description><![CDATA[CSS填充属性定元素边框到内部内容间的距离 设置左填充 Set the left padding This example demonstrates how to set the left padding of a tablecell. Examples 实例： &#60;html&#62; &#60;head&#62; &#60;style type=&#8221;text/css&#8221;&#62; td {padding-left: 2cm} &#60;/style&#62; &#60;/head&#62; &#60;body&#62; &#60;table border=&#8221;1&#8243;&#62; &#60;tr&#62; &#60;td&#62; This is a tablecell with a left padding. www.xsheji.com.cn . This is a tablecell with a left padding. &#60;/td&#62; &#60;/tr&#62; &#60;/table&#62; &#60;/body&#62; &#60;/html&#62; 设置右填充 Set the right padding This example demonstrates how to set the right padding of a tablecell. Examples 实例： &#60;html&#62; &#60;head&#62; &#60;style type=&#8221;text/css&#8221;&#62; td {padding-right: 5cm} &#60;/style&#62; &#60;/head&#62; &#60;body&#62; &#60;table [...]]]></description>
		<wfw:commentRss>http://www.songlecn.com/2009/05/1002/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>css模板系列(50)</title>
		<link>http://www.songlecn.com/2009/05/991/</link>
		<comments>http://www.songlecn.com/2009/05/991/#comments</comments>
		<pubDate>Fri, 22 May 2009 02:18:20 +0000</pubDate>
		<dc:creator>船长</dc:creator>
				<category><![CDATA[css模板]]></category>
		<category><![CDATA[css]]></category>

		<guid isPermaLink="false">http://www.songlecn.com/?p=991</guid>
		<description><![CDATA[css模板系列(50)，第五十波，内有静态文件html，css，图片或部分js文件，敬请参考学习，效果图：]]></description>
		<wfw:commentRss>http://www.songlecn.com/2009/05/991/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>css模板系列(49)</title>
		<link>http://www.songlecn.com/2009/05/984/</link>
		<comments>http://www.songlecn.com/2009/05/984/#comments</comments>
		<pubDate>Thu, 21 May 2009 02:34:09 +0000</pubDate>
		<dc:creator>船长</dc:creator>
				<category><![CDATA[css模板]]></category>
		<category><![CDATA[css]]></category>

		<guid isPermaLink="false">http://www.songlecn.com/?p=984</guid>
		<description><![CDATA[css模板系列(49)，第四十九波，内有静态文件html，css，图片或部分js文件，敬请参考学习，效果图：]]></description>
		<wfw:commentRss>http://www.songlecn.com/2009/05/984/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>css模板系列(48)</title>
		<link>http://www.songlecn.com/2009/05/972/</link>
		<comments>http://www.songlecn.com/2009/05/972/#comments</comments>
		<pubDate>Wed, 20 May 2009 02:12:41 +0000</pubDate>
		<dc:creator>船长</dc:creator>
				<category><![CDATA[css模板]]></category>
		<category><![CDATA[css]]></category>

		<guid isPermaLink="false">http://www.songlecn.com/2009/05/972/</guid>
		<description><![CDATA[css模板系列(48)，第四十八波，内有静态文件html，css，图片或部分js文件，敬请参考学习，效果图：]]></description>
		<wfw:commentRss>http://www.songlecn.com/2009/05/972/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>css模板系列(47)</title>
		<link>http://www.songlecn.com/2009/05/965/</link>
		<comments>http://www.songlecn.com/2009/05/965/#comments</comments>
		<pubDate>Tue, 19 May 2009 02:13:59 +0000</pubDate>
		<dc:creator>船长</dc:creator>
				<category><![CDATA[css模板]]></category>
		<category><![CDATA[css]]></category>

		<guid isPermaLink="false">http://www.songlecn.com/?p=965</guid>
		<description><![CDATA[css模板系列(47)，第七波，内有静态文件html，css，图片或部分js文件，敬请参考学习，效果图：]]></description>
		<wfw:commentRss>http://www.songlecn.com/2009/05/965/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>css模板系列(46)</title>
		<link>http://www.songlecn.com/2009/05/956/</link>
		<comments>http://www.songlecn.com/2009/05/956/#comments</comments>
		<pubDate>Mon, 18 May 2009 01:57:58 +0000</pubDate>
		<dc:creator>船长</dc:creator>
				<category><![CDATA[css模板]]></category>
		<category><![CDATA[css]]></category>

		<guid isPermaLink="false">http://www.songlecn.com/2009/05/956/</guid>
		<description><![CDATA[css模板系列(46)，第四十七波，内有静态文件html，css，图片或部分js文件，敬请参考学习，效果图：]]></description>
		<wfw:commentRss>http://www.songlecn.com/2009/05/956/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>css模板系列(45)</title>
		<link>http://www.songlecn.com/2009/05/949/</link>
		<comments>http://www.songlecn.com/2009/05/949/#comments</comments>
		<pubDate>Fri, 15 May 2009 00:10:22 +0000</pubDate>
		<dc:creator>船长</dc:creator>
				<category><![CDATA[css模板]]></category>
		<category><![CDATA[css]]></category>

		<guid isPermaLink="false">http://www.songlecn.com/?p=949</guid>
		<description><![CDATA[css模板系列(45)，第四十五波，内有静态文件html，css，图片或部分js文件，敬请参考学习，效果图：]]></description>
		<wfw:commentRss>http://www.songlecn.com/2009/05/949/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>css模板系列(44)</title>
		<link>http://www.songlecn.com/2009/05/942/</link>
		<comments>http://www.songlecn.com/2009/05/942/#comments</comments>
		<pubDate>Thu, 14 May 2009 01:58:40 +0000</pubDate>
		<dc:creator>船长</dc:creator>
				<category><![CDATA[css模板]]></category>
		<category><![CDATA[css]]></category>

		<guid isPermaLink="false">http://www.songlecn.com/?p=942</guid>
		<description><![CDATA[css模板系列(44)，第四十四波，内有静态文件html，css，图片或部分js文件，敬请参考学习，效果图：]]></description>
		<wfw:commentRss>http://www.songlecn.com/2009/05/942/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

