WordPress做网站|企业网站SEO|外贸网站优化|SEO视频教程 » CSS权威指南第三版 http://ximicc.com - 西米CC Wed, 16 May 2012 03:30:34 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 免费HTML入门到精通新手经典指南教程（3）基本的 HTML 标签 http://ximicc.com/css-tutorial/html-meta http://ximicc.com/css-tutorial/html-meta#comments Mon, 30 Nov 2009 14:37:28 +0000 admin http://ximicc.com/wordpress-plugin/%e5%85%8d%e8%b4%b9html%e5%85%a5%e9%97%a8%e5%88%b0%e7%b2%be%e9%80%9a%e6%96%b0%e6%89%8b%e7%bb%8f%e5%85%b8%e6%8c%87%e5%8d%97%e6%95%99%e7%a8%8b%ef%bc%883%ef%bc%89%e5%9f%ba%e6%9c%ac%e7%9a%84-html-%e6%a0%87/ 学习 HTML 最好的方式就是边学边做实验。我们为您准备了很好的 HTML 编辑器。使用这个编辑器，您可以任意编辑一段 HTML 源码，然后单击 TIY 按钮来查看结果。
标题
标题使用 h1>至 h6 标签进行定义，h1定义最大的标题，h6定义最小的标题。
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
HTML 会自动在标题前后添加一个额外的折行。
段落
段落使用
标签进行定义。

This is a paragraph
This is another paragraph

HTML 会自动在段落前后添加一个额外的空行。
不要忘记关闭标签
您可能注意到了，在编写段落时可以不带有
标签：

This is a paragraph
This is another paragraph
上面的例子在大多数浏览器中都可以工作，但是不要依赖这种做法。
HTML 未来的版本不允许省略任何结束标签。
通过结束标签来关闭 HTML 是一种经得起未来考验的 HTML 编写方法。清楚地标记某个元素在何处开始，并在何处结束，不论对您还是对浏览器来说，都会使代码更容易理解。
 HTML 中最重要的标签是定义标题、段落和换行的标签。

学习 HTML 最好的方式就是边学边做实验。我们为您准备了很好的 HTML 编辑器。使用这个编辑器，您可以任意编辑一段 HTML 源码，然后单击 TIY 按钮来查看结果。

标题

标题使用 h1>至 h6 标签进行定义，h1定义最大的标题，h6定义最小的标题。

  1. <h1>This is a heading</h1>
  2. <h2>This is a heading</h2>
  3. <h3>This is a heading</h3>
  4. <h4>This is a heading</h4>
  5. <h5>This is a heading</h5>
  6. <h6>This is a heading</h6>

HTML 会自动在标题前后添加一个额外的折行。

段落

段落使用

标签进行定义。

This is a paragraph

This is another paragraph

HTML 会自动在段落前后添加一个额外的空行。

不要忘记关闭标签

您可能注意到了，在编写段落时可以不带有

标签：

This is a paragraph

This is another paragraph

上面的例子在大多数浏览器中都可以工作，但是不要依赖这种做法。

HTML 未来的版本不允许省略任何结束标签。

通过结束标签来关闭 HTML 是一种经得起未来考验的 HTML 编写方法。清楚地标记某个元素在何处开始，并在何处结束，不论对您还是对浏览器来说，都会使代码更容易理解。

换行符

当你打算结束一行，而又不想开始一个新段落时，
标签就派上用场了。无论你将它置于何处，
标签都会产生一个强制的换行。

标签是空白标签，由于关闭标签没有任何意义，因此它没有类似
的终止标签。


还是

您会越来越多地发现
与
很相似。

由于
没有结束标签，它也就违反了未来的 HTML 的规则之一，即所有的元素都必须关闭。把这个标签写为
是经得起未来考验的做法，XHTML 和 XML 都接受在打开的标签内部来关闭标签的做法。

HTML 注释

注释标签用于在 HTML 源码中插入注释。注释会被浏览器忽略。您可以使用注释对您的代码进行解释，这么做在以后的日子里会对您的代码编辑产生帮助。

注意：左括号后需要写一个惊叹号，右括号前就不需要了。

对 HTML 元素的重新认识

每个 HTML 元素都有一个元素名（比如 body、h1、p、br）
开始标签是被括号包围的元素名
结束标签是被括号包围的斜杠和元素名
元素内容位于开始标签和结束标签之间
某些 HTML 元素没有内容
某些 HTML 元素没有结束标签

基本的注意事项 – 有益的提示

当您写 HTML 文本的时候，你永远也没法确定这些文本在另一台显示器上是如何显示的。一些人使用大显示器，而另一些使用小的。当用户调整视窗的分辨率时，这些文本就会被重新格式化。所以不要通过在文本中添加空行和空格的办法在你的编辑器中格式化文本。

HTML 会裁掉文本中所有的空格。任何数量的空格都被按一个空格计数。另外，在 HTML 中，一个空行也被当作一个空格。

使用空的段落标记

去插入一个空行是个坏习惯。用
标签代替它！但是不要用
标签去创建列表。不要着急，您将在稍后的篇幅学习到 HTML 列表。您也许已经注意到了，在没有结束标签

的情况下，

标签依然可以正常工作。不过不要这样做！下一个版本的 HTML 将不允许忽略任何的结束标签。

HTML 会自动地在某些元素前后添加一个额外的空行，比如段落、标题元素前后。使用水平线 (

标签) 来分隔文章中的小节是一个办法（但并不是唯一的办法）。

