先来分析一下这个案例。标题容器是左对齐的，并且具有固定的宽度和高度。标题文本为白色，水平和垂直居中。有四段文字，每段都有固定的宽度，并与右边框对齐。前三段，第一行有两个空字。每个段落都有一段突出显示的文本，带有颜色和下划线装饰，以及文本斜体和粗体效果。段落中的某些文本还具有颜色、粗体、下划线和斜体效果。第四段开头有个吉他图标，英文字体有外发光效果。让我们创建这个网页。创建007-css-case-1文件夹，在文件中创建case-text-fonts.html页面文件和case-1.css样式文件。在html文件中创建基础代码，在head标签内导入外部样式case-1.css。让我们先做标题。添加带有标题文本的h1元素。在写标题样式之前，假设UI设计师给你一张文章的图片，你可能就麻烦了。如何获取标题的宽高、背景色和文字大小？大家在电脑上打开QQ，登录，Mac电脑按Control+Command+A，Windows电脑按ctrl+alt+a，圈出页面标题，点击对勾按钮完成截图。在浏览器中输入ps.gaoding.com，打开在线版PS。单击文件、新建，然后单击创建按钮。最后，Control+V粘贴截图图像。应用选框工具，发现标题选区的宽高为200像素，高为50像素，文字大小为24像素。应用吸管工具，点击标题框拾取背景色，点击前景色按钮，得到十六进制颜色值#a52a2a。使用这三个值，您可以定义标题的样式。h1{宽度：200px;高度：50px；背景色：#a52a2a；白颜色;行高：50px；字体大小：24px；text-align:center;}定义h1选择器，声明样式width:200px,height:50px,background-color:#a52a2a,color:white,font-size:24px,text-align:center在浏览器中查看页面，标题的效果基本实现了。接下来完成文字的垂直居中对齐。通过为文本声明line-height行高属性，可以间接实现文本的垂直居中。行高的值是多少？根据前面学习的行高知识，将行高值设置为50px，也就是文字所在容器的高度。这样，文本在容器内完全垂直居中。接下来制作四段。向HTML添加四个p元素并填写一些文本。让我们为这些段落添加样式。p{宽度：500px；文本缩进：2em；文本对齐：对齐；字间距：10px；文本转换：大写；line-height:28px;}定义p选择器，声明style:width:500px，让每个段落固定宽度。文本缩进：2em，每段开头两个空格。text-align:justify，实现段落右边框对齐。给最后一段英文添加样式：word-spacing:10px，添加字间距。text-transform:capitalize，每个单词的首字母大写。最后，添加line-height:28px来设置段落的行间距。四段基本讲完了。接下来装饰个别段落和文字。分别用三个span元素包裹文本的三个部分。为第一个和第三个span元素定义一个类属性，值为mark1。（第一段下划线区域，第三段下划线区域）在CSS中定义mark1选择器，声明样式color：red，text-decoration-line：underline，text-decoration-style：double。看一下，这两部分文字用红色和双下划线装饰。效果文本的第三部分也有一条波浪线。您需要定义另一种样式来覆盖它。将另一个mark2添加到此跨度的样式类。定义选择器mark2并声明样式text-decoration-style:wavy。效果实现了。将类属性添加到第二个跨度，值为mark3。定义选择器mark3并声明样式颜色：橙色。文本的第二部分变为橙色。该案例还要求将这两个部分的文本用斜体表示。用span元素包裹它们并定义等于mark4的类。定义选择器mark4并声明样式font-style:italic。实施文本倾斜效果。事实上，前锋中所有科目的名称以及经过特殊修饰的文字都带有加粗效果，并添加了一个span元素将所有科目包裹在外层。所有需要加粗的span都加上mark0样式类名。定义选择器mark0并声明样式font-weight:bold。实现了文字加粗效果。.mark0{字体粗细：粗体}.mark1{颜色：红色；文本装饰线：下划线；text-decoration-style:double;}.mark2{text-decoration-style:wavy;}.mark3{color:orange;}.mark4{font-style:italic;}最后定义英文段落的特殊字体，添加外发光效果。.p1{font-family:"Sofia",sans-serif;text-indent:0;}在头部添加一个引用谷歌字体的css链接，以及自定义icon图标的js地址。
