Css подчеркивание текста: text-decoration-style | htmlbook.ru — Независимое театральное объединение "Зрительские симпатии"

Содержание

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

Содержание web-сайта, в тех или иных случаях, требует оформления его части в виде подчёркнутого, перечёркнутого, а также текста с линией сверху или мигающий вариант отображения, который в прочем в настоящее время мало используется в виду не соответствия с текущими требованиями. Одновременно можно задействовать более одного стиля, перечисляя выбранные значения через пробел.

Наиболее распространённые стили

underline – подчёркивание текста сплошной линией.


HTML

<div>
  <p>
    Подчеркнутый текст.
  </p>
</div>


CSS

.box{
    width: 300px;
    margin: 0px auto;
    padding: 3px 20px;
    border-radius: 8px;
    background-color: #fc0;
    border: 3px solid #960;
}
.box p{
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    text-decoration: underline;
}

line-through – вывод перечеркнутого текста.


HTML

<div>
  <p>
    Перечёркнутый текст.
  </p>
</div>


CSS

.box p{
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    text-decoration : line-through; 
}

none

– отменяет все заданные ранее эффекты, включая и подчеркивания у ссылок которое установлено по умолчанию.


HTML

<div>
  <p>
    Отмена эффектов.
  </p>
</div>


CSS

.box p{
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    text-decoration : none;
}

Менее используемые стили

overline – отображает текст с линией поверх него.

 
HTML

<div>
  <p>
    Линия над текстом.
  </p>
</div>


CSS

text-decoration : overline;

blink – этот параметр задаёт пульсирующий текст.


HTML

<div>
  <p>
    Пульсирующий текст.
  </p>
</div>


CSS

text-decoration : blink;

Css убрать подчеркивание. Как убрать синие подчеркивания в Word? Изменение стиля отображения ссылки в тексте

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

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

Как вставить ссылку?

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

Чтобы связать какой-либо элемент с другой страницей, можно воспользоваться специальным тегом , внутри которого следует указать параметр ссылки href. Если необходимо перейти на какой-то другой сайт, то после этого атрибута следует полностью прописать адрес сайта, а если ссылка является внутренней, то достаточно воспользоваться лишь его частью, начав её с «/», как представлено в примере:

В зависимости от поставленных задач, внешний вид ссылки можно изменять. Так, можно выбрать цвет, стиль шрифта, его тип (жирный, курсив), а также провести коррекцию, убрав подчеркивание. Таким образом, встает вопрос, как убрать подчеркивание в ссылке HTML? Очень просто!

Ссылка без подчеркивания

Среди множества атрибутов тега присутствует свойство css-стиля text-decoration. По умолчанию этот параметр включён для ссылок, и, отключив его с помощью обозначения text-decoration:none , вы увидите, что получилась HTML-ссылка без подчеркивания. В данном примере ссылка будет иметь только выделение синим цветом, а подчёркивание будет убрано.

Ссылка без подчеркивания

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

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

Удаление подчеркивания часто применяется для оформления кнопок меню, где лишние линии будут мешать восприятию информации.

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

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

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

Инструкция: как в CSS убрать подчеркивание ссылок

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

непосредственно к тегу ссылки в HTML назначить атрибут style , в котором прописать: text-decoration: none ;
назначить ссылке id и применить к нему аналогичные свойства;

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

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

a {text-decoration: none;}.

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

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

Ссылки очень привередливы в плане управления ими через CSS. Например, интуитивно кажется, что если установить цвет текста для абзаца красным, то и ссылка в нем должна быть красной — но не тут то было. К каждой ссылке нужен «индивидуальный» подход, а если выражаться более технически точно — сначала в CSS мы должны указать либо id, либо class, либо селектор «a» в виде его местоположения в веб-документе, для которого мы хотим задать свойства. Если свойства прописывать просто для тега «a», то это определит базовые стили ссылок на странице, которые можно переназначить для отдельных элементов на странице с помощью CSS.

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

Что мы имеем в виду, говоря о наведении на ссылку? С технической точки зрения, это является псевдоклассом селектора и определяет его состояние на данный момент. Разнообразие псевдоклассов и их функционал обширные настолько, что им можно выделить отдельную статью, а сейчас нас интересует лишь один псевдокласс — hover. Именно он отвечает за поведение ссылки (или любого другого HTML-тега) при наведении. Теперь, понимая структуру процесса обработки браузером вашего кода, можете использовать данный пример:

a: hover {text-decoration: none}.

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

Приложение MS Word выделяет некоторые слова документа, прорисовывая линию под ними. Как убрать подчеркивание в Word? Этим вопросом задаются многие пользователи. Способ, которым ликвидируется линия, находящаяся под текстом, зависит от её вида. Существует стандартная форма подчеркивания, задаваемая настройками форматирования, и специальные варианты, автоматически возникающие при наборе документа.

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