[ 以下内容您也可能感兴趣 ]

]]> http://ximicc.com/css-tutorial/html-meta/feed 0 免费HTML入门到精通新手经典指南教程（1）HTML是什么 http://ximicc.com/css-tutorial/what-is-html http://ximicc.com/css-tutorial/what-is-html#comments Sat, 28 Nov 2009 13:06:31 +0000 admin http://ximicc.com/wordpress-plugin/%e5%85%8d%e8%b4%b9html%e5%85%a5%e9%97%a8%e5%88%b0%e7%b2%be%e9%80%9a%e6%96%b0%e6%89%8b%e7%bb%8f%e5%85%b8%e6%8c%87%e5%8d%97%e6%95%99%e7%a8%8b%ef%bc%881%ef%bc%89html%e6%98%af%e4%bb%80%e4%b9%88/ HTML 指超文本标签语言。
HTML 文件是包含一些标签的文本文件。
这些标签告诉 WEB 浏览器如何显示页面。
HTML 文件必须使用 htm 或者 html 作为文件扩展名。
HTML 文件可以通过简单的文本编辑器来创建。
做个实验如何？
第一步：如果您使用 Windows，请启动记事本。
如果您使用 Mac，请启动 SimpleText。在 OSX 中请使用 TextEdit，并设置一下参数：在参数设置中选择 Plain text 字体替代 Rich text 字体，然后选择“在 HTML 文件中忽略 rich text 命令”。这一点很重要，因为不这样的话，HTML 代码也许不能正常工作。
第二步：键入以下文本：
<html>
<head>
<title>页面的标题</title>
</head>
<body>
<p>这是我的第一个页面。<b>这是粗体文本。</b></p>
</body>
</html>
第三步：将这个文件存为 “mypage.html”。
第四步：启动您的浏览器。在浏览器的文件菜单中选择“打开”或者“打开页面”。这时会弹出一个对话框。单击“浏览”或者“选择文件”，找到您刚才创建的文件 – “mypage.html”，选定它然后打开，现在您会看到对话框中有一行地址，比如：”D:\mypage.html”。单击确定按钮，浏览器就会显示这个页面。
例子解释
HTML 文件中的第一个标签是 html。这个标签告诉浏览器这个 HTML 文件的开始点。文件中最后一个标签是 /html。这个标签告诉您的浏览器，这是 HTML 文件的结束点。
位于 head 标签和 /head 标签之间的文本是头信息。头信息不会显示在浏览器窗口中。
title标签中的文本是文件的标题。标题会显示在浏览器的标题栏。
body标签中的文本是将被浏览器显示出来的文本。
b 和 /b 标签中的文本将以粗体显示。
为什么我们要使用小写的标签？
我们刚才讲到：HTML 标签对大小写是不敏感的：b 和 B 的作用的相同的。当您在网上冲浪时，您会发现大多数教程在他们的例子中都使用大写的 ...]]> 什么是 HTML 文件？

HTML 指超文本标签语言。
HTML 文件是包含一些标签的文本文件。
这些标签告诉 WEB 浏览器如何显示页面。
HTML 文件必须使用 htm 或者 html 作为文件扩展名。
HTML 文件可以通过简单的文本编辑器来创建。

做个实验如何？

第一步：如果您使用 Windows，请启动记事本。
如果您使用 Mac，请启动 SimpleText。在 OSX 中请使用 TextEdit，并设置一下参数：在参数设置中选择 Plain text 字体替代 Rich text 字体，然后选择“在 HTML 文件中忽略 rich text 命令”。这一点很重要，因为不这样的话，HTML 代码也许不能正常工作。

第二步：键入以下文本：

  1. <html>
  2. <head>
  3. <title>页面的标题</title>
  4. </head>
  5. <body>
  6. <p>这是我的第一个页面。<b>这是粗体文本。</b></p>
  7. </body>
  8. </html>

第三步：将这个文件存为 “mypage.html”。

第四步：启动您的浏览器。在浏览器的文件菜单中选择“打开”或者“打开页面”。这时会弹出一个对话框。单击“浏览”或者“选择文件”，找到您刚才创建的文件 – “mypage.html”，选定它然后打开，现在您会看到对话框中有一行地址，比如：”D:\mypage.html”。单击确定按钮，浏览器就会显示这个页面。

例子解释

HTML 文件中的第一个标签是 html。这个标签告诉浏览器这个 HTML 文件的开始点。文件中最后一个标签是 /html。这个标签告诉您的浏览器，这是 HTML 文件的结束点。

位于 head 标签和 /head 标签之间的文本是头信息。头信息不会显示在浏览器窗口中。

title标签中的文本是文件的标题。标题会显示在浏览器的标题栏。
body标签中的文本是将被浏览器显示出来的文本。
b 和 /b 标签中的文本将以粗体显示。

为什么我们要使用小写的标签？

我们刚才讲到：HTML 标签对大小写是不敏感的：b 和 B 的作用的相同的。当您在网上冲浪时，您会发现大多数教程在他们的例子中都使用大写的 HTML 标签。而我们总是使用小写。原因何在呢？

如果您希望为使用下一代 HTML 而做好准备，您就应该使用小写标签。万维网联盟 (W3C) 的标准是：建议在 HTML 4 中使用小写标签，而在 XHTML（下一代 HTML）中，必须使用小写标签。

HTM 还是 HTML 扩展名？

当您将一个 HTML 文件存盘时，您即可以使用 HTM 也可以使用 HTML 作为扩展名。我们刚才使用了 .htm 作为上面那个例子的扩展名。不过这样做也许是一个坏习惯，习惯于这样做的人也许是因为使用某些过时的软件而养成了这个坏习惯，这些软件只允许三个字母作为扩展名。

如果您使用新近的软件，我们认为使用.html 是相当安全的做法。

关于 HTML 编辑器的注意事项

您可以使用所见即所得的编辑器而不是纯文本编辑器，这样会更轻松的编辑 HTML 文件。比方说 FrontPage, Claris Home Page, 或者 Adobe PageMill，甚至更高阶的 Dreamweaver。

