CSS 指层叠样式表学习手册.docVIP

CSS 指层叠样式表 (Cascading Style Sheets)解决内容与表现分离的问题如何插入样式表外部样式表当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 link 标签链接到样式表。link 标签在（文档的）头部： head link rel=stylesheet type=text/css href=mystyle.css / /head内部样式表你可以使用 style 标签在文档头部定义内部样式表head style type=text/css p {margin-left: 20px;} /style /head 内联样式p style= margin-left: 20px This is a /p CSS 语法由三部分构成：选择器、属性和值： body {color: blue}p { color: #000000; } p { color: #000; } 选择器比方说，你希望列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器li strong { font-style: italic; font-weight: normal; } class 也可被用作派生选择器.fancy td { color: #f60; background: #666; } td.fancy { color: #f60; background: #666; } td class=fancy 选择器的分组你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。 h1,h2,h3,h4,h5,h6 { color: green; } 继承及其问题根据 CSS，子元素从父元素继承属性。body { font-family: Verdana, “宋体”; } CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。大多数浏览器都会按照上面的图示来呈现内容根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。 * { margin: 0; padding: 0; } CSS 伪类提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。 提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。 提示：伪类名称对大小写不敏感。伪类可以与 CSS 类配合使用a.red : visited {color: #FF0000} a class=red href=css_syntax.aspCSS Syntax/a CSS 尺寸 height 设置元素的高度。 line-height 设置行高。 max-height 设置元素的最大高度。 max-width 设置元素的最大宽度。 min-height 设置元素的最小高度。 min-width 设置元素的最小宽度。 width 设置元素的宽度。 CSS 相对定位 相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。 如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。 #box_relative { position: relative; left: 30px; top: 20px; } 如下图所示： CSS 绝对定位 绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。 普通流中其它元素的布局就像绝对定位的元素不存在一样： #box_relative { position: absolute; left: 30px; top: 20px; } div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素