Think Again » CSS

继续修改模板

山之岚 — Sat, 15 Sep 2007 14:41:27 +0000

继将CSS修改符合W3C规范后，今天花了点时间，也将模板代码修改完毕，通过W3C XHTML 1.0 Transitional验证。若不是好友风暴轻狂的提醒，我自己以前还从未注意过这些验证问题。不过狂兄最近似乎比较忙，很久没看到他的狂言了。

一直对自己现有的模板不太满意，无论是布局还是配色。且因为编写该模板时，自己刚接触Wordpress，不说php，当时连对html和css等基本不懂，几乎是边写模板，边查资料这样编过来的，所以很多地方都不符合规范。用W3C的在线XHTML检查，会查出多达几百个错误。本想花点时间重新写一个模板，计划回归2栏布局，昨天和Oxygen聊天，他告诉我，这是“审美疲劳”现象。回过头，想想也是，当初”首个3 columns WordPress模板制作完毕!“时，也曾是无比兴奋。

今天是周六，研究室人比较少，难得清静。于是就挂上耳麦，边听”辛晓琪的爱的回答”，开始修改现有模板代码。一动手，马上就发现不少问题，禁不住开始要骂TMD了。看来不仅仅是我的代码，很多插件生成的代码等通不过W3C验证，随便列举几个：

插件生成的代码无法通过验证：

Akismet提供的Spam数查看代码；

WS Download Manager生成的下载框代码；

Pagenavi提供的下拉页面显示框代码；

WordPress提供的下拉存档显示框代码无法通过验证，wp_get_archives函数，WP官方提供的dropdown Box代码：

<select name=“archive-dropdown” onChange

=‘document.location.href=this.options

[this.selectedIndex].value;’>

<option value=“”>

php echo attribute_escape(__(‘Select Month‘)); ?>

option>

php wp_get_archives(‘type=monthly&format=option&show_post_count=1

‘); ?> select>

其中onChange是大写，但Xhtml中所有元素必须是以小写形式出现，所以务必将onChange改为onchange。

Windows Live Writer编写的代码无法通过验证：

WLW自带的表格编制功能编制的表格中，会自动生成unSelectable=”on”，务必将该代码删掉。

WLW的图片编辑功能，有的会自动生成atomicselection=”true”，必须删除该代码。

WLW插入图片，均为，此种写法，虽可以正常显示图片，但规范的写法是，即每个img必须要有闭合符号/。

还有，Google Adsense Search代码无法通过验证，只好暂替换为WP自带的站内搜索了。Youtube提供的视频内嵌html代码也无法通过验证。这个不完全是Youtube的问题，因为Youtube的flv视频属于flash，而Xhtml对flash的支持较差。除了以上的一些问题外，其实只要在编制模板的时候，小心注意下，都能通过W3C的验证。总结了些，希望能够有所帮助，如：

1.页首，一般在header.php内，一定要有文档类型声明，如下面代码将文档声明为XHTML 1.0 Transitional。

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=http://www.w3.org/1999/xhtml

php language_attributes(); ?>>

<head profile=“http://gmpg.org/xfn/11″>

;

charset=” />

2.代码中的每个元素的前后标签必须都有，且前后标签内必须包含内容，即不能存在空元素。如

是非法的，且

****

之类的重复嵌套也是非法。

3.诸如

等标签必须包括闭合符/，如
是非法，而正确的是
。

4.img元素必须包括alt属性，否则将视为错误。

5.所有元素都应该以小写形式出现。

6.&符号，必须以&形式出现等。

晚上将目前首页内含的8个文章的html代码都修改了，除了含有ws download下载框和youtube视频外，其它的几篇都可以通过W3C验证。拟将几个页面代码修改下，其余文章就算了，任其自然吧。重要的是从现在开始要注意所发文章的代码了，因为习惯用WLW写文章，而WLW竟然存在这么多兼容性问题，所以以后每篇文章发布前都要检查下其html。看来用WLW等编辑软件离线发布文章时，最好要养成检查html代码的习惯。

修改模板的同时，顺手将最新留言的函数Hack了，原来留言只部分留言内容，现在改为显示留言者名字和留言内容。稍微调整了下侧边栏和页脚的显示内容，挂上了W3C XHTML和CSS验证标志，嘿嘿，以及CreativeCommon的版权说明logo。接下来打算安排点时间，将站内搜索改为Google Ajax Search，以及继续修改模板的CSS。今天只修改了菜单栏的字体显示效果，改天要来个大动作，将颜色搭配等修改下。

评论4:

4.2007.09.24.9:31.am. 山之岚: 狂兄说得对。我也开始糊涂，模板到底该怎么弄了。

3.2007.09.23.8:44.pm. yuanzhu: 模板真的不错，尤其是上面的标题画

2.2007.09.23.1:40.pm. ddkk3000: 模板越简单越不易疲劳，字体越大越方便阅读。边栏越少越好，否则游客不会看，而且不容易集中阅读，影响视觉啊。

1.2007.09.18.12:29.pm. Shaoqing: 还是别改成两栏了。我采用的是两栏，SIDEBAR太多东西，拉得很长，感觉不是很好。最新留言栏，改得不错啊，比之前的好。另外，自带的日历样子实在太看，不会修改，我还是没用它。

2008.07.27.10:44.am. Wordpress Hacks:如何关闭WP2.6的主题预览 (18)

