HTML + CSS：向简单文本添加类/ID
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14735258/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML + CSS: Add a class/id to simple text
提问by MOnsDaR
I'm currently stuck at a probably very trivial problem:
我目前被困在一个可能非常微不足道的问题上：
I have a simple HTML/CSS page with a text:
我有一个带有文本的简单 HTML/CSS 页面：
<head></head>
<body>
This is a Text about Foobar.
</body>
How is it possible to assign a CSS-class/id to the word Textwithout breaking the format? Let's say I want to add the class .yellowto it, which displays the text with a yellow background.
如何在Text不破坏格式的情况下为单词分配 CSS-class/id ？假设我想向它添加类.yellow，它显示带有黄色背景的文本。
I think I got something blocking my mind cause it can't be that difficult... But all I can google (mostly trivial tutorials) uses CSS just on usual HTML-elements like <p>or <b>which would break my format.
我想我有什么东西挡住了我的思绪，因为它不可能那么困难......但我只能谷歌（主要是琐碎的教程）在通常的 HTML 元素上使用 CSS，<p>或者<b>这会破坏我的格式。
回答by Abubakkar
I think you are missing out on <span>tag.
Try this out:
我认为你错过了<span>标签。试试这个：
<head></head>
<body>
This is a <span class="yellow">Text</span> about Foobar.
</body>
And in CSS:
在 CSS 中：
.yellow{
color:yellow;
}
回答by Chris Sobolewski
Use an inline element. Span is purpose build for that. Alternately, if you wish to have semantic meaning behind your highlighted section, you can re-style <em>or <strong>with something like:
使用内联元素。跨度是为此目的而构建的。或者，如果您希望突出显示的部分背后具有语义含义，您可以重新设计样式<em>或<strong>使用以下内容：
strong.highlight{
font-weight:normal;
font-style:normal;
background:yellow;
}
回答by ottis
You just need to wrap the section in a span like:
您只需要将该部分包装在一个跨度中，例如：
<span>This is a <span class='yellow'>Text</span> about Foobar.</span>
See a working example here http://jsfiddle.net/dZZfB/
在此处查看一个工作示例http://jsfiddle.net/dZZfB/
Hope that helps
希望有帮助
回答by Spell
The HTML for Example:
以 HTML 为例：
<center><span class="t1">Test1</span></center>
The CSS:
CSS：
<style type="text/css">
.t1 {
color: white;
text-shadow: black 0.1em 0.1em 0.2em;
}
</style>
