Maison > Article > interface Web > CSS 基本知识_html/css_WEB-ITnose
CSS 基本知识_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-24 11:25:502394parcourir
1、CSS 简介
CSS 指层叠样式表 (Cascading Style Sheets)，是一种用来表现 HTML 文档样式的语言，样式定义如何显示 HTML 元素，是能够真正做到网页表现与结构分离的一种样式设计语言。样式通常存储在样式表中，外部样式表通常存储在 CSS 文件中，多个样式定义可层叠为一。
HTML 标签被设计为用于定义文档内容，也就是文档结构，为了增强代码的可读性，实现网页结构与表现相分离的原则，万维网联盟（W3C），肩负起了 HTML 标准化的使命，并在 HTML4 之外创造出样式（Style）。CSS 目前最新版本是 CSS3，相对于传统 HTML 的表现而言，CSS 能够对网页中对象的位置排版进行像素级的精确控制，拥有对网页对象编辑的能力，易于维护和改版，提高页面浏览速度，使用 CSS 布局页面更符合 W3C 标准，他是目前基于文本展示最优秀的表现设计语言。
CSS 样式表极大地提高了工作效率：样式通常保存在外部的 .css 文件中，通过仅仅编辑一个简单的 CSS 文档，外部样式表有能力同时改变站点中所有页面的布局和外观。
2、CSS 语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。如下：
1 p{2 color:red;3 text-indent:2em;4 } 选择器就是需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成，属性是设置的样式属性（style attribute），每个属性都有一个值，属性和值用冒号分隔。CSS 声明总是以分号 ; 结束，声明组以大括号 {...} 括起来。为了让 CSS 可读性更强，可以每行只描述一个属性。
CSS 注释是用来解释代码，并且可以随意编辑，浏览器会忽略它。CSS注释以 "/*" 开始，以 "*/" 结束。如下：
1 p{2 color:red;3 text-indent:2em; /* 段落缩进2个字，即段落开头空2个汉字的位置。 */4 } 3、创建 CSS
当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。CSS 创建样式表有三种方法：内联样式、内部样式、外部样式。
(1)、内联样式
内联样式也叫行内样式或者行间样式，即在相关标签内使用样式（style）属性定义。如下：
<div style="width:200px;height:100px;border:1px solid black;"></div>
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。因此需要慎用这种方法，例如当样式仅需要在一个元素上应用一次时，可以使用内联样式。要使用内联样式，需要在相关的标签内使用样式属性定义，style 属性可以包含任何 CSS 属性。
(2)、内部样式
内部样式也叫内嵌样式，即在文档中创建内嵌的样式表，需要使用 如下：
1 <head> 2 <style> 3 div{ 4 width:200px; 5 height:100px; 6 border:1px solid black; 7 } 8 p{ 9 color:blue;10 font-size:14px;11 }12 span{13 color:black;14 font-weight:bold;15 }16 </style>17 </head> 当单个文档需要特殊的样式时，就应该使用内部样式表。
(3)、外部样式
外部样式也叫做外联样式，即使用 标签链接到外部样式表，如下：
1 <head>2 <link rel="stylesheet" type="text/css" href="css/style.css">3 </head>
当样式需要应用于很多页面时，外部样式表将是理想的选择，在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表，浏览器会从文件 style.css 中读到样式声明，并根据它来格式化文档。注意： 标签中 rel="stylesheet" type="text/css" 是固定代码格式，不可更改。
外部样式表可以在任何文本编辑器中进行编辑，样式文件不能包含任何的 HTML 标签，样式表以 .css 扩展名进行保存。注意：不要在属性值与单位之间留有空格。假如你使用 "margin-left: 20 px" 而不是 "margin-left: 20px" ，那么它在不同的浏览器中可能无法正常工作，导致意向不到的结果。
(4)、样式优先级
样式优先级，也可以称为层叠次序，即同一个 HTML 元素不止被一个样式定义时，会优先使用哪个样式。一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中：
内联样式 > 内部样式 > 外部样式
内联样式（在 HTML 元素内部）拥有最高的优先权，即优先采用在元素内部定义的样式信息，然后是内部样式表（位于 标签内部），最后是外部样式表中的样式声明，浏览器中的样式声明（缺省值）同外部样式处于同一层次。
优先级的顺序是有一个前提的，即内联样式、内部样式、外部样式表中 CSS 样式是在的相同权值的情况下。
但是内部样式 > 外部式也有一个前提，即内部样式的位置一定在外部样式的后面。如下：
1 <link rel="stylesheet" type="text/css" href="css/style.css">2 <style>3 ...4 </style>
(5)、多重样式
样式表允许以多种方式规定样式信息，样式可以规定在单个的 HTML 元素中，或在 HTML 页的 元素中，亦或在一个外部的 CSS 文件中，甚至可以在同一个 HTML 文档内部引用多个外部样式表，但是最终多重样式将被层叠为一个。那就意味着：如果你使用了外部文件的样式，在 中也定义了该样式，那么内部样式会取代外部文件中的样式。
4、id 和 class 选择器
如果要给 HTML 元素设置 CSS 样式，则需要在元素中设置 "id" 和 "class" 属性，该属性用作选择器。
(1)、id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式，id 属性和身份证一样具有唯一性。HTML元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以 "#" 来定义。注意： id 属性不能以数字开头。
1 <head> 2 <style> 3 #heading{ 4 color:red; 5 text-align:center; 6 } 7 </style> 8 </head> 9 <body>10 <h1 id="heading">CSS 选择器</h1>11 </body>
(2)、class 选择器
class 选择器用于描述一组元素的样式，也叫做类选择器，class 选择器有别于 id 选择器，class 可以在多个元素中使用，并且一个元素也可以指定多个类名。class 选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点 "." 号来定义。可以设置所有带有指定 class 的 HTML 元素，也可以指定特定的 HTML 元素使用 class。注意：类名的第一个字符也不能使用数字。
实例：所有拥有 center 类的 HTML 元素均为居中显示。
1 <head> 2 <style> 3 .center{ 4 text-align:center; 5 } 6 .col{ 7 color:red; 8 } 9 .font{10 font-size:18px;11 font-family:"Microsoft YaHei";12 }13 </style>14 </head>15 <body>16 <h1 class="center">class 选择器</h1>17 <p class="center col">我是一个段落。</p>18 <p class="center font">我是另一个段落。</p>19 </body>
实例：所有的 p 元素使用 class="center"，让该元素的文本居中。
1 <head> 2 <style> 3 .center{ 4 color:blue; 5 } 6 p.center{ 7 text-align:center; 8 } 9 p.col{10 color:red;11 }12 .font{13 font-size:18px;14 font-weight:bold;15 font-family:"Microsoft YaHei";16 }17 </style>18 </head>19 <body>20 <h1 class="center col">class 选择器</h1>21 <p class="center col">我是一个段落。</p>22 <p class="center col font">我是另一个段落。</p>23 <h2 class="center">h2 标题</h2>24 </body>
(3)、ID 选择器和类（class）选择器的区别
相同点：可以应用于任何元素。
不同点：
①、ID 选择器只能在文档中使用一次。与类选择器不同，在一个 HTML 文档中，ID 选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
②、可以使用类选择器词列表方法为一个元素同时设置多个样式。在一个 HTML 文档中，可以为一个元素同时设置多个样式，但只可以用类选择器的方法实现，ID 选择器是不可以的，不能使用 ID 词列表，即一个元素可以指定多个类名，如 文本，而 ID 只能指定一个。
5、CSS 元素选择器
最常见的 CSS 选择器就是元素选择器，即标签选择器，也就是说 HTML 的元素就是最基本的选择器。
如果使用元素选择器设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 body、h1、p、a，也可以是 html 本身。
在 W3C 标准中，元素选择器也叫做类型选择器，类型选择器匹配文档中元素类型的名称，类型选择器匹配文档树中该元素类型的每一个实例，也就是如果使用元素选择器，比如 h1{color:red;}，他会匹配文档中所有的 h1 元素，即页面上所有的 h1 标题都显示为红色。
6、CSS 背景
background 属性用于定义 HTML 元素的背景。
定义元素背景效果的 CSS 属性有以下五种：
①：background-color
②：background-image
③：background-repeat
④：background-position
⑤：background-attachment
(1)、background-color：背景颜色
background-color 属性定义了元素的背景颜色。页面的背景颜色可以使用 body 元素选择器进行定义：
1 body{2 background-color:gray;3 }
CSS 中，颜色值通常使用以下方式定义：
①：十六进制，如："#ff0000"，类似这样的形式，可以缩写为："#f00"。
②：RGB，如："rgb(255,0,0)"。
③：颜色名称，如："red"。
(2)、background-image：背景图像
background-image 属性描述了元素的背景图像。默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体，页面背景图片设置如下：
1 body{2 background-image:url('images/wallpaper.jpg');3 }
(3)、background-repeat：背景图像设置水平或垂直平铺或不平铺
默认情况下，background-image 属性会在页面的水平或者垂直方向平铺。一些图像如果在水平方向与垂直方向平铺，这样看起来很不协调，如果图像只在水平方向平铺 (repeat-x), 页面背景会更好些：background-repeat:repeat-x，定义垂直方向平铺语法：background-repeat:repeat-y。
在使用背景图像时，默认会平铺重复显示，这样不仅不具有美感，还会影响文本的排版。如果不想让图像平铺，并且只显示一次，那么就这样定义：background-repeat:no-repeat。
1 <head> 2 <style> 3 body{ 4 background-image:url('images/wallpaper.jpg'); 5 background-repeat:no-repeat; 6 } 7 </style> 8 </head> 9 <body>10 <h1 class="center col">class 选择器</h1>11 <p class="center col">我是一个段落。</p>12 <p class="center col font">我是另一个段落。</p>13 <h2 class="center">h2 标题</h2>14 </body>
(4)、background-position：背景图像设置定位
在上面的例子中，背景图像与文本显示在同一个位置，这样不利于文本的阅读，为了让页面排版更加合理，可以利用 background-position 属性改变图像在背景中的位置：
1 body{2 background-image:url('images/wallpaper.jpg');3 background-repeat:no-repeat;4 background-position:right top;5 } 此时，背景图像会显示在页面的右上角。background-position 属性设置背景图像的位置，如果背景图像要重复，也将从这一点开始。
background-position 属性值可以使用关键字表示：left | right | center，如果仅指定一个关键字，其他值将会是 "center"。该方法可能的值的有：left top、left center、left bottom、right top、right center、right bottom、center top、center center、center bottom。
background-position 属性值也可以使用百分比表示：x％y％，默认值为：0％0％，第一个值是水平位置，第二个值是垂直位置。左上角是 0％0％，右下角是 100％100％。如果仅指定了一个值，其他值将是 50％。
background-position 属性值还可以使用长度单位精确表示，单位可以是像素或任何其他 CSS 单位，通常都使用像素。第一个值是水平位置，第二个值是垂直位置，左上角是 0 0，两个数值之间用空格隔开，例如：background-position:12px 24px; 表示背景图片距离该元素左上角的水平方向位置是 12px，垂直方向位置是 24px。该属性就是图像左上角相对于元素左上角的位置偏移，如果取负值，则向上向左偏移。该方法在制作 CSS 雪碧图（即 CSS Sprite，也叫做 CSS 精灵）时，将十分重要。
(5)、background-attachment：背景图像设置固定或滚动
background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动，默认值是 scroll，背景图片随页面的其余部分滚动。如果需要设置图像不随着页面的其他部分滚动，那么属性值则使用 fixed，定义背景图像是固定的，如下：
1 <head> 2 <style> 3 body{ 4 height:2000px; 5 background-image:url('images/fix.gif'); 6 background-repeat:no-repeat; 7 background-attachment:fixed; 8 } 9 </style>10 </head>11 <body>12 <p>我是一个段落,我是一个段落</p>13 <p>我是一个段落,我是一个段落</p>14 <p>我是一个段落,我是一个段落</p>15 <p>我是一个段落,我是一个段落</p>16 <p>我是一个段落,我是一个段落</p>17 <p>我是一个段落,我是一个段落</p>18 <p>我是一个段落,我是一个段落</p>19 <p>我是一个段落,我是一个段落</p>20 <p>我是一个段落,我是一个段落</p>21 <p>我是一个段落,我是一个段落</p>22 <p>我是一个段落,我是一个段落</p>23 <p>我是一个段落,我是一个段落</p>24 <p>我是一个段落,我是一个段落</p>25 <p>我是一个段落,我是一个段落</p>26 <p>我是一个段落,我是一个段落</p>27 <p>我是一个段落,我是一个段落</p>28 <p>我是一个段落,我是一个段落</p>29 <p>我是一个段落,我是一个段落</p>30 <p>我是一个段落,我是一个段落</p>31 <p>我是一个段落,我是一个段落</p>32 <p>我是一个段落,我是一个段落</p>33 </body>
(6)、背景属性简写
在上面实例中，设置页面的背景效果时，通过很多的单个属性来进行定义，这样代码就显得很繁琐，为了简化这些属性的代码，可以将这些属性合并在同一个属性中，如下：
1 body{2 background:green url('images/fix.gif') no-repeat fixed 12px 24px;3 }
background 属于复合属性，也叫快捷属性，他可以简化代码，提高页面的运行效率，但是在使用 JS 时却不能使用复合属性来获取元素的样式，需要使用单个属性精确获取，如果一个元素定义了多个背景样式，那么使用复合属性获取，浏览器并不知道你到底需要哪个样式，就出错了。类似这样的复合属性还有：font、border、padding 和 margin 等。
当使用简写属性时，属性值的顺序依次为：
background-color --> background-image --> background-repeat --> background-attachment --> background-position
以上属性无需全部使用，可以按照页面的实际需要使用，比如只定义背景颜色，就可以这样设置：background:#90C;
7、CSS 文本格式
(1)、文本颜色
color 属性被用来设置文字的颜色，可以使用合理的背景颜色和文本颜色搭配，这样有利于提高文本的可读性。
1 <head> 2 <style> 3 body{ 4 background-color:#d5f3f4; 5 } 6 h1{ 7 color:#00c; /* color:#0000cc; */ 8 } 9 </style>10 </head>11 <body>12 <h1>文字颜色</h1>13 <p>可以使用合理的背景颜色和文本颜色搭配，这样有利于提高文本的可读性。</p>14 </body>
(2)、文本对齐方式
text-align 文本排列属性可以用来设置文本的水平对齐方式，文本可以居中或对齐到左或右，两端对齐。
该属性有4个值，默认值为 left，由浏览器决定，把文本排列到左边，即对齐到左。center 则为文本居中，right 为文本对齐到右边。
1 <head> 2 <style> 3 h1{ 4 text-align:center; 5 } 6 h3{ 7 text-align:right; 8 } 9 </style>10 </head>11 <body>12 <h1>标题 1 居中显示</h1>13 <h2>标题 2 居左默认显示</h2>14 <h3>标题 3 居右显示</h3>15 </body>
当 text-align 属性的值设置为 justify 时，则表示文本两端对齐，每一行将被展开为宽度相等，左、右外边距对齐，就像杂志和报纸那样，常应用于书刊杂志排版。在两端对齐文本中，文本行的左右两端都放在父元素的内边界上，然后，调整单词和字母间的间隔，使各行的长度恰好相等。那就是说对于英文这样定义是可以的，但是对于中文两端对齐支持并不是很好。解决办法就是再定义 text-justify 属性，将其值设置为 inter-ideograph，用表意文本来对齐内容，他增加或减少表意字和词间的空格。表意字顾名思义，就是字形有一定表达意思性的文字，汉字属于表意文字，他是文字萌芽时期的产物，是汉语形成历史中最早的一种文字。该属性值的默认值为 auto，让浏览器决定两端对齐算法。实例：
1 <head> 2 <style> 3 .part{ 4 color:red; 5 text-align:justify; 6 text-justify:inter-ideograph; 7 } 8 .p1{ 9 width:300px;10 }11 .p2{12 width:300px;13 }14 .p3{15 width:400px;16 }17 .p4{18 width:300px;19 }20 </style>21 </head>22 <body>23 <h1>text-align 实例</h1>24 <p class="part p1">当 text-align 属性的值设置为 justify 时，每一行将被展开为宽度相等，左、右外边距是对齐的，即文本两端对齐，如杂志和报纸那样。在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。也就是说对于英文这样定义就可以了，但是对于中文这样定义是不行的。解决办法就是使用 text-justify 属性。</p>25 <p class="part p2">当 text-align 属性的值设置为 justify 时,每一行将被展开为宽度相等,左,右外边距是对齐的,即文本两端对齐,如杂志和报纸那样.在两端对齐文本中,文本行的左右两端都放在父元素的内边界上.然后,调整单词和字母间的间隔,使各行的长度恰好相等.也就是说对于英文这样定义就可以了,但是对于中文这样定义是不行的.解决办法就是使用 text-justify 属性.</p>26 <p class="part p3">当 text-align 属性的值设置为 justify 时，每一行将被展开为宽度相等，左、右外边距是对齐的，即文本两端对齐，如杂志和报纸那样。在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。也就是说对于英文这样定义就可以了，但是对于中文这样定义是不行的。解决办法就是使用 text-justify 属性。</p>27 <p class="part p4">当属性的值设置为时，每一行将被展开为宽度相等，左、右外边距是对齐的，即文本两端对齐，如杂志和报纸那样。在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。也就是说对于英文这样定义就可以了，但是对于中文这样定义是不行的。解决办法就是使用属性。</p>28 </body> 上面的实例，有4段文本，都设置了两端对齐，前2段的宽度都为300像素，第一段使用全角的标点符号，而第二段使用了半角的标点符号，可以看到，标点符号会对布局对齐造成影响，2段文本的显示长度不一样，在 IE 中第一段显示为9行，而在 Chrome 和 FireFox 中第一段显示为10行，第二段均显示为9行，并且第二段使用半角标点符号，布局显得非常紧凑，毫无美感，不易阅读，而且可以很明显看到，这2段文本的字间距问题还是比较突出的，有的字之间相距很远，而有的字之间间隔很小，主要是因为使用了中英文混合文本，空格也会造成影响。默认情况下，大部分主流浏览器会避免让标点符号占据行首，这也是导致文本间间隔不均的原因，这些问题要想控制还是较为复杂的。第3段文本将宽度设置为400像素，文本两端对齐效果相对来说比较理想。最后一段文本宽度仍为300像素，但是将文本设置为纯中文，文本两端对齐效果很好。
综上所述，如果文本是中文，文本两端的对齐效果十分理想。如果文本是中英文混合的，通过适当的调整宽度，文本两端对齐效果相对来说比较理想，但对于宽度的调整可能会影响到整体布局，其实不调整宽度，显示效果也无伤大雅。如果文本的标点符号使用半角，或者半角和全角混合使用，那么文本两端对齐效果则相当糟糕。
text-justify 属性是 CSS3 版本中定义的属性，用于规定当 text-align 被设置为 justify 时的齐行方法，该属性指定如何对齐文本以及对齐间距，目前只有 IE 支持该属性，其他主流浏览器都不支持，如果不设置该属性，在 IE 中两端对齐则无效果，但是对于其他浏览器则无影响。该属性有多个值，除了上面提到的2个值之外，还有 none 禁用齐行。inter-word 通过增加/减少单词间的间隔对齐文本。inter-cluster 只对不包含内部单词间隔的内容进行排齐，比如亚洲语系。distribute 类似报纸版面，除了在东亚语系中最后一行是不齐行的。kashida 通过拉伸字符来排齐内容。
(3)、文本修饰
text-decoration 属性用来设置或删除文本的修饰。从设计角度来讲该属性主要是用来删除超链接的下划线，如下：
1 <head> 2 <style> 3 .a1{ 4 text-decoration:none; 5 } 6 </style> 7 </head> 8 <body> 9 <a href="#" target="_blank">默认带有下划线的超链接</a><br/><br/>10 <a class="a1" href="#" target="_blank">text-decoration:none; 删除超链接下划线</a>11 </body>
也可以使用其他值来设置文本的修饰，text-decoration:overline; 设置文本上划线。text-decoration:line-through; 设置文本中间划线。text-decoration:underline; 设置文本下划线。该属性还有一个值为 blink 定义闪烁的文本，但是所有浏览器都不支持。
1 <head> 2 <style> 3 .p1{ 4 text-decoration:overline; 5 } 6 .p2{ 7 text-decoration:line-through; 8 } 9 .p3{10 text-decoration:underline;11 }12 a{13 color:black;14 }15 </style>16 </head>17 <body>18 <p class="p1">text-decoration:overline; 定义文本上的一条线。</p>19 <p class="p2">text-decoration:line-through; 定义穿过文本的一条线。</p>20 <p class="p3">text-decoration:underline; 定义文本下的一条线。</p>21 22 <br/><br/><br/>23 <a href="#">设置文本下的一条线，会被混淆为超链接。</a>24 25 <p>设置穿过文本 和 文本下的一条线，类似于 HTML 标签，<del> del 元素定义已删除的文本</del> 和 <ins> ins 元素定义新插入的文本</ins>！</p>26 </body>
注意：给文本添加修饰，会给用户带来困扰，因此建议只将文本修饰属性用于清除超链接的下划线，其余值要慎用，特别是添加文本下的一条线，用户会误认为超链接，所以不要强调指出不是链接的文本，设置穿过文本和文本上的一条线，也常常会混淆用户，不明就里。
①、文本阴影
文本阴影是在 CSS3 中定义的一个文本修饰效果，text-shadow 属性应用于阴影文本。该属性有两个作用，产生阴影和模糊主体。
语法：text-shadow: x y shadow color;
该属性可以有4个值，其中前2个是必需的值，用来指定阴影的延伸距离，值为长度值，并且允许负值，其中 x 是水平阴影的偏移值，y 是垂直阴影的偏移值。最后2个值都是可选的，shadow 用于指定阴影的模糊值，即模糊效果的作用距离，不允许负值。color 指定阴影的颜色。
1 <head> 2 <style> 3 body{ 4 font-family:"Microsoft YaHei"; 5 } 6 .demo1{ 7 text-shadow:2px 2px #f00; 8 } 9 .demo2{10 text-shadow:2px 2px;11 }12 .demo3{13 text-shadow:2px 2px 10px #f00;14 }15 .demo4{16 color:white;17 text-shadow:2px 2px 4px #000;18 }19 .demo5{20 text-shadow:0 0 4px #f00;21 }22 </style>23 </head>24 <body>25 <p class="demo1">基本文字阴影效果</p>26 <p class="demo2">只定义2个必需值</p>27 <p class="demo3">文字阴影模糊效果</p>28 <p class="demo4">白色文本上的阴影</p>29 <p class="demo5">霓虹灯效果</p>30 <p class="demo5 demo4">霓虹灯效果</p>31 </body>
(4)、文本格式
①、文本缩进
文本缩进属性是用来指定文本的首行缩进，允许为负值，如果值是负数，第一行则向左缩进。从小学写作文写日记时，我们都知道每个段落的首行都必须空2个字的大小，也就是缩进2个字，那么在 CSS 中表示为：text-indent:2em，em 是相对文字大小的单位，1em 就是1个文字大小，2em 就是两个文字大小。也可以使用 % 定义基于父元素宽度的百分比的缩进，还可以以像素为单位设置缩进。
②、文本间距
文本间距即行高，就是文本行的高度。line-height 属性用于设置行高，不允许负值。属性值可以是长度单位，设置固定的行间距。也可以是数字，此数字会与当前的字体尺寸相乘来设置行间距。还可以用 % 设置基于当前字体尺寸的百分比行间距。
③、字间距
letter-spacing 和 word-spacing 这两个属性都可用来增加或减少文本间的空白，即字间距。不同的是：letter-spacing 属性设置字符间距，而 word-spacing 属性设置单词间距。属性值都为长度单位，定义文本间的固定间距，并允许负值。注意：word-spacing 属性对中文无效，因此在设置中文的字间距时请使用 letter-spacing 属性。
需要注意：letter-spacing 和 text-align:justify 是两个冲突的属性，不能同时使用，text-align:justify 是设置内容根据宽度自动调整字间距，使各行的长度恰好相等，实现文本两端对齐效果，而 letter-spacing 是指定一个固定的字间距，比如字与字之间相隔 8px，如果这两个属性同时使用，那么既要自动调整字间距，又要按指定的字间距排列，这就相互矛盾了，好比一个人既向左看的同时又向右看，那就神奇了，会出事的。
综合实例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>文本格式</title> 6 <style> 7 *{padding:0;margin:0;} 8 div{ 9 width:500px;10 margin:0 auto;11 background-color:lightgray;12 }13 h1{14 color:white;15 text-align:center;16 text-shadow:0 0 20px green;17 }18 h2{19 color:blue;20 text-align:right;21 margin:0 50px 10px 0;22 }23 p{24 text-indent:2em;25 line-height:1.5;26 letter-spacing:1px;27 margin:0 10px;28 }29 </style>30 </head>31 <body>32 <div id="" class="">33 <h1>匆匆</h1>34 <h2>作者: 朱自清</h2>35 <p>燕子去了，有再来的时候；杨柳枯了，有再青的时候；桃花谢了，有再开的时候。但是，聪明的，你告诉我，我们的日子为什么一去不复返呢？——是有人偷了他们罢：那是谁？又藏在何处呢？是他们自己逃走了罢：现在又到了哪里呢？</p><br/>36 <p>我不知道他们给了我多少日子；但我的手确乎是渐渐空虚了。在默默里算着，八千多日子已经从我手中溜去；像针尖上一滴水滴在大海里，我的日子滴在时间的流里，没有声音，也没有影子。我不禁头涔涔而泪潸潸了。</p><br/>37 <p>去的尽管去了，来的尽管来着；去来的中间，又怎样地匆匆呢？早上我起来的时候，小屋里射进两三方斜斜的太阳。太阳他有脚啊，轻轻悄悄地挪移了；我也茫茫然跟着旋转。于是——洗手的时候，日子从水盆里过去；吃饭的时候，日子从饭碗里过去；默默时，便从凝然的双眼前过去。我觉察他去的匆匆了，伸出手遮挽时，他又从遮挽着的手边过去，天黑时，我躺在床上，他便伶伶俐俐地从我身上跨过，从我脚边飞去了。等我睁开眼和太阳再见，这算又溜走了一日。我掩着面叹息。但是新来的日子的影儿又开始在叹息里闪过了。</p><br/>38 <p>在逃去如飞的日子里，在千门万户的世界里的我能做些什么呢？只有徘徊罢了，只有匆匆罢了；在八千多日的匆匆里，除徘徊外，又剩些什么呢？过去的日子如轻烟，被微风吹散了，如薄雾，被初阳蒸融了；我留着些什么痕迹呢？我何曾留着像游丝样的痕迹呢？我赤裸裸来到这世界，转眼间也将赤裸裸的回去罢？但不能平的，为什么偏要白白走这一遭啊？</p><br/>39 <p>你聪明的，告诉我，我们的日子为什么一去不复返呢？</p>40 </div>41 </body>42 </html>
④、文本空白处理
white-space 属性指定元素内的空白如何处理，默认值为 normal 空白会被浏览器忽略。该属性还有4个值，nowrap 文本不会换行，禁止换行，文本会在同一行上继续，直到遇到
标签为止。pre 空白会被浏览器保留，这种方式类似 HTML 中的 标签，用于定义预格式文本。pre-wrap 指定保留空白符序列，但是正常地进行换行。pre-line 指定合并空白符序列，但是保留换行符，并允许自动换行。
1 <head> 2 <style> 3 .p1{ 4 white-space:nowrap; 5 } 6 .p2{ 7 white-space:pre; 8 } 9 .p3{10 white-space:pre-wrap;11 }12 </style>13 </head>14 <body>15 <p class="p1">white-space:nowrap 指定文本不换行，直到遇到 <br> 标签。。<mark>1——</mark> 指定文本不换行，直到遇到 <br> 标签。。<mark>2——</mark> 指定文本不换行，直到遇到 <br> 标签。。<mark>3——</mark> 指定文本不换行，直到遇到 <br> 标签。。<mark>4——</mark> 指定文本不换行，直到遇到 <br> 标签。。<br/><mark>5——</mark> 指定文本不换行，直到遇到 <br> 标签。。16 </p>17 18 <p class="p2">19 white-space:pre20 空白会被浏览器保留，该方式类似 HTML 中的 <pre class="brush:php;toolbar:false"> 标签。21 white-space:pre 空白会被浏览器保留，该方式22 类似 HTML 中的 <pre class="brush:php;toolbar:false"> 标签。23 </p>24 25 <p class="p3">26 white-space:pre-wrap 保留空白符序列，但是正常地进行换行。<mark>1——</mark> 保 留 空 白 符 序 列，但 是 正 常 地 进 行 换 行。<mark>2——</mark> 保留 空白 符序列，但是 正常地 进行换行。<mark>3——</mark> 保 留 空 白 符 序 列，但 是 正 常 地 进行换行。27 </p>28 </body>
(5)、文本转换
text-transform 属性控制文本中的字母。文本转换属性是用来指定在一个文本中的大写和小写字母，可用于将所有字句变成大写或小写字母，或每个单词的首字母大写。
text-transform:capitalize; 定义文本中的每个单词以大写字母开头。text-transform:uppercase; 定义文本仅有大写字母。text-transform:lowercase; 定义文本仅有小写字母。
1 <head> 2 <style> 3 .p1{ 4 text-transform:capitalize; 5 } 6 .p2{ 7 text-transform:uppercase; 8 } 9 .p3{10 text-transform:lowercase;11 }12 </style>13 </head>14 <body>15 <p class="p1">this is some text. 单词以大写字母开头。</p>16 <p class="p2">this is some text. 仅有大写字母。</p>17 <p class="p3">This IS SOme Text. 仅有小写字母。</p>18 </body> 8、CSS 字体
font 属性可用于设置文本字体，定义样式，如加粗，大小等，属于复合属性，也叫做简写属性，可以在一个声明中设置所有字体属性。
当使用简写属性时，属性值的顺序依次为：
font-style --> font-variant --> font-weight --> font-size/line-height --> font-family
注意，font-size 和 font-family 的值是必需的，否则无效。如果缺少了其他值，浏览器将使用默认值。如下：
font:12px/1.5 Tahoma,Arial,Helvetica,"宋体",sans-serif;font:bold 14px/1.5 "Microsoft YaHei",Arial,Tahoma,sans-serif;
font:12px/1.5 表示：font-size:12px，line-height:1.5，即行高为 12px 的 1.5 倍，也就是 150%。
(1)、CSS 字体系列
font-family 属性设置文本的字体系列。应该始终为 font-family 属性设置多个字体名称作为一种 "后备" 机制，如果浏览器不支持第一种字体，则会尝试下一种字体。注意：如果字体系列的名称超过一个字，他必须用引号，如 font-family:"黑体"，中文是也需要加引号，如 font-family:"微软雅黑" font-family:"宋体"，英文字体名称可以不用加，如 font-family:Arial，但是如果字体名称为多个单词组合，避免浏览器解析时候把它解析成多个词汇，因此也需要加引号，如 font-family:"Microsoft YaHei"。引号可以是单引号，也可以是双引号。如下：
font-family:Arial,"Microsoft YaHei","黑体","宋体",sans-serif;font-family:Helvetica,'Microsoft Yahei','微软雅黑',Arial,sans-serif;
(2)、字体大小
font-size 属性用于设置文本的大小。文字的大小在网页设计中是非常重要的。但是，你不能通过调整字体大小使段落看上去像标题，或者使标题看上去像段落。因此必须规范使 HTML 标签，如 表示段落。 -
表示标题，
字体大小的值可以是绝对或相对的大小：
绝对大小：①：指定文字大小。②：不允许用户在所有浏览器中改变文字大小。③：确定了输出的物理尺寸时绝对大小很有用。
相对大小：①：相对于周围的元素来设置大小。②：允许用户在浏览器中改变文字大小。
字体的大小可以使用 px、em，% 和 em 组合来设置。
①、使用 px 设置字体大小
通过像素设置文本大小，可以对字体大小进行完全控制，虽然可以通过浏览器的缩放工具调整文本大小，但是，这种调整是整个页面，而不仅仅是文本。
②、使用 em 设置字体大小
em 是 W3C 推荐使用的尺寸单位，可以使用 em 代替 px。1em 等于当前的字体尺寸，在浏览器中默认的文字大小是 16px，因此，1em 的默认大小是 16px。可以通过下面这个公式将像素转换为 em：px/16=em
实例：
1 <head> 2 <style> 3 .p1{ 4 font-size:2.5em; /* 40px/16=2.5em */ 5 } 6 .p2{ 7 font-size:1.25em; /* 20px/16=1.25em */ 8 } 9 .p3{10 font-size:0.875em; /* 14px/16=0.875em */11 }12 </style>13 </head>14 <body>15 <p class="p1">我是第一个段落</p>16 <p class="p2">我是第二个段落</p>17 <p class="p3">我是最后一个段落</p>18 </p>19 </body> 上面的例子，文字大小设置为 em， 注释中是像素的转换，使用 em 单位，可以在所有浏览器中调整文本大小。
③、使用 % 和 em 组合设置字体大小
在所有浏览器的解决方案中，设置 元素的默认字体大小是 100%，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。
1 <head> 2 <style> 3 body{ 4 font-size:100%; 5 } 6 .p1{ 7 font-size:2.5em; /* 40px/16=2.5em */ 8 } 9 .p2{10 font-size:1.25em; /* 20px/16=1.25em */11 }12 .p3{13 font-size:0.875em; /* 14px/16=0.875em */14 }15 </style>16 </head>17 <body>18 <p class="p1">我是第一个段落</p>19 <p class="p2">我是第二个段落</p>20 <p class="p3">我是最后一个段落</p>21 </p>22 </body>
(3)、字体样式
CSS 的 font-style 属性主要用于指定斜体文字。
这个属性有三个值：
①：font-style:normal; 该值是默认值，浏览器显示一个标准的字体样式，正常正常显示文本。
②：font-style:italic; 定义斜体，浏览器斜体的字体样式。
③：font-style:oblique; 定义倾斜的文字，和斜体非常类似。
italic 和 oblique 区别：
这两个值都可以设置文本向右倾斜显示。一种字体有粗体、斜体、划线等多种字体属性，但是一些字体，或许只有正常体，并没有斜体，这时候就可以用 oblique 定义，他可以让没有斜体属性的文字倾斜，从 CSS 规范中就可以看出，italic 定义的是斜体，而 oblique 定义的是倾斜的文字，注意是倾斜的文字，而不是斜体字，这就是他们的区别。那么，如果一种字库中没有提供斜体字，当使用 italic 时，浏览器实际上是按 oblique 显示的。
(4)、字体加粗
font-weight 属性可用来设置字体的粗细，默认值为 normal 定义标准的字体。最常用的的值是 bold 定义粗体字体。bolder 定义更粗的字体。lighter 定义更细的字体。也可以使用数值指定，从 100 - 900 定义由细到粗的字体，100 对应最细的字体，900 对应最粗的字体，数值 400 等同于 normal，而 700 等同于 bold。
(5)、字体变形
font-variant 属性设置以小型大写字体或者正常字体显示文本。这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。该属性主要用于定义小型大写字母文本。默认值为 normal 浏览器会显示一个标准的字体。small-caps 浏览器会显示小型大写字母的字体。
1 <head> 2 <style> 3 .p1{ 4 font-variant:normal; 5 } 6 .p2{ 7 font-variant:small-caps; 8 } 9 </style>10 </head>11 <body>12 <p class="p1">Why are you so diao ?</p>13 <p class="p2">Why are you so diao ?</p>14 <p>Why are you so diao ?</p>15 </body> 9、CSS 链接
不同的链接可以设置不同的样式，设置链接样式可以用任何 CSS 属性（如 color，background，font 等），链接的特殊性在于能够根据它们所处的状态来设置它们的样式。
在所有浏览器中，链接的默认外观如下：
①：未被访问的链接带有下划线而且是蓝色的。
②：已被访问的链接带有下划线而且是紫色的。
③：活动链接带有下划线而且是红色的。
文本修饰属性 text-decoration:none 可用于删除链接中的下划线。
链接的四种状态是：
①：a:link - 正常，未访问过的链接。
②：a:visited - 已访问过的链接。
③：a:hover - 当鼠标滑动到链接上时。
④：a:active - 链接被点击的那一刻。
当为链接的不同状态设置样式时，必须遵循以下顺序规则：
①：a:hover 必须跟在 a:link 和 a:visited 后面。
②：a:active 必须跟在 a:hover后面。
在这四种状态中，最常被应用到的状态是 a:hover，:hvoer 是一个 CSS 伪类，在鼠标移动到元素上时添加的特殊样式，可用于所有元素，不只是链接，常被用来做鼠标滑过动画。当应用到链接上时，可以使用列表布局导航栏菜单，也叫选项卡，当鼠标移动到链接菜单上时，可以显示特殊的样式。
实例创建链接框：
1 <head> 2 <style> 3 *{padding:0;margin:0;font:bold 18px '微软雅黑';} 4 a{ 5 color:black; 6 background-color:green; 7 text-decoration:none; 8 display:block; 9 width:120px;10 padding:10px;11 margin:20px;12 text-align:center;13 }14 a:hover{15 color:white;16 background-color:lightgray;17 text-shadow:0 0 4px red;18 }19 </style>20 </head>21 <body>22 <a href="#" >CSS 基础知识</a>23 </body> 10、CSS 列表
从某种意义上讲，不是描述性的文本的任何内容都可以认为是列表，比如家谱、人口普查、太阳系，甚至你的所有朋友都可以表示为一个列表或者是列表的列表。由于列表如此多样，这使得列表相当重要，在 HTML 中，有两种类型的列表：①：无序列表 - 列表项标记用特殊图形，默认以小黑点样式显示。②：有序列表 - 列表项的标记默认以数字样式显示。
CSS 列表属性作用如下：①：设置不同的列表项标记。②：设置列表项标记为图像。
通过 CSS，可以列出进一步的样式，并可用图像作列表项标记。修改列表项标记使用 list-style-type，使用图像作为标记可以利用 list-style-image 属性完成。
(1)、无序列表项标记
无序列表可被用来做导航栏菜单，通常都需要隐藏无序列表项的标记，那么就使用 list-style-type:none，表示无标记。list-style-type 属性的默认值为 disc 实心圆，即小黑点。
1 <head> 2 <style> 3 ul{ 4 list-style-type:none; 5 } 6 </style> 7 </head> 8 <body> 9 <ul>10 <li>HTML 超文本标记语言</li>11 <li>CSS 层叠样式表</li>12 <li>JavaScript 赋予 HTML 动态交互</li>13 <li>jQuery 最好用的JS库</li>14 <li>Bootstrap 前端开发框架</li>15 </ul>16 </body>
无序列表除了可以无标记之外，还可以修改标记类型，如 circle 空心圆，square 实心方块。实例：
1 <head> 2 <style> 3 .ul1{ 4 list-style-type:circle; 5 } 6 .ul2{ 7 list-style-type:square; 8 } 9 </style>10 </head>11 <body>12 <ul class="ul1">13 <li>HTML 超文本标记语言</li>14 <li>CSS 层叠样式表</li>15 <li>JavaScript 赋予 HTML 动态交互</li>16 </ul>17 <ul class="ul2">18 <li>jQuery 最好用的JS库</li>19 <li>Zepto 兼容 jQuery 语法的移动端JS库</li>20 <li>Bootstrap 前端开发框架</li>21 </ul>22 </body>
(2)、有序列表项标记
有序列表项标记默认使用数字样式显示，即 list-style-type:decimal，也可以将标记项修改为其他类型，cjk-ideographic 则指定汉语数字(表意数字)作为标记。decimal-leading-zero 指定以0开头的数字作为标记，如 01, 02, 03, 等。lower-roman 指定以小写罗马数字作为标记，如 i, ii, iii, iv, v, 等。upper-roman 指定以大写罗马数字作为标记，如 I, II, III, IV, V, 等。lower-alpha 指定以小写英文字母作为标记。upper-alpha 指定以大写英文字母作为标记。
(3)、图像作为列表项标记
要指定列表项标记的图像，可以使用 list-style-image 属性，只需要简单地设置一个 url() 值，就可以将图像作为标记类型。
1 <head> 2 <style> 3 ul{ 4 list-style-image:url('images/ul-icon.jpg'); 5 } 6 </style> 7 </head> 8 <body> 9 <ul>10 <li>HTML 超文本标记语言</li>11 <li>CSS 层叠样式表</li>12 <li>JavaScript 赋予 HTML 动态交互</li>13 <li>jQuery 最好用的JS库</li>14 <li>Bootstrap 前端开发框架</li>15 </ul>16 </body>
(4)、列表项标记的位置
list-style-position 属性可以设置列表中列表项标记的位置。默认值为 outside 保持标记位于文本的左侧，列表项标记放置在文本以外，且环绕文本不根据标记对齐。inside 则指定列表项目标记放置在文本以内，且环绕文本根据标记对齐。如下：
1 <head> 2 <style> 3 .ul1{ 4 list-style-position:outside; 5 } 6 .ul2{ 7 list-style-position:inside; 8 } 9 li{10 margin:5px;11 border:2px solid red;12 }13 </style>14 </head>15 <body>16 <ul class="ul1">17 <li>HTML 超文本标记语言</li>18 <li>CSS 层叠样式表</li>19 <li>JavaScript 赋予 HTML 动态交互</li>20 <li>jQuery 最好用的JS库</li>21 <li>Bootstrap 前端开发框架</li>22 </ul>23 <ul class="ul2">24 <li>HTML 超文本标记语言</li>25 <li>CSS 层叠样式表</li>26 <li>JavaScript 赋予 HTML 动态交互</li>27 <li>jQuery 最好用的JS库</li>28 <li>Bootstrap 前端开发框架</li>29 </ul>30 </body> 在上面例子中，使用了2个无序列表，第一个列表项标记位置为默认，第二个列表项标记被放置在文本以内，为了增强演示效果，给每个列表项都设置外边距和边框，在浏览器中可以很直观的看到二者的不同，默认值的标记在边框外，而 inside 则在边框内，还有一点需要注意：在 Chrome 和 Firefox 中这两个值的标记位置与列表项之间的空白都是相等的，而在 IE 中可以很明显的看到，使用 inside 值后，标记位置与列表项之间的空白比默认值宽。
(5)、列表属性简写
在单个属性中可以指定所有的列表属性，可以将以上 3 个列表样式属性合并为一个方便的属性：list-style。
当使用简写属性时，属性值的顺序依次为：
list-style-type --> list-style-position --> list-style-image
可以不设置其中的某个值，比如 list-style:square inside 也是允许的，未设置的属性将使用默认值。
无序列表项的标记在隐藏时，使用简写属性，且考虑到浏览器的兼容性，可以定义为：list-style:none outside none; 或者不设置第三个值也好。
11、CSS 表格
使用 CSS 可以大大的提高 HTML 表格的外观。
(1)、表格边框
给表格设置边框，可以使用 CSS 的 border 属性定义，也可以使用表格标签的 border 属性定义。如下：
1 <head> 2 <style> 3 table,th,td{ 4 border:1px solid black; 5 } 6 </style> 7 </head> 8 <body> 9 <table>10 <tr>11 <th>粗粮</th>12 <th>蔬菜</th>13 <th>水果</th>14 </tr>15 <tr>16 <td>大豆</td>17 <td>黄瓜</td>18 <td>香蕉</td>19 </tr>20 <tr>21 <td>高粱</td>22 <td>菠菜</td>23 <td>柠檬</td>24 </tr>25 </table>26 </body>
注意，这样设置的表格具有双线条边框，这是由于 table、th 以及 td 元素都有独立的边框。为了显示一个单线条边框的表格，就使用 border-collapse 属性。
(2)、折叠边框
border-collapse 属性设置是否将表格边框合并为单一线条的边框。该属性的默认值为 separate 边框会分开显示，不会忽略 border-spacing 和 empty-cells 属性。collapse 如果可能，边框会合并为一个单一的边框，该值会忽略 border-spacing 和 empty-cells 属性，即设置这两个属性无效。如下：
1 <head> 2 <style> 3 table{ 4 border-collapse:collapse; 5 } 6 table,th,td{ 7 border:1px solid black; 8 } 9 </style>10 </head>11 <body>12 <table>13 <tr>14 <th>粗粮</th>15 <th>蔬菜</th>16 <th>水果</th>17 </tr>18 <tr>19 <td>大豆</td>20 <td>黄瓜</td>21 <td>香蕉</td>22 </tr>23 <tr>24 <td>高粱</td>25 <td>菠菜</td>26 <td>柠檬</td>27 </tr>28 </table>29 </body>
border-spacing 属性用于设置相邻单元格的边框间的距离，仅用于边框分离模式，即双线条边框表格。使用 px、cm 等单位指定距离，不允许使用负值。如果定义一个参数，那么定义的是水平和垂直间距。如果定义两个参数，那么第一个设置水平间距，而第二个设置垂直间距。
empty-cells 属性设置是否显示表格中的空单元格，仅用于边框分离模式，即双线条边框表格。该属性用于定义不包含任何内容的表格单元格如何显示，如果显示，就会绘制出单元格的边框和背景。该属性的默认值为 show 在单元格周围绘制边框，hide 不在单元格周围绘制边框。
除非表格的边框显示为双线条边框，否则这两个属性都无效。
1 <head> 2 <style> 3 .tab1{ 4 empty-cells:hide; 5 border-spacing:10px; 6 } 7 .tab2{ 8 border-spacing:20px 50px; 9 margin-top:20px;10 }11 </style>12 </head>13 <body>14 <table border="1" class="tab1">15 <tr>16 <th>粗粮</th>17 <th>蔬菜</th>18 <th>水果</th>19 </tr>20 <tr>21 <td></td>22 <td>黄瓜</td>23 <td></td>24 </tr>25 <tr>26 <td>高粱</td>27 <td></td>28 <td>柠檬</td>29 </tr>30 </table>31 <table border="1" class="tab2">32 <tr>33 <th>粗粮</th>34 <th>蔬菜</th>35 <th>水果</th>36 </tr>37 <tr>38 <td></td>39 <td>黄瓜</td>40 <td></td>41 </tr>42 <tr>43 <td>高粱</td>44 <td></td>45 <td>柠檬</td>46 </tr>47 </table>48 </body>
(3)、表格宽度和高度
width 和 height 属性定义表格的宽度和高度。
(4)、表格对齐
text-align 和 vertical-align 属性用于设置表格中文本的对齐方式。
①、text-align 属性设置水平对齐方式，比如左对齐，右对齐和居中。
②、vertical-align属性设置垂直对齐方式，比如顶部对齐，底部对齐或中间对齐。
vertical-align:top; 顶部对齐。vertical-align:middle; 中间对齐。vertical-align:bottom; 底部对齐。
caption-side 属性可以设置表格标题的位置，默认值为 top 将标题定位在表格之上，bottom 可以把表格标题定位在表格之下。
(5)、表格内边距
如果需要控制表格中内容与边框的距离，就应该增加内容的内边距，即为 td 和 th 元素设置 padding 属性。
(6)、表格颜色
可以为表格的边框指定边颜色，也可以为表头以及单元格指定背景颜色，还可以设置文本的颜色。
综合实例：
1 2 <style> 3 #tab{ 4 width:50%; 5 font-family:"微软雅黑"; 6 border-collapse:collapse; 7 } 8 #tab th,#tab td{ 9 border:1px solid #7AC942;10 padding:5px 10px;11 }12 #tab th{13 color:white;14 background-color:#9C3;15 font-size:1.125em;16 text-align:left;17 padding-top:4px;18 padding-bottom:8px;19 }20 #tab .list td{21 color:#000;22 background-color:#FFC;23 }24 caption{25 margin-bottom:10px;26 font-weight:bold;27 font-size:1.5em;28 }29 </style>30 31 32