Как стилизовать каждый символ в заголовке - PullRequest
Новая
       6

Как стилизовать каждый символ в заголовке

2 голосов
/ 29 марта 2020

Я играю со стилевыми символами и хочу попробовать стилизовать этот заголовок, давая каждой точке между буквами цвета фактических ДРУЗЕЙ lo go. Я хотел знать, что будет лучшим способом сделать это. Можно ли изменить цвета символов в HTML? Если да, то делает ли p теги с разными идентификаторами единственным способом стилизовать точки? Вот заголовок: 

<header> F&#8226;R&#8226;I&#8226;E&#8226;N&#8226;D&#8226;S </header>

Примечание: Я хотел бы использовать только HTML и CSS, чтобы сделать это не Javascript или JQuery

Ответы [ 3 ]

1 голос
/ 29 марта 2020

Я бы порекомендовал вам окружить каждый символ тегом <span> и нацелить его индивидуально на "id".

Это будет выглядеть примерно так: <header> F<span id="red">&#8226;</span>R<span id="blue">&#8226;</span>I&<span id="green">#8226;</span>E<span id="yellow">&#8226;</span>N<span id="orange">&#8226;</span>D<span id="brown">&#8226;</span>S </header>

Вы не хотите использовать <p> теги для стилизации символов, потому что они будут создавать новые строки между каждой буквой.

0 голосов
/ 29 марта 2020

Вы можете использовать span теги, которые имеют class атрибуты и согласно CSS правилам для классов (которые могут быть использованы повторно) 

.red {
  color: red;
}

.blue {
  color: blue;
}

.green {
  color: green;
}

.yellow {
  color: yellow;
}

.orange {
  color: orange;
}

.brown {
  color: brown;
}
<header> F<span class="red">&#8226;</span>R<span class="blue">&#8226;</span>I<span class="green">&#8226;</span>E<span class="yellow">&#8226;</span>N<span class="orange">&#8226;</span>D<span class="brown">&#8226;</span>S </header>
0 голосов
/ 29 марта 2020

Просто поместите каждый последующий или нужный знак в тег span и раскрасьте его с помощью атрибутов класса или встроенного стиля, как показано на последних двух последних кодах. 

.red{
color: red;
}
.blue{
color: blue;
}
.green{
color: green;
}
.brown{
color: brown;
}
.orange{
color: orange;
}
<header> <span class="red">F</span>&#8226;<span class="green">R</span>&#8226;<span class="brown">I</span>&#8226;<span class="blue">E</span>&#8226;<span style="color:yellow">D</span>&#8226;<span style="color:gray">S</span> </header>
...