学习目标
-
了解CSS的功能和作用，能够列举CSS的应用示例。
-
熟悉CSS的发展历史，能够厘清CSS1、CSS2和CSS3三者的关系
-
掌握CSS的样式规则，能够按照CSS样式规则正确书写CSS样式。
-
掌握CSS样式表的引入方式，能够在网页中引入CSS样式。
-
掌握CSS基础选择器的用法，能够使用CSS基础选择器设置差异化的网页样式。
-
掌握字体样式属性的用法，能够在网页中设置不同的字体样式。
-
掌握文本外观属性的用法，能够在网页中设置不同的文本样式。
-
熟悉列表样式属性的用法，能够清除网页中默认的列表项目符号。
-
了解CSS层叠性和继承性的特点，能够运用CSS层叠性和继承性优化网页代码结构。
-
掌握CSS优先级的特点，能够对CSS基础选择器进行优先级排序。
随着网页制作技术的不断发展，仅仅依靠HTML属性设置的样式已经无法满足网页设计的需求。CSS能够在不改变原有HTML结构的情况下实现更加丰富的样式效果，例如更多样的字体、更绚丽的图形动画等，这极大地满足了网页设计的需求。本章将主要讲解CSS3的基础知识。
3.1 CSS概述
3.1.1 认识CSS
CSS以HTML为基础，提供了丰富的样式效果，例如，字体、颜色、背景的控制以及网页整体的布局和排版等。
CSS非常灵活，既可以嵌入在HTML文件中，也可以是一个独立的外部文件。如果是独立的文件，则必须以.css为后缀名。
3.1.2 CSS的发展历史
20世纪90年代初，HTML语言的诞生，各种形式的修饰样式也随之出现。CSS发展至今主要出现了4个版本。
3.2 CSS基础
3.2.1 CSS样式规则
要想熟练地使用CSS对网页进行修饰，需要遵循CSS样式规则。
CSS样式规则具体格式:选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
在上面的样式规则中，选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。其中，属性和属性值以“键值对”的形式出现，用英文“:”连接，多个“键值对”之间用英文“;”进行区分。
h1：表示CSS样式作用的HTML对象为<h1>标签。
CSS代码结构的特点:
CSS样式中的选择器严格区分大小写，而声明不区分大小写，按照书写习惯一般采用小写书写选择器、声明。
多个声明之间必须用英文分号隔开，最后一个声明后的英文分号可以省略，但是为了便于增加新样式最好保留最后一个声明后的英文分号。
如果属性值由多个单词组成且中间包含空格，则必须为这个属性值添加英文引号。
p{font-family:"Times New Roman";}
可使用注释语句对CSS代码进行注释。CSS代码注释也不会显示在浏览器窗口中。
p{font-family:"Times New Roman";}
/* 这是CSS注释文本,有利于方便查找代码,此文本不会显示在浏览器窗口中 */
在CSS代码中空格是不被解析的，大括号以及分号前后的空格可有可无。因此可以使用Tab键、回车键对CSS代码进行排版，即所谓的格式化CSS代码，这样可以提高代码的可读性。
h1{
color:green; /* 定义颜色属性 */
font-size:14px; /* 定义字号属性 */
}
CSS代码的属性值和单位之间是不允许出现空格的，否则浏览器解析网页代码时会出错。
3.2.2 引入CSS样式表
要想使用CSS修饰网页，就需要在HTML文件中引入CSS样式表。引入CSS样式表的方式有4种，分别为行内式、内嵌式、链入式和导入式。
1.行内式
行内式也被称为内联样式，是通过标签的style属性来设置标签的样式。
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;">内容</标签名>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行内式</title>
</head>
<body>
<h2 style="font-size:20px; color:red;">古之学者必有师。师者，所以传道受业解惑也 。</h2>
</body>
</html>
2.内嵌式
内嵌式是将CSS代码集中写在HTML文件的<head>头部标签中，并且用<style>标签定义。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内嵌式</title>
<style type="text/css">
h2{text-align:center;} /*定义标题标记居中对齐*/
p{ /*定义段落标记的样式*/
font-size:16px;
color:red;
text-decoration:underline;
}
</style>
</head>
<body>
<h2>《劝学》片段</h2>
<p>青，取之于蓝，而青于蓝；冰，水为之，而寒于水。木直中绳，𫐓以为轮，其曲中规。虽有槁暴，不复挺者，𫐓使之然也。故木受绳则直，金就砺则利，君子博学而日参省乎己，则知明而行无过矣。 </p>
</body>
</html>
内嵌式CSS样式只对其所在的HTML页面有效，因此，仅设计一个页面时，使用内嵌式CSS样式是个不错的选择。但如果制作一个网站，则不建议使用内嵌式CSS样式，因为它不能充分发挥CSS代码的重用优势。
3.链入式
链入式也叫外链式，是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过<link />标签将外部样式表文件链接到HTML文件中。
<link />标签的三个属性
href：定义所链接外部样式表文件的路径。文件路径可以是相对路径，也可以是绝对路径。
type：定义所链接文件的类型，在这里需要指定为“text/css”，表示链接的外部文件为CSS样式表。
rel：定义当前文件与被链接文件之间的关系，在这里需要指定为“stylesheet”，表示被链接的文件是一个样式表文件。
style03.css
h2{ text-align:center;}
p{ /*定义文本修饰样式*/
font-size:16px;
color:red;
text-decoration:underline;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>链入式</title>
<link href="style03.css" type="text/css" rel="stylesheet" />
</head>
<body>
<h2>《师说》片段</h2>
<p>人非生而知之者，孰能无惑？惑而不从师，其为惑也，终不解矣。生乎吾前，其闻道也固先乎吾，吾从而师之；生乎吾后，其闻道也亦先乎吾，吾从而师之。</p>
</body>
</html>
链入式最大的优势是同一个CSS样式表可以被不同的HTML文件链接使用，同时一个HTML文件也可以通过多个<link />标签链接多个CSS样式表。 在实际网页制作中，链入式是使用频率较高，也较实用的引入方式。它将HTML代码与CSS代码分离为两个或多个文件，实现了结构和样式的完全分离，使得网页的前期制作和后期维护都十分方便。
4.导入式
导入式与链入式相同，都能够引入外部样式表文件。在HTML头部应用<style>标签，并在<style>标签内使用@import语句，即可导入外部样式表文件。
在<style>标签内还可以存放其他的内嵌的CSS样式，但@import语句需要位于其他内嵌样式的上方。
虽然导入式和链入式功能基本相同，但是大多数网站都是采用链入式引入外部样式表的。主要原因是导入式和链入式的加载时间和顺序不同。当一个页面被加载时，<link />标签引用的CSS样式表将同时被加载，而@import引用的CSS样式表会等到页面全部下载完后再被加载。因此，当用户的网速比较慢时，使用导入式CSS样式，网页可能会先显示没有CSS修饰的网页，造成不好的用户体验，而使用链入式CSS样式则能够避免这个问题。
3.2.3 CSS基础选择器
要想将CSS样式应用于特定的HTML标签，首先需要找到该标签。在CSS中，执行这一任务的样式对象被称为选择器。在CSS中的基础选择器有标签选择器、类选择器、id选择器、通配符选择器、标签指定式选择器、后代选择器和并集选择器。
1.标签选择器
标签选择器是指用HTML标签名称作为选择器。标签选择器会按标签名称分类，为页面中某一类标签指定统一的CSS样式。
标签选择器的基本语法格式:标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
2.类选择器
类选择器使用“.”（英文点号）进行标识，后面紧跟类名。最大的优势是可以为标签定义单独的样式。
类选择器基本语法格式:.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
类名即为HTML标签的class属性值，大多数HTML标签都可以定义class属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>类选择器</title>
<style type="text/css">
.red{color:red;}
.green{color:green;}
.font22{font-size:22px;}
p{
text-decoration:underline;
font-family:"微软雅黑";
}
</style>
</head>
<body>
<h2 class="red">二级标题文本</h2>
<p class="green font22">段落一文本内容</p>
<p class="red font22">段落二文本内容</p>
<p>段落三文本内容</p>
</body>
</html>
一个标签也可以应用多个class类，来设置差异化的样式。在HTML标签中多个类名之间需要用空格隔开。
注意：类名的第一个字符不能使用数字，并且严格区分大小写，一般采用小写的英文字符。
3.id选择器
id选择器使用“#”进行标识，后面紧跟id名。
id选择器基本语法格式：#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
Id名即为HTML标签的id属性值，大多数HTML标签都可以定义id属性，标签的id名是唯一的，只能对应文件中某一个具体的标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>id选择器</title>
<style type="text/css">
#bold {font-weight:bold;}
#font24 {font-size:24px;}
</style>
</head>
<body>
<p id="bold">段落1：id="bold"，设置粗体文字。</p>
<p id="font24">段落2：id="font24"，设置字号为24px。</p>
<p id="font24">段落3：id="font24"，设置字号为24px。</p>
<p id="bold font24">段落4：id="bold font24"，同时设置粗体和字号24px。</p>
</body>
</html>
同一个id名也可以应用于多个标签，浏览器并不报错，但是这种做法是不被允许的。因为JavaScript等脚本语言调用id名时会因为重复的id名而出错。此外，最后一行没有应用任何CSS样式，这意味着id选择器不可以像类选择器那样定义多个值，类似“id="bold font24"”的写法是错误的。
4.通配符选择器
通配符选择器用“*”号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的标签。
通配符选择器基本语法格式：*{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
{ margin: 0; / 定义外边距/ padding: 0; / 定义内边距*/ }
在实际网页开发中不建议使用通配符选择器设置HTML标签样式，因为通配符选择器设置的样式对所有的HTML标签都生效，不管标签是否需要该样式，这样反而降低了代码的执行效率。
5.交集选择器
交集选择器也被称为标签指定式选择器，可以为某些标签单独指定样式，由两个选择器构成，其中第一个为标签选择器，第二个为类选择器或id选择器。交集选择器的两个选择器之间不能有空格。
例如：h3.special或者p#one
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>交集选择器</title>
<style type="text/css">
p{ color:silver;}
.special{ color:black;}
p.special{ color:gray;} /*交集选择器*/
</style>
</head>
<body>
<p>段落文本（银灰色）</p>
<p class="special">段落文本（灰色）</p>
<h3 class="special">标题文本（黑色）</h3>
</body>
</html>
6.并集选择器
并集选择器可以为多个标签统一设置相同的样式，从而避免代码的冗余。并集选择器也是一个复合选择器，是各个选择器通过逗号连接而成的。任何形式的选择器（包括标签选择器、类选择器以及id选择器等），都可以作为并集选择器的一部分。如果不同标签包含相同的样式，可以使用并集选择器对这些相同的样式进行统一设置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>并集选择器</title>
<style type="text/css">
h2,h3,p{color:gray; font-size:14px;} /*不同标签组成的并集选择器*/
h3,.special,#one{text-decoration:underline;} /*标签、类、id组成的的并集选择器*/
</style>
</head>
<body>
<h2>2级标题文本</h2>
<h3>3级标题文本</h3>
<p class="special">段落文本1</p>
<p>段落文本2</p>
<p id="one">段落文本3</p>
</body>
</html>
使用并集选择器也能实现标签选择器、类选择器、id选择器定义的样式效果，并且使用并集选择器书写的CSS代码更简洁、直观。
7.后代选择器
后代选择器可以用来控制内部嵌套标签的样式。后代选择器的写法就是把外层标签写在前面，内层标签写在后面，外层标签和内层标签之间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>后代选择器</title>
<style type="text/css">
p strong{color:red;} /*后代选择器*/
strong{color:blue;}
</style>
</head>
<body>
<p>天下难事，<strong>必作于易。</strong></p>
<strong>天下大事，必作于细。</strong>
</body>
</html>
后代选择器数量不受限制，如果需要加入更多的选择器，只需在选择器之间加上空格，按序排列即可。
3.3 字体样式属性
3.3.1 font-size:字号
font-size属性用于设置字号，该属性的属性值可以为像素值、百分比、倍率等。
font-size属性常用的属性值单位
| 单位 | 说明 |
|---|---|
| em | 倍率单位，指相对当前文本的倍率 |
| px | 像素单位，是网页设计中常用的单位 |
| % | 百分比单位，指相对于当前文本的百分比 |
推荐使用像素单位——px
例如：p{font-size:12px;}
3.3.2 font-family:字体
font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等。
例如：将网页中所有段落文本的字体设置为微软雅黑
p{font-family:"微软雅黑";}
可以同时指定多个字体，各字体之间以逗号隔开。如果浏览器不支持第一种字体，则会尝试选择下一种，直到匹配到合适的字体。
body{font-family:"华文彩云","宋体","黑体";}
使用font-family设置字体时的注意事项
3.3.3 font-weight:字体粗细
font-weight属性用于定义文字的粗细。
font-weight属性的属性值
| 属性值 | 描述 |
|---|---|
| normal | 默认属性值。定义标准样式的文字 |
| bold | 定义粗体文字 |
| bolder | 定义更粗的文字 |
| lighter | 定义更细的文字 |
| 100~900（100的整数倍） | 定义由细到粗的文字。其中400等同于normal，700等同于bold，数值越大字体越粗 |
3.3.4 font-variant:变体
font-variant属性用于设置英文字符的变体，用于定义小型大写字体，该属性仅对英文字符有效。
font-variant属性的常用属性值
normal：默认值，浏览器会显示标准的字体。 small-caps：浏览器会显示小型大写的字体，即所有的小写字母均会转换为大写。但是所有使用小型大写字体的字母和其余文本相比，字体尺寸更小。
3.3.5 font-style:字体风格
font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体。
font-style属性的可用属性值
3.3.6 font:综合设置字体样式
font属性用于对字体样式进行综合设置。
font属性的基本语法格式：选择器{font: font-style font-weight font-size/line-height font-family;}
使用font属性时，必须按上面语法格式中的顺序书写，各个属性以空格隔开
在设置字体样式属性时，不需要设置的属性可以省略（取默认值），但必须保留font-size属性和font-family属性，否则font属性将不起作用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>font综合设置字体样式</title>
<style type="text/css">
.one{ font:italic 18px/30px "隶书";}
.two{ font:italic 18px/30px;}
</style>
</head>
<body>
<p class="one">段落1：把做好每件事情的着力点放在每一个环节、每一个步骤上，不心浮气躁，不好高骛远。</p>
<p class="two">段落2：把做好每件事情的着力点放在每一个环节、每一个步骤上，不心浮气躁，不好高骛远。</p>
</body>
</html>
3.3.7 @font-face规则
@font-face是CSS3的新增规则，用于定义服务器字体。使用@font-face规则定义服务器字体的基本语法格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@font-face规则</title>
<style type="text/css">
@font-face{
font-family:jianzhi; /*服务器字体名称*/
src:url(FZJZJW.TTF); /*服务器字体名称*/
}
p{
font-family:jianzhi; /*设置字体样式*/
font-size:32px;
}
</style>
</head>
<body>
<p>为莘莘学子改变命运而讲课</p>
<p>为千万学生少走弯路而著书</p>
</body>
</html>
3.4文本外观属性
使用HTML可以对文本外观进行简单的控制，但是效果并不理想。为此CSS提供了一系列的文本外观属性，用于设置更为丰富的文本外观样式。
3.4.1 color:文本颜色
color属性用于定义文本的颜色。
color属性的属性值:
预定义的颜色值，如red，green，blue等。 十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。 RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。
注意：如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。
十六进制颜色值是由#开头的6位十六进制数值组成，每2位数值为一个颜色分量，分别表示颜色的红、绿、蓝3个颜色分量。当3个颜色分量的2位十六进制数值都相同时，可使用CSS缩写。例如，#FF6600可缩写为#F60，#FF0000可缩写为#F00，#FFFFFF可缩写为#FFF。
3.4.2 letter-spacing:字间距
letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白距离。
letter-spacing属性的属性值:
letter-spacing属性的属性值可为不同单位的数值。例如，像素单位px、倍率单位em。 定义字间距时，允许使用负数，表示缩小字间距，字间距默认属性值为normal。
例如：分别为<h2>标签和<h3>标签定义不同的字间距
h2{letter-spacing:20px;} h3{letter-spacing:-0.5em;}
3.4.3 word-spacing:单词间距
word-spacing属性用于定义英文单词之间的间距，对中文字符无效。word-spacing属性的属性值可为不同单位的数值。定义单词间距时允许使用负值，表示缩小单词间距，默认属性值为normal。
word-spacing和letter-spacing属性的区别
letter-spacing定义的为字母之间的间距
word-spacing定义的为英文单词之间的间距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>word-spacing属性和letter-spacing属性</title>
<style type="text/css">
.letter{letter-spacing:20px;}
.word{word-spacing:20px;}
</style>
</head>
<body>
<p class="letter">letter spacing（字母间距）</p>
<p class="word">word spacing word spacing（单词间距）</p>
</body>
</html>
3.4.4 line-height:行间距
line-height属性用于设置行间距，所谓行间距就是行与行之间的距离，即字符的垂直间距。
line-height属性的属性值单位推荐使用像素单位px。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>line-height</title>
<style type="text/css">
.one{
font-size:16px;
line-height:18px;
}
.two{
font-size:12px;
line-height:2em;
}
.three{
font-size:14px;
line-height:150%;
}
</style>
</head>
<body>
<p class="one">岂曰无衣？与子同袍。王于兴师，修我戈矛。与子同仇。</p>
<p class="two">岂曰无衣？与子同泽。王于兴师，修我矛戟。与子偕作。</p>
<p class="three">岂曰无衣？与子同裳。王于兴师，修我甲兵。与子偕行。</p>
</body>
</html>
3.4.5 text-transform:文本转换
text-transform属性用于控制英文字符的大小写转换。
text-transform属性的属性值:
none：不进行转换（默认值）。 capitalize：将首字母转换为大写。 uppercase：将全部字符转换为大写。 lowercase：将全部字符转换为小写。
3.4.6 text-decoration:文本装饰
text-decoration属性用于设置文本的下划线，上划线，删除线等装饰效果。
text-decoration属性的属性值:
none：没有文本装饰，为默认值。 underline：用于设置下划线效果。 overline：用于设置上划线效果。 line-through：用于设置删除线效果。
text-decoration属性可以添加多个属性值，用于给文本添加多种显示效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>text-decoration</title>
<style type="text/css">
.one{text-decoration:underline;}
.two{text-decoration:overline;}
.three{text-decoration:line-through;}
.four{text-decoration:underline line-through;}
</style>
</head>
<body>
<p class="one">设置下划线（underline）</p>
<p class="two">设置上划线（overline）</p>
<p class="three">设置删除线（line-through）</p>
<p class="four">同时设置下划线和删除线（underline line-through）</p>
</body>
</html>
3.4.7 text-align:水平对齐方式
text-align属性用于设置文本内容的水平对齐，和HTML中的align对齐属性类似。
text-align属性的属性值:
left：左对齐（默认值）。 right：右对齐。 center：居中对齐。
3.4.8 text-indent:首行缩进
text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值。
text-indent属性的属性值单位:推荐使用倍率单位——em
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>text-indent</title>
<style type="text/css">
p{font-size:14px;}
.one{text-indent:2em;}
.two{text-indent:50px;}
</style>
</head>
<body>
<p class="one">段落1：真正有价值的一生，总是需要你行动，去做无数件别人不屑尝试的小事。那些一直在一步一步往前走的人，终会收获更好的人生。</p>
<p class="two">段落2：真正有价值的一生，总是需要你行动，去做无数件别人不屑尝试的小事。那些一直在一步一步往前走的人，终会收获更好的人生。</p>
</body>
</html>
3.4.9 white-space:空格处理
使用HTML制作网页时，不论源代码中有多少个空格，在浏览器中只会显示一个空格。在CSS中，使用white-space属性可设置空格的处理方式。
white-space属性的属性值:
normal：常规显示（默认值），文本中的空格、换行无效，只显示一个空格，文本满行（指到达模块区域边界）后自动换行。 pre：按文件的书写格式保留空格、换行，文本将按照原格式显示。 nowrap：空格、换行无效，强制文本不能换行，除非使用换行标签 。若超出浏览器边界，浏览器会自动增加滚动条。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>white-space</title>
<style type="text/css">
.one{white-space:normal;}
.two{white-space:pre;}
.three{white-space:nowrap;}
</style>
</head>
<body>
<p class="one">段落1：这个 段落中 有很多
空格。</p>
<p class="two">段落2：这个 段落中 有很多
空格。此段落应用white-space:pre;。</p>
<p class="three">段落3：这是一个较长的段落。这是一个较长的段落。这是一个较长的段落。这是一个较长的段落。这是一个较长的段落。这是一个较长的段落。这是一个较长的段落。这是一个较长的段落。这是一个较长的段落。这是一个较长的段落。</p>
</body>
</html>
3.4.10 text-shadow:阴影效果
text-shadow是CSS3新增属性，使用该属性可以为页面中的文本添加阴影效果。
text-shadow属性的语法格式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>text-shadow</title>
<style type="text/css">
P{
font-size:32px;
text-shadow:10px 10px 10px red,20px 20px 20px green; /*红色和绿色的投影叠加*/
}
</style>
</head>
<body>
<p>Hello CSS3</p>
</body>
</html>
注意：阴影的水平距离或垂直距离参数可以设为负值，但阴影的模糊半径参数只能设置为正值，并且数值越大阴影向外模糊的范围也就越大。
text-shadow属性能够给文字添加多个阴影，从而产生阴影叠加的效果。设置阴影叠加的效果方法很简单，只需为文本设置多组阴影参数，中间用逗号隔开即可。
例如：设置红色和绿色阴影叠加的效果
P{ font-size:32px; text-shadow:10px 10px 10px red,20px 20px 20px green; /红色和绿色的阴影叠加/ }
3.4.11 text-overflow: 处理溢出的文本
text-overflow属性同样为CSS3的新增属性，该属性用于处理溢出的文本。
text-overflow属性的语法格式:选择器{text-overflow:属性值;}
text-overflow属性的属性值:
clip：修剪溢出文本，不显示省略符号“…”。 ellipsis：用省略符号“…”替代被修剪文本，省略符号插入的位置在最后一个字符处。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>text-overflow</title>
<style type="text/css">
P{
width:200px;
height:100px;
border:1px solid #000;
white-space:nowrap; /*强制文本不换行*/
overflow:hidden; /*修剪溢出的文本*/
text-overflow:ellipsis; /*用“…”符号替换的文本*/
}
</style>
</head>
<body>
<p>把从一段很长的文本溢出的内容隐藏，出现“…”符号</p>
</body>
</html>
设置省略标签标示溢出文本的步骤
3.4.12 word-wrap属性
word-wrap属性是CSS3的新增属性，该属性用于实现长单词和URL地址的自动换行。
word-wrap属性的取值
| 属性值 | 描述 |
|---|---|
| normal | 只在允许的断字点换行（浏览器保持默认处理） |
| break-word | 在长单词或URL地址内部进行换行 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>word-wrap</title>
<style type="text/css">
p{
width:100px;
height:100px;
border:1px solid #000;
}
.break_word{word-wrap:break-word;} /*网址在段落内部换行*/
</style>
</head>
<body>
<span>word-wrap:normal;</span>
<p>网页平面UI设计学院http://icd.XXXXXXX.cn/</p>
<span>word-wrap:break-word;</span>
<p class="break_word">网页平面UI设计学院http://icd.XXXXXXXXX.cn/</p>
</body>
</html>
3.5 列表样式属性
定义无序或有序列表时，可以通过标签的属性控制列表项目符号，但该方式不符合结构与样式相分离的网页设计原则，为此CSS提供了一系列的列表样式属性，来单独控制列表项目符号，本节将对这些列表样式属性进行详细地讲解。
3.5.1 list-style-type属性
在CSS中，list-style-type属性用于控制列表项显示符号的类型，其取值有多个同。
list-style-type属性的取值:
| 属性值 | 描述 | 属性值 | 描述 |
|---|---|---|---|
| disc | 实心圆（无序列表使用） | none | 不使用项目符号（无序列表和有序列表通用） |
| circle | 空心圆（无序列表使用） | cjk-ideographic | 简单的表意数字（有序列表使用） |
| square | 实心方块（无序列表使用） | georgian | 传统的乔治亚编号方式（有序列表使用） |
| decimal | 阿拉伯数字（有序列表使用） | decimal-leading-zero | 以0开头的阿拉伯数字（有序列表使用） |
| 属性值 | 描述 | 属性值 | 描述 |
|---|---|---|---|
| lower-roman | 小写罗马数字（有序列表使用） | upper-roman | 大写罗马数字（有序列表使用） |
| lower-alpha | 小写英文字母（有序列表使用） | upper-alpha | 大写英文字母（有序列表使用） |
| lower-latin | 小写拉丁字母（有序列表使用） | upper-latin | 大写拉丁字母（有序列表使用） |
| hebrew | 传统的希伯来编号方式（有序列表使用） | armenian | 传统的亚美尼亚编号方式（有序列表使用） |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>list-style-type</title>
<style type="text/css">
ul{ list-style-type:square;}
ol{ list-style-type:decimal;}
</style>
</head>
<body>
<h3>红色</h3>
<ul>
<li>大红</li>
<li>朱红</li>
<li>嫣红</li>
</ul>
<h3>蓝色</h3>
<ol>
<li>群青</li>
<li>普蓝</li>
<li>湖蓝</li>
</ol>
</body>
</html>
注意：由于各个浏览器对list-style-type属性的解析不同。因此，在实际网页制作过程中不推荐使用list-style-type属性。
3.5.2 list-style-image属性
使用list-style-image属性可以为各个列表项设置图像符号，使列表的样式更加美观，属性值为图像的url。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>list-style-image</title>
<style type="text/css">
ul{list-style-image:url(images/1.png);}
</style>
</head>
<body>
<h2>认真严谨</h2>
<ul>
<li>从小事做起</li>
<li>从细节做起</li>
<li>从平凡做起</li>
</ul>
</body>
</html>
list-style-image属性对列表项目图像的控制能力不强。因此，实际工作中不建议使用list-style-image属性，常通过为<li>标签设置背景图像的方式实现列表项目图像。
3.5.3 list-style-position属性
在CSS中，list-style-position属性用于控制列表项目符号的位置，其取值有inside和outside2个。
inside：列表项目符号位于列表文本以内。 outside：列表项目符号位于列表文本以外（默认值）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>list-style-position</title>
<style type="text/css">
.in{list-style-position:inside;}
.out{list-style-position:outside;}
li{border:1px solid #CCC;}
</style>
</head>
<body>
<h2>中秋节</h2>
<ul class="in">
<li>中秋节，又称月夕、秋节、仲秋节。</li>
<li>中秋节在农历八月十五。</li>
<li>2008年，中秋节被列为国家法定节假日。</li>
</ul>
<ul class="out">
<li>端午节</li>
<li>除夕</li>
<li>清明节</li>
<li>重阳节</li>
</ul>
</body>
</html>
3.5.4 list-style属性
在CSS中，列表样式也是一个复合属性，可以将列表相关的样式都综合定义在一个复合属性list-style中。
使用list-style属性综合设置列表样式的语法格式:list-style:列表项目符号 列表项目符号的位置 列表项目图像;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>list-style</title>
<style type="text/css">
ul{list-style:circle inside;}
.one{list-style:outside url(images/1.png);}
</style>
</head>
<body>
<ul>
<li class="one">永和九年，岁在癸丑，暮春之初，会于会稽山阴之兰亭，修禊事也。</li>
<li>群贤毕至，少长咸集。</li>
<li>此地有崇山峻岭，茂林修竹，又有清流激湍，映带左右，引以为流觞曲水，列坐其次。</li>
</ul>
</body>
</html>
在实际网页制作过程中，为了更高效地控制列表项目符号，通常将list-style的属性值定义为none，然后通过为<li>设置背景图像的方式实现不同的列表项目符号。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>通过设置背景图像的方式来添加列表图像</title>
<style type="text/css">
dd{
list-style:none; /*清除列表的默认样式*/
height:26px;
line-height:26px;
background:url(images/2.png) no-repeat left center; /*为li设置背景图像 */
padding-left:25px;
}
</style>
</head>
<body>
<h2>熊猫</h2>
<dl>
<dt><img src="images/xiongmao.jpg"></dt>
<dd>黑眼圈</dd>
<dd>肥胖腰</dd>
<dd>圆滚滚</dd>
</dl>
</body>
</html>
3.6 CSS层叠性和继承性
层叠性和继承性是CSS的基本特征。在网页制作中，合理利用CSS的层叠性和继承性能够简化代码结构，提升网页代码的运行速度。下面将对CSS的层叠性和继承性进行详细讲解。
3.6.1 层叠性
层叠性是指CSS样式具有相互叠加的特性。
当使用内嵌式CSS样式表定义<p>标签字号为12像素，链入式CSS样式定义<p>标签颜色为红色，那么段落文本将显示字号为12像素，颜色为红色，也就是说这两种样式产生了叠加。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS层叠性</title>
<style type="text/css">
p{font-size:18px; font-family:"微软雅黑";}
.special{font-style:italic;}
#one{ font-weight:bold;}
</style>
</head>
<body>
<p>离离原上草，一岁一枯荣。</p>
<p class="special" id="one">野火烧不尽，春风吹又生。</p>
</body>
</html>
3.6.2 继承性
继承性是指子标签会继承父标签的某些样式。
定义主体标签<body>的文本颜色为黑色，那么页面中所有的文本都将显示为黑色，这是因为页面其他的标签都嵌套在<body>标签中，是<body>标签的子标签。这些子标签继承了父标签<body>的属性。
p,div,h1,h2,h3,h4,ul,ol,dl,li{color:black;} 等价于 body{color:black;}
恰当地使用CSS继承性可以简化代码。但是在网页中如果所有的元素都大量继承样式，判断样式的来源就会很困难。所以，在实际工作中，网页中通用的全局样式可以使用继承。例如，字体、字号、颜色、行距等可以在<body>标签选择器中统一设置，通过继承性控制文档中的文本。其他标签可以使用CSS基础选择器单独设置。
注意：标题标签不会采用<body>标签设置的字号，是因为标题标签自带默认字号样式，如果<body>标签设置字号过小，就会被标题标签覆盖。
3.7 CSS优先级
定义CSS样式时，经常出现多个样式规则应用在同一标签上的情况。此时CSS就会根据样式规则的权重，优先显示权重最高的样式。
CSS优先级
CSS优先级指的就是CSS样式规则的权重。在网页制作中，CSS为每个基础选择器都指定了不同的权重，方便我们添加样式代码。
可以通过虚拟数值的方式为这些选择器匹配权重。假设标签选择器具有权重为1，类选择器具有权重则为10，id选择器具有权重则为100。这样id选择器“#header”就具有最大的优先级，因此文本显示为蓝色。
对于由多个选择器构成的复合选择器（并集选择器除外），其权重可以理解为这些基础选择器权重的叠加。
在考虑权重时，还需要注意的一些特殊情况
继承样式的权重为0。 行内样式优先。 权重相同时，CSS遵循就近原则。 使用“!important”命令的标签会被赋予最高的优先级。
复合选择器的权重为组成它的基础选择器权重的叠加，但是这种叠加并不是简单的数字之和。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>复合选择器权重的叠加</title>
<style type="text/css">
.inner{text-decoration:line-through;} /*类选择器定义删除线，权重为10*/
div div div div div div div div div div div{text-decoration:underline;}
/*后代选择器定义下画线，权重为11个1的叠加*/
</style>
</head>
<body>
<div>
<div><div><div><div><div><div><div><div><div>
<div class="inner">文本的样式</div>
</div></div></div></div></div></div></div></div></div>
</div>
</body>
</html>
3.8 阶段案例—宣传软文
1.结构分析 效果图所示的宣传软文由1个标题、多个段落构成，可以使用标题标签<h2>、段落标签<p>进行定义。同时，为了设置页面中需要特殊显示的文本，还需要在文本中嵌套不同类名的<strong>标签对其进行单独控制。 2.样式分析 仔细观察效果图，可以发现页面中使用了多种字体，这就需要预先下载字体，并使用@font-face规则定义服务器字体，然后应用字体样式属性，控制段落文本的字号、粗细和颜色等样式。需要注意的是最后一行文本中有省略号标示溢出文本的效果，可以使用text-overflow:ellipsis;样式来实现。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>宣传软文</title>
<link rel="stylesheet" href="style26.css" type="text/css" />
</head>
<body>
<p class="one"><strong class="a">NO.1</strong><strong class="b">Attitude</strong></p>
<p class="two"><strong class="a">注重细节</strong><strong class="b">科学严谨</strong></p>
<h2><strong class="b">态度决定一切</strong></h2>
<p class="three"><strong>认真</strong>的工作态度</p>
<p class="four"> 做事情要认真严谨，把做好每件事情的着力点放在每一个环节、每一个步骤上，不心浮气躁，不好高骛远，从最简单、最平凡、最普通的事情做起。</p>
</body>
</html>@charset "utf-8";
/* CSS Document */
*{margin:0; padding:0;}
@font-face{font-family:ONYX; src:url(font/ONYX.TTF);}
@font-face{font-family:TCM; src:url(font/TCCM____.TTF);}
@font-face{font-family:BOOM; src:url(font/BOOMBOX.TTF);}
@font-face{font-family:LTCH; src:url(font/LTCH.TTF);}
.one .a{font-family:ONYX; font-size:48px; color:#333;}
.one .b{font-family:TCM; font-size:58px; color:#4c9372;}
.two .a{font-family:BOOM; font-size:24px; font-weight:bold; font-style:oblique; color:#333;}
.two .b{font-family:BOOM; font-size:36px; font-weight:bold; color:#333;}
h2 .a{font-family:BOOM; font-size:60px;}
h2 .b{font-family:LTCH; font-size:50px; color:#e1005a;}
.three{font-family:"微软雅黑"; font-size:36px;}
.three strong{color:#e1005a;}
.four{width:500px; font-family:"微软雅黑"; font-size:14px; color:#747474;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}本章小结
本章首先介绍了CSS的发展史、CSS样式规则、引入方式以及CSS基础选择器，然后讲解了常用的字体样式属性、文本外观属性、列表样式属性、层叠性、继承性以及优先级，最后通过CSS修饰文本，制作出了一个宣传软文页面。 通过本章的学习，读者能够充分理解CSS所实现的结构与样式相离的特性以及CSS样式的优先级规则，可以熟练地使用CSS控制页面中的字体和文本外观样式。
5965
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
