Home > Web Front-end > CSS Tutorial > How to use span css to set the font color inside a div?

How to use span css to set the font color inside a div?

云罗郡主
Release: 2018-11-22 15:10:49
forward
12433 people have browsed it

The content of this article is about how to use span css to set the font color inside a div. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Use the span tag to set the font color of part of the text in a div.

A piece of text is placed in a DIV or P. When we set the font color of the div or p, the font color of all the text inside will become the font color we set. Usually, several words or part of the words in a paragraph of text are laid out with different font colors. At this time, you can cleverly use the span tag to set the class or id or directly set the CSS to set the required font color.

1. CSS color style words: color

2. Example tutorial instructions

Here, set different colors for some of the text in p and DIV text content.

3. Example code

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>span对一段文字其中部分文字设置不同颜色</title>
<style>
div{ color:#000}
p{ color:#F00}
.red{ color:#F00}
#blue{ color:#06F}
</style>
</head>
<body>
<div>欢迎来到php中文网学习html技术,<span class="red">这里有全面的css教程</span></div>
<p>此案例是对一段文字中,其中部分文字<span id="blue">设置不同的颜色</span>。运用SPAN标签来实现。</p>
<p>直接对文字使用span后直接写CSS<span style="color:#6C0">实现不同字体颜色</span></p>
</body>
</html>
Copy after login

The effect is as follows:

How to use span css to set the font color inside a div?

##The span tag is used here to set different font colors for part of the text in a paragraph. , you can also extend and apply em, b, strong and other tags flexibly.

The above is a complete introduction to how to use span css to set the font color inside a div. If you want to know more about

CSS3 tutorial, please pay attention to the PHP Chinese website.


The above is the detailed content of How to use span css to set the font color inside a div?. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:thinkcss.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template