Лучший способ изменить цвет шрифта на полпути через абзац?

Мне было интересно, как лучше всего изменить цвет шрифта какого-либо текста, который появляется наполовину через абзац.

Например, у меня есть абзац белого текста, но я хочу, чтобы несколько слов в середине абзаца были оранжевыми, чтобы они выделялись, но затем продолжайте с белым текстом после этого, что будет лучший способ достичь этого?

Спасибо заранее!

Ответы

Ответ 1

<span> позволит вам стилизовать текст, но он не добавляет семантический контент.

Как вы подчеркиваете какой-то текст, кажется, вам лучше обслуживать, обертывая текст в <em></em> и используя CSS, чтобы изменить цвет элемента <em>. Например:

CSS

.description {
  color: #fff;
}

.description em {
  color: #ffa500;
}

Разметка

<p class="description">Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. Sed hendrerit mollis varius. Etiam ornare placerat 
massa, <em>eget vulputate tellus fermentum.</em></p>

В самом деле, я бы постарался, чтобы избежать элемента <span>, поскольку он совершенно бессмыслен для всего, что не отображает вашу таблицу стилей (боты, программы чтения с экрана, luddites, которые отключают стили, парсеры и т.д.). ) или визуализирует его неожиданными способами (личные таблицы стилей). Во многих отношениях это не лучше, чем использование элемента <font>.

.description {
  color: #000;
}

.description em {
  color: #ffa500;
}
<p class="description">Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. Sed hendrerit mollis varius. Etiam ornare placerat 
massa, <em>eget vulputate tellus fermentum.</em></p>

Ответ 2

<span style="color:orange;">orange text</span>

Я единственный способ запретить тег шрифта.

Ответ 3

Nornally для этого используется тег с изменением стиля.

Как <p>This is my text <span class="highlight"> and these words are different</span></p>,

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

(например.: с

<style type="text/css">
  .highlight {color: orange}

</style>

в заголовке. Избегайте использования тега <font /> для этого любой ценой.: -)

Ответ 4

оберните <span> вокруг этих слов и стиля соответствующим цветом

now is the time for <span style='color:orange'>all good men</span> to come to the

Ответ 5

Вы также можете просто добавить тег font внутри тега p.

лист CSS:

<style type="text/css">
   p { font:15px Arial; color:white; }
</style>

и в HTML-странице:

<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. 
    <font color="red"> 
          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris     nisi ut aliquip ex ea commodo consequat. 
    </font>
Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>

Это работает для меня. Но если вы нуждаетесь в модификации, см. w3schools для большего использования:)