Html подчеркивание текста: Тег | htmlbook.ru

 

  <голова>
    
    <стиль>
      охватывать {
        отображение: встроенный блок;
        нижняя граница: 1px сплошная #000;
        отступ снизу: 10px;
      }
    
  
  <тело>
    

      <диапазон>
          Lorem Ipsum — это просто текст-пустышка полиграфической и наборной индустрии. Lorem Ipsum был стандартным фиктивным текстом в отрасли с 1500-х годов, когда неизвестный печатник взял гранку шрифта и перемешал ее, чтобы сделать книгу образцов шрифтов.  Lorem Ipsum — это просто текст-пустышка полиграфической и наборной индустрии. Lorem Ipsum был стандартным фиктивным текстом в отрасли с 1500-х годов, когда неизвестный печатник взял гранку шрифта и перемешал ее, чтобы сделать книгу образцов шрифтов.
      
    
  
 

Попробуй сам »

Однако у вас могут возникнуть трудности с использованием border-bottom, так как он может не обеспечивать полный контроль над подчеркиванием. Чтобы иметь большую точность пикселей, вы можете использовать псевдоэлемент :after.

 а {
  текстовое оформление: нет;
  положение: родственник;
}

а: после {
  содержание: '';
  ширина: 100%;
  положение: абсолютное;
  слева: 0;
  внизу: 1 пиксель;
  ширина границы: 0 0 1px;
  стиль границы: сплошной;
} 

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

Пример увеличения отступа между текстом и его подчеркиванием с помощью псевдоэлемента ::after:

 

  <голова>
    
    <стиль>
      а {
        текстовое оформление: нет;
        положение: родственник;
      }
      а: после {
        содержание: '';
        ширина: 100%;
        положение: абсолютное;
        слева: 0;
        внизу: 1 пиксель;
        ширина границы: 0 0 1px;
        стиль границы: сплошной;
      }
    
  
  <тело>
    W3docs
    

      Lorem Ipsum — это просто текст-пустышка полиграфической и наборной индустрии. Lorem Ipsum был стандартным фиктивным текстом в отрасли с 1500-х годов, когда неизвестный печатник взял гранку шрифта и перемешал ее, чтобы сделать книгу образцов шрифтов.
    
  
 

Попробуй сам »

Невозможно увеличить расстояние между текстом и его подчеркиванием, если вы используете свойство text-decoration, установленное на «подчеркивание».

Текст

предыдущий следующий содержание характеристики индекс

Содержимое

• 16. 1 Отступ: свойство text-indent
• 16.2 Выравнивание: свойство text-align
• 16.3 Украшение
  • 16.3.1 Подчеркивание, зачеркивание, зачеркивание и мерцание: свойство text-decoration
• 16.4 Расстояние между буквами и словами: свойства ‘letter-spacing’ и ‘word-spacing’
• 16.5 Заглавные буквы: свойство text-transform
• 16.6 Белое пространство: свойство «белого пространства»
  • 16.6.1 Модель обработки «белое пространство»
  • 16.6.2 Пример двунаправленности со схлопыванием пробелов
  • 16.6.3 Детали управления и комбинирования символов

Свойства, определенные в следующих разделах, влияют на визуальное представление символов, пробелов, слов и абзацев.

Это свойство определяет отступ первой строки текста в блок-контейнере. Точнее, он определяет отступ первое поле, которое перетекает в поле первой строки блока. Коробка имеет отступ с относительно левого (или правого, при верстке справа налево) края линейный ящик. Пользовательские агенты должны отображать этот отступ как пустое место.

‘Text-indent’ влияет на строку только в том случае, если это первая отформатированная строка элемент. Например, первая строка анонимного блока состоит только из затрагивается, если он является первым дочерним элементом своего родительского элемента.

Значения имеют следующие значения:

<длина>

Отступ имеет фиксированную длину.

<процент>

Отступ представляет собой процент содержания ширина блока.

Значение text-indent может быть отрицательным, но могут быть ограничения, специфичные для реализации. Если значение text-indent отрицательное или превышает ширину блока, что первый блок , описанный выше, может переполнить блок. Значение «переполнения» повлияет виден ли такой текст, выходящий за пределы блока.

В следующем примере текстовый отступ равен 3em.

p { отступ текста: 3em }
 

Примечание. Поскольку свойство ‘text-indent’ наследуется, когда оно указано в блочный элемент, он повлияет на дочерние встроенные блочные элементы. По этой причине часто целесообразно указывать « text-indent: 0 ». на элементах, которые указаны ‘ display:inline-block ‘.

