CSS如何更改文本的背景颜色？

I have just 3 words on my webpage that I want to have colored background: Red, Green and Blue. There are 2 components to my questions:

我的网页上只有3个字，我想要有彩色背景：红色，绿色和蓝色。我的问题有两个组成部分：

How should I do this? Put this in a style sheet or just hard code it in the webpage?

我该怎么做？把它放在一个样式表中，或者只是在网页上硬编码？
Either way, please show me how to do what I want each way so I can decide. I am an absolute beginner with css as you can tell.

无论哪种方式，请告诉我如何做我想要的每一个方式，以便我可以决定。你可以说，我是css的绝对新手。

BTW, I am doing this in an aspx page if it makes any difference.

顺便说一下，如果它有任何区别，我在aspx页面中这样做。

5 个解决方案

#1

You need to put each word in a tag, and give each tag a background color.

您需要将每个单词放在标记中，并为每个标记指定背景颜色。

Something like this:

像这样的东西：

<span style="background-color: red;">Word 1</span>
<span style="background-color: green;">Word 2</span>
<span style="background-color: blue;">Word 3</span>

#2

For inline styles:

对于内联样式：

<span style="background-color:red;">Red Stuff...</span>
<span style="background-color:green;">Green Stuff...</span>
<span style="background-color:blue;">Blue Stuff...</span>

For Css File

对于Css文件

.red{
  background-color: red;
}

.green{
  background-color: green;
}

.blue{
  background-color: blue;
}

and in your html;

并在你的HTML;

<span class="red">red stuff</span>
<span class="green">green stuff</span>
<span class="blue">blue stuff</span>

The choice should depend whether you want to use these properties on other places. If so go with a style sheet. (IMHO go with a seperate style sheet anyway)

选择应取决于您是否要在其他地方使用这些属性。如果是这样，请使用样式表。（无论如何，恕我直言的单独样式表）

#3

Method 1

方法1

HTML

    <div>
     <p id="red">Red</p>
     <p id="green">Green</p>
     <p id="blue">Blue</p>
    </div>

CSS

    p#red
    {
    background-color: red;
    }

   p#green
    {
    background-color: green;
    }

   p#blue
    {
    background-color: blue;
    }

Method 2

方法2

HTML

<p><span>Red</span><span>Green</span><span>Blue</span></p>

CSS

   p>span:nth-child(1)
   {
   background-color: red;
   }

   p>span:nth-child(2)
   {
   background-color: green;
   }

   p>span:nth-child(3)
   {
   background-color: blue;
   }

Add this in you HTML inside the head

在你的头脑中添加HTML

<link rel="stylsheet" type="text/css" href="#foo" />

Name you stylesheet CSS file and put the relative/absolute path in the above href

将样式表命名为CSS文件，并将相对/绝对路径放在上面的href中

#4

Can anyone tell me how to add syntax coloration to my post so I can add an answer to this question.I'll tell how to generate that code with c#.

任何人都可以告诉我如何添加语法着色到我的帖子，所以我可以添加这个问题的答案。我将告诉如何使用c＃生成该代码。

So the code is :

所以代码是：

string[] cols = { "red","green","blue"} // or any other color
string[] words = { "","","" } // Put your words inside quotes
string res = "";
for(int i = 0;i < 3;i++) 
{
    res+= "<span style=" + "\" + "background-color:" 
    + cols[i] + "\" + " >" + words[i] +  "</span>";
} 
// the code till now should either be in script tags
// or in the code file linked with your web page
// If you are using visual studio that is the name of the pate.aspx.cs
// now use in the aspx page
<% Response.Write(res); %> // I am not sure if the semicolon is required here.

This is if you want to do it on the server side.

这是你想在服务器端做的。

#5

I suggest putting that in style sheet. I personally like to avoid having any "hard css" (not sure about the right word).

我建议把它放在样式表中。我个人喜欢避免任何“硬css”（不确定正确的词）。

<head>
<style type="text/css">
span.textRed
{
background-color: red;
}
span.textGreen
{
background-color: green;
}
span.textBlue
{
background-color: blue;
}
</style>
</head>
<body>
<span class="textRed"> Red </span>
<span class="textGreen"> Red </span>
<span class="textBlue"> Red </span>
</body>

#1

You need to put each word in a tag, and give each tag a background color.

您需要将每个单词放在标记中，并为每个标记指定背景颜色。

Something like this:

像这样的东西：

<span style="background-color: red;">Word 1</span>
<span style="background-color: green;">Word 2</span>
<span style="background-color: blue;">Word 3</span>

#2

For inline styles:

对于内联样式：

<span style="background-color:red;">Red Stuff...</span>
<span style="background-color:green;">Green Stuff...</span>
<span style="background-color:blue;">Blue Stuff...</span>

For Css File

对于Css文件

.red{
  background-color: red;
}

.green{
  background-color: green;
}

.blue{
  background-color: blue;
}

and in your html;

并在你的HTML;

<span class="red">red stuff</span>
<span class="green">green stuff</span>
<span class="blue">blue stuff</span>

The choice should depend whether you want to use these properties on other places. If so go with a style sheet. (IMHO go with a seperate style sheet anyway)

选择应取决于您是否要在其他地方使用这些属性。如果是这样，请使用样式表。（无论如何，恕我直言的单独样式表）

#3

Method 1

方法1

HTML

    <div>
     <p id="red">Red</p>
     <p id="green">Green</p>
     <p id="blue">Blue</p>
    </div>

CSS

    p#red
    {
    background-color: red;
    }

   p#green
    {
    background-color: green;
    }

   p#blue
    {
    background-color: blue;
    }

Method 2

方法2

HTML

<p><span>Red</span><span>Green</span><span>Blue</span></p>

CSS

   p>span:nth-child(1)
   {
   background-color: red;
   }

   p>span:nth-child(2)
   {
   background-color: green;
   }

   p>span:nth-child(3)
   {
   background-color: blue;
   }

Add this in you HTML inside the head

在你的头脑中添加HTML

<link rel="stylsheet" type="text/css" href="#foo" />

Name you stylesheet CSS file and put the relative/absolute path in the above href

将样式表命名为CSS文件，并将相对/绝对路径放在上面的href中

#4

Can anyone tell me how to add syntax coloration to my post so I can add an answer to this question.I'll tell how to generate that code with c#.

任何人都可以告诉我如何添加语法着色到我的帖子，所以我可以添加这个问题的答案。我将告诉如何使用c＃生成该代码。

So the code is :

所以代码是：

string[] cols = { "red","green","blue"} // or any other color
string[] words = { "","","" } // Put your words inside quotes
string res = "";
for(int i = 0;i < 3;i++) 
{
    res+= "<span style=" + "\" + "background-color:" 
    + cols[i] + "\" + " >" + words[i] +  "</span>";
} 
// the code till now should either be in script tags
// or in the code file linked with your web page
// If you are using visual studio that is the name of the pate.aspx.cs
// now use in the aspx page
<% Response.Write(res); %> // I am not sure if the semicolon is required here.

This is if you want to do it on the server side.

这是你想在服务器端做的。

#5

I suggest putting that in style sheet. I personally like to avoid having any "hard css" (not sure about the right word).

我建议把它放在样式表中。我个人喜欢避免任何“硬css”（不确定正确的词）。

<head>
<style type="text/css">
span.textRed
{
background-color: red;
}
span.textGreen
{
background-color: green;
}
span.textBlue
{
background-color: blue;
}
</style>
</head>
<body>
<span class="textRed"> Red </span>
<span class="textGreen"> Red </span>
<span class="textBlue"> Red </span>
</body>

秒客网

CSS如何更改文本的背景颜色？

5 个解决方案

#1

#2

#3

#4

#5

#1

#2

#3

#4

#5

相关文章