Содержание

Как добавить пунктирное подчеркивание под текстом HTML



Как вы подчеркиваете текст html так, чтобы линия под текстом была пунктирной, а не стандартной? Предпочтительно, я хотел бы сделать это без использования отдельного файла CSS. Я новичок в html.

html underline
Поделиться Источник parap     06 марта 2013 в 16:19

9 ответов




137

Это невозможно без CSS. На самом деле тег <u> просто добавляет text-decoration:underline к тексту с помощью встроенного в браузер CSS.

Вот что вы можете сделать:

<html>
<head>
<!-- Other head stuff here, like title or meta -->

<style type="text/css">
u {    
    border-bottom: 1px dotted #000;
    text-decoration: none;
}
</style>
</head>
<!-- Body, content here -->
</html>

Поделиться Alfred Xing     06 марта 2013 в 16:24



30

Используйте следующие коды CSS…

text-decoration:underline;
text-decoration-style: dotted;

Поделиться Shakeel Ahmed     13 июля 2016 в 07:53



15

Без CSS вы в основном застряли с использованием тега изображения. В основном сделайте изображение текста и добавьте подчеркивание. Это в основном означает, что ваша страница бесполезна для чтения с экрана.

С CSS все просто.

HTML

:

<u>I like cheese</u>

CSS:

u.dotted{
  border-bottom: 1px dashed #999;
  text-decoration: none; 
}

Пример

Пример страницы

<!DOCTYPE HTML>
<html>
<head>
    <style>
        u.dotted{
          border-bottom: 1px dashed #999;
          text-decoration: none; 
        }
    </style>
</head>
<body>
    <u>I like cheese</u>
</body>
</html>

Поделиться epascarello     06 марта 2013 в 16:25




9

Элемент HTML5 может давать пунктирное подчеркивание, поэтому Нижний текст будет иметь пунктирную линию, а не обычное подчеркивание. А атрибут title создает подсказку для пользователя при наведении курсора на элемент:

NOTE: пунктирная граница / подчеркивание по умолчанию отображается в Firefox и Opera, но IE8, Safari и Chrome нуждаются в строке CSS:

<abbr title="Hyper Text Markup Language">HTML</abbr>

Поделиться Fatima Waheed     11 июля 2016 в 14:14



4

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

text-decoration: underline;
text-decoration-style: dotted;

Если вы хотите больше передышки между текстом и строкой, просто используйте,

text-underline-position: under;

Поделиться Darshana Gunawardana     09 октября 2018 в 10:12



3

Переформатировал ответ на @epascarello :

u.dotted {
  border-bottom: 1px dashed #999;
  text-decoration: none;
}
<!DOCTYPE html>
<u>I like cheese</u>

Поделиться anatoly techtonik     26 декабря 2015 в 06:54



0

Вы можете использовать border bottom с опцией dotted .

border-bottom: 1px dotted #807f80;

Поделиться Neel     24 января 2020 в 07:16



0

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

<h3>Hello World!</h3>

Обратите внимание, что без

text-underline-position: under; у вас все равно будет пунктирное подчеркивание, но это свойство даст ему больше передышки.

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

Поделиться Mona Jalal     05 февраля 2020 в 00:12



-2

Это не невозможно без CSS. Например, как элемент списка:

<li><!--content --></li>

Поделиться Davington III     30 апреля 2015 в 09:03


Похожие вопросы:


Как создать двойное пунктирное подчеркивание для текста в css

Как мы можем создать двойное пунктирное подчеркивание в CSS ? Я использую свойство border-bottom. border-bottom: 1px dotted #oof Но появляется только одно пунктирное подчеркивание. Как мы можем…


IE7 Nivo Slideshow странное пунктирное подчеркивание на подписи

У меня есть слайд-шоу Nivo, работающее на сайте. Когда я тестирую в страшном IE7, он показывает пунктирное подчеркивание на подписях. Я устал искать преступника в своей стихии, но пока мне не везет….


Как удалить синее пунктирное подчеркивание предложения в TextView из Apple keyboard dictation?

Если пользователи используют Apple dictation с мягкой клавиатуры, то после завершения их voice input. Он показывает синее пунктирное подчеркивание предложения для коррекции голоса. Но я не могу от…


CSS эффект при наведении курсора (пунктирное подчеркивание + изменение цвета текста)

Я совершен CSS нуб Не могли бы вы уделить мне минутку и помочь создать пунктирное подчеркивание (с пробелом) с изменением цвета текста при наведении мыши? Я был бы очень признателен вам за помощь!…


Как сделать строку под текстом без текстового оформления: подчеркивание?

Мне нужно добавить строку под текстом, без текстового оформления: подчеркивание; иначе как сделать пользовательское пространство между текстом и строкой. Что мы делаем


Пунктирное подчеркивание в TextView с использованием SpannableString в Android

Я хочу пунктирное подчеркивание ниже SpannableString Например вот моя струна Hello, How are you? Я хочу разработать пунктирное подчеркивание ниже How слова, так как же его установить? Если я добавлю…


Android пунктирное подчеркивание остается в середине textview

Я хочу показать пунктирное подчеркивание под textview, ниже приведены мои коды <TextView android:id=@+id/contact_num android:layout_width=wrap_content android:layout_height=wrap_content…


Пунктирное подчеркивание TextView не переносится на следующую строку с помощью SpannableString в Android

Я сделал пунктирное подчеркивание textview, используя это пунктирное подчеркивание в TextView, используя SpannableString в Android . Но пунктирное подчеркивание textview не переносится на следующую…


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

Я хочу, чтобы заголовки подчеркивались методом :after . Я заставляю его работать частично. Чего я не могу понять, так это как сделать так, чтобы подчеркивание ( after ) находилось только под текстом…


CSS как установить автоматическую длину подчеркивания doth под текстом

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

Устанавливаем пунктирное подчеркивание ссылок. | Vaden Pro

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

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

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

В последнее время отходят от такого формата подчеркивания, и все чаще на сайтах можно встретить подчеркивание ссылок пунктирной линией. Для осуществления такого подчеркивания свойство text-decoration уже не послужит. Для этого нужно обратиться к свойству border-bottom. Через него мы установим нижнюю границу для ссылки, которая и послужит нашим подчеркиванием. Чтобы сделать линию пунктирной, требуется указать стиль линии в этом свойстве. Пунктиру соответствует команда dashed. Но перед этим нужно не забыть убрать исходное подчеркивание, которое определяется браузером по умолчанию для ссылок. Для этого обращаемся все к тому же свойству text-decoration и прописываем для него значение none. Чтобы наша фишка применилась только к определенной группе ссылок – необходимо указать селектор класса. Код смотрим внизу

HTML

<p><a  href="#">Ссылка 1</a></p>

CSS

.underline {
    text-decoration: none; 
    border-bottom: 1px dashed #444; 
	color:#444;
   }

Что видим в браузере?

Для справки

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

В каких браузерах работает?

4.0+1.0+4.0+1.0+1.0+1.0+1.0+

Оценок: 3 (средняя 5 из 5)

Понравилась статья? Расскажите о ней друзьям:

Курсы по CSS (в открытом доступе)

Уровень сложности:

Средний

Еще интересное

★ Подчёркивание — типографские знаки .. Информация

                                     

★ Подчёркивание

Подчеркивание — символ ASCII с кодом 0x5F, 95. на стандартной компьютерной клавиатуре этот символ расположен совместно с тире клавишу справа от клавиши 0.

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

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

Некоторые компьютерные приложения будут автоматически подчеркивание текста в окружении подчеркивает. таким образом, _ подчеркивание _ отображаться как подчеркнутый. В текстовом процессоре Microsoft Word (Слово Microsoft), при соответствующих настройках автозамены, текст, выделенный подчеркиванием, становится курсивом.

На самом деле, это само по себе знак ничего не подчеркивает, как одна ячейка символа на дисплее можно поместить только один символ, поэтому его иногда называют не «подчёркивание», и «андерскор» «Underscore». кроме того, этот символ иногда называют «Нижнее подчёркивание», что недопустимо по правилам русского языка и является плеоназм — подчеркивание всегда выполняется снизу. также символ под названием «нижний пробел».

Тег подчеркивания в html. Подчеркивание ссылок и текста через CSS, свойство text-decoration. можно проводить двояко. Например, линию под текстом устанавливать на всю ширину блока, независимо от объема текста. А также подчеркивание делать только у текста.

С помощью html тексту можно придать красивое оформление. Очень популярен элемент подчеркивания, но не все постоянные пользователи знают как его применять.

Подчеркивание в HTML

Итак, как же сделать подчеркивание? в html оформляется при помощи тега . Он используется во всех спецификациях html и xhtml, но только при условии переходного , так как должна быть указана версия разметки для браузера. В этом случае документ успешно проходит валидацию. Указывать элемент надо стандартно, то есть в самом верху страницы.

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

  1. Наш текст в абзаце

Слово «текст» при этом будет подчеркнутым.

Подчеркнуть можно и отдельную букву в слове:

  1. Заголовок номер два

  2. Наш текст в абзаце

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

Кроме того, прописывание стилей в css делает код более компактным, а это значит, что загрузка страницы будет быстрее.

Чаще всего верстальщики применяют стили, добавляя границы или подчеркивание в html или же вынося их в отдельный css-файл.

Подчеркивание в CSS

Декорирование текста при помощи css — удобный и практичный способ. Самые простые способы такого выделения: использование text-decoration или border-bottom.

Чтобы подчеркнуть текст с text-decoration, свойство необходимо добавить к нужному классу.

  • нужный-класс {
  • text-decoration: underline;

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

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

  • нужный-класс {
  • text-decoration: none;

Затем текст украшается при помощи следующего свойства:

  • .нужный-класс {
  • text-decoration: none;
  • border-bottom: 2px dashed black;

Так выходит декорирование с Чтобы сделать ее сплошной, вместо «dashed» применяется «solid». Тем, кому нравится украшать текст подчеркиванием точками, можно попробовать применить «dotted».

Стили рамок прописываются в одну строку. Кроме типа подчеркивания, нужно еще указать толщину подчеркивания и цвет. Чтобы определиться с размером, можно поэкспериментировать, но обычно достаточно 1 или 2 пикселей. Цвет текста тоже можно сделать в цвет подчеркивания:

  • нужный-класс {
  • text-decoration: none;
  • border-bottom: 1px dotted blue;
  • color: blue;

Так получится синий текст с синим оформлением. Чтобы присоединить стиль к html, нужно в разметку добавить класс.

Вот и все, это основы подчеркивания в html.

Верстка любого информативного текста подразумевает включение смысловых гиперссылок или анкоров. Добавляются эти элементы при помощи тега «а» (anchor). Современные браузеры по умолчанию отображают подобный элемент с Зачастую верстальщики или веб-дизайнеры предпочитают либо изменять этот стиль, либо удалять его вообще.

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

Если все-таки было принято решение убрать подчеркивание ссылок, то тут понадобится некоторые знания структуры формирования интернет страницы, а именно CSS.

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

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

text-decoration: none;

Эта небольшая строка удалит полностью на всем сайте подчеркивание всех элементов прописанных при помощи тега «а».

Но что делать, если у вас нет доступа к файлу CSS?

В таком случае целесообразным является применения тега Style в начале документа. Работает так же, как и файл CSS. Для того чтобы применить стили, необходимо в самом начале документа (или HTML страницы) дописать конструкцию, в которой действуют обычные правила CSS стилей.

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

Удалить подчеркивание ссылок при наведении

Но как быть, если необходимо убрать подчеркивание ссылки при наведении? CSS и в этом случае сможет нам помочь. Код будет выглядеть так:

text-decoration: none;

Именно псевдокласс « :hover » отвечает за декорацию элементов при наведении курсора.

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

text-decoration: none;

text-decoration: underline;

Применение идентификаторов и классов

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

Есть несколько вариантов решения этой проблемы.

Убрать подчеркивание ссылок можно инлайново. Хотя это категорически не рекомендуется делать с точки зрения оптимизации работы сайта.

Для этого необходимо непосредственно в теге ссылки указать параметр Style:

Второй вариант является более приемлемым.

Вводим в элемент дополнительный класс или id и уже этим селекторам присваиваем нужные нам стили:

Класс прописывается с точкой перед его названием:

None_ decoration{

text-decoration: none;

Идентификатор обозначается знаком #:

#none_ decoration{

text-decoration: none;

Данное правило применимо как к файлу CSS, так и к тегу Style

Изменение стиля отображения ссылки в тексте

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

Сделать это тоже достаточно просто:

color:*указать нужный цвет в любом формате (*red, #c2c2c2, rgb (132, 33, 65)*)* ;

Применяется подобная стилизация по тем же правилам, что описаны для отмены подчеркивания ссылки. CSS-правила в данном случае идентичны. Изменение цвета ссылки и отмена подчеркивания могут быть применены как отдельная стилизация (тогда ссылка останется подчеркнутой, но изменит цвет со стандартного синего на необходимый вам).

Замена стандартной стилизации

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

text-decoration-style:

  • Если нужна сплошная линия, указываем значение solid.
  • Для волнистой линии — wavy.
  • Двойная линия — соответственно double.
  • Линию можно заменить на последовательность точек — dotted.
  • Подчеркнуть слово в виде пунктира — dashed

А также можно изменить положение линии относительно текста:

Конструкция line-text-decoration-line может принимать значения:


И цвет (не путать с цветом текста!):

text-decoration-line: (любой цвет в любом формате *red, #c2c2c2, rgb (132, 33, 65)* ).

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

text-decoration: red, line-through, wavy.

или изучаем теги, форматирующие HTML текст

Вашему вниманию представлен один из ключевых и самых простых уроков самоучителя.

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

Смотрите ниже теги, форматирующие HTML текст :

  • Теги → жирный HTML текст (жирный шрифт).
  • Теги → жирный HTML текст (жирный шрифт).
  • Теги → моноширинный HTML текст (моноширинный шрифт).
  • Теги → моноширинный HTML текст (моноширинный шрифт).
  • Теги → моноширинный HTML текст (моноширинный шрифт).
  • Теги → HTML текст , размер больше обычного (крупный шрифт).
  • Теги HTML текст , размер меньше обычного (мелкий шрифт).
  • Теги → наклонный HTML текст (наклонный шрифт).
  • Теги → наклонный HTML текст (наклонный шрифт).
  • Теги → наклонный HTML текст (наклонный шрифт).
  • Теги → подчеркнутый HTML текст (подчеркнутый шрифт).
  • Теги → зачеркнутый HTML текст (зачеркнутый шрифт).
  • Теги HTML текст (шрифт) в нижнем индексе.
  • Теги HTML текст (шрифт) в верхнем индексе.

HTML форматирование текста: зачеркнутый, подчеркнутый текст

Результат: … моноширинный шрифт

Результат: … размер шрифта больше обычного

Результат: … наклонный шрифт

Результат: зачеркнутый текст (зачеркнутый шрифт)

Результат: верхний индекс

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

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

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

А давай-ка вот этим подчеркнем!

В существуют специальный парный тег для подчеркивания текста: слово.

Однако профессиональные верстальщики пользуются механизмами стилевых каскадных таблиц, т.е. css, для оформления внешнего вида всего . И это правильно. Такой подход разделяет разметку от стилизации, делает форматирование гибким и удобным. К тому же так легче отловить баги (ошибки) в коде.

Для подчеркивания текстового контента в основном используются такие свойства: border и text-decoration .

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

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

  1. border- right (справа)
  2. border- top (сверху)
  3. border- left (слева)
  4. border- bottom (снизу)
Также при помощи border можно задать:
  • точечное (dotted )
  • пунктирное (dashed )
  • линейное (solid )
  • двойное (double )
  • объемное обрамление блокам (groove, inset, ridge и outset )

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

Теперь обсудим свойство языка css text-decoration . Данный элемент отвечает за дополнительные украшения текста.

К ним относятся:

  1. мигание (blink )
  2. линия над текстом (overline )
  3. зачеркнутые объекты (line-through )
  4. наследование стилизации (inherit )
  5. отмена всех дополнительных декораций (none )
  6. необходимое нам подчеркивание (underline )

Настало время практики

Теперь я хочу, чтоб вы закрепили полученные знания и практически опробовали приведенный мной пример программного кода. Для тех, кто знаком с данной темой, это также будет полезно. Как мы все знаем: «Повторение – мать учения!».

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

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

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

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

Не забывайте вступать в ряды моих подписчиков, ведь впереди еще множество интересных и полезных тем, а также делитесь ссылкой блога с друзьями. Пока-пока!

С уважением, Роман Чуешов

Подчеркнутый текст в HTML выделяется с помощью тега u HTML (от слова underline ). Применяется он следующим образом (нужная часть текста помещается между тегами ):

Конструктор сайтов «Нубекс»

Но данный код считается невалидным, поэтому значительно эффективнее и правильнее использовать CSS-стили для декорации текста.

Подчеркнуть текст — CSS

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

Подчеркнутый текст с помощью CSS — «Нубекс»

Конструктор сайтов Нубекс»

Подчеркнуть текст с помощью CSS можно не только сплошной линией. Посмотрим, какими вариантами можно подчеркнуть текст:

  • Подчеркнуть текст пунктиром CSS: Подчеркнутый пунктиром текст — «Нубекс»

    Конструктор сайтов Нубекс»

  • Подчеркивание точками: Подчеркнутый точками текст — «Нубекс»

    Конструктор сайтов Нубекс»

  • Двойная черта: Подчеркнутый двумя линиями текст — «Нубекс»

    Конструктор сайтов Нубекс»

Как видно из приведенных примеров, управлять стилем подчеркивания можно при помощи свойства border-bottom (нижняя граница). С помощью этого параметра можно задать тип подчеркивания, цвет, толщину.


Подчеркивание ссылок пунктиром

В веб-дизайне часто прибегают к такому решению — подчеркивание ссылок пунктирной линией или точками. Такие ссылки обычно не совершают перехода на страницу, а открывают какой-либо скрытый слой. Например: на сайте expange.ru (если пользователь не авторизован) при нажатии на ссылку «Авторизация» открывается скрытый слой, на котором форма авторизации — удобно, быстро и без перезагрузки страницы (экономия трафика).

Подчеркивание черточкой

Подчеркивание черточками

<a href=»/»> Подчеркивание черточками </a>

Подчеркивание точками

Подчеркивание точками

<a href=»/»> Подчеркивание точками </a>

Примечание: В Internet Explorer 6 подчеркнуть точками не получится, выглядеть будет как подчеркивание черточкой.

Примечание

a:hover

Если при наведении ссылка меняет цвет, то не стоит забывать, что стандартное подчеркивание text-decoration:underline;, было изменено на text-decoration:none; и была установлена нижняя граница определенного цвета и стиля, поэтому, чтобы подчеркивание пунктиром тоже меняло свой цвет нужно делать так:

<style type=»text/css»> a {color:#F00; text-decoration:none; border-bottom:#F00 1px dashed;} a:hover {color:#900; border-bottom-color:#900;} </style> <a href=»http://expange.ru/»>При наведении цвет изменится с #F00 на #900</a>

Свойство padding в ссылках

Если ссылка в стилях имеет свойство padding, например padding:5px 10px;, то наше нижнее подчеркивание ссылки будет на 5 пикселей отдалено от текста. Чтобы решить эту проблему нам понадобится «промежуточный тег»:

<style type=»text/css»> a {color:#F00; text-decoration:none; padding:5px 10px;} a ins {text-decoration:none; border-bottom:#F00 1px dashed;} </style> <a href=»http://expange.ru/»><ins>Используем промежуточный тег</ins></a>

Как сделать пунктирное подчеркивание ссылки?

Создавая пунктирное подчеркивание текста или ссылки, то вы делаете этот элемент более заметная, который будет отличиться от стандартного. В этом материале подробно рассмотрим, как можно создать такое подчеркивание на интернет ресурсе. Думаю многие согласятся, что кликабельный элемент изначально должен отличатся и где-то даже выделятся на фоне с разными объектами. Это делается для того, чтоб пользователь или гости сайта могли сразу увидеть, что в этом описание или статье есть переход на другую страницу.

Если говорить про ссылку, то это безусловно активный элемент, и здесь веб мастер старается его подчеркивать или создать в другом оттенке. Все потому, как уже говорилось, чтоб изначально была заметна при открытии страницы. За стандартное подчеркивание будет отвечать text-decoration свойство. Где вы также можете добавить к нему разное оформление, как посчитаете нужным видеть этот элемент. Если вы еще добавите в этому значение под названием underline, то автоматически выставляете сплошную горизонтальную линию, которая в ответе за вид подчеркивание.

Но нам нужно создать подчеркивание, чтоб оно было пунктирной линией, что text-decoration в нашем случай не подойдет. Под это нам нужно совершенно другое свойство, под названием border-bottom, где только через него появится возможность аналогично поставить нижнею линию, только уже с пунктиром. Но это не все, так как остается сплошная линия, где все это можно запретить, а точнее text-decoration выставляем запрет на показ, где отвечает за это значение, как none. Чтоб этот трюк мог применяться к заданным ссылкам, то остается самостоятельно выставить класс по значению.

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

HTML

Код

<a href=»http://zornet.ru»>ZorNet.Ru — сайт для вебмастера</a>


CSS

Код

a {
  text-decoration: none;  
  display: inline-block;  
  border-bottom-style:dashed;  
  border-bottom-width:1px;  
  color: #16542d;
}
a:hover {
  border-bottom-style:none;
}


Когда поставите на сайт, то все ссылки станут под это обозначание, цвет сами подберете.

2. В этом варианте задаем класс, что можно вывести отдельно, на нужную ссылку оформление.

HTML

Код

<a href=»#»>Здесь ключевое слово</a>


CSS

Код

.underscore_description {
  text-decoration: none;
  border-bottom: 1px dashed #3c5e8e;
  color: #206588;
}


Это уже в выставленным классом идет, здесь при наведениенет не какого эффекта. Так как в первом и втором варианте вы можете сами добавить значкение, как по эффектам, так и по оформлению.

Важно знать:

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

Нестандартное подчеркивание ссылок. Да и не только ссылок

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

Задача

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

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

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

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

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

приглушенное подчеркивание на 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 сработал zoom (который в идеале лучше вынести в отдельный css, подключенный условными комментариями). Но он не всегда помогает. Если с zoom возникли какие-то проблемы (например, починило подчеркивание, но сломало верстку) заменяем zoom на position: relative.
  • Такой прием можно применять не только к ссылкам.
Оформление внешних ссылок Вставка стрелок

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

Свойство CSS text-decoration-style устанавливает стиль строк, заданный параметром text-decoration-line . Стиль применяется ко всем строкам, для которых задано значение text-decoration-line .

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.

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

При одновременной установке нескольких свойств line-decoration может быть удобнее использовать сокращенное свойство text-decoration .

 
стиль оформления текста: сплошной;
стиль оформления текста: двойной;
стиль оформления текста: пунктирная;
стиль оформления текста: пунктирная;
стиль оформления текста: волнистый;


стиль оформления текста: наследование;
стиль оформления текста: начальный;
стиль оформления текста: не задано;
  

Значения

твердый
Рисует одну линию.
двойной
Рисует двойную линию.
пунктир
Рисует пунктирную линию.
штриховая
Рисует пунктирную линию.
волнистый
Рисует волнистую линию.
-moz-none Этот API не стандартизирован.
Не рисует линии. Используйте вместо него text-decoration-line : none .
  твердый | двойной | пунктирная | пунктирная | wavy  

Установка волнистого подчеркивания

  .example {
       -moz-текст-украшение-строка: подчеркивание;
       -moz-text-decoration-style: волнистый;
       -moz-текст-украшение-цвет: красный;
    -webkit-text-decoration-line: подчеркивание;
    -webkit-text-decoration-style: волнистый;
    -webkit-текст-украшение-цвет: красный;
}  
CSS
 .волнистый {
  текст-украшение-строка: подчеркивание;
  стиль оформления текста: волнистый;
  цвет оформления текста: красный;
}
  
HTML
  

Под этим текстом есть волнистая красная линия.

Результаты
Таблицы

BCD загружаются только в браузере.

  • При одновременной установке нескольких свойств оформления строк может быть удобнее использовать сокращенное свойство text-decoration вместо этого.

стиль оформления текста | CSS-уловки

Свойство text-decoration-style задает стиль подчеркивания для ссылок и подчеркивания, надчеркивания или сквозной строки для любого текста с примененным text-decoration .

  a {
  стиль оформления текста: сплошной;
}  

Значения

  • сплошной : по умолчанию. Украшение представляет собой единую сплошную линию.
  • двойной : украшение представляет собой пару сплошных линий.
  • пунктир : украшение — пунктирная линия.
  • пунктирная : украшение — пунктирная линия.
  • волнистый : Украшение представляет собой волнистую линию.

Демо

На момент написания этой статьи text-decoration-style официально поддерживается только в Firefox.Он также будет работать в браузерах Chrome с включенным флагом экспериментальных функций веб-платформы.

См. Pen text-decoration-style от CSS-Tricks (@ css-tricks) на CodePen.

Сокращение

В браузерах, поддерживающих text-decoration-style и text-decoration-color , вы можете добавить стиль оформления в сокращенное свойство text-decoration :

 . Подчеркнутый {
  оформление текста: подчеркнутый красный пунктир;
}  

В настоящее время только Firefox поддерживает это без префикса.Safari поддерживает его с префиксом -webkit . Chrome также нуждается в префиксе -webkit и функциях экспериментальной веб-платформы, включенных во флагах Chrome.

Связанные

Дополнительная информация

Поддержка браузера

Хром Safari Firefox Opera IE Android iOS
31 * Нет 6 † Нет Нет Нет Нет

* только с экспериментальными функциями веб-платформы флаг включен

† Firefox 6+ с префиксом -moz , 36+ без префикса.

стиль оформления текста | Codrops

Это свойство определяет стиль линий (подчеркивание, надчеркивание и сквозные линии), установленный для элемента с text-decoration-line .

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

Свойство text-decoration-style можно использовать для создания сплошных линий, пунктирных линий, пунктирных линий, волнистых линий или двойных линий (две линии вместо одной). Он также принимает значение и наследует , которое применяет к элементу те же декорации, что и у его родителя.

Значения

цельный
рисует одну линию над, под или через текст.(См. текст-украшение-строка ).
двойной
рисует две линии над текстом, под ним или сквозь него.
пунктир
рисует пунктирную линию над, под или через текст.
штриховая
рисует пунктирную линию над, под или через текст.
волнистый
рисует волнистую линию над текстом, под ним или сквозь него.
унаследовать
наследует стиль линии от своего родителя.

Примеры

Нижеприведенное подчеркивание применяется ко всем элементам h2 пунктиром. Подчеркивание добавляется с помощью свойства text-decoration-line .

h2 {
    текст-украшение-строка: подчеркивание;
    стиль оформления текста: пунктирная;
}
                 

Поддержка браузера

Это свойство поддерживается в Chrome и Opera с префиксом -webkit- , в Firefox с префиксом -moz- и на Android.

В настоящее время он не поддерживается в iOS, Internet Explorer и Safari.

Автор Сара Суейдан. Последнее обновление: 3 февраля 2015 г., 12:35, автор: Педро Ботельо.

У вас есть предложение, вопрос или вы хотите внести свой вклад? Отправить вопрос.

CSS | Свойство в стиле текстового оформления — GeeksforGeeks

< HTML >

< голова >

< титул >

CSS свойство text-decoration-style

титул >

< стиль >

п {

стиль оформления текста: наследование;

}

.главный {

стиль оформления текста: волнистый;

}

.GFG1 {

текст-украшение-строка: подчеркивание;

}

.GFG2 {

текст-украшение-строка: сквозная;

}

.GFG3 {

текст-украшение-строка: надстрочный;

}

стиль >

голова >

< корпус >

< h2 стиль = "цвет: зеленый" >

GeeksforGeeks

h2 >

< b > стиль оформления текста: наследование b >

< дел класс = «основной» >

< p класс = "GFG1" >

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

p >

< p класс = "GFG2" >

Эта линия имеет унаследованный сквозной стиль.

p >

< p класс = "GFG3" >

Эта строка имеет унаследованный стиль наложения.

p >

дел >

корпус >

html >

Гиперссылка с пунктирным подчеркиванием - HyperlinkCode.com

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

Для этого мы должны добавить приведенный ниже CSS в нашу внутреннюю или внешнюю таблицу стилей. После добавления этого кода в таблицу стилей он автоматически повлияет на все гиперссылки. См. Демонстрацию ниже.



Наведите указатель мыши на эту гиперссылку, чтобы увидеть подчеркнутую пунктирную линию.


Подчеркивание гиперссылки по умолчанию было удалено путем установки значения свойства text-decoration на none , а свойство border-bottom было добавлено в код.

1px = переменная ширина границы в пикселях, которая в данном случае используется в качестве ширины подчеркнутой пунктирной линии гиперссылки.
пунктирная = стиль границы (пунктирная сплошная или пунктирная)
# 0000FF = цветовой код. Используйте эту переменную для изменения цвета.

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




Вышеупомянутый

Пример наложения

Свойство text-decoration является сокращенным свойством для установки text-decoration-line , text-decoration-style и text-decoration-color в одном объявлении.

При использовании сокращенного свойства text-decoration пропущенным значениям присваиваются их начальные значения.

Синтаксис

украшение текста: || ||

Возможные значения

текст-украшение-строка
Указывает, какие линейные украшения, если они есть, добавляются к элементу.Допустимы следующие значения:
нет
Не производит и не запрещает оформление текста.
подчеркнутый
Каждая строка текста подчеркнута.
дополнительный
Каждая строка текста имеет над ней черту.
сквозной
Каждая строка текста проходит через линию.
мигает
Текст мигает (чередуется между видимым и невидимым). Обратите внимание, что это значение устарело в пользу анимации CSS.
стиль оформления текста
Стиль оформления текста.
цельный
Сплошная линия.
волнистый
Волнистая линия.
пунктирная
Пунктирная линия.
штриховая
Строка, состоящая из тире.
двойной
Двойная сплошная линия.
текст-украшение-цвет
Цвет оформления текста. Может быть любой допустимый цвет .

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

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

Основная информация об имуществе

Начальное значение
Текущий цвет
Относится к
Все элементы
Унаследовано?
Нет
Медиа
Визуальный
Анимационный
Да, но только как цвет (т.е. можно анимировать только свойство text-decoration-color сокращения). (см. пример)

Пример кода

Базовый CSS

Вот пример базовой декларации. Объявление состоит из свойства и его значений для различных полных свойств.

оформление текста: оранжевая пунктирная линия подчеркивания;

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

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

Фактически, это единственный синтаксис, распознаваемый CSS1 и CSS2 (поскольку они не поддерживают длинные свойства).

Итак, вы можете использовать следующий код для предоставления функций CSS3, при этом обеспечивая обратную совместимость для браузеров CSS1 и CSS2:

:связь { оранжевый цвет; оформление текста: подчеркивание; / * Используется браузерами CSS1 и CSS2 * / оформление текста: подчеркнутый зеленый пунктир; / * Используется браузерами CSS3 * / }

В браузерах CSS1 и CSS2 текст ссылки и ее подчеркивание будут оранжевыми.Его подчеркивание будет сплошным (это единственный вариант до CSS3).

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

Рабочий пример в HTML-документе

Пример <стиль> h2 { шрифт: 100 3em без засечек; цвет: золото; оформление текста: оверлейный волнистый желто-зеленый; }

Пример наложения

Попробуй

Официальные спецификации

Поддержка браузера

Следующая таблица предоставлена ​​Caniuse.com показывает уровень поддержки этой функции браузером.

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

CSS: оформление текста - блог LogRocket

1 мин чтения 357

Сокращенное свойство CSS text-decoration позволяет добавлять и стилизовать декоративные линии в тексте.

Перейти вперед:

Синтаксис свойства следующий:

 текст-украшение: строка | стиль | цвет | толщина 

Демо

См. Pen
Пример оформления текста CSS от Соломона Эсеме (@kaperskyguru)
на CodePen.


Свойства компонента

Сокращение CSS text-decoration состоит из четырех компонентных свойств. Рассмотрим следующий пример:

 p {
  оформление текста: подчеркивание сплошным красным 0,1em;
}

// взрывается до:

п {
  текст-украшение-строка: подчеркивание;
  стиль оформления текста: сплошной;
  цвет оформления текста: красный;
  толщина украшения текста: 0,1 мкм
} 

Мы подробно исследуем каждое свойство компонента ниже.


текст-украшение-строка

Задает стиль линии для оформления текста .

Значения
  • подчеркивание : отображение строки под текстом
  • сквозная линия : зачеркивает текст
  • overline : вывод строки поверх текста
  • мигает : текст постоянно чередуется между видимым и невидимым - другими словами, он мигает. Это значение устарело и заменено анимацией CSS
  • .
  • нет : не выводит строку
Использование
 p {
  текст-украшение-строка: подчеркивание | линейный | надстрочный | мигать | никто
}
 

стиль оформления текста

Задает стиль линии, отображаемой в тексте.

Значения
  • сплошная : рисует сплошную линию
  • double : рисует двойную линию
  • пунктирная : рисует пунктирную линию
  • пунктирная : рисует пунктирную линию
  • волнистый : рисует волнистую линию
Использование
 p {
  стиль оформления текста: сплошной | двойной | пунктирная | пунктирная | волнистый;
}
 

текст-украшение-цвет

Задает цвет линии, отображаемой в тексте.

Значения

Как и все цвета CSS, значения могут быть предоставлены с помощью ключевого слова, шестнадцатеричного кода, значений RGB / RGBA или значений HSL / HSLA.

Использование
 p {
  цвет-украшения-текста: текущий-цвет | красный | # 00ff00 | rgba (255, 128, 128, 0,5) | прозрачный;
}
 

толщина текстового декора

Устанавливает толщину обводки линии, нарисованной на тексте.

N.B. , text-decoration-Thickness в настоящее время поддерживается только в последних версиях Firefox и Safari.

Значения
  • auto : позволяет браузеру выбирать подходящую ширину для линии оформления текста.
  • from-font : позволяет определять толщину линии с помощью файла шрифта для текста. Если в файле шрифта нет информации о толщине, по умолчанию используется значение авто
  • length : позволяет разработчику указать любое значение длины (например, 1px , 2em и т. Д.)
  • процент : Позволяет разработчику указать процентное значение для толщины линии
Использование
 p {
  толщина украшения текста: авто | from-font | 0.2em | 3px | 10%;
}
 

Ваш интерфейс загружает процессор ваших пользователей?

По мере того, как веб-интерфейсы становятся все более сложными, ресурсоемкие функции требуют все большего и большего от браузера. Если вы заинтересованы в мониторинге и отслеживании использования ЦП на стороне клиента, использования памяти и многого другого для всех ваших пользователей в производственной среде, попробуйте LogRocket.https://logrocket.com/signup/

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

Автор записи

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

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