Как я могу использовать более одного стиля на HTML-метке? - PullRequest
Новая
       7

Как я могу использовать более одного стиля на HTML-метке?

0 голосов
/ 01 ноября 2018

Следующий код HTML работает на моем GSP, чтобы сделать метку полужирным , но я также хотел бы назначить нижнее поле.

Вот текущий код моей метки: 

<label class="control-label col-sm-6" style="font-weight: bold;" for="customerSection">
                    Most Updated Customer Information Available
</label>

Я также хотел бы установить следующий стиль на этом ярлыке: 

style="margin-bottom: 0.3cm"

Однако мне еще не нужно было назначать оба ярлыка. Как бы я назначил этому ярлыку как жирный, так и нижний край?

Ответы [ 4 ]

0 голосов
/ 01 ноября 2018

Вы должны добавить все CSS, как показано ниже, так как встроенный CSS не является хорошей практикой. Я предлагаю вам дать все стили, как показано ниже, в другом файле или в том же файле внутри тега "style" 

label.control-label.col-sm-6 {
  margin-bottom: 0.3cm;
  font-weight: bold;
  float: left;
}
<label class="control-label col-sm-6" for="customerSection">
                    Most Updated Customer Information Available
</label>
0 голосов
/ 01 ноября 2018

Вы можете добавить синтаксис css после точки с запятой 

<label class="control-label col-sm-6" style="font-weight: bold;margin-bottom: 0.3cm;" for="customerSection">
                    Most Updated Customer Information Available
</label>
0 голосов
/ 01 ноября 2018

; Символ в CSS (язык программирования, на котором пишутся стили) означает конец оператора. Имея в виду; чтобы изменить несколько стилей, вы должны просто разделить их этим символом.

Измененный HTML: 

<label class="control-label col-sm-6" style="font-weight: bold; margin-bottom: 1em;" for="customerSection">
                    Most Updated Customer Information Available
</label>

Для определения размера используйте em, px или%.

Дополнительным способом выделения жирным шрифтом является также окружение текста тегами, например: 

<label class="control-label col-sm-6" style="margin-bottom: 1em;" for="customerSection">
                        <strong>Most Updated Customer Information Available</strong>
</label>
0 голосов
/ 01 ноября 2018 
<label class="control-label col-sm-6" style="font-weight: bold;margin-bottom: 0.3cm" for="customerSection">
                Most Updated Customer Information Available </label>
...