Подчеркивание пунктиром текста css: Как сделать пунктирное подчеркивание текста?

Нестандартное подчеркивание — Xiper

Автор: Евгений Рыжков Дата публикации:

Задача

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

• цвет подчеркивания ссылки отличается от цвета самой ссылки
• сделать подчеркивание не сплошной линией (например, пунктирной)

Когда на странице много ссылок близко расположенных друг к другу, все их подчеркивания мешают восприимчивости текста, а иногда откровенно раздражают:

налепленные ссылки на europages

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

приглушенное подчеркивание на livejournal.ru

пунктирное подчеркивание на b2b-club.

ru

Решение

Для примера сделаем цвет подчеркивания отличным от цвета текста ссылки, плюс сразу сделаем его пунктиром. Т.к. напрямую нельзя влиять на цвет и вид подчеркивания ссылки, воспользуемся свойством border-bottom:

a {
color: #FF6600;
text-decoration: none;
border-bottom: 1px dashed #3399FF;
}

Очень простое решение. Таким же образом можно сделать любого вида подчеркивание используя свойство background-image при заданном background-position: left bottom.

Но данное решение не всегда подходит. Например, нужно оформить следующую ссылку:

При чем картинка должна быть тоже кликабильной. Попробуем простой путь:

a {
color: #FF6600;
text-decoration: none;
border-bottom: 1px dashed #3399FF;
background: url(path-to/wheel.png) no-repeat;
padding-left: 47px;
}

Жаль, но такой вариант в данном случае не подойдет — подчеркивание у нас бордюром, а бордюр тянется по всей ширине элемента:

IE7 оказался более тендитным к применению свойств чисто блочных (padding-top и padding-bottom) к строчному элементу:

В общем, придется немного усложнить html код ровно на один элемент. Для этого возьмем нейтральный — span:

<a href="#"><span>Авто</span></a>

.wheel {
color: #FF6600;
text-decoration: none;
background: url(path-to/wheel.png) no-repeat;
padding: 8px 0 8px 47px;
font-size: 16px;
font-weight: bold;
color: #084463;
zoom: 1; /* spacial for ie 7 */
}
.wheel span {
border-bottom: 1px solid #b7d2e0;
}

Демо пример. Проверено в:

• IE 6-7
• Firefox 3
• Opera 9.5 — 10
• Safari 4.0

Заметки

• В данном примере для IE сработал zoom (который в идеале лучше вынести в отдельный css, подключенный условными комментариями). Но он не всегда помогает. Если с zoom возникли какие-то проблемы (например, починило подчеркивание, но сломало верстку) заменяем zoom на position: relative.
• Такой прием можно применять не только к ссылкам.

Подчеркнуть содержимое ячеек, целые ячейки или строки на

Excel для Microsoft 365 Excel 2021 Excel 2019 Excel 2016 Excel 2013 Excel 2010 Excel 2007 Еще. ..Меньше

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

1. Выполните одно из следующих действий:

   • Чтобы подчеркнуть весь текст или числа в диапазон или диапазон, вы выберите эту ячейку или диапазон ячеек.

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

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

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

2. На вкладке Главная в группе Шрифт

   сделайте следующее:

   • Чтобы применить один подчеркнутую линию, нажмите кнопку Подчеркнуть .

   • Чтобы применить другой стиль подчеркнутого, например двойное подчеркнутое, одно или двойное подчеркнутое (подчеркнутое, которое заполняет ширину ячейки), нажмите кнопку кнопку запуска диалогового окна рядом с полем Шрифт, а затем в поле Подчеркнуть выберите нужный стиль.

1. Вы выберите ячейку, диапазон или строки, которые нужно подчеркнуть. Дополнительные сведения см. в статье Выбор ячеек, диапазонов,строк или столбцов\n на\n.

2. На вкладке Главная в группе Шрифт щелкните стрелку рядом с кнопкой Нижняя граница , а затем выберите нижний стиль границы на палитре.

1. На вкладке Вставка в группе элементов Иллюстрации нажмите кнопку Фигуры.

2. В области Линиивыберите .

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

   Чтобы нарисовать совершенно прямую линию, перетащите ее, удерживая на удержании shift.

4. Чтобы изменить форматирование линии, щелкните ее.

   Отобразит вкладку Средства рисованияи добавит вкладку

   Формат.

5. На вкладке Формат в группе Стили фигур выберите нужные параметры форматирования.

Дополнительные сведения

Вы всегда можете задать вопрос специалисту Excel Tech Community или попросить помощи в сообществе Answers community.

text-underline-position — CSS: Каскадные таблицы стилей

Свойство CSS text-underline-position указывает положение подчеркивания, которое устанавливается с использованием значения

подчеркивания свойства text-decoration .

 /* Одно ключевое слово */
позиция подчеркивания текста: авто;
позиция подчеркивания текста: под;
позиция подчеркивания текста: слева;
позиция подчеркивания текста: справа;
/* Несколько ключевых слов */
позиция подчеркивания текста: слева;
позиция подчеркивания текста: прямо под;
/* Глобальные значения */
позиция подчеркивания текста: наследовать;
позиция подчеркивания текста: начальная;
позиция подчеркивания текста: вернуться;
позиция подчеркивания текста: вернуть слой;
положение подчеркивания текста: не установлено;
 

Значения

авто

Пользовательский агент использует собственный алгоритм для размещения строки на или под базовой линией алфавита.

от шрифта

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

ниже

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

слева

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

справа

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

автопост Нестандартный Экспериментальный

Синоним auto , который следует использовать вместо него.

выше Нестандартный

Устанавливает строку над текстом. При использовании восточноазиатского текста использование ключевого слова auto приведет к аналогичному эффекту.

ниже Нестандартный

Устанавливает строку под текстом. При использовании с буквенным текстом использование ключевого слова auto приведет к аналогичному эффекту.

Initial value	auto
Applies to	all elements
Inherited	yes
Computed value	as specified
Animation type	discrete

 подчеркивание текста = 
 авто | 
 [ под || [ слева | right ] ] 

Простой пример

Возьмем пару простых абзацев для примера:

 <р>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur ac
  турпис вель лаореет. Nullam volutpat pharetra lorem, sit amet feugiat tortor
  volutpat quis. Nam eget sodales quam. Aliquam accumsan Tellus Ac Erat Pouere.

<р>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur ac
  турпис вель лаореет. Nullam volutpat pharetra lorem, sit amet feugiat tortor
  volutpat quis.  Nam eget sodales quam. Aliquam accumsan Tellus Ac Erat Pouere.

 

Наш CSS выглядит так:

 p {
  размер шрифта: 1.5rem;
  преобразование текста: использовать заглавные буквы;
  оформление текста: подчеркивание;
  толщина оформления текста: 2px;
}
.горизонтальный {
  позиция подчеркивания текста: под;
}
.вертикаль {
  режим письма: вертикальный-rl;
  позиция подчеркивания текста: слева;
}
 

В этом примере мы установили для обоих абзацев толстое подчеркивание. В горизонтальном тексте мы используем text-underline-position: under; , чтобы поставить подчеркивание под всеми подстрочными элементами.

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

Живой пример выглядит следующим образом:

Глобальная установка text-underline-position

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

: корень {
  позиция подчеркивания текста: под;
}
 

Спецификация
Модуль оформления текста CSS уровня 3 # text-underline-position-property

загрузка таблиц в браузере включена только в BCD

1. Включите JavaScript для просмотра данных.

• Свойство text-decoration является сокращением для настройки большинства свойств text-decoration, включая text-decoration-line , text-decoration-color и text-decoration-style . Однако он не устанавливает text-underline-position .

Обнаружили проблему с содержанием этой страницы?

• Отредактируйте страницу на GitHub.
• Сообщить о проблеме с содержимым.
• Посмотреть исходный код на GitHub.

Хотите принять больше участия?

Узнайте, как внести свой вклад.

Последний раз эта страница была изменена 21 февраля 2023 г. участниками MDN.

Подчеркивание текста CSS | Как использовать свойство положения подчеркивания текста

В этой статье мы узнаем о подчеркивании текста в CSS. Каскадная таблица стилей предназначена для презентации. Чем лучше мы используем стиль, тем более совершенной будет презентация. Сказав это, нужно знать, что существует множество деталей, о которых нужно позаботиться при стилизации с помощью CSS. В качестве простого примера возьмем подчеркивание текста. Теперь простое подчеркивание текста можно выполнить с помощью свойства text-decoration. Но чтобы исправить детализацию, мы должны вникнуть в ее тонкости и исправить свойства позиционирования и смещения. Именно об этом мы и поговорим в этой статье. text-underline-position и text-underline-offset — это улучшенные функции для добавления к подчеркиванию, предоставляемому свойством text-decoration: underline.

Синтаксис в подчеркивании текста

1. Положение подчеркивания текста: Это свойство определяет положение подчеркивания относительно текста.

Синтаксис для этого:

 положение подчеркивания текста: авто| под | слева| правильно| выше 

Объяснение приведенного выше синтаксиса: Здесь значение автоматически выбирает положение для подчеркивания, а использование значения ниже гарантирует, что строка не пересекает нижние элементы, например, в случае нижних индексов, тогда как значение выше пересекает над спусками. Левое и правое положение подчеркивания такое же, как и в случае, если режим письма для текста горизонтальный. Они используются, когда режим текста переключается на вертикальный. Мы можем решить, будет ли подчеркивание лежать слева или справа от текста.

2. Text-underline-offset:  Это не подсвойство свойства text-decoration. Это свойство устанавливает расстояние смещения подчеркивания относительно его исходного положения. Расстояние смещения здесь означает расстояние от определенного пути.

Синтаксис для этого может быть следующим:

 text-underline-offset: length 

Пояснение к приведенному выше синтаксису:  Здесь длина может быть указана в таких единицах, как em или cm. Они будут определять длину расстояния смещения. Однако это свойство не поддерживается многими браузерами, включая Chrome. Так что лучше обойти это при стилизации текста.

Пример реализации в CSS Text Underline

Ниже приведены примеры реализации для одного и того же:

Пример №1

Демонстрация положения контура текста со значениями выше и ниже и наблюдение за различиями.

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

Код:

 .class1{
оформление текста: подчеркивание двойное зелёное;
позиция подчеркивания текста: под;
семейство шрифтов: «Franklin Gothic Medium», «Arial Narrow», Arial, без засечек;
} 

• Подобно предыдущему, мы определим еще один класс CSS и сохраним положение подчеркивания текста, как указано выше. Код должен быть похож на приведенный ниже:

Код:

 .class2{
text-decoration: подчеркивание двойное фиолетовое;
text-underline-position: выше;
семейство шрифтов: 'Segoe UI', Tahoma, Geneva, Verdana, без засечек;
} 

• Окончательный код CSS должен быть примерно таким:

Код:

 . класс1{
text-decoration: подчеркивание двойное зелёное;
text-underline-position: под;
семейство шрифтов: 'Franklin Gothic Medium', 'Arial Narrow', Arial, без засечек;
}
.класс2{
text-decoration: подчеркивание двойное фиолетовое;
text-underline-position: выше;
семейство шрифтов: 'Segoe UI', Tahoma, Geneva, Verdana, без засечек;
} 

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

  . Окончательный HTML-код должен выглядеть примерно так:

Код:

 
<голова>



<тело>
Тестирование позиции подчеркивания текста: под
Проверка положения подчеркивания текста: выше

 

Вывод:

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

Пример #2

Демонстрация положения контура текста в режиме письма и наблюдение за разницей значений слева и справа

• В этом примере мы должны четко понимать, что такое режим письма. По сути, это также свойство CSS, которое определяет, как текст должен быть выровнен, то есть по горизонтали слева направо или по вертикали сверху вниз. Теперь, чтобы продемонстрировать значения слева и справа для позиции подчеркивания, мы будем использовать режим вертикального письма.
• Как и в первом примере, мы определим классы CSS для стиля для двух разных значений позиции. Первый класс будет закодирован для положения подчеркивания слева. Код должен выглядеть примерно так, как показано ниже:
.

Код:

 .class1{
режим письма: вертикальный-lr;
положение: абсолютное;
padding-right: 100 пикселей;
text-decoration: подчеркивание двойное зелёное;
позиция подчеркивания текста: слева;
семейство шрифтов: 'Franklin Gothic Medium', 'Arial Narrow', Arial, без засечек;
} 

• Второй класс должен иметь подчеркивание справа от вертикально выровненного текста. Код должен быть похож на следующий:

Код:

 .class2{
режим письма: вертикальный-lr;
отступ слева: 100 пикселей;
text-decoration: подчеркивание волнистым фиолетовым;
text-underline-position: справа;
семейство шрифтов: 'Segoe UI', Tahoma, Geneva, Verdana, без засечек;
} 

• Окончательный файл CSS должен выглядеть примерно так:

Код:

 .class1{
режим письма: вертикальный-lr;
положение: абсолютное;
padding-right: 100 пикселей;
text-decoration: подчеркивание двойное зелёное;
позиция подчеркивания текста: слева;
семейство шрифтов: 'Franklin Gothic Medium', 'Arial Narrow', Arial, без засечек;
}
.класс2{
режим письма: вертикальный-lr;
отступ слева: 100 пикселей;
text-decoration: подчеркивание волнистым фиолетовым;
text-underline-position: справа;
семейство шрифтов: 'Segoe UI', Tahoma, Geneva, Verdana, без засечек;
} 

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

Код:

 
<голова>



<тело>
Проверка положения подчеркивания текста: слева
Проверка положения подчеркивания текста: выше

 

• Сохраните этот код и откройте HTML-файл в браузере. Окончательный вывод должен выглядеть примерно так, как показано на снимке экрана ниже:
.

Вывод:

Пример #3

Использование позиции подчеркивания текста во встроенном стиле CSS

• некоторые тексты. Окончательный HTML-код должен выглядеть так:
.

Код:

 
<голова>


<тело>
ЭТО ВСТРОЕННЫЙ CSS ДЛЯ ПОДЧЕРКИВАНИЯ ТЕКСТА

 

• Сохраните файл и откройте его в браузере.

  No related posts.