За допомогою CSS легко встановити колір тексту в документі. Якщо ви хочете, щоб абзаци на вашій сторінці відображались у певному кольорі, ви просто вказуєте, що у вашій зовнішній таблиці стилів і браузер відображатиме ваш текст у вибраному кольорі. Що відбувається тоді, коли ви хочете змінити колір лише одного слова (або, можливо, лише кількох слів) в абзаці тексту? Для цього вам потрібно буде використовувати вбудований елемент, такий як тег. Зрештою, змінити колір одного слова або невеликої групи слів у реченні легко за допомогою CSS, а теги є дійсним HTML, тому не хвилюйтеся, що це якийсь хак. За допомогою цього підходу ви також уникаєте використання застарілих тегів та атрибутів, таких як «шрифт», що є продуктом минулої епохи HTML. Ця стаття призначена для початківців веб-розробників, які, ймовірно, не знайомі з HTML та CSS. Це допоможе вам навчитися використовувати тег HTML та CSS для зміни кольору певного тексту на ваших сторінках. З огляду на це, у цього методу є деякі недоліки, які ми розглянемо в кінці цієї статті. Поки що читайте далі, щоб дізнатися кроки щодо зміни цього кольору тексту. Це дуже просто, і це займе близько двох хвилин.
Змістовий покажчик
Покрокова інструкція
- Відкрийте веб-сторінку, яку потрібно оновити, у вашому улюбленому текстовому редакторі HTML. Це може бути програма, така як Adobe Dreamweaver, або простий текстовий редактор, такий як Блокнот, Блокнот ++, TextEdit тощо.
- У документі знайдіть слова, які потрібно відобразити на сторінці іншим кольором. Для цього підручника давайте використаємо кілька слів, які містяться в більшому абзаці тексту. Цей текст буде міститися в парі тегів. Знайдіть одне з двох слів, колір яких ви хочете редагувати.
- Помістіть курсор перед першою літерою у слові чи групі слів, для яких потрібно змінити колір. Пам’ятайте, якщо ви використовуєте редактор WYSIWYG, такий як Dreamweaver, ви зараз працюєте в режимі «перегляду коду».
- Нехай обернемо текст, колір якого ми хочемо змінити, тегом, включаючи атрибут класу. Весь абзац може виглядати так: Це текст, на якому зосереджено в реченні.
- Ми щойно використали вбудований елемент, щоб надати цьому конкретному тексту «гачок», який ми можемо використовувати в CSS. Наш наступний крок – перейти до нашого зовнішнього файлу CSS, щоб додати нове правило.
- У нашому CSS-файлі додамо:
- .focus-text {
- колір: # F00;
- }
- Це правило встановлює, що вбудований елемент -, відображається червоним кольором. Якби у нас був попередній стиль, який встановлював текст нашого документа чорним, цей вбудований стиль призвів би до фокусування тексту інтервалу та виділення іншого кольору. Ми могли б також додати до цього правила інші стилі, можливо, зробити текст курсивом або жирним, щоб ще більше підкреслити його?
- Збережіть свою сторінку.
- Перевірте сторінку у своєму улюбленому веб-браузері, щоб побачити зміни, що вступили в силу.
- Зауважте, що окрім, деякі веб-професіонали вирішили використовувати інші елементи, такі як пари або теги. Раніше ці теги були виділені напівжирним шрифтом та курсивом, але були застарілі та замінені на та. Теги все ще працюють у сучасних браузерах, однак, тому багато веб-розробники використовують їх як вбудовані гачки для стилізації. Це не найгірший підхід, але якщо ви хочете уникнути застарілих елементів, радимо дотримуватися тегу для таких типів стилів.
Поради та речі, на які слід стежити
Хоча такий підхід чудово підходить для невеликих потреб у стилістиці, наприклад, якщо вам потрібно змінити лише один невеликий фрагмент тексту в документі, він може швидко вийти з-під контролю. Якщо ви виявите, що ваша сторінка завалена вбудованими елементами, усі з яких мають унікальні класи, які ви використовуєте у своєму файлі CSS, можливо, ви робите це неправильно. Пам’ятайте, чим більше цих тегів на вашій сторінці, тим складніше ймовірно, буде підтримувати цю сторінку вперед. Крім того, хороша веб-друкарня рідко має стільки варіантів кольорів тощо на всій сторінці.