Как убрать подчеркивание в Word: настройка форматирования

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

Если под словом находится линия, самый простой способ её удалить – изменить параметры начертания текста. Сделать это можно, используя инструмент вкладки «Главная» , который визуально представляется собой кнопку с буквой «Ч ». В англоязычной версии программы этой функции соответствует кнопка «U ».

Вот последовательность действий, которая приведёт к требуемому результату:

выделить текст;
на вкладке «Главная» сделать неактивной кнопку «Ч », нажав на неё мышкой.

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

Специальные виды подчеркивания

Встроенная опция проверки правильности написания и расстановки знаков препинания отмечает фрагменты с ошибками линиями разных цветов. Красная волнистая линия означает, что слово написано неверно (или оно не присутствует в словаре Word), зелёная волнистая линия – требуется корректировка знаков препинания.

Есть три способа, как убрать красные подчеркивания в Word.

Проверить правильность написания слова и исправить его, если при наборе была допущена опечатка.
Навести курсор на слово, нажать правую кнопку мышки и в контекстном меню выбрать один из вариантов, предлагаемых программой.
Отказаться от исправления. Для этого также следует навести курсор мышки на слово, нажать правую кнопку и выбрать в меню «Пропустить» или «Добавить в словарь». Слово, включённое пользователем в словарь, впоследствии ошибкой считаться не будет.

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

А как убрать зеленое подчеркивание в Word? Ответ: используйте способы, описанные выше. Отличие состоит в том, что приложение обнаружило ошибку грамматики.

Настройки программы

Кардинальный способ избавиться от цветных волнистых линий – отключить автопроверку текста. Выполняется эта операции через окно настроек программы. В версии 2007 – щелчок мышкой по логотипу Office, в новых версиях – переход в меню «Файл». Далее необходимо на вкладке «Правописание» убрать отметки в полях «Скрыть ошибки».

Итак, теперь вопрос о том, как убрать подчеркивание в Word, перестанет тревожить пользователя. Автоматическое исправление отключено. Но есть и минус – искать ошибки в документе придётся вручную.

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

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

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

a { text-decoration: none; }

С помощью этой строки кода можно удалить CSS underline style всех ссылок.

Предостережение относительно удаления подчеркивания

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

Не подчеркивайте текст, не связанный со ссылкой

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

Измените сплошное подчеркивание точками или пунктиром

Если хотите сохранить подчёркивание ссылок, но при этом изменить стиль по умолчанию (линия «solid « ), это можно сделать следующим образом. Вместо сплошной линии используйте точки. Для этого нужно удалить подчеркивание и заменить его свойством border-bottom :

a { text-decoration: none; border-bottom:1px dotted; }

Так как стандартное CSS text decoration underline мы удалили, будет отображаться только линия из точек:

То же самое можно сделать, чтобы получить пунктирное подчеркивание. Просто измените значение border-bottom на dashed :

a { text-decoration: none; border-bottom:1px dashed; }

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

Еще один способ обратить внимание пользователей на ссылки — изменить цвет подчеркивания. Н забудьте, что цвет text underline CSS должен соответствовать используемой цветовой схеме:

a { text-decoration: none; border-bottom:1px solid red; }

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

Хитрость в создании двойного подчеркивания заключается в изменении ширины рамки. Если создать рамку шириной в 1 пиксель, в результате получится два подчеркивания, которые выглядят как одно:

a { text-decoration: none; border-bottom:3px double; }

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

a { border-bottom:1px double; }

Не забывайте о различных состояниях ссылок

Также можно использовать border-bottom для различных состояний ссылок. Использование псевдокласса :hover поможет улучшить опыт взаимодействия пользователей. Чтобы создать второе точечное подчеркивание, выводимое при наведении на ссылку курсора мыши, используйте следующий код и деактивацию CSS text decoration underline :

a { text-decoration: none; } a:hover { border-bottom:1px dotted; }

Перевод статьи «How to Change Link Underlines on a Webpage » был подготовлен дружной командой проекта .

Хорошо Плохо

28 февраля 2017

Как убрать подчеркивание в Word? Если вы задались таким вопросом, значит с вашим текстом что-то не так. Дело в том, что так программа указывает вам на какие-то несовершенства написанного в документе материала. Какие именно недостатки выискивать и что делать, если на самом деле с текстом все в порядке?

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

Это самый простой вопрос. Как убрать подчеркивание в Word красного цвета, знают все, кто работает с программой не первый день. Красный цвет в данном текстовом редакторе — самый распространенный маркер. Он указывает на то, что в подчеркнутом тексте находится какая-то ошибка. Точнее, не какая-нибудь, а одна из этих:

подчеркнутое слово отсутствует в словаре,
слово написано с ошибкой,
также красным Word подчеркивает повторения.

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

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

Есть два варианта, как можно справиться с подчеркиванием красного или зеленого цвета:

