CSS3：为内容设置样式
text-align属性用于指定文本块的对齐方式，可选值包括：
1）start：内容对齐开始边界，默认；
2）end：内容对齐结束边界；
3）left：内容左对齐；
4）right：内容右对齐；
5）center：内容居中对齐；
6）justify：内容两端对齐。
当text-align属性使用了justify值时，可以使用text-justify属性指定文本添加空白的方式，这个属性的可选值如下；
1）auto：浏览器选择对齐规则，注意不同浏览器的呈现方式有细微差别；
2）none：禁用文本对齐；
3）inter-word：空白分布在单词之间，适用于英语等词间有空的语言；
4）inter-ideograph：空白分布在单词、表意字之间，且文本两端对齐，适用于汉语、日语和韩文等语言；
5）inter-cluster：空白分布在单词、字形集的边界，适用于泰文等无词间空格的语言；
6）distribute：空白分布在单词、字形集的边界，但连续文本或者草体除外；
7）kashida：通过拉长选定字符调整对齐方式（仅适用于草体）。
当浏览器遇到多个空格时，会将它们压缩为一个空格；换行符、制表符等会被直接忽略。
使用whitespace属性可以指定空白字符的处理方式，允许的取值如下：
1）normal：默认值，空白符别压缩，文本行自动换行；
2）nowrap：空白符被压缩，文本行不换行；
3）pre：空白符被保留，文本只在遇到换行符的时候换行；
4）pre-line：空白符被压缩，文本会在一行排满或遇到换行符时换行；
5）pre-wrap：空白符被保留，文本会在一行排满或遇到换行符时换行。
指定文本方向
direction属性用于设置文本方向，允许的取值包括：
1）ltr：从左到右；
2）rtl：从右到左。
指定单词、字母、行之间的间距
相关的属性包括：
letter-spacing：设置字母之间的间距；
word-spacing：设置单词之间的间距；
line-height：设置行高。
属性的值可以为normal或指定的数值，line-height可以指定百分比。
word-wrap属性告诉浏览器当一个单词的长度超出包含块的宽度时如何处理，可选值包括：
1）normal：单词不断开，即使无法完全放入包含块元素；
2）break-word：断开单词，使其放入包含块元素。
text-indent属性用于指定文本块首行缩进，值为长度值或百分比。
text-decoration属性用于装饰文本，可选的值包括：
1）none：定义标准的文本，默认；
2）underline：定义文本下的一条线；文
3）overline：定义文本上的一条线；
4）line-through：定义穿过文本下的一条线；
5）blink：定义闪烁的文本；
6）inherit：定义应该从父节点继承。
大小写转换
text-transform属性用于为文本转换大小写，可选值包括：
1）none：定义带有小写字母和大写字母的标准的文本；
2）capitalize：文本中的每个单词以大写字母开头；
3）uppercase：定义仅有大写字母；
4）lowercase：定义无大写字母，仅有小写字母；
5）inherit：继承。
text-shadow属性可以为文本块应用阴影效果，可选值包括：
1）h-shadow：阴影的水平偏移；
2）v-shadow：阴影的垂直偏移；
3）blur：阴影的模糊程度，可选；
4）color：阴影的颜色。
font-family属性指定使用的字体，值按照优先级排列，浏览器从字体表中的第一种开始尝试，直到发现合适的字体为止。
为了防止指定的字体在用户电脑上不存在，CSS定义了几种任何情况下都可以使用的通用字体，下面是这些通用字体：
1）serif：示例为Times
2）sans-serif：示例为Helvetica
3）cursive：示例为Zapf-Chancery
4）fantasy：示例为Western
5）monospace：示例为Courier
padding: 5
background-color:
font-family: &HelveticaNeue Condensed&,
这里指定了HelveticaNeue Condensed字体，如果该字体不存在，则使用monospace字体。
设置字体大小
font-size用于指定字体大小，可选值为：
1）xx-small、x-small、small、medium、large、x-large和xx-large：字体大小从小到大，具体大小由浏览器决定；
2）smaller、larger：相对于元素默认字体大小；
3）：使用CSS长度值精确设置字体大小；
4）&%&：将字体大小表示为父元素字体大小的百分数。
设置字体粗细
font-weight属性设置字体粗细，可选择为：
1）normal：默认值，标准字符；
2）bold：定义粗体字符；
3）bolder：定义更粗的字符；
4）lighter：定义更细的字符；
5）100～900（都是百为单位的整数）：定义由细到粗的字符，400等同于normal，而700等同于bold；
设置字体样式
font-style属性用于为字体设置样式，可选值为：
1）normal：默认值，浏览器显示一个标准的字体样式；
2）italic：浏览器会显示一个斜体的字体样式；
3）oblique：浏览器会显示一个倾斜的字体样式；
CSS字体的问题是用户机器上可能并未安装你想使用的字体，使用Web字体可以解决这个问题，我们可以直接Web字体并使用在自己的页面上，而不需要用户做什么。使用@font-face指定Web字体：
@font-face {
font-family: 'MyFont';
font-style:
font-weight:
src: url('http://titan/listings/MyFont.woff');
你可以在网上下载现成的字体包，例如：Font Squirrel。
font属性是设置字体的简写属性，格式如下；
元素的前景色和透明度
使用color属性可以设置元素的前景色，opacity属性设置颜色的透明度。
font-size: x-
background-color:
color: rgba(255, 255, 255, 0.7);
opacity: 0.4;
设置表格样式
设置边框处理样式
border-collapse属性用于设置相邻单元格的边框处理样式：
1）separate：默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性；
2）collapse：如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性；
处理空单元格
empty-cells属性告诉如何处理空单元格：
1）hide：不在空单元格周围绘制边框；
2）show：在空单元格周围绘制边框，默认。
设置标题的位置
table元素的caption默认会显示在表格的顶部，可以使用caption-side属性改变这种默认行为：
1）top：顶部，默认值；
2）bottom：底部。
指定表格布局
table-layout属性决定了浏览器显示表格采用的方法，支持的值包括：
1）auto：默认，浏览器会根据表格每一列中最宽的单元格设置整列单元格的宽度，这意味着在确定页面布局之前，浏览器必须获取所有的表格内容；
2）fixed：表格的大小由表格自身和单独每列的width值设定，如果没有列宽值可用，浏览器会设置等距离的列宽，因此，只要获取了一行的数据，浏览器就可以确定列宽，其他行内的数据会自动换行以适应宽度。
设置列表样式
设置列表标记类型
list-style-type属性用来设置标记的样式，允许值如下：
1）none：没有标记；
2）box、check、circle、diamond、disc、dash、square：使用指定形状标记；
3）decimal：使用十进制数字作为标记；
4）binary：使用二进制数作为标记；
5）lower-alpha：使用小写字母字符作为标记；
6）upper-alpha：使用大写字母字符作为标记。
使用图像作为列表标记
list-style-image属性可以将图像用作列表标记。
list-style-image: url('banana-vsmall.png');
设置列表标记的位置
list-style-position属性可以指定标记相对于li元素内容框的位置。支持的值如下：
1）inside：标记位于内容框的内部；
2）outside：标记位于内容框外部。
li.inside {
list-style-position:
li.outside {
list-style-position:
background-color:
list-style属性是设置列表样式的简写方式，格式如下：
list-style:
设置光标样式
cursor属性用来改变光标的外形，支持的值如下：
1）auto：默认，浏览器设置的光标；
2）crosshair：光标呈现为十字线；
3）default：默认光标（通常是一个箭头）；
4）help：此光标指示可用的帮助（通常是一个问号或一个气球）；
5）move：此光标指示某对象可被移动；
6）pointer：光标呈现为指示链接的指针（一只手）；
7）progress：表示正在处理中；
8）text：此光标指示文本；
9）wait：此光标指示程序正忙（通常是一只表或沙漏）；
10）n-resize：此光标指示矩形框的边缘可被向上（北）移动；
11）s-resize：此光标指示矩形框的边缘可被向下移动（南）；
12）e-resize：此光标指示矩形框的边缘可被向右（东）移动；
13）w-resize：此光标指示矩形框的边缘可被向左移动（西）；
14）ne-resize：此光标指示矩形框的边缘可被向上及向右移动（北/东）；
15）nw-resize：此光标指示矩形框的边缘可被向上及向左移动（北/西）；
16）se-resize：此光标指示矩形框的边缘可被向下及向右移动（南/东）；
17）sw-resize：此光标指示矩形框的边缘可被向下及向左移动（南/西）。
&span style=&cursor:progress&&
Auto&/span&
&span style=&cursor:crosshair&&
Crosshair&/span&
&span style=&cursor:default&&
Default&/span&
&span style=&cursor:pointer&&
Pointer&/span&
&span style=&cursor:move&&
Move&/span&
&span style=&cursor:e-resize&&
e-resize&/span&
&span style=&cursor:ne-resize&&
ne-resize&/span&
&span style=&cursor:nw-resize&&
nw-resize&/span&
&span style=&cursor:n-resize&&
n-resize&/span&
&span style=&cursor:se-resize&&
se-resize&/span&
&span style=&cursor:sw-resize&&
sw-resize&/span&
&span style=&cursor:s-resize&&
s-resize&/span&
&span style=&cursor:w-resize&&
w-resize&/span&
&span style=&cursor:text&&
text&/span&
&span style=&cursor:wait&&
wait&/span&
&span style=&cursor:help&&
help&/span&
(window.slotbydup=window.slotbydup || []).push({
id: '2467140',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467141',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467143',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467148',
container: s,
size: '1000,90',
display: 'inlay-fix'3. 父元素和子元素
本文所属图书&>&
本书自第1版至今，一直是讲解HTML和CSS入门知识的经典畅销书，全面系统地阐述HTML5和CSS3基础知识以及实际运用技术，通过大量实例深入浅出地分析了网页制作的方方面面。最新第8版不仅介绍了文本、图像、链接、列&&
如果一个元素包含另一个元素，它就是被包含元素的父元素，被包含元素称为子元素。子元素中包含的任何元素都是外层的父元素的后代（参见图1.3.7）。这种类似家谱的结构是HTML 代码的关键特性，它有助于在元素上添加样式（从第7 章开始讨论）和应用Script 行为（不在本书介绍范围）。
值得注意的是， 当元素中包含其他元素时，每个元素都必须嵌套正确，也就是子元素必须完全地包含在父元素中。使用结束标签时，前面必须有跟它成对的开始标签。换句话说，先开始元素1，再开始元素2，就要先结束元素2，再结束元素1（参见 图1.3.8）。
您对本文章有什么意见或着疑问吗？请到您的关注和建议是我们前行的参考和动力&&
(window.slotbydup=window.slotbydup || []).push({
id: '2467141',
container: s,
size: '1000,90',
display: 'inlay-fix'
您的浏览器不支持嵌入式框架，或者当前配置为不显示嵌入式框架。
(window.slotbydup=window.slotbydup || []).push({
id: '2467142',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467143',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467148',
container: s,
size: '1000,90',
display: 'inlay-fix'