常见问题（FAQ）

  • 我已经编辑了一个 HTML 文件，但是浏览器无法显示出结果。为什么？

    • 首先确定您使用了正确的文件名和扩展名存盘，比如说 “c:\mypage.htm”。然后看一下是否在浏览器中使用了同样的文件名来打开这个文件。

  • 我重新编辑了HTML 文件，但是浏览器的显示没有任何变化。为什么？

    • 为了不重复读取同一个页面，浏览器要对您的页面进行缓存。浏览器不会意识到您已经修改了页面。通过使用刷新或者重载按钮，您可以使浏览器读取编辑后的页面。

  • 我应该使用何种浏览器？

    • 您可以使用任何一款通用浏览器进行训练，例如 Internet Explorer, Mozilla, Netscape,或者 Opera。不过，我们的高级课程中的某些例子需要最新版本的浏览器的支持。

    [ 以下内容您也可能感兴趣 ]

    ]]>     http://ximicc.com/css-tutorial/what-is-html/feed 0     外部引用CSS中link与@import的区别 http://ximicc.com/css-tutorial/link-import http://ximicc.com/css-tutorial/link-import#comments Mon, 23 Nov 2009 13:03:00 +0000 admin http://ximicc.com/wordpress-plugin/%e5%a4%96%e9%83%a8%e5%bc%95%e7%94%a8css%e4%b8%adlink%e4%b8%8eimport%e7%9a%84%e5%8c%ba%e5%88%ab/ <style type="text/css" media="screen">
    @import url("http://www.taobao.com/home/css/global/v2.0.css?t=20070518.css");
    </style>
    而很多网站使用的都是link：
    <link rel="stylesheet" rev="stylesheet" href="default.css" type="text/css" media="all" />
    而像Google、百度、163等网站他们都是直接写在网页中，当然使用链接link和导入import的好处就是易于维护，但当网速比较慢的时候，会出现加载中断的情况，导致页面排版错误。它们的作用相同，唯一的不同是服务对象不一样：
    @import 为CSS服务，link是为当前的页服务。
    经典有网友说@import会优先执行。 这两天刚写完XHTML加载CSS的几种方式，其中外部引用CSS分为两种方式link和@import。本质上，这两种方式都是为了加载CSS文件，但还是存在着细微的差别。
    * 差别1：老祖宗的差别。link属于XHTML标签，而@import完全是CSS提供的一种方式。link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义Rel连接属性等，@import就只能加载CSS了。
    * 差别2：加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显（梦之都加载CSS 的方式就是使用@import，我一边下载一边浏览梦之都网页时，就会出现上述问题）。
    * 差别3：兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
    * 差别4：使用DOM控制样式时的差别。当使用Javascript控制DOM去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
    从上面的分析来看，还是使用link标签比较好。
    [ 以下内容您也可能感兴趣 ]

    免费HTML入门到精通新手经典指南教程（3）基本的 HTML 标签 (0)
    免费HTML入门到精通新手经典指南教程（1）HTML是什么 (0)
    如何转移或复制WordPress博客：主机空间数据搬家篇 (0)
    《CSS Zen Garden – CSS禅意花园》中文版学习笔记（22） (1)
    《CSS Zen Garden – CSS禅意花园》中文版学习笔记（20） (0)

    ]]>     看到淘宝网页中这样写使用的是import，而很多网站都是使用link，当然还有一些页面比较简单，流量很大的网站，是直接将CSS写在html代码中的，他们有什么区别？CSS用import还是link好?从经典论坛和另外一个网站大概了解了一下，看到淘宝网页中大部分是这样写的：

    1. <style type="text/css" media="screen">
    2. @import url("http://www.taobao.com/home/css/global/v2.0.css?t=20070518.css");
    3. </style>

    而很多网站使用的都是link：

    1. <link rel="stylesheet" rev="stylesheet" href="default.css" type="text/css" media="all" />

    而像Google、百度、163等网站他们都是直接写在网页中，当然使用链接link和导入import的好处就是易于维护，但当网速比较慢的时候，会出现加载中断的情况，导致页面排版错误。它们的作用相同，唯一的不同是服务对象不一样：

    @import 为CSS服务，link是为当前的页服务。

    经典有网友说@import会优先执行。 这两天刚写完XHTML加载CSS的几种方式，其中外部引用CSS分为两种方式link和@import。本质上，这两种方式都是为了加载CSS文件，但还是存在着细微的差别。

    * 差别1：老祖宗的差别。link属于XHTML标签，而@import完全是CSS提供的一种方式。link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义Rel连接属性等，@import就只能加载CSS了。

    * 差别2：加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显（梦之都加载CSS 的方式就是使用@import，我一边下载一边浏览梦之都网页时，就会出现上述问题）。

    * 差别3：兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。

    * 差别4：使用DOM控制样式时的差别。当使用Javascript控制DOM去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

    从上面的分析来看，还是使用link标签比较好。

    [ 以下内容您也可能感兴趣 ]

    ]]>     http://ximicc.com/css-tutorial/link-import/feed 0     《CSS权威指南 – 第3版》撷英笔记及配套视频：Grouping Selector–选择符群组 http://ximicc.com/css-tutorial/grouping-selctor http://ximicc.com/css-tutorial/grouping-selctor#comments Wed, 23 Sep 2009 15:03:44 +0000 admin http://ximicc.com/wordpress-plugin/%e3%80%8acss%e6%9d%83%e5%a8%81%e6%8c%87%e5%8d%97-%e7%ac%ac3%e7%89%88%e3%80%8b%e6%92%b7%e8%8b%b1%e7%ac%94%e8%ae%b0%e5%8f%8a%e9%85%8d%e5%a5%97%e8%a7%86%e9%a2%91%ef%bc%9agrouping-selctor%e2%80%93/ h2, p {color: gray;}
    不同的HTML标签之间用英文逗号进行分隔，告诉浏览器这里有多个标签元素，当然如果不加这个逗号也是一种选择符群组的方式，但却是完全不同的含义，这点稍后会提到。
    当CSS规则比较多的时候，选择符的群组可以很灵活，类似于数学中的交集和并集（不知道这个比喻恰不恰当，数学是偶的死穴…），可以衍生出多种不同的CSS编写方式，当然我们要从中总结最简洁的一种。书中举例相同效果的三种不同群组方式，我看着有点头晕，就不解释了：
    /* group 1 */
    h1 {color: silver; background: white;}
    h2 {color: silver; background: gray;}
    h3 {color: white; background: gray;}
    h4 {color: silver; background: white;}
    b {color: gray; background: white;}
    /* group 2 */
    h1, h2, h4 {color: silver;}
    h2, h3 {background: gray;}
    h1, h4, b {background: white;}
    h3 {color: white;}
    b {color: gray;}
    /* group 3 */
    h1, h4 {color: silver; background: white;}
    h2 {color: silver;}
    h3 {color: white;}
    h2, h3 {background: gray;}
    b {color: gray; background: white;}
    《CSS选择符群组》参考资料
    CSS选择符总结
    《CSS选择符群组》相关视频教程下载【FLV格式 – 5.36MB】
    《CSS权威指南 – 第3版》撷英笔记及配套视频：Grouping Selector–选择符群组
    [ ...]]>     如果要将网页中H2标题和段落都设置为灰色，可以使用以下选择符群组方式：

    1. h2, p {color: gray;}

    不同的HTML标签之间用英文逗号进行分隔，告诉浏览器这里有多个标签元素，当然如果不加这个逗号也是一种选择符群组的方式，但却是完全不同的含义，这点稍后会提到。

    当CSS规则比较多的时候，选择符的群组可以很灵活，类似于数学中的交集和并集（不知道这个比喻恰不恰当，数学是偶的死穴…），可以衍生出多种不同的CSS编写方式，当然我们要从中总结最简洁的一种。书中举例相同效果的三种不同群组方式，我看着有点头晕，就不解释了：

    1. /* group 1 */
    2. h1 {color: silver; background: white;}
    3. h2 {color: silver; background: gray;}
    4. h3 {color: white; background: gray;}
    5. h4 {color: silver; background: white;}
    6. b {color: gray; background: white;}
    1. /* group 2 */
    2. h1, h2, h4 {color: silver;}
    3. h2, h3 {background: gray;}
    4. h1, h4, b {background: white;}
    5. h3 {color: white;}
    6. b {color: gray;}
    1. /* group 3 */
    2. h1, h4 {color: silver; background: white;}
    3. h2 {color: silver;}
    4. h3 {color: white;}
    5. h2, h3 {background: gray;}
    6. b {color: gray; background: white;}

    《CSS选择符群组》参考资料

    CSS选择符总结

    《CSS选择符群组》相关视频教程下载【FLV格式 – 5.36MB】

    《CSS权威指南 – 第3版》撷英笔记及配套视频：Grouping Selector–选择符群组

    [ 以下内容您也可能感兴趣 ]

    ]]>     http://ximicc.com/css-tutorial/grouping-selctor/feed 0     《CSS权威指南 – 第3版》撷英笔记及配套视频：CSS元素选择符 http://ximicc.com/css-tutorial/css-element-selector http://ximicc.com/css-tutorial/css-element-selector#comments Tue, 22 Sep 2009 08:39:51 +0000 admin http://ximicc.com/wordpress-plugin/%e3%80%8acss%e6%9d%83%e5%a8%81%e6%8c%87%e5%8d%97-%e7%ac%ac3%e7%89%88%e3%80%8b%e6%92%b7%e8%8b%b1%e7%ac%94%e8%ae%b0%e5%8f%8a%e9%85%8d%e5%a5%97%e8%a7%86%e9%a2%91%ef%bc%9acss%e5%85%83%e7%b4%a0%e9%80%89/ In XML, a selector could be anything, since XML allows for the creation of new markup languages that can have just about anything as an element name.
    意即在XML中用户似乎可以自定义标签的名称（本人没有研究，所以不敢用肯定的语气…），因此任何字符串都可能以合法元素标签名的形式出现在CSS选择符的位置上。
    QUOTE {color: gray;}
    BIB {color: red;}
    BOOKTITLE {color: purple;}
    MYElement {color: red;}
    2.1.3. Declarations and Keywords – 声明和关键字
    其实这里翻译成”关键字”可能会让人容易混淆，但原书中的确使用了” Keywords”这个单词，记得描述CSS规则结构的那张图么，事实上这里的”关键字”指的就是”value”，即”值”。很多时候一条CSS声明的属性只有一个值，但也有多个值的情况，如font：
    p {font: medium Helvetica;}
    这里多个值之间用空格分隔，但还有一种特殊情况，依然是font中的字号和行高：
    P {font:12px/20px;}
    另外如果CSS中使用了错误的属性或值，会使得该声明失效，理论上这条作废的声明不会影响到该条CSS规则中的其它声明，但不论从哪个角度讲，我们应该尽量避免无效声明的出现。当然如果使用记事本来编写CSS的话谁都无法保证不出差错，在此建议大家不妨使用一些专门的CSS编辑软件，至少里面的代码提示功能可以从很大程度上降低拼写错误的概率。就我个人而言，除了DW之外，也只用过TopStyle，没有很强悍的发言权，但或多或少体验到了其中的便利。
    《CSS元素选择符》参考资料
    CSS编辑器TopStyle使用技巧
    TopStyle汉化正式版下载地址
    《CSS元素选择符》相关视频教程下载【FLV格式 – 5.36MB】
    《CSS权威指南 – 第3版》撷英及配套视频：- CSS选择符
    [ 以下内容您也可能感兴趣 ]

    《CSS权威指南 – 第3版》撷英笔记及配套视频：Grouping Selector–选择符群组 (0)
    《CSS权威指南 – 第3版》撷英笔记及配套视频：CSS Rule – CSS语法规则结构 (0)
     若是就HTML而言，CSS中的选择符除了自定义的class和id之外，一般就是预置的HTML元素标签了，如p、h1、em甚至html等。但是XML就不一样，原书中有这样一段话：

    In XML, a selector could be anything, since XML allows for the creation of new markup languages that can have just about anything as an element name.

    意即在XML中用户似乎可以自定义标签的名称（本人没有研究，所以不敢用肯定的语气…），因此任何字符串都可能以合法元素标签名的形式出现在CSS选择符的位置上。

    1. QUOTE {color: gray;}
    2. BIB {color: red;}
    3. BOOKTITLE {color: purple;}
    4. MYElement {color: red;}

    2.1.3. Declarations and Keywords – 声明和关键字

    其实这里翻译成”关键字”可能会让人容易混淆，但原书中的确使用了” Keywords”这个单词，记得描述CSS规则结构的那张图么，事实上这里的”关键字”指的就是”value”，即”值”。很多时候一条CSS声明的属性只有一个值，但也有多个值的情况，如font：

    1. p {font: medium Helvetica;}

    这里多个值之间用空格分隔，但还有一种特殊情况，依然是font中的字号和行高：

    1. P {font:12px/20px;}

    另外如果CSS中使用了错误的属性或值，会使得该声明失效，理论上这条作废的声明不会影响到该条CSS规则中的其它声明，但不论从哪个角度讲，我们应该尽量避免无效声明的出现。当然如果使用记事本来编写CSS的话谁都无法保证不出差错，在此建议大家不妨使用一些专门的CSS编辑软件，至少里面的代码提示功能可以从很大程度上降低拼写错误的概率。就我个人而言，除了DW之外，也只用过TopStyle，没有很强悍的发言权，但或多或少体验到了其中的便利。

    《CSS元素选择符》参考资料

    CSS编辑器TopStyle使用技巧
    TopStyle汉化正式版下载地址

    《CSS元素选择符》相关视频教程下载【FLV格式 – 5.36MB】

    《CSS权威指南 – 第3版》撷英及配套视频：- CSS选择符

    [ 以下内容您也可能感兴趣 ]

    ]]>     http://ximicc.com/css-tutorial/css-element-selector/feed 0     《CSS权威指南 – 第3版》撷英笔记及配套视频：CSS Rule – CSS语法规则结构 http://ximicc.com/css-tutorial/css-rule http://ximicc.com/css-tutorial/css-rule#comments Sun, 20 Sep 2009 12:49:23 +0000 admin http://ximicc.com/wordpress-plugin/%e3%80%8acss%e6%9d%83%e5%a8%81%e6%8c%87%e5%8d%97-%e7%ac%ac3%e7%89%88%e3%80%8b%e6%92%b7%e8%8b%b1%e7%ac%94%e8%ae%b0%e5%8f%8a%e9%85%8d%e5%a5%97%e8%a7%86%e9%a2%91%ef%bc%9acss-rule-%e2%80%93-css%e8%af%ad/ 一张相当直观的图片加以说明：

    虽然很简单，但是如果是初学者，建议还是熟记选择符、声明、属性等术语，至少以后看其它CSS教程的时候不会摸不着头脑。事实上CSS在实际书写的时候具有很大的灵活性，适当的空格和换行不会对其产生影响，有人喜欢缩进，有人喜欢分行，哪种更好没有一个很固定的衡量标准，很大程度上视乎个人习惯，大家不妨看一下《柳暗花明：整理及优化CSS代码的七个原则》这篇文章。
    《CSS语法规则结构》参考资料
    CSS rule Structure – CSS规则结构图例若干

    《CSS语法规则结构》相关视频教程下载【FLV格式 – 2.28MB】
    《CSS权威指南 – 第3版》撷英及配套视频：- CSS Syntax
    [ 以下内容您也可能感兴趣 ]

    《CSS权威指南 – 第3版》撷英笔记及配套视频：Grouping Selector–选择符群组 (0)
    《CSS权威指南 – 第3版》撷英笔记及配套视频：CSS元素选择符 (0)
    《CSS权威指南 – 第3版》撷英及配套视频：Basic Rules – CSS基本语法规则 (0)
    最详细实用的SEO搜索优化PDF教程 (0)
    国人制造WP企业主题:Comany V1.1 (1)

    ]]>     CSS Rule – 规则结构

    一张相当直观的图片加以说明：

    SEO优化,CSS教程,Wordpress博客 - 来自西米CC

    虽然很简单，但是如果是初学者，建议还是熟记选择符、声明、属性等术语，至少以后看其它CSS教程的时候不会摸不着头脑。事实上CSS在实际书写的时候具有很大的灵活性，适当的空格和换行不会对其产生影响，有人喜欢缩进，有人喜欢分行，哪种更好没有一个很固定的衡量标准，很大程度上视乎个人习惯，大家不妨看一下《柳暗花明：整理及优化CSS代码的七个原则》这篇文章。

    《CSS语法规则结构》参考资料

    CSS rule Structure – CSS规则结构图例若干

    《CSS语法规则结构》相关视频教程下载【FLV格式 – 2.28MB】

    《CSS权威指南 – 第3版》撷英及配套视频：- CSS Syntax

    [ 以下内容您也可能感兴趣 ]

    ]]>     http://ximicc.com/css-tutorial/css-rule/feed 0     《CSS权威指南 – 第3版》撷英及配套视频：Basic Rules – CSS基本语法规则 http://ximicc.com/css-tutorial/basic-rules http://ximicc.com/css-tutorial/basic-rules#comments Sat, 19 Sep 2009 01:22:15 +0000 admin http://ximicc.com/wordpress-plugin/%e3%80%8acss%e6%9d%83%e5%a8%81%e6%8c%87%e5%8d%97-%e7%ac%ac3%e7%89%88%e3%80%8b%e6%92%b7%e8%8b%b1%e5%8f%8a%e9%85%8d%e5%a5%97%e8%a7%86%e9%a2%91%ef%bc%9abasic-rules-%e2%80%93-css%e5%9f%ba%e6%9c%ac/ 引言部分主要讲述CSS在外观全局控制方面的优势，我想这一点但凡想学CSS的都知道是怎么回事。当然其中也提到了一些CSS力所不能及的事情，如改变GIF图片中的颜色等。这一点不禁让我想到全国哀悼日时很多网站的素装活动，用一行代码让整个网站呈黑白色调，代码如何写我已经没什么印象了，可能还是属于CSS滤镜的范畴吧。
    2.1. Basic Rules – 基本规则
    如果我们想让网页中的H2标题文字显示为灰色，传统的HTML书写（即不用CSS）方法如下：
    <h2><font COLOR="gray">This is h2 text</font>
    这种做法的不方便之处不言而喻，如果一张网页里有10000个H2，全部如此把它们修改为灰色的话，你的手尽情的抽筋吧。终于全部改完了，如果头儿心血来潮：“灰色不好看，改成绿色试试看～”这时候你应该想死的心都有了。用CSS的话，把H2文本设置为灰色，只消在样式表中写一句：
    h2 {color: gray;}
    绿色的好看？那就花两秒钟改一下:
    h2 {color: green;}
    《CSS基本语法规则》参考资料
    CSS 颜色名称及配色参考
    CSS配色十大经典网站
    《CSS基本语法规则》相关视频教程下载【FLV格式 – 2.28MB】
    《CSS权威指南 – 第3版》撷英及配套视频：- CSS Syntax
    [ 以下内容您也可能感兴趣 ]

    《CSS权威指南 – 第3版》撷英笔记及配套视频：Grouping Selector–选择符群组 (0)
    《CSS权威指南 – 第3版》撷英笔记及配套视频：CSS元素选择符 (0)
    《CSS权威指南 – 第3版》撷英笔记及配套视频：CSS Rule – CSS语法规则结构 (0)
    最详细实用的SEO搜索优化PDF教程 (0)
    国人制造WP企业主题:Comany V1.1 (1)

    ]]>     Chapter 2. Selectors – 选择符

    引言部分主要讲述CSS在外观全局控制方面的优势，我想这一点但凡想学CSS的都知道是怎么回事。当然其中也提到了一些CSS力所不能及的事情，如改变GIF图片中的颜色等。这一点不禁让我想到全国哀悼日时很多网站的素装活动，用一行代码让整个网站呈黑白色调，代码如何写我已经没什么印象了，可能还是属于CSS滤镜的范畴吧。

    2.1. Basic Rules – 基本规则

    如果我们想让网页中的H2标题文字显示为灰色，传统的HTML书写（即不用CSS）方法如下：

    1. <h2><font COLOR="gray">This is h2 text</font>

    这种做法的不方便之处不言而喻，如果一张网页里有10000个H2，全部如此把它们修改为灰色的话，你的手尽情的抽筋吧。终于全部改完了，如果头儿心血来潮：“灰色不好看，改成绿色试试看～”这时候你应该想死的心都有了。用CSS的话，把H2文本设置为灰色，只消在样式表中写一句：

    1. h2 {color: gray;}

    绿色的好看？那就花两秒钟改一下:

    1. h2 {color: green;}

    《CSS基本语法规则》参考资料

    CSS 颜色名称及配色参考
    CSS配色十大经典网站

    《CSS基本语法规则》相关视频教程下载【FLV格式 – 2.28MB】

    《CSS权威指南 – 第3版》撷英及配套视频：- CSS Syntax

    [ 以下内容您也可能感兴趣 ]

    ]]>     http://ximicc.com/css-tutorial/basic-rules/feed 0     开宗明义：《CSS权威指南第三版》精髓中文学习笔记 【Chapter 7 – 7.10】 http://ximicc.com/css-tutorial/css-chapter-7 http://ximicc.com/css-tutorial/css-chapter-7#comments Mon, 20 Jul 2009 13:25:40 +0000 admin http://ximicc.com/wordpress-plugin/%e3%80%8acss%e6%9d%83%e5%a8%81%e6%8c%87%e5%8d%97-%e7%ac%ac3%e7%89%88%e3%80%8b%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0-%e3%80%90chapter-7-7-10%e3%80%91/ 在之前的内容中，我们学习了很多关于CSS如何处理文档可视化格式的知识，不过大量的篇幅都用于解释如何工作，而很少分析为什么这么做。在本章中我们主要讲述可视化理论，由于CSS模型的开放性及其功能的强大，我们很有必要去了解尽可能多的CSS可视绘制模型的具体过程和知识，从而能够自主判断某些行为是否是因CSS定义而输出的正确结果。
    7.1. Basic Boxes – 基本框
    在处理元素时，CSS假定每个元素都生成一个或多个矩形框，叫做元素框。每个元素框包含像核一样的内容区，这个内容框被可选的补白padding、边框border以及边界margin包围，这些可选元素均可被设置为零宽度，相当于将它们从元素框中去除：

    补白、边界以及边框中的每一个元素都可以设置成不同的属性，如margin-left或 border-bottom。内容的背景也应用于补白，而边界则总是透明的，允许任何上级元素的背景可见。补白不能设置为负值，而边界却可以，关于这一点我们稍后进一步讨论。
    另一方面，边框有着自身的规则。边框使用定义好的样式生成，如solid或inset，颜色可以用border-color属性来设置，如果没有设置颜色，则边框颜色采用基于元素内容的前景颜色。如果边框样式是间断的，则元素的背景在不连续处可见，即边框有着内容和补白相同的背景：

    最后，边框的宽度不能为负值。
    不同类型的元素在如何格式化上存在着差别，例如块级元素与内联元素的处理方式就很不一样，浮动元素和定位元素则更为复杂。
    [ 以下内容您也可能感兴趣 ]

    免费HTML入门到精通新手经典指南教程（3）基本的 HTML 标签 (0)
    免费HTML入门到精通新手经典指南教程（1）HTML是什么 (0)
    外部引用CSS中link与@import的区别 (0)
    《CSS权威指南 – 第3版》撷英笔记及配套视频：Grouping Selector–选择符群组 (0)
    《CSS权威指南 – 第3版》撷英笔记及配套视频：CSS元素选择符 (0)

    ]]>     SEO优化,CSS教程,Wordpress博客 - 来自西米CC(http://ximicc.com)Chapter 7. Basic Visual Formatting – 可视化格式编排

    在之前的内容中，我们学习了很多关于CSS如何处理文档可视化格式的知识，不过大量的篇幅都用于解释如何工作，而很少分析为什么这么做。在本章中我们主要讲述可视化理论，由于CSS模型的开放性及其功能的强大，我们很有必要去了解尽可能多的CSS可视绘制模型的具体过程和知识，从而能够自主判断某些行为是否是因CSS定义而输出的正确结果。

    7.1. Basic Boxes – 基本框

    在处理元素时，CSS假定每个元素都生成一个或多个矩形框，叫做元素框。每个元素框包含像核一样的内容区，这个内容框被可选的补白padding、边框border以及边界margin包围，这些可选元素均可被设置为零宽度，相当于将它们从元素框中去除：

    《CSS权威指南第三版》精髓中文学习笔记

    补白、边界以及边框中的每一个元素都可以设置成不同的属性，如margin-left或 border-bottom。内容的背景也应用于补白，而边界则总是透明的，允许任何上级元素的背景可见。补白不能设置为负值，而边界却可以，关于这一点我们稍后进一步讨论。

    另一方面，边框有着自身的规则。边框使用定义好的样式生成，如solid或inset，颜色可以用border-color属性来设置，如果没有设置颜色，则边框颜色采用基于元素内容的前景颜色。如果边框样式是间断的，则元素的背景在不连续处可见，即边框有着内容和补白相同的背景：

    《CSS权威指南第三版》精髓中文学习笔记

    最后，边框的宽度不能为负值。

    不同类型的元素在如何格式化上存在着差别，例如块级元素与内联元素的处理方式就很不一样，浮动元素和定位元素则更为复杂。

    [ 以下内容您也可能感兴趣 ]

    ]]>     http://ximicc.com/css-tutorial/css-chapter-7/feed 0     开宗明义：《CSS权威指南第三版》精髓中文学习笔记 【7.2.1.2 – 7.2.1.4】 http://ximicc.com/css-tutorial/css-basic-7 http://ximicc.com/css-tutorial/css-basic-7#comments Mon, 20 Jul 2009 01:03:49 +0000 admin http://ximicc.com/wordpress-plugin/%e3%80%8acss%e6%9d%83%e5%a8%81%e6%8c%87%e5%8d%97-%e7%ac%ac3%e7%89%88%e3%80%8b%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0-%e3%80%907-2-1-2-7-2-1-4%e3%80%91/ 假如我们将width, margin-left或 margin-right中的其中两个给定具体值，而将剩下的一个设置为auto的话，那么被设置为为auto的属性将根据该元素的父级计算具体的值。比如一个P元素所在的父级宽度为400px，我们对P标签设置如下CSS规则：
    p {
    margin-left: auto;
    margin-right: 100px;
    width: 100px;
    }
    那么最终计算margin-left得到的结果是200px。还是以上面的例子为基础，假如三个属性都设置为100px的话会怎么样呢？结果是margin-right将被强迫修改为auto：

    当然这是针对自左到右的标准流，如果标准流是自右到左的话，那么被逼迫的对象就是margin-left了。
    如果指定了两个margin而将width设置为auto的话，那么width将占据出去两个margin之外父元素其余的宽度：
    p {
    margin-left: 100px;
    margin-right: 100px;
    width: auto;
    }

    这与省略width声明的效果是一样的：
    p {
    margin-left: 100px;
    margin-right: 100px;} /* same as before */
    7.2.1.3. More than one auto – 多个auto
    现在我们来看看假如width, margin-left和 margin-right这三个属性中有两个被设置为auto的情况。假如指定width而将margin-left和 margin-right设置为auto的话，那么这两个值为auto的属性将平分父元素出去width剩余的宽度，也就相当于将元素居中了：
    p {
    width: 100px;
    margin-left: auto;
    margin-right: auto;
    }

    再看看下面的例子：
    p {
    margin-left: auto;
    margin-right: 100px;
    width: auto;
    }
    这个时候margin-left将被判别为零。那么如果将这三个属性全都设置为auto呢？答案很简单，两个margin将被设置为零，width值就等于父元素的内容宽度。
    7.2.1.4. Negative margins – 负值边界
    在CSS中我们可以把边界设定为负值，并且会得到一些有趣的效果，尽管在CSS规范中没有要求浏览器必须支持负值边界。先来看个例子：
    div {
    width: 400px;
    border: 3px solid black;
    }
    p.wide {
    margin-left: 10px;
    width: auto;
    margin-right: -50px;
    }
     SEO优化,CSS教程,Wordpress博客 - 来自西米CC(http://ximicc.com)7.2.1.2. Using auto – auto的使用

    假如我们将width, margin-left或 margin-right中的其中两个给定具体值，而将剩下的一个设置为auto的话，那么被设置为为auto的属性将根据该元素的父级计算具体的值。比如一个P元素所在的父级宽度为400px，我们对P标签设置如下CSS规则：

    1. p {
    2. margin-left: auto;
    3. margin-right: 100px;
    4. width: 100px;
    5. }

    那么最终计算margin-left得到的结果是200px。还是以上面的例子为基础，假如三个属性都设置为100px的话会怎么样呢？结果是margin-right将被强迫修改为auto：

    《CSS权威指南第三版》精髓中文学习笔记 - 来自西米CC

    当然这是针对自左到右的标准流，如果标准流是自右到左的话，那么被逼迫的对象就是margin-left了。

    如果指定了两个margin而将width设置为auto的话，那么width将占据出去两个margin之外父元素其余的宽度：

    1. p {
    2. margin-left: 100px;
    3. margin-right: 100px;
    4. width: auto;
    5. }

    《CSS权威指南第三版》精髓中文学习笔记

    这与省略width声明的效果是一样的：

    1. p {
    2. margin-left: 100px;
    3. margin-right: 100px;} /* same as before */

    7.2.1.3. More than one auto – 多个auto

    现在我们来看看假如width, margin-left和 margin-right这三个属性中有两个被设置为auto的情况。假如指定width而将margin-left和 margin-right设置为auto的话，那么这两个值为auto的属性将平分父元素出去width剩余的宽度，也就相当于将元素居中了：

    1. p {
    2. width: 100px;
    3. margin-left: auto;
    4. margin-right: auto;
    5. }

    《CSS权威指南第三版》精髓中文学习笔记

    再看看下面的例子：

    1. p {
    2. margin-left: auto;
    3. margin-right: 100px;
    4. width: auto;
    5. }

    这个时候margin-left将被判别为零。那么如果将这三个属性全都设置为auto呢？答案很简单，两个margin将被设置为零，width值就等于父元素的内容宽度。

    7.2.1.4. Negative margins – 负值边界

    在CSS中我们可以把边界设定为负值，并且会得到一些有趣的效果，尽管在CSS规范中没有要求浏览器必须支持负值边界。先来看个例子：

    1. div {
    2. width: 400px;
    3. border: 3px solid black;
    4. }
    5. p.wide {
    6. margin-left: 10px;
    7. width: auto;
    8. margin-right: -50px;
    9. }

    汇聚博客资源,点亮博客价值 - 西米CC

    可以看到子元素的宽度超出了父元素的范围，而这也是正确的解析结果：

    10px + 0 + 0 + 440px + 0 + 0 – 50px = 400px

    为了让子元素的综合宽度等于父元素内容宽度，定义为auto的width最后的计算结果是440px。我们再来看个例子：

    1. div {
    2. width: 400px;
    3. border: 3px solid black;
    4. }
    5. p.wide {
    6. margin-left: -50px;
    7. width: auto;
    8. margin-right: 10px;
    9. border: 3px solid gray;
    10. }

    WordPress企业建站+企业网站SEO优化推广- 西米CC

    可以看到负值边界不仅能让一个元素突破其父元素，甚至能突破浏览器边界。

    [ 以下内容您也可能感兴趣 ]

    ]]>     http://ximicc.com/css-tutorial/css-basic-7/feed 0     开宗明义：《CSS权威指南第三版》精髓中文学习笔记 【7.1.1 – 7.1.2】 http://ximicc.com/css-tutorial/css-basic-7-1 http://ximicc.com/css-tutorial/css-basic-7-1#comments Sun, 19 Jul 2009 13:29:27 +0000 admin http://ximicc.com/wordpress-plugin/%e3%80%8acss%e6%9d%83%e5%a8%81%e6%8c%87%e5%8d%97-%e7%ac%ac3%e7%89%88%e3%80%8b%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0-%e3%80%907-1-1-7-1-2%e3%80%91/ 每个元素都有各自的包含块，可以说包含块就是一个元素的布局上下文。CSS2.1定义了一系列判断某一元素包含块的规则，在我们深入学习之前，先对这些知识作一些基本的了解。
    通常对于一个西方风格文本流元素而言，其包含块就是上级元素中离它最近的块级元素、表格单元或内联块。以下面的代码为例：
    <body>
    <div>
    <p>This is a paragraph.</p>
    </div>
    </body>
    在这个简单的例子中，P元素的包含块就是DIV元素，同样的，DIV的包含块就是body。所以P元素的外观布局受DIV元素的影响，当然与body元素也脱离不了关系。
    7.1.2. A Quick Refresher
    在这里我们先快速的过一下将要讨论的元素类型，其中也涉及一些我们将会接触的术语：
    标准流
    在西方语言和传统的HTML文档布局中，文本的阅读方向都是自左到右、自上而下，在非西方语言中这个顺序可能存在例外。绝大部分的元素都是标准流，而让一个元素脱离标准流的唯一方法就是浮动和定位。
    非替换元素
    指的是某个元素的内容内置于文档中，比如一个段落中的文本，它不像图片一样是以路径的形式出现在文档中。
    替换元素
    所谓的替换元素指的是其在文档中的内容实质上相当于一个占位符，很多时候我们无法从文档中替换元素本身的内容上想象出其在浏览器中的实际效果。最经典的替换元素就是IMG了，它只是以路径的形式表现插入到HTML文档中的图片。另外，大部分的表单元素也属于替换元素。
    块级元素
    诸如段落、标题或DIV之类的元素都属于块级元素，这些元素在文档中都独立成行，我们可以通过设置display: block来将一个元素转换为块级。
    内联元素
    如strong或span都属于内联元素，这类元素在文档中不会独立成行，它们一般是某个块级元素的后代，我们可以通过设置display: inline来将一个元素转换为内联级。
    根元素处于文档结构树顶端的元素我们称之为根元素。在HTML中，根元素指的就是html，而在XML文档中，它可以是任何由语言permits的元素。
    [ 以下内容您也可能感兴趣 ]

    免费HTML入门到精通新手经典指南教程（3）基本的 HTML 标签 (0)
    免费HTML入门到精通新手经典指南教程（1）HTML是什么 (0)
    外部引用CSS中link与@import的区别 (0)
    《CSS权威指南 – 第3版》撷英笔记及配套视频：Grouping Selector–选择符群组 (0)
    《CSS权威指南 – 第3版》撷英笔记及配套视频：CSS元素选择符 (0)

    ]]>     SEO优化,CSS教程,Wordpress博客 - 来自西米CC(http://ximicc.com)7.1.1. The Containing Block – 包含块

    每个元素都有各自的包含块，可以说包含块就是一个元素的布局上下文。CSS2.1定义了一系列判断某一元素包含块的规则，在我们深入学习之前，先对这些知识作一些基本的了解。

    通常对于一个西方风格文本流元素而言，其包含块就是上级元素中离它最近的块级元素、表格单元或内联块。以下面的代码为例：

    1. <body>
    2. <div>
    3. <p>This is a paragraph.</p>
    4. </div>
    5. </body>

    在这个简单的例子中，P元素的包含块就是DIV元素，同样的，DIV的包含块就是body。所以P元素的外观布局受DIV元素的影响，当然与body元素也脱离不了关系。

    7.1.2. A Quick Refresher

    在这里我们先快速的过一下将要讨论的元素类型，其中也涉及一些我们将会接触的术语：

    标准流

    在西方语言和传统的HTML文档布局中，文本的阅读方向都是自左到右、自上而下，在非西方语言中这个顺序可能存在例外。绝大部分的元素都是标准流，而让一个元素脱离标准流的唯一方法就是浮动和定位。

    非替换元素

    指的是某个元素的内容内置于文档中，比如一个段落中的文本，它不像图片一样是以路径的形式出现在文档中。

    替换元素

    所谓的替换元素指的是其在文档中的内容实质上相当于一个占位符，很多时候我们无法从文档中替换元素本身的内容上想象出其在浏览器中的实际效果。最经典的替换元素就是IMG了，它只是以路径的形式表现插入到HTML文档中的图片。另外，大部分的表单元素也属于替换元素。

    块级元素

    诸如段落、标题或DIV之类的元素都属于块级元素，这些元素在文档中都独立成行，我们可以通过设置display: block来将一个元素转换为块级。

    内联元素

    如strong或span都属于内联元素，这类元素在文档中不会独立成行，它们一般是某个块级元素的后代，我们可以通过设置display: inline来将一个元素转换为内联级。

    根元素处于文档结构树顶端的元素我们称之为根元素。在HTML中，根元素指的就是html，而在XML文档中，它可以是任何由语言permits的元素。

    [ 以下内容您也可能感兴趣 ]

    ]]>     http://ximicc.com/css-tutorial/css-basic-7-1/feed 0