Css a style: Стилизация ссылок — Изучение веб-разработки
Содержание
Стилизация ссылок — Изучение веб-разработки
При стилизации ссылок, важно понимать как использовать псевдоклассы, чтобы стилизировать состояния ссылок эффективно, и как стилизировать ссылки для использования в общих разнообразных функциях интерфейса: таких как например навигационное меню и вкладки. Мы рассмотрим все эти темы в этой статье.
Для изучения вам потребуется: | Основы компьютерной грамотности, базовые знания HTML (изучите Введение в HTML), основы CSS (изучите Введение в CSS), базовые знания о текстах и шрифтах CSS. |
---|---|
Вы узнаете: | Изучите как стилизуются ссылки и как использовать ссылки эффективно в общих задачах UI (пользовательских интерфейсах), например, в меню навигации. |
Мы рассматривали как реализуются ссылки в вашем HTML в соответствии с лучшими практиками в Создании гиперссылок. В этой статье мы будем опираться на эти знания, показывая вам лучшие практики по оформлению ссылок.
Состояния ссылок
Первое, что нужно понять, это концепция состояний ссылок — разные состояния в которых могут существовать ссылки, которые могут быть стилизованы используя различные псевдоклассы:
- Link (не посещённая): Состояние по умолчанию, в котором находится ссылка, когда она не находится в каком-либо другом состоянии. Она может быть специфически стилизована используя псевдокласс
:link
. - Visited: Ссылка, когда она уже была посещена (существует в истории браузера), стилизуется используя псевдокласс
:visited
. - Hover: Ссылка, когда на неё наведён курсор мыши, стилизуется используя псевдокласс
:hover
- Focus: Ссылка, когда она была сфокусирована (например когда пользователь переместился на неё используя клавишу Tab или наподобие или программно сфокусирована используя
HTMLElement.focus()
(en-US)) — стилизуется используя псевдокласс:focus
. - Active: Ссылка, когда она активируется (например при клике по ней), стилизуется используя псевдокласс
:active
Стили по умолчанию
Следующий пример показывает, как будет вести себя ссылка по умолчанию (CSS просто увеличивает и центрирует текст чтоб больше выделить его).
<p><a href="https://mozilla.org">A link to the Mozilla homepage</a></p>
p {
font-size: 2rem;
text-align: center;
}
Вы заметите несколько вещей при изучении стилей по умолчанию:
- Ссылки подчёркнуты.
- Не посещённые ссылки синие.
- Посещённые ссылки фиолетовые
- Наведение курсора мыши на ссылку меняют указатель мыши на иконку маленькой руки.
- Сфокусированные ссылки имеют контур вокруг себя — вы можете сфокусироваться на ссылках на этой странице с помощью клавиатуры, нажав клавишу табуляции (на Mac, вам может понадобиться включить опцию Full Keyboard Access: All controls нажав Ctrl + F7, прежде чем это будет работать).
- Активные ссылки красные (попробуйте удерживать кнопку мыши на ссылке, когда вы кликните по ней).
Довольно интересно, что эти стили по умолчанию приблизительно такие же какими они были в первые дни браузеров в середине 1990-ых. Это потому, что пользователи знают и привыкли ожидать такого поведения — если бы ссылки были стилизованы по-разному, это бы путало много людей. Это не значит, что вы недолжны стилизовать ссылки совсем, просто вы не должны уходить слишком далеко от ожидаемого поведения. По крайней мере вы должны:
- Использовать нижнее подчёркивание для ссылок, но не для других вещей. Если вы не хотите подчёркивать ссылки, то хотя бы выделите их каким-либо другим путём.
- Сделать так чтобы они как-нибудь реагировали на наведение/фокусировку на них и немного отличались после активации.
Стили по умолчанию могут быть выключены/изменены, используя следующие свойства CSS:
color
(en-US) для цвета текста.cursor
для стиля курсора мыши — вы не должны отключать эту опцию только если у вас нет на это веской причины.outline
(en-US) для контура текста (контур схож с границей, единственное отличие — это то, что границы занимают место в блоке, а контур — нет; он просто располагается поверх фона). Контур является полезным вспомогательным средством, так что подумайте хорошо, прежде чем отключать его; по крайней мере вы должны удвоить стили, заданные для состояния hover, а также состояния фокусировки.
Обратите внимание: вы не ограничены только перечисленными выше свойствами чтобы стилизовать ссылки — вы можете использовать любые свойства, которые вам нравятся. Просто постарайтесь не сходить с ума слишком сильно!
Стилизация некоторых ссылок
Мы уже рассмотрели состояния по умолчанию в некоторых деталях, давайте взглянем на типичный набор стилей ссылок.
Чтобы начать, мы выпишем наши пустые наборы правил:
a {
}
a:link {
}
a:visited {
}
a:focus {
}
a:hover {
}
a:active {
}
Этот порядок важен так как стили ссылок опираются друг на друга, например стили в первом правиле будут применяться ко всем последующим правилам и когда ссылка будет активирована, она также будет находиться под «наведением» (hover). Если вы введёте их в неправильном порядке, стили не будут работать правильно. Чтобы запомнить этот порядок вы можете попробовать использовать мнемонику типа LoVe Fears HAte.
А теперь давайте добавим ещё немного информации чтобы правильно оформить этот стиль:
body {
width: 300px;
margin: 0 auto;
font-size: 1.2rem;
font-family: sans-serif;
}
p {
line-height: 1.4;
}
a {
outline: none;
text-decoration: none;
padding: 2px 1px 0;
}
a:link {
color: #265301;
}
a:visited {
color: #437A16;
}
a:focus {
border-bottom: 1px solid;
background: #BAE498;
}
a:hover {
border-bottom: 1px solid;
background: #CDFEAA;
}
a:active {
background: #265301;
color: #CDFEAA;
}
Также мы дадим некий пример HTML к которому применяется CSS:
<p>There are several browsers available, such as <a href="https://www.mozilla.org/en-US/firefox/">Mozilla
Firefox</a>, <a href="https://www. google.com/chrome/index.html">Google Chrome</a>, and
<a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a>.</p>
Объединение этих двух даёт нам такой результат:
Итак, что мы сделали тут? Это определённо выглядит иначе чем стилизация по умолчанию, но все ещё даёт достаточно знакомый опыт для пользователей, чтобы знать, что происходит:
- Первые два правила не так интересны в этом обсуждении.
- Третье правило использует селектор
a
чтобы избавиться от подчёркивания текста и контура фокуса по умолчанию (которые всё равно варьируют в зависимости от браузера), а также добавляет малое количество padding к каждой ссылке — все это станет ясно позже. - Далее, мы используем селекторы
a:link
иa:visited
чтобы настроить пару цветовых вариаций не посещённых и посещённых ссылок, так чтоб они отличались. - Следующие два правила используют
a:focus
иa:hover
настраивают сфокусированные и наведённые (hovered) ссылки таким образом чтобы они имели разные фоновые цвета, плюс нижнее подчёркивание чтобы ссылка выделялась ещё больше. Два пункта на которые надо обратить внимание:- Нижнее подчёркивание создано используя
border-bottom
, а неtext-decoration
(en-US) — некоторые люди предпочитают это потому что первый имеет лучшие варианты стилизации, чем второй, и отрисован немного ниже, так что не срезает нижние элементы слов будучи подчёркнутыми (например хвосты у букв как «р» и «у»). - Значение
border-bottom
установлено на1px solid
, без определённого цвета. Это позволяет границам принимать тот же цвет что и элементы текста, что полезно в случае как этом, где текст имеет разные цвета в каждом случае.
- Нижнее подчёркивание создано используя
- Наконец,
a:active
используется чтобы дать ссылкам инвертированную цветовую схему в то время когда они активированы, чтобы было ясно что происходит что то важное!
Активное изучение: Стилизуйте ссылки самостоятельно
В этой секции активного изучения, мы бы хотели, чтобы взяли наш набор пустых правил и добавили ваши собственные объявления так чтобы ссылки выглядели действительно круто. Используйте своё воображение, не сковывайтесь. Мы уверены, что вы можете придумать что-то более крутое и все ещё так же функциональное, как и наш пример выше.
Если вы допустите ошибку, вы всегда можете сделать сброс используя кнопку Reset. Если вы действительно застряли нажмите кнопку Show solution чтобы вставить пример, который мы показали выше.
Обычной практикой является добавление иконок в ссылки, чтобы предоставить больше индикатора того, на какой контент указывает ссылка. Давайте рассмотрим очень простой пример, который добавляет иконку к внешним ссылкам (ссылки, которые ведут на другие сайты). Такая ссылка обычно выглядит как маленькая стрела торчащая из коробочки — например, мы будем использовать этот отличный образец с сайта icons8.com.
Давайте взглянем на HTML и CSS которые дадут нам эффект, который мы хотим. Во-первых, немного простого HTML который будет стилизован:
<p>For more information on the weather, visit our <a href="weather. html">weather page</a>,
look at <a href="https://en.wikipedia.org/wiki/Weather">weather on Wikipedia</a>, or check
out <a href="http://www.extremescience.com/weather.htm">weather on Extreme Science</a>.</p>
Далее, CSS:
body {
width: 300px;
margin: 0 auto;
font-family: sans-serif;
}
p {
line-height: 1.4;
}
a {
outline: none;
text-decoration: none;
padding: 2px 1px 0;
}
a:link {
color: blue;
}
a:visited {
color: purple;
}
a:focus, a:hover {
border-bottom: 1px solid;
}
a:active {
color: red;
}
a[href*="http"] {
background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0;
background-size: 16px 16px;
padding-right: 19px;
}
Итак, что же тут происходит? Мы пропустим большую часть CSS так как это та же информация, которую вы рассматривали ранее. Однако, последнее правило интересное — тут мы вставляем пользовательское фоновое изображение во внешнюю ссылку схожим способом как мы делали пользовательские маркеры для пунктов списка в последней статье — в этот раз, однако, мы используем короткую запись background
вместо индивидуальных свойств. Мы задаём путь к изображению, которое хотим вставить, устанавливаем no-repeat
чтобы мы получили только одну копию вставленного и затем устанавливаем позицию на 100% до правого края изображения и 0 пикселей от верхнего края.
Также мы используем background-size
для того чтобы указать размер в котором бы хотим чтобы было показано фоновое изображение — полезно иметь иконку большего размера и далее менять его размер так, как нужно для адаптивного (отзывчивого) веб-дизайна. Однако это работает только в IE9 и следующих версиях так что, если вам нужна поддержка тех старых браузеров вам просто придётся менять размер изображения и вставлять его как есть.
Наконец, мы задаём некоторый padding-right
для ссылки чтобы добавить пространство в котором появляется фоновое изображение, таким образом, чтобы мы не накладывали его на текст.
И последнее слово — как мы выбрали только внешние ссылки? Ну, если вы пишете свои HTML ссылки правильно, то вы должны были использовать только абсолютные URL для внешних ссылок — гораздо эффективнее использовать относительные ссылки для связи с другими частями вашего сайта. Текст «http» таким образом должен появляться только во внешних ссылках и можем выбрать его при помощи селектора атрибутов: a[href*="http"]
выбирает элементы <a>
, но только если они имеют атрибут href
со значением содержащим «http» где-то внутри него.
Ну вот и все — попробуйте посетить секцию активного изучения выше и испытайте этот новый метод!
Инструменты, которые вы исследовали в этой статье также могут быть использованы другим способом. Например, такие состояния как hover могут быть использованы для стилизации множества различных элементов, не только ссылок — вы можете захотеть стилизовать состояние hover параграфов, элементов списка или других вещей.
Дополнительно, ссылки очень часто стилизуют так, чтоб они выглядели и вели себя как кнопки при определённых обстоятельствах — навигационное меню веб-сайтов обычно размечено как список, содержащий ссылки, который легко может быть стилизован так чтоб выглядел как набор кнопок управления или вкладок которые обеспечивают пользователя доступом к другим частям сайта. Давайте изучим как.
Для начала HTML:
<ul>
<li><a href="#">Home</a></li><li><a href="#">Pizza</a></li><li><a href="#">Music</a></li><li><a href="#">Wombats</a></li><li><a href="#">Finland</a></li>
</ul>
А теперь наш CSS:
body,html {
margin: 0;
font-family: sans-serif;
}
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: black;
}
li:last-child a {
margin-right: 0;
}
a:link, a:visited, a:focus {
background: yellow;
}
a:hover {
background: orange;
}
a:active {
background: red;
color: white;
}
Что даёт нам следующий результат:
Давайте объясним, что тут происходит, фокусируясь на самых интересных частях:
- Наше второе правило удаляет заданный по умолчанию
padding
у элемента<ul>
и устанавливает его ширину так, чтобы охватить 100% внешнего контейнера (в этом случае<body>
). - Элементы
<li>
по умолчанию в норме являются блочными (см. типы блоков CSS чтобы вспомнить), что значит что они будут располагаться на своих собственных строках. В этом случае мы создаём горизонтальный список ссылок, поэтому в третьем правиле задаём свойствуdisplay
значение inline, что приводит к тому, что элементы списка располагаются в одной строке друг с другом — теперь они ведут себя как строчные элементы. - четвёртое правило — которое стилизует элемент
<a>
— самое сложное; давайте пройдёмся по нему шаг за шагом:- как в предыдущем примере, мы начинаем отключать настройки по умолчанию для
text-decoration
(en-US) иoutline
(en-US) — мы не хотим, чтоб они портили нам вид. - Далее мы устанавливаем
display
наinline-block
— элементы<a>
являются строчными по умолчанию и, поскольку мы не хотим чтобы они вываливались на свои собственные строки как если бы это получалось со значениемblock
, мы хотим иметь возможность менять их размер.inline-block
позволяет нам делать это. - Теперь только изменение размера! Мы хотим заполнить всю ширину элемента
<ul>
, оставить немного margin между каждой кнопкой (не без зазора с правого края) и мы имеем 5 кнопок, которые надо разместить и которые должны иметь одинаковый размер. Для того чтобы это сделать мы задаёмwidth
на 19.5%, аmargin-right
на 0.625%. Вы заметите что вся эта эта ширина составляет 100.625%, что может сделать так что последняя кнопка перекроет<ul>
и выпадет вниз на следующую строку. Тем не менее, мы возвращаемся к 100%, используя следующее правило, которое выбирает только последний<a>
в списке и удаляет его margin. Сделано! - Последние три объявления довольно просты и в основном просто для косметических целей. Мы центрируем текст внутри каждой ссылки, задаём
line-height
на 3 чтобы кнопки имели некую высоту (что также имеет преимущество в центрировании текста по вертикали) и задаём для текста чёрный цвет.
- как в предыдущем примере, мы начинаем отключать настройки по умолчанию для
Обратите внимание: вы могли заметить что элементы списка в HTML все находятся на одной строке друг с другом — так сделано потому, что это сделано потому, что пробелы/разрывы строк между элементами встроенного блока создают пробелы на странице, точно также как пробелы между словами и такие пробелы могли бы нарушить расположение нашего горизонтального меню навигации. Вы можете найти больше информации об этой проблеме (и решения) на Fighting the space between inline block elements.
Мы надеемся эта статья снабдила вас всем что вам надо знать о ссылках — на данный момент! Последняя статья в нашем модуле стилизации текста детализирует как использовать пользовательские шрифты на вашем веб-сайте или как они больше известны веб-шрифты.
Свойства ссылок | htmlbook.ru
Для управления видом различных ссылок в CSS используются псевдоклассы, которые
указываются после селектора A через двоеточие. В табл. 1
приведены допустимые псевдоклассы и их описания.
Свойство | Описание |
---|---|
A:link | Определяет стиль для обычной непосещенной ссылки. |
A:visited | Определяет стиль для посещенной ссылки. |
A:active | Определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее. |
A:hover | Определяет стиль для ссылки при наведении на нее мышью. |
Обычно использование псевдокласса link имеет тот
же эффект, что и применение стиля к селектору A. Поэтому
этот псевдокласс можно опустить.
Ссылки без подчеркивания
Одно из наиболее популярных применений CSS — это скрытие подчеркивания
у ссылок. С позиции юзабилити не совсем верное решение, поскольку пользователь
может сразу не догадаться, что текст, который он видит, является ссылкой. Все
ведь уже привыкли — раз подчеркивание используется, значит это ссылка.
Но при правильном применении отсутствие подчеркивания у ссылок может придать
определенный эффект сайту. Часто делается, что при наведении курсора, ссылка
становится подчеркнутой, меняет свой цвет или используется и тот и другой эффект
одновременно (пример 1).
Пример 1. Подчеркивание у ссылки и изменение ее цвета
<!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=utf-8">
<title>Ссылки</title>
<style type="text/css">
A:link {
text-decoration: none; /* Убирает подчеркивание для ссылок */
}
A:visited { text-decoration: none; }
A:active { text-decoration: none; }
A:hover {
text-decoration: underline; /* Делает ссылку подчеркнутой при наведении на нее курсора */
color: red; /* Цвет ссылки */
}
</style>
</head>
<body>
<p><a href="1.html">Пример ссылки</a></p>
</body>
</html>
Ниже приведено использование данного примера. При наведении курсора
на ссылку, она становится подчеркнутой и красной.
Подчеркнутые и надчеркнутые ссылки
Еще один пример демонстрирует использование в ссылках подчеркивания
и надчеркивания одновременно. При этом эффекте тонкие линии будут
появляться над и под ссылкой при наведении на нее курсора. Это достигается
применением свойства text-decoration: underline
overline в селекторе A:hover.
Пример 2. Использование подчеркивания в ссылках
<!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=utf-8">
<title>Ссылки</title>
<style type="text/css">
A:link { text-decoration: none; }
A:visited { text-decoration: none; }
A:active { text-decoration: none; }
A:hover {
text-decoration: underline overline; /* Ссылка подчеркнутая и надчеркнутая */
color: red; /* Цвет ссылки */
}
</style>
</head>
<body>
<p><a href="1. html">Пример ссылки</a></p>
</body>
</html>
Изменение размера ссылки
Пример 3 показывает, как изменять размер ссылки при наведении на нее курсора.
Пример 3. Изменение размера ссылки
<!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=utf-8">
<title>Ссылки</title>
<style type="text/css">
A:link { text-decoration: none; }
A:visited { text-decoration: none; }
A:active { text-decoration: none; }
A:hover {
font-size: 24px; /* Размер шрифта */
font-weight: bold; /* Жирное начертание */
color: red; /* Цвет ссылки */
}
</style>
</head>
<body>
<p><a href="1.html">Пример ссылки</a></p>
</body>
</html>
Изменение цвета подчеркивания
Со ссылками, при помощи CSS, можно сделать интересную особенность. Цвет ссылки,
при наведении на нее курсора мыши, остается неизменным, но зато у нее появляется
подчеркивание другого цвета, нежели сама ссылка (пример 4).
Пример 4. Создание подчеркивание другого цвета
<!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=utf-8">
<title>Ссылки</title>
<style type="text/css">
A:link { color: blue; text-decoration: none; }
A:hover { color: red; text-decoration: underline; }
.link { color: blue; }
</style>
</head>
<body>
<p><a href="1.html"><span>Ссылка</span></a></p>
</body>
</html>
Ссылки разных цветов
Часто возникает необходимость на одной странице использовать ссылки разных
цветов и размеров. И применять для каждой области веб-страницы ссылки подходящего
типа. Одни для меню, другие для текста. В этом случае создаем два или больше
класса со своими параметрами и применяем их по своему усмотрению. В примере
6 достаточно поменять значения у соответствующего класса, и цвета у ссылок,
где этот класс используются, изменятся автоматически.
Пример 5. Ссылки разных цветов
<!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=utf-8">
<title>Ссылки</title>
<style type="text/css">
A { font-size: 14px; color: red; }
A.link1 { font-size: 12px; color: green; }
A.link2 { font-size: 14px; color: blue; }
</style>
</head>
<body>
<p>| <a href="1.html">Ссылка 1</a> |
<a href="2.html">Ссылка 2</a> |
<a href="3.html">Ссылка 3</a> |</p>
</body>
</html>
Результат данного примера показан на рис. 1.
Рис. 1. Разные ссылки на одной странице
Атрибут media | htmlbook.ru
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
4.0+ | 1.0+ | 6.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Спецификация
HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Устанавливает устройство вывода, для которого предназначена таблица стилей.
Для каждого устройства — от карманного компьютера до принтера
можно определить свой собственный стиль, который бы учитывал специфику устройства
и подгонял под него вид веб-страницы.
Синтаксис
<style media="all|braille|handheld|print|screen|speech|projection|tty|tv">
...
</style>
Значения
- all
- Все устройства.
- braille
- Устройства, основанные на системе Брайля, предназначены для слепых людей.
- handheld
- Наладонники, смартфоны, устройства с малой шириной экрана.
- Печатающее устройство вроде принтера.
- screen
- Экран монитора.
- speech
- Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда же входят речевые браузеры.
- projection
- Проектор.
- tty
- Телетайпы, терминалы, портативные устройства с ограниченными возможностями экрана. Для них не должны использоваться пикселы в качестве единиц измерения.
- tv
- Телевизор.
Можно устанавливать сразу несколько значений,
перечисляя их через запятую.
Значение по умолчанию
screen
Пример
HTML5IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Тег STYLE, атрибут media</title>
<style media="screen">
.window {
background: #333;
border: 1px solid red;
font-size: 90%;
color: #fc0;
padding: 10px;
}
</style>
<style media="print">
.window {
border: 1px solid black;
font-family: Arial;
font-size: 90%;
font-weight: bold;
color: black;
padding: 10px
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy
nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>
</body>
</html>
Результат данного примера продемонстрирован на рис. 1, где применяется стиль с атрибутом media=»screen». На рис. 2 показана та же страница, но при этом уже действует стиль для печати, заданный атрибутом media=»print». Результат эмулирован, поскольку стиль будет действовать только при отправке веб-страницы на печать.
Рис. 1. Страница со стилем для просмотра на мониторе
Рис. 2. Страница со стилем для вывода на печать
Псевдоклассы в CSS — обзор для начинающих
Псевдоклассы в CSS используются для добавления специальных эффектов для некоторых селекторов. Чтобы применить эти эффекты, не нужно использовать JavaScript или любой другой скрипт.
Простой синтаксис псевдоклассов выглядит следующим образом:
selector:pseudo-class {property: value}
Классы CSS также могут использоваться с псевдоклассами:
selector.class:pseudo-class {property: value}
Наиболее часто используемые CSS псевдоклассы:
Значение | Описание |
:link | Класс открывавшейся ранее ссылки. |
:visited | Класс открытой ранее ссылки. |
:hover | Класс элемента, когда на него наведен курсор мыши. |
:active | Класс для активного элемента. |
:focus | Класс для элемента, который находится в фокусе. |
:first-child | Класс элемента, который является дочерним элементом другого. |
:lang | Класс, чтобы указать язык, применяемый для конкретного элемента. |
При определении псевдоклассов CSS3 в блоке <style>…</style> следует помнить:
- a:hover должен располагаться после a:link и a:visited, иначе он не будет работать;
- a:active должен располагаться после a:hover, иначе он не будет работать;
- Имена псевдоклассов не чувствительны к регистру;
- Псевдоклассы отличаются от классов CSS, но они могут быть объединены.
В следующем примере показано, как использовать псевдокласс ссылки, чтобы задать цвет ссылки. Возможные значения — цвет в любом допустимом формате:
<html> <head> <style type="text/css"> a:link {color:#000000} </style> </head> <body> <a href="">Черная ссылка</a> </body> </html>
Этот код создает следующую черную ссылку:
Ниже приведен пример того, как использовать псевдокласс HTML :visited, чтобы задать цвет открытой ранее ссылки. Возможные значения — цвет в любом допустимом формате:
<html> <head> <style type="text/css"> a:visited {color: #006600} </style> </head> <body> <a href="">Нажмите эту ссылку</a> </body> </html>
Этот код создает следующую ссылку. После того, как вы нажмете на нее, она изменит свой цвет на зеленый:
В следующем примере показано, как использовать псевдокласс hover, чтобы изменить цвет ссылки при наведении на нее курсора мыши. Возможные значения — цвет в любом допустимом формате:
<html> <head> <style type="text/css"> a:hover {color: #FFCC00} </style> </head> <body> <a href="">Наведите мышь на эту ссылку</a> </body> </html>
Этот код создает следующую ссылку. Теперь наведите курсор мыши на эту ссылку, и вы увидите, что она поменяет свой цвет на желтый:
В следующем примере показано, как использовать класс :active, чтобы изменить цвет активной ссылки. Можно использовать значение цвета в любом допустимом формате:
<html> <head> <style type="text/css"> a:active {color: #FF00CC} </style> </head> <body> <a href="">Нажмите на эту ссылку</a> </body> </html>
Этот код создает следующую ссылку. Когда пользователь нажимает на нее, цвет меняется на розовый:
В следующем примере показано, как использовать псевдокласс focus, чтобы изменить цвет ссылки, находящейся в фокусе ввода. Возможные значения — цвет в любом допустимом формате:
<html> <head> <style type="text/css"> a:focus {color: #0000FF} </style> </head> <body> <a href="">Нажмите на эту ссылку </a> </body> </html>
Этот код создает следующую ссылку. Когда эта ссылка находится в фокусе ввода, ее цвет меняется на оранжевый. Цвет возвращается обратно, когда ссылка находится вне фокуса:
Псевдокласс child задается указанному элементу, который является дочерним элементом другого.
Чтобы :first-child работал в IE <!DOCTYPE> должен объявляться в верхней части документа.
Например, для создания отступа для первого абзаца всех элементов <div>, нужно использовать следующее определение:
<html> <head> <style type="text/css"> div > p:first-child { text-indent: 25px; } </style> </head> <body> <div> <p>Первый параграф блока div. Этот параграф будет иметь отступ</p> <p>Второй параграф блока div. Этот параграф не будет иметь отступа</p> </div> <p>Однако этот стиль задается только для параграфов</p> <div> <h4>Заголовок</h4> <p>Первый параграф в блоке div. Этот параграф не будет иметь отступа.</p> </div> </body> </html>
Этот код дает следующий результат:
Псевдокласс :lang позволяет составлять селекторы для отдельных тегов на основе настроек языка.
Этот класс полезен при создании документов, которые должны содержать текст на нескольких языках, имеющих различные конвенции для некоторых языковых конструкций. Например, во французском языке для обозначения цитаты, как правило, используются угловые скобки (<and>), в то время как в английском языке используются одинарные кавычки (‘and‘).
В таком документе вы можете использовать псевдокласс :lang, чтобы изменить кавычки надлежащим образом. Приведенный ниже код изменяет тег <blockquote> надлежащим образом для каждого языка:
<html> <head> <style type="text/css"> /* Два уровня кавычек для двух языков*/ :lang(en) { quotes: '"' '"' "'" "'"; } :lang(fr) { quotes: "<<" ">>" "<" ">"; } </style> </head> <body> <p>...<q lang="fr">Кавычки в абзаце</q>...</p> </body> </html>
Селекторы :lang будут применяться ко всем элементам в документе. Но не все элементы используют свойство quotes, так что для большинства элементов эффект будет незаметен.
Этот код дает следующий результат:
Данная публикация является переводом статьи «CSS — Pseudo Classes» , подготовленная редакцией проекта.
Основы HTML, CSS и веб-дизайна
Основы HTML, CSS и веб-дизайна
Добавление стилей в HTML-документ
Помните невидимую «голову» документа? Именно в ней можно указать адрес CSS-файла со стилями:
<head>
<link rel="stylesheet" href="main.css">
</head>
Если HTML-файл лежит в одной директории с файлом main.css, то стили из этого CSS-файла будут применены к странице. Если же файл лежит в другом месте, то нужно указать путь к нему. Например, если структура директорий такая:
my_site/
├── css/
│ ├── main.css
├── html/
│ ├── index.html
То в файле index.html путь нужно указать так:
<head>
<link rel="stylesheet" href="../css/main.css">
</head>
Такой путь называется относительным. Он указывается относительно текущего расположения файла index.html. Чтобы добраться до файла main.css нам было нужно выйти из директории html. Это делается с помощью конструкции ../. Далее мы указали директорию css и название нашего CSS файла.
Существуют также абсолютные пути. Они всегда строятся от корня файловой системы. В таком случае путь всегда начинается со слэша. Если представить, что сайт лежит в корне нашей файловой системы, то путь выглядел бы следующим образом: /css/main.css.
Стили также можно поместить прямо в HTML-файл, не создавая отдельный CSS-файл:
<!DOCTYPE html>
<html>
<head>
<title>Моё резюме</title>
<style>
.important {
color: green;
font-style: italic;
}
</style>
</head>
<body>
<h2>Алексей Примадонин</h2>
<h4>Веб-разработчик</h4>
<p>
<a href="mailto:[email protected]">[email protected]</a>,
<a href="https://github.com/alprim">github.com/alprim</a>
</p>
</body>
</html>
Такой вариант может быть уместен для минимальных страниц, которые гарантированно не будут разрастаться. В целом, лучше всегда разделять HTML и CSS на отдельные файлы. Один CSS-файл можно использовать в нескольких HTML-документах, к тому же разделение представления (presentation — это стили) и содержания (content — это сам HTML) — правильная стратегия при построении информационных систем.
Каскад
Почему же C в CSS — это cascade? Дело в том, что стили складываются каскадом в единый набор.
p {
color: green;
font-size: 20px;
}
p {
color: red;
}
В итоге у элемента p
цвет текста будет красным, потому что этот стиль был указан в таком же селекторе, но после предыдущего. При этом размер шрифта останется 20 пикселей: это значение не заменялось.
Можно представить, что стили собрались каскадом в такой набор:
{
color: red;
font-size: 20px;
}
Каскад происходит сверху вниз, и работает даже внутри одного селектора. Ниже — странный пример, но результат будет тем же: цвет текста будет красным:
p {
color: green;
color: red;
font-size: 20px;
}
Каскадность также заключается в том, что один элемент может попадать под действие нескольких селекторов разного типа. Например:
p {
color: red;
}
p.important {
font-size: 20px;
}
#intro {
font-style: italic;
}
<p>
Индейские племена Манахаттоу и Канарси.
</p>
Такой элемент будет одновременно красным, размером 20 пикселей и курсивом. Но у разных видов селекторов разный приоритет.
Порядок таков:
- Селектор типа элемента (
p
) - Селектор класса (
.important
) - Селектор id (
#intro
)
1 — низкий приоритет, 3 — высокий приоритет.
Пример:
#intro {
color: green;
}
p {
color: blue;
font-weight: bold;
}
p.important {
color: purple;
font-style: italic;
}
<p>
Индейские племена Манахаттоу и Канарси.
</p>
Текст в этом элементе будет наклонным, полужирным и зелёным, потому что:
- Селектор типа элемента
p
:- синий цвет
- полужирность
- Селектор класса
p.important
:- синий цвет заменил на пурпурный цвет
- курсив
- Селектор идентификатора
#intro
:- пурпурный цвет заменил на зелёный цвет
Стили сложились каскадом, что-то заменилось, что-то нет, и в итоге получился такой набор:
{
color:green;
font-weight: bold;
font-style: italic;
}
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты.
Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?
Выделите текст, нажмите
ctrl + enter
и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.
Что-то не получается или материал кажется сложным?
Загляните в раздел «Обсуждение»:
- задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
- расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
- изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете
сделай это красивым · HonKit
Наш блог всё ещё выглядит довольно скверно, не так ли? Пора сделать его красивым! Для этого будем использовать CSS.
Что такое CSS?
Каскадные таблицы стилей (англ. Cascading Style Sheets, или сокращённо CSS) — специальный язык, используемый для описания внешнего вида и форматирования сайта, написанного на языке разметки (как HTML). Воспринимай это как своего рода макияж для нашей веб-страницы 😉
Но мы же не хотим начинать всё с нуля, правда? Мы просто снова возьмём что-то, что уже было создано программистами и опубликовано в Интернете для свободного пользования. Ты же знаешь, заново изобретать велосипед совсем не весело.
Давай использовать Bootstrap!
Bootstrap — один из наиболее популярных HTML и CSS фреймворков для разработки красивых сайтов: https://getbootstrap.com/
Он был написан программистами, которые работали в Twitter, а сейчас совершенствуется волонтёрами со всего мира.
Установка Bootstrap
Для установки Bootstrap тебе нужно добавить следующие строки в <head>
твоего .html
файла (blog/templates/blog/post_list.html
):
blog/templates/blog/post_list.html
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
Это не добавит ни одного файла к твоему проекту. Эти строки просто указывают на файлы, опубликованные в Интернете. Просто продолжай, открой свой веб-сайт и обнови страницу. Вот и результат!
Выглядит уже лучше!
Статические файлы в Django
Теперь мы ближе познакомимся с теми таинственными статическими файлами. Статическими файлами называются все файлы CSS и изображения, т.е. файлы, которые не изменяются динамически, их содержание не зависит от контекста запроса и будет одинаково для всех пользователей.
Куда поместить статические файлы в Django
Django уже знает, где искать статические файлы для встроенного приложения «admin». Теперь нам нужно добавить статические файлы для своего приложения blog
.
Мы сделаем это, создав папку static
внутри каталога с нашим приложением:
djangogirls
├── blog
│ ├── migrations
│ ├── static
│ └── templates
└── mysite
Django будет автоматически находить папки static
внутри всех каталогов твоих приложений и сможет использовать их содержимое в качестве статических файлов.
Твой первый CSS файл!
Давай создадим CSS файл, чтобы добавить свой собственный стиль для твоей веб-страницы. Создай новую папку под названием css
внутри твоей папки static
. Затем создай новый файл под названием blog.css
внутри папки css
. Готово?
djangogirls
└─── blog
└─── static
└─── css
└─── blog.css
Пришло время написать несколько строк CSS! Открой файл blog/static/css/blog.css
в своем редакторе кода.
Мы не будем здесь погружаться слишком глубоко в процесс настройки и изучения CSS, поскольку это так просто, что ты сможешь изучить этот материал самостоятельно после этого руководства. В конце этой главы мы порекомендуем тебе бесплатный курс для дальнейшего изучения.
Но давай сделаем хотя бы немного. Возможно, мы могли бы изменить цвет заголовка?
Чтобы понимать цвета, компьютеры используют специальные коды. Они начинаются с #
и далее следуют 6 букв (A-F) и цифр (0-9). Ты можешь найти коды цветов, например, здесь: http://www.colorpicker.com/. Также можешь пользоваться предопределенными цветами, такими как red
и green
.
В файле blog/static/css/blog.css
тебе нужно добавить следующий код:
blog/static/css/blog.css
h2 a {
color: #FCA205;
}
h2 a
— это CSS-селектор. Это означает, что мы применяем наши стили к каждому элементу a
внутри элемента h2
(например, когда у нас в коде что-то вроде: <h2><a href="">link</a></h2>
). В этом случае мы говорим о том, что нужно изменить цвет элемента на #FCA205
, то есть на оранжевый. Конечно, ты можешь указать свой собственный цвет!
В CSS файле мы определяем стили для элементов файла HTML. Элементы идентифицируются именами (то есть a
, h2
, body
), атрибутом class
или атрибутом id
. Class и id – это имена, которые ты сама присваиваешь элементам. Классы (сlass) определяют группы элементов, а идентификаторы (id) указывают на конкретные элементы. Например, следующий тег может быть идентифицирован CSS с использованием имени тега a
, класса external_link
или идентификатора link_to_wiki_page
:
<a href="https://en.wikipedia.org/wiki/Django">
Почитай про CSS селекторы в CSS Selectors на w3schools.
Затем нам также нужно сообщить нашему HTML-шаблону о том, что мы добавили CSS. Открой файл blog/templates/blog/post_list.html
и добавь эту строку в самое начало:
blog/templates/blog/post_list.html
{% load static %}
Мы просто загружаем здесь статические файлы 🙂
Далее между <head>
и </head>
, после ссылок на файлы Bootstrap CSS, добавь такую строку:
blog/templates/blog/post_list.html
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
Браузер читает файлы в порядке их следования, поэтому нам необходимо удостовериться, что файл расположен в необходимом месте. Иначе код нашего файла может переопределить код в файлах Bootstrap.
Мы только что сказали нашему шаблону, где находится наш CSS файл.
Твой файл должен теперь выглядеть следующим образом:
blog/templates/blog/post_list.html
{% load static %}
<html>
<head>
<title>Django Girls blog</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
</head>
<body>
<div>
<h2><a href="/">Django Girls Blog</a></h2>
</div>
{% for post in posts %}
<div>
<p>published: {{ post.published_date }}</p>
<h2><a href="">{{ post.title }}</a></h2>
<p>{{ post.text|linebreaksbr }}</p>
</div>
{% endfor %}
</body>
</html>
Ок, сохрани файл и обнови страницу!
Отличная работа! Может быть, мы также хотели бы добавить нашему веб-сайту немного пространства и увеличить отступ слева? Давай попробуем!
blog/static/css/blog.css
body {
padding-left: 15px;
}
Добавь это к твоему CSS, сохрани файл и посмотри, как это работает!
Возможно, мы можем настроить шрифт нашего заголовка? Вставь это внутрь тега <head>
в файле blog/templates/blog/post_list.html
:
blog/templates/blog/post_list.html
<link href="https://fonts.googleapis.com/css?family=Lobster&subset=latin,cyrillic" rel="stylesheet" type="text/css">
Как и ранее, проверь порядок и вставь эту строку перед ссылкой на blog/static/css/blog.css
. Эта строка импортирует шрифт под названием Lobster из шрифтов Google (https://www.google.com/fonts).
Теперь добавь строку font-family: 'Lobster';
в CSS файле blog/static/css/blog.css
внутри блока определения стиля h2 a
(код помещается между скобками {
и }
) и обнови страницу:
blog/static/css/blog.css
h2 a {
color: #FCA205;
font-family: 'Lobster';
}
Отлично!
Как было указано выше, в CSS используется концепция классов, которая позволяет назвать часть HTML кода и применять стили только для этой части без всякого эффекта для других. Это очень полезно, если у тебя есть, скажем, два блока div, но они выполняют совершенно разные функции (как ваш заголовок и пост), следовательно, ты не хочешь, чтобы они выглядели одинаково.
Дадим имена определённым частям HTML кода. Добавь класс под названием page-header
в блок div
, содержащий наш заголовок, как это сделано здесь:
blog/templates/blog/post_list.html
<div>
<h2><a href="/">Django Girls Blog</a></h2>
</div>
А теперь добавь класс post
в твой div
, содержащий сообщение в блоге:
blog/templates/blog/post_list.html
<div>
<p>published: {{ post.published_date }}</p>
<h2><a href="">{{ post.title }}</a></h2>
<p>{{ post.text|linebreaksbr }}</p>
</div>
Теперь добавим определения блоков для различных селекторов. Селекторы, которые начинают с символа .
, относятся к классам. В Интернете много хороших справочников по CSS, которые могут помочь тебе понять следующий код. А сейчас просто скопируй и вставь код в файл djangogirls/static/css/blog.css
:
blog/static/css/blog.css
.page-header {
background-color: #ff9400;
margin-top: 0;
padding: 20px 20px 20px 40px;
}
.page-header h2, .page-header h2 a, .page-header h2 a:visited, .page-header h2 a:active {
color: #ffffff;
font-size: 36pt;
text-decoration: none;
}
.content {
margin-left: 40px;
}
h2, h3, h4, h5 {
font-family: 'Lobster', cursive;
}
.date {
color: #828282;
}
.save {
float: right;
}
.post-form textarea, .post-form input {
width: 100%;
}
.top-menu, .top-menu:hover, .top-menu:visited {
color: #ffffff;
float: right;
font-size: 26pt;
margin-right: 20px;
}
.post {
margin-bottom: 70px;
}
.post h2 a, .post h2 a:visited {
color: #000000;
}
Далее переделаем код HTML, отображающий посты, используя классы. Замени:
blog/templates/blog/post_list.html
{% for post in posts %}
<div>
<p>published: {{ post.published_date }}</p>
<h2><a href="">{{ post.title }}</a></h2>
<p>{{ post.text|linebreaksbr }}</p>
</div>
{% endfor %}
в blog/templates/blog/post_list.html
этим кодом:
blog/templates/blog/post_list.html
<div>
<div>
<div>
{% for post in posts %}
<div>
<div>
<p>Опубликовано: {{ post.published_date }}</p>
</div>
<h2><a href="">{{ post.title }}</a></h2>
<p>{{ post.text|linebreaksbr }}</p>
</div>
{% endfor %}
</div>
</div>
</div>
Сохрани эти файлы и обнови свой веб-сайт.
Юхууу! Выглядит прекрасно, не так ли? Код, который мы только что вставили, на самом деле не сложный для понимания, и ты, просто прочитав его, сможешь понять большую часть.
Не бойся немного повозиться с этим CSS-файлом и попробуй поменять некоторые вещи. Если что-то сломается, не волнуйся, ты всегда можешь отменить предыдущее действие!
В любом случае, мы настоятельно рекомендуем пройти бесплатный онлайн курс Codeacademy HTML & CSS course в виде домашней работы после воркшопа, чтобы изучить всё, что нужно знать об оформлении веб-сайтов с помощью CSS.
Готова к следующей главе?! 🙂
Локальный CSS · vue-loader
Когда у тега <style>
есть атрибут scoped
, то его CSS будет применяться только к элементам текущего компонента. Это похоже на инкапсуляцию стилей в Shadow DOM. Ими можно пользоваться с некоторыми оговорками, но не требуется никаких полифиллов. Это достигается за счёт использования PostCSS для преобразования следующего:
<style scoped>
.example {
color: red;
}
</style>
<template>
<div>hi</div>
</template>
В что-то подобное:
<style>
.example[data-v-f3f3eg9] {
color: red;
}
</style>
<template>
<div data-v-f3f3eg9>hi</div>
</template>
Советы
Использование локальных и глобальных стилей
Вы можете сочетать использование в компоненте локальных и глобальных стилей одновременно:
<style>
</style>
<style scoped>
</style>
Корневой узел дочернего компонента
С помощью scoped
, стили родительского компонента не будут влиять на содержимое дочерних компонентов. Тем не менее, корневой узел дочернего компонента будет зависеть как от scoped CSS из родительского элемента, так и от scoped CSS дочернего. Это предусмотрено специально, чтобы родительский элемент мог стилизовать корневой элемент дочернего компонента например для целей макета.
Глубокие селекторы
Если вы хотите, чтобы селектор в scoped
стилях был «глубоким», т.е. влиял на дочерние компоненты, вы можете использовать комбинатор >>>
:
<style scoped>
.a >>> .b { }
</style>
Указанное выше будет скомпилировано в:
.a[data-v-f3f3eg9] .b { }
Некоторые пре-процессоры, такие как Sass, не могут правильно обработать >>>
. В таких случаях вы можете использовать комбинатор /deep/
— это псевдоним для >>>
работающий точно также.
Динамически генерируемый контент
DOM-содержимое, создаваемое с помощью v-html
не попадает под область действия scoped-стилей, но вы всё равно можете его стилизовать воспользовавшись deep-селекторами.
О чём следует помнить
Локальные стили не устраняют необходимость классов. Из-за того как браузеры рендерят различные CSS-селекторы,
p { color: red }
может быть в разы медленнее при использовании в локальных стилях (например, когда комбинируется с селектором по атрибуту). Если же вы используете классы или ID, такие как.example { color: red }
, тогда вы практически полностью исключаете ухудшение производительности. Вот пример где вы можете проверить разницу самостоятельно.Будьте внимательны с селекторами потомков в рекурсивных компонентах! Для CSS-правила с селектором
.a .b
, если элемент, который соответствует.a
содержит рекурсивный компонент потомок, тогда все.b
в этом компоненте потомке будут также соответствовать правилу.
ссылок для стилизации CSS
С помощью CSS ссылки можно стилизовать по-разному.
Текстовая ссылка
Текстовая ссылка
Кнопка ссылки
Кнопка ссылки
Ссылки для укладки
Ссылки могут быть стилизованы с любым свойством CSS (например, цвет
, font-family
,
фон
и др.).
Кроме того, ссылки могут быть стилизованы
по-разному в зависимости от того, в каком состоянии они находятся.
Четыре состояния ссылок:
-
a: link
— нормальная, непосещаемая ссылка -
a: посещено
— ссылка, которую посетил пользователь -
a: hover
— ссылка, когда пользователь наводит на нее курсор -
a: active
— ссылка в момент нажатия
Пример
/ * непосещенная ссылка * /
a: ссылка {
цвет: красный;
}
/ * посетил
ссылка * /
a: посетил {
цвет: зеленый;
}
/ * наведение курсора мыши на ссылку * /
a: hover {
цвет: горячий розовый;
}
/ * выбранная ссылка * /
a: активная {
цвет синий;
}
Попробуй сам »
При настройке стиля для нескольких состояний ссылки существуют некоторые правила порядка:
- a: hover ДОЛЖЕН идти после ссылки: и после: visit
- a: active ДОЛЖЕН быть после a: hover
Оформление текста
Свойство text-decoration
в основном используется для удаления подчеркивания в ссылках:
Пример
a: ссылка {
оформление текста: нет;
}
a: посещено {
текстовое оформление: нет;
}
a: hover {
text-decoration: underline;
}
a: активно {
оформление текста: подчеркивание;
}
Попробуй сам »
Цвет фона
Свойство background-color
можно использовать для указания цвета фона для ссылок:
Пример
a: ссылка {
цвет фона: желтый;
}
a: посещено {
background-color: cyan;
}
a: hover {
background-color: lightgreen;
}
a: active {
background-color: hotpink;
}
Попробуй сам »
Кнопки связи
Этот пример демонстрирует более сложный пример, в котором мы объединяем несколько свойств CSS для отображения ссылок в виде блоков / кнопок:
Пример
a: ссылка, a: посетил {
background-color: # f44336;
цвет белый;
отступ: 14px 25px;
выравнивание текста: по центру;
текстовое оформление: нет;
дисплей: строчно-блочный;
}
a: hover, a: active {
background-color: red;
}
Попробуй сам »
Другие примеры
Пример
В этом примере показано, как добавить другие стили к гиперссылкам:
а.one: link {color: # ff0000;}
a.one:visited {color: # 0000ff;}
a.one:hover
{color: # ffcc00;}
a.two: link {color: # ff0000;}
a.two: посещено {color:
# 0000ff;}
a.two: hover {font-size: 150%;}
a.three: link {color:
# ff0000;}
a.three: visit {color: # 0000ff;}
a.three: hover {background:
# 66ff66;}
четыре: ссылка {color: # ff0000;}
четыре: посетили {color:
# 0000ff;}
a.four: hover {font-family: monospace;}
a.пять: ссылка {цвет:
# ff0000; text-decoration: none;}
a.five: посещено {color: # 0000ff;
text-decoration: none;}
a.five: hover {text-decoration: underline;}
Попробуй сам »
Пример
Другой пример создания полей / кнопок ссылок:
a: ссылка, a: посетил {
background-color: white;
цвет: черный;
граница: 2 пикселя сплошного зеленого цвета;
отступ: 10 пикселей 20 пикселей;
выравнивание текста:
центр;
текстовое оформление: нет;
дисплей: строчно-блочный;
}
a: hover, a: active
{
цвет фона: зеленый;
цвет: белый;
}
Попробуй сам »
Пример
Этот пример демонстрирует различные типы курсоров (может быть полезно для ссылок):
auto
crosshair
default
e-resize
help
перемещение
n-resize
ne-resize
nw-resize
pointer
progress
s-resize
se-resize
sw-resize
текст
w-resize
wait
Попробуй сам »
Проверьте себя упражнениями!
Основы CSS: стилизация ссылок как у босса
Интернет основан на ссылках.Идея о том, что мы можем щелкать / касаться ссылки и переходить с одной веб-страницы на другую, заключается в том, как серфинг в Интернете стал нарицательным.
Ссылки в HTML даже выглядят иначе, чем обычный текст без каких-либо стилей CSS.
Они синие (пурпурные при посещении). Они подчеркнуты. Это ссылка в чистом виде.
Но что, если мы хотим немного изменить ситуацию? Возможно, синий не подходит к дизайну вашего сайта. Может быть, у вас есть отвращение к подчеркиванию.Какой бы ни была причина, CSS позволяет нам стилизовать ссылки так же, как и любой другой элемент. Все, что нам нужно сделать, это указать элемент в нашей таблице стилей.
Хотите использовать другой шрифт, изменить цвет, убрать подчеркивание и сделать все прописными? Конечно, а почему бы и нет?
a {
красный цвет;
текстовое оформление: нет;
преобразование текста: прописные буквы;
}
Теперь готовим на газе! Но зачем останавливаться на достигнутом? Давайте рассмотрим еще несколько способов стилизации ссылок, чтобы сделать их удобнее.
Стиль каждого состояния ссылки
Ссылки имеют разные состояния, то есть они адаптируются, когда мы взаимодействуем с ними на веб-странице. Есть три дополнительных состояния ссылки, которые стоит учитывать каждый раз, когда мы меняем стиль ссылок по умолчанию:
- Ссылка (
: ссылка
): вероятно, она используется меньше всего, но она предназначена для стилизации элементовhref
, а не ссылок-заполнителей. - Посещено (
: посещено
): внешний вид ссылки, по которой пользователь щелкнул на странице раньше, когда курсор мыши не находится поверх нее.Стили, которые можно применить к: посещенный
, ограничены по соображениям безопасности. - Наведение (
: наведение
): когда курсор мыши находится поверх ссылки без щелчка - Активный (
: активный
): когда ссылка находится в процессе нажатия. Это может быть очень быстро, но это когда кнопка мыши была нажата и до того, как щелчок закончился. - Focus (
: focus
): как: hover
, но где ссылка выбирается с помощью клавиши Tab на клавиатуре.Состояния наведения и фокуса часто стилизованы вместе.
Обратите внимание на порядок там важен:
- Ссылка
- Посещено
- Наведите курсор
- Активно
- Фокус
Если вы не сделаете это в этом порядке (представьте, что ваш стиль : посещенный
идет после вашего стиля : наведите курсор на
), ссылки не будет вести себя так, как вы хотите. В моем воображаемом примере стиль : visit
будет переопределять стиль : hover
, что маловероятно, что это то, что вам нужно.Фокус — это функция доступности, поэтому последняя, потому что она наиболее важна.
Один из способов запомнить порядок — это ЛЮБОВЬ и НЕНАВИСТЬ . то есть L (ink) OV (isted) E / H (over) A (Active) TE.
Вот та же ссылка, на которую мы смотрели. Сначала попробуйте навести указатель мыши на него, не щелкая, и обратите внимание, что он становится подчеркнутым. Затем щелкните ссылку, но оставьте кнопку мыши нажатой на некоторое время, чтобы увидеть, как активный стиль меняет цвет ссылки на черный.Наконец, отпустите кнопку мыши, и ссылка должна стать фиолетовой, прежде чем она будет технически посещена.
Ссылки кажутся простой концепцией, но, черт возьми, в них много чего происходит, а CSS дает нам невероятные возможности для настройки опыта!
Ссылки как кнопки
Хотя по этому поводу ведутся споры, мы можем использовать CSS, чтобы текстовая ссылка выглядела как кнопка.
Как и другие элементы HTML, CSS может добавлять цвета фона и отступы к ссылкам, что позволяет нам создавать внешний вид кнопки.Вот наша ссылка с использованием этих методов:
a {
цвет фона: красный;
цвет белый;
заполнение: 1em 1.5em;
текстовое оформление: нет;
преобразование текста: прописные буквы;
}
Отлично! Теперь давайте воспользуемся способностями изменения состояния, которые мы узнали в предыдущем разделе, чтобы сделать нашу искусственную кнопку более интерактивной. Мы сделаем кнопку темно-серой при наведении, черной при активной и светло-серой при посещении:
a {
цвет фона: красный;
цвет белый;
заполнение: 1em 1.5em;
текстовое оформление: нет;
преобразование текста: прописные буквы;
}
a: hover {
цвет фона: # 555;
}
a: active {
цвет фона: черный;
}
а: посетил {
цвет фона: #ccc;
}
Стилизация ссылки как кнопки и использование состояний позволяет нам создавать довольно интересные эффекты.Например, давайте создадим кнопку с некоторой глубиной, которая, кажется, нажимается, когда она активна, и всплывает, когда щелчок закончен.
Ой, и курсоры!
Мы довольно подробно рассмотрели ссылки на стили, но есть еще один их компонент, который мы не можем игнорировать: курсор.
Курсор указывает положение мыши на экране. Мы уже привыкли к стандартной черной стрелке:
.
Стандартная стрелка курсора мыши
Мы можем изменить стрелку на указатель в виде руки при наведении (: hover
), чтобы было легче увидеть, что ссылка указывает на то, что это интерактивный элемент:
Использование курсора : указатель
предоставляет интерактивную подсказку.
;
a: hover {
курсор: указатель;
}
Уф, это намного лучше! Теперь у нас есть довольно модная ссылка, которая выглядит как кнопка с правильными интерактивными подсказками.
Повышение уровня
Мы рассмотрели здесь довольно много вопросов, но это всего лишь царапина на поверхности того, как мы можем управлять стилем ссылок. Если вы готовы повысить уровень, то вот несколько ресурсов, к которым вы можете перейти отсюда:
- Ссылки Mailto — Хороший справочник по связыванию адресов электронной почты вместо веб-страниц.
- Текущее состояние телефонных связей — Знаете ли вы, что можно привязать телефонный номер? Ну вот как.
- Курсор — Справочное руководство CSS-Tricks для настройки курсора.
- Когда использовать элемент «Кнопка». Если вас интересует разница между кнопкой ссылки и кнопкой традиционной формы, то это хороший обзор с предложениями, которые лучше подходят для конкретных контекстов.
- Button Maker — бесплатный ресурс для создания CSS для кнопок ссылок.
Стилизация ссылок — Изучение веб-разработки
При стилизации ссылок важно понимать, как использовать псевдоклассы для эффективного стилизации состояний ссылок и как стилизовать ссылки для использования в общих разнообразных функциях интерфейса, таких как меню навигации и вкладки. Мы рассмотрим все эти темы в этой статье.
Мы рассмотрели, как ссылки реализованы в вашем HTML в соответствии с лучшими практиками создания гиперссылок. В этой статье мы будем опираться на эти знания, показывая вам лучшие практики стилизации ссылок.
Состояния ссылок
Первое, что нужно понять, это концепция состояний ссылок — различных состояний, в которых могут существовать ссылки, которые могут быть стилизованы с использованием различных псевдоклассов:
- Ссылка : ссылка, у которой есть пункт назначения (то есть не только именованный якорь), оформленный с использованием псевдокласса
: link
. - Посещено : Ссылка, когда она уже была посещена (существует в истории браузера), оформленная с использованием псевдокласса
: посещено
. - Hover : ссылка при наведении на нее указателя мыши, стилизованная с использованием псевдокласса
: hover
. - Focus : ссылка, когда она была сфокусирована (например, перемещена пользователем клавиатуры с помощью клавиши Tab или аналогичной, или программно сфокусирована с использованием
HTMLElement.focus ()
) — это оформлено с использованием: focus
псевдокласс. - Активный : ссылка, когда она активна (например,грамм. нажал), оформленный с использованием псевдокласса
: active
.
Стили по умолчанию
В следующем примере показано, как ссылка будет вести себя по умолчанию (CSS увеличивает и центрирует текст, чтобы он больше выделялся).
п {
размер шрифта: 2rem;
выравнивание текста: центр;
}
Примечание : Все ссылки в примерах на этой странице являются поддельными — вместо реального URL-адреса ставится #
(решетка или знак решетки).Это потому, что если бы были включены настоящие ссылки, нажатие на них нарушило бы примеры (вы бы получили ошибку или страницу, загруженную во встроенном примере, с которой вы не могли бы вернуться). #
просто ссылки на текущую страницу.
Вы заметите несколько вещей, исследуя стили по умолчанию:
- Ссылки подчеркнуты.
- Непосещенные ссылки синие.
- Посещенные ссылки фиолетовые.
- При наведении на ссылку указатель мыши превращается в маленький значок руки.
- Сфокусированные ссылки имеют контур вокруг них — вы должны иметь возможность сосредоточиться на ссылках на этой странице с помощью клавиатуры, нажав клавишу табуляции (на Mac вам нужно использовать опцию + вкладку или включить Полный доступ с клавиатуры: возможность выбора всех элементов управления путем нажатия Ctrl + F7 .)
- Активные ссылки красные (попробуйте удерживать кнопку мыши на ссылке, когда вы щелкаете по ней.)
Интересно, что эти стили по умолчанию почти такие же, какими они были в первые дни браузеров в середине 1990-х.Это связано с тем, что пользователи знают и ожидают такого поведения — если ссылки будут иметь другой стиль, это запутает многих. Это не означает, что вам вообще не следует стилизовать ссылки, просто вы не должны слишком далеко отклоняться от ожидаемого поведения. Вы должны как минимум:
- Используйте подчеркивание для ссылок, но не для других вещей. Если вы не хотите подчеркивать ссылки, по крайней мере, выделите их другим способом.
- Заставить их каким-то образом реагировать при наведении / фокусировке и немного иначе при активации.
Стили по умолчанию можно отключить / изменить с помощью следующих свойств CSS:
-
цвет
для цвета текста. -
курсор
для стиля указателя мыши — вы не должны отключать это, если у вас нет очень веской причины. -
контур
для контура текста (контур похож на границу, с той лишь разницей, что граница занимает место в поле, а контур — нет; он просто располагается поверх фона).Контур — это полезное средство обеспечения доступности, поэтому хорошенько подумайте, прежде чем отключать его; вы должны как минимум удвоить стили, заданные для состояния наведения ссылки, и для состояния фокуса.
Примечание : Вы не ограничены только вышеперечисленными свойствами для стилизации ваших ссылок — вы можете использовать любые свойства, которые вам нравятся. Только постарайся не сходить с ума!
Стилизация некоторых ссылок
Теперь мы подробно рассмотрели состояния по умолчанию, давайте рассмотрим типичный набор стилей ссылок.
Для начала напишем наши пустые наборы правил:
a {
}
ссылка {
}
а: посетил {
}
фокус {
}
a: hover {
}
a: active {
}
Этот порядок важен, потому что стили ссылок основываются друг на друге, например, стили в первом правиле будут применяться ко всем последующим, и когда ссылка активируется, она обычно также наводится. Если вы разместите их в неправильном порядке и измените одни и те же свойства в каждом наборе правил, все будет работать не так, как вы ожидаете.Чтобы запомнить порядок, вы можете попробовать использовать мнемонику, например L o V e F уши HA te.
Теперь давайте добавим дополнительную информацию, чтобы правильно оформить этот стиль:
кузов {
ширина: 300 пикселей;
маржа: 0 авто;
размер шрифта: 1,2 бэр;
семейство шрифтов: без засечек;
}
п {
высота строки: 1,4;
}
a {
наброски: нет;
текстовое оформление: нет;
отступ: 2px 1px 0;
}
ссылка {
цвет: # 265301;
}
а: посетил {
цвет: # 437A16;
}
фокус {
нижняя граница: сплошная 1px;
фон: # BAE498;
}
a: hover {
нижняя граница: сплошная 1px;
фон: #CDFEAA;
}
a: active {
фон: # 265301;
цвет: #CDFEAA;
}
Мы также предоставим образец HTML для применения CSS к:
Доступно несколько браузеров, например Mozilla
Firefox , Google Chrome и
Microsoft Edge .
Объединение этих двух дает следующий результат:
Итак, что мы здесь сделали? Это определенно отличается от стиля по умолчанию, но все же обеспечивает достаточно знакомый интерфейс, чтобы пользователи знали, что происходит:
- Первые два правила не особо интересны для этого обсуждения.
- Третье правило использует селектор
a
, чтобы избавиться от подчеркивания текста по умолчанию и контура фокуса (который в любом случае различается в разных браузерах), и добавляет к каждой ссылке небольшое отступление — все это станет ясно позже. - Затем мы используем селекторы
a: link
иa: loaded
, чтобы установить несколько цветовых вариаций для непосещенных и посещенных ссылок, чтобы они были различимы. - Следующие два правила используют
a: focus
иa: hover
, чтобы установить для сфокусированных и зависших ссылок разные цвета фона, а также подчеркивание, чтобы ссылка еще больше выделялась. Здесь следует отметить два момента:- Подчеркивание было создано с использованием
border-bottom
, а неtext-decoration
— некоторые люди предпочитают это, потому что первый имеет лучшие варианты стилей, чем второй, и нарисован немного ниже, поэтому не пересекает нижние элементы подчеркнутого слова (e.грамм. хвосты на g и y). - Значение
нижней границы
было установлено как1px сплошной
, без указания цвета. При этом граница приобретает тот же цвет, что и текст элемента, что полезно в таких случаях, когда текст в каждом случае имеет другой цвет.
- Подчеркивание было создано с использованием
- Наконец,
a: active
используется, чтобы дать ссылкам инвертированную цветовую схему во время их активации, чтобы было ясно, что происходит что-то важное!
Активное обучение: создавайте собственные ссылки
В этом сеансе активного обучения мы хотели бы, чтобы вы взяли наш пустой набор правил и добавили свои собственные объявления, чтобы ссылки выглядели действительно круто.Используйте свое воображение, сходите с ума. Мы уверены, что вы можете придумать что-то более крутое и столь же функциональное, как наш пример выше.
Если вы допустили ошибку, вы всегда можете сбросить его с помощью кнопки Reset . Если вы действительно застряли, нажмите кнопку Показать решение , чтобы вставить пример, который мы показали выше.
Распространенной практикой является включение значков в ссылки, чтобы лучше понять, на какой контент указывает ссылка. Давайте посмотрим на действительно простой пример, который добавляет значок к внешним ссылкам (ссылкам, ведущим на другие сайты.) Такой значок обычно выглядит как маленькая стрелка, указывающая из коробки — для этого примера мы будем использовать отличный пример с icons8.com.
Давайте посмотрим на HTML и CSS, которые дадут нам желаемый эффект. Во-первых, простой HTML-код для стилизации:
Для получения дополнительной информации о погоде посетите нашу страницу погоды ,
посмотрите погоду в Википедии или проверьте
из погоды на сайте Extreme Science .
Далее CSS:
кузов {
ширина: 300 пикселей;
маржа: 0 авто;
семейство шрифтов: без засечек;
}
п {
высота строки: 1,4;
}
a {
наброски: нет;
текстовое оформление: нет;
отступ: 2px 1px 0;
}
ссылка {
цвет синий;
}
а: посетил {
цвет: фиолетовый;
}
a: focus, a: hover {
нижняя граница: сплошная 1px;
}
a: active {
красный цвет;
}
a [href * = "http"] {
фон: url ('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0;
размер фона: 16 пикселей 16 пикселей;
отступ справа: 19 пикселей;
}
Так что здесь происходит? Мы пропустим большую часть CSS, так как это та же информация, которую вы просматривали ранее.Последнее правило, однако, интересно — здесь мы вставляем настраиваемое фоновое изображение во внешние ссылки аналогично тому, как мы обрабатывали настраиваемые маркеры в элементах списка в предыдущей статье — на этот раз, однако, мы используем сокращение фона
вместо отдельных характеристики. Мы устанавливаем путь к изображению, которое хотим вставить, указываем без повтора
, чтобы была вставлена только одна копия, а затем указываем позицию как 100% пути справа от текстового содержимого и 0 пикселей от вершина.
Мы также используем background-size
, чтобы указать размер, который мы хотим, чтобы отображалось фоновое изображение — полезно иметь значок большего размера, а затем изменять его размер, как это необходимо для адаптивного веб-дизайна. Однако это работает только с IE 9 и более поздними версиями, поэтому, если вам нужно поддерживать эти старые браузеры, вам просто нужно изменить размер изображения и вставить его как есть.
Наконец, мы устанавливаем padding-right
для ссылок, чтобы освободить место для отображения фонового изображения, чтобы мы не перекрывали его с текстом.
Последнее слово — как мы выбирали только внешние ссылки? Что ж, если вы правильно пишете свои HTML-ссылки, вы должны использовать только абсолютные URL-адреса для внешних ссылок — более эффективно использовать относительные ссылки для ссылки на другие части вашего собственного сайта (как с первой ссылкой). Поэтому текст «http» должен появляться только во внешних ссылках (таких как вторая и третья), и мы можем выбрать его с помощью селектора атрибутов: a [href * = "http"]
выбирает элементы
, но только если у них есть атрибут href
со значением, содержащим «http» где-то внутри.
Вот и все — попробуйте еще раз вернуться к разделу активного обучения выше и опробовать эту новую технику!
Примечание : Значения href
выглядят странно — здесь мы использовали фиктивные ссылки, которые на самом деле никуда не ведут. Причина этого в том, что если бы мы использовали реальные ссылки, вы могли бы загрузить внешний сайт в
, в который встроен живой пример, тем самым потеряв пример.
Инструменты, которые вы изучили до сих пор в этой статье, можно использовать и другими способами.Например, такие состояния, как наведение курсора, можно использовать для стилизации многих различных элементов, а не только ссылок — вы можете захотеть стилизовать состояние наведения курсора на абзацы, элементы списка или другие вещи.
Кроме того, ссылки довольно часто имеют стиль, который при определенных обстоятельствах выглядит и ведет себя как кнопки — меню навигации веб-сайта обычно размечено как список, содержащий ссылки, и его можно легко оформить так, чтобы он выглядел как набор кнопок управления или вкладок, предоставить пользователю доступ к другим частям сайта.Давайте посмотрим, как это сделать.
Сначала немного HTML:
А теперь наш CSS:
body, html {
маржа: 0;
семейство шрифтов: без засечек;
}
ul {
отступ: 0;
ширина: 100%;
}
li {
дисплей: встроенный;
}
a {
наброски: нет;
текстовое оформление: нет;
дисплей: встроенный блок;
ширина: 19.5%;
маржа-право: 0,625%;
выравнивание текста: центр;
высота строки: 3;
черный цвет;
}
li: last-child a {
поле справа: 0;
}
a: link, a: посещено, a: focus {
фон: желтый;
}
a: hover {
фон: оранжевый;
}
a: active {
фон: красный;
цвет белый;
}
Это дает нам следующий результат:
Давайте объясним, что здесь происходит, сосредоточив внимание на наиболее интересных частях:
- Наше второе правило удаляет заполнение по умолчанию из элемента
и устанавливает его ширину, охватывающую 100% внешнего контейнера (в данном случае -
элементы обычно по умолчанию являются блокированными (см. Типы блоков CSS для обновления), что означает, что они будут располагаться на своих собственных строках. В этом случае мы создаем горизонтальный список ссылок, поэтому в третьем правиле мы устанавливаем свойствоdisplay
на встроенный, что заставляет элементы списка располагаться в одной строке друг с другом — теперь они ведут себя как встроенные элементы. - Четвертое правило, определяющее стили для элемента
- Как и в предыдущих примерах, мы начинаем с выключения по умолчанию
text-decoration
иoutline
— мы не хотим, чтобы они портили нам внешний вид. - Затем мы устанавливаем
display
наinline-block
—блока
достигло , мы действительно хотим иметь возможность изменять их размер. Встроенный блок - Теперь о калибровке! Мы хотим заполнить всю ширину
, оставить небольшой отступ между каждой кнопкой (но не зазор на правом краю), и у нас есть 5 кнопок для размещения, которые должны быть одинакового размера.Для этого мы устанавливаем ширинусправа
— 0,625%. Вы заметите, что вся эта ширина в сумме составляет 100,625%, из-за чего последняя кнопка выйдет за пределы
и упадет на следующую строку. Однако мы возвращаем его к 100%, используя следующее правило, которое выбирает только последний - Последние три объявления довольно просты и предназначены в основном для косметических целей.Мы центрируем текст внутри каждой ссылки, устанавливаем
line-height
на 3, чтобы придать кнопкам некоторую высоту (что также имеет преимущество центрирования текста по вертикали), и устанавливаем цвет текста на черный.
- Как и в предыдущих примерах, мы начинаем с выключения по умолчанию
Примечание : Вы могли заметить, что все элементы списка в HTML помещены в одну строку, что и друг друга — это сделано потому, что пробелы / разрывы строк между встроенными блочными элементами создают пробелы на странице, как и пробелы. между словами, и такие пробелы нарушили бы структуру горизонтального меню навигации.Итак, мы удалили пробелы. Вы можете найти дополнительную информацию об этой проблеме (и решениях) в разделе Борьба с пробелом между встроенными блочными элементами.
Вы дошли до конца этой статьи и уже прошли некоторые проверки навыков в наших разделах «Активное обучение», но можете ли вы вспомнить наиболее важную информацию на будущее? Вы можете найти оценку, чтобы убедиться, что вы сохранили эту информацию, в конце модуля — см. Ввод домашней страницы общеобразовательной школы.
Этот экзамен проверяет все знания, обсуждаемые в этом модуле, поэтому вы можете прочитать следующую статью, прежде чем переходить к ней.
Мы надеемся, что эта статья предоставила вам все, что вам нужно знать о ссылках — на данный момент! В последней статье нашего модуля «Стилизация текста» подробно рассказывается, как использовать пользовательские шрифты на ваших веб-сайтах или веб-шрифты, как они более известны.
Стилизация различных состояний ссылки с помощью CSS
Из этого туториала Вы узнаете, как стилизовать различные состояния ссылки с помощью CSS.
Стилизация ссылок с помощью CSS
Ссылки или гиперссылки являются неотъемлемой частью веб-сайта.Это позволяет посетителям перемещаться по сайту. Поэтому правильное оформление ссылок — важный аспект создания удобного веб-сайта.
См. Руководство по ссылкам HTML, чтобы узнать больше о ссылках и о том, как их создавать.
Ссылка имеет четыре различных состояния — ссылка
, посещена
, активна
и зависает
. Эти четыре состояния ссылки можно стилизовать по-разному, используя следующие селекторы псевдокласса привязки.
- a: link — определить стили для обычных или непосещаемых ссылок.
- a: посещено — определить стили для ссылок, которые пользователь уже посетил.
- a: hover — определить стили для ссылки, когда пользователь наводит на нее указатель мыши.
- a: active — определить стили для ссылок при нажатии.
Вы можете указать любое свойство CSS, которое хотите. E.грамм. цвет
, шрифт
, фон
, граница
и т. Д. Для каждого из этих селекторов, чтобы настроить стиль ссылок, как вы это делаете с обычным текстом.
a: link {/ * непосещенная ссылка * /
цвет: # ff0000;
текстовое оформление: нет;
нижняя граница: сплошная 1px;
}
a: посещенная {/ * посещенная ссылка * /
цвет: # ff00ff;
}
a: hover {/ * наведите указатель мыши на ссылку * /
цвет: # 00ff00;
нижняя граница: нет;
}
a: active {/ * активная ссылка * /
цвет: # 00ffff;
}
Порядок, в котором вы устанавливаете стиль для различных состояний ссылок, важен, потому что то, что определяет последнее, имеет приоритет над правилами стиля, определенными ранее.
Примечание: В целом порядок псевдоклассов должен быть следующим — : ссылка
, : посещенный
, : наведение
, : активный
, : фокус
, чтобы они работали должным образом .
Изменение стилей стандартных ссылок
Во всех основных веб-браузерах, таких как Chrome, Firefox, Safari и т. Д.ссылки на веб-страницах имеют подчеркивание и используют цвета ссылок браузера по умолчанию, если вы не устанавливаете стили исключительно для них.
По умолчанию в большинстве браузеров текстовые ссылки будут выглядеть следующим образом:
- Непосещенная ссылка в виде подчеркнутого синего текста.
- Посещенная ссылка в виде подчеркнутого фиолетового текста.
- Активная ссылка в виде подчеркнутого красного текста.
Однако при наведении курсора внешний вид ссылки не меняется.Он остается синим, пурпурным или красным в зависимости от того, в каком состоянии (т. Е. Не посещен, посещен или активен) они находятся.
Теперь давайте посмотрим, как настроить ссылки, переопределив их стиль по умолчанию.
Настройка пользовательского цвета ссылок
Просто используйте свойство CSS color
, чтобы определить цвет по вашему выбору для различных состояний ссылки. Но при выборе цвета убедитесь, что пользователь может четко различать обычный текст и ссылки.
Давайте попробуем следующий пример, чтобы понять, как это в основном работает:
a: link {
цвет: # 1ebba3;
}
а: посетил {
цвет: # ff00f4;
}
a: hover {
цвет: # a766ff;
}
a: active {
цвет: # ff9800;
}
Удаление подчеркивания по умолчанию из ссылок
Если вам не нравится подчеркивание по умолчанию в ссылках, вы можете просто использовать свойство text-decoration
CSS, чтобы избавиться от него.В качестве альтернативы вы можете применить к ссылкам другой стиль, например цвет фона, нижнюю границу, полужирный шрифт и т. Д., Чтобы он немного лучше выделялся из обычного текста.
В следующем примере показано, как удалить или установить подчеркивание для различных состояний ссылки.
a: link, a: visit {
текстовое оформление: нет;
}
a: hover, a: active {
оформление текста: подчеркивание;
}
Создание текстовых ссылок в виде кнопок
Вы также можете сделать ваши обычные текстовые ссылки похожими на кнопку с помощью CSS.Для этого нам нужно использовать еще несколько свойств CSS, таких как background-color
, border
, display
, padding
, и т. Д. Вы узнаете об этих свойствах подробно в следующих главах.
Давайте посмотрим на следующий пример и посмотрим, как он работает на самом деле:
a: link, a: visit {
цвет белый;
цвет фона: # 1ebba3;
дисплей: встроенный блок;
отступ: 10 пикселей 20 пикселей;
граница: 2px solid # 099983;
текстовое оформление: нет;
выравнивание текста: центр;
шрифт: 14px Arial, без засечек;
}
a: hover, a: active {
цвет фона: # 9c6ae1;
цвет границы: # 7443b6;
}
каскадных таблиц стилей, разработка для Интернета — Глава 2: CSS
Как мы объясняли в предыдущей главе, HTML
элементы позволяют дизайнерам веб-страниц размечать документ в соответствии с его
состав.В спецификации HTML перечислены рекомендации о том, как браузеры
должны отображать эти элементы. Например, вы можете разумно
уверен, что содержимое крепкого
элемент будет выделен жирным шрифтом. Кроме того, вы можете в значительной степени
верьте, что большинство браузеров будут отображать содержимое элемента h2 с использованием большого размера шрифта … по крайней мере,
больше, чем элемент p и больше
чем элемент h3. Но вне доверия
и надеюсь, у вас нет никакого контроля над тем, как выглядит ваш текст.
CSS меняет это.CSS ставит дизайнера на место водителя. Мы
посвятите большую часть оставшейся части этой книги объяснению того, что вы можете сделать
с CSS. В этой главе мы начнем с того, что познакомим вас с
основы написания таблиц стилей и работы CSS и HTML
вместе, чтобы описать структуру и внешний вид вашего
документ.
Правила и таблицы стилей
Чтобы начать использовать CSS, вам даже не нужно
писать таблицы стилей. Глава 16 расскажет вам, как указать на
существующие таблицы стилей в Интернете.
Есть два способа создания CSS. Вы также можете
используйте обычный текстовый редактор и напишите таблицы стилей «вручную» или
вы можете использовать специальный инструмент — например, дизайн веб-страницы
приложение — которое поддерживает CSS. Специальные инструменты позволяют
создавать таблицы стилей без изучения синтаксиса CSS
язык. Однако во многих случаях дизайнер захочет настроить
таблицу стилей вручную, поэтому мы рекомендуем вам изучить
писать и редактировать CSS вручную.Давайте начнем!
h2 {цвет: зеленый}
То, что вы видите выше, — это простое правило CSS, которое
содержит одно правило. Правило
утверждение об одном стилистическом аспекте одного или нескольких элементов. А
Таблица стилей представляет собой набор из одного
или другие правила, применимые к HTML-документу. Правило выше устанавливает
цвет всех заголовков первого уровня (h2). Давайте быстро посмотрим, какой визуальный результат
правило может быть таким:
Рисунок 2.1
Теперь приступим к анализу правила.
Анатомия правила
Правило состоит из двух частей:
- Селектор — часть перед левой фигурной
скоба - Декларация — деталь внутри фигурной
подтяжки
Селектор
это связь между HTML-документом и стилем. Он указывает
на какие элементы влияет объявление.Декларация является частью
правило, определяющее, каким будет эффект. В примере
выше селектор h2 и
декларация — «цвет: зеленый». Следовательно, все элементы h2 будут затронуты объявлением, что
есть, они станут зелеными. (Свойство color влияет только на цвет текста переднего плана,
есть другие свойства для фона, границы и т. д.)
Вышеупомянутый селектор основан на типе элемента : он выбирает
все элементы типа «h2.» Этот
вид селектора называется типом
селектор . Любой тип элемента HTML может использоваться как тип
селектор. Селекторы типа — это самый простой вид селекторов. Мы
обсудить другие виды селекторов в
См. CSS
селекторы. , «Селекторы CSS».
Анатомия декларации
Объявление состоит из двух частей, разделенных двоеточием:
- Собственность — часть перед толстой кишкой
- Значение — часть после двоеточия
Собственность
это качество или характеристика, которыми что-то обладает.в
В предыдущем примере это цвет .
CSS2 (см. Отдельную рамку) определяет около 120 свойств, и мы можем
присвоить значения всем из них.
Значение равно
точная спецификация собственности. В примере это
«зеленый», но он также может быть синим, красным, желтым или
какой-то другой цвет.
На диаграмме ниже показаны все составляющие правила. Кудрявый
фигурные скобки ({}) и двоеточие (:) позволяют браузеру
различать селектор, свойство и значение.
Рисунок 2.2 Схема правила.
Селекторы и правила группировки
При разработке CSS целью была краткость. Мы подумали
что если бы мы могли уменьшить размер таблиц стилей, мы могли бы включить
дизайнеров писать и редактировать таблицы стилей «вручную». Также коротко
таблицы стилей загружаются быстрее, чем более длинные. Поэтому CSS включает
несколько механизмов для сокращения таблиц стилей путем группировки
селекторы и объявления.
Например, рассмотрим эти три правила:
h2 {font-weight: bold} h3 {font-weight: bold} h4 {font-weight: bold}
Все три правила имеют одно и то же объявление
— они устанавливают жирный шрифт. (Это делается с помощью свойства font-weight , которое мы обсуждаем
в см
Шрифты. .) Поскольку все три объявления идентичны, мы
может сгруппировать селекторы в список , разделенных запятыми, и перечислить объявление только один раз,
как это:
h2, h3, h4 {font-style: bold}
Это правило даст тот же результат, что и
первые три.
Селектор может иметь более одного объявления. Например, мы
можно было бы написать таблицу стилей с этими двумя правилами:
h2 {цвет: зеленый} h2 {text-align: center}
В этом случае мы устанавливаем для всех h2 зеленые цвета и центрируем их на холсте. (Этот
выполняется с помощью выравнивания текста
собственность, обсуждаемая в
Глава
5.)
Но мы можем достичь того же эффекта быстрее, сгруппировав
объявления, которые относятся к тому же селектору, в список , разделенных точкой с запятой, , например
это:
h2 { цвет: зеленый; выравнивание текста: центр; }
Все объявления должны содержаться в паре
фигурных скобок.Точка с запятой разделяет объявления и может —
но не обязательно — также появляется в конце последнего
декларация. Кроме того, чтобы облегчить чтение кода, мы предлагаем
вы размещаете каждое объявление в отдельной строке, как мы это сделали здесь.
(Браузерам все равно, они просто проигнорируют все лишнее
пробелы и разрывы строк.)
Теперь у вас есть основы создания правил и стилей CSS.
листы. Однако вы еще не закончили. Для стиля
лист, чтобы иметь какой-либо эффект, который вы должны «приклеить» к своей таблице стилей
ваш HTML-документ.
«Приклеивание» таблиц стилей к документу
Чтобы любая таблица стилей влияла на HTML-документ, она
должен быть «приклеен» к документу. То есть таблица стилей и
HTML-документы должны быть объединены, чтобы они могли работать вместе, чтобы
представить документ. Это можно сделать одним из четырех способов:
- Применить базовую таблицу стилей для всего документа
для документа, используя стиль
элемент. - Применение таблицы стилей к отдельному элементу
используя атрибут стиля. - Свяжите внешнюю таблицу стилей с документом
используя элемент ссылки. - Импортировать таблицу стилей с помощью CSS @import
обозначение.
В следующем разделе мы обсудим первый метод:
используя элемент стиля. Мы обсуждаем
используя атрибут стиля в
Глава
4, «Селекторы CSS», и используя элемент ссылки и нотацию @import в главе
16,
«Внешние таблицы стилей».
Склеивание с использованием элемента STYLE
Вы можете склеить таблицу стилей и HTML-документ
вместе, поместив таблицу стилей в элемент стиля в верхней части документа.Элемент стиля был введен в HTML
специально для того, чтобы таблицы стилей можно было вставлять в HTML.
документы. Вот таблица стилей (выделена жирным шрифтом), приклеенная к образцу
документ с помощью элемента стиля.
Результат показан на Рисунке 2.3.
Домашняя страница Баха <СТИЛЬ> h2, h3 {цвет: зеленый} <ТЕЛО>Домашняя страница Баха
Иоганн Себастьян Бах был плодовитым композитор.Среди его работ:
- Вариации Гольдберга
- Бранденбургские концерты
- Рождественская оратория
Историческая перспектива
Бах сочинил то, что было названо период барокко.
Рисунок 2.3.
результат добавления к таблице стилей правила, чтобы сделать h2s зеленым, а затем приклеивания таблицы стилей
к документу, используя стиль
элементы.(попытайся)
Обратите внимание, что стиль
элемент помещается после заголовка
элемент и перед элементом body.
Заголовок документа не отображается на холсте, поэтому он
не зависит от стилей CSS.
Содержимое элемента стиля
таблица стилей. Однако если содержание таких элементов, как
h2, p,
и ul появляется на холсте,
содержание элемента стиля не
показать на холсте.Скорее, это эффект
содержание элемента стиля —
таблица стилей — которая появляется на холсте. Значит, вы не видите «{
color: green} «на экране; вместо этого вы видите два
Элементы h2 окрашены в зеленый цвет. Без правил
были добавлены, которые влияют на любой из других элементов, поэтому эти
элементы отображаются в цвете браузера по умолчанию.
Браузеры и CSS
Для получения обновленного обзора доступных браузеров,
см. W3C
страница обзора
Чтобы CSS работал так, как описано в этой книге, вы должны
используйте браузер с расширенным CSS, то есть браузер, поддерживающий CSS.Браузер с расширенным CSS распознает элемент стиля как контейнер для таблицы стилей и
представить документ соответственно. Большинство браузеров
распространяемые сегодня поддерживают CSS, например Microsoft Internet
Explorer 4 (IE4), Netscape Navigator 4 (NS4) и Opera 3.5 (O3.5).
По самым скромным подсчетам, более половины людей
в Интернете используется браузер с расширенным CSS, и цифры стабильно
поднимается. Скорее всего, люди, с которыми вы общаетесь, имеют
Браузеры с улучшенным CSS.Если нет, дайте им повод для обновления!
Лучший источник информации о том, как
разные браузеры поддерживают CSS — это графики WebReview
Увы, не все реализации CSS идеальны. Когда ты начинаешь
экспериментируя с таблицами стилей, вы скоро заметите, что каждый
браузер имеет ряд ошибок и ограничений. В общем,
новые браузеры ведут себя лучше, чем старые. IE4 и O3.5 являются
среди лучших, а следующее предложение Netscape под кодовым названием Gecko —
также обещает значительно улучшенную поддержку CSS.
Те, кто не использует браузеры с расширенными CSS, все еще могут читать страницы
которые используют таблицы стилей. CSS был тщательно разработан так, чтобы все
контент должен оставаться видимым, даже если браузер ничего не знает
о CSS. Некоторые браузеры, например Netscape Navigator версии 2
и 3 не поддерживают таблицы стилей, но они знают достаточно о
элемент стиля, чтобы полностью его игнорировать.
Рядом с поддерживающими таблицами стилей это правильное поведение.
Однако другие браузеры, которые не знают элемента стиля, например, Netscape
Навигатор 1 и Microsoft Internet Explorer 2 игнорируют
стиль теги , но отображать
содержание стиля
элемент.Таким образом, пользователь получит распечатанную таблицу стилей.
в верхней части холста. На момент написания только несколько
процентов пользователей Интернета столкнутся с этой проблемой. Чтобы этого избежать,
вы можете поместить свою таблицу стилей в комментарий HTML , который мы обсуждали
в разделе
1. Поскольку комментарии не отображаются на экране,
помещая свою таблицу стилей в комментарий HTML, вы предотвращаете
старые браузеры от отображения содержимого элемента стиля. Браузеры с расширенным CSS знают
этого трюка, и будет рассматривать содержимое элемента стиля как таблицу стилей.
Напомним, что комментарии HTML начинаются с и заканчиваются
->
.
Вот отрывок из предыдущего примера кода, который показывает, как
вы пишете таблицу стилей в комментарии HTML. Комментарий включает
только содержимое элемента стиля:
Домашняя страница Баха <СТИЛЬ> h2 {цвет: зеленый} -> <ТЕЛО> ..