2007.12.08.10:50.pm. 如何使用Wordpress内置的分页（Nextpage）功能？ (52)

2007.10.31.12:42.pm. Wordpress Hacks:升级2.3.1可能出现邮件提醒失效的解决方法 (20)

2007.10.22.11:05.pm. Wordpress Hacks: 在新窗口中打开评论者链接和no follow属性 (16)

2007.09.11.8:43.pm. CSS通过W3C验证 (5)

2007.08.21.8:44.am. 图文介绍如何在本地服务器安装Movable Type 4.0 (15)

2007.06.11.3:55.pm. WordPress解决Flickr图片显示方法 (3)

CSS通过W3C验证

山之岚 — Tue, 11 Sep 2007 12:43:19 +0000

晚上写extended summary实在是无聊之极，打开FF又逛到了Blog上。回想起曾和风暴轻狂谈过CSS的W3C验证问题，自己的模板虽然是通过了W3C的CSS验证，但提示竟然有多达58个Warnings。趁着兴头，将模板的style.css下载了下来，对着W3C的Warning，一个个给它修正过来。嘿嘿，功夫不负有心人哪，花了近1个小时，顺利搞定，现在模板的CSS可以完全通过W3C的验证了，Warning一个都没有。有兴趣，点此检查下。

对照着Warnings，发现很多问题都是出现在颜色的定义和诸如hover、active等伪类的定义上。也懒得多花时间去刨根问底，只是简单做了些Hacks。凑合着用吧。等下次改版重写CSS时再注意细节。

评论5:

5.2008.12.19.9:26.pm. 山之岚: @WEB 这个是因为折叠目录那个插件生成的代码的问题。升级到2.7后，似乎这个插件工作有些不大正常。回头要修改下。

4.2008.12.19.12:12.pm. WEB: Result: 1 Error Line 415, Column 10: ID "parent_3" already defined. LZ文件类别宣告是过渡标准（Transitional）用严格标准（Strict）试验哈～

3.2007.09.13.10:59.am. Shaoqing: 我的估计不少ERRORS.唉

2.2007.09.12.8:34.pm. 山之岚: Warning无所谓，error就不大好了。嘿嘿，刚才帮你测了下，有4个errors，不过都是颜色定义的，很容易改掉。

1.2007.09.12.8:22.pm. ljhui: 我用的那个主题.有这么多前辈在用就该不会存在Warning的问题.

推荐阅读

2007.09.15.10:41.pm. 继续修改模板 (4)

2008.09.09.8:58.pm. Wordpress Hacks:WP2.2版后中文邮件标题乱码解决方法 (22)

2008.08.20.8:11.pm. Wordpress Hacks:解决晒SPAM数无法通过W3C验证…续 (11)

2008.08.20.1:52.pm. Wordpress Hacks: to 解决晒Askimet SPAM数无法通过W3C验证问题 (24)

2008.08.03.11:23.am. 鸟儿早起 (43)

2008.07.27.10:44.am. Wordpress Hacks:如何关闭WP2.6的主题预览 (18)

2007.12.08.10:50.pm. 如何使用Wordpress内置的分页（Nextpage）功能？ (52)

2007.10.31.12:42.pm. Wordpress Hacks:升级2.3.1可能出现邮件提醒失效的解决方法 (20)

该死的ie、css的bug

山之岚 — Tue, 13 Mar 2007 02:55:38 +0000

因为一直是用firefox2.0和ie7.0来调试模板的，今天上来用研究室的电脑上的ie6.0上来一看，怎么搞得，右边的侧边栏已经被挤到下面去了，整个页面框架格局已经被破坏了。而且文章内容的左边界比博客标题左边界缩进了不少。下载安装opera9.1，打开一看效果和firefox一样，布局好好的。看来问题是出在ie上面了，网上查了下ie对css的bug，发现主要的麻烦还是在ie对margin和padding，这2个属性的解释上了。在各种浏览器中，firefox对css的支持最好，ie是最差的一个了。firefox对box模型宽度，是margin+padding+对象宽度，而ie是margin+对象宽度，padding是被计算在对象宽度里面的，所以如果设置同样的box宽度，margin以及padding值，但2者显示的对象宽度是不一样的。还有一点，为了避免在ie处理框架出现问题，最好不要把padding的设置应用到元素上，而是应该直接应用到内容上的。还有一个就是text-align:justify属性，在我对p元素应用了justify属性，在firefox下看到的段落都是两边对齐的，但在ie和opera下去看，虽说也有两边对齐，但效果很差。再加上安全性之类的，我还是推荐用firefox作为主要上网的浏览器吧。所以今天在侧边栏加上了这个firefox的下载链接。

看来什么等有空了要好好整理下所学的css知识了。最近都在忙着些东西，自己研究上的东西都没有什么进展，下周就要去香港发表了，幻灯片到现在也还没有改好，口语练习也没有做。真是耽误了正事了。以后在时间的安排上的得好好下工夫了。昨天看了一篇“20 must-have Firefox extensions”（20个必备的firefox插件），是国外有名的《ComputerWorld》的一篇文章，推荐了20个必备的firefox插件，看了下，有不少自己已经在用了。有准备把这篇文章的主要部分翻译成中文，等搞定了再发上来吧。

推荐阅读

2007.09.15.10:41.pm. 继续修改模板 (4)

2009.01.03.4:57.pm. Wordpress插件: WP Smilies (49)

