Без подчеркивания ссылка: Ссылки без подчеркивания | htmlbook.ru

Ссылка ниже была черной без подчеркивания,а затем черной с подчеркиванием при наведении курсора. Именно этого я и хотел. Затем я превратил его в ассоциативную ссылку Amazon,и теперь она подчеркнута…

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

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

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

Я пытаюсь стилизовать ссылку внутри списка, и из-за того, что у меня есть другие стили, я не могу использовать border-bottom: 1px solid #0da4d3 . Теперь я провел некоторые исследования и нашел…

Я понимаю, что лучше всего импортировать партиалы SASS/SCSS без использования ведущего подчеркивания; например @import ‘normalize-scss/normalize’; // this imports .

Я хотел бы вставить некоторую дату в базу данных WordPress, используя следующий код: $table_name = $wpdb->prefix . liveshoutbox; $wpdb->insert( $table_name, array(… Это хорошо сработало……

Как мне избавиться от этого подчеркивания? Когда я навожу на него курсор, он думает, что это ссылка и что я могу cmd + click его открыть в браузере. Тем не менее, это мешает просмотру фактических…

Можно ли изменить высоту подчеркивания с того момента, когда разработчик использует text-decoration: underline; в CSS для создания подчеркивания? Используя CSS, я сделал слово about, которое имеет…

Персональный сайт — Как сделать ссылку Цвет ссылок Параметр Target Ссылки без подчеркивания Изображения в качестве ссылк

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

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

Пример 1. Использование абсолютных ссылок

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

Первые две ссылки называются неполные и указывают веб-серверу загружать файл index.html (или default.html) находящемуся в корне сайта (пример 1) или папке demo (пример 2). Если файл index.html отсутствует, браузер, как правило, показывает список файлов, находящихся в данном каталоге. Слэш перед адресом говорит о том, что адресация начинается от корня сайта (пример 3), двоеточие — перейти на уровень выше в списке каталогов сайта (пример 4).

<a href=images/xxx.jpg>Посмотрите на мою фотографию!</a><br>
<a href=tip.html>Как сделать такое же фото?</a>

</body>
</html>

Задание цвета всех ссылок на странице

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

LINK — определяет цвет ссылок на веб-странице (цвет по умолчанию синий, #0000FF).
ALINK — цвет активной ссылки. Цвет ссылки меняется при нажатии на ней кнопки мыши. Цвет по умолчанию красный, #FF0000.

В HTML цвета задаются цифрами в шестнадцатеричном коде, в виде #RRBBGG, где R, G и B обозначают соответственно красную, зеленую и синюю составляющую. Для каждого цвета задается шестнадцатеричное значение от 00 до FF, что соответствует диапазону от 0 до 255 в десятичном исчислении. Затем эти значения объединяются в одно число, перед которым ставится символ #.

Задание цвета отдельных ссылок на странице

Вышеописанный способ задания цветов работает для всех ссылок веб-страницы. Однако, иногда возникает необходимость одновременно использовать разные цвета. Светлые, например, для темных областей веб-страницы, а темные цвета — соответственно для светлых. Для этого существует два основных метода.

1. Использование тега FONT
Ссылка помещается между тегами <font> и </font>, которые должны находиться внутри контейнера <a href=…> и </a>.

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

2. Использование стилей
Для изменения цвета ссылки следует использовать параметр в теге А, где #rrggbb — цвет в шестнадцатеричном представлении. Можно, также, использовать названия цветов или указывать цвет в формате: rgb (132, 33, 65). В скобках указаны десятичные значения красного, зеленого и синего цвета.

<a href=content.html>Содержание сайта</a><br>
<a href=im.html>Интернет-маркетинг</a><br>
<a href=use.html>Юзабилити</a>

</body>
</html>

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

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

Пример

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4. 01//EN» «http://www.w3.org/TR/html4/strict.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″>
<title>Цвет ссылок</title>
<style type=»text/css»>
A {
 color: #008000;
 text-decoration: none;
}
A:visited {
 color: #800080;
}
A:hover {
 color: #800000;
 text-decoration: underline;
}
</style>
</head>
<body>
<p><a href=»rome.html»>Cras ingens iterabimus aequor</a> — завтра снова мы выйдем в огромное море.</p>
</body>
</html>

В данном примере ссылка становится подчеркнутой и меняет свой цвет, когда на нее наводится указатель (рис. 1). Заметьте, что псевдокласс hover в таблице стилей идет после visited. Это имеет значение, иначе посещенные ссылки в данном случае не будут изменять свой цвет.

Рис. 1. Вид ссылки при наведении на нее курсора мыши

                                             Увеличение букв ссылки

Ещё можно увеличить буквы при наведение на ссылку

a:hover { text-transform: uppercase; }

По умолчанию, при переходе по ссылке документ открывается в текущем окне или фрейме. При необходимости, это условие может быть изменено параметром target=»» тега А. Target может принимать следующие значения:

_blank — загружает страницу в новое окно браузера;
_self — загружает страницу в текущее окно;
_parent — загружает страницу во фрейм-родитель;
_top — отменяет все фреймы и загружает страницу в полном окне браузера.

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

Пример 1. Открытие документа в новом окне

Пример 2. Открытие документа во фрейме

Ссылка в примере 2 ведет на сайт www.htmlbook.ru, открывающийся во фрейме с именем newframe.

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

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

Подчеркивание прячется параметром text-decoration: none.

Пример. Убирание подчеркивания у ссылки

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

статьи

Подчеркивание текстовых ссылок уже стало определенным стандартом и сигналом о том, что это не просто текст, а именно ссылка. Это, кстати, является одной из причин, по которой не следует применять подчеркивание к обычному тексту, пользователи будут считать, что имеют дело со ссылкой. Наряду с использованием подчеркивания благодаря CSS у разработчи- ков сайтов появился и альтернативный вариант — создание ссылок без подчеркивания . С позиции удобства это не совсем верное решение, поскольку пользователь не может сразу догадаться, что текст, который он видит, явля- ется ссылкой. Все ведь уже привыкли раз используется подчеркивание, значит, это ссылка. Но при правильном применении отсутствие подчеркивания у ссылок может придать сайту определенный эффект. Только надо обязательно дать понять пользователю, что является ссылкой, а что обыч- ным текстом, разграничивая их, например, цветом. Еще можно сделать так, что при наведении курсора ссылка становится подчеркнутой, меняет свой цвет или используется и тот, и другой эффект одновременно.
Чтобы убрать подчеркивание у ссылки, следует для селектора А добавить параметр
t e x t — d e c o r a t i o n : none
пример

<html>
<head >
<style type=»text/css»>
A {
text-decoration: none /* Отменяем подчеркивание у ссылки */
}
</style>
</head >
<body >
<a href=» # » > Cсылка без подчеркивания < /а >
< /body >
< /html >

Чтобы добавить подчеркивание для ссылок, у которых установлен параметр text-decoration: none, следует воспользоваться псевдоклассом A:hover. Он определяет стиль ссылки, когда на нее наводится курсор мыши. Остается ТОЛЬКО добавить ДЛЯ псевдокласса параметр text-decoration: underline

<html>
<head >
<style type=»text/css»>
A {
text-decoration: none /* Подчеркивание убираем */
}
A:hover {
text-decoration: underline /* При наведении курсора подчеркивание появляется */
}
</style >
</head >
<body >
< a href=» # «> Ссылка без подчеркивания < /а>
</body >
</html >

Основы работы со ссылками и границами через CSS

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

Блок . Свойство text-decoration

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

Чаще всего это свойство используются для отмены подчеркивания ссылок (они по умолчанию подчеркнуты).

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

Значение underline

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

p {
	text-decoration: underline;
}

<p>
	Lorem ipsum dolor sit amet.
</p>

Так код будет выглядеть в браузере:

Lorem ipsum dolor sit amet.

Значение overline

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

p {
	text-decoration: overline;
}

<p>
	Lorem ipsum dolor sit amet.
</p>

Так код будет выглядеть в браузере:

Lorem ipsum dolor sit amet.

Значение line-through

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

p {
	text-decoration: line-through;
}

<p>
	Lorem ipsum dolor sit amet. 
</p>

Так код будет выглядеть в браузере:

Lorem ipsum dolor sit amet.

Значение none

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

В следующем примере ссылка по умолчанию будет подчеркнута, а вторая ссылка с id=»link» будет без подчеркивания, так как мы ей зададим text-decoration в значении none:

#link {
	text-decoration: none;
}

<a href="#">Ссылка по умолчанию</a>
<a href="#">Ссылка без подчеркивания</a>

Так код будет выглядеть в браузере:

Блок . Состояния ссылок

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

К примеру, вот так — a:hover — мы поймаем состояние, когда на ссылку навели курсор мышки. В этот момент мы можем, к примеру, поменять цвет ссылки или убрать/добавить ей подчеркивание.

Конструкция :hover называется псевдоклассом. Псевдоклассы позволяют отлавливать разные состояния элементов.

Кроме :hover если еще псевдоклассы :link, которые отлавливают не посещенную ссылку, и :visited, которые отлавливают посещенную ссылку.

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

Есть еще и псевдокласс :active, который отлавливает следующее состояние: на элемент нажали мышкой, но еще не отпустили.

В следующем примере для ссылки в состоянии :hover убирается подчеркивание, в состоянии :link будет красный цвет, в состоянии :visited — зеленый, в :active — голубой:

a:link {
	color: red;
}
a:visited {
	color: green;
}
a:hover {
	text-decoration: none;
}
a:active {
	color: blue;
}

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

Так код будет выглядеть в браузере:

Псевдоклассы наследуют друг от друга. К примеру, если я уберу подчеркивание для состояния :link, то оно уберется для всех состояний.

Из-за наследования для корректной работы данные псевдоклассы следует размещать именно в таком порядке, как в примере: :link, :visited, :hover, :active (ненужные можно не писать). Этот порядок подчиняется следующему мнемоническому правилу: LoVe HAte.

Часто состояния :link и :visited объединяют вместе через запятую:

a:link, a:visited {
	color: red;
}
a:hover {
	text-decoration: none;
}
a:active {
	color: blue;
}

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

a {
	color: red;
}
a:hover {
	text-decoration: none;
}
a:active {
	color: blue;
}

Блок . Сложные селекторы с учетом состояний ссылок

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

Давайте научимся обращаться к таким ссылкам.

Пусть у нас есть ссылки с классом .test и без него. Выберем только ссылки с этим классом:

<a href="#">Ссылка без класса</a>
<a href="#">Ссылка с классом test</a>
<a href="#">Ссылка с классом test</a>
<a href="#">Ссылка с классом test</a>

a:link.test, a:visited.test {
	color: red;
}
a:hover.test {
	color: blue;
}

Пусть у нас есть ссылки внутри блока с id test. Выберем только ссылки только из этого блока:

<a href="#">Ссылка вне блока</a>
<div>
	<a href="#">Ссылка внутри блока</a>
	<a href="#">Ссылка внутри блока</a>
	<a href="#">Ссылка внутри блока</a>
</div>

#test a:link, #test a:visited {
	color: red;
}
#test a:hover {
	color: blue;
}

