Question

以下是我的代码。

<!DOCTYPE html>
    <html lang="en-UK">
    <head>
        <meta charset="utf-8">
        <title>Test Webpage</title>
    </head>
<body>
    <h1>This is the Heading of the webpage.</h1>
    .mainpara {background-color: #d3e5f2;}
    <div class="mainpara">
        <h3>And it will be the <strong>heading 2</strong>, main content body.</h3>
        <p>This is another body, composed of plain text. It's defined internally as a paragraph. Some style will be applied to this and the above heading 2 text by CSS applications.</p>
    </div>
    <h6>Note that this webpage designing enthusiasm was generated out of necessity for edition of the theme at <a href="http://japanaddicts.org/" target="_blank">Japanaddicts</a>, a website of <strong>cool people</strong> specialising in <em>Japanaddicting</em> others.
    <p style="color: #f60; font-size: 15px;">This is a line now. Yes another one. However, an inline CSS has been applied to it. This particular paragraph has a different style. It's troublesome, this inline CSS but it's experimental.</p>
</body>
</html>

正如你所看到的那样，有一个＆＃34; mainpara＆＃34;师。我如何专门应用样式？我们试过了.mainpara {background-color: #d3e5f2;}，你可以看到。我也试过把它放在课堂上面。

Answer 1

您需要将CSS放在样式表中，而不是放在HTML中间的自由文本中。

使用样式元素或（最好）将CSS放在外部文件中并使用链接元素引用它（这两个元素都会在头部而不是主体中）。

有in the specification

的例子

Answer 2

<style>
 .mainpara {background-color: #d3e5f2;}
</style>

如果不使用样式标记

，则无法在html页面中编写css代码

Answer 3

    <!DOCTYPE html>
        <html lang="en-UK">
        <head>
            <meta charset="utf-8">
            <title>Test Webpage</title>
    <style type="text/css">
    <!-- ALL STYLES SHOULD BE DEFINED HERE OR MOVED INTO A SEPERATE STYLE SHEET FILE THEN IMPORTED -->
    .mainpara {
    background-color: #d3e5f2;
    }
    <!-- Changes color and font size for all p tags on page -->
    p {
    color: #f60;
    font-size: 15px;
    }
    <!-- Use an id for specific p tag -->
    #customParaStyleId {
    color: #f60;
    font-size: 15px;
    }
    <!-- Use a class when you plan to apply it to many p tags on the same or additional pages -->
    .custParaStyleClass {
    color: #f60;
    font-size: 15px;
    }

    </style>

        </head>
    <body>
        <h1>This is the Heading of the webpage.</h1>
        <!-- CLASSES ARE USED TO REPEAT STYLES ACROSS SITES -->
        <div class="mainpara">
            <h3>And it will be the <strong>heading 2</strong>, main content body.</h3>
            <p>This is another body, composed of plain text. It's defined internally as a paragraph. Some style will be applied to this and the above heading 2 text by CSS applications.</p>
        </div>
        <h6>Note that this webpage designing enthusiasm was generated out of necessity for edition of the theme at <a href="http://japanaddicts.org/" target="_blank">Japanaddicts</a>, a website of <strong>cool people</strong> specialising in <em>Japanaddicting</em> others.
<!-- USING ID AS EXAMPLE TO TARGET SPECIFIC SINGLE TAG -->
        <p id="customParaStyleId">This is a line now. Yes another one. However, an inline CSS has been applied to it. This particular paragraph has a different style. It's troublesome, this inline CSS but it's experimental.</p>
    </body>
    </html>

CSS应与HTML代码的正文分开。它可以放在您导入/包含的单独样式表中，也可以放在<style type="text/css"></style>标记之间。

提示：在将它们分成样式表之前，我经常开始设计和操作头部中的样式。这使我可以专注于设计，而不必担心我是否正确地附加了样式表。

完成页面后，我将工作样式移到单独的工作表中，以便在整个网站上提供可重复使用的样式。

Answer 4

<style>
  .mainpara {background-color: #d3e5f2;}
</style>

如果你有样式表文件或style.css，你可以插入：

.mainpara {background-color: #d3e5f2;}

在style.css文件中

如何将CSS样式应用于<div>块？</div>

4 个答案: