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

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

Css оформление ссылок: Псевдоклассы в CSS. Оформление ссылок

Псевдоклассы в CSS. Оформление ссылок

В CSS псевдоклассы используются для изменения свойств элементов, когда они находятся в определенном состоянии. Например, если на картинку навести курсор мыши, то у нее появляется состояние hover. В таблице стилей может быть правило изменения каких-либо свойств элемента img в этом состоянии (размеров, затенения, рамок).

Селектор превдокласса элемента имеет следующий синтаксис:

тег:превдокласс { 
  … 
}

То есть псевдоклассам предшествует двоеточие.

Если псевдокласс описывается для класса, выглядеть это может так:

тег.класс:превдокласс {
  …
}

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

Так для ссылок (гиперссылок) выделяют четыре состояния:

  • link     – непосещенная ссылка (в истории браузера не хранится ее адрес),
  • visited – посещенная ссылка (в истории есть адрес),
  • hover – курсор мыши находится над ссылкой,
  • active – ссылка в момент, когда на нее наведен курсор мыши, и зажата левая кнопка мыши.

По умолчанию во всех четырех состояниях ссылки имеют подчеркивание. Непосещенная ссылка окрашена в синий цвет, посещенная – в фиолетовый. При наведении на ссылку курсора, он меняется со стрелки на иконку руки. Ссылка в момент «активации» приобретает красный цвет.

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

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

a {
  margin: 10px;
  text-decoration: none;
  color: Green;
}
a:hover, a:active {
  border-bottom: dashed 1px Green;
}

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

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

Для главного меню сайта ссылки часто стилизуют под кнопки:

a:link, a:visited {
  background: Green;
  color: White;
  text-decoration: none;
  padding: 15px 20px;
  text-align: center;
  display: inline-block;
  width: 200px;
}
a:hover, a:active {
  background-color: OliveDrab;
}

На одной веб-странице ссылки могут быть не только в меню, также встречаться в теле статьи и другом контенте. Как сделать так, чтобы часть ссылок на странице была оформлена в одном стиле, а другая часть в другом?

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

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

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

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

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

В примере на скрине выше ссылки меню заключены в контейнер <nav></nav>. Nav относится к семантическим элементам HTML и предназначен для основного меню сайта, навигации по сайту. В то же время для ссылок в статье в качестве предка мы можем выделить контейнер <main></main>.

CSS-код ниже дает такое же оформление ссылок, как на скрине выше:

a {
  text-decoration: none;
}
main a {
  color: DarkGreen;
}
main a:hover {
  border-bottom: dashed 1px Green;
}
nav a {
  background: Green;
  color: White;
  padding: 15px 20px;
  text-align: center;
  display: inline-block;
  width: 200px;
}
nav a:hover {
  background-color: OliveDrab;
}

Здесь четыре селектора потомка. В частности, селектор main a применяет свойства своего правила ко всем ссылкам, которые находятся в контейнере main. Таким образом, мы можем разделить стилизацию ссылок в зависимости от их обрамляющего html-элемента. При этом общее свойство было вынесено в селектор a. Его значение применяется для всех ссылок до их стилизации в зависимости от предка.

В отличие от примера, в котором использовался селектор класса, при использовании селектора потомка в коде HTML нет необходимости писать атрибут class в ссылках навигации, что делает код чище:

<nav>
  <a href="python">Программирование</a>
  <a href="web">Web-Дизайн</a>
  <a href="blender">3D-моделирование</a>
</nav>

Заметим, что селектор потомка может комбинировать классы и иные типы селекторов:

. имя_класса вложенный_элемент { 
  … 
}
внешний_элемент .имя_класса { 
  … 
}

Как изменить цвет ссылки в CSS?

В этой статье мы расскажем, как стилизовать ссылки с помощью свойств CSS (например. изменить цвет ссылки в CSS) Оформление ссылок зависит от состояния, в которых они находятся:

  • Не посещенная ссылка: состояние ссылки по умолчанию. Оно определяется с помощью псевдокласса :link.
  • Посещенная ссылка: стилизуется с помощью псевдокласса :visited.
  • Активная: ссылка, которая активируется нажатием. Задается с помощью псевдокласса: active.
  • Ссылка, на которую пользователь навел курсор: стилизуется псевдоклассом :hover.
  • Выделенная фокусом ввода: стилизуется с использованием псевдокласса :focus.

