Как убрать подчеркивание ссылок в названия материала? — Вопрос от DEN4IK
- Вопросы
- Горячие
- Пользователи
- Вход/Регистрация
>
Категории вопросов
Задать вопрос +
Основное
- Вопросы новичков (16476)
- Платные услуги (2118)
- Вопросы по uKit (81)
Контент-модули
- Интернет-магазин (1432)
- Редактор страниц (236)
- Новости сайта (498)
- Каталоги (805)
- Блог (дневник) (111)
- Объявления (295)
- Фотоальбомы (433)
- Видео (255)
- Тесты (60)
- Форум (576)
Продвижение сайта
- Монетизация сайта (219)
- Раскрутка сайта (2451)
Управление сайтом
- Работа с аккаунтом (5312)
- Поиск по сайту (426)
- Меню сайта (1765)
- Дизайн сайта (13464)
- Безопасность сайта (1475)
- Доп.
функции (1307)
функции (1307)Доп. модули
- SEO-модуль (225)
- Опросы (63)
- Гостевая книга (99)
- Пользователи (431)
- Статистика сайта (197)
- Соц. постинг (212)
- Мини-чат (91)
постинг (212)Вебмастеру
- JavaScript и пр. (644)
- PHP и API на uCoz (235)
- SMS сервисы (10)
- Вопросы по Narod.
- Софт для вебмастера (39)
…
Состояния ссылок на CSS | Трепачёв Дмитрий
Я думаю, что вы, посещая различные сайты в интернете, обращали внимание на то, что ссылки обычно реагируют на наведение мышкой на них. Такого эффекта можно добиться, задавая поведение ссылок в различных состояниях.
К примеру, вот так — 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.
Сделайте все ссылки в состоянии :hover красными и неподчеркнутыми, в состоянии :link — голубыми, в состоянии :visited —
зелеными, в состоянии :active — черными.
Состояния link и visited
Часто состояния :link и :visited объединяют вместе через запятую:
a:link, a:visited {
color: red;
}
a:hover {
text-decoration: none;
}
a:active {
color: blue;
}<a href="#">ссылка</a>
:
В таком случае можно их вообще и не указывать:
a {
color: red;
}
a:hover {
text-decoration: none;
}
a:active {
color: blue;
}<a href="#">ссылка</a>
:
Обычное использование
Как правило, указываются состояния для всех типов ссылок одновременно, а потом ниже добавляются особенности поведения ссылки при наведении мышкой, вот так:
a {
color: red;
}
a:hover {
text-decoration: none;
}<a href="#">ссылка</a>
:
Сделайте все ссылки во всех состояниях голубыми
и неподчеркнутыми, а в состоянии :hover — красными и подчеркнутыми.
CSS как убрать подчеркивание из ссылки
CSS
a {
text-decoration: none;
}
При стилизации веб-сайта вы можете удалить подчеркивание по умолчанию из ссылки, как я сделал со ссылками на панели навигации.
К счастью, CSS предлагает множество способов удаления подчеркивания из ссылки. В этом посте вы узнаете, как убрать подчеркивание ссылок с помощью CSS.
Во-первых, при удалении подчеркивания ссылки в CSS необходимо понимать, в каком состоянии она находится. Различные состояния ссылки называются псевдоклассами, не путать с псевдоэлементами и в каком состоянии находится ссылка. зависит от активности пользователей.
Четыре разных псевдокласса.
-
a:visited— пользователь посетил ссылку и она сохраняется в истории браузера -
a:active— сразу после того, как пользователь нажмет на ссылку -
a:hover— пользователь наводит указатель мыши на ссылку -
a:link— состояние ссылки по умолчанию, означающее, что пользователь еще не посещал, не наводил курсор или не нажимал на ссылку.
Из-за того, что изначально ссылки подчеркивались, чтобы помочь пользователю определить, что они могут щелкнуть ссылку, ссылки по умолчанию имеют подчеркивание для каждого из вышеуказанных псевдосостояний.
Чтобы удалить подчеркивание из ваших ссылок, вы можете использовать свойство CSS text-decoration .
Это свойство имеет четыре значения: подчеркивание, надчеркивание, сквозная строка , но нам нужно значение нет .
Вот несколько способов убрать подчеркивание ссылки с помощью свойства CSS.
CSS
/* удалить подчеркивание из всех состояний ссылок */
a {
text-decoration: none;
}
/* удалить подчеркивание отдельных состояний ссылок */
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
В приведенных выше примерах мы заставляем CSS удалять подчеркивание ссылки, добавляя text-decoration: none ко всем состояниям ссылки.
Важно отметить, что порядок псевдоклассов имеет значение, a:link и a:visited должны стоять перед a:hover и hover должен предшествовать a:active . Если подумать, это здравый смысл. Ссылка находится в состоянии по умолчанию, прежде чем вы сможете ее посетить, и она будет наведена до того, как пользователь щелкнет по ней, и, наконец, она установит состояние в активное. Вы можете запомнить состояния с помощью удобной аббревиатуры LVHA (ссылка, посещено, наведено, активно).
Давайте рассмотрим несколько примеров, чтобы увидеть, как мы можем удалить подчеркивание в некоторых состояниях, но сохранить его для других.
Существует еще один мощный селектор псевдокласса CSS, который может управлять состоянием наших ссылок, и это :любая ссылка селектор псевдокласса.
:any-link соответствует всем элементам, которые соответствуют :link или :visited , поэтому мы можем легко удалить подчеркивание для любого элемента ссылки, имеющего атрибут href .
CSS
:любая ссылка {
украшение текста: нет;
}
Питер Линч
Выпускник веб-разработчика и учебного лагеря, который хочет узнать как можно больше, проверьте меня в Твиттере.
Как удалить синее подчеркивание из ссылки в CSS
html3 месяца назад
от Anees Asghar
Ссылки в HTML — это гиперссылки, по которым можно перейти на другой сайт. В веб-дизайне ссылки — это соединения между двумя веб-ресурсами, например изображениями, видео, pdf-файлами и веб-страницами.
В HTML ссылка создается с помощью тега . Внутри тега вы можете указать URL-адрес и текст ссылки. При добавлении ссылки под ней появляется подчеркивание; однако для его удаления можно использовать свойство text-decoration.
В этом посте будут рассмотрены некоторые примеры для объяснения перечисленных ниже аспектов:
- свойство text-decoration в CSS
- Как убрать подчеркивание из ссылки?
Итак, начнем!
Свойство text-decoration в CSS Чтобы применить к тексту любой тип оформления, используется свойство text-decoration.
Например, свойство text-decoration помогает нам изменить цвет текста, стиль и декоративную линию.
Синтаксис
Во-первых, мы поймем синтаксис свойства text-decoration:
text-decoration: line | цвет | стиль;
text-decoration — это сокращенное свойство для следующих свойств CSS:
- text-decoration-line: Используется для добавления строки в текст.
- text-decoration-color: Используется для применения цвета к строке текста.
- text-decoration-thickness: Указывает толщину оформления линии.
- text-decoration-style: Это свойство устанавливает стиль линии.
С помощью свойства text-decoration мы удалим подчеркивание ссылки в следующем примере.
Как убрать подчеркивание в ссылке? В HTML, когда мы добавляем ссылку, появляется строка под текстом ссылки, которую можно удалить с помощью свойства text-decoration.
Вы можете видеть, что появляется строка под Facebook, которая означает, что к нему прикреплена гиперссылка:
Теперь перейдем к CSS и удалим синее подчеркивание.
Здесь « a » относится к ссылке, которую мы указали в разделе HTML. Мы установим атрибут свойства text-decoration как « none ».
a{
украшение текста:нет;
}
Вывод показывает, что синее подчеркивание было удалено после присвоения атрибута « none » свойству text-decoration:
Мы предложили метод, связанный с удалением синего подчеркивания из ссылки в CSS .