Div 容器内的 HTML + CSS 样式/文本格式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16559416/
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 Styles/Text Formatting inside Div container
提问by ThePlague
I'm trying to bold and color certain words (or make them italic, different size, etc.) within a paragraph in my Index.HTML.
我试图在我的 Index.HTML 的一个段落中为某些单词加粗和着色（或将它们设为斜体、不同大小等）。
But the usual formatting tags (HTML) are not working.
但是通常的格式标签 (HTML) 不起作用。
I have a StyleSheet that contains all of my styles and properties for the website, but I only want to change three words (for example) in the paragraph. How do I do it?
我有一个包含网站所有样式和属性的样式表，但我只想更改段落中的三个单词（例如）。我该怎么做？
index.html:
索引.html：
<div id="da-slider" class="da-slider">
<div class="da-slide">
<h2>This is the Heading</h2>
<p>And HERE is where I want to make this word BOLD and this WORD in a different color, for example</p>
<a href="#" class="da-link">Read more</a>
<div class="da-img"><img src="img/pp-slider/imac.png" alt="image01" /></div>
</div>
回答by DiederikEEn
check this fiddle: here
检查这个小提琴：这里
This is a little example.
这是一个小例子。
I use <strong>Word</strong>to make it bold, but <b>Word</b>will do fine to.
我<strong>Word</strong>过去常常把它加粗，但<b>Word</b>会做得很好。
use <i></i>to make words italic. Also i used <span class="color">Word</span>to make it blue.
用于<i></i>使单词斜体。我也曾经<span class="color">Word</span>把它变成蓝色。
回答by dhanush
You can have your desired results by pre-defined HTML tags strong, i, em, or you can set individual classes for assigning to different elements.
您可以通过预定义的 HTML 标签 strong、i、em 来获得所需的结果，或者您可以设置单独的类以分配给不同的元素。
Here is the document you can save & try...
这是您可以保存并尝试的文档...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body {
font-size:100%;
font-family:arial;
}
.boldme {
font-weight:bold;
}
.italicme {
font-style:italic;
}
.iambigger {
font-size:150%;
}
.colormered {
color:#FF0000;
}
</style>
</head>
<body>
<div class="da-slide">
<h2>This is the Heading</h2>
<p>And <span class="iambigger">HERE</span> is where I want to make <span class="italicme">this</span> word <span class="boldme">BOLD</span> and this <span class="colormered">WORD</span> in a different color, for example.</p>
<p>And by the way, <span class="boldme italicme iambigger colormered">I can have combinations of all</span></p>
<a href="#" class="da-link">Read more</a>
<div class="da-img">
<img src="img/pp-slider/imac.png" alt="image01" />
</div>
</div>
</body>
</html>
Let me know if you need to know anything else...
如果您还需要了解任何其他信息，请告诉我...
回答by Sree ram
Usage:
用法：
Bold : <b>
Italic : <i>
Underline : <u>
Example:
例子：
To make the text <b>BOLD</b>and
使文本<b>BOLD</b>和
To make the text <b><i>BOLD and ITALIC</i></b>
使文本 <b><i>BOLD and ITALIC</i></b>
You could also use CSS with a span:
您还可以使用带有跨度的 CSS：
Example :
例子 ：
This makes the text <span>Bold and italic</span>
这使得文本 <span>Bold and italic</span>
With the following CSS:
使用以下 CSS：
span {
font-weight: bold;
font-style: italic;
}
回答by George
Wrap the words in a <span>and then apply a style to them
将单词包裹在 a 中<span>，然后对其应用样式
HTML:
HTML：
<p>And <span>HERE</span> is where I want to make this word <span>BOLD</span> and this <span>WORD</span> in a different color, for example</p>
CSS:
CSS：
#da-slider p span{
color:#F00;
font-weight:bold;
}
See this Fiddle
看到这个小提琴
回答by Nitesh
Here is the Solution.
这是解决方案。
The HTML:
HTML：
<div id="da-slider" class="da-slider">
<div class="da-slide">
<h2>This is the Heading</h2>
<p>And HERE is where I want to make this word <span>BOLD</span> and this <span>WORD</span> in a different color, for example</p>
<a href="#" class="da-link">Read more</a>
<div class="da-img"><img src="img/pp-slider/imac.png" alt="image01" /></div>
</div>
</div>
The CSS:
CSS：
.da-slide p span {
font-weight: bold;
}
Hope this helps.
希望这可以帮助。
