html — Подчеркивание текста при использовании CSS

спросил

Изменено 11 лет, 4 месяца назад

Просмотрено 57 тысяч раз

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

 div.usage { стиль шрифта: курсив; поле слева... поле справа... ; }
 

, а затем включил

Пояснение
в файл HTML. Это работает, как и ожидалось.

Насколько я понимаю, при использовании CSS контент и макет разделены. Как же тогда мне подчеркивать какой-то текст в моем объяснении? Насколько я понимаю, я должен избегать следующего:

Это очень важно.
.

  • html
  • css

Вы правы насчет разделения содержимого и макета, но в этом случае я бы обернул это тегом. Однако тег устарел. Я бы использовал что-то вроде этого:

 
Это очень важно.

и

 em { text-decoration:underline; }
 

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

Кроме того, подчеркивание текста обычно является плохой идеей, так как большинство людей считают подчеркнутый текст ссылками. Вместо этого я бы выделил его жирным шрифтом или, может быть, даже придал бы ему цвет фона.

1

Как вы сказали, HTML предназначен для контента, а CSS — для стилей. Таким образом, вам не нужно использовать стили в вашем HTML. В самом деле, когда вы думаете в HTML, вы должны думать не только о содержании, но и о семантике.

Итак, класс, который вы используете для своего div.usage выбран очень удачно, потому что он ничего не говорит о его стиле, но говорит о его семантике. А как насчет текста, который вы хотите подчеркнуть? Я бы сказал, что семантически это текст, который вы хотите выделить, и в HTML есть хороший элемент для этого:

. Затем в своем HTML вы можете переопределить стиль браузера по умолчанию для элементов (жирный шрифт) для подчеркивания, которое вы хотите.

 
Это очень важно.
сильный { вес шрифта: нормальный; оформление текста: подчеркивание; }

Если вы хотите использовать этот стиль только для выделенного текста внутри элемента div.usage , укажите более конкретно:

 .usage strong {
  вес шрифта: нормальный;
  оформление текста: подчеркивание;
}
 

Конечно, вы не хотите добавлять div в селектор (я имею в виду

.usage лучше, чем div. usage ). Таким образом, вы готовы, если вы собираетесь кодировать, например, список или праграф с семантикой использования .

Свойство «text-decoration: underline» позволяет убрать выделение текста.

Вы должны использовать один из этих тегов: или и стилизовать их в css.

 .usage strong { вес шрифта: полужирный; }
 

В своей разметке вы определяете контент, который хотите выделить ( ) или сильно подчеркнуть (

). См. http://www.w3.org/TR/html4/struct/text.html. Я бы не стал использовать подчеркивание для выделения, так как это может сбить пользователей с толку, думая, что это гиперссылка.

Небольшой дружеский совет: лучше не использовать подчеркивание в Интернете, так как очень часто путают с кликабельной ссылкой.

Я бы посоветовал использовать

 это важно
 

Который по умолчанию будет выделен жирным шрифтом.

Или, возможно, вы могли бы использовать желтый фон для текста, как маркер выделения…

 

текст выделенный текст

И поместите это в свой CSS

 диапазон.подсветка {
    цвет фона: #FF9;
  }
 

вы можете попробовать это:

 
Это очень важно.

css:

 .underline { text-decoration: underline; }
 
7

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

HTML

 

Это просто текст для проверки underline с помощью CSS.

CSS

 div p { стиль шрифта: курсив; }
div p span{украшение текста: подчеркивание;}
 

В настоящее время люди говорят, что разметку не следует использовать, но мало кто может подтвердить это фактическими аргументами (в отличие от цитирования предполагаемых авторитетов и использования отрицательно звучащих прилагательных).

Если вам действительно нужно подчеркивание (что обычно не очень хорошая идея в документах HTML, как указано здесь), то — самый простой и надежный способ. Вы по-прежнему можете позже решить, хотите ли вы использовать, скажем, жирный шрифт вместо подчеркивания, и тогда вы можете сделать это просто в CSS:

 u { украшение текста: нет; вес шрифта: полужирный; }
 

Для выделения другие методы почти всегда лучше, чем подчеркивание. Но бывают ситуации, когда подчеркивание является частью общепринятой системы обозначений (например, в фонетике или математике), и тогда вам может понадобиться использовать

(и вам не захочется полагаться на CSS).

2

Вы можете инкапсулировать текст, который хотите подчеркнуть, в span и укажите класс для этого диапазона

 .underline {
  украшение текста: подчеркивание;
}
Это очень важно.
2

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Нажимая «Опубликовать свой ответ», вы соглашаетесь с нашими условиями обслуживания и подтверждаете, что прочитали и поняли нашу политику конфиденциальности и кодекс поведения.

Свойство CSS: text-underline-position: `from-font` | Могу ли я использовать… Таблицы поддержки для HTML5, CSS3 и т. д.

Могу ли я использовать

Поиск ?

Свойство CSS: text-underline-position: `from-font`

  • Глобальное использование
    73,84% + 0% «=» 73,84%
IE
  1. 6 — 10: не поддерживается
  2. 11: не поддерживается
Edge
  1. 12 — 86: не поддерживается
  2. 87 — 112: Поддерживается
  3. 113: Поддерживается
Firefox
  1. 2–73: не поддерживается
  2. 31% — Supported»> 74–112: поддерживается
  3. 113: поддерживается
  4. 114–115: поддерживается
Chrome
  1. 4–86: не поддерживается
  2. 87–112: поддерживается
  3. 113: поддерживается
  4. 114–116: поддерживается
Safari
  1. 3.1–16.4: не поддерживается
  2. 16.5: не поддерживается
  3. 16.6: не поддерживается
  4. 90 209 TP: поддерживается
Opera
  1. 10–72: не поддерживается
  2. 73–97: поддерживается
  3. 03% — Supported»> 98: поддерживается
Safari на iOS
  1. 3.2–16.4: не поддерживается
  2. 16.5: не поддерживается
  3. 902 01
    Opera Mini
    1. все: поддержка неизвестна
    Браузер Android
    1. 2.1–4.4.4: не поддерживается
    2. 113: поддерживается
    Opera Mobile
    1. 12–12.1: не поддерживается
    2. 73: поддерживается
    Chrome для Android
    1. 113 : Поддерживается
    Firefox для Android
    1. 113: Поддерживается
    Браузер UC для Android
Автор записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *