У меня есть следующий список:

<li>Equipment Area:{{equipment_area}}</li>
<li>Equipment Type: {{equipment_type}}</li>
<li>Manufacturer: {{manufacturer}}</li>
<li>Model Number: {{model_number}}</li>
<li>Serial Number: {{serial_number}}</li>
<li>Service: {{service}}</li>
<li>Capacity: {{capacity}}</li>
<li>Comments: {{general_comments}}</li>
<li>Total Cost: {{total_of_new_installation}}</li>

Попытавшись изменить цвет шрифта заголовков на синий, я добавил несколько встроенных стилей:

<li style="blue">Equipment Area:{{equipment_area}}</li>

Однако, когда я вставляю встроенный стиль, как показано выше, весь элемент списка (заголовок и соответствующее значение) меняется на синий.

Мне бы хотелось, чтобы заголовок был синим, а значение шаблона - белым. Как это может быть сделано?

2
flowover

3 ответа

Используя встроенный стиль, вы можете просто использовать свойство color , чтобы указать цвет текста внутри HTML-тег span .

<li><span style="color: blue">Equipment Area:</span><span style="color: white">{{equipment_area}}</span></li>
<li><span style="color: blue">Equipment Type:</span><span style="color: white">{{equipment_type}}</span></li>
<li><span style="color: blue">Manufacturer:</span><span style="color: white">{{manufacturer}}</span></li>
<li><span style="color: blue">Model Number:</span><span style="color: white">{{model_number}}</span></li>

Чтобы избежать повторения (переход к каждому элементу строки с добавлением встроенного стиля), лучше добавить классы заголовка и свойств к диапазонам и стилю в CSS, например, так:

.title {
  color: blue;
  }

.value {
  color: white;
  }
<li>
  <span class="title">Equipment Area:</span>
  <span class="value">{{equipment_area}}</span>
</li>

<li>
  <span class="title">Equipment Type:</span>
  <span class="value">{{equipment_type}}</span>
</li>

<li>
  <span class="title">Manufacturer:</span>
  <span class="value">{{manufacturer}}</span>
</li>

<li>
  <span class="title">Model Number:</span>
  <span class="value">{{model_number}}</span>
</li>

оберните каждую часть в span и присвойте ей класс, например так:

<li>
   <span class="list-title">Equipment Area:</span>
   <span class="list-value">{{equipment_area}}</span>
</li>

Тогда вы можете стилизовать каждый класс, как вы хотите ...

Вы можете попробовать это так:

<li style="blue">Equipment Area:<p style="color: white;">{{equipment_area}}</p></li>
58582990