当前位置： >>
CSS+DIV布局培训教程
什么是样式表 CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于（增强）控制网页样式并允许将样 式信息与网页内容分离的一种标记性语言。 如何将样式表加入您的网页 你可以用以下三种方式将样式表加入您的网页。而最接近目标的样式定义优先权越高。高优先权样式将继 承低优先权样式的未重叠定义但覆盖重叠的定义。例外请参阅 important 声明。 链入外部样式表文件 (Linking to a Style Sheet) 你可以先建立外部样式表文件（.css），然后使用 HTML 的 link 对象。示例如下： &head& &title&title of article&/title& &link rel=stylesheet href=&http://www.dhtmlet.com/rainer.css& type=&text/css&& &/head& 而在 XML 中，你应该如下例所示在声明区中加入： &? xml-stylesheet type=&text/css& href=&http://www.dhtmlet.com/rainer.css& ?&& 定义内部样式块对象 (Embedding a Style Block) 你可以在你的 HTML 文档的&HTML&和&BODY&标记之间插入一个&STYLE&...&/STYLE&块对象。 定义方 式请参阅样式表语法。示例如下： &html& &style type=&text/css&& &!-body {font: 10pt &Arial&} h1 {font: 15pt/17pt &Arial&; font-weight: color: maroon} h2 {font: 13pt/15pt &Arial&; font-weight: color: blue} p {font: 10pt/12pt &Arial&; color: black} --& &/style& &body& 请注意，这里将 style 对象的 type 属性设置为&text/css&，是允许不支持这类型的浏览器忽略样式表单。 内联定义 (Inline Styles) 内联定义即是在对象的标记内使用对象的 style 属性定义适用其的样式表属性。示例如下： &p style=&margin-left: 0.5 margin-right:0.5in&&这一行被增加了左右的外补丁&p& 样式表语法 (CSS Syntax) Selector { property: value } 参数说明：Selector -- 选择符 property : value -- 样式表定义。属性和属性值之间用冒号(:)隔开。定义之间用分号(;)隔开继承的值 (The ' Inherit ' Value)1每个属性都有一个指定的值：Inherit。它的意思是：将父对象的值等同为计算机值得到。这个值通常仅仅 是备用的。显式的声明它可用来强调。 CSS Properties Reference 样式表属性字体 Font font color font-family font-size font-size-adjust font-stretch font-style font-weight text-decoration text-underline-position text-shadow font-variant text-transform line-height letter-spacing word-spacing 文本 Text text-indent text-overflow vertical-align text-align layout-flow writing-mode direction unicode-bidi word-break line-break white-space word-wrap text-autospace text-kashida-space text-justify ruby-align ruby-position ruby-overhang ime-mode layout-grid layout-grid-char layout-grid-char-spacing layout-grid-line layout-grid-mode layout-grid-type 背景 Background background background-attachment background-color background-image background-position background-positionX background-positionY background-repeat layer-background-color layer-background-image 定位 Positioning position z-index top right bottom left 尺寸 Dimensions height max-height min-height width max-width min-width 布局 Layout clear float clip overflow overflow-x overflow-y display visibility 外补丁 Margins margin margin-top margin-right margin-bottom margin-left 轮廓 Outlines outline outline-color outline-style outline-width 边框 Borders border border-color border-style border-width border-top border-top-color border-top-style border-top-width border-right border-right-color border-right-style border-right-width border-bottom border-bottom-color border-bottom-style border-bottom-width border-left border-left-color border-left-style border-left-width 内容 Generated Content include-source quotes content counter-increment counter-reset 内补丁 Paddings padding padding-top padding-right padding-bottom padding-left 列表项目 Lists list-style list-style-image list-style-position list-style-type marker-offset 表格 Table border-collapse border-spacing caption-side empty-cells table-layout speak-header 滚动条 Scrollbars2scrollbar-3d-light-color scrollbar-highlight-color scrollbar-face-color scrollbar-arrow-color scrollbar-shadow-color scrollbar-dark-shadow-color scrollbar-base-color 打印 Printing page page-break-after page-break-before page-break-inside marks orphans size widows 声音 Aural voice-family volume elevation azimuth stress richness speech-rate cue cue-after cue-before pause pause-after pause-before pitch pitch-range play-during speak speak-numeral speak-punctuation 其它属性 Classification behavior zoom cursor filter说明：这种颜色是 CSS2 标准属性。这种颜色是 IE 建议样式表属性。这种颜色是 NS 私有属性。这种颜色是 目前尚无浏览器支持的属性。 CSS Font Properties 字体属性Font Properties 属性 font color font-family font-size font-size-adjust font-stretch font-style font-weight text-decorationCSS Version 版本 CSS1/CSS2 CSS1 CSS1 CSS1 CSS2 CSS2 CSS1 CSS1 CSS1Description 简介 复合属性。设置或检索对象中的文本特性 检索或设置对象的文本颜色 设置或检索用于对象中文本的字体名称序列 设置或检索对象中的字体尺寸 设置或检索用于对象中文本的字体名称序列是否强制使用 同一尺寸 设置或检索用于对象中文本的文字是否横向的拉伸变形 设置或检索对象中的字体样式 设置或检索对象中的文本字体的粗细 检索或设置对象中的文本的装饰，如下划线、闪烁等text-underline-positionIE 专有属性 CSS2设置或检索 text-decoration 属性定义的下划线的位置text-shadow设置或检索对象中文本的文字是否有阴影及模糊效果font-variantCSS1设置或检索对象中的文本是否为小型的大写字母text-transformCSS1检索或设置对象中的文本的大小写3line-heightCSS1检索或设置对象的行高。 即字体最底端与字体内部顶端之间 的距离 检索或设置对象中的文字之间的间隔 检索或设置对象中的单词之间插入的空格数。 对于 IE4+而言 仅在 MAC 平台上可用letter-spacingCSS1word-spacingCSS1font 版本：CSS1/CSS2兼容性：IE4+ NS4+继承性：有语法： font : font-style || font-variant || font-weight || font-size || line-height || font-family font : caption | icon | menu | message-box | small-caption | status-bar 参数： 该属性是复合属性。第一种声明方式请参阅各参数对应的属性。 第二种声明方式中的参数属于 CSS2。 caption : 使用有标题的系统控件的文本字体（如按钮，菜单等） icon : 使用图标标签的字体 menu : 使用菜单的字体 message-box : 使用信息对话框的文本字体 small-caption : 使用小控件的字体 status-bar : 使用窗口状态栏的字体 说明： 设置或检索对象中的文本特性。该属性是复合属性。 第一种声明方式参数必须按照如上的排列顺序。每个参数仅允许有一个值。忽略的将使用其参数对应的独 立属性的默认值。 对于如何使用用户端系统可能没有的字体，可以参阅@font-face 规则。 对应的脚本特性为 font。请参阅我编写的其他书目。 示例： p { font: italic small-caps 600 12pts/18pts 宋体; } p { font: italic small-caps 600 12pts/150% C } p { font: italic small-caps 600 12pts/1.5 C } p { font: italic small-caps 600 12pts/18pts C } p { font: /18 } p { font: oblique 100 24 } H1 { font: 15pt/17pt bold &Arial& normal } color 版本：CSS1 兼容性：IE4+ NS4+ 继承性：有 4语法： color : color 参数：color :说明：指定颜色。请参阅颜色单位和附录：颜色表检索或设置对象的文本颜色。无默认值。 注意，用颜色名称指定 color 不被一些浏览器接受。 对应的脚本特性为 color。请参阅我编写的其他书目。 示例： div {color: #345456; } div { color: rgb(100,14,200); } div {color: } div {color: } font-family 版本：CSS1 兼容性：IE4+ NS4+ 继承性：有语法： font-family : name font-family : cursive | fantasy | monospace | serif | sans-serif 参数：name : 字体名称。按优先顺序排列。以逗号隔开。如果字体名称包含空格，则应使用引号括起第二种声明方式使用所列出的字体序列名称。如果使用 fantasy 序列，将提供默认字体序列 说明： 设置或检索用于对象中文本的字体名称序列。 默认值由浏览器确定。 序列可包含嵌入字体字体。请参阅@font-face 规则。 对应的脚本特性为 fontFamily。请参阅我编写的其他书目。 示例：5div.fixedwidth { font-family: Courier, &Courier New&, monospace } font-size 版本：CSS1 兼容性：IE4+ NS4+ 继承性：有语法： font-size : absolute-size | relative-size | length 参数：absolute-size : 根据对象字体进行调节。xx-small | x-small | small | medium | large | x-large |xx-largerelative-size : 相对于父对像中字体尺寸进行相对调节。使用成比例的 em 单位计算。larger | smaller length : 百分数 | 由浮点数字和单位标识符组成的长度值，不可为负值。其百分比取值是基于父对象中字体的尺寸。请参阅长度单位 说明： 设置或检索对象中的字体尺寸。 默认值为 absolute-size 的 medium 值。 对应的脚本特性为 fontSize。请参阅我编写的其他书目。 示例： p { font-style: } p { font-size: 12 } p { font-size: 20%; } font-size-adjust 版本：CSS2 兼容性：NONE 继承性：有语法： font-size-adjust : none | number 参数： none : 允许字体序列中每一字体遵守它的自己的尺寸number : 为字体序列中所有字体强迫指定同一尺寸说明： 设置或检索用于对象中文本的字体名称序列是否强制使用同一尺寸。6目前 IE5.5 尚不支持此属性。 对应的脚本特性为 fontSizeAdjust。请参阅我编写的其他书目。 示例： p { font-family: arial, font-size-adjust: } p { font-family: verdana, font-size-adjust: .56; } font-stretch 版本：CSS2 兼容性：NONE 继承性：有语法： font-stretch : normal | narrower | wider | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded 参数： normal : 不应用拉伸变形 narrower : 使用比当前设置的值导致字体宽度更小的值 wider : 使用比当前设置的值导致字体宽度更大的值 说明： 设置或检索用于对象中文本的文字是否横向的拉伸变形。 改变是相对于浏览器显示的字体的正常宽度的。 目前 IE5.5 尚不支持此属性。 对应的脚本特性为 fontStretch。请参阅我编写的其他书目。 示例： p { font-stretch: } p { font-stretch: ultra- } font-style 版本：CSS1 兼容性：IE4+ NS4+ 继承性：有语法： font-style : normal | italic | oblique 参数： normal : 正常的字体 italic : 斜体。对于没有斜体变量的特殊字体，将应用 oblique7oblique : 倾斜的字体 说明： 设置或检索对象中的字体样式。 对应的脚本特性为 fontStyle。请参阅我编写的其他书目。 示例： p { font-style: } p { font-style: } p { font-style: } 请您用下面的按钮选择这段文字的 font-style 属性的值。看一看会发生什么，然后您就会明白这个属性的 意义。希望您喜欢这本电子书。谢谢。font-style : normalfont-weight 版本：CSS1兼容性：IE4+ NS4+继承性：有语法： font-weight : normal | bold | bolder | lighter | number 参数： normal : 正常的字体。相当于 number 为 400。声明此值将取消之前任何设置 bold : 粗体。相当于 number 为 700。也相当于 b 对象的作用 bolder : IE5+ lighter : IE5+ 特粗体 细体number : IE5+ 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900说明： 设置或检索对象中的文本字体的粗细。 作用由用户端系统安装的字体的特定字体变量映射决定。系统选择最近的匹配。也就是说，用户可能看不 到不同值之间的差异。 对应的脚本特性为 fontWeight。请参阅我编写的其他书目。 示例： span { font-weight:800; }8请您用下面的按钮选择这段文字的 font-weight 属性的值。看一看会发生什么，然后您就会明白这个属性 的意义。希望您喜欢这本电子书。谢谢。font-weight : normaltext-decoration 版本：CSS1兼容性：IE4+ NS4+继承性：无语法： text-decoration : none || underline || blink || overline || line-through 参数： none : blink : 无装饰 闪烁 下划线 贯穿线 上划线underline : overline : 说明：line-through :检索或设置对象中的文本的装饰。 有 href 特性的 a，以及 u，ins 对象默认值为 underline 。 对象 strike，s，del，默认值是 line-through。 没有文本的对象此属性不会作用。 对应的脚本特性为 textDecoration。请参阅我编写的其他书目。 示例： div { text-decoration : } div { text-decoration : } 请您用下面的按钮选择这段文字的 text-decoration 属性的值。看一看会发生什么，然后您就会明白这个 属性的意义。希望您喜欢这本电子书。谢谢。text-decoration : nonetext-underline-position 版本：IE5.5+专有属性继承性：有语法： text-underline-position : below | above 参数：9below : above : 说明：在文本下面 在文本上面设置或检索 text-decoration 属性定义的下划线的位置。 对应的脚本特性为 textUnderlinePosition。请参阅我编写的其他书目。 示例： p { text-underline-position: text-decoration: } 请您用下面的按钮选择这段文字的 text-underline-position 属性的值。看一看会发生什么，然后您就会 明白这个属性的意义。希望您喜欢这本电子书。谢谢。text-underline-position : belowtext-shadow 版本：CSS2兼容性：NONE继承性：无语法： text-shadow : color || length || lenth|| opacity 参数：color : length : opacity :指定颜色。请参阅颜色单位和附录：颜色表 由浮点数字和单位标识符组成的长度值。可为负值。第一个 length 指定阴影的水平延伸距离。 由浮点数字和单位标识符组成的长度值。不可为负值。指定模糊效果的作用距离。如果你仅第二个 length 指定阴影的垂直延伸距离。请参阅长度单位 仅需要模糊效果，将前两个 length 全部设定为 0。请参阅长度单位 说明： 设置或检索对象中文本的文字是否有阴影及模糊效果。 可以设定多组效果，方式是用逗号隔开。 可以被用于伪类:first-letter 和 :first-line。 目前 IE5.5 尚不支持此属性。 对应的脚本特性为 textShadow。请参阅我编写的其他书目。 示例： p { text-shadow: 0px 0px 20px yellow, 0px 0px 10px orange, red 5px -5 } p:first-letter { font-size: 36 color: text-shadow: red 0px 0px 5}10font-variant 版本：CSS1兼容性：IE4+ NS6+继承性：有语法： font-variant : normal | small-caps 参数： normal : 正常的字体 small-caps : 小型的大写字母字体 说明： 设置或检索对象中的文本是否为小型的大写字母。 对应的脚本特性为 fontVariant。请参阅我编写的其他书目。 示例： span { font-variant: small- } 请您用下面的按钮选择这段文字的 FONT-VARIANT 属性的值。看一看会发生什么，然后您就会明白这个属性的 意义。希望您喜欢这本电子书。谢谢。font-variant : small-capsline-height 版本：CSS1兼容性：IE4+ NS4+继承性：有语法： line-height : normal | length 参数： normal : 默认行高 百分比数字 | 由浮点数字和单位标识符组成的长度值，允许为负值。其百分比取值是基于字length :体的高度尺寸。请参阅长度单位 说明： 检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离。 如行内包含多个对象，则应用最大行高。此时行高不可为负值。 对应的脚本特性为 lineHeight。请参阅我编写的其他书目。11示例： div {line-height:6 } div {line-height:10.5; } 请您用下面的按钮加减这段文字的 line-height 属性的值（单位是 px）。看一看会发生什么，然后您就会 明白这个属性的意义。希望您喜欢这本电子书。谢谢。16letter-spacing 版本：CSS1兼容性：IE4+ NS6+继承性：有语法： letter-spacing : normal | length 参数： normal : 默认间隔 由浮点数字和单位标识符组成的长度值，允许为负值。请参阅长度单位length :说明：检索或设置对象中的文字之间的间隔。 该属性将指定的间隔添加到每个文字之后，但最后一个字将被排除在外。 对应的脚本特性为 letterSpacing。请参阅我编写的其他书目。 示例： div {letter-spacing:6 } div {letter-spacing:0.5 } 请 您 用 下 面 的 按 钮 加 减 这 段 文 字 的 letter-spacing 属 性 的 值 （ 单 位 是 px） 。 看 一 看 会 发 生 什 么 ，然 后 您 就 会 明 白 这 个 属 性 的 意 义 。希 望 您 喜 欢 这 本 电 子 书 。谢 谢。2CSS Text Properties文本属性Text Properties 属性 text-indentCSS Version 版本 CSS1Description 简介 检索或设置对象中的文本的缩进12text-overflow vertical-align text-align layout-flow writing-mode direction unicode-bidiIE 专有属性 CSS1/CSS2 CSS1 IE 专有属性 IE 专有属性 CSS2 CSS2设置或检索是否使用一个省略标记（...）标示对象内文本的溢出 设置或检索对象内容的垂直对其方式 设置或检索对象中文本的对齐方式 设置或检索对象内文本的流动和方向 设置或检索对象的内容块固有的书写方向 用于设置文本流的方向 用于同一个页面里存在从不同方向读进的文本显示。与 direction 属性一 起使用 设置或检索对象内文本的字内换行行为。尤其在出现多种语言时 设置或检索用于日文文本的换行规则 设置或检索对象内空格的处理方式 设置或检索当当前行超过指定容器的边界时是否断开转行word-break line-break white-space word-wrapIE 专有属性 IE 专有属性 CSS1 IE 专有属性text-autospaceIE 专有属性设置或检索对象文本的自动空格和紧缩空格宽度调整的方式text-kashida-space text-justifyIE 专有属性 IE 专有属性设置或检索如何拉伸字符来调节文本行排列 设置或检索对象内文本的对齐方式 设置或检索通过 rt 对象指定的注释文本或发音指南（参考 ruby 对象）的 对齐位置ruby-alignIE 专有属性ruby-positionIE 专有属性设置或检索通过 rt 对象指定的注释文本或发音指南（参考 ruby 对象）的 位置 设置或检索通过 rt 对象指定的注释文本或发音指南（参考 ruby 对象）的 位置 设置或检索是否允许用户激活输入中文，韩文，日文等的输入法（IME）状 态 复合属性。设置或检索复合文档中指定文本字符版式的网格特性ruby-overhangIE 专有属性ime-modeIE 专有属性layout-gridIE 专有属性layout-grid-char layout-grid-char-spacing layout-grid-lineIE 专有属性 IE 专有属性 IE 专有属性设置或检索应用于对象文本的字符网格值 设置或检索字符间隔 设置或检索应用于对象文本的行网格值layout-grid-mode layout-grid-typeIE 专有属性 IE 专有属性设置或检索文本网格版式是否使用二维 设置或检索应用于对象文本的网格类型 13CSS Background Properties背景属性Background Properties 属性 background background-attachment background-color background-image background-position background-positionX background-positionY background-repeat layer-background-color layer-background-imageCSS Version 版本 CSS1 CSS1 CSS1 CSS1 CSS1 IE 专有属性 IE 专有属性 CSS1 NS 专有属性 NS 专有属性Description 简介 复合属性。设置或检索对象的背景特性 设置或检索背景图像是随对象内容滚动还是固定的 设置或检索对象的背景颜色 设置或检索对象的背景图像 设置或检索对象的背景图像位置 设置或检索对象的背景图像横坐标位置 设置或检索对象的背景图像纵坐标位置 设置或检索对象的背景图像是否及如何铺排 设置或检索对象整个区域的背景颜色 设置或检索对象整个区域的背景图像版本：CSS1 语法：兼容性：IE4+ NS4+继承性：无background : background-color || background-image || background-repeat || background-attachment || background-position 参数： 该属性是复合属性。请参阅各参数对应的属性。 说明： 如使用该复合属性定义其单个参数，则其他参数的默认值将无条件覆盖各自对应的单个属性设置。 默认值为：transparent none repeat scroll 0% 0%。 尽管该属性不可继承，但如果未指定，其父对象的背景颜色和背景图将在对象下面显示。 对应的脚本特性为 background。请参阅我编写的其他书目。 示例： div { background: red no-repeat scroll 5% 60%; } body { background: url(&images/aardvark.gif&) repeat-y; } pre { background: url(&images/aardvark.gif&) } caption { background: } background-color 版本：CSS1 兼容性：IE4+ NS4+ 继承性：无14语法： background-color : transparent | color 参数： transparent : 背景色透明color :说明：指定颜色。请参阅颜色单位和附录：颜色表设置或检索对象的背景颜色。 对应的脚本特性为 backgroundColor。请参阅我编写的其他书目。 示例： p { background-color: silver } div { background-color: rgb(223,71,177) } body { background-color: #98AB6F } pre { background-color: }background-image 版本：CSS1 语法：兼容性：IE4+ NS4+继承性：无background-image : none | url (url) 参数： none : 无背景图 使用绝对或相对地址指定背景图像url :说明：设置或检索对象的背景图像。 对应的脚本特性为 backgroundImage。请参阅我编写的其他书目。 示例： code { background-image: url(&comet.jpg&); } blockquote { background-image: url(&c:\InetPub\MyPixs\comet.jpg&); } br { background-image: url(http://Fred.com/ImageFile/Q.gif); } body { background-image: }15CSS Positioning Properties定位属性Positioning Properties 属性 position z-index topCSS Version 版本 CSS2 CSS2 CSS2 检索对象的定位方式 检索或设置对象的层叠顺序Description 简介检索或设置对象与其最近一个定位的父对象顶部相关的位置rightCSS2检索或设置对象与其最近一个定位的父对象右边相关的位置bottom leftCSS2 CSS2检索或设置对象与其最近一个定位的父对象底边相关的位置 检索或设置对象与其最近一个定位的父对象左边相关的位置CSS Dimensions Properties尺寸属性Dimensions Properties 属性 height max-height min-height width max-width min-widthCSS Version 版本 CSS1 CSS2 CSS2 CSS1 CSS2 CSS2 检索或设置对象的高度Description 简介设置或检索对象的最大高度 设置或检索对象的最小高度 检索或设置对象的宽度 设置或检索对象的最大宽度 设置或检索对象的最小宽度CSS Outlines Properties轮廓属性Outlines Properties 属性 outline outline-color outline-style outline-widthCSS Version 版本 CSS2 CSS2 CSS2 CSS2Description 简介 复合属性。设置或检索对象外的线条轮廓 设置或检索对象外的线条轮廓的颜色 设置或检索对象外的线条轮廓的样式 设置或检索对象外的线条轮廓的宽度CSS Borders Properties Borders Properties 属性 border border-color border-style边框属性 CSS Version 版本 CSS1 CSS1 CSS1 Description 简介 复合属性。设置对象边框的特性 设置或检索对象边框颜色 设置或检索对象边框样式 16border-width border-top border-top-color border-top-style border-top-width border-right border-right-color border-right-style border-right-width border-bottom border-bottom-color border-bottom-style border-bottom-width border-left border-left-color border-left-style border-left-width border 版本：CSS1 语法：CSS1 CSS1 CSS2 CSS2 CSS1 CSS1 CSS2 CSS2 CSS1 CSS1 CSS2 CSS2 CSS1 CSS1 CSS2 CSS2 CSS1 兼容性：IE4+ NS4+设置或检索对象边框宽度 复合属性。设置对象顶边的特性 设置或检索对象顶边颜色 设置或检索对象顶边样式 设置或检索对象顶边宽度 复合属性。设置对象右边的特性 设置或检索对象右边颜色 设置或检索对象右边样式 设置或检索对象右边宽度 复合属性。设置对象底边的特性 设置或检索对象底边颜色 设置或检索对象底边样式 设置或检索对象底边宽度 复合属性。设置对象左边的特性 设置或检索对象左边颜色 设置或检索对象左边样式 设置或检索对象左边宽度 继承性：无border : border-width || border-style || border-color 参数： 该属性是复合属性。请参阅各参数对应的属性。 说明： 如使用该复合属性定义其单个参数，则其他参数的默认值将无条件覆盖各自对应的单个属性设置。 默认值为：medium none。border-color 的默认值将采用文本颜色。 要使用该属性，必须先设定对象的 height 或 width 属性，或者设定 position 属性为 absolute。 对应的脚本特性为 border。请参阅我编写的其他书目。 关于对象的尺寸与边框，内外补丁等样式表属性的关系，请参看图例以及 height 和 width 属性。 示例： p { border: } blockquote { border: } p { border: 25 } border-top-color 版本：CSS2 兼容性：IE4+ NS6+ 继承性：无17语法： border-top-color : color 参数：color :说明：指定颜色。请参阅颜色单位和附录：颜色表要使用该属性，必须先设定对象的 height 或 width 属性，或者设定 position 属性为 absolute。 如果 border-width 等于 0 或 border-style 设置为 none，本属性将失去作用。 对应的脚本特性为 borderTopColor。请参阅我编写的其他书目。 示例： div { border-top-color: border-bottom-color: RGB(223, 94, 77); border-right-color: border-left-color:} border-bottom-width 版本：CSS1 兼容性：IE4+ NS4+ 继承性：无语法： border-bottom-width : medium | thin | thick | length 参数： medium : thin : thick : 默认宽度 小于默认宽度 大于默认宽度 由浮点数字和单位标识符组成的长度值。不可为负值。请参阅长度单位length :说明：要使用该属性，必须先设定对象的 height 或 width 属性，或者设定 position 属性为 absolute。 如果 border-style 设置为 none，本属性将失去作用。 对应的脚本特性为 borderBottomWidth。请参阅我编写的其他书目。 示例： span { border-top-width: border-top-style: } span { border-bottom-width: border-bottom-style: } span { border-left-width: border-left-style: }18span { border-right-width: border-right-style: } CSS Paddings Properties 内补丁属性Paddings Properties 属性 padding padding-top padding-right padding-bottom padding-leftCSS Version 版本 CSS1 CSS1 CSS1 CSS1 CSS1Description 简介 检索或设置对象四边的补丁边距 检索或设置对象顶边的补丁边距 检索或设置对象右边的补丁边距 检索或设置对象底边的补丁边距 检索或设置对象左边的补丁边距CSS Lists Properties列表项目属性Lists Properties 属性 list-style list-style-image list-style-position list-style-type list-style 版本：CSS1 语法：CSS Version 版本 CSS1 CSS1 CSS1 CSS1/CSS2Description 简介 复合属性。设置列表项目相关内容 设置或检索作为对象的列表项标记的图像 设置或检索作为对象的列表项标记如何根据文本排列 设置或检索对象的列表项所使用的预设标记 继承性：有兼容性：IE4+ NS4+list-style : list-style-image || list-style-position || list-style-type 参数： 该属性是复合属性。请参阅各参数对应的属性。 说明： 设置列表项目相关内容。 对应的脚本特性为 listStyle。请参阅我编写的其他书目。 示例： li { list-style: url(&http://www.dhtmlet.com/devgurupix.gif&), inside, } ul { list-style: outside, upper- } ol { list-style: } 19list-style-image 版本：CSS1兼容性：IE4+ NS6+继承性：有语法： list-style-image : none | url (url) 参数： none : 不指定图像 使用绝对或相对地址指定背景图像url :说明：设置或检索作为对象的列表项标记的图像。 若 list-style-image 属性为 none 或指定图像不可用时，list-style-type 属性将发生作用。 对应的脚本特性为 listStyleImage。请参阅我编写的其他书目。 示例： ul.out { list-style-position: list-style-image: url(&images/ie.gif&); } list-style-type 版本：CSS1/CSS2 兼容性：IE4+ NS4+ 继承性：有语法： list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin 参数： disc : circle : square : decimal : CSS1 实心圆 空心圆 实心方块 阿拉伯数字 CSS1 CSS1 CSS1 CSS1 小写罗马数字 大写罗马数字 小写英文字母 大写英文字母CSS1 CSS1 CSS1lower-roman : upper-roman : lower-alpha : upper-alpha : none : CSS1 armenian : georgian :不使用项目符号 CSS2 CSS2 传统的亚美尼亚数字 CSS2 浅白的表意数字 传统的乔治数字cjk-ideographic :20lower-greek : hebrew : hiragana : katakana : CSS2CSS2基本的希腊小写字母传统的希伯莱数字 日文平假名字符 CSS2 CSS2 CSS2 CSS2 日文平假名序号 日文片假名序号 日文片假名字符 小写拉丁字母 大写拉丁字母CSS2 CSS2hiragana-iroha : katakana-iroha : lower-latin : upper-latin : 说明：设置或检索对象的列表项所使用的预设标记。 若 list-style-image 属性为 none 或指定图像不可用时，list-style-type 属性将发生作用。 仅作用于具有 display 值等于 list-item 的对象（如 li 对象）。 注意：ol 对象和 ul 对象的 type 特性为其后的所有列表项目（如 li 对象）指明列表属性。请参阅我的其 他著作。 IE5.5 尚不支持所有 CSS2 的值。 对应的脚本特性为 listStyleType。请参阅我编写的其他书目。 示例： li { list-style-type: square }? ? ?这是一个名字叫小强的列表项目。他难道不是很可爱吗？ 这是一个名字叫小强的列表项目。他难道不是很可爱吗？ 这是一个名字叫小强的列表项目。他难道不是很可爱吗？list-style-type : discCSS Scrollbar Properties滚动条属性Scrollbar Properties 属性 scrollbar-3d-light-color scrollbar-highlight-colorCSS Version 版本Description 简介IE 专有属性 设置或检索滚动条亮边框颜色 IE 专有属性 设置或检索滚动条 3D 界面的亮边（ThreedHighlight）颜色scrollbar-face-color scrollbar-arrow-color scrollbar-shadow-colorIE 专有属性 设置或检索滚动条 3D 表面（ThreedFace）的颜色 IE 专有属性 设置或检索滚动条方向箭头的颜色 IE 专有属性 设置或检索滚动条 3D 界面的暗边（ThreedShadow）颜色21scrollbar-dark-shadow-colorIE 专有属性 设置或检索滚动条暗边框（ThreedDarkShadow）颜色scrollbar-base-colorIE 专有属性 设置或检索滚动条基准颜色。其它界面颜色将据此自动调整scrollbar-3d-light-color 版本：IE5.5+专有属性继承性：有语法： scrollbar-3d-light-color : color 参数：color :说明：指定颜色。请参阅颜色单位和附录：颜色表设置或检索滚动条亮边框颜色。 请参阅 overflow 属性 。 对应的脚本特性为 scrollbar3dLightColor。请参阅我编写的其他书目。 示例： div {scrollbar-3d-light-color : } 请您用下面的按钮选择这段文字的 scrollbar-3d-light-color 属性的值。看一看会发生什么，然后您就会 明白这个属性的意义。希望您喜欢这本电子书。谢谢。scrollbar-3d-light-color : threedhighlightCSS Printing Properties打印属性Printing Properties CSS Version 属性 page page-break-after page-break-before page 版本：CSS2 语法： page : auto | pagetype 版本 CSS2 CSS2 CSS2Description 简介 检索或指定显示对象容器时使用的页面类型（pagetype）。参阅@page 规则 检索或设置对象后出现的页分割符 检索或设置对象前出现的页分割符 继承性：有兼容性：IE5.5+22参数： auto : 参照当前的默认页面 指定@page 规则里的一个页面类型（pagetype）定义pagetype :说明：检索或指定显示对象容器时使用的页面类型（pagetype）。参阅@page 规则。 对应的脚本特性为 page。请参阅我编写的其他书目。 示例： @page doublepage { size: 8.5in 11 page-break-after: left } body { page: page-break-after: right } page-break-after 版本：CSS2 语法： page-break-after : auto | always | avoid | left | right | null 参数： auto : always : avoid : left : right : 假如需要在对象之后插入页分割符 始终在对象之后插入页分割符 避免在对象后面插入页分割符 在对象后面插入页分割符直到它到达一个空白的左页边 在对象后面插入页分割符直到它到达一个空白的右页边 空值。IE5 用来取消页分割符设置 兼容性：IE4+ 继承性：无null :说明：检索或设置对象后出现的页分割符。 IE5 仅支持 always 值和空白值（null）。 在 IE4 中此属性不作用于 br 对象，但是 IE5 作用。 对应的脚本特性为 pageBreakAfter。请参阅我编写的其他书目。 示例： p { page-break-after:} page-break-before 版本：CSS2 语法： page-break-before : auto | always | avoid | left | right | null 兼容性：IE4+ 继承性：无23参数： auto : always : avoid : left : right : 假如需要在对象之前插入页分割符 始终在对象之前插入页分割符 避免在对象前面插入页分割符 在对象前面插入页分割符直到它到达一个空白的左页边 在对象前面插入页分割符直到它到达一个空白的右页边 空值。IE5 用来取消页分割符设置null :说明：检索或设置对象前出现的页分割符。 IE5 仅支持 always 值和空白值（null）。 在 IE4 中此属性不作用于 br 对象，但是 IE5 作用。 对应的脚本特性为 pageBreakBefore。请参阅我编写的其他书目。 示例： p { page-break-after:} CSS Classification Properties 其它属性Classification Properties CSS Version 属性 cursor filter behavior zoom 版本 CSS2Description 简介 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光 标形状IE 专有属性 设置或检索对象所应用的滤镜效果 IE 专有属性 设置或检索对象的 DHTML 行为 IE4+ , NS6+ 设置或检索对象的缩放比例filter 版本：IE4+专有属性 继承性：无 语法： filter : filter 参数：filter :说明：要使用的滤镜效果。多个滤镜之间用空格隔开。具体请参阅我的相关著作设置或检索对象所应用的滤镜效果。 要使用该属性，对象必须具有 height，width，position 三个属性中的一个。24滤镜的机制是可扩展的。可以开发和使用第三方滤镜。 该属性在 MAC 平台上不可用。 对应的脚本特性为 filter。请参阅我编写的其他书目。 示例： div { width:200 filter:blur(strength=50) flipv() ; } img { filter: invert(); } Selectors 选择符Selectors 选择符 类型选择符(Type Selectors) 通配选择符(Universal Selector) 包含选择符(Descendant Selectors) 子对象选择符(Child Selectors)CSS Version 版本 CSS1 CSS2 CSS1 CSS2Description 简介 以文档语言对象类型作为选择符 选定文档目录树（DOM）中的所有类型的单一对象 选择所有被 E1 包含的 E2。即 E1.contains(E2)==true 选择所有作为 E1 子对象的 E2 选择紧贴在对象 E1 之后的所有 E2 对象 选择具有 attr 属性的 E1 选择具有 attr 属性且属性值等于 value 的 E1 选择具有 attr 属性且属性值为一用空格分隔的字词列表，其中一个等于 value 的 E1 选择具有 attr 属性且属性值为一用连字符分隔的字词列表， value 开始的 由 E1 以文档目录树（DOM）中作为对象的唯一标识符的 ID 作为选择 在 HTML 中可以使用此种选择符。其效果等同于 E1[class~=className] 将同样的定义应用于多个选择符，可以将选择符以逗号分隔的方式并为组相邻选择符(Adjacent Sibling Selectors) CSS2 属性选择符(Attribute Selectors) 属性选择符(Attribute Selectors) 属性选择符(Attribute Selectors) CSS2 CSS2 CSS2属性选择符(Attribute Selectors) ID 选择符(ID Selectors) 类选择符(Class Selectors) 选择符分组(Grouping)CSS2 CSS1 CSS1 CSS1:link 版本：CSS1兼容性：IE4+ NS4+语法：Selector : link { sRules }说明： 设置 a 对象在未被访问前的样式表属性。 IE3 将:link 伪类的样式表属性作用于 visited 伪类。 默认值由浏览器决定。 对于无 href 属性（特性）的 a 对象，此伪类不发生作用。 请参阅 body 对象的 link 属性（特性）和 document 对象的 linkColor 特性。详见我编写的其他书目。25示例： a:link { font-size: 14 text-decoration: color: } 请您将鼠标移到这个 a 对象上，点击，看看会发生什么。然后您就会明白这个伪类的意义。希望您喜欢这 本电子书。谢谢。 :hover 版本：CSS1/CSS2 兼容性：IE4+ NS4+语法：Selector : hover { sRules }说明： 设置对象在其鼠标悬停时的样式表属性。 在 CSS1 中此伪类仅可用于 a 对象。且对于无 href 属性（特性）的 a 对象，此伪类不发生作用。在 CSS2 中 此伪类可以应用于任何对象。 目前 IE5.5+仅支持 CSS1 中的:hover。 示例： a:hover { font-size: 14 text-decoration: color: } a:hover span{ color: } 请您将鼠标移到这个 a 对象上，点击，看看会发生什么。然后您就会明白这个伪类的意义。希望您喜欢这 本电子书。谢谢。 :active 版本：CSS1/CSS2 兼容性：IE4+语法：Selector : active { sRules }说明： 设置对象在被用户激活（在鼠标点击与释放之间发生的事件）时的样式表属性。 在 CSS1 中此伪类仅可用于 a 对象。且对于无 href 属性（特性）的 a 对象，此伪类不发生作用。在 CSS2 中 此伪类可以应用于任何对象。并且:active 状态可以和:link 以及:visited 状态同时发生。 目前 IE5.5+仅支持 CSS1 中的:active。 示例： a:active { font-size: 14 text-decoration: color: }26请您将鼠标移到这个 a 对象上，点击，看看会发生什么。然后您就会明白这个伪类的意义。希望您喜欢这 本电子书。谢谢。 :visited 版本：CSS1 兼容性：IE4+ NS4+语法：Selector : visited { sRules }说明： 设置 a 对象在其链接地址已被访问过时的样式表属性。 IE3 将:link 伪类的样式表属性作用于 visited 伪类。 默认值由浏览器决定。定义网页过期时间或用户清空历史记录将影响此伪类的作用。 对于无 href 属性（特性）的 a 对象，此伪类不发生作用。 请参阅 body 对象的 vlink 属性（特性）和 document 对象的 vlinkColor 特性。详见我编写的其他书目。 示例： a:visited { font-size: 14 text-decoration: color: } 请您将鼠标移到这个 a 对象上，点击，看看会发生什么。然后您就会明白这个伪类的 CSS At-Rules Reference 样式表规则At-Rules 样式表规则 @import @charset @font-face @fontdef @media @pageCSS Version 版本 CSS1 CSS2 CSS2 NS 专有规则 CSS2 CSS2Description 简介 指定导入的外部样式表及目标媒体。该规则必须在样式表头部最先声明 在外部样式表文件内使用。指定该样式表使用的字符集。请参阅附录：字符集 设置嵌入 HTML 文档的 OpenType 字体 设置嵌入 HTML 文档的字体 指定样式表规则用于指定的媒体类型 设置页面容器的版式，方向，边空等@import 版本：CSS1/CSS2兼容性：IE4+语法： @import 说明： url (url) sM27url : sMedia :使用绝对或相对地址指定导入的外部样式表文件。请参阅 link 对象 指定设备类型。请参阅附录：设备类型。目前 IE5.5 尚不支持此属性指定导入的外部样式表及目标设备类型。 该规则必须在样式表头部最先声明。并且其后的分号是必需的，如果省略了此分号，外部样式表将无法正 确导入，并会生成错误信息。 用此规则导入的样式表，其 owningElement 特性是一个 link 对象或 style 对象。请参阅我的其他著作。 导入的外部样式表中的定义将被文当中的同名定义覆盖。 示例： @import url(&foo.css&) screen, @import &print.css& @font-face 版本：CSS2 语法： @font-face { font-family : src : url( url ) ; sRules } 说明： 兼容性：IE4+name : url : sRules :字体名称 使用绝对或相对地址指定 OpenType 字体 样式表定义设置嵌入 HTML 文档的字体。 嵌入 HTML 文档的字体是指将 OpenType 字体（压缩的 TrueType 字体）文件映射到客户端系统，用来提供 HTML 文档使用该字体，或取代客户端系统已有的同名字体。 示例： @font-face @page 版本：CSS2 语法： @page 说明： { font-family: 兼容性：IE5.5+ font-weight: src:url(http://www.example.com/font.eot); }label pseudo-class { sRules }label : sRules :页标 伪类。:first | :left | :right 样式表定义pseudo-class :28设置页面容器的版式，方向，边空等。 页面容器包括页面内容区域和内容区域外围的边空补白区域。 示例： @page thin:first { size: 3in 8in } CSS Declaration Reference 样式表声明Declaration 样式表声明 !important CSS1CSS Version 版本Description 简介 提升指定样式条目的应用优先权!important 版本：CSS1 语法：兼容性：IE4+sRule!important说明：sRules :样式表条目提升指定样式规则的应用优先权。 示例： div { color:red!important } CSS Length Units Reference 长度单位Length Units 长度单位CSS Version 版本Description 简介相对长度单位 Relative Length Unitsem ex px CSS1 CSS1 CSS1 相对于当前对象内文本的字体尺寸 相对于字符 “ x ” 的高度。通常为字体高度的一半 像素（Pixel）绝对长度单位 Absolute Length Unitspt pc in cm mm CSS1 CSS1 CSS1 CSS1 CSS1 点（Point） 派卡（Pica）。相当于我国新四号铅字的尺寸 英寸（Inch） 厘米（Centimeter） 毫米（Millimeter）单位换算：1in = 2.54cm = 25.4 mm = 72pt = 6pc CSS Color Units Reference 颜色单位29Color Units 颜色单位 #RRGGBB rgb ( R,G,B ) Color NameCSS Version 版本 CSS1 CSS1 CSS1Description 简介 三个两位十六进制正整数。取值范围为：00 - FF 表示红，绿，蓝的正整数或百分数数值 颜色名称。不同的浏览器会有不同的预定义颜色名称。请查看附录：颜色表1．行内样式 &html& &head& &title&页面标题&/title& &/head& &body& &h2&&font color=&#0000FF& face=&黑体&&CSS 标记 1&/font&&/h2& &p&CSS 标记的正文内容 1&/p& &h2&&font color=&#0000FF& face=&黑体&&CSS 标记 2&/font&&/h2& &p&CSS 标记的正文内容 2&/p& &h2&&font color=&#0000FF& face=&黑体&&CSS 标记 3&/font&&/h2& &p&CSS 标记的正文内容 3&/p& &h2&&font color=&#0000FF& face=&黑体&&CSS 标记 4&/font&&/h2& &p&CSS 标记的正文内容 4&/p& &/body& &/html& 2.内嵌样式: &html& &head& &title&页面标题&/title& &style type=&text/css&& &!-p{ color:#FF00FF; text-decoration: font-weight: font-size:25 } --& &/style& &/head& &body& &p&紫色、粗体、下划线、25px 的效果 1&/p& &p&紫色、粗体、下划线、25px 的效果 2&/p& &p&紫色、粗体、下划线、25px 的效果 3&/p& &/body&30&/html&.3.链接式 &html& &head& &title&页面标题&/title& &link href=&1.css& type=&text/css& rel=&stylesheet&& &/head& &body& &h2&CSS 标题 1&/h2& &p&紫色、粗体、下划线、25px 的效果 1&/p& &h2&CSS 标题 2&/h2& &p&紫色、粗体、下划线、25px 的效果 2&/p& &/body& &/html& 1.css h2{ color:#0000FF; } p{ color:#FF00FF; text-decoration: font-weight: font-size:20 } 4.导入样式 &html& &head& &title&页面标题&/title& &style type=&text/css&& &!-@import url(1.css); --& &/style& &/head& &body& &h2&CSS 标题 1&/h2& &p&紫色、粗体、下划线、25px 的效果 1&/p& &h2&CSS 标题 2&/h2& &p&紫色、粗体、下划线、25px 的效果 2&/p& &h3&CSS 标题 3&/h3& &p&紫色、粗体、下划线、25px 的效果 3&/p& &/body&312 &/html& &html& &head& &title&样式优先级问题&/title& &style type=&text/css&& &!-@import url(2.css); h3{ background-color:#000000; color:#FF0000; } --& &/style& &link href=&3.css& type=&text/css& rel=&stylesheet&& &/head& &body& &h3 style=&text-decoration:&&CSS 标题测试&/h3& &/body& &/html& 1-11.html &html& &head& &title&体验 CSS&/title& &style type=&text/css&& &!-/* 上一行避免老式浏览器不支持 CSS */ body{ padding:0 margin:0 background-color:#FFFF99; /* 设置背景颜色*/ } #title{ font-size:19 font-weight: text-align: padding:15 background-color:#FFFFCC; /* 字号 */ /* 粗体 */ /* 居中 */ /* 间距 */ /* 背景色 */border:1px solid #FFFF00; /* 边框 */ } #content{ padding:6 font-size:13 line-height:130%; /* 间距 */ /* 字号 */ /* 行间距 */32} img{ float: /* 图文混排 */ filter: alpha(opacity=100,finishopacity=0,style=2); /* 渐变效果 */ } --& &/style& &/head&&body& &div id=&title&&CSS 简介&/div& &div id=&content&& &img src=&bike.jpg& border=&0&& CSS（Cascading Style Sheet） ，中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内 容分离的一种标记性语言。CSS 是 1996 年由 W3C 审核通过，并且推荐使用的。简单的说 CSS 的引入就是 为了使得 HTML 能够更好的适应页面的美工设计。它以 HTML 为基础，提供了丰富的格式化功能，如字 体、颜色、背景、整体排版等等，并且网页设计者可以针对各种可视化浏览器设置不同的样式风格，包括 显示器、打印机、打字机、投影仪、PDA 等等。CSS 的引入随即引发了网页设计的一个又一个新高潮，使 用 CSS 设计的优秀页面层出不穷。&/div& &/body& &/html&3.css h3{ padding-top: 50 /* 顶端间隔 50px */ } 第二课 CSS 基本文法 2．1 CSS 选择器 &style& h1{ color: font-size:25 } &/style& 1．标记选择器33&html& &head& &title&标记选择器.class&/title& &style type=&text/css&& &!-h3{ color: font-size:18 } h3.special{ color: font-size:23 } .special{ color: } --& &/style& &/head& /* 类别选择器 */ /* 标记.类别选择器 */ /* 红色 */ /* 文字大小 */ /* 标记选择器 */&body& &h3&标记选择器.class1&/h3& &h3&标记选择器.class2&/h3& &h3 class=&special&&标记选择器.class3&/h3& &h3&标记选择器.class4&/h3& &h3&标记选择器.class5&/h3& &p class=&special&&使用于别的标记&/p& &/body& &/html&Eg:34&html& &head& &title&class 类别选择器&/title& &style type=&text/css&& &!-.one{ color: font-size:18 } .two{ color: font-size:20 } .three{ color: font-size:22 } --& &/style& &/head& /* 青色 */ /* 文字大小 */ /* 绿色 */ /* 文字大小 */ /* 红色 */ /* 文字大小 */&body& &p class=&one&&class 选择器 1&/p& &p class=&two&&class 选择器 2&/p& &p class=&three&&class 选择器 3&/p& &h3 class=&two&&h3 同样适用&/h3& &/body& &/html&&html& &head& &title&ID 选择器&/title&35&style type=&text/css&& &!-#one{ font-weight: } #two{ font-size:30 color:#009900; } --& &/style& &/head& /* 字体大小 */ /* 颜色 */ /* 粗体 */&body& &p id=&one&&ID 选择器 1&/p& &p id=&two&&ID 选择器 2&/p& &p id=&two&&ID 选择器 3&/p& &p id=&one two&&ID 选择器 3&/p& &/body& &/html&&html& &head& &title&集体声明&/title& &style type=&text/css&& &!-h1, h2, h3, h4, h5, p{ color: font-size:15 } h2.special, .special, #one{ text-decoration: } --& &/style& &/head& /* 集体声明 */ /* 下划线 */ /* 集体声明 */ /* 文字颜色 */ /* 字体大小 */&body& &h1&集体声明 h1&/h1& &h2 class=&special&&集体声明 h2&/h2& &h3&集体声明 h3&/h3&36&h4&集体声明 h4&/h4& &h5&集体声明 h5&/h5& &p&集体声明 p1&/p& &p class=&special&&集体声明 p2&/p& &p id=&one&&集体声明 p3&/p& &/body& &/html& 2.1 选择器的嵌套声明 &html& &head& &title&CSS 选择器的嵌套声明&/title& &style type=&text/css&& &!-p b{ color: text-decoration: } --& &/style& &/head& /* 嵌套声明 */ /* 颜色 */ /* 下划线 */&body& &p&嵌套使&b&用 CSS&/b&标记的方法&/p& 嵌套之外的&b&标记&/b&不生效 &/body& &/html& CSS 样式的父子关系 &html& &head& &title&父子关系&/title& &base target=&_blank&& &style& &!-h1{ color: text-decoration: } h1 em{ color:#004400; font-size:40 } --& &/style& &/head& /* 嵌套选择器 */ /* 颜色 */ /* 字体大小 */ /* 颜色 */ /* 下划线 */37&body& &h1&祖国的首都&em&北京&/em&&/h1& &p&欢迎来到祖国的首都&em&北京&/em&，这里是全国&strong&政治、&a href=&economic.html&&&em& 经济&/em&&/a&、文化&/strong&的中心&/p& &ul& &li&在这里，你可以： &ul& &li&感受大自然的美丽&/li& &li&体验生活的节奏&/li& &li&领略首都的激情与活力&/li& &/ul& &/li& &li&你还可以： &ol& &li&去八达岭爬长城&/li& &li&去香山看红叶&/li& &li&去王府井逛夜市&/li& &/ol& &/li& &/ul& &p&如果您有任何问题，欢迎&a href=&contactus&&联系我们&/a&&/p& &/body& &/html& 2．3 CSS 的继承&html& &head& &title&父子关系&/title& &style& &!-.li1{ color: } .li2{ color: } .li1 ol li{ font-weight: text-decoration: } --& &/style& &/head& /* 利用 CSS 继承关系 */ /* 粗体 */ /* 下划线 */38&body& &ul& &li class=&li1&&关系 1 &ul& &li&页面父子关系复杂时&/li& &li&页面父子关系复杂时&/li& &li&这里省略 20 个嵌套...&/li& &/ul& &ol& &li&页面父子关系复杂时&/li& &li&页面父子关系复杂时&/li& &li&这里省略 20 个嵌套...&/li& &/ol& &/li& &li class=&li2&&关系 2 &ul& &li&页面父子关系复杂时&/li& &li&页面父子关系复杂时&/li& &li&这里省略 20 个嵌套...&/li& &/ul& &ol& &li&页面父子关系复杂时&/li& &li&页面父子关系复杂时&/li& &li&这里省略 20 个嵌套...&/li& &/ol& &/li& &/ul& &/body& &/html&html& &head& &title&文字字体&/title& &style& &!-h2{ font-family:黑体, 幼圆; }39p{ font-family:Arial, Helvetica, sans- } p.kaiti{ font-family:楷体_GB2312, &Times New Roman&; } --& &/style& &/head&&body& &h2&立 春&/h2& &p&自秦代以来，我国就一直以立春作为春季的开始。立春是从天文上来划分的，而在自然界、在人 们的心目中，春是温暖，鸟语花香；春是生长，耕耘播种。在气候学中，春季是指候（5 天为一候）平均 气温 10℃至 22℃的时段。&/p& &p class=&kaiti&&作者: isaac&/p& &/body& &/html& 文字大小 &html& &head& &title&文字大小&/title& &style& &!-p.inch{ font-size: 0.5 } p.cm{ font-size: 0.5 } p.mm{ font-size: 4 } p.pt{ font-size: 12 } p.pc{ font-size: 2 } --& &/style& &/head&&body& &p class=&inch&&文字大小，0.5in&/p& &p class=&cm&&文字大小，0.5cm&/p& &p class=&mm&&文字大小，4mm&/p& &p class=&pt&&文字大小，12pt&/p& &p class=&pc&&文字大小，2pc&/p& &/body& &/html& 文字颜色 &html&40&head& &title&文字颜色&/title& &style& &!-h2{ color:rgb(0%,0%,80%); } p{ color:#333333; font-size:13 } p span{ color: } --& &/style& &/head&&body& &h2&冬至的由来&/h2& &p&&span&冬至&/span&过节源于汉代，盛于唐宋，相沿至今。 《清嘉录》甚至有“&span&冬至&/span& 大如年”之说。这表明古人对&span&冬至&/span&十分重视。人们认为&span&冬至&/span&是阴阳二气的自然 转化，是上天赐予的福气。汉朝以&span&冬至&/span&为“冬节” ，官府要举行祝贺仪式称为“贺冬” ，例行 放假。 《后汉书》中有这样的记载： “&span&冬至&/span&前后，君子安身静体，百官绝事，不听政，择吉辰 而后省事。 ”所以这天朝庭上下要放假休息，军队待命，边塞闭关，商旅停业，亲朋各以美食相赠，相互拜 访，欢乐地过一个“安身静体”的节日。&/p& &p&唐、宋时期，&span&冬至&/span&是祭天祭祀祖的日子，皇帝在这天要到郊外举行祭天大典，百姓 在这一天要向父母尊长祭拜，现在仍有一些地方在&span&冬至&/span&这天过节庆贺。&/p& &/body& &/html& 文字粗体 &html& &head& &title&文字粗体&/title& &style& &!-h1 span{ font-weight:} span{ font-size:28 } span.one{ font-weight:100; } span.two{ font-weight:200; } span.three{ font-weight:300; } span.four{ font-weight:400; } span.five{ font-weight:500; } span.six{ font-weight:600; } span.seven{ font-weight:700; } span.eight{ font-weight:800; } span.nine{ font-weight:900; } span.ten{ font-weight: }41span.eleven{ font-weight: } --& &/style& &/head&&body& &h1&文字&span&粗&/span&体&/h1& &span class=&one&&文字粗细:100&/span& &span class=&two&&文字粗细:200&/span& &span class=&three&&文字粗细:300&/span& &span class=&four&&文字粗细:400&/span& &span class=&five&&文字粗细:500&/span& &span class=&six&&文字粗细:600&/span& &span class=&seven&&文字粗细:700&/span& &span class=&eight&&文字粗细:800&/span& &span class=&nine&&文字粗细:900&/span& &span class=&ten&&文字粗细:bold&/span& &span class=&eleven&&文字粗细:normal&/span& &/body& &/html&文字斜体&html& &head& &title&文字斜体&/title& &style& &!-h1{ font-style: } h1 span{ font-style: } p{ font-size:18 } p.one{ font-style: } p.two{ font-style: } --& &/style& &/head& /* 设置斜体 */ /* 设置为标准风格 */&body& &h1&文字&span&斜&/span&体&/h1& &p class=&one&&文字斜体&/p& &p class=&two&&文字斜体&/p& &/body& &/html&文字下划线、顶划线、删除线&html& &head&42&title&文字下划线、顶划线、删除线&/title& &style& &!-p.one{ text-decoration: } p.two{ text-decoration: } /* 下划线 */ /* 顶划线 */ /* 闪烁 */p.three{ text-decoration:line- } /* 删除线 */ p.four{ text-decoration: } --& &/style& &/head&&body& &p class=&one&&下划线文字，下划线文字&/p& &p class=&two&&顶划线文字，顶划线文字&/p& &p class=&three&&删除线文字，删除线文字&/p& &p class=&four&&文字闪烁&/p& &p&正常文字对比&/p& &/body& &/html&&html& &head& &title&英文字母大小写&/title& &style& &!-p{ font-size:17 } p.one{ text-transform: } p.two{ text-transform: } p.three{ text-transform: } --& &/style& &/head& /* 单词首字大写 */ /* 全部大写 */ /* 全部小写 */&body& &p class=&one&&quick brown fox jumps over the lazy dog.&/p& &p class=&two&&quick brown fox jumps over the lazy dog.&/p& &p class=&three&&QUICK Brown Fox JUMPS OVER THE LAZY DOG.&/p& &/body& &/html&&html& &head& &title&Google&/title&43&style& &!-p{ font-size:80 letter-spacing:-2 /* 字母间距 */font-family:Arial, Helvetica, sans- } .g1, .g2{ color:#184dc6; } .o1, .e{ color:#c61800; } .o2{ color:#efba00; } .l{ color:#42c34a; } --& &/style& &/head&&body& &p&&span class=&g1&&G&/span&&span class=&o1&&o&/span&&span class=&o2&&o&/span&&spanclass=&g2&&g&/span&&span class=&l&&l&/span&&span class=&e&&e&/span&&/p& &/body& &/html&&html& &head& &title&垂直对齐&/title& &style& &!-td.top{ vertical-align: } td.bottom{ vertical-align: } td.middle{ vertical-align: } --& &/style& &/head& /* 顶端对齐 */ /* 底端对齐 */ /* 中间对齐 */&body& &table cellpadding=&2& cellspacing=&0& border=&1&& &tr& &td&&img src=&02.jpg& border=&0&&&/td& &td class=&top&&垂直对齐方式，top&/td& &/tr& &tr& &td&&img src=&02.jpg& border=&0&&&/td& &td class=&bottom&&垂直对齐方式，bottom&/td& &/tr& &tr&44&td&&img src=&02.jpg& border=&0&&&/td& &td class=&middle&&垂直对齐方式，middle&/td& &/tr& &/table& &/body& &/html&&html& &head& &title&首字放大&/title& &style& &!-body{ background-color: } p{ font-size:15 color: } p span{ font-size:60 float: padding-right:5 font-weight: font-family:黑体; color: } /* p:first-letter{ font-size:60 float: padding-right:5 font-weight: font-family:黑体; color: } p:first-line{ text-decoration: }*/ --& &/style& &/head& &body& &p&&span&中&/span&秋节是远古天象崇拜――敬月习俗的遗痕。据《周礼?春官》记载，周代已有“中 /* 首字大小 */ /* 首字下沉 */ /* 与右边的间隔 */ /* 粗体字 */ /* 黑体字 */ /* 字体颜色 */ /* 文字大小 */ /* 文字颜色 */ /* 背景色 */45秋夜迎寒”“中秋献良裘”“秋分夕月（拜月） 、 、 ”的活动；汉代，又在中秋或立秋之日敬老、养老，赐以雄 粗饼。晋时亦有中秋赏月之举，不过不太普遍；直到唐代将中秋与储娥奔月、吴刚伐桂、玉兔捣药、杨贵 妃变月神、唐明皇游月宫等神话故事结合起，使之充满浪漫色彩，玩月之风方才大兴。&/p& &p&北宋，正式定八月十五为中秋节，并出现“小饼如嚼月，中有酥和饴”的节令食品。孟元老《东 京梦华录》说： “中秋夜，贵家结饰台榭，民间争占酒楼玩月” ；而且“弦重鼎沸，近内延居民，深夜逢闻 笙芋之声，宛如云外。间里儿童，连宵婚戏；夜市骈阗，至于通晓。 ”吴自牧《梦梁录》说： “此际金凤荐 爽，玉露生凉，丹桂香飘，银蟾光满。王孙公子，富家巨室，莫不登危楼，临轩玩月，或开广榭，玳筵罗 列，琴瑟铿锵，酌酒高歌，以卜竟夕之欢。&/p& &/body& &/html&&html& &head& &title&段落实例:Baidu 搜索&/title& &style& &!-p{ margin:0 font-family:A } p.title{ padding-bottom:0 font-size:16 } p.content{ padding-top:3 font-size:13 line-height:18 } p.link{ font-size:13 color:#008000; padding-bottom:25 } span.search{ color:#c60a00; } span.quick{ color:#666666; text-decoration: } p.title span.search{ text-decoration: /* 标题处关键字的下划线 */ /* 快照颜色 */ /* 快照下划线 */ /* 关键字颜色 */ /* 网址颜色 */ /* 标题与内容的距离 */ /* 内容的字体大小 */ /* 定义所有字体 */46} --& &/style& &/head& &body& &p class=&title&&&a href=&#&&中国&span class=&search&&春节&/span&网&/a&&/p& &p class=&content&&欢迎光临中国&span class=&search&&春 节&/span&网,您现在的位置是中国 &span class=&search&&春节&/span&网首页! &年&兽的传说 熬年的传说 万年创建历法说 中国古代历法发展 &span class=&search&&春节&/span&:传统和现代 元宵灯节源于何时? 猜灯谜的来由 十二生肖的源流、排列与信仰 祭灶 扫尘 贴春联 年画 倒贴福字 除夕夜 ...&/p& &p class=&link&&www.chunjie.net.cn/ 46K
- &span class=&quick&&百度快照&/span&&/p& &p class=&title&&&a href=&#&&喜迎 2004&span class=&search&&春节&/span&_TOM 新闻&/a&&/p& &p class=&content&&?&span class=&search&&春节&/span&流行三类“拜年短信”:猴、祝福、个性 ?&span class=&search&&春节&/span&期间电视节目早知道(1 月 19 日-1 月 25 日) ?猴年贺岁:短信 彩信...?TOM 游 戏与大家同过快乐&span class=&search&&春节&/span& 一起来玩免费网游! ? “对对联 贺新春” 玩乐吧强档 推荐 许个愿吧 ?&span class=&search&&春节&/span&听觉搜爆-...&/p& &p class=&link&&news.tom.com/hot/2004year/ 82K
- &span class=&quick&&百度快照&/span&&/p& &p class=&title&&&a href=&#&&&span class=&search&&春节&/span& 我把 money 献给你_阿里巴巴&/a&&/p& &p class=&content&&编者按:新年、&span class=&search&&春节&/span&、情人节,一年中时尚男女血拼的最 佳时节。商家借节造势,推出的揽客“花招”也是层出不穷?? 新春最受欢迎的开...?&span class=&search&& 春 节 &/span& 期 间 : 这 些 生 意 好 赚 钱 ( 一 )( 图 )01/20 ? 鼎 大 祥 “ 红 腰 带 吉 祥 裤 ” 销 售 红 火 01/18 &span class=&search&&春节&/span& 这些生意好...&/p& &p class=&link&&info.china.alibaba.com/news/subject/v3000 ... 33K
- &span class=&quick&&百度 快照&/span&&/p& &/body& &/html&&html& &head& &title&边框&/title& &style& &!-img.test1{ border-style: /* 点画线 */ /* 边框粗细 */ border-color:#FF9900; /* 边框颜色 */ border-width:5 } img.test2{47border-style: border-color: border-width:2 } --& &/style& &/head& &body&/* 虚线 */ /* 边框颜色 */ /* 边框粗细 */&img src=&banana.jpg& class=&test1&& &img src=&banana.jpg& class=&test2&& &/body& &/html&&html& &head& &title&图片缩放&/title& &style& &!-img.test1{ width:50%; } --& &/style& &/head& &body& &img src=&pear.jpg& class=&test1&& &/body& &/html& /* 相对宽度 */&html& &head& &title&图文混排&/title& &style type=&text/css&& &!-body{ background-color:bb0102; /* 页面背景颜色 */ margin:0 padding:0 } img{ float: /*margin-right:50 /* 文字环绕图片 */ /* 右侧距离 */48/*margin-bottom:25 } p{ color:#FFFF00; margin:0 padding-top:10 padding-left:5 padding-right:5 } span{ float: font-size:85 font-family:黑体; margin:0 padding-right:5 } --& &/style& &/head& &body&/* 下端距离 *//* 文字颜色 *//* 首字放大 */&img src=&chunjie.jpg& border=&0&& &p&&span&春&/span&节古时叫“元旦”“元”者始也， 。 “旦”者晨也， “元旦”即一年的第一个早晨。 《尔雅》 ，对“年”的注解是： “夏曰岁，商曰祀，周曰年。 ”自殷商起，把月圆缺一次为一月，初一为朔， 十五为望。每年的开始从正月朔日子夜算起，叫“元旦”或“元日” 。到了汉武帝时，由于“观象授时”的 经验越来越丰富，司马迁创造了《太初历》 ，确定了正月为岁首，正月初一为新年。此后，农历年的习俗就 一直流传下来。&/p& &p&据《诗经》记载，每到农历新年，农民喝“春酒” ，祝“改岁” ，尽情欢乐，庆祝一年的丰收。到 了晋朝，还增添了放爆竹的节目，即燃起堆堆烈火，将竹子放在火里烧，发出噼噼啪啪的爆竹声，使节日 气氛更浓。到了清朝，放爆竹，张灯结彩，送旧迎新的活动更加热闹了。清代潘荣升《帝京岁时记胜》中 记载： “除夕之次，夜子初交，门外宝炬争辉， 玉珂竞响。 ??闻爆竹声如击浪轰雷， 遍于朝野， 彻夜无停。 ” &/p& &p&在我国古代的不同历史时期，春节，有着不同的含义。在汉代，人们把二十四节气中的“立春” 这一天定为春节。南北朝时，人们则将整个春季称为春节。1911 年，辛亥革命推翻了清朝统治，为了“行 夏历，所以顺农时，从西历，所以便统计” ，各省都督府代表在南京召开会议，决定使用公历。这样就把农 历正月初一定为春节。至今，人们仍沿用春节这一习惯称呼。&/p& &/body& &/html&&html& &head& &title&八仙&/title& &style type=&text/css&&49&!-body{ background-color:#d8c7b4; /* 页面背景色 */ } p{ font-size:13 } p.title1{ text-decoration: font-size:18 font-weight: text-align: color:#59340a; } p.title2{ text-decoration: font-size:18 font-weight: text-align: color:#59340a; } p.content{ line-height:1.2 margin:0 } img{ border:1px solid #664a2c; } img.pic1{ float: margin-right:10 margin-bottom:5 } img.pic2{ float: margin-left:10 margin-bottom:5 } span.first{ font-size:60 font-family:黑体; float: font-weight: color:#59340a; /* 首字颜色 */ /* 首字放大 */ /* 右侧图片混排 */ /* 图片左端与文字的距离 */ /* 左侧图片混排 */ /* 图片右端与文字的距离 */ /* 图片边框 */ /* 正文内容 */ /* 正文行间距 */ /* 右侧标题 */ /* 粗体*/ /* 左对齐 */ /* 标题颜色 */ /* 左侧标题 */ /* 下划线 */ /* 段落文字大小 */50} --& &/style& &/head& &body& &img src=&baall.jpg& class=&pic2&& &p&&span class=&first&&八&/span&仙在蓬莱阁上聚会饮酒，酒至酣时，铁拐李提议乘兴到海上一游。\ 仙齐声附合，并言定各凭道法渡海，不得乘舟。 汉锺离率先把大芭蕉扇往海里一扔，坦胸露腹仰躺在扇子上，向远处漂去。何仙姑将荷花往水中一抛，顿 时红光万道，何仙姑伫立荷花之上，随波漂游。随后，吕洞宾、张果老、曹国舅、铁拐李、韩湘子、蓝采 和也纷纷将各自宝物抛人水中，借助宝物大显神通，傲游东侮。&/p& &p class=&title1&&汉钟离&/p& &img src=&ba1.jpg& class=&pic1&& &p class=&content&&元代全真教奉为“正阳祖师” ，北五祖之一。其说始於五代、宋初。相传姓锺离名 权，号“正阳子” ，又号“云房先生”《列仙全传》说：锺离权，燕台人，号云房先生，为汉朝大将，在征 。 讨吐蕃中，被上司粱翼妒嫉，只配给他老弱残兵三万人，刚到达目的地就被吐蕃军劫营，军士落荒而逃。 锺离权也逃至一山谷，而且中途还迷路了。可是“吉人自有天相” ，遇上一胡僧，将他带至一小村庄说： “这 是东华先生的住处。 ”然后告别而去。过了一会儿，忽听有人说： “这必定是那碧眼的胡人多嘴的缘故。 ”见 一老人披着白色的鹿裘，扶着青色的藜杖，问锺离汉道： “来者可是汉大将军锺离权 ? 为什么不来宿於山 僧之所?”锺离权大惊，知道遇上了异人，於是诚心学道，向老者哀求学习救世之道。老者传授锺离权“长 真决” ，及金丹火候和青龙剑法。锺离汉后来遇见华阳真人，又遇上仙王玄甫，学得“长生决” 。最后在崆 峒山紫金四皓峰居住，得到“玉匣秘诀” ，修成真仙。玉皇大帝封他为“太极左宫真人” 。另一说锺离汉为 唐朝人，与吕洞宾同时，自称“天下都散汉锺离权” ，后人或以“汉”字属下读，故一称“汉锺离” 。王重 阳创立全真教，奉“锺离汉”为“正阳祖师” ，位列北五祖之二（王玄甫，锺离权，吕洞宾，刘操，王重阳） 。 &/p& &p class=&title2&&张果老&/p& &img src=&ba2.jpg& class=&pic2&& &p class=&content&&亦作张果。据《唐书》记载，确有其人，本是民间的江湖术士，因民间相传逐为神 仙。居山西中条山，自言生於尧时，有长生不老之法。唐太宗，唐高宗（武则天的丈夫）不时征召他，都 被他婉拒了。武则天也召他出山，张果老就在庙前装死，时值盛夏，不一会，他的身体腐烂发臭。武则天 听后，只好作罢。但不久就有人在恒山的山中再次见到他。有一次，唐玄宗去打猎，捕获一头大鹿，此鹿 与寻常的鹿相比，稍有差异。厨师刚要开刀宰鹿，张果老看见了，就连忙阻止，说“这是仙鹿，已经有一 千多岁了，当初汉武帝狩猎时，我曾跟随其后，汉武帝虽然捕获了此鹿，但后来把它放生了。 ”玄宗说： “天 下之大，鹿多的是，时迁境异，你这么知道他就是你说的那头鹿呢 ? ”张果老说： “武帝放生时，用铜牌 在它左角下做了标志。 ”於是玄宗命人查检。果然有一个二寸大小的铜牌，只是字迹已经模糊不清了。玄宗 又问： “汉武帝狩猎是哪年 ? 到现在已经有多少年了 ? ”张果老说： “至今有八百五十二年了。 ”唐玄宗命 人核对，果然无误。张果老回山后不久就仙逝了，唐玄宗为他建“栖霞观” 。张果老有一怪癖，平日他倒骑 着一头白毛驴，日能行万里，当然这驴子也是一匹“神驴” ，据说不骑的时候，就可以把它折叠起来，放在 皮囊里。&/p& &p class=&title1&&韩湘子&/p& &img src=&ba3.jpg& class=&pic1&& &p class=&content&&唐朝韩愈的侄孙子。生性放荡不拘，不好读书，只好饮酒，世传其学道成仙，在二 十岁时去洛下探亲的时候，倾慕山川之趣而一去不返，二十多年音讯全无。在唐元和年间，忽然回到长安， 衣衫破旧，行为怪异，韩愈让他入学校和学生们读书，但韩湘子和学员讨论时一言不发，只跟下人赌博，51喝醉了就睡在马房中睡三天五日，或露宿街头，韩愈担心不已，问他“人各有所长，就算小贩也有一技之 长，你如此胡闹，将来能做什么呢?”韩湘子说： “我也有一门技巧。只是你不知道。 ”韩愈问： “那你能做 什么?”当时正当初冬季节，令牡丹开花数色，又尝令聚盆覆土，顷刻开花。韩湘子后传说跟吕洞宾学道。 位列仙班。&/p& &p class=&title2&&铁拐李&/p& &img src=&ba4.jpg& class=&pic2&& &p class=&content&&八仙中，铁拐李是年代最久，资历最深者，见诸於文献则较晚。亦作“李铁拐” 。 元剧《吕洞宾度铁拐李岳》始有其名。身世由来传说颇多，一说乃西王母点化成仙，封东华教主，授铁杖 一根。一说本名洪水，常行乞於市，为人所贱，后以铁杖掷空化为飞龙，乘龙而去为仙。一说姓李名玄， 遇太上老君而得道。一日神游华山赴太上老君之约，嘱他的徒儿七日不返可化其身。然而徒儿因母亲病而 欲归家，六日即化之。第七日李玄返魂无所归，乃附在一跛脚的乞丐的尸体而起，蓬头垢面，袒腹跛足， 以水喷倚身的竹杖变为铁拐，故名李铁拐。&/p& &p class=&title1&&曹国舅&/p& &img src=&ba5.jpg& class=&pic1&& &p class=&content&&相传为宋仁宗朝之大国舅，名佾，亦作景休。曹国舅的弟弟贪赴京应试秀才之妻的 美色，绞死秀才，强占其妻。秀才的冤魂向包拯申诉，包公准予查究。曹国舅告知其弟，务必将秀才的妻 子置於死地，以绝后患。於是二国舅投秀才的妻子入井，被她逃脱，途遇曹国舅，误以为是包拯，向曹国 舅申诉，曹国舅大惊，令手下用铁鞭打死秀才的妻子，手下以为她以死， 把她弃尸於偏僻的小巷。秀才的 妻子醒了之后，向包公叫冤，包公问明真情后，就诈病，曹国舅来探望包拯。包拯令秀才的妻子出诉，逐 将曹国舅监禁。又作假书将二国舅偏来开封府，令此女面诉冤情。又将二国舅枷入牢中。曹皇后和宋仁宗 亲自来劝包拯释放她的两个弟弟，包拯不从，命令将二国舅处决。宋仁宗大赦天下。包公才将曹国舅放行。 曹国舅获释后，入山修行从此遁迹山林，矢志修道学仙，有一天，锺离权和吕洞宾问他说： “你所养的是什 么 ? ”曹国舅说： “我所养的是道。 ”仙人笑着问： “道在那里呢?”曹国舅指着天说： “道在天。 ”仙人又问： “天在那儿 ? ”曹国舅指着心。锺离权和吕洞宾满意地说： “心即天，天即道，你已经洞悟道之真义了。 ” 逐授以《还真秘旨》 ，令他精心修练，不多久，曹国舅就成仙了。&/p& &p class=&title2&&蓝采和&/p& &img src=&ba6.jpg& class=&pic2&& &p class=&content&&唐开元天宝时人。夏服絮衫，冬卧冰雪，常於长安市唱踏踏歌，歌词多神仙之意。 有人孩童时见过他，及至年老再见，采和颜状如故，后於酒楼乘醉骑鹤而去。元人以此逸事，撰杂剧汉锺 离度脱蓝采和。 《仙佛奇踪》中： “蓝采和，不知那里人。经常穿着破烂的衣服，带着六寸的腰带，一只脚 穿靴，一只脚赤足。夏天时在长衫内穿厚厚的内衣，冬天时躺在雪地中，呼出的气彷如蒸气一般。每次在 大街中讨饭，手持大拍版，长三尺馀。醉了就唱歌。老的小的都看他唱歌，唱时好像是发狂，但又不是。 歌词随意而作，歌中充满了仙意，而且变幻莫测。把得到的钱穿在绳子上，拖着走，就是掉了也不顾。有 时赠与穷人家，有时花在酒肆中。周游天下，有人在孩童时见过他，至老后再见着他，蓝采和的容貌依旧。 后来有人见他在壕梁酒楼上饮酒，听见有笙萧的声音，忽然乘着鹤而飞上天空，抛下靴子，衣衫，腰带， 拍版，慢慢而升。元剧《锺离权度蓝采和》则说蓝采和是艺名，真名叫许坚，在勾栏里唱杂剧，年五十时， 做寿因不知犯了什么错，为官府扣打，后被锺离权度化成仙。&/p& &p class=&title1&&何仙姑&/p& &img src=&ba7.jpg& class=&pic1&& &p class=&content&&其身世有多种说法。 浙江， 安徽， 福建等地皆有本地之何仙姑。 然多传说为何氏女， 途遇仙人，赐仙桃或仙枣食之，成仙，不知饥饿。能预知祸福，善轻身飞行。一说乃吕洞宾弟子。 《仙佛奇 踪》说：何仙姑为广州增城一位叫何泰的女儿。生时头顶有六条头发。十六岁时梦见仙人教他： “吃云母粉， 可以轻身而且长生不死。 ”於是她照仙人的指示，吃云母，发誓不嫁，经常来往山谷之中，健行如飞。每天 的早上出去，晚上带回一些山果给她的母亲吃。后逐渐不吃五谷，武则天遣使召见她去宫中，在入京中的52途中忽然失踪。之后白日生仙。唐天宝九年，出现在麻姑坛中，站立在五朵云中，其后，又出现在广州的 小石楼。宋曾敏行《独醒杂志》记载： “狄青早年在争南侬时路过永州，听说何仙姑能预知吉凶，便特地去 询问战争的结果，何仙姑说： “公不必见贼，贼败且走。 ”开始狄青不信，后来宋军先锋与南侬智高的兵交 战，不机回合，智高战败并逃入大理国。何仙姑经常手持荷花。&/p& &p class=&title2&&吕洞宾&/p& &img src=&ba8.jpg& class=&pic2&& &p class=&content&&名岩，字洞宾，自号“纯阳子” 。唐京兆府（今陕西省长安县）人。曾以进士授县 令。他的母亲要生他的时候，屋里异香扑鼻，空中仙乐阵阵，一只白鹤自天而下，非如他母亲的帐中就消 失。生下吕洞宾果然气度不凡，自小聪明过人，日记万言，过目成诵，出口成章，长大后“身长八尺二寸， 喜顶华阳巾，衣黄 杉，系一皂 ，状类张子房，二十不娶。 ”当在襁褓时，马祖见到就说： “此儿骨相不凡， 自市风尘物处。他时遇卢则居，见锺则扣，留心记取。 ”后来吕洞宾游庐山，遇火龙真人，传授天遁剑法。 六十四岁时，游长安，在酒肆遇见一位羽士青一白袍，在墙壁上题诗，吕洞宾见他状貌奇古，诗意飘逸， 问他姓名。羽士说： “我是云房先生。居於终南山鹤岭，你想跟我一起去吗 ? ”吕洞宾凡心未已，没有答 应。这位云房先生就是“锺离权” 。到了晚上，锺离权和吕洞宾一同留宿在酒肆中。云房先生独自为他做饭， 这时吕洞宾睡着了，他梦见自己状元及第，官场得意，子孙满堂，极尽荣华。忽然获重罪，家产被没收， 妻离子散，到老后了然一身，穷苦潦倒，独自站在风雪中发抖，刚要叹息，突然梦醒，锺离权的饭还没熟， 於是锺离权题诗一首“黄良犹未熟，一梦到华肴。 ”吕洞宾惊道： “难道先生知道我的梦 ? ”锺离权道： “你 刚才的梦，生沉万态，荣辱千端，五十岁如一刹那呀 ! 得到的不值得欢喜，失去的也不值得悲，人生就像 一场梦。 ”於是吕洞宾下决心和锺离权学道，并经“十试”的考验，锺离权授他道法。吕洞宾有了道术和天 遁剑法，斩妖除害为民造福。吕洞宾被全真教奉为北方五祖之一（王玄甫，锺离权，吕洞宾，刘操，王重 阳） ，世称吕祖、纯阳祖师，吕洞宾在八仙中最为出名，有关他的传说很多。&/p& &/body& &/html&&html& &head& &title&背景颜色&/title& &style& &!-body{ background-color:#5b8a00; margin:0 padding:0 color:#c4f762; } p{ font-size:15 padding-left:10 padding-top:8 line-height:120%; /* 正文文字大小 */ /* 设置页面文字颜色 */ /* 设置页面背景颜色 */53} span{ font-size:80 font-family:黑体; float: padding-right:5 padding-left:10 padding-top:8 } --& &/style& &/head& &body& &img src=&mainroad.jpg& style=&float:&& &span&春&/span& &p&季，地球的北半球开始倾向太阳，受到越来越多的太阳光直射，因而气温开始升高。随着冰雪消 融，河流水位上涨。春季植物开始发芽生长，许多鲜花开放。冬眠的动物苏醒，许多以卵过冬的动物孵化， 鸟类开始迁徙，离开越冬地向繁殖地进发。许多动物在这段时间里发情，因此中国也将春季称为“万物复 苏”的季节。春季气温和生物界的变化对人的心理和生理也有影响。&/p& &p&对农民来说，春季是播种许多农作物的季节。在春季，地球的北半球开始倾向太阳，受到越来越 多的太阳光直射，因而气温开始升高。随着冰雪消融，河流水位上涨。春季植物开始发芽生长，许多鲜花 开放。冬眠的动物苏醒，许多以卵过冬的动物孵化，鸟类开始迁徙，离开越冬地向繁殖地进发。许多动物 在这段时间里发情，因此中国也将春季称为“万物复苏”的季节。&/p& &/body& &/html& /* 首字放大 */&html& &head& &title&利用背景颜色分块&/title& &style& &!-body{ padding:0 margin:0 background-color:#ffebe5; /* 页面背景色 */ } .topbanner{ background-color:#fbc9 /* 顶端 banner 的背景色 */ } .leftbanner{ width:22%; height:330 vertical-align: background-color:#6d1700; /* 左侧导航条的背景色 */ color:#FFFFFF;54text-align: padding-left:40 font-size:14 } .mainpart{ text-align: } --& &/style& &/head& &body& &table cellpadding=&0& cellspacing=&1& width=&100%& border=&0&& &tr& &td colspan=&2& class=&topbanner&&&img src=&banner1.jpg& border=&0&&&/td& &/tr& &tr& &td class=&leftbanner&& &br&&br&首页&br&&br&分类讨论 &br&&br&谈天说地&br&&br&精华区 &br&&br&我的信箱&br&&br&休闲娱乐 &br&&br&立即注册&br&&br&离开本站 &/td& &td class=&mainpart&&正文内容...&/td& &/tr& &/table& &/body& &/html&&html& &head& &title&背景重复&/title& &style& &!-body{ padding:0 margin:0 background-image:url(bg1.jpg); background-repeat:repeat-y; background-color:#0066FF; } --& &/style& &/head& &body& /* 背景图片 */ /* 垂直方向重复 */ /* 背景颜色 */55&/body& &/html&&html& &head& &title&背景的位置&/title& &style& &!-body{ padding:0 margin:0 background-image:url(bg4.jpg); background-repeat:no- /* 背景图片 */ /* 不重复 */background-position: /* 背景位置，右下 */ background-color:#eeeee8; } span{ font-size:70 float: font-family:黑体; font-weight: } p{ margin:0 font-size:14 padding-top:10 padding-left:6 padding-right:8 } --& &/style& &/head& &body& &p&&span&雪&/span&是大气固态降水中的一种最广泛、最普遍、最主要的形式。大气固态降水是多种 多样的，除了美丽的雪花以外，还包括能造成很大危害的冰雹，还有我们不经常见到的雪霰和冰粒。&/p& &p&由于天空中气象条件和生长环境的差异，造成了形形色色的大气固态降水。这些大气固态降水的 叫法因地而异，因人而异，名目繁多，极不统一。为了方便起见，国际水文协会所属的国际雪冰委员会， 在征求各国专家意见的基础上，于 1949 年召开了一个专门性的国际会议，会上通过了关于大气固态降水简 明分类的提案。这个简明分类，把大气固态降水分为十种：雪片、星形雪花、柱状雪晶、针状雪晶、多枝 状雪晶、轴状雪晶、不规则雪晶、霰、冰粒和雹。前面的七种统称为雪。&/p& &p& 立冬 太阳位于黄经 225°，11 月 7～8 日交节&br& 小雪 太阳位于黄经 240°，11 月 22～23 日交节&br& 大雪 太阳位于黄经 255°，12 月 6～8 日交节&br& 冬至 太阳位于黄经 270°，12 月 21～23 日交节&br& 小寒 太阳位于黄经 285°，1 月 5～7 日交节&br& /* 首字放大 */56大寒 太阳位于黄经 300°，1 月 20～21 日交节&/p& &/body& &/html&&html& &head& &title&固定背景图片&/title& &style& &!-body{ padding:0 margin:0 background-image:url(bg6.jpg); background-repeat:no- background-attachment: } p{ padding:10 margin:5 line-height:1.5 color:#FFFFFF; font-size:22 } --& &/style& &/head& &body& &p&对于一个网页设计者来说，HTML 语言一定不会感到陌生，因为它是所有网页制作的基础。但是 如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅 HTML 是不够的，CSS 在这中间扮演 着重要的角色。本章从 CSS 的基本概念出发，介绍 CSS 语言的特点，以及如何在网页中引入 CSS，并对 CSS 进行初步的体验。&/p& &p&CSS（Cascading Style Sheet） ，中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网 页内容分离的一种标记性语言。CSS 是 1996 年由 W3C 审核通过，并且推荐使用的。简单的说 CSS 的引入 就是为了使得 HTML 能够更好的适应页面的美工设计。它以 HTML 为基础，提供了丰富的格式化功能， 如字体、颜色、背景、整体排版等等，并且网页设计者可以针对各种可视化浏览器设置不同的样式风格， 包括显示器、打印机、打字机、投影仪、PDA 等等。CSS 的引入随即引发了网页设计的一个又一个新高潮， 使用 CSS 设计的优秀页面层出不穷。&/p& &/body& &/html& /* 背景图片 */ /* 不重复 */ /* 固定背景图片 */&html& &head& &title&念奴娇 赤壁怀古&/title& &style& &!-body{57background:url(bg9.jpg) no- margin:0 padding:0 text-align: } div.content{ height:260 writing-mode:tb- width:620 text-align: border:3px solid #666666; line-height:30 padding-top:15 padding-right:8 background: url(bg10.jpg) no- } --& &/style& &/head& &body& &div style=&height:90&&&/div& &div class=&content&&/* 页面背景 *//* 竖排版文字 *//* 文字部分背景 */大江东去&br&浪淘尽&br&千古风流人物&br& 故垒西边人道是&br&三国周郎赤壁&br& 乱石穿空&br&惊涛拍岸&br&卷起千堆雪&br& 江山如画&br&一时多少豪杰&br& 遥想公谨当年&br&小乔初嫁了&br&雄姿英发&