Оформление ссылок

Содержание:

Варианты подчёркивания

На самом деле, вариантов может быть множество — всё зависит от вашей фантазии. Мы вам покажем три разных варианта: появление полосы слева, от центра и справа.

Пример 1: подчёркивание слева

Для начала давайте создадим элемент. Например, тег a
, который является ссылкой.

CSS

Обычно подчеркивание определяется значением text-decoration
, но анимация в этом случае не будет работать. В данном случае мы его опустим и присвоим псевдоэлемент :before
, с помощью которого мы и сделаем анимированное появление подчёркивания.

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

Данному элементу мы задали блочное обтекание, что не позволит подчёркиванию выйти за пределы границ элемента и позволит разместить тег в любом месте внутри какого-либо блока. Далее перейдём к псевдоэлементу :before
.

A:before {
display: block;
position: absolute;
content: «»;
height: 2px;
width: 0;
background: #ec4444;
transition: width 0.3s ease-in-out;
left: 0;
bottom: 0;
}

Мы задали абсолютное позиционирование псевдоэлементу для того, чтобы подчёркивание было внутри тега и не выходило за его пределы. Высота полосы будет составлять 2 пиксела, длина будет равна 0, цвет красный, а значение transition
отвечает за анимацию. Теперь остается добавить эффект при наведении.

A:hover:before {
width: 40%;
}

Таким образом мы задали значение длины в 40% от всей длины элемента. По аналогии расскажу и про другие примеры, где мы будем использовать еще один псевдоэлемент.

Пример 2: подчёркивание от центра

Оставим тот же тег.

CSS

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

При наведении нам нужно, чтобы подчеркивание шло от центра к краям элемента. Таким образом, пвседоэлементу :before
мы задали позиционирование слева равным 0, что сделает появление подчёркивания к левому краю.

Пример 3: подчёркивание справа

CSS

Таким образом, мы получили появление подчёркивания справа.

Позволяет сделать разное подчеркивание в HTML нижнее (underline), верхнее (overline), перечеркнутый текст (line-through) и т.п. Совместим эту фишку с предыдущей и получится:

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

text-decoration-style — стиль подчеркивания текста

Опция задает внешний вид декоративной линии для / ссылки. В новых рекомендациях CSS были добавлены значения wavy и double, теперь их всего 5:

solid — сплошная линия;
double — двойная (из первого примера выше);
dotted — состоит из последовательности точек;
dashed — позволяет сделать пунктирное подчеркивание CSS;
wavy — эффектная волнистая линия.

text-underline-position — позиционирование CSS подчеркивания

С помощь этого свойства можно управлять позицией линии относительно глифа шрифта.
Всего доступны 4 варианта:

auto — располагается максимально близко базовой линии текста;
under — под самой нижней границей шрифта;
left и right — слева/справа для записей, отображаемых вертикально.

Вот наглядное отличие нижнего подчеркивания текста с помощью under и auto:

Разница, думаю, вполне очевидна.

text-decoration-skip — убираем подчеркивание для элементов

С помощью опции можно отменить (пропустить) декорирование некоторых элементов в HTML строке. Чтобы лучше понять допустимые значения spaces, objects, box-decoration, edges, ink продублирую картинку из прошлой заметки:

То есть, например, с помощью ink вы можете сделать нижнее подчеркивание в CSS, которое бы не пересекалось с символами . Значение objects позволяет пропускать инлайновые элементы (inline-block) — вставляете span, и сплошная линия прервется в соответствующем месте:

Параметры box-decoration, spaces, edges намного хуже поддерживаются браузерами, поэтому их результат иногда отличается от ожидаемого. Вот состояние по совместимости/поддержке text-decoration на момент написания статьи:

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

Удаление сразу всех ссылок в документе word

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

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

HTML

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

<a href="#">demo ссылка</a>

CSS

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

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

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

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

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, красного цвета, а за анимацию отвечает свойство . Ну и конечно же, отступ слева на 50%, т.е. центральная точка. Практически те же действия производим и с псевдоэлементом :

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%;
}

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

css11

(18 голосов, в среднем: 4.7 из 5)

не скупись ставь лайк
Подписка на обновления:

Подчеркнутый текст через css.

Создание ссылок в microsoft excel

Как вы знаете есть — не будем использовать все, возьмем лишь один:

Нам потребуется очередной текст:

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

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

Оборачиваем данный текст в тег div.

Прописываем ему attribute style.

Со свойством и значением «».<div style=»text-decoration:underline»>

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

</div>
Смотрим результат:

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

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

Другие способы подчеркивания в CSS

Что такое анкоры ссылок? виды анкоров. грамотно составляем анкор-лист👨‍🎨

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

border-bottom

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

<html>
 <head>
  <title>Подчеркивание текста</title>
  <style>
  .underline {
  border-bottom: 2px solid; /* сплошное (solid) нижнее подчеркивание шириной в 2 пикселя */
}

.underline--blue {
  border-bottom-color: blue; /* подчеркивание синим цветом */
}

.underline--dotted {
  border-bottom: 3px red dashed; /* За пунктирное подчеркивание отвечает значение dashed */
}
  </style> 
 </head> 
 <body>
  <p>
  <span class="underline">Сплошное подчеркивание</span>
</p>

<p>
  <span class="underline underline--dotted">Пунктирное подчеркивание</span>
</p>

<p>
  <span class="underline underline--blue">Реализация подчеркивания синим цветом </span>
</p>
 </body>
</html>

Результат интерпретации браузером этого кода.

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

box-shadow

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

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

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

.underline {
  background-size: 1px 1em;
  box-shadow:
    inset 0 -0.175em white,
    inset 0 -0.2em #000;
  display: inline;
}

background-image

Этот метод почти не имеет недостатков, а его потенциал воистину огромен. Идея проста – создание радиального градиента совместно со свойством background-position. Это позволит создать изображение, которое будет находиться под текстом и повторяться по всей длине строчки.
Чтобы реализовать работу данного подхода, необходимо прописать режим отображения display: inline;
Выглядит это так.

.dashed {
  background-image: linear-gradient(to right, blue 75%, transparent 75%);
  background-position: 0 1.04em;
  background-repeat: repeat-x;
  background-size: 8px 3px;
}

Этот код, примененный к элементу, реализует подчеркивание длинным пунктиром. Если же точки остановки градиента установить в 50%, а не 75, то подчеркивание будет квадратиками. Свойство background-position в этом случае размещает фон под текстом, а background-repeat заставляет его повторяться.
Вместо градиента можно использовать готовое фоновое изображение и реализовать, например, подчеркивание звездочками.

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

Подробно о зачеркивании/перечеркивании текста в html:

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

У нас есть какой то текст, который надо зачеркнуть.

Пусть это будет текст, который надо зачеркнуть в html.

Берем данный тег

Оборачиваем данный текст в тег:

Html:<s>Пусть это будет текст, который надо зачеркнуть в html. </s>

~~Пусть это будет текст, который надо зачеркнуть в html.~~
Вывод:

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

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

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

Здесь второй текст, который будем зачеркивать вторым тегом

Берем второй тег

Опять оборачиваем наш текст тегом:

Html:<del>Здесь второй текст, который будем зачеркивать вторым тегом </del>

~~Здесь второй текст, который будем зачеркивать вторым тегом~~
Вывод:

Как видим, наш текст прекрасно зачеркнулся, и никакой разницы между первым зачеркнутым вторым зачеркнутым текстом нет!
Мы дошли до третьего тега , который тоже может зачеркивать текст.

Повторяем пройденное выше:

Для зачеркивания текста нам нужен текст:

Здесь третий текст, который будем зачеркивать третьим тегом

Берем третий тег

Опять оборачиваем наш текст тегом:

Html:<del>Здесь третий текст, который будем зачеркивать третьим тегом </del>

~~Здесь третий текст, который будем зачеркивать третьим тегом~~
Вывод:

Результат предсказуемый! Текст сделался перечеркнутым!
В этот раз, не будем использовать теги:

Будем использовать css.

Нам понадобится свойство rd.

Со значением

И не забываем про , для примера используем данное свойство и значение прямо в теге:

И да мы забыли про текст:

Текст номер 4, который будем зачеркивать с помощью css

Добавим тег span.

Туда впишем attribute style с и

Соберем весь код вместе:

Html:<span style=»text-decoration:line-through»>Текст номер 4, который будем зачеркивать с помощью css</span>
Результат:Текст номер 4, который будем зачеркивать с помощью css
Вывод:

Что следовало и ожидать — текст прекрасно зачеркнут!
На самом деле — эти два слова, зачеркнуть и перечеркнуть имеют один и тот же смысл.

Для нас главная разница, по какому из запросов приходят больше или меньше!

Начнем с меньшего!

html перечеркнутый 281

перечеркнутый текст html 243

html тег перечеркнутый текст 22

+как сделать текст перечеркнутым html 11

html код перечеркнутый текст 7

Итого : получается, что количество запросов в месяц, где встречается слово «перечеркнутый» — 564 запросов в месяц.

зачеркнутый html 656

зачеркнутый текст html 549

html тег зачеркнутый текст 39

зачеркнутый тег +в html 20

+как сделать зачеркнутый текст +в html 18

html зачеркнуть слово 17

зачеркнутый шрифт html 16

html код зачеркнутый текст 15

зачеркнутый текст html css 9

html зачеркнутая цена 7

Итого получается, что количество запросов в месяц, где встречается слово «зачеркнутый» — 1346 запросов в месяц.

Как сделать жирный текст CSS-стилями

Для выделения жирным в CSS предусмотрено свойство font-weight, которое в свою очередь имеет достаточно большое количество принимаемых значений, используя которые, вы можете подобрать для своей ситуации наиболее подходящий жирный текст css-стилями.

Итак, свойство font-weight может принимать фиксированные значения:

bold – жирный
bolder – еще жирнее
normal – начальный вид
lighter – делает буквы тоньше, по сравнению с normal

Кроме этого, можно использовать числовые значения, что бы подобрать степень жирности на свое усмотрение. Для этого можно задать число от 100 до 900, при этом 100 будет соответствовать значению lighter, а 900 будет иметь наибольшую жирность, на порядок выше, чем у значения bolder.

XHTML

<div class=»bol-text»>
<p style=»font-weight:bold;»>Жирный</p>
<p style=»font-weight:bolder;»>Еще жирнее</p>
<p style=»font-weight:100;»>Совсем не жирный текст CSS</p>
<p style=»font-weight:900;»>Очень жирный текст CSS</p>
</div>

1
2
3
4
5
6

<p style=»font-weight:bold;»>Жирный</p>

<p style=»font-weight:bolder;»>Еще жирнее</p>

<p style=»font-weight:100;»>Совсем не жирный текст CSS</p>

<p style=»font-weight:900;»>Очень жирный текст CSS</p>

</div>

Жирный

Еще жирнее

Совсем не жирный текст CSS

Очень жирный текст CSS

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

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

a.example_6 {

display: inline-block;

color:#ffeb3b;

line-height: 1;

text-decoration:none;

cursor: pointer;

position:relative;

border: none;

}

a.example_6:after {

background-color: #ffeb3b;

display: block;

content: «»;

height: 2px;

width: 0%;

left:50%;

position:absolute;

-webkit-transition: width .3s ease-in-out;

-moz—transition: width .3s ease-in-out;

transition: width .3s ease-in-out;

-webkit-transform:translateX(-50%);

-moz-transform:translateX(-50%);

transform:translateX(-50%);

}

a.example_6:hover:after,

a.example_6:focus:after {

width: 100%;

}

Как сделать разное подчёркивание ссылки одновременно и сверху, и снизу, и слева, и справа?

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

div#main_text a.example_99 {

text-decoration: none;

border-bottom: 1px solid red;

border-left: 1px solid green;

padding-left: 6px;

border-top: 1px solid #ffeb00;

padding-top: 6px;

border-right: 1px solid #ce00ff;

padding-right: 6px;

padding-bottom: 6px;

}

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

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

div#main_text a.example_99_1{text-decoration: none; border:none;}

div#main_text a.example_99_1:hover {

text-decoration: none;

border-bottom: 1px solid red;

border-left: 1px solid green;

padding-left: 6px;

border-top: 1px solid #ffeb00;

padding-top: 6px;

border-right: 1px solid #ce00ff;

padding-right: 6px;

padding-bottom: 6px;

}

border-bottom

Этот метод тоже можно отнести к стандартному. Многие его применяют, когда хотят отделить подчеркивание от текста. Наглядный пример:

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

Что нужно сделать?

HTML:

<a href="javascript::">Подчеркнутый текст</a>

CSS:

a {
     border-bottom: 1px solid #268ccc;
}

Однако рассмотренные методы имеют 2 минуса:

в первом случае: подчеркивающая линия находится слишком близко к нужному тексту;
во втором случае: подчеркивающая линия находится слишком далеко от нужного текста.

