六、CSS3的美化字体与段落

1、设置字体格式:编写网页时，我们可以根据需要使用CSS3设置字体属性来设置字体格式。
①使用选择器插入字体:在CSS3中，可以使用before和after选择器分别在标签前和标签后插入内容，然后再使用content属性设置要插入的内容。
演示:

<!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"><style>p::before{content:'你好,';color: aqua;background-color: orange;font-family: '黑体';}p::after{content:'见到你很高兴';color:orangered;background-color:pink;font-family: '楷体';}</style><title>Document</title>
</head>
<body><p>小明</p>
</body>
</html>

上述代码看出，页面中若存在多个<p>标签使用after和before选择器，会造成混淆，避免这个问题，可以在content属性追加none属性值。
演示:

<!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"><style>p::before{content:'你好,';color: aqua;background-color: orange;font-family: '黑体';}p::after{content:'见到你很高兴';color:orangered;background-color:pink;font-family: '楷体';}p.index::before{content: none;}p.index::after{content: none;}</style><title>Document</title>
</head>
<body><p>小明</p><p class="index">小红</p>
</body>
</html>

②设置字体字号:字体和字号是文本最基本的属性，字体一般指文本字体类型，包括黑体、宋体、楷体等；字号决定网页文字大小。
Ⅰ设置字体:在CSS3中，通过font-family属性来设置文本字体类型。

{font-family:字体}

上述语法中，在需要设置多种字体类型以确保被所有浏览器识别时，则需要按照先后顺序罗列多个字体类型，每个字体类型之间逗号分隔。若字体名称中包含空格符号，需要使用引号将其包含。

{font-family:字体1,字体2,...}

此外，CSS3还允许用户使用下列语法格式定义字体类型:

{font-family:cursive/fantasy/monospace/serif/sans-serif}

字体	含义	典型类型
cursive	手写字体族	Caflisch Script、Adobe Poetica、迷你简黄草、华文行草…
fantasy	梦幻字体族	WingDings、WingDings 2、WingDings 3、Symbol…
monospace	等宽字体族	Courier、MS Courier New、Prestige…
serif	衬线字体族	Times New Roman、MS Georgia、宋体…
sans-serif	无衬线字体族	MS Trebuchet、MS Arial、MS Verdana、幼圆、隶书、楷体…

Ⅱ设置字号:在CSS3中，可以通过font-size属性来设置文字字体大小。

{font-size:数值}

上述语法格式中直接使用字号定义字体大小，还允许通过下列之类的参数来定义字号。

{font-size:inherit/xx-small/x-small/small/medium/large/x-large/xx-large/larger/smaller/lenght}

参数	含义
xx-small	表示最小字号
x-small	表示较小字号
small	表示小字号
medium	表示默认值
large	表示大字号
x-large	表示较大字号
xx-large	表示最大字号
larger	表示根据父对象字体大小相对增大字号
smaller	表示根据父对象字体大小相对减小字号
length	表示根据父对象字体大小以百分数、浮点数和单位标识生成的长度值，该值不可为负

演示:

<!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"><link rel="stylesheet" href="index.css"><title>Document</title>
</head>
<body><p class="flag">春眠不觉晓</p><p class="flag2">处处闻啼鸟</p><p id="flag3">夜来风雨声</p><p id="flag4">花落知多少</p>
</body>
</html>

.flag{font-family: 幼圆;font-size: 50%;color: cadetblue;
}
.flag2{font-family: 黑体;font-size: 36px;color: cyan;
}
#flag3{font-family: 楷书;font-size: small;color: dimgray;
}
#flag4{font-family: 宋体;font-size: large;color: dodgerblue;
}

③设置字体样式:字体样式即字体显示样式，包括粗体、斜体、大小写转换等。
Ⅰ设置斜体/倾斜样式:在CSS3中，可以通过font-style属性来设置字体样式。

{font-style:normal/italic/oblique/inherit}

参数	含义
normal	默认值，标准字体样式
italic	斜体样式
oblique	倾斜样式
inherit	从父对象中继承字体样式

Ⅱ设置加粗样式:在CSS3中，可以通过font-weight属性来设置文本加粗样式。其属性值数值越大，加粗样式越明显。

{font-weight:100~900}

此外，CSS3还允许用户使用下列语法格式定义字体加粗样式:

{font-weight:bold/bolder/lighter/normal}