Если вам не очень понятно, как обращаться со ссылками, то специально для вас я снял следующее видео:

Здесь скоро появится видео по работе с состояниями ссылок.

Блок . Работа с границами на CSS

Сейчас мы с вами научимся добавлять границу элементам. Это делается при помощи трех свойств: свойство border-width задает толщину границы, border-color — цвет, а border-style задает тип границы.

Первые два свойства работают очевидным образом: border-color принимает цвета в том же формате, что и свойство color, а толщина границы может задаваться в любых единицах измерения (кроме процентов), чаще всего в пикселях.

А вот свойство border-style может принимать одно из нескольких значений: solid (сплошная линия), dotted (граница в виде точек), dashed (граница в виде черточек), ridge (выпуклая граница), double (двойная граница), groove (вогнутая граница), inset (рамка), outset (рамка) или none (отменяет границу).

Сделаем, к примеру, границу толщиной 3 пикселя, в виде точек, красного цвета:

div {
	border-width: 3px; /* толщина 3px */
	border-style: dotted; /* в виде точек */
	border-color: red;  /* красный цвет */
	width: 300px;
	height: 100px;
}

Так код будет выглядеть в браузере:

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

Значение solid

Значение solid — сплошная линия:

div {
	border-width: 1px;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

Так код будет выглядеть в браузере:

Значение dotted

Значение dotted — линия в виде точек:

div {
	border-width: 1px;
	border-style: dotted;
	border-color: black;
	width: 300px;
	height: 100px;
}

Так код будет выглядеть в браузере:

Значение dashed

Значение dashed — линия в виде тире:

div {
	border-width: 1px;
	border-style: dashed;
	border-color: black;
	width: 300px;
	height: 100px;
}

Так код будет выглядеть в браузере:

Значение ridge

Значение ridge — выпуклая линия:

div {
	border-width: 3px;
	border-style: ridge;
	border-color: black;
	width: 300px;
	height: 100px;
}

Так код будет выглядеть в браузере:

Значение double

Значение double — двойная линия:

div {
	border-width: 3px;
	border-style: double;
	border-color: black;
	width: 300px;
	height: 100px;
}

Так код будет выглядеть в браузере:

Значение groove

Значение groove — вогнутая линия:

div {
	border-width: 3px;
	border-style: groove;
	border-color: black;
	width: 300px;
	height: 100px;
}

Так код будет выглядеть в браузере:

Значение inset

Значение inset — рамка:

div {
	border-width: 3px;
	border-style: inset;
	border-color: black;
	width: 300px;
	height: 100px;
}

Так код будет выглядеть в браузере:

Значение outset

Значение outset — рамка:

div {
	border-width: 3px;
	border-style: outset;
	border-color: black;
	width: 300px;
	height: 100px;
}

Так код будет выглядеть в браузере:

Блок .

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

<div></div>

div {
	width: 300px;
	height: 100px;
	border: 1px solid red;
}

Так код будет выглядеть в браузере:

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

Блок . Граница для отдельных сторон

Существуют также свойства-сокращения для отдельных сторон: border-left (левая граница), border-right (правая граница), border-top (верхняя граница), border-bottom (нижняя граница).

Давайте сделаем блоку только левую границу с помощью свойства border-left:

<div></div>

div {
	width: 300px;
	height: 100px;
	border-left: 1px solid red;
}

Так код будет выглядеть в браузере:

А теперь одновременно сделаем и левую, и правую границы:

<div></div>

div {
	width: 300px;
	height: 100px;
	border-left: 1px solid red;
	border-right: 1px solid red;
}

Так код будет выглядеть в браузере:

Блок .

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

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

Давайте скруглим уголки блоку, задав ему скругление в 10px:

<div></div>

div {
	width: 300px;
	height: 100px;
	border: 1px solid red;
	border-radius: 10px;
}

Так код будет выглядеть в браузере:

Что означает то, что мы указали скругление в 10px? Это радиус круга, который можно вписать в это скругление. Если у вас нелады с математикой и вам не понятно последнее предложение — забудьте о нем и просто подбирайте скругление на глаз. При некотором опыте это сделать не проблема (измерительного инструмента для измерения скруглений не существует, по крайней мере я о таком не слышал).

Имейте ввиду, что border-radius не входит в свойство-сокращение border, это разные свойства, хоть и имеют похожие названия.

Блок . Разные скругления для разных углов

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

Четыре значения

Свойство border-radius может принимать 4 значения. Как в этом случае будут скругляться уголки — смотрите на следующем примере: border-radius: 10px 20px 30px 40px — 10px — верхний левый угол, 20px — верхний правый угол, 30px — нижний правый угол, 40px — нижний левый угол.

Смотрите, что у нас получится:

<div></div>

div {
	width: 300px;
	height: 100px;
	border: 1px solid red;
	border-radius: 10px 20px 30px 40px;
}

Так код будет выглядеть в браузере:

Два значения

Если же в border-radius написать два значения, то первое задаст скругление углов одной диагонали, а второе — другой.

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

<div></div>

div {
	width: 300px;
	height: 100px;
	border: 1px solid red;
	border-radius: 10px 40px;
}

Так код будет выглядеть в браузере:

Три значения

Ну, и наконец, если в border-radius написать три значения, то первое задаст скругление верхнего левого угла, третье — нижнего правого, а второе — скругление углов диагонали (двух оставшихся углов).

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

<div></div>

div {
	width: 300px;
	height: 100px;
	border: 1px solid red;
	border-radius: 10px 20px 30px;
}

Так код будет выглядеть в браузере:

Что вам делать дальше:

Приступайте к решению задач по следующей ссылке: задачи к уроку.

Когда все решите — переходите к изучению новой темы.

Как изменить стиль текстовых ссылок по умолчанию в Google Docs

По-видимому, невозможно обновить стиль по умолчанию для ссылок в вашем документе Google. Это потому, что Google Docs не рассматривает ссылки как стили . Это понятно, так как ссылка может применяться в тексте, отформатированном в любом другом стиле (например, заголовок 1, обычный текст и т. Д.)

Если вы попытаетесь выделить ссылку и проверить контекстное меню, обратите внимание, что для соответствия выбран параметр « Обновить обычный текст» . Это указывает на то, что стиль текста обозначается исключительно как «Обычный текст» (т. Е. Не имеет стиля ссылки ).

Обходной путь для удаления подчеркивания ссылки

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

Если вы не используете подчеркивания где-либо еще *

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

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

Если вы хотите сохранить подчеркивания в другом месте (например, заголовки, таблицы)

• Выберите абзац обычного текста
• Подчеркнутый
• Щелкните правой кнопкой мыши (Ctrl-клик на Mac) выделенный текст
• Обновите «Обычный текст», чтобы соответствовать
• Удалить подчеркивание
• Обновите «Обычный текст», чтобы соответствовать

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

Меняем цвет и стиль гиперссылки в Ворд

На чтение 2 мин. Опубликовано 18/01/2016

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

Как изменить цвет ссылки в Ворд

Шаг 1. На вкладке «Главная» в разделе «Стили» нажимаем на маленькую кнопочку, открывающую меню стилей. Смотрите на скриншот

Шаг 2. Нажимаем с правой стороны от надписи «Гиперссылка» на иконку, чтобы открыть меню. В этом меню выбираем «Изменить»

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

Шаг 3. Открылось окно «Изменить стиль». По умолчанию у нас ссылка окрашена в синий цвет. Чтобы его поменять, нажимаем на синий цвет и в выпадающем меню выбираем новый цвет гиперссылки, который вам нужен.

Шаг 4. Нажимаем на кнопку «Ок», чтобы изменения вступили в силу.

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

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

Шаг 3. Если вы были внимательны, то обратили внимание на знак подчеркивания рядом с выбором цвета ссылки. По умолчанию он активен. Нажмите на него, чтобы убрать подчеркивание гиперссылок, а затем нажмите на кнопку «Ок», чтобы применить изменения.

Шаг 4. Если вы все сделали правильно, значит гиперссылки у вас без подчеркиваний, как на скриншоте.

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

На этом все. Теперь вы знаете Как изменить цвет или удалить подчеркивание ссылки в Ворд. Переходите к другому уроку, чтобы узнать «Как добавить гиперссылку в Ворде».

Немного юмора:

В этом мире только Google понимает меня с полуслова.

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

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

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

a {
	position: relative;
	color: #00a650; 
	cursor: pointer;
	line-height: 1; 
	text-decoration: none; 

}
a:after {
	display: block;
	position: absolute;
	left: 0; 
	width: 0;
	height: 2px; 
	background-color: #00a650; 
	content: "";
	transition: width 0.3s ease-out; 
}

a:hover:after,
a:focus:after {
	width: 100%; 
}

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

достаточно изменить left:0 на right:0;

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

Делаем это из административной панели:

1. Открываем настройки
2. Выбираем шаблон
3. Открываем Style.css
4. В самый конец кода добавляем 

.bottom-bar .main-menu .mg-menu li .submenu li a {
	position: relative;
	color: #00a650; 
	cursor: pointer;
	line-height: 1; 
	text-decoration: none; 

}
.bottom-bar .main-menu .mg-menu li .submenu li a:after {
	display: block;
	position: absolute;
	left: 0; 
	width: 0;
	height: 2px; 
	background-color: #00a650; 
	content: "";
	transition: width 0.3s ease-out; 
}

.bottom-bar .main-menu .mg-menu li .submenu li a:focus:after,
.bottom-bar .main-menu .mg-menu li .submenu li a:hover:after{
	width: 100%; 
}

Создайте свои интернет-магазин в два клика!

Убрать подчеркивание в ссылке | WordPress.org

Вы должны получить доступ к параметрам плагина в плагине Tablepress и в текстовом поле, предоставленном для Custom CSS, поместите код, как показано ниже:

.tablepress-id- # no .column- # no a {
text-decoration: none;
текст-украшение-цвет: розовый;
}

