0

我正在使用StackEdit（这太棒了！）。
它具有导出文档的 HTML 文件的功能。
该文档使用默认的CSS 文件。

例如，我下载了带有以下代码的 HTML 文件：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>New Markdown document</title>
<link rel="stylesheet" href="https://stackedit.io/res-min/themes/base.css" />
<script type="text/javascript" src="https://stackedit.io/libs/MathJax/MathJax.js?config=TeX-AMS_HTML"></script>
</head>
<body><div class="container"><h2 id="hello">Hello</h2>

<p>We’re dealing with…&lt;/p>

<blockquote>
  <p>Written with <a href="https://stackedit.io/">StackEdit</a>.</p>
</blockquote></div></body>
</html>

我想要做的是改变背景颜色，如果 'div' 元素的 ID: "container" 不改变他的任何其他属性。

我只能访问基本模板，即：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><%= documentTitle %></title>
<link rel="stylesheet" href="https://stackedit.io/res-min/themes/base.css" />
<script type="text/javascript" src="https://stackedit.io/libs/MathJax/MathJax.js?config=TeX-AMS_HTML"></script>
</head>
<body><div class="container"><%= documentHTML %></div></body>
</html>

我怎样才能以最简单的方式做到这一点？

笔记：

  • 我只能编辑模板。
  • 我想把颜色改成f6f7f9。
  • 我希望保留元素的任何其他属性。

更新

尝试了您对上面示例代码的建议：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>New Markdown document</title>
<link rel="stylesheet" href="https://stackedit.io/res-min/themes/base.css" />
<script type="text/javascript" src="https://stackedit.io/libs/MathJax/MathJax.js?config=TeX-AMS_HTML"></script>
</head>
<body><div class="container" style="background-color:#f6f7f9;"><h2 id="hello">Hello</h2>

<p>We’re dealing with…&lt;/p>

<blockquote>
  <p>Written with <a href="https://stackedit.io/">StackEdit</a>.</p>
</blockquote></div></body>
</html>

它不起作用，它改变了文档的整体外观。
您可以尝试通过创建本地 HTML 文件来查看。-> 我错了。有用！

4

4 回答 4

1

如果您只能编辑模板，请使用如下内联样式：

<div class="container" style="background-color:#f6f7f9;"><%= documentHTML %></div>

或者由于您的模板是整个页面，您可以在头部添加自定义样式并使用 !important 指令覆盖任何其他自定义样式。

例子：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>
            <%= documentHTML %>
        </title>
        <link rel="stylesheet" href="https://stackedit.io/res-min/themes/base.css" />
        <script type="text/javascript" src="https://stackedit.io/libs/MathJax/MathJax.js?config=TeX-AMS_HTML"></script>
        <style type="text/css">
            .container {
                background-color:#f6f7f9 !important;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <%= documentHTML %>
        </div>
    </body>

</html>
于 2014-05-09T07:23:04.543 回答
1

将样式添加background-color:yellow;到container div.

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title><%= documentTitle %></title>
      <link rel="stylesheet" href="https://stackedit.io/res-min/themes/base.css" />
      <script type="text/javascript" src="https://stackedit.io/libs/MathJax/MathJax.js?config=TeX-AMS_HTML"></script>
   </head>
   <body>
      <div class="container" style="background-color:yellow;"><%= documentHTML %></div>
   </body>
</html>
于 2014-05-09T07:24:04.420 回答
1

试试这个

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title><%= documentTitle %></title>
  <link rel="stylesheet" href="https://stackedit.io/res-min/themes/base.css" />
  <script type="text/javascript" src="https://stackedit.io/libs/MathJax/MathJax.js?config=TeX-AMS_HTML"></script>
  <style>
  .container
  {
    background:#f6f7f9;
  }
  </style>
 </head>
   <body>
      <div class="container" style="background-color:#f6f7f9;">    <%= documentHTML %></div>
   </body>
</html>
于 2014-05-09T07:35:18.310 回答
0

试试这个：

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title><%= documentTitle %></title>
      <link rel="stylesheet" href="https://stackedit.io/res-min/themes/base.css" />
      <script type="text/javascript" src="https://stackedit.io/libs/MathJax/MathJax.js?config=TeX-AMS_HTML"></script>
   </head>
   <body>
      <div class="container" style="background-color:#f6f7f9;"><%= documentHTML %></div>
   </body>
</html>
于 2014-05-09T07:23:26.070 回答