| [DHTMLET®](http://www.dhtmlet.com) | [属性清单 ](#)| 相关内容:SEE ALSO------------------------------------------ 样式表伪类 Pseudo-Classes 样式表伪对象 Pseudo-Elements 样式表规则 At-Rules 样式表声明 Declaration 样式表属性 Properties 样式表单位 Units |
|-----|-----|
Introduction To CSS2样式表简介
![](https://box.kancloud.cn/2015-11-02_5636cd268eafe.gif)
说明:
本手册针对的是已有一定网页设计制作经验的读者。其目的是提供最新最全的样式表内容的快速索引及注释。所以对于样式表的基础知识,在此仅简单介绍,恕不赘述。
本手册的升级信息与版权声明请参阅[关于本书](#)页面。本手册中专用词汇请参阅[中英文词汇对照表](#)。
限于篇幅,对于一些过于繁杂的相关内容,如动态样式属性(Dynamic Properties),滤镜([Filters](#)),行为([Behaviors](#))请参阅我的其它相关著作。
本书中涉及到的所有HTML对象(Object,Element),HTML特性(Attributes)和属性(Properties)请参阅我的相关著作。
![](https://box.kancloud.cn/2015-11-02_5636cd269ead6.gif)
什么是样式表
CSS是Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
![](https://box.kancloud.cn/2015-11-02_5636cd26acaa0.gif)
如何将样式表加入您的网页
你可以用以下三种方式将样式表加入您的网页。而最接近目标的样式定义优先权越高。高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义。例外请参阅[important](#)声明。
![](https://box.kancloud.cn/2015-11-02_5636cd26b6c31.gif)
链入外部样式表文件 (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" ?>>
![](https://box.kancloud.cn/2015-11-02_5636cd26c3daa.gif)
定义内部样式块对象 (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: bold; color: maroon}
h2 {font: 13pt/15pt "Arial"; font-weight: bold; color: blue}
p {font: 10pt/12pt "Arial"; color: black}
-->
</style>
<body>
请注意,这里将style对象的type属性设置为"text/css",是允许不支持这类型的浏览器忽略样式表单。
![](https://box.kancloud.cn/2015-11-02_5636cd26d28d4.gif)
内联定义 (Inline Styles)
内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。示例如下:
<p style="margin-left: 0.5in; margin-right:0.5in">这一行被增加了左右的外补丁<p>
![](https://box.kancloud.cn/2015-11-02_5636cd26ddf04.gif)
样式表语法 (CSS Syntax)
Selector { property: value }
参数说明:
*Selector* -- [选择符](#)
*property : value* -- 样式表定义。[属性](#)和属性值之间用冒号(:)隔开。定义之间用分号(;)隔开
![](https://box.kancloud.cn/2015-11-02_5636cd26e8140.gif)
继承的值 (The ' Inherit ' Value)
每个属性都有一个指定的值:Inherit。它的意思是:将父对象的值等同为计算机值得到。这个值通常仅仅是备用的。显式的声明它可用来强调。
苏沈小雨制作・保留所有权利
©2001 rain1977.comer . All rights reserved . Terms of Use .
- 简介 Introducing
- 样式表简介 Introduction to CSS2
- 关于本手册 About this handbook
- 苏沈小雨 About rain1977
- 属性 Properties
- 字体 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-overhang
- ruby-position
- 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
- 边框 border
- 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
- 滚动条 Scrollbar
- 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
- cursor
- behavior
- filter
- zoom
- 选择符 Selectors
- 通配选择符 Universal Selector
- 类型选择符 Type Selectors
- 属性选择符 Attribute Selectors
- 包含选择符 Descendant Selectors
- 子对象选择符 Child Selectors
- ID选择符 ID Selectors
- 类选择符 Class Selectors
- 选择符分组 Grouping
- 伪类 Pseudo-Classes
- :link
- :hover
- :active
- :visited
- :focus
- :first-letter
- :first-line
- :first-child
- :first
- :left
- :right
- :lang
- 伪对象 Pseudo-Elements
- :before
- :after
- 规则 At-Rules
- @import
- @charset
- @font-face
- @fontdef
- @page
- @media
- 声明 Declaration
- !important
- 单位 Units
- 长度 Length
- px
- em
- ex
- pt
- pc
- in
- mm
- cm
- 颜色 Color
- rgb(RGB)
- #RRGGBB
- Color Name
- 角度 Angle
- deg
- grad
- rad
- 时间 Time
- s
- ms
- 频率 Frequency
- Hz
- kHz
- 附录 Appendix
- 颜色表 Color Table
- 设备类型 Media Types
- 字符集识别 Character Set Recognition
- ISO Latin-1字符集 ISO Latin-1 Character Set
- HTML附加命名实体
- 特殊文本和BIDI文本的字符实体