层叠样式表和动态HTML

1、CSS概览

CSS样式是由一个名称/值的属性对列表指定的，属性对之间用分号隔开，名字属性和值属性之间用冒号隔开。

CSS样式属性和它们的值：

名称	值
background	[background-color||background-image||background-repeat||background-attachment||background-position]
Background-attachment	scroll|fixed
Background-color	color|transparent
Background-image	url(url)|none
Background-position	[[percentage|length]{1,2}|[[top|center|bottom]||[left|center|right]]]
Background-repeat	repeat|repeat-x|repeat-y|no_repeat
border	[border-width||border-style||color]
Border-collapse	collapse|separate
Border-color	Color{1,4}|transparent
Border-spacing	length length?
Border-style	[none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset]{1,4}
Border-top	[border-top-width||border-style||[color|transparent]]
Border-right
Border-bottom
Border-left
Border-top-color	color|transparent
Border-right-color
Border-bottom-color
Border-left-color
Border-top-style	none|hidden|dotted|dashed|solid|double|groove|ridge|insert|outset
Border-right-style
Border-bottom-style
Border-left-style
Border-top-width	thin|medium|thick|length
Border-right-width
Border-bottom-width
Border-left-width
Border-width	[thin|medium|thick|length]{1,4}
bottom	length|percentage|auto
Caption-side	top|bottom
clear	none|left|right|both
clip	[rect([length|auto]{4})]|auto
color	Color
content	[string|url(url)|counter|attr(attribute-name)|open-quote|close-quote|no-open-quote|no-close-quote]+|normal
Counter-increment	[identifier integer?]+|none
Counter-reset	[identifier integer?]+|none
cursor	[[url(url),]*[auto|crosshair|default|pointer|progress|move|e-resize|ne-resize|nw-resize|n-resize|se-resize|sw_resize|s-resize|w-resize|text|wait|help]]
direction	ltr]rtl
display	inline|block|inline-block|list-item|run-in|table|inline-table|table-row-group|table-header-group|table-footer-group|table-row|table-column-group|table-column|table-cell|table-caption|none
Empty-cells	show|hide
float	left|right|none
font	[[font-style||font-variant||font-weight]?font-size[/line-height]?font-family]|caption|icon|menu|message-box|small-caption|status-bar
Font-family	[[family-name|serif|sans-serif|monospace|cursive|fantasy],]+
Font-size	xx-small|x-small|small|medium|large|x-large|xx-large|smaller|larger|length|percentage
Font-style	normal|italic|oblique
Font-variant	normal|small-caps
Font-weight	normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900
height	length|percentage|auto
left	length|percentage|auto
Letter-spacing	normal|length
Line-height	normal|number|length|percentage
List-style	[list-style-type||list-style-position||list-style-image]
List-style-image	url(url)|none
List-style-position	inside|outside
List-style-type	disc|circle|square|decimal|decimal-leading-zero|lower-roman|upper-roman|lower-greek|lower-alpha|lower-latin|upper-alpha|upper-latin|hebrew|armenian|georgian|cjk-ideographic|hiragana|katakana|hiragana-iroha|katakana-iroha|none
margin	[length|percentage|auto]{1,4}
Margin-top	length|percentage|auto
Margin-right
Margin-bottom
Margin-left
Marker-offset	length|auto
Max-height	length|percentage|none
Max-width	length|percentage|none
Min-height	length|percentage
Min-width	length|percentage
outline	[outline-color||outline-style||outline-width]
Outline-color	color|invert
Outline-style	none|hidden|dotted|dashed|solid|double|groove|ridge|insert|outset
Outline-width	thin|medium|thick|length
overflow	visible|hidden|scroll|auto
padding	[length|percentage|auto]{1,4}
Padding-top	length|percentage
Padding-right
Padding-bottom
Padding-left
Page-break-after	auto|always|avoid|left|right
Page-break-before	auto|always|avoid|left|right
Page-break-inside	avoid|auto
position	static|relative|absolute|fixed
quotes	[string string]+|none
right	length|percentage|auto
Table-layout	auto|fixed
Text-align	left|right|center|justify
Text-decoration	none|[underline||overline||line-through||blink]
Text-indent	length|percentage
Text-transform	capitalize|uppercase|lowercase|none
top	length|percentage|auto
Unicode-bidi	normal|embed|bidi-override
Vertical-align	baseline|sub|super|top|text-top|middle|bottom|text-bottom|percentage|length
visibility	visible|hidden|collapse
White-space	normal|pre|nowrap|pre-wrap|pre-line
width	length|percentage|auto
Word-spacing	normal|length
Z-index	auto|integer

1.1、给文档元素应用样式规则

把样式属性应用到文档元素的方法有很多。方法之一是在HTML标记的style属性中使用它们。

CSS的一个重要目标是把文档内容和文档结构与文档外观分开。要实现文档结构和外观的分离，可以使用样式表（stylesheet），它把所有样式信息集中在一个地方。CSS样式表由样式规则的集合构成。每条规则以一个选择器开头，它指定要应用这条样式规则的文档元素，其后是用大括号括起来的样式属性和它们值的集合。最简单的规则是为一个或多个指定的标记名定义样式。

另一种样式表规则使用不同的选择器，指定要应用样式的元素的类。元素的类由HTML标记的class属性定义。