Пример оформления простой ссылки

<!DOCTYPE html> 
<html> 
<head> 
<title>CSS links</title> 
<style> 
p { 
   font-size: 30px; 
   text-align: center; 
   }          
</style> 
</head> 
<body> 
<p><a href="https://www. herbalife.com">Example for a simple link</a></p> 
</body>     
</html>

По умолчанию не посещенные ссылки оформляются синим цветом, посещенные – фиолетовым, выделенные фокусом ввода – контуром, а активные – красным цветом.

Эти стили можно изменить, используя следующие свойства CSS. Пример использования свойства text-decoration:

<!DOCTYPE html>
<html>
<head>
<style>
p { 
   font-size: 30px; 
   text-align: center; 
   }          
 
a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a:active {
  text-decoration: underline;
}
</style>
</head>
<body>
<p><b><a href="default.asp" target="_blank">Here is a link</a></b></p>
</body>
</html>

Пример, в котором для оформления ссылки используется свойство background-color

<!DOCTYPE html>
<html>
<head>
<style>
p { 
   font-size: 30px; 
   text-align: center; 
   }          
a:link {
  background-color: coral;
}
a:visited {
  background-color: cyan;
}
a:hover {
  background-color: DarkMagenta;
}
a:active {
  background-color: DarkSalmon ;
} 
</style>
</head>
<body>
<p><b><a href="default.
 
 asp" target="_blank">This is a link</a></b></p>
</body>
</html>

Для оформления ссылки как кнопки потребуются следующие свойства: color, text-decoration, text-align, background color display, padding и другие.

Вот пример:

<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
    background-color: DarkSalmon ;
    border: none;
    color: #FFFFFF;
    padding: 25px 52px;
    text-align: center;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    text-decoration: none;
    font-size: 20px;
    text-align: center; 
    cursor: pointer;
    display: inline-block;
}
a:hover, a:active {
    background-color: DarkRed ;
}
</style>
</head>
<body>
<body>
    <a href="http://www.tennis.com" target="_blank">BUTTON</a>
</body>
</body>
</html>

Свойства, указанные в псевдоклассе :hover, могут применяться и к другим элемента, а не только к ссылкам.

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

<!DOCTYPE html>
<html>
<head>
<style>
body,html {
  margin: 0;
  font-family: sans-serif, arial, helvetica;
}
ul {
  padding: 0;
  width: 100%;
}
li {
  display: inline;
}
a {
  outline: none;
  text-decoration: none;
  display: inline-block;
  width: 19.5%;
  margin-right: 0.625%;
  text-align: center;
  line-height: 3;
  color: white;
}
li:last-child a {
  margin-right: 0;
}
a:link, a:visited, a:focus {
  background: DarkSalmon ;
}
a:hover {     
  background: DarkRed ;
}
a:active {
  background: red;
  color: white;
}
</style>
</head>
<body>
<ul>
  <li><a href="#">Tournaments</a></li><li><a href="#">Scores</a></li><li><a href="#">
News</a>
</li>
<li><a href="#">Videos</a></li><li><a href="#">PLAYERS & RANKINGS</a></li>
</ul>
</body>
</html>

Давайте рассмотрим, что именно происходит в примере, приведенном выше. Для элемента <ul> мы устанавливаем нулевой отступ, устанавливая и ширину 100% внешнего контейнера, (в нашем случае <body>).

Элементы <li> будут располагаться отдельной строке. Таким образом, мы создадим горизонтальный список ссылок.

Самым сложным является правило номер четыре, которое стилизует элемент <a>. Мы начали с отключения стиля текста, используемого по умолчанию. Затем мы установили display: inline для элементов списка. Для ссылок мы задаем display: inline-block, чтобы иметь возможность их масштабировать.