Это свойство описывает, как содержимое блока на встроенном уровне контейнер выровнен. Ценности имеют следующие значения:

слева, справа, по центру, по ширине

Слева, справа, по центру и по ширине текста соответственно, как описано в разделе о встроенном форматировании.

Блок текста представляет собой набор строк коробки. В случае «слева», «справа» и «по центру» это свойство указывает как блоки встроенного уровня в каждом блоке строки выравниваются по отношению к строке левая и правая стороны коробки; выравнивание не по отношению к области просмотра. В случае «оправдать», это свойство указывает, что блоки встроенного уровня должны быть заподлицо с обеих сторон линейной коробки, если это возможно, путем расширения или сжатия содержимое встроенных блоков, в остальном выровненное как для начального ценность. (См. также «межбуквенный интервал» и «межсловный интервал».)

Если элемент имеет вычисленное значение для «пробела» «pre» или ‘pre-wrap’, то ни глифы текстового содержимого этого элемента, ни его пустое пространство может быть изменено в целях оправдания.

Примечание. CSS может добавить способ выравнивания текста с помощью ‘white-space: pre-wrap’ в будущем.

Обратите внимание, что в этом примере, поскольку ‘text-align’ наследуется, все элементы уровня блока внутри элементов DIV с именем класса «важный» будут иметь встроенный контент по центру.

div.important {выравнивание текста: по центру}
 

Примечание. Фактический используемый алгоритм обоснования зависит от пользовательского агента и языка/сценария. текста.

Соответствующие пользовательские агенты могут интерпретировать значение ‘justify’ как ‘левое’ или ‘правое’, в зависимости от является ли направление записи элемента по умолчанию слева направо или справа налево соответственно.

16.3.1 Подчеркивание, зачеркивание, зачеркивание и мигание: «украшение текста» свойство

Имя:	украшение текста
Значение:	нет | [подчеркнуть || надчеркивание || линейный || мигать ] | наследовать
Исходный:	нет
Подходит для:	все элементы
По наследству:	нет (см. прозу)
Проценты:	Н/Д
Носитель:	визуальный
Расчетное значение:	как указано

Это свойство описывает декорации, которые добавляются к тексту элемента, используя цвет элемента. При указании или распространении на встроенный элемент он влияет на все блоки, сгенерированные этим элементом, и далее распространяется на любые блоки блочного уровня в потоке, которые разделяют встроенный (см. раздел 9.2.1.1). Но в CSS 2.2 не определено, будет ли украшение распространяется на таблицы блочного уровня. Для блок-контейнеров, которые устанавливают встроенное форматирование контексте декорации распространяются на анонимный встроенный элемент, обертывающий все дочерние элементы встроенного уровня блока контейнер. Для всех остальных элементов он распространяется на любой входящий поток. дети. Обратите внимание, что оформление текста не распространяется на плавающие элементы. и абсолютно позиционированных потомков, ни к содержимому атомарных потомки встроенного уровня, такие как встроенные блоки и встроенные таблицы.

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

Примечание. Если элемент E имеет обе видимости: hidden» и «text-decoration: underline», подчеркивание невидимо (хотя любое украшение родителя E видно .) Однако в CSS 2.2 не указано, отображается ли подчеркивание или невидимый в детях Э:

<диапазон>
 <диапазон>
  подчеркнуто или нет?
 

 

Ожидается, что это будет указано на уровне 3 CSS.

Свойство text-decoration элементов-потомков не может иметь никаких значений. влияние на украшение предка. При определении положения количества и толщины линий оформления текста пользовательские агенты могут учитывать размеры шрифта и доминирующие базовые линии потомков, но должны использовать одинаковая базовая линия и толщина на каждой линии. Относительное позиционирование потомок перемещает все украшения текста, влияющие на него, вместе с текст потомка; это не влияет на расчет стоимости украшения исходное положение на этой линии.

Значения имеют следующие значения:

нет

Не создает оформление текста.

подчеркивание

Каждая строка текста подчеркнута.

над чертой

Каждая строка текста имеет строку над ней.

проходной

Каждая строка текста имеет линию посередине.

мигает

Текст мигает (поочередно видимый и невидимый). Соответствующие пользовательские агенты может просто не мигать текст. Обратите внимание, что не мигающий текст это один из способов удовлетворить КПП 3. 3 WAI-UAAG.

Цвета, необходимые для оформления текста, должны быть получены из значение свойства ‘color’ элемента, на котором ‘text-decoration’ установлен. Цвет украшений должен оставаться неизменным, даже если элементы-потомки имеют разные значения «цвета».

