基本语法

  规则

  选择符

  任何HTML元素都可以是一个CSS1的选择符。选择符仅仅是指向特别样式的元素。例如,

  P { text-indent: 3em }

  当中的选择符是P。

  类选择符

  单一个选择符能有不同的CLASS(类),因而允许同一元素有不同样式。例如,一个网页制作者也许希望视其语言而定,用不同的颜色显示代码 :

  code.html { color: #191970 }

  code.css { color: #4b0082 }

  以上的例子建立了两个类,css和html,供HTML的CODE元素使用。CLASS属性是用于在HTML中以指明元素的类,例如,

  <P CLASS=warning>每个选择符只允许有一个类。

  例如,code.html.proprietary是无效的。</p>

  类的声明也可以无须相关的元素:

  .note { font-size: small }

  在这个例子,名为note的类可以被用于任何元素。

  一个良好的习惯是在命名类的时候,根据它们的功能而不是根据它们的外观。上述例子中的note类也可以命名为small,但如果网页制作者决定改变这个类的样式,使得它不再是小字体的话,那么这个名字就变得毫无意义了。

  ID 选择符

  ID 选择符个别地定义每个元素的成分。这种选择符应该尽量少用,因为他具有一定的局限。一个ID选择符的指定要有指示符"#"在名字前面。例如,ID选择符可以指定如下:

  #svp94O { text-indent: 3em }

  这点可以参考HTML中的ID属性:

  <P ID=svp94O>文本缩进3em</P>

  关联选择符

  关联选择符只不过是一个用空格隔开的两个或更多的单一选择符组成的字符串。这些选择符可以指定一般属性,而且因为层叠顺序的规则,它们的优先权比单一的选择符大。例如, 以下的上下文选择符

  P EM { background: yellow }

  是P EM。这个值表示段落中的强调文本会是黄色背景;而标题的强调文本则不受影响。

  声明

  属性

  一个属性被指定到选择符是为了使用它的样式。属性的例子包括颜色、边界和字体。

  值

  声明的值是一个属性接受的指定。例如,属性颜色能接受值red。

  组合

  为了减少样式表的重复声明,组合的选择符声明是允许的。例如,文档中所有的标题可以通过组合给出相同的声明:

  H1, H2, H3, H4, H5, H6 {

  color: red;

  font-family: sans-serif }

  继承

  实际上,所有在选择符中嵌套的选择符都会继承外层选择符指定的属性值,除非另外更改。例如,一个BODY定义了的颜色值也会应用到段落的文本中。

  有些情况是内部选择符不继承周围的选择符的值,但理论上这些都是特殊的。例如,上边界属性是不会继承的;直觉上,一个段落不会有同文档BODY一样的上边界值。

  注解

  样式表里面的注解使用C语言编程中一样的约定方法去指定。CSS1注解的例子如以下格式:

  /* COMMENTS CANNOT BE NESTED */

  伪类和伪元素

  伪类和伪元素是特殊的类和元素,能自动地被支持CSS的浏览器所识别。伪类区别开不同种类的元素(例如,visited links(已访问的连接)和active links(可激活连接)描述了两个定位锚(anchors)的类型)。伪元素指元素的一部分,例如段落的第一个字母。

  伪类或伪元素规则的形式如

  选择符:伪类 { 属性: 值 }

  或

  选择符:伪元素 { 属性: 值 }

  伪类和伪元素不应用HTML的CLASS属性来指定。一般的类可以与伪类和伪元素一起使用,如下:

  选择符.类: 伪类 { 属性: 值 }

  或

  选择符.类: 伪元素 { 属性: 值 }

  定位锚伪类

  伪类可以指定A元素以不同的方式显示连接(links)、已访问连接(visited links)和可激活连接(active links)。定位锚元素可给出伪类link、visited或active。一个已访问连接可以定义为不同颜色的显示,甚至不同字体大小和风格。

  一个有趣的效果是使当前(或“可激活”)连接以不同颜色、更大的字体显示。然后,当网页的已访问连接被重选时,又以不同颜色、更小字体显示。这个样式表的示例如下:

  A:link { color: red }

  A:active { color: blue; font-size: 125% }

  A:visited { color: green; font-size: 85% }

  首行伪元素

  通常在报纸上的文章,例如Wall Street Journal中的,文本的首行都会以粗印体而且全部大写地展示。CSS1包括了这个功能,将其作为一个伪元素。首行伪元素可以用于任何块级元素(例如P、H1等等)。以下是一个首行伪元素的例子:

  P:first-line {

  font-variant: small-caps;

  font-weight: bold }

  首个字母伪元素

  首个字母伪元素用于加大(drop caps)和其他效果。含有已指定值选择符的文本的首个字母会按照指定的值展示。一个首个字母伪元素可以用于任何块级元素。例如:

  P:first-letter { font-size: 300%; float: left }

  会比普通字体加大三倍。

  层叠顺序

  当使用了多个样式表,样式表需要争夺特定选择符的控制权。在这些情况下,总会有样式表的规则能获得控制权。以下的特性将决定互相对立的样式表的结果。

  ! important

  规则可以用指定的! important 特指为重要的。一个特指为重要的样式会凌驾于与之对立的其它相同权重的样式。同样地,当网页制作者和读者都指定了重要规则时,网页制作者的规则会超越读者的。以下是! important 声明的例子:

  BODY { background: url(bar.gif) white;

  background-repeat: repeat-x ! important }

  Origin of Rules (Author's vs. Reader's)

  正如以前所提及的,网页制作者和读者都有能力去指定样式表。当两者的规则发生冲突,网页制作者的规则会凌驾于读者的其它相同权重的规则。而网页制作者和读者的样式表都超越浏览器的内置样式表。

  网页制作者应该小心地使用! important 规则,因为它们会超越用户任何的! important 规则。例如,一个用户由于视觉关系,会要求大字体或指定的颜色,而且这样的用户会有可能声明确定的样式规则为! important,因为这些样式对于用户阅读网页是极为重要的。任何的! important 规则会超越一般的规则,所以建议网页制作者使用一般的规则以确保有特殊样式需要的用户能阅读网页。

  选择符规则: 计算特性

  基于它们的特性级别,样式表也可以超越与之冲突的样式表,一个较高特性的样式永远都凌驾于一个较低特性的样式。这只不过是计算选择符的指定个数的一个统计游戏。

  统计选择符中的ID属性个数。

  统计选择符中的CLASS属性个数。

  统计选择符中的HTML标记名格式。

  最后,按正确的顺序写出三个数字,不要加空格或逗号,得到一个三位数。( 注意,你需要将数字转换成一个以三个数字结尾的更大的数。)相应于选择符的最终数字列表可以很容易确定较高数字特性凌驾于较低数字的。以下是一个按特性分类的选择符的列表:

  #id1 {xxx} /* a=1 b=0 c=0 --> 特性 = 100 */

  UL UL LI.red {xxx} /* a=0 b=1 c=3 --> 特性 = 013 */

  LI.red {xxx} /* a=0 b=1 c=1 --> 特性 = 011 */

  LI {xxx} /* a=0 b=0 c=1 --> 特性 = 001 */

  特性的顺序

  为了方便使用,当两个规则具同样权重时,取后面





  有很多方法将样式表加入到HTML中,每个都带有自己的优点和缺点。新的HTML元素和属性已被加入以允许样式表与HTML文档更简易地组合起来。

  连接到一个外部的样式表

  嵌入一个样式表

  输入一个样式表

  内联样式

  CLASS属性

  ID属性

  SPAN元素

  DIV元素

  关于认证的备注

  --------------------------------------------------------------------------------

  连接到一个外部的样式表

  一个外部的样式表可以通过HTML的LINK元素连接到HTML文档中:

  <LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>

  <LINK REL=StyleSheet HREF="color-8b.css" TYPE="text/css" TITLE="8-bit Color Style" MEDIA="screen, print">

  <LINK REL="Alternate StyleSheet" HREF="color-24b.css" TYPE="text/css" TITLE="24-bit Color Style" MEDIA="screen, print">

  <LINK REL=StyleSheet HREF="aural.css" TYPE="text/css" MEDIA=aural>

  <LINK>标记是放置在文档的HEAD部分。可选的TYPE属性用于指定媒体类型--text/css是一个层叠样式表--允许浏览器忽略它们不支持的样式表类型。为CSS文件配置服务器而将text/css当作Content-type内容发送出去也是一个好注意。

  外部样式表不能含有任何像<HEAD>或<STYLE>这样的HTML的标记。样式表仅仅由样式规则或声明组成。一个单独由

  P { margin: 2em }

  组成的文件就可以用作外部样式表了。

  <LINK>标记也有一个可选的MEDIA属性,用于指定样式表被接受的介质或媒体。允许的值有

  screen (缺省值),提交到计算机屏幕;

  print, 输出到打印机;

  projection,提交到投影机;

  aural,扬声器;

  braille,提交到凸字触觉感知设备;

  tty,电传打字机 (使用固定的字体);

  tv,电视机;

  all,所有输出设备。

  多样的媒体通过用逗号隔开的列表或值all指定。

  Netscape Navigator 4.x 错误地忽略除了screen值外的任何使用MEDIA值声明的连接或嵌入样式表。例如,MEDIA="screen,projection"会令到样式表被Navigator 4.x忽略,尽管展示的设备是计算机的屏幕。Navigator 4.x 也忽略使用MEDIA=all声明的样式表。

  REL属性用于定义连接的文件和HTML文档之间的关系。REL=StyleSheet指定一个固定或首选的样式而REL="Alternate StyleSheet"定义一个交互样式。固定样式在样式表激活时总被应用。缺少的TITLE属性,就像例子中的第一个<LINK>标记,定义一个固定样式。

  一个首选样式会自动被应用,就像例子中的第二个<LINK>标记。REL=StyleSheet和一个TITLE属性的组合指定一个首选的样式。网页制作者不能指定多于一个的首选样式。

  交互样式通过REL="Alternate StyleSheet"指出。例子中的第三个<LINK>标记定义一个交互样式,用户可以选择用来代替首选样式表。

  注意现在的浏览器一般都缺乏选择交互样式的能力。

  单一的样式也可以通过多个样式表给出

  <LINK REL=StyleSheet HREF="basics.css" TITLE="Contemporary">

  <LINK REL=StyleSheet HREF="tables.css" TITLE="Contemporary">

  <LINK REL=StyleSheet HREF="forms.css" TITLE="Contemporary">

  在这个例子中,三个样式表组合成一个"Contemporary"样式,作为一个首选样式表被应用。要组合多个样式表成一个单一样式,必须在每个样式表中使用相同TITLE。

  当样式被应用到很多的网页时,一个外部样式表是理想的。网页制作者使用外部样式表可以改变整个网站的外观而仅仅通过改变一个文件。同样的,大多数浏览器会保存外部样式表在缓冲区,从而如果样式表在缓冲区就避免了在展示网页时的延迟。

  Microsoft Internet Explorer 3 for Windows 95/NT4并不支持来自连接的样式表中的BODY 背景图象或颜色。如果考虑到这个错误,网页制作者不妨提供另外的包括一个背景图象或颜色的结构,例如嵌入或内联样式,或使用BODY元素的BACKGROUND属性。

  --------------------------------------------------------------------------------

  嵌入一个样式表

  一个样式表可以使用STYLE元素在文档中嵌入:

  <STYLE TYPE="text/css" MEDIA=screen>

  <!--

  BODY { background: url(foo.gif) red; color: black }

  P EM { background: yellow; color: black }

  .note { margin-left: 5em; margin-right: 5em }

  -->

  </STYLE>

  STYLE元素放在文档的HEAD部分。必须的TYPE属性用于指定媒体类型,LINK元素也一样。同样地,TITLE和MEDIA属性也可以用STYLE指定。

  旧版本的浏览器,并不能识别STYLE元素,会将其当作BODY的一部分照常展示其内容,从而使这些样式表对用户是可见的。要防止这样做,STYLE元素的内容要包含一个SGML注解(<!-- comment -->)在里面,像上述例子那样。

  嵌入的样式表可用于当一个文档具有独一无二的样式的时候。如果多个文档都使用同一样式表,那么外部样式表会更适用。

  --------------------------------------------------------------------------------

  输入一个样式表

  一个样式表可以使用CSS的@import 声明被输入。这个声明用于一个CSS文件或内部的STYLE元素:

  <STYLE TYPE="text/css" MEDIA="screen, projection">

  <!--

  @import url(http://www.htmlhelp.com/style.css);

  @import url(/stylesheets/punk.css);

  DT { background: yellow; color: black }

  -->

  </STYLE>

  注意其它的CSS规则应该仍然包括在STYLE元素中,但所有的@import 声明必须放在样式表的开始部分。任意在样式表中指定了的规则,其自身超越在输入样式表中对立的规则。例如上例,即使一个输入的样式表包含DT { background: aqua },定义项(definition terms)依然会是黄色的背景。

  被输入的样式表的顺序对于它们怎样层叠是很重要的。在上述的例子中,如果style.css输入的样式表指定了STRONG元素会显示为红色而punk.css样式表指定了STRONG元素显示为黄色的话,那么后面的规则会获胜,而STRONG元素会显示为黄色。

  输入的样式表对于模块性效果很有用处。例如,一个网站可以通过使用了的选择符分类样式表。一个simple.css样式表给出公共的元素像BODY、P、H1和H2。此外,一个extra.css样式表给出较少共通的元素像CODE、BLOCKQUOTE和DFN。一个tables.css样式表可以用于定义变革元素的规则。这三个样式表在需要的时候可以使用@import 声明包括在HTML中。三个样式表也可以通过LINK元素组合。

  --------------------------------------------------------------------------------

  内联样式

  样式可以使用STYLE属性内联。STYLE属性可以应用于任意BODY元素(包括BODY本身),除了BASEFONT、PARAM和SCRIPT。这个属性将任何数量的CSS声明当作自己的值,而每个声明用分号隔开。以下是一个例子:

  <P STYLE="color: red; font-family: 'New Century Schoolbook', serif"> 这段的样式是红色的New Century Schoolbook字,如果字体可用的话。</P>

  注意在STYLE中New Century Schoolbook包含在单引号中,因为双引号被用作包含样式声明。

  内联的样式比其他方法更加灵活。要使用内联样式,必须使用Content-Style-Type HTTP页眉扩展对整个文档进行单独的样式表语言声明。使用内联CSS的网页制作者必须将text/css作为Content-Style-Type HTTP页眉,或在HEAD部分包括以下标记:

  <META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

  因为和需要展示的内容混合在一起,内联样式会失去一些样式表的优点。同样地,内联样式默认地接受所有媒体,因为没有任何的为内联样式指定明确的媒体的语句。这种方法应该尽量少用,如当一个样式会应用在所有媒体到一个元素的个别情况。如果样式会被应用到单一元素的场合,但只能使用确认的媒体的话,使用ID属性代替STYLE属性。

  --------------------------------------------------------------------------------

  CLASS属性

  CLASS属性用于指定元素属于何种样式的类。例如,样式表可以加入punk和warning类:

  .punk { color: lime; background: #ff80c0 }

  P.warning { font-weight: bolder; color: red; background: white }

  这些类可以使用CLASS属性在HTML中引用:

  <H1 CLASS=punk>属性扩展</H1>

  <P CLASS=warning>一些属性扩展会有负值的边效果,产生于支持和不支持的浏览器上...

  在这个例子中,punk类可以用于任何BODY元素因为它在样式表中没有HTML元素关联。而在这个例子的样式表,warning类只能用于P元素。

  一个良好的习惯是在命名类的时候,根据它们的功能而不是根据它们的外观。上述例子中的warning类也可以命名为red,但如果网页制作者决定改变这个类的样式为别的颜色,或希望为那些使用PC喇叭的人定义为aural(听觉)样式的话,那么这个名字就变得毫无意义了。

  类会是应用样式到HTML文档中在结构上一样的部分的有效的办法。例如,本页使用类给CSS源代码和HTML源代码使用不同的样式。

  --------------------------------------------------------------------------------

  ID属性

  ID属性用于定义一个元素的独特的样式。一个CSS规则如

  #wdg97 { font-size: larger }

  可以通过ID属性应用到HTML中:

  <P ID=wdg97>欢迎访问Web Design Group及TV water 168!</P>

  整个文档当中的每个ID属性的值都必须是唯一的。其值必须是一个以字母开头紧接字母、识字或连字符。字母限于A-Z和a-z。

  注意HTML 4.0允许在ID属性中有句号,但CSS1不允许在ID选择符中有句号。也要注意CSS1允许Unicode字符161-255而且忽略Unicode字符为一个数字代码,但HTML 4.0不允许这些字符在一个ID属性值当中。

  当一个样式只需要在任何文档中应用一次时,使用ID是很适合的。 ID与STYLE属性相比,在于ID允许指定媒体的样式,而且也可以被应用于多个文档(虽然每个文档只用一次)。

  --------------------------------------------------------------------------------

  SPAN元素

  SPAN元素被加入到HTML中以允许网页制作者给出样式但无须附加在一个HTML的结构元素上。SPAN在样式表中作为一个选择符使用,而且它也能接受STYLE、CLASS和ID属性。

  SPAN是一个内联元素,所以它可以作为HTML中的元素如EM和STRONG使用。最重要的差别在于虽然EM和STRONG带有结构的意义,但SPAN就没有这样的意义。它的存在纯粹是应用样式,所以当样式表失效时它就没有任何的作用。

  一些SPAN例子如下:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

  <HTML>

  <HEAD>

  <TITLE>SPAN的例子</TITLE>

  <STYLE TYPE="text/css" MEDIA="screen, print, projection">

  <!--

  .firstwords { font-variant: small-caps }

  -->

  </STYLE>

  </HEAD>

  <BODY>

  <P><SPAN CLASS=firstwords>The first few words</SPAN>前面是

  段落中少数的文字,会是小型大写字母。样式也可以内联,如改变文

  字的样式为<SPAN STYLE="font-family: Arial">Arial</SPAN>.</P>

  --------------------------------------------------------------------------------

  DIV元素

  DIV元素在功能上与SPAN元素相似,最主要的差别在于DIV ("division","部分"的简称)是一个块级元素。DIV可以包含段落、标题、表格甚至其它部分。这使DIV便于建立不同集成的类,如章节、摘要或备注。例如:

  <DIV CLASS=note>

  <H1>Divisions/部分</H1>

  <P>DIV元素在HTML 3.2中有定义,但HTML 3.2中只有ALIGN属性能兼容。HTML 4.0在属性中加入CLASS、STYLE、和ID属性。</P>

  <P>因为DIV可以包含其他块级集成,在用于建立文档的大型章节例如本备注是很有用的。</P>

  <P>要求关闭标记。</P>

  </DIV>

  --------------------------------------------------------------------------------

  关于认证的备注

  少数使用了CSS样式的文档能在HTML3.2 (Wilbur)层(在WDG网站,译者注)得到认证。HTML3.2不会解释SPAN元素,也不解释CLASS、STYLE或ID属性,而且在LINK和STYLE元素中也很少支持TYPE和MEDIA属性。

  这些有关的样式元素和属性对不支持的浏览器不会有害,因为它们能安全地忽略。文档使用这些元素和属性可以被认证防御于HTML 4.0。

显示

  语法: display: <值>

  允许值: block | inline | list-item | none

  初始值: block

  适用于: 所有对象

  向下兼容: 否

  显示属性允许使用四个值中的一个来定义一个元素:

  block (在元素的前和后都会有换行)

  inline (在元素的前和后都不会有换行)

  list-item (与block相同, 但增加了目录项标记)

  none (没有显示)

  每个元素都典型地由浏览器基于HTML规格建议的展示形式给出一个缺省的显示值。

  显示属性可能并不安全,因为它使用另外的不合适的格式显示元素。使用值none将关闭指定元素及其子元素的显示!

  --------------------------------------------------------------------------------

  空白

  语法: white-space: <值>

  允许值: normal | pre | nowrap

  初始值: normal

  适用于: 块级元素

  向下兼容: 是

  空白属性将决定如何处理元素内的空格. 该属性的值取以下三个中的一个:

  normal (将多个空格折叠成一个)

  pre (不折叠空格)

  nowrap (不允许换行,除非遇到<BR>标记)

  --------------------------------------------------------------------------------

  目录样式类型

  语法: list-style-type: <值>

  允许值: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none

  初始值: disc

  适用于: 带有显示值的目录项元素

  向下兼容: 是

  目录样式项属性指定目录项标记的类型,当目录样式图象值为none或当图象载入选项被关闭时使用。

  例如:

  LI.square { list-style-type: square }

  UL.plain { list-style-type: none }

  OL { list-style-type: upper-alpha } /* A B C D E etc. */

  OL OL { list-style-type: decimal } /* 1 2 3 4 5 etc. */

  OL OL OL { list-style-type: lower-roman } /* i ii iii iv v etc. */

  --------------------------------------------------------------------------------

  目录样式图象

  语法: list-style-image: <值>

  允许值: <url> | none

  初始值: none

  适用于: 带有显示值的目录项元素

  向下兼容: 是

  当图象载入选项打开时,目录样式图象属性在指定目录项标记使用哪个图象代替由目录样式类型属性指定的标记。

  例如:

  UL.check { list-style-image: url(/LI-markers/checkmark.gif) }

  UL LI.x { list-style-image: url(x.png) }

  --------------------------------------------------------------------------------

  目录样式位置

  语法: list-style-position: <值>

  允许值: inside | outside

  初始值: outside

  适用于: 带有显示值的目录项元素

  向下兼容: 是

  目录样式位置属性可以取值inside(内部) or outside(外部),其中outside是缺省值。整个属性决定关于目录项的标记应放在那里。如果使用inside值,换行会移到标记下,而不是缩进。应用的例子如下:

  Outside rendering:

  * List item 1

  second line of list item

  Inside rendering:

  * List item 1

  second line of list item

  --------------------------------------------------------------------------------

  目录样式

  语法: list-style: <值>

  允许值: <目录样式类型> || <目录样式位置> || <url>

  初始值: 未定义

  适用于: 带有显示值的目录项元素

  向下兼容: 是

  目录样式属性是目录样式类型、目录样式位置,和目录样式图象属性的略写。

  例如:

  LI.square { list-style: square inside }

  UL.plain { list-style: none }

  UL.check { list-style: url(/LI-markers/checkmark.gif) circle }

  OL { list-style: upper-alpha }

  OL OL { list-style: lower-roman inside }
上边界

  语法: margin-top: <值>

  允许值: <长度> | <百分比> | auto

  初始值: 0

  适用于: 所有元素

  向下兼容: 否

  上边界属性用一个指定的长度或百分比值来设置元素的上边界。百分比值参考上级元素的宽度。允许使用负值边际。

  例如,以下的规则将消除文件的上边界。

  BODY { margin-top: 0 }

  注意如果边界在垂直方向邻接(重叠)了,会改用其中最大的那个边界值。

  --------------------------------------------------------------------------------

  右边界

  语法: margin-right: <值>

  允许值: <长度> | <百分比> | auto

  初始值: 0

  适用于: 所有元素

  向下兼容: 否

  右边界属性用一个指定的长度或百分比值来设置元素的右边界。百分比值参考上级元素的宽度。允许使用负值边际。

  例如:

  P.narrow { margin-right: 50% }

  注意如果边界在水平方向邻接(重叠)了,不会改用其它边界值。

  --------------------------------------------------------------------------------

  下边界

  语法: margin-bottom: <值>

  允许值: <长度> | <百分比> | auto

  初始值: 0

  适用于: 所有元素

  向下兼容: 否

  下边界属性用一个指定的长度或百分比值来设置元素的下边界。百分比值参考上级元素的宽度。允许使用负值边际。

  例如:

  DT { margin-bottom: 3em }

  注意如果边界在垂直方向邻接(重叠)了,会改用其中最大的那个边界值。

  --------------------------------------------------------------------------------

  左边界

  语法: margin-left: <值>

  允许值: <长度> | <百分比> | auto

  初始值: 0

  适用于: 所有元素

  向下兼容: 否

  左边界属性用一个指定的长度或百分比值来设置元素的左边界。百分比值参考上级元素的宽度。允许使用负值边际。

  例如:

  ADDRESS { margin-left: 50% }

  注意如果边界在水平方向邻接(重叠)了,不会改用其它边界值。

  --------------------------------------------------------------------------------

  边界

  语法: margin: <值>

  允许值: [ <长度> | <百分比> | auto ]{1,4}

  初始值: 未定义

  适用于: 所有元素

  向下兼容: 否

  边界属性用一到四个值来设置元素的边界,每个值都是长度、百分比或者自动。百分比值参考上级元素的宽度。允许使用负值边际。

  如果四个值都给出了,它们分别被应用于上、右、下和左边界。如果只给出一个值,它被应用于所有边界。如果两个或三个值给出了,省略了的值与对边相等。

  边界声明包括以下例子:

  BODY { margin: 5em } /* 所有边界设为5em */

  P { margin: 2em 4em } /* 上和下边界为2em,左和右边界为4em */

  DIV { margin: 1em 2em 3em 4em } /* 上边界为1em,右边界为2em,下边界为3em,左边界为4em */

  注意如果边界在垂直方向邻接(重叠)了,会改用其中最大的那个边界值。而水平方向则不会。

  使用边界属性可以一次性地设置所有边界;也可以选择使用上边界、下边界、左边界和右边界属性。

  --------------------------------------------------------------------------------

  上补白

  语法: padding-top: <值>

  允许值: <长度> | <百分比>

  初始值: 0

  适用于: 所有对象

  向下兼容: 否

  上补白属性描述上边框和选择符的内容之间有多少间隔。该值可以是一个长度或百分比。百分比的值参考上级元素的宽度。不能使用负值。

  --------------------------------------------------------------------------------

  右补白

  语法: padding-right: <值>

  允许值: <长度> | <百分比>

  初始值: 0

  适用于: 所有对象

  向下兼容: 否

  右补白属性描述右边框和选择符的内容之间有多少间隔。该值可以是一个长度或百分比。百分比的值参考上级元素的宽度。不能使用负值。

  --------------------------------------------------------------------------------

  下补白

  语法: padding-bottom: <值>

  允许值: <长度> | <百分比>

  初始值: 0

  适用于: 所有对象

  向下兼容: 否

  下补白属性描述下边框和选择符的内容之间有多少间隔。该值可以是一个长度或百分比。百分比的值参考上级元素的宽度。不能使用负值。

  --------------------------------------------------------------------------------

  左补白

  语法: padding-left: <值>

  允许值: <长度> | <百分比>

  初始值: 0

  适用于: 所有对象

  向下兼容: 否

  左补白属性描述左边框和选择符的内容之间有多少间隔。该值可以是一个长度或百分比。百分比的值参考上级元素的宽度。不能使用负值。

  --------------------------------------------------------------------------------

  补白

  语法: padding: <值>

  允许值: [ <长度> | <百分比 ]{1,4}

  初始值: 0

  适用于: 所有对象

  向下兼容: 否

  补白属性是上补白、右补白、下补白和左补白属性的略写。

  一个元素的补白是边框和元素的内容之间的间隔的数值。可以给出从一到四的值,每个值可以是长度或百分比。百分比值参考上级元素的宽度。不能使用负值。

  如果四个值都给出了,它们分别应用于上、右、下和左补白。如果给出一个值,它将被运用到各边上。如果两个或三个值给出了,省略了的值与对边相等。

  例如,以下的规则设置上补白为2em,右补白为4em,下补白为5em,左补白为4em:

  BLOCKQUOTE { padding: 2em 4em 5em }

  --------------------------------------------------------------------------------

  上边框宽度

  语法: border-top-width: <值>

  允许值: thin | medium | thick | <长度>

  初始值: medium

  适用于: 所有对象

  向下兼容: 否

  上边框宽度属性用于指定一个元素上边框的宽度。值可以是三个关键字其中的一个,都不受字体大小或长度的影响,可以用于实现成比例的宽度。不允许使用负值。

  也可以用在上边框、边框的宽度或边框的属性略写。

  --------------------------------------------------------------------------------

  右边框宽度

  语法: border-right-width: <值>

  允许值: thin | medium | thick | <长度>

  初始值: medium

  适用于: 所有对象

  向下兼容: 否

  右边框宽度属性用于指定元素的右边框的宽度。值可以是三个关键字其中的一个,都不受字体大小或长度的影响,可以用于实现成比例的宽度。不允许使用负值。

  也可以用在右边框、边框的宽度或边框的属性略写。

  --------------------------------------------------------------------------------

  下边框宽度

  语法: border-bottom-width: <值>

  允许值: thin | medium | thick | <长度>

  初始值: medium

  适用于: 所有对象

  向下兼容: 否

  下边框宽度属性用于指定元素的下边框的宽度。值可以是三个关键字其中的一个,都不受字体大小或长度的影响,可以用于实现成比例的宽度。不允许使用负值。

  也可以用在下边框、边框的宽度或边框的属性略写。

  --------------------------------------------------------------------------------

  左边框宽度

  语法: border-left-width: <值>

  允许值: thin | medium | thick | <长度>

  初始值: medium

  适用于: 所有对象

  向下兼容: 否

  左边框宽度属性用于指定元素的左边框的宽度。值可以是三个关键字其中的一个,都不受字体大小或长度的影响,可以用于实现成比例的宽度。不允许使用负值。

  也可以用在左边框、边框的宽度或边框的属性略写。

  --------------------------------------------------------------------------------

  边框宽度

  语法: border-width: <值>

  允许值: [ thin | medium | thick | <长度> ]{1,4}

  初始值: 未定义

  适用于: 所有对象

  向下兼容: 否

  边框宽度属性用一到四个值来设置元素的边界,值是一个关键字或长度。不允许使用负值长度。

  如果四个值都给出了,它们分别应用于上、右、下和左边框的式样。如果给出一个值,它将被运用到各边上。如果两个或三个值给出了,省略了的值与对边相等。

  这个属性是上边框宽度、右边框宽度、下边框宽度和左边框宽度属性的略写。

  也可以使用略写的边框属性。

  --------------------------------------------------------------------------------

  边框颜色

  语法: border-color: <值>

  允许值: <颜色>{1,4}

  初始值: 颜色属性的值

  适用于: 所有对象

  向下兼容: 否

  边框颜色属性设置一个元素的边框颜色。可以使用一到四个关键字。如果四个值都给出了,它们分别应用于上、右、下和左边框的式样。如果给出一个值,它将被运用到各边上。如果两个或三个值给出了,省略了的值与对边相等。

  也可以使用略写的边框属性。

  --------------------------------------------------------------------------------

  边框样式

  语法: border-style: <值>

  允许值: [ none | dotted | dashed | solid | double | groove | ridge | inset | outset ]{1,4}

  初始值: none

  适用于: 所有对象

  向下兼容: 否

  边框样式属性用于设置一个元素边框的样式。这个属性必须用于指定可见的边框。

  可以使用一到四个关键字。如果四个值都给出了,它们分别应用于上、右、下和左边框的式样。如果给出一个值,它将被运用到各边上。如果两个或三个值给出了,省略了的值与对边相等。

  也可以使用略写的边框属性。

  --------------------------------------------------------------------------------

  上边框

  语法: border-top: <值>

  允许值: <上边框宽度> || <边框式样> || <颜色>

  初始值: 未定义

  适用于: 所有对象

  向下兼容: 否

  上边框属性是一个用于设置一个元素上边框的宽度、式样和颜色的略写。

  注意只能给出一个边框式样。

  也可以使用略写的边框属性。

  --------------------------------------------------------------------------------

  右边框

  语法: border-right: <值>

  允许值: <右边框宽度> || <边框式样> || <颜色>

  初始值: 未定义

  适用于: 所有对象

  向下兼容: 否

  右边框属性是一个用于设置一个元素右边框的宽度、式样、和颜色的略写。

  注意只能给出一个边框式样。

  也可以使用略写的边框属性。

  --------------------------------------------------------------------------------

  下边框

  语法: border-bottom: <值>

  允许值: <下边框宽度> || <边框式样> || <颜色>

  初始值: 未定义

  适用于: 所有对象

  向下兼容: 否

  下边框属性是一个用于设置一个元素的下边框的宽度、式样和颜色的略写。

  注意只能给出一个边框式样。

  也可以使用略写的边框属性。

  --------------------------------------------------------------------------------

  左边框

  语法: border-left: <值>

  允许值: <左边框宽度> || <边框式样> || <颜色>

  初始值: 未定义

  适用于: 所有对象

  向下兼容: 否

  左边框属性是一个用于设置一个元素左边框的宽度、式样和颜色的略写。

  注意只能给出一个边框式样。

  也可以使用略写的边框属性。

  --------------------------------------------------------------------------------

  边框

  语法: border: <值>

  允许值: <边框宽度> || <r边框式样> || <颜色>

  初始值: 未定义

  适用于: 所有对象

  向下兼容: 否

  边框属性是一个用于设置一个元素边框的宽度、式样和颜色的略写。

  边框声明的例子包括:

  H2 { border: groove 3em }

  A:link { border: solid blue }

  A:visited { border: thin dotted #800080 }

  A:active { border: thick double red }

  边框属性只能设置四种边框;只能给出一组边框的宽度和式样。为了给出一个元素的四种边框的不同的值,网页制作者必须用一个或更多的属性,如:上边框、右边框、下边框、左边框、边框颜色、边框宽度、边框式样、上边框宽度、右边框宽度、下边框宽度或左边框宽度。

  --------------------------------------------------------------------------------

  宽度

  语法: width: <值>

  允许值: <长度> | <百分比> | auto

  初始值: auto

  适用于: 块级和替换元素

  向下兼容: 否

  每个块级或替换元素都可以用一个长度或“auto”值来指定其宽度。(替换元素仅指一些已知原有尺寸的元素。HTML替换元素包括 IMG, INPUT, TEXTAREA, Select, 和 OBJECT.) 宽度属性的初始值为“auto”,即为该元素的原有宽度(有就是元素自己的宽度,例如一个图象的宽度)。百分比参考上级元素的宽度。不允许使用负的长度值。

  这个属性能用作给出一些INPUT元素的公共长度,好象SUBMIT和RESET按钮:

  INPUT.button { width: 10em }

  --------------------------------------------------------------------------------

  高度

  语法: height: <值>

  允许值: <长度> | auto

  初始值: auto

  适用于: 块级和替换元素

  向下兼容: 否

  每个块级或替换元素都可以用一个长度或“auto”值来指定其高度。(替换元素仅指一些已知原有尺寸的元素。HTML替换元素包括 IMG, INPUT, TEXTAREA, Select, 和 OBJECT.) 高度属性的初始值为“auto”,即为该元素的原有高度(有就是元素自己的高度,例如一个图象的高度)。不允许使用负的长度值。

  与宽度属性一样,高度可以应用于设定图象的比例:

  IMG.foo { width: 40px; height: 40px }

  在大多数情况下,我们都建议网页制作者使用图象编辑软件按比例伸缩图象,因为浏览器不可能高质量地伸缩图象,也因为使用这个属性缩小图象会导致用户下载了一个不必要的庞大文件。虽然如此,通过宽度和高度属性伸缩图象依然是用户—定义样式表中一个有用的用作克服视觉问题的选择。

  --------------------------------------------------------------------------------

  漂浮

  语法: float: <值>

  允许值: left | right | none

  初始值: none

  适用于: 所有元素

  向下兼容: 否

  漂浮属性允许网页制作者将文本环绕在一个元素的周围. 这同HTML 3.2中IMG元素的ALIGN=left和ALIGN=right一样,但CSS1允许所有对象“漂浮”,而不像HTML 3.2那样仅仅允许图象和表格。

  --------------------------------------------------------------------------------

  清除

  语法: clear: <值>

  允许值: none | left | right | both

  初始值: none

  适用于: 所有元素

  向下兼容: 否

  清除属性指定一个元素是否允许有元素漂浮在它的旁边。值left移动元素到在其左边的漂浮的元素的下面;同样的值right移动到其右边的漂浮的元素下面。其他的还有缺省的none值,和移动元素到其两边的漂浮的元素的下面的none值。这个属性类似于HTML 3.2的函数<BR CLEAR=left|right|all|none>,但它能应用于所有元素。


颜色

  语法: color: <颜色>

  初始值: 由浏览器决定

  适用于: 所有对象

  向下兼容: 是

  颜色属性允许网页制作者指定一个元素的颜色。查看单位可以知道颜色值的描述. 一些颜色规则的例子包括:

  H1 { color: blue }

  H2 { color: #000080 }

  H3 { color: #0c0 }

  为了避免与用户的样式表之间的冲突,背景和颜色属性应该始终一起指定。

  --------------------------------------------------------------------------------

  背景颜色

  语法: background-color: <值>

  允许值: <颜色> | transparent (透明)

  初始值: transparent (透明)

  适用于: 所有对象

  向下兼容: 否

  背景颜色属性设定一个元素的背景颜色。例如:

  BODY { background-color: white }

  H1 { background-color: #000080 }

  为了避免与用户的样式表之间的冲突,无论任何背景颜色被使用的时候,背景图象都应该被指定。而大多数情况下,background-image: none都是合适的。

  网页制作者也可以使用略写的背景属性,通常会比背景颜色属性获得更好的支持。

  --------------------------------------------------------------------------------

  背景图象

  语法: background-image: <值>

  允许值: <统一资源定位URLs> | none (无)

  初始值: none (无)

  适用于: 所有对象

  向下兼容: 否

  背景图象属性设定一个元素的背景图象。例如:

  BODY { background-image: url(/images/foo.gif) }

  P { background-image: urlhttp://www.htmlhelp.com/bg.png) }

  为了那些不载入图象的浏览者,当定义了背景图象后,应该也要定义一个类似的背景颜色。

  网页制作者也可以使用略写的背景属性,通常会比背景图象属性获得更好的支持。

  --------------------------------------------------------------------------------

  背景重复

  语法: background-repeat: <值>

  允许值: repeat | repeat-x | repeat-y | no-repeat

  初始值: repeat

  适用于: 所有对象

  向下兼容: 否

  背景重复属性决定一个指定的背景图象如何被重复。值为repeat-x时,图象横向重复,当值为repeat-y时图象纵向重复。例如:

  BODY { background: white url(candybar.gif);

  background-repeat: repeat-x }

  在以上例子中, 图象只会被横向平铺。

  网页制作者也可以使用略写的背景属性,通常会比背景重复属性获得更好的支持。

  --------------------------------------------------------------------------------

  背景附件

  语法: background-attachment: <值>

  允许值: scroll | fixed

  初始值: scroll

  适用于: 所有对象

  向下兼容: 否

  背景附件属性决定指定的背景图象是跟随内容滚动,还是被看作油画固定不动。例如,以下指定一个固定的背景图象:

  BODY { background: white url(candybar.gif);

  background-attachment: fixed }

  网页制作者也可以使用略写的背景属性,通常会比背景附件属性获得更好的支持。

  --------------------------------------------------------------------------------

  背景位置

  语法: background-position: <值>

  允许值: [<百分比> | <长度>]{1,2} | [top | center | bottom] || [left | center | right]

  初始值: 0% 0%

  适用于: 块级及替换元素

  向下兼容: 否

  图象位置属性给出指定背景图象的最初位置。这个属性只能应用于块级元素和替换元素。(替换元素仅指一些已知原有尺寸的元素。HTML替换元素包括 IMG, INPUT, TEXTAREA, Select, 和 OBJECT。)

  安排背景位置最容易的方法是使用关键字:

  横向的关键字 (left, center, right)

  纵向的关键字 (top, center, bottom)

  百分比和长度也可用作安排背景图象的位置。百分比和元素字体大小有关。虽然使用长度是允许的,但因为它们处理不同的显示分辨率有不可避免的缺点,所以不被推荐。

  当使用百分比或长度时,需首先指定横向位置,接着是纵向位置。一个值,例如20% 65%,指定图象的左起20%上起65%的那点会被放在元素的左起20%上起65%的那点的所在位置。一个值如5px 10px,指定图象的左上角会被放在元素的左起5像素上起10像素的位置。

  如果仅给出横向的值,纵向位置的值为50%。长度和百分比的组合是允许的,负值也行。例如,10% -2cm是允许的。虽然,百分比和长度是不能够和关键字组合。

  关键字解释如下:

  top left = left top = 0% 0%

  top = top center = center top = 50% 0%

  right top = top right = 100% 0%

  left = left center = center left = 0% 50%

  center = center center = 50% 50%

  right = right center = center right = 100% 50%

  bottom left = left bottom = 0% 100%

  bottom = bottom center = center bottom = 50% 100%

  bottom right = right bottom = 100% 100%

  如果背景图象被看作油画般固定不动,关于油画的图象会代替元素被放置。

  网页制作者也可以使用略写的背景属性,通常会比背景位置属性获得更好的支持。

  -------------------------------------------------------------------------------

  背景

  语法: background: <值>

  允许值: <背景颜色> || <背景图象> || <背景重复> || <背景附件> || <背

景位置>

  初始值: 未定义

  适用于: 所有对象

  向下兼容: 否

  背景属性是一个更明确的背景—关系属性的略写。以下是一些背景的声明:

  BODY { background: white urlhttp://www.htmlhelp.com/foo.gif) }

  BLOCKQUOTE { background: #7fffd4 }

  P { background: url(../backgrounds/pawn.png) #f0f8ff fixed }

  TABLE { background: #0c0 url(leaves.jpg) no-repeat bottom right }

  当一个值未被指定时,将接受其初始值。例如,在上述的前三条规则,背景位置属性将被设置为0% 0%。

  为了避免与用户的样式表之间的冲突,背景和颜色应该一起被指定。

字体族科

  语法: font-family: <<族科名称> | <种类族科>],]* [<族科名称> | <种类族科>]

  允许值: <族科名称>

  任意字体族科名称都可以使用

  <种类族科>

  serif (e.g., Times)

  sans-serif (e.g., Arial or Helvetica)

  cursive (e.g., Zapf-Chancery)

  fantasy (e.g., Western)

  monospace (e.g., Courier)

  初始值: 由浏览器决定

  适用于: 所有对象

  向下兼容: 是

  字体族科可以用一个指定的的字体名或一个种类的字体族科。很明显,定义一个指定的字体名不会比定义一个种类的字体族科合适。多个族科的赋值是可以使用的,而如果确定了一个指定的字体赋值,就应该有一个种类族科名随后,以防第一个选择不存在。

  字体族科声明的例子如下:

  P { font-family: "New Century Schoolbook", Times, serif }

  留意头两个赋值指定了字体的类型: New Century Schoolbook和Times。可是,因为它们两者都是serif字体,字体族科的种类作为后备列了出来,以防系统没有两者但有另一个serif合资格的字体。

  任何包含空格的字体名都必须用单引号或双引号引住。

  字体族科也可以用字体属性给出。

  --------------------------------------------------------------------------------

  字体风格

  语法: font-style: <值>

  允许值: normal | italic | oblique

  初始值: normal

  适用于: 所有对象

  向下兼容: 是

  字体风格属性以三个方法的其中一个来定义显示的字体: normal (普通),italic (斜体) 或oblique (倾斜)。样式表的字体风格声明例子如下:

  H1 { font-style: oblique }

  P { font-style: normal }

  --------------------------------------------------------------------------------

  字体变形

  语法: font-variant: <值>

  允许值: normal | small-caps

  初始值: normal

  适用于: 所有对象

  向下兼容: 是

  字体变形属性决定了字体的显示是normal (普通) 还是small-caps (小型大写字母)。当文字中所有字母都是大写的时候,小型大写字母(值)会显示比小写字母稍大的大写字符。稍后版本的CSS将会支持附加的变形,如收缩、扩张、小写数码或其它自定义的变形。字体变形的定义例子如下:

  SPAN { font-variant: small-caps }

  --------------------------------------------------------------------------------

  字体加粗

  语法: font-weight: <值>

  允许值: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

  初始值: normal

  适用于: 所有对象

  向下兼容: 是

  字体加粗属性用作说明字体的加粗。当其它值绝对时,bolder和lighter值将相对地成比例增长。

  注意: 因为不是所有的字体都有九个有效的加粗显示,一些加粗的会在指定下组合。如果指定的加粗无效,会按以下原则选择:

  500 会被 400代替,反之亦是

  100-300 会被指定为下一较细的加粗,如果有的话,否则就是下一较粗的加粗

  600-900 会被指定为下一较粗的加粗,如果有的话,否则就是下一较细的加粗

  一些字体加粗的定义例子如下:

  H1 { font-weight: 800 }

  P { font-weight: normal }

  --------------------------------------------------------------------------------

  字体大小

  语法: font-size: <绝对大小> | <相对大小> | <长度> | <百分比>

  允许值: <绝对大小>

  xx-small | x-small | small | medium | large | x-large | xx-large

  <相对大小>

  larger | smaller

  <长度>

  <百分比> (in relation to parent element)

  初始值: medium

  适用于: 所有对象

  向下兼容: 是

  字体大小属性用作修改字体显示的大小。绝对长度(使用的单位为pt-像素和in-英寸) 需要谨慎地考虑到其适应不同浏览环境时的弱点。对于一个用户来说,绝对长度的字体很有可能会很大,或很小。

  一些大小指定的定义如下:

  H1 { font-size: large }

  P { font-size: 12pt }

  LI { font-size: 90% }

  STRONG { font-size: larger }

  网页制作者需要清楚Microsoft Internet Explorer 3.x 会错误地将em 和ex单位当作像素,这很可能会令到使用了这些单位的文本不可读。浏览器还会错误地将百分比值视为相对于选中部分的缺省字体大小,而不是上级元素的字体大小。这种做法像

  H1 { font-size: 200% }

  这是危险的,其大小将被视为IE的一级标题的缺省字体大小的两倍,而不是两倍于上级元素的字体大小。在这种情况中,BODY 通常会被视为上级元素,而且很可能定义一个medium的字体大小,然而,在IE中一级标题的缺省字体大小可能被认为是xx-large。

  注意到了这些错误后,网页制作者在使用字体大小属性时,应该小心使用百分比的值,而且应该尽量避免使用em和ex这两个单位。

  --------------------------------------------------------------------------------

  字体

  语法: font: <值>

  允许值: [ <字体风格> || <字体变形> || <字体加粗> ]? <字体大小> [ / <行高> ]? <字体族科>

  初始值: 未定义

  适用于: 所有对象

  向下兼容: 是

  字体属性用作不同字体属性的略写,特别是行高。例如,

  P { font: italic bold 12pt/14pt Times, serif }

  指定该段为bold(粗体)和italic(斜体)Times或serif字体,12点大小,行高为14点。


文字间隔

  语法: word-spacing: <值>

  允许值: normal | <长度>

  初始值: normal

  适用于: 所有元素

  向下兼容: 是

  文字间隔属性定义一个附加在文字之间的间隔数量。该值必须符合长度格式,允许使用负值。

  例如:

  P EM { word-spacing: 0.4em }

  P.note { word-spacing: -0.2em }

  --------------------------------------------------------------------------------

  字母间隔

  语法: letter-spacing: <值>

  允许值: normal | <长度>

  初始值: normal

  适用于: 所有元素

  向下兼容: 是

  字母间隔属性定义一个附加在字符之间的间隔数量。该值必须符合长度格式,允许使用负值。一个设为零的值会阻止文字的调整。

  例如:

  H1 { letter-spacing: 0.1em }

  P.note { letter-spacing: -0.1em }

  --------------------------------------------------------------------------------

  文本修饰

  语法: text-decoration: <值>

  允许值: none | [ underline || overline || line-through || blink ]

  初始值: none

  适用于: 所有元素

  向下兼容: 否

  文本修饰属性允许通过五个属性中的一个来修饰文本: underline (下划线),overline (上划线),line-through (删除线),blink (闪烁),或缺省地使用无。

  例如,使用下列语句可以使连接不再有下划线:

  A:link,A:visited,A:active { text-decoration: none }

  --------------------------------------------------------------------------------

  纵向排列

  语法: vertical-align: <值>

  允许值: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <百分比>

  初始值: baseline

  适用于: 内部元素

  向下兼容: 否

  纵向排列属性可以用作一个内部元素的纵向位置,相对于它的上级元素或相对于元素行。(一个内部元素是没有行在其前和后断开的,例如,在HTML中的EM,A,和IMG)

  该值可以是一个相对于元素行高属性的百分比,它会在上级基线上增高元素基线的指定数量。允许使用负值。

  该值也可以是一个关键字。以下的关键字将影响相对于上级元素的位置:

  baseline (使元素和上级元素的基线对齐)

  middle (纵向对齐元素基线加上上级元素的x-高度——字母" x "的高度——的一半的中点)

  sub (下标)

  super (上标)

  text-top (使元素和上级元素的字体向上对齐)

  text-bottom (使元素和上级元素的字体向下对齐)

  影响相对于元素行的位置的关键字有

  top (使元素和行中最高的元素向上对齐)

  bottom (使元素和行中最低的元素向下对齐)

  纵向排列属性对于排列图象特别有用。以下是一些例子:

  IMG.middle { vertical-align: middle }

  IMG { vertical-align: 50% }

  .exponent { vertical-align: super }

  --------------------------------------------------------------------------------

  文本转换

  语法: text-transform: <值>

  允许值: none | capitalize | uppercase | lowercase

  初始值: none

  适用于: 所有元素

  向下兼容: 是

  文本转换属性允许通过四个属性中的一个来转换文本:

  capitalize (使每个字的第一个字母大写)

  uppercase (使每个字的所有字母大写)

  lowercase (使每个字的所有字母小写)

  none (使用原始值)

  例如:

  H1 { text-transform: uppercase }

  H2 { text-transform: capitalize }

  文本转换属性仅仅被用于表达某种格式的要求。这并非很适当的做法,例如,用文本转换使一些国家的名字的第一个字母大写,而其它字母小写。

  --------------------------------------------------------------------------------

  文本排列

  语法: text-align: <值>

  允许值: left | right | center | justify

  初始值: 由浏览器决定

  适用于: 块级元素

  向下兼容: 是

  文本排列属性可以应用于块级元素(P,H1,等),使元素文本得到排列。这个属性的功能类似于HTML的段、标题和部分的ALIGN属性。

  以下是一些例子:

  H1 { text-align: center }

  P.newspaper { text-align: justify }

  --------------------------------------------------------------------------------

  文本缩进

  语法: text-indent: <值>

  允许值: <长度> | <百分比>

  初始值: 0

  适用于: 块级元素

  向下兼容: 是

  文本缩进属性可以应用于块级元素(P,H1,等.),以定义该元素第一行可以接受的缩进的数量。该值必须是一个长度或一个百分比。若百分比则视上级元素的宽度而定。通用的文本缩进用法是用于段的缩进:

  P { text-indent: 5em }


  长度单位

  一个长度的值由可选的正号" + "或负号" - "、接着的一个数字、还有标明单位的两个字母组成。在一个长度的值之中是没有空格的,例如,1.3 em就不是一个有效的长度的值,但1.3em就是有效的。一个为零的长度不需要两个字母的单位声明。

  无论是相对值还是绝对值长度,CSS1都支持。相对值单位确定一个相对于另一长度属性的长度,因为它能更好地适应不同的媒体,所以是首选的。以下是有效的相对单位:

  em (em,元素的字体的高度)

  ex (x-height,字母 "x" 的高度)

  px (像素,相对于屏幕的分辨率)

  绝对长度单位视输出介质而定,所以逊色于相对单位。以下是有效的绝对单位:

  in (英寸,1英寸=2.54厘米)

  cm (厘米,1厘米=10毫米)

  mm (米)

  pt (点,1点=1/72英寸)

  pc (帕,1帕=12点)

  --------------------------------------------------------------------------------

  百分比单位

  一个百分比值由可选的正号"+"或负号"-"、接着的一个数字,还有百分号"%"。在一个百分比值之中是没有空格的。

  百分比值是相对于其它数值,同样地用于定义每个属性。最经常使用的百分比值是相对于元素的字体大小。

  --------------------------------------------------------------------------------

  颜色单位

  颜色值是一个关键字或一个RGB格式的数字。

  Windows VGA(视频图像阵列)形成了16各关键字: aqua,black, blue,fuchsia,gray,green, lime,maroon,navy,olive, purple,red,silver,teal,white,and yellow。

  RGB颜色可以有四种形式:

  #rrggbb (如,#00cc00)

  #rgb (如,#0c0)

  rgb(x,x,x) x是一个介乎0到255之间的整数 (如,rgb(0,204,0))

  rgb(y%,y%,y%) y是一个介乎0.0到100.0之间的整数 (如,rgb(0%,80%,0%))

  上述的例子指定同一颜色。

  Douglas R. Jacobson先生还开发了速查手册RGB Color Chart (61 kB)。

  --------------------------------------------------------------------------------

  统一资源管理URLs

  一个URL值的格式为 : url(foo),foo是一个URL(统一资源管理,因特网的地址)。URL可以选择用单引号( ' )或者双引号( " ),并且,在URL之前或之后可以包含空格。

  在URL中的括弧,逗号,空格,单引号,或双引号必须避开反斜杠。不完整的URLs被理解为样式表的源代码,而不是HTML源代码。

  注意: Netscape Navigator 4.x 会错误地将不完整的URLs理解为相关的HTML源代码。注意到这个错误后,网页制作者应该在可能的地方使用完整的URLs。

  例如:

  BODY { background: url(stripe.gif) }

  BODY { background: urlhttp://www.htmlhelp.com/stripe.gif) }

  BODY { background: url( stripe.gif ) }

  BODY { background: url("stripe.gif") }

  BODY { background: url("Ulalume".png) } /* quotes in URL escaped */

层叠样式表还没有开始广泛使用,但CSS的滥用已经开始。样式表,当使用得当时,可以是一个提供独特和有吸引力的展示的有力工具,当时也允许一个网页被所有用户轻易处理。然而,一旦网页的信息变得依赖样式表时,网页就变成了Web上的失败者。

    样式表的设计在于允许网页制作者去改变网页的展示,而不是控制展示。样式表会被可能选择—或需要—他们自己的样式表的用户所超越。因为这些原因,依赖一些样式的网页制作者会发现他们的网页对于部分重要的用户来说难以接受。

    样式表的无聊使用演示于一些所谓的CSS图表。一个出现在许多地方的共通弊端是"制作阴影"。这种做法使用了负边界值,而加入了大量的依赖样式表的因素。当样式表被除去,无论是用户的决定还是使用了不支持CSS的浏览器,这些网页往往都不可用了。

    例如,看看SpaceGUN Magazine,一个虚构在Microsoft's CSS Gallery的杂志。使用Microsoft Internet Explorer 3.01的打开样式表时,其展示必定是独特和引人注目的:

  但一旦样式表失效,即使使用同样的浏览器,结果也非常不同:

    十分明显,网页因为制作的阴影和负边界值的把戏而在Web上不可用,从而因为搞得乱七八糟脱离了许多读者。这个例子也显示依赖样式表是必然失败的。一个Web文档如果不易处理是没有生命力。

  样式表设计者应该小心以总是保证他们的网页没有依赖样式表。一些网页制作者尝试使用WingDings字体制作图象无须争议和增加真正图象的下载时间。尽管这种减少下载时间的动机是可赞赏的,然而这样的人依赖于用户具有WingDings字体和样式表是有效的——在万维网(World Wide Web)上,这些条件是永远无法确认的。
语法: line-height: <值>

  允许值: normal | <数字> | <长度> | <百分比>

  初始值: normal

  适用于: 所有元素

  向下兼容: 是

  行高属性可以接受一个控制文本基线之间的间隔的值。当值为数字时,行高由元素字体大小的量与该数字相乘所得。百分比的值相对于元素字体的大小而定。不允许使用负值。

  行高也可以由带有字体大小的字体属性产生。

  行高属性可以用于双行距的文本:

  P { line-height: 200% }

  Microsoft Internet Explorer 3.x 会错误地将em和ex单位当作像素。这错误很可能会令到文本不可读,所以网页制作者需要避免引起这个随处可能发生的错误; 使用百分比单位往往是一个好的选择。
作者翻译:阿捷

  原文作者:Roger Johansson

  作者简介:住在瑞典哥德堡,1994年开始接触和参与web设计,456 Berea Street是他的住址,因此采用这个名字作为他的个人主页域名

  原文出处:www.456bereastreet.com

  原文发表时间:2005年3月15日

  最近,经常有朋友问我一些工作中遇到的CSS问题。他们总是不能很好的控制CSS,影响CSS的效率发挥。我来分析总结一下错误所在,帮助大家更加容易使用CSS。

  本文总结了我开始使用CSS布局方法以来所有的技巧和兼容方案,我愿意把这些与你分享,我会重点解释一些新手容易犯的错误(包括我自己也犯过的),如果你已经是CSS高手,这些经验技巧可能已经都知道,如果你有更多的,希望可以帮我补充。

  一.使用css缩写

  使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》,这里就不展开描述。

  二.明确定义单位,除非值为0

  忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width="100",但是在CSS中,你必须给一个准确的单位,比如:width:100px width:100em。只有两个例外情况可以不定义单位:行高和0值。除此以外,其他值都必须紧跟单位,注意,不要在数值和单位之间加空格。

  三.区分大小写

  当在XHTML中使用CSS,CSS里定义的元素名称是区分大小写的。为了避免这种错误,我建议所有的定义名称都采用小写。

  class和id的值在HTML和XHTML中也是区分大小写的,如果你一定要大小写混合写,请仔细确认你在CSS的定义和XHTML里的标签是一致的。

  四.取消class和id前的元素限定

  当你写给一个元素定义class或者id,你可以省略前面的元素限定,因为ID在一个页面里是唯一的,而clas s可以在页面中多次使用。你限定某个元素毫无意义。例如:

  div#content { /* declarations */ }

  fieldset.details { /* declarations */ }

  可以写成

  #content { /* declarations */ }

  .details { /* declarations */ }

  这样可以节省一些字节。

  五.默认值

  通常padding的默认值为0,background-color的默认值是transparent。但是在不同的浏览器默认值可能不同。如果怕有冲突,可以在样式表一开始就先定义所有元素的margin和padding值都为0,象这样:

  * {

  margin:0;

  padding:0;

  }

  六.不需要重复定义可继承的值

  CSS中,子元素自动继承父元素的属性值,象颜色、字体等,已经在父元素中定义过的,在子元素中可以直接继承,不需要重复定义。但是要注意,浏览器可能用一些默认值覆盖你的定义。

  七.最近优先原则

  如果对同一个元素的定义有多种,以最接近(最小一级)的定义为最优先,例如有这么一段代码

  Update: Lorem ipsum dolor set

  在CSS文件中,你已经定义了元素p,又定义了一个class"update"

  p {

  margin:1em 0;

  font-size:1em;

  color:#333;

  }

  .update {

  font-weight:bold;

  color:#600;

  }

  这两个定义中,class="update"将被使用,因为class比p更近。你可以查阅W3C的《 Calculating a selector’s specificity》 了解更多。

  八.多重class定义

  一个标签可以同时定义多个class。例如:我们先定义两个样式,第一个样式背景为#666;第二个样式有10 px的边框。

  .one{width:200px;background:#666;}

  .two{border:10px solid #F00;}

  在页面代码中,我们可以这样调用

  <div class="one two"></div>

  这样最终的显示效果是这个div既有#666的背景,也有10px的边框。是的,这样做是可以的,你可以尝试一下。

  九.使用子选择器(descendant selectors)

  CSS初学者不知道使用子选择器是影响他们效率的原因之一。子选择器可以帮助你节约大量的class定义。我们来看下面这段代码:

  <div id="subnav">

  <ul>

  <li class="subnavitem"> <a href="#" class="subnavitem">Item 1</a></li>>

  <li class="subnavitemselected"> <a href="#" class="subnavitemselected"> Item 1</a> </li>

  <li class="subnavitem"> <a href="#" class="subnavitem"> Item 1</a> </li>

  </ul>

  </div>

  这段代码的CSS定义是:

  div#subnav ul { /* Some styling */ }

  div#subnav ul li.subnavitem { /* Some styling */ }

  div#subnav ul li.subnavitem a.subnavitem { /* Some styling */ }

  div#subnav ul li.subnavitemselected { /* Some styling */ }

  div#subnav ul li.subnavitemselected a.subnavitemselected { /* Some styling */ }

  你可以用下面的方法替代上面的代码

  <ul id="subnav">

  <li> <a href="#"> Item 1</a> </li>

  <li class="sel"> <a href="#"> Item 1</a> </li>

  <li> <a href="#"> Item 1</a> </li>

  </ul>

  样式定义是:

  #subnav { /* Some styling */ }

  #subnav li { /* Some styling */ }

  #subnav a { /* Some styling */ }

  #subnav .sel { /* Some styling */ }

  #subnav .sel a { /* Some styling */ }

  用子选择器可以使你的代码和CSS更加简洁、更加容易阅读。

  十.不需要给背景图片路径加引号

  为了节省字节,我建议不要给背景图片路径加引号,因为引号不是必须的。例如:

  background:url("images/***.gif") #333;

  可以写为

  background:url(images/***.gif) #333;

  如果你加了引号,反而会引起一些浏览器的错误。

  十一.组选择器(Group selectors)

  当一些元素类型、class或者id都有共同的一些属性,你就可以使用组选择器来避免多次的重复定义。这可以节省不少字节。

  例如:定义所有标题的字体、颜色和margin,你可以这样写:

  h1,h2,h3,h4,h5,h6 {

  font-family:"Lucida Grande",Lucida,Arial,Helvetica,sans-serif;

  color:#333;

  margin:1em 0;

  }

  如果在使用时,有个别元素需要定义独立样式,你可以再加上新的定义,可以覆盖老的定义,例如:

  h1 { font-size:2em; }

  h2 { font-size:1.6em; }

  十二.用正确的顺序指定链接的样式

  当你用CSS来定义链接的多个状态样式时,要注意它们书写的顺序,正确的顺序是::link :visited :hover :active。抽取第一个字母是"LVHA",你可以记忆成"LoVe HAte"(喜欢讨厌)。为什么这么定义,可以参考Eric Meyer的《Link Specificity》。

  如果你的用户需要用键盘来控制,需要知道当前链接的焦点,你还可以定义:focus属性。:focus属性的效果也取决与你书写的位置,如果你希望聚焦元素显示:hover效果,你就把:focus写在:hover前面;如果你希望聚焦效果替代:hover效果,你就把:focus放在:hover后面。

  十三.清除浮动

  一个非常常见的CSS问题,定位使用浮动的时候,下面的层被浮动的层所覆盖,或者层里嵌套的子层超出了外层的范围。

  通常的解决办法是在浮动层后面添加一个额外元素,例如一个div或者一个br,并且定义它的样式为clear: both。这个办法有一点牵强,幸运的是还有一个好办法可以解决,参看这篇文章《How To Clear Floats Without Structural Markup》。

  上面2种方法可以很好解决浮动超出的问题,但是如果当你真的需要对层或者层里的对象进行clear的时候怎么办?一种简单的方法就是用overflow属性,这个方法最初的发表在《Simple Clearing of Floats》,又在《Clearance》和《Super simple clearing floats》中被广泛讨论。

  上面那一种clear方法更适合你,要看具体的情况,这里不再展开论述。另外关于float的应用,一些优秀的文章已经说得很清楚,推荐你阅读:《Floatutorial》、《Containing Floats》和《Float Layouts》

  十四.横向居中(centering)

  这是一个简单的技巧,但是值得再说一遍,因为我看见太多的新手问题都是问这个:CSS如何横向居中?你需要定义元素的宽,并且定义横向的margin,如果你的布局包含在一个层(容器)中,就象这样:

  你可以这样定义使它横向居中:

  #wrap {

  width:760px; /* 修改为你的层的宽度 */

  margin:0 auto;

  }

  但是IE5/Win不能正确显示这个定义,我们采用一个非常有用的技巧来解决:用text-align属性。就象这样:

  body {

  text-align:center;

  }

  #wrap {

  width:760px; /* 修改为你的层的宽度 */

  margin:0 auto;

  text-align:left;

  }

  第一个body的text-align:center; 规则定义IE5/Win中body的所有元素居中(其他浏览器只是将文字居中) ,第二个text-align:left;是将#warp中的文字居左。

  十五.导入(Import)和隐藏CSS

  因为老版本浏览器不支持CSS,一个通常的做法是使用@import技巧来把CSS隐藏起来。例如:

  @import url("main.css");

  然而,这个方法对IE4不起作用,这让我很是头疼了一阵子。后来我用这样的写法:

  @import "main.css";

  这样就可以在IE4中也隐藏CSS了,呵呵,还节省了5个字节呢。想了解@import语法的详细说明,可以看这里《centricle’s css filter chart》

  十六.针对IE的优化

  有些时候,你需要对IE浏览器的bug定义一些特别的规则,这里有太多的CSS技巧(hacks),我只使用其中的两种方法,不管微软在即将发布的IE7 beta版里是否更好的支持CSS,这两种方法都是最安全的。

  1.注释的方法

  (a)在IE中隐藏一个CSS定义,你可以使用子选择器(child selector):

  html>body p {

  /* 定义内容 */

  }

  (b)下面这个写法只有IE浏览器可以理解(对其他浏览器都隐藏)

  * html p {

  /* declarations */

  }

  (c)还有些时候,你希望IE/Win有效而IE/Mac隐藏,你可以使用"反斜线"技巧:

  /* */

  * html p {

  declarations

  }

  /* */

  2.条件注释(conditional comments)的方法

  另外一种方法,我认为比CSS Hacks更加经得起考验就是采用微软的私有属性条件注释(conditional comments)。用这个方法你可以给IE单独定义一些样式,而不影响主样式表的定义。就象这样:

  <!--[if IE]>

  <link rel="stylesheet" type="text/css" href="ie.css" />

  <![endif]-->

  十七.调试技巧:层有多大?

  当调试CSS发生错误,你就要象排版工人,逐行分析CSS代码。我通常在出问题的层上定义一个背景颜色,这样就能很明显看到层占据多大空间。有些人建议用border,一般情况也是可以的,但问题是,有时候border 会增加元素的尺寸,border-top和boeder-bottom会破坏纵向margin的值,所以使用background更加安全些。

  另外一个经常出问题的属性是outline。outline看起来象boeder,但不会影响元素的尺寸或者位置。只有少数浏览器支持outline属性,我所知道的只有Safari、OmniWeb、和Opera。

  十八.CSS代码书写样式

  在写CSS代码的时候,对于缩进、断行、空格,每个人有每个人的书写习惯。在经过不断实践后,我决定采用下面这样的书写样式:

  selector1,

  selector2 {

  property:value;

  }

  当使用联合定义时,我通常将每个选择器单独写一行,这样方便在CSS文件中找到它们。在最后一个选择器和大括号{之间加一个空格,每个定义也单独写一行,分号直接在属性值后,不要加空格。

  我习惯在每个属性值后面都加分号,虽然规则上允许最后一个属性值后面可以不写分号,但是如果你要加新样式时容易忘记补上分号而产生错误,所以还是都加比较好。

  最后,关闭的大括号}单独写一行。

  空格和换行有助与阅读。
1、一条千古不变的真理————枪杆子里面出政权!
2、最鼓舞人心的一句话————星星之火,可以燎原。
3、最豪迈,最傲气的一句话————切反动派都是纸老虎!
4、最自负的一句问话————问苍茫大地,谁主沉浮?
5、最震憾人心震憾世界的一句话————中国人民从此站起来了!
6、最正气澶然的一句话————人不犯我,我不犯人,人若犯我,我必犯人!
7、最具鼓动性的一句话————一万年太久,只争朝夕。
8、最有煽动性的一句话————革命不是请客吃饭,破旧立新,造反有理!
9、最有志气的一句话————-自己动手,丰衣足食!
10、令贪官们最为警醒的一句话————为人民服务。


这只是万里长征的第一步!
敢上九天揽月,敢下五洋抓鳖!
数风流人物还看今朝。
无限风光在险峰。
一 买个闹钟,以便按时叫醒你。贪睡和不守时,都将成为你工作和事业上的绊脚石,任何时候都一样。不仅要学会准时,更要学会提前。就如你坐车去某地,沿途的风景很美,你忍不住下车看一看,后来虽然你还是赶到了某地,却不是准时到达。“闹钟”只是一种简单的标志和提示,真正灵活、实用的时间,掌握在每个人的心中。 

二 如果你不喜欢现在的工作,要么辞职不干,要么就闭嘴不言。初出茅庐,往往眼高手低,心高气傲,大事做不了,小事不愿做。不要养成挑三拣四的习惯。不要雨天烦打伞,不带伞又怕淋雨,处处表现出不满的情绪。记住,不做则已,要做就要做好。

三 每个人都有孤独的时候。要学会忍受孤独,这样才会成熟起来。年轻人嘻嘻哈哈、打打闹闹惯了,到了一个陌生的环境,面对形形色色的人和事,一下子不知所措起来,有时连一个可以倾心说话的地方也没有。这时,千万别浮躁,学会静心,学会忍受孤独。在孤独中思考,在思考中成熟,在成熟中升华。不要因为寂寞而乱了方寸,而去做无聊无益的事情,白白浪费了宝贵的时间。

四 走运时要做好倒霉的准备。有一天,一只狐狸走到一个葡萄园外,看见里面水灵灵的葡萄垂涎欲滴。可是外面有栅栏挡着,无法进去。于是它一狠心绝食三日,减肥之后,终于钻进葡萄园内饱餐一顿。当它心满意足地想离开葡萄园时,发觉自己吃得太饱,怎么也钻不出栅栏了。相信任何人都不愿做这样的狐狸。退路同样重要。饱带干粮,晴带雨伞,点滴积累,水到渠成。有的东西今天似乎一文不值,但有朝一日也许就会身价百倍。

五 不要像玻璃那样脆弱。有的人眼睛总盯着自己,所以长不高看不远;总是喜欢怨天尤人,也使别人无比厌烦。没有苦中苦,哪来甜中甜?不要像玻璃那样脆弱,而应像水晶一样透明,太阳一样辉煌,腊梅一样坚强。既然睁开眼睛享受风的清凉,就不要埋怨风中细小的沙粒。

六 管住自己的嘴巴。不要谈论自己,更不要议论别人。谈论自己往往会自大虚伪,在名不副实中失去自己。议论别人往往陷入鸡毛蒜皮的是非口舌中纠缠不清。每天下班后和你的那些同事朋友喝酒聊天可不是件好事,因为,这中间往往会把议论同事、朋友当做话题。背后议论人总是不好的,尤其是议论别人的短处,这些会降低你的人格。

七 机会从不会“失掉”,你失掉了,自有别人会得到。不要凡事在天,守株待兔,更不要寄希望于“机会”。机会只不过是相对于充分准备而又善于创造机会的人而言的。也许,你正为失去一个机会而懊悔、埋怨的时候,机会正被你对面那个同样的“倒霉鬼”给抓住了。没有机会,就要创造机会,有了机会,就要巧妙地抓砖

八 若电话老是不响,你该打出去。很多时候,电话会给你带来意想不到的收获,它不是花瓶,仅仅成为一种摆设。交了新朋友,别忘了老朋友,朋友多了路好走。交际的一大诀窍就是主动。好的人缘好的口碑,往往助你的事业更上一个台阶.

九 千万不要因为自己已经到了结婚年龄而草率结婚。想结婚,就要找一个能和你心心相萤相辅相携的伴侣。不要因为放纵和游戏而恋爱,不要因为恋爱而影响工作和事业,更不要因一桩草率而失败的婚姻而使人生受阻。感情用事往往会因小失大。

十 写出你一生要做的事情,把单子放在皮夹里,经常拿出来看。人生要有目标,要有计划,要有提醒,要有紧迫感。一个又一个小目标串起来,就成了你一生的大目标。生活富足了,环境改善了,不要忘了皮夹里那张看似薄薄的单子。
1、你是我的第一个男人
2、从后面抱着我睡觉,我乖乖地蜷成一团,不转过去看你
3、半夜醒来的时候替你掖好被子
4、吃你喂给我的你认为好吃的东西,并且也觉得好吃
5、不打听你不想我知道的任何事情
6、相信你的每一句话,不揭穿你的谎言
7、努力适应你的生活方式和生活的圈子
8、友好地对待你的朋友,把他们也当作是自己的朋友
9、在你的朋友面前给足你面子
10、继续做你喜欢我做的工作
11、把头发留长,不烫卷,不使用者哩水等让头发变硬的东东
12、控制饮食和锻炼身体,以保持身材的苗条和改变太平公主的现状
13、为你剪指甲,让你改掉有心事就咬指甲的习惯
14、拉你一起去广场上吹肥皂泡泡
15、收起我的坏情绪,自己擦干脸上的泪,你看到我的时候我会尽量多的微笑
16、在电台点《天使与海豚》送给你
17、珍惜每一次和你的会面
18、在卡拉ok唱《勇气》的时候打电话给你
19、买烟给你,但是只买一点点,因为吸烟有害健康
20、让你背着我在屋子里打转
21、趴在你的肚子上和你一起看电视
22、一起洗澡,帮你擦干
23、看a片,学习做一个解风情的女人,而不一直是天真的小女孩
24、为爱变成一个笨笨的小女人
25、替你洗衣服,特别是臭袜子
26、帮你擦所有的皮鞋,不管你什么时候需要穿哪一双它们都是干净的
27、陪你到菜市场去买菜
28、吃光并称赞你做的菜
29、跟爸爸学会做他的金牌红烧蹄膀
30、保证手机的畅通,你随时都能找到我
31、告诉妈妈和你的故事,她有权了解谁把女儿变成一个女人
32、和你在卫生间里你好
33、好好保存你送我的每一件东西
34、用一个pp的小本本记下你发给我的每一条短信
35、默默地等你回来
36、不再见网友
37、你开心时比你还开心,你难过时比你还难过
38、真心地认为你做的每一件事都是有道理的
39、去照相馆拍情侣照,做成漂亮的小册子,我还要穿婚纱
40、把那只小熊一直放在床头
41、介绍我所有的好朋友给你认识
42、保护你不受一点委屈
43、申请一个我们的邮箱,写好多情书放在里面等你去看
44、每年都从家来看你
45、倒水哄你吃药
46、偷偷扯你的衣服角,提醒你要少喝酒
47、在你苦难的时候绝不放弃你
48、随时做好准备跟着你背井离乡
49、答应你的求婚,哪怕没有玫瑰和戒指(如果有这么一天)
50、在你不再爱我的时候静静地走开


强烈建议:凡有女孩能作到以上任意10条那你娶她吧没错的
................................20条你要努力娶到她啊
................................30条死皮赖脸也要娶到她
................................40条拼了老命也要娶到她
................................50条估计这种女孩已经绝种了
据说天堂里有可能找得到
分页: 358/362 第一页 上页 353 354 355 356 357 358 359 360 361 362 下页 最后页 [ 显示模式: 摘要 | 列表 ]

阅读推荐

服务器相关推荐

开发相关推荐

应用软件推荐