Элементы <a> являются строчными по умолчанию. Но нам нужно изменить их размер. Свойство inline-block позволяет сделать это.

Для определения размеров заполним всю ширину элемента <ul>, оставляя небольшое пространство между каждой кнопкой. После этого устанавливаем ширину и расстояние между каждой кнопкой. Затем задаем line-height: 3, чтобы придать кнопкам определенную высоту. В конце мы устанавливаем белый цвет для текста.

Надеюсь, эта статья предоставила вам всю необходимую информацию о ссылках и их стилизации.

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

Вадим Дворниковавтор-переводчик статьи «Styling CSS Links»

Использование ссылок CSS с реальными примерами

TL;DR — свойства могут добавлять цвета ссылок CSS в соответствии с состояниями ссылок.

Содержание
  • 1. Цвет ссылки CSS: основные советы
  • 2. Состояния ссылки
  • 3. Цвет ссылки CSS
  • 4. Оформление текста
  • 5. Цвет фона
  • Меню 9007 6. Кнопки навигации
  • 7. Цвет ссылки CSS: Сводка

Цвет ссылки CSS: Основные советы

  • Есть 4 ссылка состояния: a:active , a:hover , a:посетили и a:ссылка .
  • Чтобы избежать перекрытия поведения, эти состояния должны идти в следующем порядке:
    • a:hover должен идти после a:link и a:visited .
    • a:active должен идти после a:hover .
  • Для оформления ссылки можно применить множество свойств стиля CSS (например, фон CSS, цвет CSS, семейство шрифтов CSS, оформление текста CSS и т. д.).

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

Вот состояний , для которых вы можете изменить цвет ссылки с помощью CSS:

  • a:link – unvisited.
  • a:hover – при наведении на него указателя мыши.
  • а:активный — когда пользователь переходит по ссылке.
  • a:visited – посещенная ссылка.

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

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