2008.12.19.12:20.am. 12行代码给Wordpress主题挂上AJAX (35)

2008.12.07.9:51.pm. Hot friends新增支持用户自定义头像显示 (65)

2008.10.27.9:52.pm. 从更新hot friends和mailtocmmenter谈起 (33)

2008.09.09.8:58.pm. Wordpress Hacks:WP2.2版后中文邮件标题乱码解决方法 (22)

2008.08.25.11:06.pm. Wordpress插件: Mail To Commenter v1.3.2 (377)

2008.08.20.8:11.pm. Wordpress Hacks:解决晒SPAM数无法通过W3C验证…续 (11)

css布局

山之岚 — Tue, 06 Feb 2007 08:34:38 +0000

centering align

CSS其中一个优点是它能够在不使用表现的标记来控制页面的layout。所有的css layout技术都依赖于三个基本的概念：positioning，floating和margin的操作。

长度过长的内容读起来很困难，特别是现代的显示器的宽度越来越大，屏幕的可读性问题就变得越来越重要了，设计师解决这个问题的方法就是把他们的设计居中显示而不是全屏显示。居中的设计只是跨越屏幕的一部分，以创建一个较短的和易于阅读宽度。

居中设计在现在是一种很流行的方法，因此，学习怎样在css里使用居中显示也是很多开发者想学的第一样东西。居中设计有两个基本的方法：一种是使用auto margins，另一种是使用positioning 和负margins，下面介绍这两种方法。

1. auto margins

水平居中div元素的css为：

#wrapper{ width:720px; margin:0 auto; border:5px #666 solid; }

水平居中我们就可以更灵活地控制div里的内容显示了，我们也可用百分比和用字符数单位em来表示div的宽度了。上面的代码在现在的浏览器里可以工作得很好，但是在IE 5.X和IE 6上就不能正常工作（居左显示），幸运的是IE误解了text-align:center，它会将所有元素都居中而不只是文本，所以我们可以这样：

body{text-align:center;}
#wrapper{ width:720px; margin:0 auto; border:5px #666 solid; text-align:center;}

这是一个hack的方法，这个fairly innocuouse（无害的）hack也不会对你的代码有不利的影响，现在在IE上可以居中显示了。

2. positioning 和负 margins

如果你不想法用之前的方法，认为不必多加一个hack，那可以用下面这个方法，首先将div的左边居中，然后再将div的margin-left设置为它的宽度一半的负数，就这样的简单：

#wrapper { width: 720px; position: relative; left: 50%; margin-left:-360px; border:5px #666 solid;}

方便吧，快去用到你自己的设计中去吧。

float-based layout

创建css为基础的layout，可以使用positioning和负margins，但是我发现用float-based layout方法更加容易。而使用float-base layout最重要是需要使用clear（清除）the floats。

两列floated layout：

要使用floats来布局两列的设计，你需要使用XHTML framework。下面的例子将包含有好几个区域，branding，content，navigation和footer，然后嵌套在div wrapper里，div wrapper将会使用水平居中。

…

主导航会在左边，主内容将会在右边，通常，当人们创建float为基础的layout时，他们会float两列到左边（float:left），然后用 margin或者padding创建两列之间的间隙。用这种方法会导致这两列被紧紧地包在一个有限的空间里而没有气可喘。虽然很多浏览器运行时不会出现问题，但是有些buggy（如IE）浏览器，两列会被迫互相挤压，导致layout被破坏。

为了预防这些现象发生，你需要避免将floated layout完满包含他们的元素中，不要使用水平的margin和padding来创建两列之间的空隙，你可以floating 一个元素在左边和floating一个元素在右边来创建间隙，实现的css很简单：

#content { width: 520px; float: right; }
#mainNav { width: 180px; float: left; }

要确保div footer能正确地放置在上面两个div元素的下面，div footer需要被cleared：

#footer { clear:both; }

下面设置一下div content和div mainNav周围的空隙，将它们可以有气可喘：
#mainNav { padding-top: 20px; padding-bottom: 20px; }
#mainNav li { padding-left: 20px; padding-right: 20px; }
#content h1, #content h2, #content p { padding-right: 20px; }

一个简单的两列布局就过完，快去实践一下吧。

三列floated layout：

三列的布局（以下称三列）与两列的布局是非常类似的，不同的是三列需要增加两个新的div到div content里，一个mainContent作为主内容，另一个secContent作为第二内容，如下：

…

相同地，你可以在div content里将mainContent设置左浮动，设置secContent右浮动，这就创建了三列的效果。css代码也很简单：

#mainContent { width: 320px; float: left; }
#secContent { width: 180px; float: right; }

删除之前content内元素设置的padding，然后用下面的设置代替：

#secondaryContent h1, #secondaryContent h2,#secondaryContent p { padding-left: 20px; padding-right: 20px;}

一个完整三列布局出现在你的面前了，是否有点成就感了。

Fixed-width, liquid, and elastic layout

直到现在为止，上面的所有例子都用了固定的像素来设置宽度，这就是fixed-width layout了，有时也叫“ice layout”，fixed-width layout的使用也比较普遍，然而，因为它固定了宽度，随着大屏幕的革命，为800*600的分辨率设计的布局会显得太小了，相反为1024*768分辨率设计的布局在小屏幕下又会出现滚动条。另一个缺点就是当文本的字体变大的时候，elastic layout会变得比较浏览器窗口的宽度更易宽，从而被迫出现水平的滚动条，有一个解决方法就是设计body标签的max-width为100%，但是 max-width只在现在浏览器才技术，IE就不支持max-width，然而为了解决这此问题，你可以使用下面的两种布局来代替。

