基础教程
层叠次序
当同一个HTML元素被不止一个样式定义时，使用优先级如下所示（1优先级最高）：
1.内联样式（在HTML元素内部）
2.内部样式表（位于<head>标签内部）
3.外部样式表
4.浏览器缺省设置
基础语法
由两个主要部分构成：选择器，一条或多条声明
selector {property: value; property: value; ...}
高级语法
1.选择器的分组
h1,h2,h3,h4,h5,h6 {
color: green;
}
这样被分组的选择器可以分享相同的声明。
2.继承
body {
font-family: Verdana, sans-serif;
}
通过继承，子元素(如h, p, td, ul, ol)均将继承属性，但并不是所有的浏览器都支持。
在继承中通过自定义子元素属性可摆脱父元素的规则。
派生选择器
通过依据元素在其位置的上下文关系来定义样式
li strong {
font-style: italic;
font-weight: normal;
}
则只有li中的strong元素会有定义的属性。
id选择器 id
1.id选择器
为标有特定id的HTML元素制定特定的样式，id选择器以 # 来定义。
#red {color:red;}
#green {color:green;}
id属性只能在每个HTML文档中出现一次
2.id选择器和派生选择器
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
上面的样式只会应用于出现在 id 是 sidebar 的元素内的段落，这个元素很可能是 div 或者是表格单元。
不可以在内联元素 <span> 中嵌入 <p>
类选择器 class
类选择器以一个点号显示
.center {text-align: center}
和 id 一样，class 也可被用作派生选择器。
.fancy td {
color: #f60;
background: #666;
}
元素也可以基于它们的类而被选择：
td.fancy {
color: #f60;
background: #666;
}
属性选择器 title
1.属性选择器
[title]
{
color:red;
}
2.属性和值选择器
[title=W3School]
{
border:5px solid blue;
}
为title="W3School" 的所有元素设置样式。
3.属性和值选择器 - 多个值
[title~=hello] { color:red; }
为包含指定值的 title 属性的所有元素设置样式，适用于由空格分隔的属性值。
[lang|=en] { color:red; }
为带有包含指定值的 lang 属性的所有元素设置样式，适用于由连字符分隔的属性值。
创建
1.外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。<link> 标签在（文档的）头部。
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
样式
背景
1.背景色 background-color
p {background-color: gray;}
增加内边距padding使背景色块往外延伸。
2.背景图像 background-image
body {background-image: url(/i/eg_bg_04.gif);}
3.背景重复 backgound-repeat
在页面上对背景图像进行平铺
body
{
background-image: url(/i/eg_bg_03.gif);
background-repeat: repeat-y;
}
repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。
3.背景定位 background-position
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:center;
}
为属性提供值的方法：
- 使用关键字：top、bottom、left、right 和 center
- 使用长度值，如 100px 或 5cm
- 用百分数值
4.背景关联 background-attachment
body
{
background-image:url(/i/eg_bg_02.gif);
background-repeat:no-repeat;
background-attachment:fixed
}
通过这个属性，可以声明图像相对于可视区是固定的（fixed）。
文本
改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。
1.缩进 text-indent
p {text-indent: 5em;}
可以使用负值
可以使用百分比值
百分数要相对于缩进元素父元素的宽度。换句话说，如果将缩进值设置为 20%，所影响元素的第一行会缩进其父元素宽度的 20%。
可以继承
2.水平对齐 text-align
值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中。
注意：
text-align:center 与 <CENTER> 元素大不相同，<CENTER> 不仅影响文本，还会把整个元素居中。text-align 不会控制元素的对齐，而只影响内部内容。元素本身不会从一段移到另一端，只是其中的文本受影响。
3.字间隔 word-spacing
改变字（单词）之间的标准间隔
接受一个正长度值或负长度值。如果提供一个正长度值，那么字之间的间隔就会增加。为 word-spacing 设置一个负值，会把它拉近。
4.字母间隔 letter-spacing
与 word-spacing 的区别在于，字母间隔修改的是字符或字母之间的间隔。
5.字符转换 text-transform
处理文本的大小写
这个属性有 4 个值：
- none - 对文本不做任何改动
- uppercase - 将文本转换为全大写
- lowercase - 将文本转换为全小写
- capitalize - 只对每个单词的首字母大写
6.文本装饰 text-decoration
有5个值：
- none - 关闭原本应用到一个元素上的所有装饰
- underline - 对元素加下划线
- overline - 会在文本的顶端画一个上划线
- line-through - 在文本中间画一个贯穿
- blink - 让文本闪烁
7.处理空白符 white-space
影响用户代理对源文档中的空格、换行和 tab 字符的处理
- p {white-space: normal;}
使丢掉多余的空白符 - p {white-space: pre;}
空白符不会被忽略 - p {white-space: nowrap;}
防止元素中的文本换行，除非使用了一个 br 元素
8.CSS文本属性
color 设置文本颜色
direction 设置文本方向。
line-height | 设置行高。
letter-spacing 设置字符间距。
text-align 对齐元素中的文本。
text-decoration 向文本添加修饰。
text-indent 缩进元素中文本的首行。
text-shadow 设置文本阴影。
text-transform 控制元素中的字母。
unicode-bidi 设置文本方向。
white-space 设置元素中空白的处理方式。
word-spacing 设置字间距。
字体
定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）
CSS 字体系列
- 通用字体系列
Serif, Sans-serif, Monospace, Cursive, Fantasy - 特定字体系列
1.指定字体系列
用font-family定义
2.字体风格
用font-style定义
该属性有三个值：
- normal - 文本正常显示
- italic - 文本斜体显示
- oblique - 文本倾斜显示
3.字体变形
用font-variant定义
p {font-variant:small-caps;}
设定小型的大写字母。
4.字体加粗
用font-weight定义
使用 bold 关键字可以将文本设置为粗体
关键字 100 ~ 900 指定9 级加粗度。100 对应最细的字体变形，900 对应最粗的。数字 400 等价于 normal，而 700 等价于 bold。
5.字体大小
用font-size定义
可以使用 em 单位代替 pixels，1em 等于当前的字体尺寸，在设置字体大小时，em 的值会相对于父元素的字体大小改变。
链接
1.设置链接的样式
链接的四种状态：
- a:link - 普通的、未被访问的链接
- a:visited - 用户已访问的链接
- a:hover - 鼠标指针位于链接的上方
- a:active - 链接被点击的时刻
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 之后
2.常见的链接样式
text-decoration用于去掉链接中的下划线，两个值：none, underline。
列表
允许放置、改变列表项标志，或者将图像作为列表项标志。
列表类型
在一个无序列表中，列表项的标志 (marker) 是出现在各列表项旁边的圆点，通过下面的声明把无序列表中的列表项标志设置为方块：
ul {list-style-type : square}
空心圆：circle
罗马数字：upper-roman
字母：lower-alpha
列表项图像
ul li {list-style-image : url(xxx.gif)}
列表标志位置
ul{list-style-position:inside;}
简写列表样式
将以上属性合并为一个：
li {list-style : url(example.gif) square inside}
表格
设置表格用border属性
1.表格边框
为 table、th 以及 td 设置蓝色边框：
table, th, td
{
border: 1px solid blue;
}
具有双线条边框是由于 table、th 以及 td 元素都有独立的边框，如果需要把表格显示为单线条边框，使用 border-collapse 属性。
2.折叠边框
将表格边框折叠为单一边框：
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
3.表格宽度和高度
用width 和 height 属性定义表格的宽度和高度。
4.表格文本对齐
text-align 属性设置水平对齐方式，比如左对齐、右对齐或者居中。
vertical-align属性设置垂直对齐方式，比如顶部对齐、底部对齐或居中对齐。
5.表格内边距
用padding属性。
6.表格颜色
用border设置边框颜色。
用background-color设置背景颜色。
7.设置标题位置
caption
{
caption-side:bottom
}
...
<caption>This is a caption</caption>
轮廓
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
outline 在一个声明中设置所有的轮廓属性。
outline-color 设置轮廓的颜色。
outline-style 设置轮廓的样式。
outline-width 设置轮廓的宽度。
框模型
框模型概述
- 背景应用于由内容和内边距、边框组成的区域
- 内边距、边框和外边距都是可选的，默认值是零
- width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸
- 外边距可以是负值，而且在很多情况下都要使用负值的外边距
内边距
padding 简写属性。作用是在一个声明中设置元素的所内边距属性。
padding-bottom 设置元素的下内边距。
padding-left 设置元素的左内边距。
padding-right 设置元素的右内边距。
padding-top 设置元素的上内边距。
边框
1.边框样式
border-style定义了 10 个不同的非 inherit 样式:
- none 定义无边框。
- hidden 与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
- dotted 定义点状边框。在大多数浏览器中呈现为实线。
- dashed 定义虚线。在大多数浏览器中呈现为实线。
- solid 定义实线。
- double 定义双线。双线的宽度等于 border-width 的值。
- groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。
- ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。
- inset 定义 3D inset 边框。其效果取决于 border-color 的值。
- outset 定义 3D outset 边框。其效果取决于 border-color 的值。
- inherit 规定应该从父元素继承边框样式。
定义单边样式：
2.边框宽度
border-width
分别设置边框各边的宽度:
如果希望边框出现，就必须声明一个边框样式。
3.边框颜色
border-color
定义单边颜色：
外边距
1.margin
2.值复制
- 如果缺少左外边距的值，则使用右外边距的值。
- 如果缺少下外边距的值，则使用上外边距的值。
- 如果缺少右外边距的值，则使用上外边距的值。
3.单边外边距属性
外边距合并
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
定位
文档流是文档中可显示对象在排列时所占用的位置。
定位概述
position 属性
选择4种不同类型的定位，影响元素框生成的方式。
- absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
- fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
- relative 生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 - inherit 规定应该从父元素继承 position 属性的值。
其他：
-
overflow属性确定是否显示滚动条等行为：scroll 有滚动条；hidden 多出的内容被隐藏；visible 默认值，会溢出。 -
Z-index用于将一个元素放置于另一元素之后，默认为0，可取1，-1。
相对定位
设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。
绝对定位
绝对定位使元素的位置与文档流无关，因此不占据空间。
浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
浮动
选择器
通配符选择器
* {color:red;}
使文档中的每个元素都为红色
多类选择器
若class值包含多个词，则声明时应如下所示：
.important.warning {background:silver;}
...
<p class="important warning">
This paragraph is a very important warning.
</p>
通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）。
id选择器
- 用#号
- id不能重复
- 不允许有以空格分隔的词列表
- 大小写敏感
属性选择器
把包含标题（title）的所有元素变为红色，可以写作：
[title] {color:red;}
只对有 href 属性的锚（a 元素）应用样式：
a[href] {color:red;}
可以根据多个属性进行选择(同时存在)，只需将属性选择器链接在一起即可:
a[href][title] {color:red;}
可以根据具体属性值选择
a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}
子串匹配属性选择器
- [abc^="def"] 选择 abc 属性值以 "def" 开头的所有元素
- [abc$="def"] 选择 abc 属性值以 "def" 结尾的所有元素
- [abc*="def"] 选择 abc 属性值中包含子串 "def" 的所有元素
后代选择器
只对元素中指定样式应用样式：
h1 em {color:red;}
...
<h1>This is a <em>important</em> heading</h1>
子元素选择器
缩小范围，只选择某个元素的子元素
选择只作为 h1 元素子元素的 strong 元素：
h1 > strong {color:red;}
...
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响。
相邻兄弟选择器
选择紧接在另一个元素后的元素，而且二者有相同的父元素
h1 + p {margin-top:50px;color:red;}
...
<h1>This is a heading.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
只会选择到第一个p元素。
伪类
用于向某些选择器添加特殊的效果
对超链接使用:focus:
input:focus
{
background-color:yellow;
}
...
<input type="submit" value="Submit" />
首个子对象:first-child：
li:first-child {text-transform:uppercase;}
...
<ul>
<li>Intert Key</li>
<li>Turn key <strong>clockwise</strong></li>
<li>Push accelerator</li>
</ul>
则只会定义第一个li的内容。
语言:lang:
q:lang(no)
{
quotes: "~" "~"
}
...
<p>一些文本 <q lang="no">段落中的引用</q> 一些文本。</p>
则在“段落中的引用”两边会出现~符号。
伪元素
用于向某些选择器设置特殊效果
:first-line用于向文本的首行设置特殊样式
可应用于first-line 伪元素的属性：font / color / background / word-spacing / letter-spacing / text-decoration / vertical-align / text-transform / line-height / clear
:first-letter用于向文本的首字母设置特殊样式
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
可应用于 :first-letter 的属性: font / color / background / margin / padding / border / text-decoration / vertical-align (仅当 float 为 none 时)/ text-transform / line-height / float / clear
- 伪元素可以与 CSS 类配合使用
- 可以结合多个伪元素来使用
:before可以在元素的内容前面插入新内容
在每个 <h1> 元素前面插入一幅图片：
h1:before
{
content:url(logo.gif);
}
:after可以在元素的内容之后插入新内容
在每个 <h1> 元素后面插入一幅图片：
h1:after
{
content:url(logo.gif);
}