Чтобы изменить цвет ссылки, значение CSS должно быть присвоено свойству стиля цвета. Существует несколько способов описания цветов. Вы можете использовать названия цветов, индикаторы RGB ( rgb() ) или индикаторы HEX ( #ffffff ).

В следующем примере ссылке CSS назначается цвет :

Я ссылка

Пример 

 a {
    цвет: зеленый;
}

Попробуйте вживую Узнайте на Udacity

Не упустите шанс опробовать нашу новую цветовую шкалу Pickeristic для настройки цветов ссылок CSS.

Совет: Pickeristic предоставляет вам RGB , HSLA индикаторы и другие коды цветов. Вы можете создать наборов цветов для своего проекта, генерировать цветов случайным образом и даже смешивать их.

Pros

  • Упрощенный дизайн (нет ненужной информации)
  • Высококачественные блюда (даже бесплатные)
  • Разнообразие

Основные функции

  • 9007 NanodeDGRISGRES.
  • Оплаченные сертификаты о завершении

    • Эксклюзив: 75% скидка

    Pros

    • Легко в навигации
    • Нет технических проблем
    • , по -видимому, не заботятся о своих пользователях

    Main Persus

  • Main Persus

  • . курсов

  • 30-дневная политика возврата средств
  • Бесплатные сертификаты об окончании

    • ОТ 12,99$

    Pros

    • Отличный пользовательский опыт
    • предлагает качественный контент
    • Очень прозрачный с их ценами

    Основные функции

    • Бесплатные сертификаты о завершении
    • Фокусированные на науке о данных
    • Гибкий обучение.

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

      Имеет четыре возможных значения: подчеркнутый, надчеркнутый, зачеркнутый, и нет.

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

      Пример 

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

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

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

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

      Попробуйте в прямом эфире Учитесь на Udacity

      Цвет фона

      Помимо настройки цвета ссылки в CSS, можно добавить свойство background-color.

      Я ссылка

      Пример 

       a:link {
    цвет фона: зеленый;
}

а: посетил {
    цвет фона: синий;
}

а: наведите {
    цвет фона: красный;
}

а: активный {
    цвет фона: розовый;
}

      Попробуйте Live Learn на Udacity

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

      Совет: обычно устанавливается цвет фона в состоянии наведения .

      Управление цветом ссылки с помощью CSS — это еще не все. Разработчики обычно используют ссылки в стиле как кнопок (например, для навигационного меню веб-сайтов).


       
      Вот свойства CSS , необходимые для стилизации кнопок или вкладок, ведущих к другим частям веб-сайта:

      • цвет — для установки цвета текста, представляющего ссылку
      • background-color — для добавления цветов к кнопке
      • padding – для определения размера кнопки
      • text-decoration — убрать подчеркивание у ссылок
      • text-align — установить выравнивание ссылок
      • display — для описания того, как должна отображаться ваша ссылка

      В этом примере мы объединяем эти свойства CSS для отображения ссылок в виде кнопок :

      Пример 

       a:link, a:visited {
    цвет фона: фиолетовый;
    граница: нет;
    цвет: #FFFFFF;
    отступ: 15px 32px;
    выравнивание текста: по центру;
    -webkit-transition-duration: 0,4 с;
    продолжительность перехода: 0,4 с;
    текстовое оформление: нет;
   размер шрифта: 16px;
   курсор: указатель;
   отображение: встроенный блок;
}

а: наведение, а: активный {
   цвет фона: #6D0062;
}

      Попробуйте вживую. Учитесь на Udacity

      Кроме того, вы можете использовать семейство шрифтов, размер шрифта, толщину шрифта и другие параметры, соответствующие вашему веб-дизайну.

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

      Как изменить цвет ссылки в CSS

      следующий → ← предыдущая

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

      Используя CSS, мы можем стилизовать ссылки по-разному. Мы можем установить следующие состояния гиперссылки:

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

      Следует отметить, что в определении CSS a:hover должен идти после a:link и a:visited , а также a:active должен идти после a:hover , чтобы быть эффективным.

      Порядок объявления состояний гиперссылки приведен ниже:

      <тип стиля = "текст/css"> a: ссылка {цвет: голубой;} а: посетил {color: #060235} а: наведите {цвет: #FCFC0C} a:активный {цвет: #C0F0FC}

      Чтобы изменить цвет ссылки, мы должны использовать цвет свойство CSS. Имя цвета может быть указано в любом допустимом формате, таком как имя цвета, значение rgb() или значение HEX.

      Теперь давайте посмотрим, как установить цвет ссылок на нескольких примерах.

      Пример

      По умолчанию нормальные или непросмотренные ссылки имеют синий цвет. В этом примере мы меняем цвет ссылки по умолчанию, используя свойство color .

      <голова> <тип стиля = "текст/css"> а { коричневый цвет; } <тело>

      Добро пожаловать на

      javaTpoint.com

      Протестируйте сейчас

      Выход

      Пример

      В этом примере мы применяем к ссылкам некоторые свойства CSS, такие как font-family, text-decoration и background-color . По умолчанию созданная ссылка подчеркнута, поэтому, чтобы убрать подчеркивание, мы можем использовать свойство text-decoration и установить его значение равным none .

      <голова> <тип стиля = "текст/css"> а { текстовое оформление: нет; коричневый цвет; цвет фона: розовый; семейство шрифтов: Arial; } п{ размер шрифта: 20px; } <тело>

      Добро пожаловать на

      javaTpoint.com

      Текст javaTpoint.com в приведенной выше строке является гиперссылкой.

      Протестируйте сейчас

      Выход

      Пример

      Теперь есть еще один пример, в котором мы изменим цвет активных и посещенных ссылок, а также изменим цвет ссылки при наведении. По умолчанию посещенные ссылки окрашены в фиолетовый цвет, а активные — в красный, поэтому мы изменим их цвета с помощью свойства color и псевдоклассов :visited, :active и :hover .

      <голова> <тип стиля = "текст/css"> а: посетил { цвет: светло-зеленый; } а: наведите { цвет синий; } а: активный { красный цвет; } п{ размер шрифта: 20px; } <тело>

      Добро пожаловать на

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

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

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

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

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

      Карта сайта