Некоторые пользовательские агенты реализовали украшение текста с помощью распространение украшения на элементы-потомки, а не сохранение постоянной толщины и положения линии, как описано выше. Возможно, это было разрешено более свободной формулировкой в ​​CSS2. СВГ1, Пользовательские агенты только для CSS1 и только для CSS2 могут реализовывать старую модель. и по-прежнему заявляете о соответствии этой части CSS 2.2. (Это не применяются к UA, разработанным после выпуска этой спецификации.)

В следующем примере для HTML текстовое содержимое всех Элементы, действующие как гиперссылки (независимо от того, посещались они или нет), будут подчеркнуты:

.
a: посетили, a: ссылка {украшение текста: подчеркивание}
 

В следующей таблице стилей и фрагменте документа:

   blockquote {украшение текста: подчеркивание; цвет синий; }
   em { дисплей: блок; }
   процитировать { цвет: фуксия; }
 

   <цитата>
    

     <диапазон>
      Помогите помогите!
       Я под шапкой! 
       —ГвиФ 
     
    
   
 

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

На этой диаграмме показаны поля, задействованные в приведенном выше примере. округлый aqua line представляет собой анонимный встроенный элемент, обертывающий встроенный содержимое элемента абзаца, закругленная синяя линия представляет элемент span, а оранжевые линии представляют собой блоки.

Это свойство определяет интервал между текстовые символы. Значения имеют следующие значения:

нормальный

Интервал — это обычный интервал для текущего шрифта. Это значение позволяет агенту пользователя изменять пространство между символами для выравнивания текста.

<длина>

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

Алгоритмы интервалов между символами зависят от агента пользователя.

В этом примере пробел между символами в Элементы BLOCKQUOTE увеличены на «0,1em».

цитата { межбуквенный интервал: 0.1em }
 

В следующем примере пользовательский агент не разрешен изменить межсимвольный интервал:

blockquote { межбуквенный интервал: 0 см } /* То же, что и '0' */
 

Если результирующий пробел между двумя символами не совпадает с пространство по умолчанию, пользовательские агенты не должны использовать лигатуры.

Это свойство определяет поведение интервалов между словами. Значения имеют следующие значения:

обычный

Нормальный интервал между словами, определенный текущим шрифтом и/или UA .

<длина>

Это значение указывает на межсловный пробел в в дополнение к пробел по умолчанию между слова. Значения могут быть отрицательными, но могут быть ограничения, зависящие от реализации.

Алгоритмы интервалов между словами зависят от агента пользователя. Расстояние между словами также влияет выравнивание (см. свойство text-align). Расстояние между словами влияет на каждый пробел (U+0020) и неразрывный пробел. (U+00A0), оставленный в тексте после того, как правила обработки пробелов изменились. было применено. Влияние свойства на другой разделитель слов символы не определены. Однако общая пунктуация, символы с ширина нулевого продвижения (например, ноль с пробелом U+200B) и пробелы фиксированной ширины (например, от U+3000 и от U+2000 до U+200A) не затронутый.

В этом примере интервал между словами в элементах h2 равен увеличено на «1em».

h2 {интервал между словами: 1em}
 

Это свойство контролирует эффект капитализации текст элемента. Значения имеют следующие значения:

капитализировать

Переводит первый символ каждого слова в верхний регистр; другие персонажи не затрагиваются.

верхний регистр

Переводит все символы каждого слова в верхний регистр.

нижний регистр

Переводит все символы каждого слова в нижний регистр.

нет

Нет эффектов капитализации.

Фактическое преобразование в каждом случае письменного языка зависимый. См. BCP 47 ([BCP47]), чтобы узнать, на каком языке элемент.

Только символы, принадлежащие «двухкамерным шрифтам» [UNICODE], являются затронутый.

В этом примере весь текст в элементе h2 преобразуется в верхний регистр. текст.

h2 {преобразование текста: верхний регистр}
 

Это свойство объявляет, как пустое пространство внутри элемента обрабатывается. Значения имеют следующие значения:

обычный

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

до

Это значение предотвращает свертывание последовательностей пользовательских агентов. белого пространства. Строки разрываются только на сохраненных символах новой строки.

сейчас

Это значение сворачивает пробелы, как для «нормального», но подавляет разрывы строк внутри текста.

предварительная упаковка

Это значение предотвращает свертывание последовательностей пользовательских агентов. белого пространства. Строки разбиваются на сохраненные символы новой строки, и по мере необходимости заполнять строчные боксы.

предварительная линия

Это значение указывает агентам пользователя сворачивать последовательности белых пространство. Строки разбиваются на сохраненные символы новой строки, и как необходимые для заполнения полей строки.

