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

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

div.usage { font-style: italic; margin-left... margin-right... ; }

а затем включил <div class="usage">Explanation</div> в файл HTML. Это работает как ожидалось.

Я понимаю, что при использовании CSS содержимое и макет разделяются. Как же тогда я хотел бы подчеркнуть некоторый текст в моем объяснении? Я понимаю, что я должен избегать следующего: <div class="usage">This is <u>very</u> important.</div>.

Ответ 1

Вы правы в разделении содержимого и макета, но в этом случае я бы обернул его в тег. Тем не менее тег <u/> устарел. Что я буду использовать, это примерно так:

<div class="usage">This is <em>very</em> important.</div>

em { text-decoration:underline; }

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

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

Ответ 2

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

Таким образом, класс, который вы используете для своего div.usage, очень хорошо выбран, потому что он ничего не говорит о его стиле, но о его семантике. Теперь, как насчет текста, который вы хотите подчеркнуть? Я бы сказал, что семантически это текст, который вы хотите выделить, и HTML имеет хороший элемент для этого: <strong>. Затем в вашем HTML вы можете переопределить стиль браузера по умолчанию для элементов <strong> (полужирный) для подчеркивания, которое вы хотите.

<div class="usage">This is <strong>very</strong> important.</div>

strong {
  font-weight: normal;
  text-decoration: underline;
}

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

.usage strong {
  font-weight: normal;
  text-decoration: underline;
}

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

Ответ 3

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

.usage strong { font-weight: bold; }

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

Ответ 4

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

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

<strong>this is important</strong>

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

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

<p>text <span class='highlight'>hightlighed</span> text</p>

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

  span.highlight {
    background-color: #FF9;
  }

Ответ 5

вы можете попробовать следующее:

<div class="usage">This is <span class="underline">very</span> important.</div>

CSS

.underline { text-decoration: underline; }

Ответ 6

Свойство "text-decoration: underline" позволяет вам удалять текст.

Ответ 7

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

HTML

<div>
    <p>
        This is just a text to check <span>underline</span> with CSS
    </p>

</div>

CSS

div p { font-style: italic; }

div p span{ text-decoration: underline;}

Ответ 8

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

u { text-decoration: none; font-weight: bold; }

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

Ответ 9

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

.underline {
  text-decoration:underline;
}

<div class="usage"> This is <span class='underline'>very</span> important.</div>