Как добавить мой HTML-код в сообщение Blogger, не затрагивая теги стиля темы Blogger?

avatar
Oklas Mathew
8 апреля 2018 в 07:23
473
1
0

Я новичок в 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>
Источник

Ответы (1)

avatar
mpro
8 апреля 2018 в 07:40
0

Чтобы сделать это, вам нужно добавить пользовательские селекторы (классы или идентификаторы) в ваш HTML и использовать их в своей таблице стилей для добавления новых стилей, как в примере ниже.

Здесь вы добавляете 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, которые вы должны прочитать (щелкните предоставленные ссылки).