Чтобы убрать такое подчеркивание, достаточно исправить ошибки.
Также можно нажать на «Пропустить», чтобы программа проверки перестала «видеть» этот участок.

Видео по теме

Как убрать синие подчеркивания в Word?

Как убрать подчеркивание в Word синего цвета, знают уже не все. Такой цвет встретить можно не во всех версиях текстового редактора. Если текст перед вами подведен синей волнистой линией, в нём есть проблемы с форматированием.

Как и с прочими ошибками, эту можно убрать одним из двух способов:

Исправить её. Если вы не понимаете, в чем ошибка, нажмите на проблемный участок правой кнопкой мыши.
Как и прочие ошибки, эту тоже можно пропустить, нажав на соответствующую кнопку.

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

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

Выделить текст, под которым нужно убрать подчеркивание, после чего нажать сочетание клавиш Ctrl+U.
Также можно пойти более долгим путем: выделить текст, найти в верхнем поле программы во вкладке «Главная» букву «Ч», подчеркнутую снизу. После нажатия на нее линия под выделенным текстом пропадет.

Источник: fb.ru

Актуально

Разное
Разное

Эффекты текста на CSS | Трепачёв Дмитрий

Свойство text-decoration позволяет задавать некоторые эффекты для текста: подчеркивание, перечеркивание, линию сверху, а также отменять такие эффекты, если какой-либо тег имеет их по умолчанию. Чаще всего это свойство используются для отмены подчеркивания ссылок (они по умолчанию подчеркнуты).

Давайте посмотрим, какие значения может принимать свойство text-decoration.

Значение underline

Значение underline добавляет подчеркивание тексту:

 Lorem ipsum dolor sit amet.  p { text-decoration: underline; }

Значение overline

Значение overline добавляет линию над текстом:

 Lorem ipsum dolor sit amet.  p { text-decoration: overline; }

Значение line-through

Значение line-through добавляет линию, перечеркивающую текст:

 Lorem ipsum dolor sit amet.  p { text-decoration: line-through; }

Значение none

Значение none отменяет все эффекты. Обычно используется для отмены подчеркивания ссылок.

Смотрите пример:

<a href="">ссылка</a> a { text-decoration: none; }

Практические задачи

Повторите страницу по данному образцу:

Текст CSS.

Выравнивание текста, цвет текста, подчеркивание в CSS и прочее.|Простые советы.

Подключение CSS

Для того, чтобы подключить к нашему готовому документы HTML таблице стилей мы идем в Notepad++ и нажимаем «Файл», «Новый»(Ctrl+N) и «Сохранить как». После этого нам будет предложено сохранить новый файл в папке. Для этого, я обычно заранее создаю папку в директории — www. и называю ее style.css . В эту папку сохраняем наш файл выбрав для него любое название, но расширение css. Теперь идем в наш HTML документ и внутри тега <head> прописываем следующий код: <link href= “css/style.css” type=”text/css” rel=”stylesheet”>

Вместо

css/style.css – у вас могут быть любые другие значения и названия, но расширение css— обязательно.
Все остальное тоже без изменения. К одному документу можно подключить несколько файлов и наоборот.

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

Селекторы на основе тегов.

Они имеют такое же название, как и теги. Например:
#header – селектор по id. Для того, чтобы он сработал нам нужно в HTML документе прописать идентификатор – id= “header” Его можно задать для любой части документа. Дать ему любое название из латинских букв, но нельзя начинать название с цифр. Название идентификатора вы можете придумать сами, произвольно. .new— селектор по классу. Его задают в теле HTML документа, присваивая класс. -это тег тоже одинарный и его закрывать не требуется, как и (id) идентификатор. Бывают случаи, когда нам нужно задать одинаковые параметры различным участкам текста. В этом случае мы воспользуемся групповым селектором, где они прописываются через запятую. Например:

Селекторы предок – потомок.

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

Где все элементы, так или иначе, связаны между собой. Например :

<body> является потомком <html> , а тот соответственно его родителем. <img> – потомок <а>, а тот в свою очередь <body> и тд. Если вы представите себе это, то вам будет легко добраться для нужного вам тега и изменить только определенную часть документа.
Записываются такие селекторы таким образом: Родитель и через пробел потомок. Например:

Псевдоселекторы.

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

1)новая
a:link{ 2) Посещенная
a:visited{ 3)Наведение курсором 4)Активная – во время щелчка А если просто записать

То это будет цвет ссылки для ВСЕХ состояний.

Изменить шрифт текста

Для этого существует значение селектора:

font-family: Tahoma, Verdona;
Значение шрифтов можно задавать разные, но стоит помнить, что не все браузеры могут корректно отображать все шрифты. Для надежности стоит воспользоваться сайтом:

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

