内部CSS样式标题

Question

因此，这是我的第一个html代码，尽管我在h1之后编写了主体样式，但我在h1标题的内部样式方面遇到了麻烦，并且效果很好，并且我删除了标题中的所有内联样式。 有人可以告诉我问题出在哪里吗？

 <head> <style> h1{ color: DarkCyan !important; border: 10px solid crimson !important; font-family: courier !important; text-align: center !important; } </style> </head> <body> <h1> My First trial of a site </h1> </body>

这是整个代码，因为当我在jsfiddle上面运行此代码片段时，它工作正常，但整个代码未显示样式。（如果无法发布整个代码，请告诉我删除它，因为我是新手。）

<!DOCTYPE html>
<html lang="en-US">
<head>
<title> 

   Page title 

</title>
<style> <!-- Internal CSS style-->

    h1{
        color: DarkCyan !important; 
        border: 10px solid crimson !important;
        font-family: courier !important; 
        text-align: center !important;
       }
    body{
        color: #8e0035;
        background-color: Beige; 
        font-family:verdana;
        }

    a:link{
        color:Purple;
        text-decoration: transparent;
    }

    a:visited{
        color:grey;
        text-decoration: transparent;
    }
    a:hover{
        color: green;
        text-decoration: underline;
    }
</style>
</head>
<body>

  <h1> My First trial of a site </h1>
  <hr>
  <p title = "Hover over the paragraph one more time!" style="color: 
black;"><a href="https://www.sololearn.com target="_blank""> This link will 
take you to sololearn site <br/> with a link anchored to it </a></p>
  <img src="download (6).jpg" alt="An image here">
  <hr>
  <pre> <!-- font family in body doean't apply here -->
  The preformatted tag

  will preserve line breaks    and spaces.
  </pre>
  <hr>

  <!-- Formatting of text -->

  <h3>Formatting of text:</h3>
  <ul>
  <li><b>Bold</b></li>
  <li><strong>Strong</strong></li>
  <li><i>Italic</i></li>
  <li><em>Emphasized</em></li>
  <li><mark>Marked</mark></li>
  <li><small>Small</small></li>
  <li><del>Deleted</del></li>
  <li><ins>Inserted</ins></li>
  <li><sub>Subscrpted</sub>text</li>
  <li><sup>Superscripted</sup>text</li>
  </ul>
  <hr>

  <h3>Quotations forms:</h3>
  <p><ins>Small Quote:</ins><q>This one here with double quotes</q></p>
  <p><ins>Block quote:</ins><blockquote>This is a large quote with 
indentation</blockquote></p>
  <p>This word here "<abbr title="Laughing Out Loud">LOL</abbr>" is written 
using abbreviation. </p>
  <p><bdo dir="rtl">This text will be written from right to left.</bdo>(Bi-
directional override)</p>
  <p style="border: 1px solid crimson;"> This is a bordered Paragraph. </p> 
<!--Inline CSS style-->

</body>
</html>

Answer 1

您要在哪个浏览器中打开代码，以及要使用哪个应用程序编辑代码？

那应该工作正常，但是尝试添加它-

<!DOCTYPE html>
<html>
<head>
<style>
h1{
color: DarkCyan !important; 
border: 10px solid crimson !important;
font-family: courier !important; 
text-align: center !important;
}
</style>
</head>

<body>  
<h1> My First trial of a site </h1>
</body>

</html>

Answer 2

好吧，此代码在js小提琴中有效，请参见： https : //jsfiddle.net/5ue1p3or/

<head>
<style>
h1{
color: DarkCyan !important; 
border: 10px solid crimson !important;
font-family: courier !important; 
text-align: center !important;
}
</style>
</head>

<body>  
<h1> My First trial of a site </h1>
</body>

但是，您应该使用外部css文件进行样式设置，并且在不强制使用时不要尝试使用！important，因为要遵循一些基本规则。 还请始终记住放置doctype声明，并记住在更改CSS文件后刷新浏览器。

Answer 3

css中使用/* */ no 注释。

变更：

<style> <!-- Internal CSS style-->

至：

<style> /* Internal CSS style */

内部CSS样式标题

问题描述

3 个解决方案

解决方案1
0 2017-07-17 11:51:36

解决方案2
0 2017-07-17 11:58:17

解决方案3
0 已采纳 2017-07-17 12:31:35

内部CSS样式标题

问题描述

3 个解决方案

解决方案1 0 2017-07-17 11:51:36

解决方案2 0 2017-07-17 11:58:17

解决方案3 0 已采纳 2017-07-17 12:31:35

解决方案1
0 2017-07-17 11:51:36

解决方案2
0 2017-07-17 11:58:17

解决方案3
0 已采纳 2017-07-17 12:31:35