CSS How to change background color of text?
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:
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.开发者_StackOverflow社区
BTW, I am doing this in an aspx page if it makes any difference.
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
.red{
background-color: red;
}
.green{
background-color: green;
}
.blue{
background-color: blue;
}
and in your 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)
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>
Method 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
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
<link rel="stylsheet" type="text/css" href="#foo" />
Name you stylesheet CSS file and put the relative/absolute path in the above href
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#.
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.
I suggest putting that in style sheet. I personally like to avoid having any "hard css" (not sure about the right word).
<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>
加载中,请稍侯......
精彩评论