Liquid layout(易变的layout)

liquid layout是将它的尺寸设置为百分比来代替用像素，它能根据浏览器窗口大小的改变来作出相应的放大与缩小，liquid layout的一个缺点就是当浏览器的窗口太大和太小都会影响用户的阅读，那么可以使用设置它的最大宽度和最小宽度来修正。现在你可以用这个技术来将 fixed -width 的三列布局用liquid的三列布局来实现，如下：

#wrapper { width: 85%; }
#mainNav { width: 23%; float: left; }
#content { width: 75%; float: right; }

mainNav 与content留有2%的可视空间，然后你可以设置content里面两列的宽度，如果你想secContent的宽度与mainNav一样的话，那你可以取23%，但在content就是75%中的23%，那应该是31%，为留出可视空间，你可以设置mainContent的width为66%，如下：

#mainContent { width: 66%; float: left; }
#secContent { width: 31%; float: right; }

上面的liquid三列的布局在1024*768的分辨率是显示为最佳，但是比这更大或者更小的分辨率也能使用用户阅读得很舒服，最后最好设置一下wrapper的最小宽度（min-width:720px;），以防窗口变小的挤压得变形了。

Elastic layout（弹性的layout）

liquid layout虽然能做到很好的显示效果，但是上面也说到了它的一些缺点，然而，Elastic layout能很好地解决liquid layout的缺点造成的问题。Elastic layout是用相关的字体的大小来设置元素的宽度，而不是用浏览器的宽度，用em来进行设置，这样你就可以确保你的字体变大的时候，整个布局也会随之自动调整。还有，就是这样的布局能让文本的行高得到一个可读性好的大小，对减少用户视觉和感觉混乱都是很有帮助的。

像其它的布局技术一样， elastic layout也有它的缺点，它的缺点和fixed-width layout一样，就是当文本的字体变大的时候，elastic layout会变得比较浏览器窗口的宽度更易宽，从而被迫出现水平的滚动条，有一个解决方法就是设计body标签的max-width为100%，但是 max-width只在现在浏览器才技术，IE就不支持max-width。

将fixed-width layout改为Elastic layout是非常简单的，窍门是在body中设置基本的字体大小，使得1em等10像素，因为在大部门浏览器默认的字体大小是16像素，所以设置字体等于默认字体的62.5%就等10像素了，如下：

body { font-size: 62.5%; }

然后将fixed-width layout中所有像素表示的宽度用em来代替，如下：
#wrapper { width: 72em; margin: 0 auto; text-align: left; }
#mainNav { width: 18em; float: left; }
#content { width: 52em; float: right; }
#mainContent { width: 32em; float: left; }
#secContent { width: 18em; float: right; }

Fixed-width, liquid, and elastic layout都已经介绍完了，自己动手试一下吧。

推荐阅读

2007.09.15.10:41.pm. 继续修改模板 (4)

2007.09.11.8:43.pm. CSS通过W3C验证 (5)

2007.03.13.10:55.am. 该死的ie、css的bug (0)

2007.01.28.4:57.pm. CSS入门教程关于css样式表 (0)

CSS入门教程关于css样式表

山之岚 — Mon, 29 Jan 2007 00:57:14 +0000

转自网络

关于CSS样式表

一.在学习CSS之前你应该掌握哪些基础知识

1.什么是网页，什么是超文本语言（HTML）。
2.会使用Dreamweaver等常用的网页编辑器。

Dreamweaver 是现今最好的网站编辑工具之一，而Dreamweaver8增加的对CSS的支持更是你容易得来使用CSS，用它来给制作网页的CSS样式表会更简单、更方便。本教程教你如何利用Dreamweaver8在页面中加入CSS，你不用死记硬背的记代码标记，也不用去看很厚的CSS手册，你就可以轻松自如的在网页中运用CSS。不过首先你要对CSS有一定的了解。因此，本教程的前面4章为CSS理论知识，主要是对CSS的全面介绍，希望读者看后对CSS的语法、结构、应用有一个全面的了解；后面4章为DW实战，主要是教你如何利用Dreamweaver8灵活运用CSS在网页中。阅读此文前，你需要对 HTML有一定的了解，并会使用Dreamweaver。

二.认识CSS

CSS就是Cascading Style Sheets，中文翻译为“层叠样式表”，简称样式表，它是一种制作网页的新技术。

网页设计最初是用HTML标记来定义页面文档及格式，例如标题

、段落
、表格
、链接等，但这些标记不能满足更多的文档样式需求，为了解决这个问题，在1997年W3C(The World Wide Web Consortium)颁布HTML4标准的同时也公布了有关样式表的第一个标准CSS1, 自CSS1的版本之后，又在1998年5月发布了CSS2版本，样式表得到了更多的充实。W3C把DHTML(Dynamic HTML)分为三个部分来实现：脚本语言(包括JavaScript、Vbscript等)、支持动态效果的浏览器(包括Internet Explorer、Netscape Navigator等)和CSS样式表。

注意：CSS需要IE4(Internet Explorer 4.0)和NC4(Netscape 4.0)以上的浏览器支持，有些效果需要更高版本的浏览器支持。

三.怎样使用CSS

