零基础教你学前端——67-CSS文本与字体综合案例

我们来先来分析一下这个案例。

标题容器左对齐,有固定的宽高。标题文字白色,水平垂直居中。

正文共四个段落,每个段落都有固定的宽度,右侧边界对齐。

前三个段落首行空两个字。每个段落里都有一段高亮的文本,有颜色和下划线修饰,也有文本斜体和加粗效果。

段落中的一些文字还有颜色、加粗、下划线以及倾斜等修饰效果。

第四个段落起始有个吉他图标,英文字体有外发光效果。

下面我们来制作这个网页。

创建 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 {
  width: 200px;
  height: 50px;
  background-color: #a52a2a;
  color: white;
  line-height: 50px;
  font-size: 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 {
  width: 500px;
  text-indent: 2em;
  text-align: justify;
  word-spacing: 10px;
  text-transform: capitalize;
  line-height: 28px;
}

定义 p 选择器,声明样式:width: 500px,让每一个段落都有固定的宽度。text-indent: 2em,每个段首空两格。text-align: justify,实现段落右侧边界对齐。给最后一段英文添加样式:word-spacing: 10px,添加单词间距。text-transform: capitalize,每个单词首字母大写。最后再添加 line-height: 28px,给段落设置一个行间距。

四个段落基本上制作完毕了。接下来装饰个别段落和文字。

分别使用三个 span 元素将这三部分文字包裹起来。给第一个和第三个 span 元素定义 class 属性,值为 mark1。(第一个段落里面的带有下滑划线区域,和第三个段落中的下划线区域)

在CSS中定义 mark1 选择器,声明样式 color: red,text-decoration-line: underline,text-decoration-style: double。

我们看,这两部分文本被红色、双下划线修饰了。

实际效果第三部分文本还带有一个波浪线。需要再定义一个样式覆盖一下。

给这个 span 的样式类再添加一个 mark2。

定义选择器 mark2,声明样式 text-decoration-style: wavy。

效果实现了。

给第二个 span 添加 class 属性,值为 mark3。

定义选择器 mark3,声明样式 color: orange。

第二部分文本变成了橙色。

案例还要求这两部分文字为倾斜效果。使用 span 元素把他们包裹起来,定义 class 等于 mark4。

定义选择器 mark4,声明样式 font-style: italic。

文本倾斜效果实现了。

实际上,千锋全部学科的名称和被特殊修饰的文本都有加粗效果,给全部学科再添加一个 span元素包裹在外层。给所有需要加粗的 span 都添加 mark0 样式类名。

定义选择器 mark0,声明样式 font-weight: bold。

文本加粗效果实现了。

.mark0 {
  font-weight:bold
}

.mark1 {
  color: red;
  text-decoration-line: underline;
  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;
}

在 head 里添加引用谷歌字体的 css 链接,和自定义 icon 图标的 js 地址。

给英文的段落元素定义 class 属性,值为 p1 font-effect-outline。

添加 p1 选择器,声明样式:font-family: "Sofia", sans-serif。

字体效果实现了!在段首还有一个 icon 图标。

如何查找自己心仪的图标呢?大家可以访问 fontawesome 官网这个地址,海量图标就任你选择了。guitar 就在这里。 (https://fontawesome.com/searc...

在段落头部添加 i 元素,定义 class属性,值为 fas fa-guitar。 (注意中间有空格)。

我们发现,真正使用这个图标时,样式类的值,要求在官网查找到的图标名字前,加上 fa- (读作:fa杠),并且还需要添加 fas。

图标添加好了!实际的效果,最后一行没有缩进。

在 .p1 (注意这里有点) 选择器里添加 text-indent: 0,来覆盖 p 元素的样式。

为什么能覆盖呢?答对了,因为作用的优先级—— class 选择器要大于元素选择器。

这样,就取消了最后一行的段首缩进!

文章配套视频链接:https://www.bilibili.com/vide...

你可能感兴趣的:(前端html)