#no представляет собой номер идентификатора таблицы и номер столбца соответственно.

• Этот ответ был изменен 2 года 8 месяцев назад пользователем dancia.
• Этот ответ был изменен 2 года 8 месяцев назад пользователем dancia.
• Этот ответ был изменен 2 года 8 месяцев назад пользователем dancia.

К сожалению, у меня не сработало.

Привет,

спасибо за ваш пост и извините за беспокойство.

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

С уважением,
Тобиас

Например:

 .tablepress-id-1 .column-3 a {
текстовое оформление: нет;
цвет оформления текста: розовый;
}  

Не забудьте нажать кнопку «Сохранить» после ввода этого

Это будет работать для таблицы с идентификатором 1, столбец № 3.
Обычно работает

• Этот ответ был изменен 2 года 8 месяцев назад пользователем dancia.
• Этот ответ был изменен 2 года 8 месяцев назад пользователем dancia.

Привет, Данча, спасибо! Но с моим столом все равно не работало.
Привет, TobiasBg, моя ссылка http: // box5136.temp.domains/~pinkofwe/2018/06/24/hello-world/#Citi-MaxiGain.

Привет,

спасибо за ссылку!

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

  .tablepress-id-1 a {
  граница: нет;
  цвет: # ff0000;
}  

С уважением,
Тобиас

Привет, Тобиас, все идеально! Спасибо!

Привет,

без проблем, добро пожаловать! 🙂 Приятно слышать, что это помогло!

С наилучшими пожеланиями,
Тобиас

стр.С .: Если у вас нет, пожалуйста, оцените TablePress здесь, в каталоге плагинов. Спасибо!

Привет, Тобиас, не могли бы вы удалить мою ссылку, указанную выше? После того, как я поделился своей ссылкой, моя веб-страница была взломана комментариями «Взлом игровых автоматов на Android». Спасибо.

Привет,

к сожалению, так как я не модератор на форумах, у меня нет такой возможности, извините 🙁

Однако я очень сомневаюсь, что причиной взлома было размещение URL здесь!

С уважением,
Тобиас

Hallo Tobias,
ich nutze Table Press und würde gerne wissen, ob es möglich ist in einer Zelle Text zu verlinken! Und wenn ja wie? Danke Gruß Diverebi

Привет Дивереби,

ja, einfach den «Link einfügen» -Button unter den Eingabefeldern nutzen.

Viele Grüße,
Tobias

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

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

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

Это ясно из этого совета из «Практической типографии» Баттерика:

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

Но Интернет другой. Гиперссылки — определяющая черта Интернета; и с самого начала Интернета они были подчеркнуты. Это общепринятое соглашение. Значение кристально ясное — подчеркивание означает ссылку .

Однако многие популярные веб-сайты отказались от подчеркивания: The New York Times , New York Magazine , The Washington Post , Bloomberg, Amazon, Apple, GitHub, Twitter, Википедия. Когда в 2014 году они удалили подчеркивание со своей страницы результатов поиска, ведущий дизайнер Google Джон Вили утверждал, что это сделало внешний вид более чистым. Примечательно, однако, что большинство этих сайтов сохранили небольшие отклонения от традиционного мрачного синего цвета ( # 0000EE ), который использовался браузером по умолчанию с самого начала Интернета.Хотя это дает визуальную подсказку для большинства пользователей, этого может быть недостаточно для соответствия WCAG специальным возможностям.

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

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

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

Для этого традиционно требовалось трюков с CSS .

Хаки, которые у нас были

Это одна уловка, с которой все разработчики знакомы: , граница снизу, . Эмулируя подчеркивание с помощью border-bottom , мы получаем контроль над цветом и толщиной. У этих псевдо-подчеркивания есть одна проблема: слишком большое расстояние от текста. Они находятся под нижними элементами букв. Вы можете решить эту проблему, используя line-height , но это имеет свои проблемы.Похожая техника использует box-shadow . Марчин Вихари был пионером в самой сложной технике, используя background-image для имитации подчеркивания. Это были полезные приемы, но, к счастью, в них больше нет необходимости.

Стиль

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

• text-underline-offset управляет положением подчеркивания.
• text-decoration-Thickness управляет толщиной подчеркивания, а также надстрочных и сквозных линий.

Согласно блогу WebKit:

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

UX агентство Clearleft смело использует (псевдо) подчеркивание, привлекая внимание к ссылкам с красочным стилем. Вот один пример искусственного подчеркивания:

  a {
  текстовое оформление: нет;
  нижняя граница: # EA215A 0,125em сплошная;
}  

Обратите внимание, что это фальшивое подчеркивание явно находится под нижним нижним элементом буквы «y»:

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

  a {
  цвет оформления текста: # EA215A;
  толщина-украшения-текста:.125em;
  смещение подчеркивания текста: 1.5px;
}  

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

Эти свойства уже добавлены в Safari и появятся в Firefox 70.

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

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

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

hyperref — \ href без украшения (без подчеркивания) — TeX

Сеть обмена стеков

Сеть Stack Exchange состоит из 176 сообществ вопросов и ответов, включая Stack Overflow, крупнейшее и пользующееся наибольшим доверием онлайн-сообщество, где разработчики могут учиться, делиться своими знаниями и строить свою карьеру.

2. 0
3. +0
6. Авторизоваться Подписаться

TeX — LaTeX Stack Exchange — это сайт вопросов и ответов для пользователей TeX, LaTeX, ConTeXt и родственных систем набора.Регистрация займет всего минуту.

Кто угодно может задать вопрос

Кто угодно может ответить

Лучшие ответы голосуются и поднимаются наверх

Спросил 8 лет, 10 мес назад

Просмотрено 3к раз

Используйте \ hypersetup {pdfborder = 0 0 0} , чтобы отключить окно:

  \ documentclass {article}
\ usepackage {hyperref}

\ hypersetup {pdfborder = 0 0 0}

\ begin {document}
\ href {http: // www.google.com} {Google}
\ конец {документ}
  

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

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

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

 
a {
  текстовое оформление: нет;
  нижняя граница: 3px solid # b4e7f8;
}
  

 
a {
  текстовое оформление: нет;
  box-shadow: вставка 0 -3px 0 -1px # ffd204;
}