样式表还有只应用于具有指定的id属性的元素规则。

1.2、关联样式表和文档

可以把样式表放置在文档<head>部分中的<style>和</style>标记之间，使他们合并到HTML文档中。

当一个样式表用于一个Web站点上的多个页面的时候，将它保存在一个自己的文件中，而不使用任何结束的HTML标记，这样通常会更好。这样，这个CSS文件就可以包含到一个HTML页面中。和<script>标记不同，style标记没有src属性。要把一个样式表包含到一个HTML页面中，要使用<link>标记。

也可以使用<link>标记来指定一个备用的样式表。有些浏览器允许用户选择所提供的一个备用样式表。

如果Web页面包含一个特定于页面的带有一个<style>标记的样式表，可以使用CSS@import指示符来在该特定于页面的样式表中包含一个共享的CSS文件。

1.3、层叠

CSS中的C代表“cascading”（层叠）。这个术语说明应用到文档中指定元素的样式规则来自不同资源的层叠。每个Web浏览器通常有自己的一套用于HTML元素的默认元素样式，而且允许用户使用自己定义的样式表覆盖这些默认样式。该样式表由另一个样式表链接或导入文档。

1.4、CSS的版本

1.5、CSS示例

<head>
<style type="text/css">
/* Specify that headings display in blue italic text. */
h1, h2 { color: blue; font-style: italic }

/* 
 * Any element of class="WARNING" displays in big bold text with large margins
 * and a yellow background with a fat red border.
 */
.WARNING { 
          font-weight: bold;
          font-size: 150%;
          margin: 0 1in 0 1in; /* top right bottom left */
          background-color: yellow; 
          border: solid red 8px;
          padding: 10px;       /* 10 pixels on all 4 sides */
}

/*
 * Text within an h1 or h2 heading within an element with class="WARNING" 
 * should be centered, in addition to appearing in blue italics.
 */
.WARNING h1, .WARNING h2 { text-align: center }

/* The single element with id="P23" displays in centered uppercase. */
#P23 {
      text-align: center;
      text-transform: uppercase;
}
</style>
</head>
<body>
<h1>Cascading Style Sheets Demo</h1>

<div class="WARNING">
<h2>Warning</h2>
This is a warning!
Notice how it grabs your attention with its bold text and bright colors.
Also notice that the heading is centered and in blue italics.
</div>

<p id="P23">
This paragraph is centered<br>
and appears in uppercase letters.<br>
<span style="text-transform: none">
Here we explicitly use an inline style to override the uppercase letters.
</span>
</p>
</body>

2、用于DHTML的CSS：

属性	说明
position	设置元素应用的定位类型
top,left	设置元素上边界和左边界的位置
bottom,right	设置元素下边界和右边界的位置
width,height	设置元素的大小
z-index	设置元素相对于其他重叠元素的“堆叠顺序”，定义元素位置的第三维
display	设置如何和是否显示一个元素
visibility	设置元素是否可见
clip	定义元素的“裁剪区”，只显示元素在这个区域中的部分
overflow	设置当元素比分配给它的空间大时应该采取什么操作
margin,border，padding	设置元素的空白区和边框
background	指定一个元素背景颜色或图像
opacity	指定一个元素有多么不透明（或半透明）。

2.1、DHTML的关键：绝对定位

CSS的position属性设置了要应用到元素的定位类型。该属性有四个可用的值，如下所示

static

这个是默认值，指定根据文档内容的正常流动对元素定位。静态定位元素不是DHTML元素，不能用top、left等属性定位。要对文档元素使用DHTML定位技术，必须把它的position属性设置为其他三个值之一。

absolute

用这个值可以设置元素相对于它的包含元素的位置。绝对定位的元素将独立于其他元素定位，但不属于静态定位的元素流。绝对定位的元素可以相对于文档的<body>标记进行定位。如果它嵌套在另一个绝对定位的元素中，则相对于那个元素定位。这是DHTML最常用的定位类型。

fixed

用这个值可以设置元素在浏览器窗口中的位置。具有fixed定位的元素总是可见的，并且不随文档其余的元素滚动。与绝对定位的元素一样，固定定位的元素独立于其他元素，并且不属于文档流。

relative

当position属性被设为relative时，将根据常规流布置元素，然后相对于它在常规流中的位置进行调整。在常规文档流中分配给元素的空间仍然分配给它，它两边的元素不会向它靠近来填充那个空间，但它们也不会从元素的新位置被挤走。

2.2、CSS定位示例：带阴影的文本

2.3、查询元素的位置和大小

在现代浏览器中，一个元素的offsetLeft属性和offsetTop属性返回这个元素的X和Y坐标。类似地，offsetWidth属性和offsetHeight属性返回元素的宽度和高度。这些属性都是只读的并且以数字的形式返回像素值。不过，offsetLeft和offsetTop属性通常还不够。这些属性指定了一个元素相对于某个其他元素的X坐标和Y坐标。而那个其他的元素就是offsetParent属性的值。因此，一般来说，确定一个元素的位置的可移植的方法是，循环遍历offsetParent引用，增加偏移值。

2.4、第三维：z-index

2.5、元素的显示和可见性

2.6、CSS盒子模型和定位细节

2.7、颜色、透明度和半透明

2.8、部分可见性：overflow和clip属性

3、脚本花内联样式