如果你使用的是Dreamweaver MX 2004以上的版本，在定义文字字体、颜色、大小等属性的时候，查看一下代码你会发现有这样的一部分在head区域：

那么恭喜你，你已经使用了CSS设计网页。
那么除了这种调用CSS的方法外，还有别的吗？回答是“当然有了”，下面是系统介绍

标记加注法(in-line)：
如果只有一个HTML标记需要设定样式，则可在该标记内，加上属性

style=” ”

以个别修订样式。

页面内嵌法：

外部调用法：

双表法调用样式表：

语法基础

1. 基本语法
CSS的定义是由三个部分构成：选择符（selector），属性（properties）和属性的取值（value）。
基本格式如下：

selector {property: value}

（选择符 {属性：值}）
选择符是可以是多种形式，一般是你要定义样式的HTML标记，例如BODY、P、TABLE……，你可以通过此方法定义它的属性和值，属性和值要用冒号隔开：

body {color: black}
选择符body是指页面主体部分，color是控制文字颜色的属性，black是颜色的值，此例的效果是使页面中的文字为黑色。

如果属性的值是多个单词组成，必须在值上加引号，比如字体的名称经常是几个单词的组合：

p {font-family: “sans serif”}

（定义段落字体为sans serif）

如果需要对一个选择符指定多个属性时，我们使用分号将所有的属性和值分开：

p {text-align: center; color: red}

（段落居中排列；并且段落中的文字为红色）

为了使你定义的样式表方便阅读，你可以采用分行的书写格式：

p
{
text-align: center;
color: black;
font-family: arial
}

（段落排列居中，段落中文字为黑色，字体是arial）

2. 选择符组

你可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式重复定义：

h1, h2, h3, h4, h5, h6 { color: green }

（这个组里包括所有的标题元素，每个标题元素的文字都为绿色）

p, table{ font-size: 9pt }

（段落和表格里的文字尺寸为9号字）

效果完全等效于：

p { font-size: 9pt }
table { font-size: 9pt }

3. 类选择符

用类选择符你能够把相同的元素分类定义不同的样式，定义类选择符时，在自定类的名称前面加一个点号。假如你想要两个不同的段落，一个段落向右对齐，一个段落居中，你可以先定义两个类：

p.right {text-align: right}
p.center {text-align: center}

然后用不在不同的段落里，只要在HTML标记里加入你定义的class参数：

这个段落向右对齐的

这个段落是居中排列的

注意：类的名称可以是任意英文单词或以英文开头与数字的组合，一般以其功能和效果简要命名。

类选择符还有一种用法，在选择符中省略HTML标记名，这样可以把几个不同的元素定义成相同的样式：

.center {text-align: center}

（定义.center的类选择符为文字居中排列）
这样的类可以被应用到任何元素上。下面我们使h1元素（标题1）和p元素（段落）都归为“center”类，这使两个元素的样式都跟随“.center”这个类选择符：

这个标题是居中排列的

这个段落也是居中排列的

注意：这种省略HTML标记的类选择符是我们经后最常用的CSS方法，使用这种方法，我们可以很方便的在任意元素上套用预先定义好的类样式。

4. ID选择符

在HTML页面中ID参数指定了某个单一元素，ID选择符是用来对这个单一元素定义单独的样式。
ID选择符的应用和类选择符类似，只要把CLASS换成ID即可。将上例中类用ID替代：

这个段落向右对齐

定义ID选择符要在ID名称前加上一个“#”号。和类选择符相同，定义ID选择符的属性也有两种方法。下面这个例子，ID属性将匹配所有id=”intro”的元素：

#intro
{
font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent
}

（字体尺寸为默认尺寸的110%；粗体；蓝色；背景颜色透明）
下面这个例子，ID属性只匹配id=”intro”的段落元素：

p#intro
{
font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent
}

注意：ID选择符局限性很大，只能单独定义某个元素的样式，一般只在特殊情况下使用。

5. 包含选择符

可以单独对某种元素包含关系定义的样式表，元素1里包含元素2，这种方式只对在元素1里的元素2定义，对单独的元素1或元素2无定义，例如：

table a
{
font-size: 12px
}

在表格内的链接改变了样式，文字大小为12象素，而表格外的链接的文字仍为默认大小。

6. 样式表的层叠性

层叠性就是继承性，样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包含的其他元素。事实上，所有在元素中嵌套的元素都会继承外层元素指定的属性值，有时会把很多层嵌套的样式叠加在一起，除非另外更改。例如在DIV标记中嵌套P标记：

div { color: red; font-size:9pt}
……

这个段落的文字为红色9号字

（P元素里的内容会继承DIV定义的属性）
注意：有些情况下内部选择符不继承周围选择符的值，但理论上这些都是特殊的。例如，上边界属性值是不会继承的，直觉上，一个段落不会同文档BODY一样的上边界值。

另外，当样式表继承遇到冲突时，总是以最后定义的样式为准。如果上例中定义了P的颜色：

div { color: red; font-size:9pt}
p {color: blue}
……

这个段落的文字为蓝色9号字

我们可以看到段落里的文字大小为9号字是继承div属性的，而color属性则依照最后定义的。

不同的选择符定义相同的元素时，要考虑到不同的选择符之间的优先级。ID选择符，类选择符和HTML标记选择符，因为ID选择符是最后加上元素上的，所以优先级最高，其次是类选择符。如果想超越这三者之间的关系，可以用!important提升样式表的优先权，例如：