Новые строки в исходном коде могут быть представлены возвратом каретки (U+000D), перевод строки (U+000A) или и то и другое (U+000D U+000A) или каким-либо другим способом механизм, идентифицирующий начало и конец сегментов документа, такие как токены SGML RECORD-START и RECORD-END. CSS модель обработки «пробелов» предполагает, что все новые строки были нормализованы для перевода строки. UA, которые распознают другие представления новой строки, должны применять белый правила обработки пространства, как если бы эта нормализация имела место. Если нет правила новой строки указаны для языка документа, каждая каретка возврат (U+000D) и последовательность CRLF (U+000D U+000A) в тексте документа рассматривается как одиночный символ перевода строки. Это правило нормализации по умолчанию также применяется к сгенерированным содержание.

UA должны распознавать перевод строки (U+000A) как символы новой строки. UA может дополнительно рассматривать другие символы принудительного разрыва как новую строку символов на UAX14.

В следующих примерах показано ожидаемое поведение пробелов. из элементов PRE и P и атрибута «nowrap» в HTML.

pre { пробел: pre }
p { пробел: нормальный }
td[nowrap] { пробел: nowrap }
 

Кроме того, эффект элемента HTML PRE с нестандартным 9Атрибут 0042 «wrap» демонстрируется на следующем примере:

pre[wrap] { пробел: pre-wrap }
 

16.6.1 Модель обработки «белого пространства»

Для каждого встроенного элемента (включая анонимные встроенные элементы) выполняются следующие шаги, обрабатывая символы форматирования двунаправленного текста, как если бы их не было:

1. Каждая вкладка (U+0009), возврат каретки (U+000D) или пробел (U+0020) символ, окружающий символ перевода строки (U+000A), удаляется, если «white-space» имеет значение «normal», «nowrap» или «pre-line».
2. Если для «пробелов» установлено значение «pre» или «pre-wrap», любая последовательность пробелы (U+0020), не разделенные границей элемента, рассматриваются как последовательность неразрывных пробелов. Однако для «предварительного переноса» разрыв строки возможность существует в конце последовательности.
3. Если для параметра «белое пространство» установлено значение «нормальный» или «теперь», перевод строки символы преобразуются для цели рендеринга в один из следующие символы: пробел, пробел нулевой ширины символ (U+200B) или без символа (т. е. не отображается), по алгоритмам, специфичным для UA, на основе скрипта контента.
4. Если для параметра «Пробел» установлено значение «Обычный», «Текущий» или «Предварительный»,
   1. каждая вкладка (U+0009) преобразуется в пробел (U+0020)
   2. любой пробел (U+0020) после другого пробела (U+0020) — даже пробел перед строкой, если этот пробел также имеет ‘white-space’ установлен в ‘normal’, ‘nowrap’ или ‘pre-line’ — удаляется.

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

Поскольку каждая строка выложена,

1. Если пробел (U+0020) в начале строки имеет пробел установлен на «нормальный», «теперь» или «прелайн», он удаляется.
2. Все вкладки (U+0009) отображаются как сдвиг по горизонтали, вверх по начальному краю следующего глифа со следующей позицией табуляции. Вкладка остановки происходят в точках, кратных 8-кратной ширине пробел (U+0020), отображаемый в шрифте блока из блока край начального содержимого.
3. Если для пробела (U+0020) в конце строки установлено значение пробела «обычный», «новый» или «предварительный», он также удаляется.
4. Если пробелы (U+0020) или табуляции (U+0009) в конце строки ‘white-space’ установлено в ‘pre-wrap’, UA могут визуально свернуть их.

Плавающие и абсолютно позиционированные элементы не вводят линию возможность взлома.

Примечание. CSS 2.2 не полностью определяет, где возникают возможности разрыва строки.

16.6.2 Пример двунаправленности со схлопыванием пробелов

Учитывая следующий фрагмент разметки, обращая особое внимание на пробелы (с различным фоном и границами для выделения и идентификации):

 
     А  Б  В
 

…где элемент представляет вложение слева направо и элемент представляет вложение справа налево, и предполагая, что свойство ‘white-space’ установлено в ‘normal’, приведенная выше модель обработки приведет к следующему:

• Пробел перед буквой B ( ) будет объединен с пробелом после буквы A ( ).
• Пробел перед C ( ) будет совмещен с пробелом после B ( ).

Это оставит два пробела, один после буквы А слева направо. уровень встраивания, и один после B в встраивании справа налево уровень. Затем это отображается в соответствии с двунаправленным кодом Unicode.