Стоит отметить, что все шрифты можно условно разделить на группы :
1) sans-serif – без засечек (Tahoma, Verdona)
2) serif— с засечками (Times New Roman) 3) monospace – (Lucida Console).С одинаковой длиной всех букв. Этот шрифт в основном используется, для специальных текстов отображающих написание программ и тегов.
Следует запомнить, что в ранних версиях HTML, названия шрифтов, состоящих из двух и более слов, следует писать в двойных кавычках!

Размер шрифта.

Его указывают с помощью font-size 1) В процентах —100% (по умолчанию). Метод хорош для изменения маштабирования страницы пользователем. Сохраняет все пропорции и часто используется. 2)em – условные единицы (1 em – по умолчанию) Так же как и проценты. 1,1=110% 3) px – в пикселях (по номиналу – 16 px) 4) pt – пункты.

Это пришло из типографии. Один пункт = 1/72 дюйма. 10 pt = примерно 3,5 мм. 5) ключевые слова:
а) small — маленький- 80% б) medium — средний – 100% в) large — большой – 120% Бывают и такие обозначения — xlarge, xxlarge, xsmall, xxsmal и так далее, но они редко используются.

Курсив в CSS

Задать его можно практически любому элементу через простые действия. В нужном месте HTML
bbbbb Для абзацев:
bbbb

Жирность тексту задается еще проще

Стоит только прописать font—weight:normal ;

или (bold или значение100-900). Стоит помнить, что более 700(это уже полужирный) современные браузеры не поддерживают, а потому, лучше задавать просто bold.

Декорирование текста.

Атрибут: text-decoration: Можно задать подчеркивание сверху: overline Зачеркивание текста: line-throught Пример перечеркивания курсива.

text-decoration: line-throught; Часто бывает необходимо убрать подчеркивание с ссылок, которые подчеркнуты по умолчанию. Сделать это очень просто : text-decoration: none;
Это нужно прописать отдельно для ссылок: text-decoration: none;

Выравнивание текста.

О выравнивании заголовка по центру блога, вы можете прочитать в моем посте здесь.Вы уже знаете, что для этого есть text—align:left ; (right; center; justify)
Стоит остановиться на значении
в примере: text-align: justify; В этом примере выравнивание абзаца по всей ширине. То есть за счет незаметного увеличения интервала между словами.

Красная строка

text—indent: 35px;
Значение задаем в пикселях , в данном случае.

Межстрочный интервал

Line-height:normal; или 20-30-40px или 2 – коэффициент от текущего, можно задать и дробью – 1,5 (например)

Интервал между словами

Для коротких слов может потребоваться интервал между буквами
letter—spacing:

Изменения регистра

uppercase – все буквы большие; lowercase – все буквы маленькие; capitalize – все слова с заглавной буквы;

Стиль подчеркивания css.

Нижнее подчёркивание html или как украсить свой текст для удобного чтения

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

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

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

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

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

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

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

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

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

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

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

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

Наверняка вы замечали на многих ресурсах анимационное подчеркивание ссылок и хотели узнать, как это воплотить на своем сайте. Чтобы сделать красивое css подчеркивание элементов нам не понадобятся большие познания, либо подключение дополнительных скриптов, все, что нам нужно – это стандартный HTML и CSS.

Вариации подчеркивания

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

демонстрация подчеркивания

HTML

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

CSS

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

За подчеркивание у нас отвечает свойство text-decoration , но применять его здесь не имеет смысла, потому как воплотить наши планы по анимации в таком случае не совсем актуально. Не будем забывать, что каждому элементу можно присвоить псевдоэлемент::before или::after . Поэтому все свойства будем задавать именно им, а нашей ссылке сразу же задаем следующие параметры:

A{ display: inline-block; position: relative; text-decoration: none; }

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

A::before{ display: block; position: absolute; content: «»; height: 2px; width: 0; background-color: red; transition: width .5s ease-in-out, left .5s ease-in-out; left: 50%; bottom: 0; }

Т.е. высота линии подчеркивания будет 2px, длина 0, красного цвета, а за анимацию отвечает свойство transition . Ну и конечно же, отступ слева на 50%, т.е. центральная точка. Практически те же действия производим и с псевдоэлементом::after:

A::after{ display: block; position: absolute; content: «»; height: 2px; width: 0; background-color: red; transition: width .5s ease-in-out; left: 50%; bottom: 0; }

A:hover::before{ width: 50%; left: 0; } a:hover::after{ width: 50%; }

Стоит отметить, что это лишь один из способов реализации данной идеи. Можно то же самое сделать и при помощи только одного псевдоэлемента::before . Подписывайтесь на материалы и предлагайте темы для статей.

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

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

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

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

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

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

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

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

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

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

Описание

Добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания. Одновременно можно применить более одного стиля, перечисляя значения через пробел.

Синтаксис

text-decoration: [ blink || line-through || overline || underline ] | none | inherit

Значения

