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

Основы работы со ссылками и границами через 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;
}

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

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

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

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

← Предыдущая страница Следующая страница →

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

11-06-2018 13:25

Содержание статьи:

• Зачем подчеркивают ссылки
• Выделение ссылок
• Изменение стиля гиперссылки
• Поддержка браузерами

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

Зачем подчеркивают ссылки?

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

Вам будет интересно:Неисправимые ошибки секторов жестких дисков

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

Вот так выглядели первые интернет-сайты:

Гиперссылки сразу выделяются на фоне окружающего текста.

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

Выделение ссылок

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

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

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

Изменение стиля гиперссылки

Убрать подчеркивание ссылки на CSS очень просто. Для этого существует специальная инструкция text-decoration. Она заведует оформлением фрагмента текста с помощью горизонтальной линии и определяет ее конкретное расположение.

Список значений, которые может принимать это свойство:

• underline – нижнее подчеркивание;
• overline – верхнее подчеркивание, линия проходит над текстом;
• line-through – зачеркивание, линия проходит посередине строки;
• none – отсутствие оформления.

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

Чтобы убрать подчеркивание ссылки на CSS, следует применить к ней следующее правило:

a { text-decoration: none; }

Поддержка браузерами

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

Источник

Автор: Зинаида Потапова 11-06-2018 13:25

Похожие статьи

«Система «Виндовс» защитила ваш компьютер»: как отключить появление этого сообщения? Простейшие методы

Ошибка статуса VPN в «Хамачи»: способы быстрого решения проблемы

Как сделать рассылку в «Вайбере»: подробная инструкция и способы

Как сделать бизнес-аккаунт в «Фейсбук»: создание, настройка и раскрутка

Как восстановить переписку в «Телеграмме»: пошаговая инструкция, советы

Как получить в «ES Проводник» Root-права?

Как отключить «Протект» в «Яндекс. Браузере» на компьютере?

Как сохранять контакты в «Гугл»: простые способы, правила переноса, рекомендации и советы

Как на «Андроиде» переименовать приложение: подробная инструкция

Продукты «Гугла»: список, функции и возможности, отзывы

неподчеркнутых ссылок | потеря подчеркивания в ссылках

Путь // www.yourhtmlsource.com → Таблицы стилей → ССЫЛКИ НЕ ПОДЧЕРКНУТЫ

---

by Ross Shannon

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

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

стиль ="текстовое оформление: нет; "

Чтобы создать ссылку, подобную этой

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

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

Начиная с
Начало здесь ·
Мой первый сайт ·

Уроки
Текст ·
Изображения ·
Таблицы ·
Рэмы ·
Формы ·
StyleSheets ·

. Согласованные


.0009
Доступность ·
Продвижение ·
Оптимизация ·
Управление сайтами ·

Сценарий
JavaScript ·
CGI Scripting ·

Обзоры
.

Любите нас?  

---

Добавьте HTML-код в закладки!

Добавьте HTML-код в закладки!

---

Страниц для печати  

---

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

---

Переводы  ¤

---

Автоматический перевод на:

---

Действительный код, естественно  

---

Мы используем (и учим!) только лучшие действующие HTML и CSS для вашего удобства и безопасности.

---

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

Вы можете поддержать HTML Source, сделав небольшое пожертвование.

Спасибо нашим замечательным сторонникам!

Веселитесь? Заблудиться? Есть комментарии?
Мы хотим их!

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

Тег Anchor в HTML используется для создания гиперссылки на веб-странице, которая может привести пользователя к внешней ссылке или даже к другим документам на той же веб-странице.

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

Мы можем удалить подчеркивание тега привязки, установив для свойства text-decoration стиля значение none.

Подчеркивание гиперссылки можно удалить с помощью внутреннего CSS с помощью тега стиля со свойством text-decoration равным none.

Синтаксис:

 
 style="text-decoration:none"
 

 
 

<голова>
    <мета-кодировка="UTF-8">
    
    
    

<тело>
     
Тег привязки | HTML
 
    НАЖМИТЕ ЗДЕСЬ

  CSS 
 
 #anchor-tag{
    текстовое оформление: нет;
}
 
  HTML 
 
 

<голова>
    

<тело>
     
Тег привязки | HTML
 
    НАЖМИТЕ ЗДЕСЬ


 
  Объяснение: 
 Во внешнем CSS мы написали стиль для определенного  id  тег привязки, который используется в HTML-документе.
 Здесь мы используем селектор id, но мы можем использовать и другие селекторы, такие как селектор класса и селектор группировки.
 В HTML-документе мы создали ассоциацию внешней таблицы стилей и HTML-документа с помощью тега link.
 Впоследствии мы используем тот же идентификатор для нашего тега привязки, и именно поэтому к тегу привязки применяется соответствующий стиль.
  CSS 
 
 .anchor-tag-nounderline{
    текстовое оформление: нет;
}
 
  HTML 
 
 

<голова>
    

<тело>
     
Тег привязки | HTML
 
    НАЖМИТЕ ЗДЕСЬ


 
  Объяснение: 
 В этом примере все аналогично предыдущему; единственная разница здесь, мы используем  селектор класса  вместо селектора id.
  Универсальный селектор:  Выбирает все элементы документа и применяет соответствующие стили.
 
 

<голова>
    <стиль>
    * {
        текстовое оформление: нет;
    }
   

<тело>
     
Тег привязки | HTML
 
    НАЖМИТЕ ЗДЕСЬ


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

<голова>
    <стиль>
    а {
        текстовое оформление: нет;
    }
   

<тело>
     
Тег привязки | HTML
 
    НАЖМИТЕ ЗДЕСЬ
    
    Другая ссылка


 
  Объяснение: 
 Селектор группировки   a выберет все теги привязки документа и предоставит стили для всех из них.
 Таким образом, мы можем убрать подчеркивание со всех гиперссылок.
 Ниже перечислены три способа достижения этой цели:
  Селектор идентификаторов:  Мы можем назначить идентификатор конкретному тегу привязки, а затем связать некоторые стили с этим идентификатором в таблице стилей.
 
 #anchor-tag-nounderline{
    текстовое оформление: нет;
}
 
  Селектор класса:  Мы можем определить класс с некоторыми стилями, а затем ограничиться присвоением этого класса только одному элементу. Таким образом, мы можем стилизовать отдельную ссылку.
 
 .anchor-tag-nounderline{
    текстовое оформление: нет;
}
 
  Встроенные стили:  Это может быть лучшим подходом, поскольку встроенные стили имеют наивысший приоритет. Кроме того, с помощью встроенных стилей легко задать стили любому отдельному элементу.
 
 стиль = "украшение текста: нет"
 
 Заключение 
 Свойство text-decoration используется для удаления подчеркивания в гиперссылках.