p { color: #FF0000!important }
.blue { color: #0000FF}
#id1 { color: #FFFF00}

我们同时对页面中的一个段落加上这三种样式，它最后会依照被!important申明的HTML标记选择符样式为红色文字。如果去掉!important，则依照优先权最高的ID选择符为黄色文字。

7. 注释

你可以在CSS中插入注释来说明你代码的意思，注释有利于你或别人以后编辑和更改代码时理解代码的含义。在浏览器中，注释是不显示的。CSS注释以”/” 开头，以”/” 结尾，如下：

/* 定义段落样式表 /
p
{
text-align: center; / 文本居中排列 /
color: black; / 文字为黑色 /
font-family: arial / 字体为arial /
}

如何插入

前面我们了解了CSS的语法，但要想在浏览器中显示出效果，就要让浏览器识别并调用。当浏览器读取样式表时，要依照文本格式来读，这里介绍四种在页面中插入样式表的方法：[u]链入外部样式表[/u]、[u]内部样式表[/u]、[u]导入外表样式表[/u]和[u]内嵌样式[/u]。

1. 链入外部样式表

链入外部样式表是把样式表保存为一个样式表文件，然后在页面中用标记链接到这个样式表文件，这个标记必须放到页面的区内，如下：

……

……

上面这个例子表示浏览器从mystyle.CSS文件中以文档格式读出定义的样式表。rel=”stylesheet”是指在页面中使用这个外部的样式表。 type=”text/CSS”是指文件的类型是样式表文本。href=../../”mystyle.CSS”是文件所在的位置。media是选择媒体类型，这些媒体包括：屏幕，纸张，语音合成设备，盲文阅读设备等。

一个外部样式表文件可以应用于多个页面。当你改变这个样式表文件时，所有页面的样式都随之而改变。在制作大量相同样式页面的网站时，非常有用，不仅减少了重复的工作量，而且有利于以后的修改、编辑，浏览时也减少了重复下载代码。

样式表文件可以用任何文本编辑器（例如：记事本）打开并编辑，一般样式表文件扩展名为.CSS。内容是定义的样式表，不包含HTML标记，mystyle.CSS这个文件的内容如下：

hr {color: sienna}
p {margin-left: 20px}
body {background-image: url(“images/back40.gif”)}
/定义水平线的颜色为土黄；段落左边的空白边距为20象素；页面的背景图片为images目录下的back40.gif文件/

2. 内部样式表

内部样式表是把样式表放到页面的区里，这些定义的样式就应用到页面中了，样式表是用
……

注意：有些低版本的浏览器不能识别style标记，这意味着低版本的浏览器会忽略style标记里的内容，并把style标记里的内容以文本直接显示到页面上。为了避免这样的情况发生，我们用加HTML注释的方式（）隐藏内容而不让它显示：

……

……

3. 导入外部样式表

导入外部样式表是指在内部样式表的
……

例中@import “mystyle.CSS”表示导入mystyle.CSS样式表，注意使用时外部样式表的路径。方法和链入样式表的方法很相似，但导入外部样式表输入方式更有优势。实质上它相当于存在内部样式表中的。
注意：导入外部样式表必须在样式表的开始部分，在其他内部样式表上面。

4. 内嵌样式

内嵌样式是混合在HTML标记里使用的，用这种方法，可以很简单的对某个元素单独定义样式。内嵌样式的使用是直接将在HTML标记里加入style参数。而style参数的内容就是CSS的属性和值，如下例：

这是一个段落

在style参数后面的引号里的内容相当于在样式表大括号里的内容。
注意：style参数可以应用于任意BODY内的元素（包括BODY本身），除了BASEFONT、PARAM和SCRIPT。

5. 多重样式表的叠加

上一章里我们已经提到样式表的层叠顺序，这里我们讨论插入样式表的这几种方法的叠加，如果在同一个选择器上使用几个不同的样式表时，这个属性值将会叠加几个样式表，遇到冲突的地方会以最后定义的为准。例如，我们首先链入一个外部样式表，其中定义了h3选择符的color 、text-alig和font-size属性：

h3
{
color: red;
text-align: left;
font-size: 8pt;
}
/标题3的文字颜色为红色；向左对齐；文字尺寸为8号字/

然后在内部样式表里也定义了h3选择符的text-align和font-size属性：

h3
{
text-align: right;
font-size: 20pt;
}
/标题3文字向右对齐；尺寸为20号字/

那么这个页面叠加后的样式就是：

color: red;
text-align: right;
font-size: 20pt;
/文字颜色为红色；向右对齐；尺寸为20号字/

字体颜色从外部样式表里保留下来，而对齐方式和字体尺寸都有定义时，按照后定义的优先而依照内部样式表。

注意：依照后定义的优先，所以优先级最高的是[s]内嵌样式[/s]，[s]内部样式表[/s]高于[s]导入外部样式表[/s]，[s]链入的外部样式表[/s]和[s]内部样式表[/s]之间是最后定义的优先级高。

css选择符

一.选择符模式
模式/含义/内容描述

匹配任意元素。(通用选择器)
E
匹配任意元素 E (例如一个类型为 E 的元素)。(类型选择器)
E F
匹配元素 E 的任意后代元素 F 。(后代选择器)
E > F
匹配元素 E 的任意子元素 F 。(子选择器)
E:first-child
当元素 E 是它的父元素中的第一个子元素时，匹配元素 E 。(:first-child 伪类)
E:link E:visited
如果 E 是一个目标还没有访问过(:link)或者已经访问过(:visited)的超链接的源锚点时匹配元素 E 。(link 伪类)
E:active E:hover E:focus
在确定的用户动作中匹配 E 。(动态伪类)
E:lang(c)
如果类型为 E 的元素使用了(人类)语言 c (文档语言确定语言是如何被确定的)，则匹配该元素。(:lang() 伪类)
E + F
如果一个元素 E 直接在元素 F 之前，则匹配元素 F 。(临近选择器)
E[foo]
匹配具有”foo”属性集(不考虑它的值)的任意元素 E 。(属性选择器)
E[foo="warning"]
匹配其“foo”属性值严格等于“warning”的任意元素 E 。(属性选择器)
E[foo~="warning"]
匹配其“foo”属性值为空格分隔的值列表，并且其中一个严格等于“warning”的任意元素 E 。(属性选择器)
E[lang|="en"]
匹配其“lang”属性具有以“en”开头(从左边)的值的列表的任意元素 E 。(属性选择器)
DIV.warning
仅 HTML。用法同 DIV[class~="warning"]。(类选择器)
E#myid
匹配 ID 等于“myid”的任意元素 E 。(ID 选择器)
引用:
——————————————————————————–
From：http://www.w3.org/TR/CSS2/selector.HTML
——————————————————————————–
我们用下面的例子来解释“[s]父元素[/s]”、“[s]子元素[/s]”、“[s]父/子[/s]”及“[s]相邻[/s]”这几个概念。

这是是h1的内容

这是一个段落p的内容！这里是strong的内容这是一个段落p的内容！

从以上代码中，我们可以找出这样的关系：
[list]
[] h1 和 p 同为 div 的“儿子”，两者分别同 div 形成“父/子”关系。
[] h1,p,strong 都是 div 的“子元素”。（三者都包含在 div 之内）
[] div 是 h1 和 p 的“父元素”。
[] strong 和 p 形成“父/子”关系，strong 的“父元素”是 p 。
[] 但 strong 和 div 并非“父/子”关系，而是“祖孙”关系，但 strong 依然是 div 的“子（孙）元素”。
[] div 是 h1 p strong 三者的“祖先”，三者是 div 的“子（孙）元素”。
[] h1 和 p 两者是相邻的。
[/list]
继承上面的实例来具体演示一下E F的关系：假如，我们需要将 strong 内的内容二字变为绿色，我们可以有哪些方法呢？
div strong {color:green;} / －正确。strong 是 div 的“子元素”/
p > strong {color:green;} / －正确。strong 和 p 是“父/子”关系/
div > strong {color:green;} / －错误！strong 虽然是 div 的“子（孙）元素”，但两者乃是“祖孙”关系，而非“父/子”关系，因此不能用 > 符号连接/
临近选择器和通用选择器：通用选择器以星号“”表示，可以用于替代任何 tag 。
实例：
h2 + * { color:green }/所有紧随 h2 的元素内的文字都将呈现红色/
二.选择符分类介绍
1.通配选择符
语法：
* { sRules }
说明：
通配选择符。选定文档目录树(DOM)中的所有类型的单一对象。
假如通配选择符不是单一选择符中的唯一组成，“”可以省略。
示例：
[lang=fr] { font-size:14px; width:120px; }
.div { text-decoration:none; }
2.类型选择符
语法：
E { sRules }
说明：
类型选择符。以文档语言对象(Element)类型作为选择符。
示例：
td { font-size:14px; width:120px; }
a { text-decoration:none; }
3.属性选择符
语法：
E [ attr ] { sRules }
E [ attr = value ] { sRules }
E [ attr ~= value ] { sRules }
E [ attr |= value ] { sRules }
说明：
属性选择符。
选择具有 attr 属性的 E
选择具有 attr 属性且属性值等于 value 的 E
选择具有 attr 属性且属性值为一用空格分隔的字词列表，其中一个等于 value 的 E 。这里的 value 不能包含空格
选择具有 attr 属性且属性值为一用连字符分隔的字词列表，由 value 开始的 E
示例：
h[title] { color: blue; }
/ 所有具有title属性的h对象 /
span[class=demo] { color: red; }
div[speed="fast"][dorun="no"] { color: red; }
a[rel~="copyright"] { color:black; }
4.包含选择符
语法：
E1 E2 { sRules }
说明：
包含选择符。选择所有被 E1 包含的 E2 。即 E1.contains(E2)==true 。
示例：
table td { font-size:14px; }
div.sub a { font-size:14px; }
5.子对象选择符
语法：
E1 > E2 { sRules }
说明：
子对象选择符。选择所有作为 E1 子对象的 E2 。
示例：
body > p { font-size:14px; }
/ 所有作为body的子对象的p对象字体尺寸为14px /
div ul>li p { font-size:14px; }
6.ID选择符
语法：
#ID { sRules }
说明：
ID选择符。以文档目录树(DOM)中作为对象的唯一标识符的 ID 作为选择符。
示例：
#note { font-size:14px; width:120px;}
7.类选择符
语法：
E.className { sRules }
说明：
类选择符。在HTML中可以使用此种选择符。其效果等同于E [ class ~= className ] 。请参阅属性选择符( Attribute Selectors )。
在IE5+，可以为对象的 class 属性(特性)指定多于一个值( className )，其方法是指定用空格隔开的一组样式表的类名。例如：
。

示例：
div.note { font-size:14px; }
/ 所有class属性值等于（包含）”note”的div对象字体尺寸为14px /

.dream { font-size:14px; }
/ 所有class属性值等于（包含）”note”的对象字体尺寸为14px /

8.选择符分组

语法：
E1 , E2 , E3 { sRules }

说明：
选择符分组。将同样的定义应用于多个选择符，可以将选择符以逗号分隔的方式并为组。

示例：
.td1,div a,body { font-size:14px; }
td,div,a { font-size:14px; }

9.伪类及伪对象选择符

语法：
E : Pseudo-Classes { sRules }
E : Pseudo-Elements { sRules }

说明：
伪类及伪对象选择符。
伪类选择符。请参阅伪类( Pseudo-Classes )[:link :hover :active :visited :focus :first-child :first :left :right :lang]。
伪对象选择符。请参阅伪对象( Pseudo-Elements )[:first-letter :first-line :before :after]。

示例：
div:first-letter { font-size:14px; }
a.fly :hover { font-size:14px; color:red; }

伪类——动态链接

伪类可以看做是一种特殊的类选择符，是能被支持CSS的浏览器自动所识别的特殊选择符。它的最大的用处就是可以对链接在不同状态下定义不同的样式效果。

1. 语法

伪类的语法是在原有的语法里加上一个伪类（pseudo-class）：
selector:pseudo-class {property: value}
（选择符:伪类 {属性: 值}）
伪类和类不同，是CSS已经定义好的，不能象类选择符一样随意用别的名字，根据上面的语法可以解释为对象（选择符）在某个特殊状态下（伪类）的样式。

类选择符及其他选择符也同样可以和伪类混用：
selector.class:pseudo-class {property: value}
（选择符.类:伪类 {属性: 值}）

2. 锚的伪类

我们最常用的是4种a（锚）元素的伪类，它表示动态链接在4种不同的状态：link、visited、active、hover（未访问的链接、已访问的链接、激活链接和鼠标停留在链接上）。我们把它们分别定义不同的效果：

a:link {color: #FF0000; text-decoration: none} / 未访问的链接 /
a:visited {color: #00FF00; text-decoration: none} / 已访问的链接 /
a:hover {color: #FF00FF; text-decoration: underline} / 鼠标在链接上 /
a:active {color: #0000FF; text-decoration: underline} / 激活链接 /

（上面这个例子中，这个链接未访问时的颜色是红色并无下划线，访问后是绿色并无下划线，激活链接时为蓝色并有下划线，鼠标在链接上时为紫色并有下划线）
注意：有时这个链接访问前鼠标指向链接时有效果，而链接访问后鼠标再次指向链接时却无效果了。这是因为你把a:hover放在了a:visited的前面，这样的话由于后面的优先级高，当访问链接后就忽略了a:hover的效果。所以根据叠层顺序，我们在定义这些链接样式时，一定要按照a:link， a:visited， a:hover， a:actived的顺序书写。

3. 伪类和类选择符

将伪类和类组合起来用，就可以在同一个页面中做几组不同的链接效果了，例如，我们定义一组链接为红色，访问后为蓝色；另一组为绿色，访问后为黄色：

a.red:link {color: #FF0000}
a.red:visited {color: #0000FF}
a.blue:link {color: #00FF00}
a.blue:visited {color: #FF00FF}

现在应用在不同的链接上：

这是第一组链接
这是第二组链接

4. 其他伪类

此外CSS2还定义了[u]首字[/u]和[u]首行[/u]（first-letter和first-line）的伪类，可以对元素的首字或首行设定不同的样式。
下面看这个例子，我们在段落标记里定义文本首字尺寸为默认大小的3倍：

……

这是一个段落，这个段落的首字被放大了。

我们再定义一个首行样式的例子：

……

这是段落的第一行
这是段落的第二行
这是段落的第三行

（上例中段落的第一行为红色，第二、三行为默认颜色）

注意：首字和首行的伪类需要IE5.5以上的版本支持。

CSS盒模型

CSS2中的盒模型是关系到设计中排版定位的关键，任何一个选择符都遵循盒模型规范，例如
、
、……盒模型包含
(外补丁)margin，(背景颜色)background-color，(背景图片)background-image，(内补丁)padding ，(内容)content，(边框)border。

下图是CSS盒模型的示意图:

平面示意图

3D示意图

需要说明的是：IE和Mozilla浏览器对盒模型的解释不一致，造成我们定位上的困难，主要差别是：IE计算2个div之间的距离时候，会把1px的 border计算在内，而mozilla没有；设定div的宽度后，如果给padding加一个值，IE会在宽度内减去这个值，而M ozilla会在宽度基础上加上这个值。

推荐阅读
2007.09.15.10:41.pm. 继续修改模板 (4)
2007.09.11.8:43.pm. CSS通过W3C验证 (5)
2007.03.13.10:55.am. 该死的ie、css的bug (0)
2007.02.06.12:34.am*. css布局 (0)
Copyright © 2012 | Think Again | 原文链接

Think Again » CSS

继续修改模板

CSS通过W3C验证

该死的ie、css的bug

css布局

CSS入门教程 关于css样式表

这个标题是居中排列的

这是是h1的内容

CSS入门教程关于css样式表