如何在不影响 Blogger 的主题样式标签的情况下将我的 html 代码添加到 Blogger post 中？

Question

我是 html 和 css 的新手。我创建了一个小代码用于我的博客 post（在 Blogger 中）。问题是当我将代码添加到我的 post 时，链接到我的代码的样式 sheet 与博客的主题和主题以及我的代码行为不正常。

例如，博客 "container" 标签中的内容样式（可能出现在菜单、侧边栏、页脚等中）根据样式 sheet 而变化，即代码链接到。同样，post 上的所有输入字段都会根据我添加的代码 css 更改其样式。甚至 post 的边框也采用代码输入字段的边框样式！

有什么方法可以让样式 sheet 分开，这样它只适用于代码内容的容器和输入标签，而不会影响所有其他内容预设的容器和输入标签在那个页面上？

<style>
    * {
        box-sizing: border-box;
    }

    input[type=text], select, textarea {
        width: 100%;
        padding: 12px;
        border: 2px solid #ccc;
        border-radius: 4px;
        resize: vertical;
     font-family: Sans-serif;
     font-size: 19px;
    }



    .container {
        border-radius: 5px;
        background-color: white;
        padding: 20px;
     

        float: center;
        width: auto;
        height: auto;
        margin: 10px;
        border: 3px solid black;
     

    }
     

</style>

<code>
    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="http://myhosting.com/style.css">

    </head>
    <body>


    <div class="container">
      <form>
      
      
          <div class="row">
           <div class="col-25"><label for="fname">Enter First name</label></div>
              <div class="col-75"><input type="text" id="fname" name="firstname" placeholder="Enter ..."></div>
       </div>
       
       <div class="row">
           <div class="col-25"><label for="fname">Enter Last name</label></div>
              <div class="col-75"><input type="text" id="lname" name="lasttname" placeholder="Enter.."></div>
       </div>
      
     
      </form>
      

    </div>

    </body>
    </html>

</code>

Answer 1

您需要将自定义选择器（classes 或 id）添加到 HTML 并在样式表中使用它们来添加新样式，如下例所示。

=17=]

在这里，您将 class="custom-class-name" 添加到您在 html 中的输入：

  <div class="row">
      <div class="col-25"><label for="fname">Enter Last name</label></div>
      <div class="col-75"><input class="custom-class-name" type="text" id="lname" name="lasttname" placeholder="Enter.."></div>
  </div>

然后你使用这个class为其添加新样式：

   input.custom-class-name {
     width: 50%;
     border: 2px solid red;
   }

    * {
        box-sizing: border-box;
    }

    input[type=text], select, textarea {
        width: 100%;
        padding: 12px;
        border: 2px solid #ccc;
        border-radius: 4px;
        resize: vertical;
     font-family: Sans-serif;
     font-size: 19px;
    }

    .container {
        border-radius: 5px;
        background-color: white;
        padding: 20px;
        float: center;
        width: auto;
        height: auto;
        margin: 10px;
        border: 3px solid black;
    }
   
   input.custom-class-name {
   width: 50%;
   border: 2px solid red;
   }

<code>
    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="http://myhosting.com/style.css">

    </head>
    <body>


    <div class="container">
      <form>
      
      
          <div class="row">
           <div class="col-25"><label for="fname">Enter First name</label></div>
              <div class="col-75"><input type="text" id="fname" name="firstname" placeholder="Enter ..."></div>
       </div>
       
       <div class="row">
           <div class="col-25"><label for="fname">Enter Last name</label></div>
              <div class="col-75"><input class="custom-class-name" type="text" id="lname" name="lasttname" placeholder="Enter.."></div>
       </div>
      
     
      </form>
      

    </div>

    </body>
    </html>

</code>

另一种方法是为您添加内联样式html（这实际上不是很好的方法，但它有效）：

  <div class="row">
      <div class="col-25"><label for="fname">Enter Last name</label></div>
      <div class="col-75"><input style="width: 50%; border: 2px solid red;" type="text" id="lname" name="lasttname" placeholder="Enter.."></div>
  </div>

但这是 HTML and CSS 的基础知识，您应该阅读（单击提供的链接）。

如何在不影响 Blogger 的主题样式标签的情况下将我的 html 代码添加到 Blogger post 中？

How to add my html code into Blogger post without affecting Blogger's theme style tags?

html

css

blogger