Чтобы решить эти проблемы Вы можете воспользоваться двумя оставшимися методами. Применяйте тот, который больше нравится Вам.

Дополнительные фишки для подчеркивания ссылок

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

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

a:hover {
text-decoration: underline;
}

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

Существует куча разных способов оформления подчеркивания. Возможно, вы вспомните статью Марсина Вичари “Crafting link underlines” на Medium. Разработчики Medium не пытаются сделать что-то безумное , они просто хотят создать красивую линию под текстом.

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

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

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

Подчеркивание — один из элементов форматирования текста, который позволяет улучшить понимание смысла написанного, выделяя его наиболее важные части. В текстовом процессоре Microsoft Office Word выделять слова этим методом можно разными способами, получая при этом разные варианты подчеркивания.

Инструкция

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

Кликните по кнопке с изображением подчеркнутой буквы «Ч» в меню текстового процессора — на вкладке «Главная» она помещена в группу команд «Шрифт». Можно вместо этого использовать и сочетание клавиш Ctrl + U, результат будет одинаков — Word подчеркнет выделенное слово.

Если слово, которое надо подчеркнуть, еще не набрано, можно произвести описанную манипуляцию — кликнуть по кнопке или нажать сочетание клавиш — заранее, перед вводом слова. В этом случае вам нужно не забыть проделать то же самое повторно после окончания набора выделяемого текста — чтобы отключить режим подчеркивания.Кроме стандартного подчеркивания одной линией в Word есть и другие варианты. Чтобы выбрать один из них — пунктирную линию, штрих-пунктирную, двойную и т.д. — вместо щелчка по самой кнопке с буквой «Ч» кликните метку у ее правого края. Эта метка открывает выпадающий список с перечнем возможных вариантов оформления линии. Последняя строка в этом списке — «Цвет подчеркивания» — открывает подраздел, где вы можете указать и цвет окраски выбранной линии.Если вы выделите какой-то фрагмент текста и воспользуетесь одной из описанных выше опций, подчеркнутым окажется весь этот фрагмент, включая и пробелы. В текстовом процессоре есть возможность задать вариант подчеркивания, при котором линия будет помещена только под словами, а пробелы останутся в своем стандартном виде. Чтобы воспользоваться этим вариантом после выделения нужного фрагмента кликните его правой кнопкой мыши и выберите в контекстном меню строку «Шрифт». В поле «Подчеркивание» открывшегося окна установите значение «Только слова». После этого станет доступно изменение значения в поле «Цвет подчеркивания» — если это необходимо, выберите в нем нужный цвет. Нажмите OK, и Word подчеркнет слова.

Возможно, будет полезно почитать:

Создать формат оглавления в word ;
Как зарядить планшет от компьютера ;
Подготавливаем заголовки с применением встроенных стилей ;
Что делать с разбитым планшетом ;
Параметры страницы в Word ;
Экран планшета во время работы стал черным что делать ;
Электронное содержание в ворде ;
Подключение телефона или планшета к телевизору ;

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

К счастью, в редакторе Word есть немало способов, как это можно реализовать. В данной статье мы рассмотрим 4 таких способа. Материал будет актуален для всех современных версий Microsoft Word, включая Word 2007, 2010, 2013 и 2016.

Последний способ сделать подчеркивания без текста – это вставка фигуры, которая называется «Линия». Для того чтобы воспользоваться этим способом нужно перейти на вкладку «Вставка», нажать на кнопку «Фигуры» и выбрать фигуру «Линия».

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

По умолчанию, линия получится синей. Для того чтобы изменить ее цвет, выделите ее и перейдите на вкладку «Формат» и измените стиль линии.

Также на вкладке «Формат» можно изменить и другие настройки линии. Например, здесь можно добавить к линии дополнительные эффекты. Для этого нужно нажать на кнопку «Эффекты фигур» и в открывшемся меню выбрать один из предложенных эфектов.

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

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

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

Чтобы убрать подчёркивание у ссылки, следует в стилях для селектора a добавить text-decoration со значение none (пример 1).

Пример 1. Отсутствие подчёркивания у ссылок

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Ссылки</title>
<style>
a {
text-decoration: none; /* Убираем подчёркивание */
}
</style>
</head>
<body>
<p><a href=»link.html»>Ссылка без подчёркивания</a>
</body>
</html>

Для псевдоклассов :hover и :visited нет необходимости добавлять text-decoration, они наследуют свойства селектора a.