Как изменить цвет заголовка и значения свойства Handlebars?

Question

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

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

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

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

html css node.js handlebars.js

3

flowover 27 Окт 2019 в 23:16

Answer 1

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

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

0

Ifaruki 27 Окт 2019 в 23:20

Answer 2

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

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

Затем вы можете стилизовать каждый класс по своему усмотрению ...

0

SeReGa 27 Окт 2019 в 23:21

Answer 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;
  }
  
.title:hover {
  color: red;
  }

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

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

0

Community 20 Июн 2020 в 12:12

Правильно ли я делаю CSS ... потому что он не меняется .... @ Tiago Martins Peres

–

flowover

27 Окт 2019 в 23:59

Li. список-заголовок {цвет: #fff; } li. список-значение {цвет: # 64a5b7; } li .list-title: hover li {цвет: # 64a5b7; }

–

flowover

27 Окт 2019 в 23:59

Если у вас есть классы list-title и list-value и вы хотите использовать селектор CSS: hover, то это CSS, .list-title { color: #fff; } .list-value { color: #64a5b7; } .list-title:hover { color: #64a5b7; }

–

Tiago Martins Peres

28 Окт 2019 в 00:05

Хорошая текучесть. Не забудьте проголосовать и принять в качестве ответа.

–

Tiago Martins Peres

28 Окт 2019 в 00:56

^^^^^^^ @flowover

–

Tiago Martins Peres

3 Ноя 2019 в 00:27

Как изменить цвет заголовка и значения свойства Handlebars?

3 ответа

Похожие вопросы

Новые вопросы

html