【前端】如何制作一个自己的网页（14）

当我们还需要对网页中的内容进行局部样式的修改。这时候，就需要用到HTML中的重要元素：span。

span是一个行内元素，可以对HTML文档中的内容进行局部布局。

如图，我们给标题和段落元素的部分内容设置了各种样式。

接下来，我们一起学习span元素的用法。

span元素

第8行，在

标签内定义了4个span元素。

第2-5行，使用标签选择器，设置span元素的背景颜色为#5E80F4，字体颜色为#FFFFFF。

<style> span { color: #FFFFFF; background-color: #5E80F4; } </style>

夜曲编程是一个在线学习编程的网站，发布了数据分析基础、数据分析进阶、网络爬虫、网页开发基础等课程。

标签

标签也没有什么特殊的显示效果。

简单来说，标签中的内容会被标记，当它结合CSS设置样式时，其中的内容才会有视觉上的变化。

span是一个行内元素，可以直接在段落元素p的内部对一些内容进行标记。

<style> span { color: #FFFFFF; background-color: #5E80F4; } </style>

夜曲编程是一个在线学习编程的网站，发布了数据分析基础、数据分析进阶、网络爬虫、网页开发基础等课程。

在网页中，如果span元素出现很多，那么使用span标签选择器会改变所有span元素的样式。

比如，使用span选择器就会同时设置h3和p内部的span元素样式。

但是有时候，我们只需要设置特定元素中的span元素样式，那么该怎么办呢？

因为span元素一般都是放在块级元素内。

所以，我们要设置指定元素内的span元素样式，就需要用到后代选择器。

后代选择器

第3-6行，定义一个后代选择器。

<style> /* 使用后代选择器设置样式 */ p span { color: #FFFFFF; background-color: #5E80F4; } </style>

夜曲编程简介

夜曲编程有数据分析、网页开发基础等课程。

明天，再写，具体再分析span。