如何在不影響Blogger主題樣式標簽的情況下將我的html代碼添加到Blogger帖子中？

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），並在樣式表中使用它們，以添加新樣式，如以下示例所示。

在這里，您將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>

然后使用此類為它添加新樣式：

   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 個解決方案

解決方案1
0 已采納 2018-04-08 07:40:06

如何在不影響Blogger主題樣式標簽的情況下將我的html代碼添加到Blogger帖子中？

問題描述

1 個解決方案

解決方案1 0 已采納 2018-04-08 07:40:06

解決方案1
0 已采納 2018-04-08 07:40:06