blink Устанавливает мигающий текст. Такой текст периодически, примерно раз в секунду исчезает, потом вновь появляется на прежнем месте. Это значение в настоящее время не поддерживается браузерами и осуждается в CSS3, взамен рекомендуется использовать анимацию. line-through Создает перечеркнутый текст (пример ). overline Линия проходит над текстом (пример ). underline Устанавливает подчеркнутый текст (пример ). none Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию. inherit Значение наследуется у родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

text-decoration

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

Объектная модель

document. getElementById(«elementID «).style.textDecoration

document.getElementById(«elementID «).style.textDecorationBlink

document.getElementById(«elementID «).style.textDecorationLineThrough

document.getElementById(«elementID «).style.textDecorationNone

document.getElementById(«elementID «).style.textDecorationOverLine

document.getElementById(«elementID «).style.textDecorationUnderline

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit . Линия полученная с помощью значения line-through в IE7 располагается выше, чем в других браузерах; в IE8 эта ошибка исправлена.

Верстка любого информативного текста подразумевает включение смысловых гиперссылок или анкоров. Добавляются эти элементы при помощи тега «а» (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.

Фоновое подчеркивание для выделения текста, CSS свойство text-decoration-skip

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

текста с помощью фоновой «подложки» в виде цветной жирной линии. Ниже в статье найдете парочку примеров данной техники.

Само по себе решение вызывает достаточно неоднозначную реакцию у сообщества. Еще со времен зарождения классического «однопиксельного» подчеркивания некоторых дизайнеров смущает пересечение нижних полосок с буквами. В последствии были придуманы разные хаки и даже специальное CSS свойство (text-decoration-skip). С другой стороны такой прием позволяет выделить нужный участок текста, ссылку либо конкретные слова в предложении, сделав типографику страницы чуть более интересной.

Как правило, для реализации используются яркие цвета, возможно, контрастные. Чаще всего они светлее текста, располагаются за ним. Степень пересечения элементов встречается разная — где-то они лишь соприкасаются, в других примерах «фон» занимает более трети текста.

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

Свойство text-decoration-skip

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

У text-decoration-skip есть несколько значений:

objects (по умолчанию) — пропускаются инлайновые элементы (в т.ч. картинки).
none — создаются пересечения со всеми объектами.
spaces — пропускаются пробелы, символы разделения текста и свойства letter-spacing / word-spacing.
ink (как в примере выше) — линии не пересекает символы и буквы.
edges — подчеркивание начинается строго от начала контента и заканчивается на последней букве.
box-decoration — не учитываются отступы margin, border и padding.

Чтобы проще это понять вот картинка (из этой статьи).

Создание анимированных подчеркиваний для ссылок

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

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

h3 > a {
  position: relative;
  color: #000;
  text-decoration: none;
}
h3 > a:hover {
  color: #000;
}

После этого добавим границу и спрячем ее с помощью трансформации. Это делается с помощью установки этих свойств псевдоэлементу :before и задания значения масштаба по оси X 0. В качестве обходного пути спрячем эти свойства с помощью visibility: hidden для браузеров, не поддерживающих анимации CSS:

h3 > a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0. 3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

В самом конце укажем элементу анимировать все применяемые к нему изменения со значением продолжительности 0,3 секунды. Теперь, чтобы анимация появилась, нужно просто сделать элемент снова видимым при наведении указателя мыши и задать значение масштаба по оси X 1:

h3 > a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

И это все! На всякий случай в демонстрации работы оставлены приставки производителей для старых версий браузеров Firefox и Opera, но если Вам не требуется поддержка старых версий, можете использовать только свойства без приставок производителя и с приставкой производителя -webkit, как в коде CSS в тексте урока.

Автор урока Tobias Ahlin

Перевод — Дежурка

Смотрите также:

Настроить подчеркивание с помощью оформления текста в CSS

Хотя в этом руководстве содержится контент, который, по нашему мнению, принесет большую пользу нашему сообществу, мы еще не тестировали или отредактировал его, чтобы обеспечить безошибочное обучение. Это в нашем списке, и мы над этим работаем! Вы можете помочь нам, нажав кнопку «Сообщить о проблеме» в нижней части руководства.

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

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

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

Свойство text-decoration раньше предназначалось только для выбора между значениями none, underline, overline и line-through, но с новой рекомендацией оно становится сокращением для новых text-decoration-color, text-decoration-style и свойства text-decoration-line. Например, вот цветное двойное подчеркивание:

  .fancy {
  -webkit-text-decoration: двойное подчеркивание горячим розовым цветом;
  оформление текста: двойное подчеркивание горячим розовым цветом;
}

Необычный подчерк

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

Работает так, как вы можете себе представить. Наконец-то появился способ изменить цвет оформления текста!

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

text-decoration-style используется для определения типа оформления текста, и новая рекомендация приносит два новых значения: double и wavy:

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

Волнистое украшение

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

text-decoration-line принимает значения подчеркивания, overline, line-through и blink (однако, мигание устарело):

  . strike {
  -webkit-текст-украшение-цвет: красный;
  цвет оформления текста: красный;
  -webkit-text-decoration-line: сквозная строка;
  текст-украшение-строка: сквозная;
}

Ударь этот

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

С помощью text-decoration-skip мы можем избежать того, чтобы украшение проходило через части элемента, к которому оно применяется.Возможные значения: объекты, пробелы, чернила, края и украшение коробки.

ink: И, наконец, способ предотвратить наложение элементов нисходящих элементов глифов при оформлении текста:

  .ink {
  -webkit-text-decoration: сплошное темно-бирюзовое подчеркивание;
  оформление текста: сплошное темно-бирюзовое подчеркивание;
  -webkit-text-decoration-skip: чернила;
  текст-украшение-пропуск: чернила;
}

Бегемот

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

  
  Становится  очень  модным

  .super {
  -webkit-text-decoration: Перу сплошная линия поверх;
  оформление текста: Перу сплошная линия;
  -webkit-text-decoration-skip: объекты;
  текст-украшение-пропуск: объекты;
}

Очень необычное

Остальные значения еще не поддерживаются браузерами:

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

текст-подчеркивание-позиция

С помощью text-underline-position у нас есть еще один способ управления позиционированием оформления текста по отношению к глифам. Возможные значения: auto, under, left и right.

С авто, начальное значение , браузеры обычно размещают оформление рядом с базовой линией текста:

 . auto {
  -webkit-text-decoration: сплошное синее подчеркивание;
  оформление текста: сплошное синее подчеркивание;
  -webkit-текст-подчеркивание-позиция: авто;
  положение подчеркивания текста: авто;
}

Бегемот

… а теперь обратите внимание, как нижняя граница располагается после нижних элементов текста:

  .under {
  -webkit-text-decoration: сплошное синее подчеркивание;
  оформление текста: сплошное синее подчеркивание;
  -webkit-text-underline-position: под;
  текст-подчеркивание-позиция: под;
}

Бегемот

Значения left и right для text-underline-position используются для управления оформлением текста в режимах вертикального письма.

Теперь продолжайте и поразите нас необычным оформлением текста!

Поддержка браузера: Могу ли я использовать текстовое оформление с 2020 года? показывает, что 94% браузеров по всему миру хотя бы частично поддерживают это свойство.

CSS «text-decoration: none» для удаления подчеркивания для гиперссылок не работает

Привет,

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

  a: link, a: hover {
   текстовое оформление: нет;
}

Hi @ addweb-solution-pvt-ltd,

Спасибо, что ответили мне здесь, но предоставленные строки уже были использованы в разделе Additional CSS в теме, вместо того, чтобы добавлять их в таблицу стилей.Фактически, метод StyleSheet тоже был испробован.

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

Есть идея / предложение попробовать еще немного, чтобы решить эту проблему?

Просто добавьте ! Important позади стиля, и он будет работать.

Hi @ addweb-solution-pvt-ltd,

На случай, если я не ошибся (спасибо за понимание, что я вообще не разбираюсь в кодировании):

Добавление следующих строк в таблицу стилей? —

  a: link, a: hover {
текстовое оформление: нет;
}! important

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

Этот ответ был изменен 2 года 6 месяцев назад пользователем HeNRy Hu.

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

  a: link, a: hover {
    текст-украшение: нет! важно;
}

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

Hi @ addweb-solution-pvt-ltd,

Спасибо за уделенное время.

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

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

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

CSS подчеркивание текста. В общем веб-дизайне больше всего… | by Kolosek

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

Хотя снаружи есть новый мир, и старые вещи улучшаются, по крайней мере, в несколько этапов. Элементы ссылок больше не нужно подчеркивать, а строка под текстом сегодня — это не просто идентификация ссылки. Этот краткий курс в основном посвящен опции подчеркивания text-decoration CSS и «связанным» параметрам.

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

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

Есть два основных варианта добавления строки под текстом с помощью CSS.
Первое — это свойство text-decoration , которое определяет украшение, добавленное к тексту.Возможные значения для этого свойства: подчеркивание, верхнее подчеркивание и строк. Свойство text-decoration должно быть сокращенным свойством для text-decoration-line, text-decoration-color и text-decoration-style, но это пока плохо поддерживается. На данный момент у нас есть текстовое оформление, и с его помощью мы можем добавить строку под, поверх или сквозь текст, с text-decoration-color мы можем раскрасить эту строку и с text-decoration-style , мы можем сделать это двойной, пунктирный, штриховой или волнистый.

Второе решение — своего рода взлом, подразумевающее использование с границами снизу . Свойство display в этом случае должно быть inline . С помощью этого решения мы можем управлять положением линии с помощью свойства padding-bottom , толщиной линии с border-bottom-width , стилем border-bottom-style и цветом border-bottom- цвет . Border-bottom-style имеет те же параметры, что и text-decoration-style, и некоторые параметры 3D-эффекта.Этот вариант предлагает больше параметров и переменных, но его сложнее использовать.

Сделать точечно-волнистое подчеркивание по-прежнему невозможно. В ожидании 🙁

CSS: Как сделать ссылки не подчеркнутыми .. — Статьи

Это простое учебное пособие, в котором показано, как удалить подчеркивание и добавить цвет к ссылкам с помощью Dreamweaver MX и CSS.

Это учебное пособие показывает вам как удалить подчеркивание из ссылок с помощью Dreamweaver MX.

Открыть окно -> Стили CSS (сдвиг F11)

Выбрать новый стиль (страница со значком плюса в нижней части панели)

Далее в типе выберите «Использовать селектор CSS.»

Затем определить только в этом документе.

Вернитесь наверх, выберите ссылку: и нажмите ОК

Теперь откроется окно определения стиля и введите текст, если вы хотите указать шрифт и цвет.

Внизу установите флажок «Нет» для украшения.

Вы должны увидеть это в заголовке вашего документа

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

Повторите шаг 2 еще раз с: hover. Вот как будет выглядеть ссылка при наведении на нее мыши. На нем выберите подчеркивание для украшения, чтобы ваши ссылки были подчеркнуты.

Повторите шаг 2 еще раз. На этот раз с: active. Как вы, наверное, догадались, это форматирует то, как будет выглядеть текст при нажатии на ссылку.

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

Подчеркнутые ссылки

68designs.com «> Моя ссылка без подчеркивания

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

В веб-дизайне каждая деталь имеет значение — включая ваши ссылки.

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

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

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

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

Источник изображения

Чтобы удалить подчеркивание из ссылок, вы можете использовать свойство CSS text-decoration. Ниже мы рассмотрим, как определить это свойство, чтобы полностью удалить подчеркивание со ссылок на вашем HTML-сайте или сайте Bootstrap.

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

Добавьте свой HTML-код в раздел своей веб-страницы.
Определите четыре псевдокласса ссылок с помощью свойства text-decoration в разделе.
Убедитесь, что ссылки: и: посещенные идут перед: hover, а: active идут последними. Это важно для каскадирования таблицы стилей.
Установите для каждого свойства значение «нет».

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

Вот код CSS:

 
  
  а: ссылка {
  текстовое оформление: нет; 
 } 
  a: посетил {
  текстовое оформление: нет; 
 } 
  a: парение {
  текстовое оформление: нет; 
 } 
  a: активный {
  текстовое оформление: нет; 
 }

Вот HTML:

 
  
  
   Это ссылка   внутри абзаца.

Вот результат:

Источник изображения

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

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

По умолчанию в Bootstrap ссылки показывают подчеркивание, только когда они находятся в наведенном или активном состоянии.Это означает, что когда посетитель наводит курсор на ссылку или нажимает на нее, он будет отображать подчеркивание. В противном случае подчеркивание не будет отображаться в ссылках, даже если они были посещены. Кроме того, ссылки, определенные классом кнопки Bootstrap, никогда не имеют подчеркивания.

Источник изображения

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

Вот код CSS:

 
  
  a: парение {
  текстовое оформление: нет; 
 } 
  a: активный {
  текстовое оформление: нет; 
 }

Вот HTML:

 
  
  
   Это ссылка  , которая появляется внутри абзаца. Ниже приведена ссылка, определенная классом кнопки Bootstrap. 
 
   Ссылка

Вот результат:

Источник изображения

Стилизация ссылок с помощью CSS

Удаление подчеркивания в ссылках — один из самых частых вопросов программистов. Хорошая новость заключается в том, что с помощью свойства text-decoration процесс прост.Для этого вам просто нужно немного знать HTML и CSS.

6 причин, почему изменение подчеркивания ссылок в Chrome не так актуально

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

Несколько месяцев назад я просматривал веб-страницу (имея в виду свой собственный бизнес), когда заметил, что ссылки показались мне странными.Это были простые синие текстовые ссылки с подчеркиванием … но стиль подчеркивания отличался от того, что было накануне.

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

В зависимости от размера текста, шрифта и т. Д., прерывистые подчеркивания иногда были безобидными, но иногда действительно цепляли мой взгляд при чтении страницы.

Что случилось?

text-decoration-skip-ink

Оказалось, что начиная с Chrome 64 (на настольных компьютерах и мобильных устройствах) браузер поддерживает новое свойство текста CSS под названием text-decoration-skip-ink . Это свойство позволяет использовать стиль подчеркивания, который «пропускает» нисходящие элементы букв, знаки препинания и т. Д., Пересекающиеся под базовой линией текста.

Chrome не только поддерживает новый стиль (назовем его «skip-ink»), но и сделал его по умолчанию для всех подчеркиваний текста.

Я не уверен, что изменение Google — это хорошо. Я объясню почему.

Но сначала несколько уточнений:

Чтобы было ясно, изменение стиля подчеркивания ссылки Chrome не имеет большого значения . Это просто сделка.
Skip-ink не новый визуальный подход. Некоторые реализации веб-сайтов, которые дают одинаковый или подобный эффект в течение нескольких лет.
Chrome даже не первый браузер, который делает это. К концу 2014 года Safari и iOS сделали этот визуальный стиль стандартным.

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

6 причин сомневаться в изменении подчеркивания ссылки в Chrome

1. Дополнительное визуальное отвлечение

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

Уровень дополнительной когнитивной нагрузки зависит от пользователя, выбора шрифта, размера текста, реализации браузера и т. Д.

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

2. Недоказанный подход

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

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

Подчеркивание, пересекающее нижний элемент (например, нижнюю часть «y»), в некоторой степени делает символ менее узнаваемым. Но также стоит помнить, что мы не читаем отдельные символы, мы читаем слова по частям и по ходу мысленно корректируем контекст.

Таким образом, по сравнению с традиционным подчеркиванием, функция пропуска чернил определенно упрощает различение отдельных букв и символов при их просмотре. Но помогает ли метод пропуска чернил улучшить или ухудшить читаемость в целом? Неясно. И без данных о предполагаемых плюсах и минусах я не уверен, что skip-ink — отличное решение, не говоря уже о столь очевидном превосходстве, что оно должно быть нашим по умолчанию.

3. Существуют и другие подходы.

Вот несколько возможных визуальных обработок ссылок:

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

Skip-ink, который показан на рисунке для сравнения, явно не лучше любого другого подхода для всех приложений.

4. Использование этого подхода по умолчанию может отпугнуть других.

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

5.Это вызывает новые проблемы (помимо визуального отвлечения).

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

Разбивая подчеркивание ссылки Chrome, skip-ink может внести двусмысленность в эти быстрые оценки. Пользователь может остановиться, чтобы более внимательно изучить ссылку на предмет подсказок — например, соседних подчеркнутых пробелов — чтобы определить ответ, но пользователи не могут и не должны этого делать.

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

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

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

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

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

Семейство оформления текста CSS (не только для подчеркивания ссылок)

Рисунок. Последние функции CSS Text Decoration Level 4, которые не будут работать везде.

text-decoration-skip-ink — для предотвращения пересечения линии

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

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

В стилях по умолчанию современных веб-браузеров есть настройка text-decoration-skip-ink: auto , поэтому обычно нам не приходится с этим иметь дело.На всякий случай, если мы захотим его выключить. Но я понятия не имею, зачем нам это делать в обычных ситуациях.

Первоначально он использовался в спецификации как text-decoration-skip , но теперь эта функция была удалена — она будет разделена на несколько дополнительных функций.

Эта функция полностью поддерживается современными веб-браузерами.

text-underline-position — позиция декоративной линии

Где появляется декоративная линия:

  положение подчеркивания текста: авто |
  [под || [слева | справа]]

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

Для нас интересно значение под , оно будет выдавать подчеркивание под контуром буквы (та часть буквы, которая идет вниз под обычной линией, например p, y или j).

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

Эта функция не поддерживается Safari.

text-underline-offset — смещение оформления

Определяет смещение линии декорирования от исходного положения:

  смещение подчеркивания текста: авто | <ширина>

Он действует по-разному в зависимости от позиции текст-подчеркивание . Когда дело доходит до , подчеркивание , движение идет вниз, а с чертой — вверх.

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

Эта функция поддерживается Safari и Firefox, но не Chrome.

text-decoration-width & text-decoration-width — ширина линии оформления

Для установки ширины декоративной линии у нас есть два свойства:

  ширина текстового оформления: авто | <ширина>;
толщина украшения текста: авто | <ширина>;

В то время как:

text-decoration-width является стандартным в соответствии с уровнем 4 модуля оформления текста CSS, но на самом деле ни один браузер не может этого сделать.
толщина текста-декорации не такой стандарт. Однако он поддерживается Safari и Firefox, но не Chrome. Если вы хотите попробовать это, снова рекомендуется в em , чтобы адаптироваться к размеру текста.

текст-акцент — позиция акцента (не интересна для западных стран)

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

Вот эти функции: стиль выделения текста , цвет выделения текста , положение выделения текста и выделение текста .

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

оттенки (свойство text-shadow )
подчеркивание (признак текст-украшение-строка )
надстрочные линии (признак текст-украшение-строка )
сам текст
выделение (функция выделение текста )
сквозной (признак текст-украшение-строка )

Согласно этому списку, браузер разрешит конфликты в изображении кривых текста и его украшений.