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 fiddle，请参阅： 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评论。

更改

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

要

<style> /* Internal CSS style */

内部CSS样式标题

3 个答案: