一、CSS简介
1、简单介绍
CSS 指层叠样式表 (Cascading Style Sheets)，样式定义如何显示 HTML 元素，通常存储在样式表中。把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题。使文档内容（HTML内容）清晰地独立于文档表现层。
外部样式表可以极大提高工作效率，通常存储在 CSS 文件中，多个样式定义可层叠为一（样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表）。
层叠次序
当同一个 HTML 元素被不止一个样式定义时，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中内联样式（在 HTML 元素内部）拥有最高的优先权。
1、浏览器的样式声明（缺省设置）；2、外部样式表；3、内部样式表（位于 <head> 标签内部）；4、内联样式（在 HTML 元素内部）
2、CSS基础语法
selector {declaration1; declaration2; ... declarationN } ——选择器{N条声明以分号隔开}
选择器：需要设置样式的 HTML 元素
声明：由以冒号连接的属性和值构成，属性（property）是希望设置的样式属性（style attribute）。多条声明以花括号包围
注意：
属性值的单位，当使用 RGB 百分比时，即使当值为 0 时也要写百分比符号。其他的情况不用。
如果值为若干单词，则要给值加引号。p {font-family: "sans serif";}
多重声明每行只描述一个属性以增强样式定义的可读性，均以分号结尾（最后一行不用分号也可）
空格和大小写，是否包含空格不会影响 CSS 在浏览器的工作效果，CSS 对大小写不敏感（与 XHTML 不同）。不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。
3、选择器的分组
对选择器进行分组，被分组的选择器可以分享相同的声明，用逗号将需要分组的选择器分开。h1,h2,h3,h4,h5,h6{ color: green; }
4、继承问题
CSS子元素从父元素继承属性，但是并不总是按此方式工作。Netscape 4.0 浏览器无法理解继承，不过可以理解组选择器。因此添加使用分组选择器来处理旧式浏览器无法理解继承的问题。
同理，需要摆脱对父元素的继承，可针对HTML元素添加CSS规则。
5、常用CSS选择器
①派生选择器
通过依据元素在其位置的上下文关系来定义样式，简洁标记。
head部分css代码：li strong { font-style: italic; }
body部分HTML代码：<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
②id 选择器
为标有特定 id 的 HTML 元素指定特定的样式，以 "#" 来定义。id 属性只能在每个 HTML 文档中出现一次。
head部分css代码：#green {color:green;}
body部分HTML代码：<p id="green">这个段落是绿色。</p>
id 选择器常常用于建立派生选择器，可以被使用很多次。#sidebar p {…}花括号内的样式只会应用于出现在 id 是 sidebar 的元素内的p元素。
③类选择器
为标有特定 class 的 HTML 元素指定样式，以 点号来显示。类名的第一个字符不能使用数字，无法在 Mozilla 或 Firefox 中起作用。
head部分css代码：.center {text-align: center}
body部分HTML代码：<p class="center">这个段落是绿色。</p>
class 也可被用作派生选择器，元素也可以基于它们的类而被选择。
.fancy td{color: #f60;} 类名为 fancy 的更大的元素内部的表格单元都会以显示橙色文字。
td.fancy{color: #f60;} 类名为 fancy 的表格单元将是橙色。
④属性选择器
对带有指定属性的 HTML 元素设置样式。（在 IE6 及更低的版本中，不支持属性选择。）选择器以中括号包围指定属性定义，如【title】{…}
1）属性和值选择器
单个值：[title=W3School]{border:5px solid blue;} 为 title="W3School" 的所有元素设置样式
多个值：[title~=hello] { color:red; } 适用由空格分隔的属性值，为title属性值包含hello的所有元素设置样式
[lang|=en] { color:red; } 适用于由连字符分隔的属性值，……
2）设置表单的样式
属性选择器在为不带有 class 或 id 的表单设置样式时特别有用。input[type="text"]{……}
6、插入css样式表
①外部样式表 <head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head>
适用于将样式应用于很多页面时，可以通过改变一个文件来改变整个站点的外观。浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。
注意：不要在属性值与单位之间留有空格。在 Mozilla/Firefox 或 Netscape 中却无法正常工作。
②内部样式表 <head><style type="text/css">p {margin-left: 20px;}</head>
适用于单个文档需要特殊的样式时。
③内联样式 <p style="color: sienna; margin-left: 20px">This is a paragraph</p>
适用于样式仅需要在一个元素上应用一次时，慎用。相关标签内使用style属性（包含任何 CSS 属性）。
④多重样式的继承
某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。
二、css样式
1、css背景
CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。所有背景属性都不能继承。
①背景色—— background-color
这个属性接受任何合法的颜色值。可以为所有元素设置背景色。background-color 不能继承，其默认值是 transparent。
②背景图像—— background-image
如果需要设置一个背景图像，必须为这个属性设置一个 URL 值：body {background-image: url(/i/eg_bg_04.gif);}
background-image 属性的默认值是 none，表示背景上没有放置任何图像。可为段落或行内元素等设置背景图像。
③背景图像重复——background-repeat
属性值 repeat 导致图像在水平垂直方向上都平铺（默认做法），repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺（默认背景图像从一个元素的左上角开始）。
④背景定位—— background-position
用于改变图像在背景中的位置。为background-position 属性提供值有很多方法。
1)关键字 top、bottom、left、right 和 center
位置关键字可以按任何顺序出现，只要保证不超过两个关键字 ：一个对应水平方向，另一个对应垂直方向。如果只出现一个关键字，则认为另一个关键字是 center。
2）百分数值
百分数值同时应用于元素和图像。图像中心与其元素的中心对齐。如果图像位于 0% 0%，其左上角将放在元素内边距区的左上角。如果只提供一个百分数值，所提供的这个值将用作水平值，垂直值将假设为 50%。
3）长度值
长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角，从一个左上角到另一个左上角。
⑤背景关联—— background-attachment
文档比较长时，当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。声明图像相对于可视区是固定的（fixed）来防止这种滚动。
background-attachment 属性的默认值是 scroll（背景会随文档滚动）。
2、css文本
CSS 文本属性可定义文本的外观，包括改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进等。
css文本属性
1）缩进文本 —— text-indent属性
① 所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。用于将段落的首行缩进。
一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素和图像之类的替换元素上。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。如果想把一个行内元素的第一行“缩进”，可以用左内边距或外边距创造这种效果。
②text-indent 设置为负值，实现悬挂缩进。
注意：如果对一个段落设置了负值，那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题，建议针对负缩进再设置一个外边距或一些内边距：p {text-indent: -5em; padding-left: 5em;}
③text-indent 可以使用所有长度单位，包括百分比值。
百分数要相对于缩进元素父元素的宽度。即如果将缩进值设置为 20%，所影响元素的第一行会缩进其父元素宽度的 20%。
④text-indent 属性可以继承。div#inner {text-indent: 10%;}
2）水平对齐——text-align
①影响一个元素中的文本行互相之间的对齐方式。值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中，默认值是 left。
将块级元素或表元素居中，要通过在这些元素上适当地设置左、右外边距来实现。
②text-align:center 与 <CENTER>区别
<CENTER> 不仅影响文本，还会把整个元素居中。text-align 不会控制元素的对齐，而只影响内部内容。元素本身不会从一段移到另一端，只是其中的文本受影响。
③两端对齐text-align:justify
文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。
3）字间隔——word-spacing 属性
改变字（单词）之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值，那么字之间的间隔就会增加。为 word-spacing 设置一个负值，会把它拉近。
4）字母间隔——letter-spacing 属性
字母间隔修改的是字符或字母之间的间隔。属性可取值包括所有长度。默认关键字是 normal（这与 letter-spacing:0 相同）。输入的长度值会使字母之间的间隔增加或减少指定的量。
5）字符转换——text-transform 属性
用于处理文本的大小写。这个属性有 4 个值：
none 对文本不做任何改动
uppercase 将文本转换为全大写
lowercase 将文本转换为全小写
capitalize 只对每个单词的首字母大写
6）文本装饰—— text-decoration 属性
none 关闭原本应用到一个元素上的所有装饰
underline 对元素加下划线，就像 HTML 中的 U 元素一样
overline 在文本的顶端画一个上划线
line-through 在文本中间画一个贯穿线，等价于 HTML 中的 S 和 strike 元素
blink 让文本闪烁
两个不同的装饰都与同一元素匹配，胜出规则的值会完全取代另一个值。因为 text-decoration 值会替换而不是累积起来。
7）处理空白符——white-space 属性
影响浏览器处理字之间和文本行之间的空白符的方式。默认的 XHTML 处理已经完成了空白符处理：它会把所有空白符合并为一个空格。white-space 值可以应用到任何元素。
white-space 属性值
8）文本方向——direction 属性
影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对齐元素中最后一行的位置。
对于行内元素，只有当 unicode-bidi 属性设置为 embed 或 bidi-override 时才会应用 direction 属性。
direction 属性有两个值：ltr 和 rtl。大多数情况下，默认值是 ltr，显示从左到右的文本。如果显示从右到左的文本，应使用值 rtl。
3、字体
CSS 字体属性定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）。
css字体属性
1）css字体系列
通用字体系列 - 拥有相似外观的字体系统组合（比如 "Serif" 或 "Monospace"）
特定字体系列 - 具体的字体系列（比如 "Times" 或 "Courier"）
2）指定字体系列
使用 font-family 属性 定义文本的字体系列。也可以为给定的元素指定一系列类似的字体。需要把这些字体按照优先顺序排列，然后用逗号进行连接。
只有当字体名中有一个或多个空格（比如 New York），或者如果字体名包括 # 或 $ 之类的符号，才需要在 font-family 声明中加引号（单引号或双引号）。如果把一个 font-family 属性放在 HTML 的 style 属性中，则需要使用该属性本身未使用的那种引号
3）字体风格——font-style 属性
最常用于规定斜体文本，该属性有三个值：
normal - 文本正常显示
italic - 文本斜体显示
oblique - 文本倾斜显示
斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。
4）字体变形——font-variant 属性
可以设定小型大写字母。小型大写字母不是一般的大写字母，也不是小写字母，这种字母采用不同大小的大写字母。p {font-variant:small-caps;}
5）字体加粗——font-weight 属性
设置文本的粗细，使用 bold 关键字可以将文本设置为粗体。如果将元素的加粗设置为 bolder，浏览器会设置比所继承值更粗的一个字体加粗。与此相反，关键词 lighter 会导致浏览器将加粗度下移而不是上移。
关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100 对应最细的字体变形，900 对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold。
6）字体大小——font-size 属性设置文本的大小。
不应当通过调整文本大小使段落看上去像标题，或者使标题看上去像段落。始终使用正确的 HTML 标题，比如使用 <h1> - <h6> 来标记标题，使用 <p> 来标记段落。
font-size 值可以是绝对或相对值。
绝对值：
将文本设置为指定的大小；
不允许用户在所有浏览器中改变文本大小（不利于可用性）；
绝对大小在确定了输出的物理尺寸时很有用。
相对大小：
相对于周围的元素来设置大小；
允许用户在浏览器改变文本大小。
①使用像素来设置字体大小
通过像素设置文本大小，可以对文本大小进行完全控制。
②使用 em 来设置字体大小
可避免在 Internet Explorer 中无法调整文本的问题。浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。使用 em 单位，则可以在所有浏览器中调整文本大小。
③结合使用百分比和 EM
在所有浏览器中均有效的方案是为 body 元素（父元素）以百分比设置默认的 font-size 值。
4、CSS 链接
能够设置链接样式的 CSS 属性有很多种（例如 color, font-family, background 等等）。链接的特殊性在于能够根据它们所处的状态来设置它们的样式。
1）链接的四种状态：
a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻
注：当为链接的不同状态设置样式时，请按照以下次序规则：a:hover 必须位于 a:link 和 a:visited 之后。a:active 必须位于 a:hover 之后。
2）常见的链接样式
①文本修饰——text-decoration 属性大多用于去掉链接中的下划线
②背景色——background-color 属性规定链接的背景色
5、CSS 列表
不是描述性的文本的任何内容都可以认为是列表。
CSS 列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志。要影响列表的样式，最简单（同时支持最充分）的办法就是改变其标志类型。
css列表属性
1）列表项的标志 —— list-style-type属性
ul {list-style-type : square}修改用于列表项的标志类型
取值：disc（默认）、square、none、circle
2）列表项图像—— list-style-image 属性
ul li {list-style-image : url(xxx.gif)}对标志使用一个图像
3）列表标志位置—— list-style-position属性
标志出现在列表项内容之外&内容内部
4）简写列表样式——list-style属性
li {list-style : url(example.gif) square inside}
将列表样式属性合并为一个方便的属性，list-style 的值可以按任何顺序列出，而且这些值都可以忽略。只要提供了一个值，其它的就会填入其默认值。
5）有序列表更改列表项标记——list-style-type属性
取值：decimal（数字）、lower-roman（小写罗马数字）、upper-roman（大写罗马数字）、lower-alpha（小写字母）、upper-alpha（大写字母）
6、CSS 表格
css表格属性
1）表格边框——border 属性
此时表格具有双线条边框。这是由于 table、th 以及 td 元素都有独立的边框。如果需要把表格显示为单线条边框，请使用 border-collapse 属性。
2）折叠边框——border-collapse 属性设置是否将表格边框折叠为单一边框。
3）表格宽度和高度—— width 和 height 属性定义表格的宽度和高度。
4）表格文本对齐——text-align 和 vertical-align 属性
设置表格中文本的对齐方式，text-align 属性设置水平对齐方式，比如左对齐、右对齐或者居中。vertical-align 属性设置垂直对齐方式，比如顶部对齐、底部对齐或居中对齐。
5）表格内边距——padding 属性
如需控制表格中内容与边框的距离，请为 td 和 th 元素设置 padding 属性。
6）表格颜色——background-color
7）空单元格是否显示——empty-cells属性
如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 empty-cells 属性。
7、CSS 轮廓
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。CSS outline 属性规定元素轮廓的样式、颜色和宽度。
CSS 边框属性
注释：如果规定了 !DOCTYPE，则 IE8 支持 outline 属性。轮廓线不会占据空间，也不一定是矩形。
outline 简写属性在一个声明中设置所有的轮廓属性。顺序设置如下：outline-color outline-style outline-width 如果不设置其中的某个值，也不会出问题。在 outline-color 属性之前声明 outline-style 属性。元素只有获得轮廓以后才能改变其轮廓的颜色。
三、css框模型
1、框模型概述
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。
背景应用于由内容和内边距、边框组成的区域。
内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。
增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸（撑开）。
提示：内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。外边距可以是负值，而且在很多情况下都要使用负值的外边距。
不要给元素添加具有指定宽度的内边距，而是将内边距或外边距添加到元素的父元素和子元素。因为不同的浏览器对width组成定义不同。
2、css内边距padding
CSS padding 属性定义元素边框与元素内容之间的空白区域。
1）属性接受长度值或百分比值，但不允许使用负值。
可按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值。padding-top padding-right padding-bottom padding-left
简写为p{padding: 1px 2px 1px 2px;}
2）百分比值
百分数值是相对于其父元素的 width 计算的，与外边距一样。如果父元素的 width 改变，padding也会改变。
注意：上下内边距与左右内边距一致，即上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度。
3、CSS 边框border
元素的边框就是围绕元素内容和内边据的一条或多条线。每个边框有规定元素 3 个方面：宽度、样式，以及颜色。
css边框属性
1）边框与背景
CSS 规范指出，边框绘制在“元素的背景之上”。因为有些边框是“间断的”（例如，点线边框或虚线框），元素的背景应当出现在边框的可见部分之间。元素的背景是内容、内边距和边框区的背景（大多数浏览器都遵循 ）。
2）边框样式 ——border-style 属性
如果没有样式，将根本没有边框。
CSS 的 border-style 属性定义了 10 个不同的非 inherit 样式，包括 none。a:link img {border-style: outset;}
①多边样式 p.aside {border-style: solid dotted dashed double;}
值采用了 top-right-bottom-left 的顺序，为类名为 aside 的段落定义了四种边框样式：实线上边框、点线右边框、虚线下边框和一个双线左边框。
②单边样式 border-top-style border-right-style border-bottom-style border-left-style
p {border-style: solid; border-left-style: none;} 必须把单边属性放在简写属性之后，否则单边属性被覆盖。
3）边框的宽度—— border-width 属性
为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em；或者使用 3 个关键字之一，它们分别是 thin 、medium（默认值） 和 thick（无具体宽度）。
①单边宽度 border-top-width border-right-width border-bottom-width border-left-width
简写按照 top-right-bottom-left 的顺序设置元素的各边边框。
②没有边框
如果边框样式为 none，即边框根本不存在，那么边框就不可能有宽度，因此边框宽度自动设置为 0。由于 border-style 的默认值是 none，如果希望边框出现，就必须声明一个边框样式。
4）边框颜色—— border-color 属性
一次可以接受最多 4 个颜色值，按照 top-right-bottom-left 的顺序，颜色值小于 4 个，值复制就会起作用。上下边框复制，左右边框复制。
默认的边框颜色是元素本身的前景色。如果没有为边框声明颜色，它将与元素的文本颜色相同。另一方面，如果元素没有任何文本，假设它是一个表格，其中只包含图像，那么该表的边框颜色就是其父元素的文本颜色（因为 color 可以继承）。这个父元素很可能是 body、div 或另一个 table。
①单边颜色 border-top-color border-right-color border-bottom-color border-left-color
②透明边框 border-color: transparent;
利用 transparent，使用边框就像是额外的内边距一样；此外，能在需要的时候使其可见。这种透明边框相当于内边距，因为元素的背景会延伸到边框区域。
4、CSS 外边距
1）CSS margin 属性
设置外边距的最简单的方法就是使用 margin 属性。margin 属性默认值为0，接受任何长度单位，可以是像素、英寸、毫米或 em。margin 可以设置为 auto。更常见的做法是为外边距设置长度值，接受任何长度单位、百分数值甚至负值。
简写时按照 top-right-bottom-left 的顺序，百分数是相对于父元素的 width 计算的。
2）值复制
如果缺少左外边距的值，则使用右外边距的值。
如果缺少下外边距的值，则使用上外边距的值。
如果缺少右外边距的值，则使用上外边距的值。
3）单边外边距 margin-top margin-right margin-bottom margin-left
提示：Netscape 和 IE 对 body 标签定义的默认边距（margin）值是 8px。而 Opera 将内部填充（padding）的默认值定义为 8px。
5、CSS 外边距合并
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
1）
垂直合并：第一个元素的下外边距与第二个元素的上外边距会发生合并。
2）
当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。
3）外边距可以与自身发生合并。这就是一系列的段落元素占用空间非常小的原因，因为它们的所有外边距都合并到一起，形成了一个小的外边距。
假设一个空元素，无边框或填充，如下合并
遇到另一个元素的外边距，它还会发生合并
四、CSS定位
1、定位概述
定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
css定位属性
1）一切皆为框——display 属性改变生成的框的类型
块框：div、h1 或 p 元素等块级元素显示为一块内容。
行内框：span 和 strong 等“行内元素”内容显示在行中。
无名块框：没有进行显式定义的情况下创建块级元素。把一些文本添加到一个块级元素（比如 div）的开头，即使没有把这些文本定义为段落，它也会被当作段落对待。（块级元素的文本行）
2）CSS 定位机制
CSS 有三种基本的定位机制：普通流（默认）、浮动和绝对定位。
普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。
3）CSS position 属性
position 属性值的含义：
static 元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative 元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute 元素框从文档流完全删除，并相对于其包含块定位。
fixed 元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
2、相对定位
如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
#box_relative {position: relative; left: 30px; top: 20px;}
3、绝对定位
设置为绝对定位的元素框从文档流完全删除，并相对于其包含块（可能是文档中的另一个元素或者是初始包含块）定位。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
普通流中其它元素的布局就像绝对定位的元素不存在一样。绝对定位可能覆盖页面上的其它元素，通过设置 z-index 属性来控制这些框的堆放次序。
绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
4、浮动
1）浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘
框 1 向左浮动时脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2
包含框无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”
2）CSS float 属性
float 属性定义元素在哪个方向浮动。任何元素都可以浮动，浮动元素会生成一个块级框，无论它本身是何种元素。如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
属性值和描述：
left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit 规定应该从父元素继承 float 属性的值。
3）CSS 浮动问题——行框和清理
浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。
创建浮动框可以使文本围绕图像。
阻止行框围绕浮动框，需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。
①方法一：对段落增加margin-top
段落的上外边距（margin-top）上添加足够的空间，使元素的顶边缘垂直下降到浮动框下面
②方法二：在包围容器中新增空元素且清理它
假设希望让一个图片浮动到文本块的左边，并且图片和文本包含在另一个具有背景颜色和边框的元素中。
当图片向左浮动，文本块向右浮动时，出现问题：包围图片和文本的 div 不占据空间。如何让包围元素在视觉上包围浮动元素呢？需要在这个包围元素内的某个地方应用 clear，但是没有现有的元素可以应用清理，所以我们只能添加一个空元素并且清理它。
.clear {clear: both; }
<div class="clear"></div>
③方法三：对容器 div 进行浮动
但是下一个元素会受到这个浮动元素的影响。为了解决这个问题，有些人选择对布局中的所有东西进行浮动，然后使适当的有意义的元素（常常是站点的页脚）对这些浮动进行清理。这有助于减少或消除不必要的标记。
4）CSS clear 属性
clear 属性规定元素的哪一侧不允许其他浮动元素。
值 描述
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。
五、CSS 选择器
1、元素选择器
p {color:gray;}
如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身。
元素选择器又称为类型选择器（type selector）。类型选择器匹配文档语言元素类型的名称。类型选择器匹配文档树中该元素类型的每一个实例。
2、选择器分组
1）h1, h2, h3, h4, h5, h6 {color:blue;}
将选择器放在规则左边，用逗号分隔，其右边的样式（color:blue;）将应用到这几个选择器所引用的元素。逗号告诉浏览器，规则中包含N个不同的选择器。
2）通配符选择器 * {color:red;}
CSS2 引入了一种新的简单选择器 - 通配选择器（universal selector），显示为一个星号（*）。该选择器可以与任何元素匹配，就像是一个通配符。这个声明等价于列出了文档中所有元素的一个分组选择器。
3）声明分组 h1 {font: 28px Verdana; color: white; background: black;}
既可以对选择器进行分组，也可以对声明分组。对声明分组，一定要在各个声明的最后使用分号，这很重要。浏览器会忽略样式表中的空白符（和换行符）。
一般结合选择器和声明分组
3、类选择器
1）基础语法 .important {color:red;}（点号+HTML元素的class值）
类选择器允许以一种独立于文档元素的方式来指定样式。可以单独使用，也可以与其他元素结合使用。
只有适当地标记文档（将类选择器的样式与元素关联，将 HTML元素的class 指定为一个适当的值）后才能使用这些选择器，所以使用这两种选择器通常需要先做一些构想和计划。要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器。
2）类选择器结合元素选择器 p.important {color:red;}
选择器现在会匹配 class 属性包含 important 的所有 p 元素，但是其他任何类型的元素都不匹配，不论是否有此 class 属性。
3）CSS 多类选择器
在 HTML 中，一个 class 值中可能包含一个词列表，各个词之间用空格分隔。<p class="important warning">This paragraph is a very important warning.</p>
可使用类选择器单独为class为important或warning的元素设置样式，也可把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）。
如果一个多类选择器包含类名列表中没有的一个类名，匹配就会失败。
4、ID选择器
1）语法 *#intro {font-weight:bold;}
ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。与类选择器一样，ID 选择器中可以忽略通配选择器。 ID 选择器引用HTML元素 id 属性中的值。
2）id选择器与类选择器的区别
在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次。ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表。
有些情况下，知道文档中会出现某个特定 ID 值，但是并不知道它会出现在哪个元素上，所以想声明独立的 ID 选择器。此时可匹配到所有含此id的元素。
注意，类选择器和 ID 选择器可能是区分大小写的。
5、属性选择器
属性选择器可以根据元素的属性及属性值来选择元素。一般同其他选择器结合使用。
1）简单属性选择器 a[href] {color:red;}
希望选择有某个属性的元素，不论属性值是什么，可以使用简单属性选择器。
还可以根据多个属性进行选择（同时满足多个属性），只需将属性选择器链接在一起即可。 a[href][title] {color:red;}
属性选择器在 XML 文档中相当有用，因为 XML 语言主张要针对元素和属性的用途指定元素名和属性名。
2）进一步缩小选择范围，只选择有特定属性值的元素
与简单属性选择器类似，可以把多个属性-值选择器链接在一起来选择一个文档。
a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}
要求：属性与属性值必须完全匹配，如果属性值包含用空格分隔的值列表，匹配就可能出问题。
3）根据部分属性值选择
p[class~="important"] {color: red;}
部分值属性选择器与点号类名记法的区别：
p.important 和 p[class="important"] 应用到 HTML 文档时是等价的。那么，为什么还要有 "~=" 属性选择器呢？因为它能用于任何属性，而不只是 class。
4）子串匹配属性选择器
参考上图
5）特定属性选择类型
*[lang|="en"] {color: red;} 上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。
6、后代选择器
后代选择器（descendant selector）又称为包含选择器，可以选择作为某元素后代的元素。
1）语法解释 h1 em {color:red;}
根据上下文选择元素，使样式在某些文档结构中起作用，而在另外一些结构中不起作用。
在后代选择器中，规则（样式）左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。每个空格结合符可以解释为“... 在 ... 找到”、“... 作为 ... 的一部分”、“... 作为 ... 的后代”，但是要求必须从右向左读选择器。
2）具体应用
假设有一个文档，其中有一个边栏，还有一个主区。边栏的背景为蓝色，主区的背景为白色，这两个区都包含链接列表。不能把所有链接都设置为蓝色，因为这样一来边栏中的蓝色链接都无法看到。
注意：后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的。
7、子元素选择器
h1>strong {color:red;} 子结合符（大于符号）两边可以有空白符，这是可选的。
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。不可隔代
结合后代选择器和子选择器 table.company td > p
8、相邻兄弟选择器
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
h1 + p {margin-top:50px;} 相邻兄弟选择器使用了加号（+），即相邻兄弟结合符（Adjacent sibling combinator）。
注释：与子结合符一样，相邻兄弟结合符旁边可以有空白符。用一个结合符只能选择两个相邻兄弟中的第二个元素。
相邻兄弟结合符还可以结合其他结合符：html > body table + ul {margin-top:20px;} 选择紧接在 table 元素后出现的所有兄弟 ul 元素，该 table 元素包含在一个 body 元素中，body 元素本身是 html 元素的子元素。
9、伪类(Pseudo-classes)
CSS 伪类用于向某些选择器添加特殊的效果。
1)伪类的语法
selector : pseudo-class {property: value}
CSS 类也可与伪类搭配使用： selector.class : pseudo-class {property: value}
2）锚伪类
在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
a:hover 必须被置于 a:link 和 a:visited 之后，a:active 必须被置于 a:hover 之后，才是有效的。伪类名称对大小写不敏感。
3）CSS2 - :first-child 伪类
使用 :first-child 伪类来选择元素的第一个子元素。
作为第一个元素的元素包括第一个 p、第一个 li 和 strong 和 em 元素。
p:first-child {font-weight: bold;}将作为某元素第一个子元素的所有 p 元素设置为粗体
li:first-child {text-transform:uppercase;}将作为某个元素（在 HTML 中，这肯定是 ol 或 ul 元素）第一个子元素的所有 li 元素变成大写。
p:first-child i{ color:blue; }选择器匹配所有作为元素的第一个子元素的 <p> 元素中的所有 <i> 元素
注释：必须声明 <!DOCTYPE>，这样 :first-child 才能在 IE 中生效。
4）CSS2 - :lang 伪类
:lang 伪类可为不同的语言定义特殊的规则。
body部分：<p>文字<q lang="no">段落中的引用的文字</q>文字</p>
q:lang(no){ quotes: "~" "~" } :lang 类为属性值为 no 的 q 元素定义引号的类型。
10、伪元素(Pseudo-elements)
CSS 伪元素用于向某些选择器设置特殊效果。
1）语法
selector:pseudo-element {property:value;}
CSS 类也可以与伪元素配合使用：
selector.class:pseudo-element {property:value;}
可以结合多个伪元素来使用。
2）:first-line 伪元素
"first-line" 伪元素用于向文本的首行设置特殊样式。
注释："first-line" 伪元素只能用于块级元素。可应用于 "first-line" 伪元素的属性：font、color、background、word-spacing、letter-spacing、text-decoration、vertical-align、text-transform、line-height、clear
3）:first-letter 伪元素
"first-letter" 伪元素用于向文本的首字母设置特殊样式。
注释："first-letter" 伪元素只能用于块级元素。可应用于 "first-letter" 伪元素的属性font、color、background、margin、padding、border、text-decoration、vertical-align (仅当 float 为 none 时)、text-transform、line-height、float、clear
4）CSS2 - :before 伪元素
":before" 伪元素可以在元素的内容前面插入新内容。
5）CSS2 - :after 伪元素
":after" 伪元素可以在元素的内容之后插入新内容。
六、CSS高级样式
1、CSS 水平对齐
对齐块元素（占据全部可用宽度的元素，并且在其前后都会换行）
1）margin属性
把左和右外边距设置为 auto，规定的是均等地分配可用的外边距，结果就是居中的元素。如果宽度是 100%，则对齐没有效果。
注释：除非已经声明了 !DOCTYPE，否则使用 margin:auto 在 IE8 以及更早的版本中是无效的。
2）position属性
position:absolute; 使用绝对定位（绝对定位元素会被从正常流中删除，并且能够交叠元素。）
当像对齐元素时，对 <body> 元素的外边距和内边距进行预定义可以避免在不同的浏览器中出现可见的差异。
注释：当使用 position 属性时，请始终设置 !DOCTYPE 声明。
3）float属性
当使用 float 属性时，IE8 以及更早的版本存在一个问题。如果省略 !DOCTYPE 声明，那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。这似乎是为滚动条预留的空间。当使用 float 属性时，请始终设置 !DOCTYPE 声明。
2、CSS 尺寸 (Dimension)
CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。
图像高度、宽度均支持像素值和百分比，行间距支持像素值、百分比和数字。
3、分类 (Classification)
CSS 分类属性允许你规定如何以及在何处显示元素。
4、导航栏= 链接列表
导航栏需要标准的 HTML 作为基础，因此使用 <ul> 和 <li> 元素是非常合适的。
list-style-type:none - 删除圆点。导航栏不需要列表项标记。
1）垂直导航栏
display:block - 把链接显示为块元素可使整个链接区域可点击（不仅仅是文本），同时也允许我们规定宽度。
需要规定 宽度,因为块元素默认占用全部可用宽度。
2）水平导航栏
使用行内或浮动列表项两种方法，如果希望链接拥有相同的尺寸，就必须使用浮动方法。
①行内列表项
构建水平导航栏的方法之一是将 <li> 元素规定为行内元素
display:inline; <li> 元素是块元素。在这里，我们去除了每个列表项前后的换行，以便让它们在一行中显示。
②对列表项进行浮动
为了让所有链接拥有相等的宽度，浮动 <li> 元素并规定 <a> 元素的宽度：
li{float:left;} 使用 float 来把块元素滑向彼此。
a{display:block;width:60px;}
5、图片库
CSS 可用来创建图片库。
图片链接盒子浮动排列，其中text-align：center
6、图片透明
1）定义透明效果
IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度。opacity 属性能够设置的值从 0.0 到 1.0。值越小，越透明。
IE8 以及更早的版本使用滤镜 filter:alpha(opacity=x)。x 能够取的值从 0 到 100。值越小，越透明。
2）图像透明度——hover效果
img:hover{opacity:1.0;filter:alpha(opacity=100);}当指针移动到图像上时，图像不透明。
3）图像透明框中的文本
创建一个 div 元素 (class="background")，设置高度和宽度、背景图像，以及边框。然后在第一个 div 内创建稍小的 div (class="transbox")，有固定的宽度、背景色和边框 - 并且它是透明的。在透明 div 内部，在 p 元素中加入文本。
7、媒介类型
媒介类型(Media Types)允许你定义以何种媒介来提交文档。文档可以被显示在显示器、纸媒介或者听觉浏览器等等。
媒介类型名称对大小写不敏感
@media screen{p.test {font-family:verdana,sans-serif; font-size:14px}}
@media 规则使你有能力在相同的样式表中，使用不同的样式规则来针对不同的媒介。
8、注意事项和总结
Internet Explorer Behaviors
Internet Explorer 5 引入了行为 (behaviors)。behaviors 是一种通过使用 CSS 向 HTML 元素添加行为的方法。只有 Internet Explorer 支持 behavior 属性。因此需要使用 JavaScript 和 HTML DOM 取而代之。
接下来学习：JavaScript XHTML HTML5 css3
网友评论