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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:22:49  来源:igfitidea点击:

HTML + CSS Styles/Text Formatting inside Div container

htmlcssstylesheet

提问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.

希望这可以帮助。