您的位置:图文专栏 > 技术教程 > HTML5/CSS3速成教程 >

2-3 使用<span>标签自定义文字

发布时间:2021-02-26 16:07:51

2-3 使用<span>标签自定义文字


这一小节讲解<span>标签,这个标签是没有语义的,它的作用就是为了设置单独的样式用的。
如果现在我们想把下面的第一段话“美国梦”三个字设置成blue(蓝色),所以这样情况下就可以用到<span>标签了。

如下面例子:

<p>1922年的春天,一个想要成名名叫尼克•卡拉威(托比•马奎尔Tobey Maguire 饰)的作家,离开了美国中西部,来到了纽约。那是一个道德感渐失,爵士乐流行,走私为王,股票飞涨的时代。为了追寻他的<span>美国梦</span>,他搬入纽约附近一海湾居住。</p>

语法:

<span>文本</span>

任务

我来试试:把“美国梦”设置为蓝色
1. 编辑器中对“美国梦”文本加上<span>标签。
2. 输入color:blue;,为<span>元素设置文本颜色为蓝色。

源代码:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>了不起的盖茨比</title>
    <style>
    span {color:blue;

    }
    </style>
</head>

<body>
    <p>1922年的春天,一个想要成名名叫尼克•卡拉威(托比•马奎尔Tobey Maguire 饰)的作家,离开了美国中西部,来到了纽约。那是一个道德感渐失,爵士乐流行,走私为王,股票飞涨的时代。为了追寻他的<span>美国梦</span>,他搬入纽约附近一海湾居住。</p>
    <p>菲茨杰拉德,二十世纪美国文学巨擘之一,兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌,其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>
</body>

</html>
上一篇: 2-2 <p>段落标签和使用

下一篇: 2-4 使用<hx>标签为网页增加标题