Как изменить цвет слова с помощью тега Span и CSS

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

В конечном счете, изменение цвета отдельного слова или небольшой группы слов в предложении легко с помощью CSS, и теги являются допустимым HTML, поэтому не беспокойтесь о том, что это какой-то хак. При таком подходе вы также избегаете использования устаревших тегов и атрибутов, таких как «шрифт», который является продуктом ушедшей эпохи HTML.

Эта статья для начинающих веб-разработчиков, которые, вероятно, плохо знакомы с HTML и CSS. Это поможет вам узнать, как использовать тег HTML и CSS для изменения цвета определенного текста на ваших страницах. При этом у этого метода есть некоторые недостатки, которые мы рассмотрим в конце этой статьи. А пока читайте, чтобы узнать, как изменить этот цвет текста. Это очень легко и должно занять около двух минут.

Пошаговая инструкция

  1. Откройте веб-страницу, которую вы хотите обновить, в своем любимом текстовом редакторе HTML. Это может быть программа, например Adobe Dreamweaver, или простой текстовый редактор, такой как Notepad, Notepad ++, TextEdit и т. Д.
  2. В документе найдите слова, которые вы хотите отображать другим цветом на странице. Для этого урока давайте используем некоторые слова, которые находятся внутри более крупного абзаца текста. Этот текст будет содержаться в паре тегов. Найдите одно из двух слов, цвет которых вы хотите отредактировать.
  3. Поместите курсор перед первой буквой в слове или группе слов, которые вы хотите изменить цвет. Помните, что если вы используете WYSIWYG-редактор, такой как Dreamweaver, вы сейчас работаете в режиме «просмотра кода».
  4. Давайте обернем текст, цвет которого мы хотим изменить, с помощью тега, включая атрибут класса. Весь абзац может выглядеть так:
     Это текст, на котором сосредоточено предложение. 
  5. Мы только что использовали встроенный элемент,, чтобы придать этому конкретному тексту «крючок», который мы можем использовать в CSS. Наш следующий шаг – перейти к нашему внешнему файлу CSS, чтобы добавить новое правило.
  1. В нашем CSS-файле давайте добавим:
  2.   .focus-text { 
  3.   color: # F00;  
  4.  }  
  5. Это правило установит этот встроенный элемент,, для отображения красным цветом. Если бы у нас был предыдущий стиль, который устанавливал бы текст нашего документа черным, этот встроенный стиль заставлял бы фокусируемый текст выделяться и выделяться другим цветом. Мы могли бы также добавить другие стили к этому правилу, возможно, выделив текст курсивом или жирным шрифтом, чтобы подчеркнуть его еще больше?
  6. Сохраните свою страницу.
  7. Протестируйте страницу в вашем любимом веб-браузере, чтобы увидеть изменения в действии.
  8. Обратите внимание, что в дополнение к некоторым веб-профессионалы предпочитают использовать другие элементы, такие как пары тегов или. Эти теги использовались специально для жирного шрифта и курсива, но были объявлены устаревшими и заменены на и. Тем не менее, теги по-прежнему работают в современных браузерах, поэтому многие веб-разработчики используют их в качестве хуков встроенного стиля. Это не самый плохой подход, но если вы хотите избежать каких-либо устаревших элементов, мы рекомендуем придерживаться тега для таких стилевых нужд.

Советы и вещи, которые нужно остерегаться

Хотя этот подход хорошо работает для небольших задач по стилю, например, если вам нужно изменить только один небольшой фрагмент текста в документе, он может быстро выйти из-под контроля. Если вы обнаружите, что ваша страница изобилует встроенными элементами, каждый из которых имеет уникальные классы, которые вы используете в своем файле CSS, вы можете делать это неправильно, помните, чем больше таких тегов на вашей странице, тем сложнее вероятно, будет поддерживать эту страницу в будущем. Кроме того, хорошая веб-типография редко имеет так много вариантов цвета и т. Д. По всей странице.

Оцените статью
Solutics.ru
Добавить комментарий