参数	含义
bold	粗体字体
bolder	更粗字体
lighter	更细字体
normal	默认字体

演示:

<!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>Document</title>
</head>
<body><p style="font-style: italic; font-weight: 100;">床前明月光</p><p style="font-style: oblique; font-weight: 200;">疑似地上霜</p> <p style="font-weight: bolder; font-family: 黑体; color: red;">举头望明月</p><p style="font-weight: lighter; font-family: 黑体; color: purple;">低头思故乡</p>
</body>
</html>

Ⅲ小写字母转大写字母:在CSS3中，可以通过font-variant属性来设置文本为大写字母，即将所有小写字母转换为大写字母。

{font-variant:normal/small-caps/inherit}

参数	含义
small-caps	小型的大写字母字体样式
inherit	从父对象中继承字体样式
normal	默认值表正常字体样式

演示:

<!DOCTYPE html>
<html lang="en">![在这里插入图片描述](https://img-blog.csdnimg.cn/37ea60ac247846a0903d2875468327de.png#pic_center)<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>Document</title>
</head>
<body><p style="font-variant: normal;">Happy New Year</p><p style="font-variant: small-caps;">Happy New Year</p>
</body>
</html>

④设置字体颜色:在CSS3中，可以通过color属性来设置文本的字体颜色。

{color:color_name/hex_number/rgb_number/inherit/hsl_number/hsla_number/rgba_number}

参数	含义
color_name	颜色值名称如red
hex_number	颜色值为十六进制如#ffffff
rgb_number	颜色值为RGB代码如rgb(255,100,125)
inherit	从父类对象中继承颜色
hsl_number	颜色值为HSL代码如hsl(0,50%,75%)
hsla_number	颜色值为HSLA代码如hsla(100,50%,50%,1)
rgba_number	颜色值为RGBA代码如rgba(100,20,55,0.5)

演示:

<!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"><style>p{font-size: 20px;}h1{color: chartreuse;}p.ex{color:#28004D;}p.eq{color:rgba(13, 97, 209, 1.00);}p.er{color: hsla(41, 90%, 51%, 1.00);}p.eb{color:hsl(0, 38%, 55%)}</style><title>Document</title>
</head>
<body><h1>春晓</h1><p class="ex">春眠不觉晓</p><p class="eq">处处闻啼鸟</p><p class="er">夜来风雨声</p><p class="eb">花落知多少</p>
</body>
</html>

⑤设置复合属性:用户经常会碰到同时设置多个属性的情况，也就是符合属性，例如同时需要设置字体大小，字体字型、字体加粗等。此时就可以使用CSS3样式中提供的font属性来设置复合属性。

{font:font-style font-variant font-weight font-size font-family}

其中，font-size和font-family属性必须按照固定顺序出现，其它属性位置可自由调换。另外各属性之间需要使用空格进行分隔；若单个属性设置多个属性值，需要使用逗号对其进行分隔。
演示:

<!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"><style>p.ex{font-style: italic;font-size: 20px;font-family: 黑体;font-weight: 900;}p.eg{font:italic normal 900 20px 黑体;}</style><title>Document</title>
</head>
<body><h1>春晓</h1><p class="ex">春眠不觉晓，处处闻啼鸟</p><p class="eg">夜来风雨声，花落知多少</p>
</body>
</html>

2、设置段落格式:文本格式只能提高文本的美观性，为了使整个文档疏密有效，还需要设置文档的段落格式。段落格式是指文本和字符之间的间距、文本的修饰属性、嵌套列表，以及段落的对齐方式等内容。
①设置间隔:间隔是指单词之间或字符之间的距离，它们会直接影响到网页布局的空间设计，好的间隔不仅可以节省空间，还可以提高阅读效果。在CSS3中，可以使用word-spacing属性设置间隔。

word-spacing:normal/length

该属性包含normal和length属性值，normal属性值为默认值，表示标准间隔；而length属性值用于定义单词之间的固定间隔，其值可为负。
演示:

<!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>Document</title>
</head>
<body><p style="word-spacing: normal;">Happy New Year</p><p style="word-spacing: 30px;">Happy New Year</p><p style="word-spacing: normal;">春眠不觉晓，处处闻啼鸟</p><p style="word-spacing: 30px;">夜来风雨声，花落知多少</p>
</body>
</html>

上面演示发现，word-spacing属性只适用于单词之间的间隔，并不适用于文本之间的间隔，此时需要使用letter-spacing属性来设置字符间隔。

    <p style="letter-spacing: normal;">Happy New Year</p><p style="letter-spacing: 30px;">Happy New Year</p><p style="letter-spacing: normal;">春眠不觉晓，处处闻啼鸟</p><p style="letter-spacing: 30px;">夜来风雨声，花落知多少</p>

②设置缩进:是对普通段落进行首行缩进设置，一般缩进两个字符，表示段落的开始。在CSS3中，可以使用text-indent属性来设置段落的缩进效果。

text-indent:length

该属性只包含一个length属性值，该属性表示由百分比、浮点数和单位标识符组合而成的长度值，可为负。
演示:

<!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>Document</title>
</head>
<body><p style="text-indent: 10mm;">夏天本是成长的季节，万事万物在阳光的普照下蓬勃生长，尽管热不可耐，一切都在奋力向上伸展着自身。<br>看那乖巧的小女孩，虽才呀呀学语，走路站立不稳，不也正在妈妈的爱抚下快乐地成长吗？<br>还有这石磴下的一点新绿，经历了多少风吹日晒的洗礼，终于绽放出新绿。生命就是这种性格倔强的东西。<br>经历狂风暴雨，磕磕碰碰，最终给世界留下最美的微笑。</p><p style="text-indent: 5%;">我们一头扎入大自然的怀抱，呼吸着清新的空气沁入心脾，倾听着万物苏醒、小草抽芽的声音，<br>贪婪地享受着春的味道。全身轻松了许多，心情出奇般的愉悦。我爱春天那种荡漾在春风中的温馨；我爱春天里<br>滨纷色彩冲击视野的感觉。绿水青山间品尝各种具有田园芬芳的美味…我们寻找春味，寻找开心，寻找…分享踏青、分享快乐！</p>
</body>
</html>

③设置行间距:是对文本行与行之间的高度，在CSS3中可使用line-height属性来设置文本行间距。

line-height:normal/length

该属性包含normal和length两个属性值。其中，normal属性值表示默认行高，length属性值表示由百分比、浮点数和单位标识符组合而成的长度值，可为负。
演示:

<!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>Document</title>
</head>
<body><p style="line-height: 40px;">柔软的心并不是柔弱的。心柔软了，才可以将繁杂简化为轻风一缕，没那么重。<br>心柔软了，才可以将世间的丑置于一边，欣赏那美好的一处，没那么市侩。</p>
</body>
</html>

④设置对齐方式:段落的对齐方式包括垂直对齐和水平对齐。
Ⅰ垂直对齐:是指该元素相对于所在行的基线上下居中对齐，可为负。在CSS3中可使用vertical-align属性来设置段落的垂直对齐方式。

{vertical-align:属性值}

vertical-align属性包括sub、baseline、super和top等8个属性值。

参数	含义
baseline	默认值位于父元素基线上
sub	以基线为准垂直对齐下标
super	以基线为准垂直对齐上标
top	以最高元素为基线设置顶端对齐
text-top	以父元素为基线设置顶端对齐
middle	以父元素为基线设置居中对齐
bottom	以最低元素为基线设置顶端对齐
text-bottom	以父元素为基线设置底端对齐
length	按堆叠顺序排列元素
%	使用百分比来排列元素可为负正值表示文字提升负值表示文字下降

演示:

<!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>Document</title>
</head>
<body><p>奥运会<b style="font-size: 10pt; vertical-align: super;">2020</b>!中国队<b style="font-size: 10pt; vertical-align: sub;">[注]</b>!<b style="font-size: 10pt; vertical-align: baseline;">加油!</b>            </p><p>冬奥会<b style="font-size: 10pt; vertical-align: -100%;">2022</b>!中国队<b style="font-size: 10pt; vertical-align: 100%;">[注]</b>!<b style="font-size: 10pt; vertical-align: top;">加油!</b>            </p>
</body>
</html>

Ⅱ水平对齐:包括居中对齐、左对齐、右对齐、分散对齐等对齐方式，在CSS3中可使用text-align属性来设置水平对齐。

{text-align:sTextAlign}

text-align属性包括center、start、end等属性值。

参数	含义
start	文本以开始边缘为基线对齐
end	文本以结束边缘为基线对齐
left	文本以左边缘为基线对齐
right	文本以右边缘为基线对齐
center	文本居中对齐
justify	文本分散对齐即两端对齐
match-parent	继承父元素的对齐方式
string	根据某个指定字符对齐可与其他关键字同时使用
inherit	继承父元素的对齐方式

演示:

<!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"><style>.a{height: 300px;width: 300px;color:chartreuse;background-color: cadetblue;}</style><title>Document</title>
</head>
<body><div class="a"><h1 style="text-align:center ;">山中送别</h1><h3 style="text-align:left;">作者:王维</h3><h3 style="text-align: start;">山中相送罢</h3><h3 style="text-align: end;">日暮掩柴扉</h3><h3 style="text-align: right;">春草明年绿</h3><h3 style="text-align: justify;">王孙归不归</h3></div>
</body>
</html>

⑤转换大小写:在CSS3中，可以运用text-transform属性来转换大小写文字。

{text-transform:none/capitalize/uppercase/lowercase}

参数	含义
none	默认值无转换
capitalize	转换单词的首字母为大写字母
uppercase	转换为大写字母
lowercase	转换为小写字母

演示:

<!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"><style>#a{height: 300px;width: 300px;color: limegreen;background-color: pink;}</style><title>Document</title>
</head>
<body><div id="a"><p style="text-transform: none;">when i was young</p><p style="text-transform: capitalize;">waiting for my favorite songs</p><p style="text-transform: lowercase;">WHEN THEY PLAYED I'D SING ALONE</p><p style="text-transform: uppercase;">Those were such happy times</p></div>
</body>
</html>

⑥设置修饰效果:在CSS3中，运用text-decoration属性来设置文本下划线、删除线、闪烁等修饰效果。

{text-decoration:none/underline/blink/overline/line-through}

参数	含义
none	默认值无任何修饰效果
underline	下划线
overline	上划线
blink	闪烁(只有Mozilla和Netscape等浏览器支持)
line-through	删除线

演示:

<!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>Document</title>
</head>
<body><p style="text-decoration: none;">春眠不觉晓</p><p style="text-decoration: underline;">处处闻啼鸟</p><p style="text-decoration: overline;">夜来风雨声</p><p style="text-decoration: line-through;">花落知多少</p>
</body>
</html>

⑦处理文本空白:文本空白是在输入文本时所输入的空格符号，即空格字符。在CSS3中，可以使用white-space属性来处理文本空白。

{white-space:normal/pre/nowrap/pre-wrap/pre-line}

参数	含义
normal	默认值忽略文本空白
pre	保留文本空白
nowrap	文本不换行遇到<br>标签换行
pre-wrap	保留空白序列可换行
pre-line	合并空白序列并保留换行符

演示:

<!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"><style>.ex{height: 300px;width: 400px;background-color:aquamarine;border: 20px solid springgreen;}</style><title>Document</title>
</head>
<body><div class="ex"><p style="white-space: pre-wrap; text-indent: 10mm;">绿茶，是中国的主要茶类之一，是指采取茶树的新叶或芽，未经发酵，经杀青、整形、烘干等工艺而制作的饮品。 </p><p style="white-space: pre-line;">绿茶是未经发酵制成的茶，保留了鲜叶的天然物质，含有的茶多酚，儿茶素、叶绿素、咖啡碱、氨基酸、维生素等营养成分也较多。</p></div>
</body>
</html>

⑧文本反排:在CSS3中，可以运用unicode-bidi和direction属性对文本进行反排。
unicode-bidi属性格式:

{unicode-bidi:normal/bidi-override/embed}

参数	含义
normal	默认值不打开嵌入级别
embed	打开以direction属性指定的嵌入级别
bidi-override	与embed值相同但元素内的重新排序按照direction属性顺序进行

direction属性格式:

{direction:ltr/rtl/inherit}

direction属性用于设定文本流的方向。其属性值有三种:ltr表示文本从左到右进行显示；rtl表示文本从右到左进行显示；inherit表示不可继承文本流。
演示:

<!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>Document</title>
</head>
<body><div style="color: tan; border: 10px solid tomato; width: 100px; height: 100px;"><p style="direction: ltr; unicode-bidi: bidi-override; text-align: left;">有志者事竟成</p><p style="direction: rtl; unicode-bidi: bidi-override; text-align: left;">有志者事竟成</p></div>
</body>
</html>

3、设置列表格式:在CSS3中，可以使用content属性为多个项目添加符号。
①在多个标题前加上连续编号
若要针对多个标题添加连接编号，可以使用content属性中的counter属性。

<元素>::before/after{content:counter(计数器);
}

除了使用counter属性外，还需要在样式中追加对元素的counter-increment属性的指定。

<元素>{counter-increment:before/after指定的计数器名
}

演示:

<!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"><style>p::before{content: counter(count);}p{counter-increment: count;}</style><title>Document</title>
</head>
<body><p>项目</p><p>项目</p><p>项目</p><p>项目</p><p>项目</p><p>项目</p>
</body>
</html>

②在项目编号中追加文字
在项目中插入编号时，可以在项目编号中插入文字，增加对项目的修饰效果。同时，还可以指定编号的样式，如编号字体、字体大小和字体颜色等。

<元素>::before/after{content:'文字修饰'counter(计数器)'文字修饰';
}

演示:

<!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"><style>p::before{content:'第'counter(cnt)'章';color: tomato;font-family: 华文琥珀;font-size: 24px;}p{counter-increment: cnt;}</style><title>Document</title>
</head>
<body><p> 绪论</p><p> 操作系统用户界面</p><p> 进程管理</p><p> 处理机调度</p><p> 存储管理</p><p> 进程与存储管理示例</p><p> Windows的进程与内存管理</p>
</body>
</html>

③指定编号种类:指定编号种类可以使用list-style-type属性。

参数	含义
disc	列表项项目符号使用disc(通常为实心圆)
circle	列表项项目符号使用circle(通常为空心圆)
square	列表项项目符号使用square(通常为实心/空心方块)
decimal	1，2，3，4，5…
upper-alpha	A，B，C，D，E…
lower-alpha	a，b，c，d，e…
upper-roman	Ⅰ，Ⅱ，Ⅲ…
lower-roman	i，ii，iii…
none	不使用项目符号

演示:

<!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"><style>p::before{content: '第'counter(cnt,upper-roman)'节:';color: orange;font-family: 幼圆;font-size: 20px;}p{counter-increment: cnt;font-family: 幼圆;font-size: 18px;color: salmon;}</style><title>Document</title>
</head>
<body><p>Linux进程结构</p><p>Linux进程控制</p><p>Linux进程调度</p><p>Linux进程通信</p><p>Linux存储管理</p>
</body>
</html>

④字符串两边添加嵌套文字符号:若要在字符串两边添加诸如括号、单引号和双引号之类的文字符号，可以使用content属性的open-quote、close-quote和quotes属性进行设置。open-quote属性值用于添加开始的文字符号；close-quote属性值用于添加结尾的文字符号；quote属性用于指定使用什么文字符号。
演示:

<!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"><style>p::before{content: open-quote;}p::after{content: close-quote;}p{quotes: "《""》";}</style><title>Document</title>
</head>
<body><div><p>ASP基础教程与实验指导</p></div>
</body>
</html>

⑤编号嵌套:使用content属性指定编号时，可以在大编号中插入中编号，中编号插入小编号。

<!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"><style>h3::before{content:'第'counter(cnt,upper-roman)'章 ';color: chocolate;font-family: 幼圆;}h3{counter-increment: cnt;counter-reset: cnt1;font-size: 17px;}h4::before{content:counter(cnt)'.'counter(cnt1)' ';color: coral;font-family: 黑体;}h4{counter-increment: cnt1;counter-reset: cnt2;margin-left: 25px;font-size: 15px;}h5::before{content:counter(cnt)'.'counter(cnt1)'.'counter(cnt2);color: darkorange;font-family: 宋体;}h5{counter-increment: cnt2;font-size: 13px;margin-left: 50px;}</style><title>Document</title>
</head>
<body><h3>Windows的进程与内存管理</h3><h4>Windows NT的特点及相关概念</h4><h5>Windows NT体系结构的特点</h5><h5>Windows的管理机制</h5><h4>Windows进程和线程</h4><h5>Windows进程结构</h5><h5>Windows线程结构</h5><h5>Windows进程和线程的创建</h5><h4>Windows的内存管理</h4><h5>内存管理器</h5><h5>内存管理的机制</h5><h3>进程与存储管理</h3><h4>Linux进程结构</h4><h5>进程的虚拟地址结构</h5><h5>进程上下文</h5><h5>进程的状态和状态转换</h5><h4>Linux进程控制</h4><h5>Linux启动及进程树的形成</h5><h5>进程控制</h5>
</body>
</html>

4、高级样式简介
①设置阴影效果:在CSS3中，运用text-shadow属性给文字添加阴影效果，从而增添文字的质感。

{text-shadow:none/<length>none/[<opacity>,]*<opacity>}

{text-shadow:none/<color> [,<color>]*}

其中，color指定颜色；length由浮点数字和单位标识符组成的长度值，可为负值，指定阴影的水平延伸距离；opacity由浮点数字和单位标识符组成的长度值，不可为负，指定模糊效果的作用距离，若仅仅需要模糊效果，将前两个length设置为0。
Ⅰ阴影位移:通过text-shadow属性，可以为文字添加阴影。

{text-shadow:Apx Bpx #color}

其中，值A是指文本在x轴上的位移；值B是指文本在y轴上的位移；color值阴影颜色值。
演示:

<!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"><style>p{text-shadow: 15px 10px orange;}</style><title>Document</title>
</head>
<body><p>添加阴影效果的文本</p>
</body>
</html>

Ⅱ阴影的模糊半径:若单纯添加文本阴影效果，不能体现文本的质感，而添加阴影的模糊效果，文本显示效果就不同。

{text-shadow:Apx Bpx Cpx #color}

其中，值A是指文本在x轴上的位移；值B是指文本在y轴上的位移；值C是指文本阴影模糊程度；color值阴影颜色值。
演示:

<!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"><style>p{text-shadow: 15px 10px 3px gray;}</style><title>Document</title>
</head>
<body><p>添加阴影效果的文本</p>
</body>
</html>

Ⅲ指定多个阴影:用户还可以为文本内容添加多个阴影，即两个以上的阴影。

{text-shadow:Apx Bpx Cpx #color,Dpx Epx Fpx #color...}

演示:

<!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"><style>.ex{text-shadow: 15px 10px 3px gray;}.eg{font-size: x-large;font-family: 幼圆; text-shadow: 15px 10px 2px deepskyblue,20px 15px 5px red;}</style><title>Document</title>
</head>
<body><p class='ex'>添加阴影效果的文本</p><p class='eg'>指定添加多个阴影</p>
</body>
</html>

②省略标记:text-overflow属性设置或检索是否使用一个省略标记(…)标示对象内文本的溢出。要实现溢出时产生省略号的效果还需要定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden)，只有这样才能实现溢出文本显示省略号的效果。
Ⅰwhite-space属性:设置如何处理元素内的空白。

{white-space:normal/pre/nowrap}

参数	含义
normal	默认值。默认处理方式。文本自动处理换行。若抵达容器边界，内容会转到下一行。
pre	用等宽字体显示预先格式化的文本。不合并字间的空白距离和进行两端对齐。换行和其它空白字符都受保护。
nowrap	强制在同一行内显示所有文本，直到文本结束或遭遇<br>标签

Ⅱoverflow属性:设置对象的内容超过其指定高度及宽度时，如何管理内容的属性。

{overflow:visible/auto/hidden/scoll}

参数	含义
visible	默认值。不剪切内容也不添加滚动条。若显示声明此默认值，对象将以包含对象的window或frame的尺寸裁切，且clip属性设置将失败。
auto	必需时对象内容才会被裁切或显示滚动条。
hidden	不显示超过对象尺寸的内容。
scoll	总是显示滚动条。

Ⅲtextoverflow属性:仅注解当文本溢出时是否显示省略标记，并不具备其他样式属性定义。

{text-overflow:clip/ellipsis}

参数	含义
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"><link rel="stylesheet" href="demo.css"><title>Document</title>
</head>
<body><p>text-overflow属性为clip值时</p><div class="test1_demo">不显示省略标记，而是简单的裁切条</div><p>text-overflow属性为ellipsis值时</p><div class="test2_demo">当文本溢出时显示省略标记</div>
</body>
</html>

.test1_demo{font-size: 24px;text-overflow: clip;overflow: hidden;white-space: nowrap;width: 200px;background-color: coral;
}
.test2_demo{font-size: 24px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;width: 200px;background-color: darkorange;
}

③设置自动换行:当当前行超过指定容器的边界时是否断开转行时，需要使用CSS3中的word-wrap属性进行设置或检索。

{word-wrap:normal/break-word}

参数	含义
normal	控制连续文本换行
break-word	内容将在边界内换行。若需要，词内换行(word-break)也会发生

演示:

<!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"><style>#demo{width: 280px;border: 1px solid black;word-wrap: break-word;}</style><title>Document</title>
</head>
<body><div id='demo'>Unhappy parents rarely are provoked to wonder if they shouldn’t have had kids, but unhappy childless folks are bothered with the message that children are the single most important thing in the world: obviously their misery must be a direct result of the gaping baby-size holes in their lives.</div>
</body>
</html>

④调用服务端字体:浏览网页时，可能由于客户端计算机没有安装一些特殊字体，则网页将无法显示实际效果。用户可以使用@font-face调用服务器端字体。

@font-face{font-family:<yourwebfontname>src:<source>[<format>][,<source>[format]]*;[font-weight:<weight>][font-style:<style>]
}

参数	含义
yourwebfontname	指自定义的字体名称，最好是使用下载的默认字体，它将被引用到Web元素中的font-family
source	指自定义的字体的存放路径，可以是相对/绝对路径
format	指自定义的字体格式，主要用来帮助浏览器识别，其值主要有:truetype、opentype、truetype-aat、embedded-opentype、avg等
weight/style	weight定义字体是否为粗体；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"><link rel="stylesheet" href="index.css"><title>××企业新闻列表</title>
</head>
<body><div class='dht'><p><a href="#" style="margin-left: 30px; color: white;">网站首页</a><a href="#" class='lj'>教学科目</a><a href="#" class='lj'>学校简介</a><a href="#" class='lj'>资料下载</a><a href="#" class='lj'>联系我们</a></p></div><div><img src="background.png" alt="" width="1000px"></div><div class="cl"><ul><li style="list-style-type: none;">新闻分类</li><ul><li class='lb'><a href="#">学校新闻</a></li><li class='lb'><a href="#">行业动态</a></li><li class='lb'><a href="#">媒体报道</a></li></ul><li style="list-style-type: none; line-height: 50px;">服务课程</li><ul><li class='lb'><a href="#">外语培训</a></li><li class='lb'><a href="#">电脑培训</a></li><li class='lb'><a href="#">资格认证</a></li><li class='lb'><a href="#">学历教育</a></li><li class='lb'><a href="#">才艺培训</a></li></ul></ul></div><div class='news'><div class='newsbor'>所有文章</div><ul><li style="margin-top: -10px;"><a href="#">美文欣赏:新年梦想</a><div class='time'>2020-01-01　10:00</div></li><li style="margin-top: 3px;"><a href="#">教育部:......</a><div class='time'>2019-12-31　18:00</div></li><li style="margin-top: 3px;"><a href="#">走进高校-第3集:复旦大学</a><div class='time'>2019-12-31　10:00</div></li><li style="margin-top: 3px;"><a href="#">乡村教师呼吁农村教育需要全科老师</a><div class='time'>2019-12-30　10:00</div></li><li style="margin-top: 3px;"><a href="#">走进高校-第2集:北京大学</a><div class='time'>2019-12-29　10:00</div></li><li style="margin-top: 3px;"><a href="#">汉字其实不难学</a><div class='time'>2019-12-28　12:00</div></li><li style="margin-top: 3px;"><a href="#">善于停止也是一种幸福</a><div class='time'>2019-12-27　18:00</div></li><li style="margin-top: 3px;"><a href="#">走进高校-第1集:清华大学</a><div class='time'>2019-12-26　17:00</div></li><li style="margin-top: 3px;"><a href="#">加强国防生训练</a><div class='time'>2019-12-25　17:00</div></li><li style="margin-top: 3px;"><a href="#">美文欣赏:故乡的大山</a><div class='time'>2019-12-24　18:00</div></li><li style="margin-top: 3px;"><a href="#">美文欣赏:时光带走了什么</a><div class='time'>2019-12-23　10:00</div></li><li style="margin-top: 3px;"><a href="#">共青团基层试点工作会推进召开</a><div class='time'>2019-12-22　17:00</div></li><li style="margin-top: 3px;"><a href="#">美文欣赏:有梦想的人,请打开心灵的门</a><div class='time'>2019-12-21　16:00</div></li><li style="margin-top: 3px;"><a href="#">×学校与×学校合作办学2020年6月招生</a><div class='time'>2019-12-20　18:00</div></li><li style="margin-top: 3px;"><a href="#">美文欣赏:让普通人,创造人生传奇</a><div class='time'>2019-12-19　17:00</div></li></ul><div class='tz'><a href="#">首页</a><a href="#">上一页</a><a href="#">下一页</a><a href="#">尾页</a><form action="#">跳转至<input type="number" min="1" step="1">页 <input type="submit" value="确定"></form></div></div>
</body>
</html>

.dht{width: 999px;height: 50px;border: 1px solid black;background-color: gray;
}
.lj{margin-left: 50px;color: white;
}
.cl{width: 300px;height: 470px;border: 1px solid black;float: left;
}
.lb{list-style-type: none;line-height: 40px;font-size: 15px;font-family: 幼圆;
}
.news{width: 696px;height: 465px;border: 1px solid black;float: left
}
.newsbor{width:680px; height:30px; font-family: 黑体; border: 1px solid black;margin-top:10px;margin-left:5px;
}
.time{float: right;font-size: 17px;font-family: 宋体;margin-top: 2px;
}
.tz{width: 680px;height: 25px;margin-left: 10px;text-align: center;
}

六、CSS3的美化字体与段落相关推荐

css中字体与段落属性设置/文本高级样式
CSS中字体与段落属性毫无疑问,不管什么网站,文字一定是必不可少.文字可以是网页传播信息的主要手段.那么怎么显示文字,才能更加的美观,那么大家需要了解以下文字属性. 字体属性属性用途语法(一些 ...
php发光字体代码,CSS3怎么实现字体发光效果
这次给大家带来CSS3怎么实现字体发光效果,CSS3实现字体发光效果的注意事项有哪些,下面就是实战案例,一起来看一下. 博客页面左上角的"猿来是勇者"文字已制作发光效果,分享方法如 ...
CSS SANS – 神奇！使用 CSS3 创建的字体
在我们的认识中,CSS 所能做的就是改变网页的排版布局,调整字间距等.然而,这里我们要介绍的则是使用 CSS3 制作字体.CSS SANS 可以通过 CSS 技术创建的A-Z字体,一起来围观下. 在线 ...
在线CSS3压缩美化格式化
在线CSS3压缩美化格式化在线CSS3压缩美化格式化本工具可以将压缩的CSS,CSS3代码美化格式化显示,也可以将格式化的CSS代码压缩成单行减小文件体积.支持下载层叠样式表是一种用来为结构化文 ...
CSS3 文字与字体相关样式
CSS3 给文字添加阴影,使用 text-shadow 属性给页面上的文字添加阴影效果,text-shadow 属性是在CSS2中定义的,在 CSS2.1 中删除了,在 CSS3 的 text 模块中 ...
Latex排版 Chapter2格式调整（长度单位、字体、段落、页面、目录）
Chapter2格式调整格式调整字体使用字体编码字体族名字体系列字体大小段落对齐居中对齐单侧对齐页面大小布局目录页格式格式调整 \section{格式调整} \subsecti ...
技巧：win10的另一种美化字体的方式，使用noMeiryoUI
目录 1. 前提 2. 字体选择 3. 查看已经安装的字体并查看效果 4. 安装软件修改系统字体 5. 修改浏览器字体 1. 前提 21年的时候写了一篇文章,<Windows10下美化字体,达到 ...
css linux 等宽字体,CSS3 等宽字体与ch单位的详解
下面我们来看一篇关于CSS3 等宽字体与ch单位的使用方法介绍,希望这篇文章能够让各位理解到css中ch单位及字体等宽问题哦. 一.什么是等宽字体? 所谓等宽字体,一般是针对英文字体而言的.东亚字体, ...
Word字体和段落设置
word的使用技巧有很多,但是呢,我要和大家分享一下word的使用技巧里面的字体和段落设置吧. 人们通常排版,那怎样排版会更加好看而且看起来比较专业呢? 1.首先进入到word的软件中选择一个空白文档 ...
字体模糊是怎么回事css,CSS3 translate导致字体模糊怎么办 CSS3 translate导致字体模糊解决方法...
本篇文章小编给大家分享一下CSS3 translate导致字体模糊解决方法,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. 使用了translate会导致字体模糊. .med ...

六、CSS3的美化字体与段落

六、CSS3的美化字体与段落相关推荐

最新文章

热门文章