Question

我是html和css的新手。我创建了一个小代码，可以在我的博客文章中使用（在Blogger中）。问题是当我将代码添加到我的帖子中时，链接到我的代码的样式表与博客的主题和主题交互，我的代码行为不正确。

例如，博客的“容器”标签中的内容样式（可能存在于菜单，侧栏，页脚等中）根据代码链接的样式表而变化。同样，该帖子上的所有输入字段都会根据我添加的代码的css更改其样式。甚至帖子的边框也采用代码输入字段的边框样式！

有没有办法让样式表分开，以便它只适用于代码内容的容器和输入标签，而不影响该页面上预设的所有其他内容的容器和输入标签？

<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

要做到这一点，您需要在HTML中添加自定义选择器（类或ID），并在样式表中使用它们来添加新样式，如下例所示。

在这里，您可以在html中添加class="custom-class-name"输入：

  <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>

然后使用此类为其添加新样式：

   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和CSS的基础（点击提供的链接）。

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

1 个答案: