Штирлиц — Сеть печатных салонов в Перми

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

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

html — Как убрать подчеркивание?

Вопрос задан

Изменён 5 лет 3 месяца назад

Просмотрен 850 раз

Добрый день! Я дико извиняюсь за следующий глупый вопрос, но факт остается фактом, впервые за много лет работы со стилем к моему большому стыду не могу справиться вот с чем: как у span убрать подчеркивание, в том числе и при наведении как на картинку, так и на сам span? При чем у a подчеркивание есть и должно быть, т.е. на странице ссылки при наведении подчеркиваются, и при этом мне нужно исключить подчеркивание именно у <span>. Каким только способом не пытался, хоть тресни — подчеркивает. Никогда бы не подумал, что приду сюда с таким вопросом.

Подскажите, пожалуйста.

span.help,
a span.help,
a:hover span.help {
	text-decoration: none;
}
<p>
<a href="#"><img src="kartinka.jpg">
<span>Мемориальный комплекс</span>
</a>
</p>
  • html
  • css

Это происходит, потому что подчеркивание применяется именно к a, а не span, и манипулируя стилями span, вы не сможете повлиять на стили a. Поэтому единственный выход — ввести новый класс, например, help-a:

a {
  text-decoration: none
}

a:hover {
  text-decoration: underline;
}

a.help-a:hover {
  text-decoration: none;
}
<p>
  <a href="#"><img src="kartinka.jpg">
    <span>Мемориальный комплекс</span>
  </a>
</p>

1

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

html — Почему я не могу убрать подчеркивание текста?

Вопрос задан

Изменён 2 года 3 месяца назад

Просмотрен 309 раз

У меня прописано свойство text-decoration: underline; для всех элементов, которые находятся в div. Но прописав text-decoration: none; для одной из надписей, я все равно не могу избавиться от подчеркивания. В чем тут дело?

.one {
  display: block;
  text-align: right;
  font-size: 30px;
  text-decoration: none;
}
div {
  width: 50%;
  height: 500px;
  background: yellow;
  text-align: center;
  font-size: 50px;
  color: purple;
  text-decoration: underline;
}
<div>
  <span>Hello, world!</span>
  <br>
  <span>Hello!</span>  
</div>
  • html
  • css

2

Как указано в MDN

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

перевод ответа @xpy

В спецификации указано, что при применении данного свойства к элементу, оно будет распространено на все внутренние in flow элементы (то есть на элементы, у которых не указан float, либо абсолютное позиционирование).

Так же есть уточнение

декорация текста не распространяется на любые вложенные out of flow элементы, ни на вложенные атомарные inline-level элементы, такие как

inline-block и inline-table.

.one {
  display: inline-block;
  text-align: right;
  font-size: 30px;
  text-decoration: none;
}
div {
  width: 50%;
  background: yellow;
  text-align: center;
  font-size: 50px;
  color: purple;
  text-decoration: underline;
  padding: 10px;
}
<div>
  <span>Hello, world!</span>
  <br>
  <span>Hello!</span>
</div>

2

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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

PowerPoint для Microsoft 365 PowerPoint 2021 PowerPoint 2019 PowerPoint 2016 PowerPoint 2013 PowerPoint 2010 PowerPoint 2007 Дополнительно.

.. Меньше

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

  1. Щелкните правой кнопкой мыши текст гиперссылки и выберите Удалить гиперссылку.

  2. На вкладке Вставка в группе Иллюстрации щелкните Фигуры , а затем в разделе Прямоугольники щелкните Прямоугольник .

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

  4. Щелкните прямоугольник правой кнопкой мыши и выберите Формат фигуры .

  5. В области Format Shape выполните следующие действия:

    1. В разделе Заполнить щелкните Без заполнения .

    2. В разделе Строка щелкните Нет строки .

  6. org/ListItem»>

    Щелкните прямоугольник (но не текст внутри фигуры), а затем на вкладке Вставка в группе Ссылки щелкните Гиперссылка .

  7. В поле Address введите веб-адрес и нажмите OK.

  8. Чтобы проверить гиперссылку, в нижней части окна слайда щелкните Слайд-шоу вид.

  9. Щелкните текст (прямоугольник), содержащий гиперссылку.

  1. org/ListItem»>

    Щелкните правой кнопкой мыши текст гиперссылки и выберите Удалить гиперссылку.

  2. На вкладке Вставка в группе Иллюстрации

    щелкните Фигуры , а затем в разделе Прямоугольники щелкните Прямоугольник .

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

  4. Щелкните прямоугольник правой кнопкой мыши и выберите Формат фигуры . В диалоговом окне Format Shape выполните следующие действия:

      org/ItemList»>

    1. Щелкните Заполните на левой панели, щелкните Цвет на правой панели, а затем щелкните цвет, соответствующий фону вашей презентации.

    2. Щелкните Цвет линии на левой панели, щелкните Нет линии на правой панели, а затем щелкните Закрыть .

  5. Щелкните прямоугольник правой кнопкой мыши, выберите Изменить текст , а затем введите текст, который вы хотите использовать для гиперссылки.

    Примечание.  Если вы не видите текст во время ввода, выделите текст. Если вы хотите изменить цвет или форматирование текста, выделите текст, а затем на вкладке Home в группе Font щелкните кнопку Dialog Box Launcher .

  6. Щелкните фигуру (но не текст внутри фигуры), а затем Вкладка Вставка , в группе Ссылки нажмите Гиперссылка .

  7. В поле Address введите веб-адрес и нажмите OK.

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

Мы рекомендуем вам предложить другие новые и расширенные функции, нажав Справка > Обратная связь > У меня есть предложение .

Изменить цвет текста гиперссылки

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

Squarespace CSSSquarespace 7.1

Написано Ребеккой Грейс

** ОБНОВЛЕНО в сентябре 2022 г. **

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

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

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

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

Обычно нет причин удалять подчеркивание ссылок на всем веб-сайте Squarespace, если только вы не предпочитаете внешний вид. Но если вы стремитесь к такой эстетике, добавить CSS на свой веб-сайт очень просто. Перейдите в меню «Дизайн» на панели инструментов веб-сайта Squarespace и выберите параметр «Пользовательский CSS». Затем скопируйте и вставьте приведенный ниже код в блок CSS.

 а {
украшение текста: нет !важно;
}

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

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

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

Для этого тоже есть фрагмент кода!

Просто введите слово «нижний колонтитул» в начале приведенного выше фрагмента CSS или скопируйте и вставьте приведенный ниже код.

 нижний колонтитул {
украшение текста: нет !важно;
}

Ссылки в вашей шапке это совсем другая история.

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

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

 заголовок {
фоновое изображение: нет !важно;
}

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

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

Для этого вам понадобится расширение Squarespace ID Finder Chrome, которое позволит вам найти ID коллекции для каждой из страниц вашего сайта. Получив идентификатор коллекции для страницы, с которой вы хотите удалить подчеркивание, вставьте идентификатор в приведенный ниже фрагмент кода и добавьте CSS на свой веб-сайт Squarespace.

 #ИД КОЛЛЕКЦИИ a {
украшение текста: нет !важно;
}

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

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

 #COLLECTIONID #page .page-section:nth-of-type(1) a {
  украшение текста: нет !важно;
}

Вы можете еще больше отточить настройки, удалив подчеркивание ссылок в определенных блоках внутри разделов. Еще раз используйте расширение Squarespace ID Finder для просмотра идентификатора блока. Затем вы можете добавить его в CSS ниже.

 #БЛОКИД {
  украшение текста: нет !важно;
}

Удалить подчеркивание «Подробнее»

К настоящему времени вы, вероятно, задаетесь вопросом: «Сколько фрагментов кода мне нужно???» Не бойтесь, мы на последнем! Этот последний фрагмент кода предназначен для того, чтобы вы могли избавиться от надоедливого подчеркивания ссылки «Подробнее» под каждым сообщением в блоге.

Оставить комментарий

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

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