Капитализирует каждое слово. Например: "john doe" станет "John Doe".
Uppercase
Конвертирует все символы в верхний регистр. Например: "john doe" станет "JOHN DOE".
Lowercase
Конвертирует все символы в нижний регистр. Например: "JOHN DOE" станет "john doe".
None
Трансформации нет - текст отображается так же, как в HTML-коде.
Для примера мы используем список имён. Все имена выделены с помощью <li> (list-item). Давайте капитализируем все имена и отобразим все заголовки верхним регистром.
Видите, HTML-код в этом примере в действительности записан в нижнем регистре.
h1 {
text-transform: uppercase;
}
li {
text-transform: capitalize;
}
Ссылки
Всё изученное в предыдущих уроках вы можете применять и для ссылок/links (например изменять шрифт, цвет, подчёркивание и т. д). Новым будет то, что в CSS эти свойства можно определять по-разному, в зависимости от того, посетили уже ссылку, активна ли она, находится ли указатель мыши над ссылкой. Это позволяет добавить интересные эффекты на ваш web-сайт. Для этого используются так называемые псевдоклассы.
Что такое псевдокласс?
Псевдокласс позволяет учитывать различные условия или события при определении свойств HTM-тэга.
Рассмотрим пример. Как вы знаете, ссылки специфицируются в HTML тэгом <a>. В CSS мы также можем использовать a в качестве селектора:
a {
color: blue;
}
Ссылка может иметь разные состояния. Например, её уже посетили/visited или ещё нет. Можно использовать псевдоклассы для установки разных стилей посещённых и непосещённых ссылок.
a:link {
color: blue;
}
a:visited {
color: red;
}
Используйте |a:link| и |a:visited| для непосещённых и посещённых ссылок, соответственно. Активные ссылки имеют псевдокласс a:active, и a:hover, когда указатель - над ссылкой.
Мы рассмотрим каждый их этих четырёх псевдоклассов на примерах и с объяснениями.
Псевдокласс: link
Псевдокласс :link используется для ссылок на страницы, которые пользователь ещё не посещал.
В примере кода непосещённые ссылки - синие.
a:link {
color: #6699CC;
}
• Показать пример
Псевдокласс: visited
Псевдокласс :visited используется для ссылок на страницы, которые пользователь посетил. В примере кода посещённые ссылки - фиолетовые.
a:visited {
color: #660099;
}
• Показать пример
Псевдокласс: active
Псевдокласс :active используется для активных ссылок.
В примере активные ссылки имеют жёлтый фон.
a:active {
background-color: #FFFF00;
}
• Показать пример
Псевдокласс: hover
Псевдокласс :hover используется для ссылок, над которыми находится указатель мыши.
Это можно использовать для создания интересных эффектов. Например, если мы хотим, чтобы ссылки становились оранжевыми и курсивными при прохождении указателя над ними, то наш CSS должен выглядеть так:
a:hover {
color: orange;
font-style: italic;
}
• Показать пример
Пример 1: Эффект при нахождении указателя над ссылкой
Эффекты для положения указателя мыши над ссылкой стали уже общим местом. Мы рассмотрим несколько дополнительных примеров для псевдокласса :hover.
Пример 1a: Расстояние между буквами
Как вы помните из Урока 5, расстояние между символами можно установить свойством letter-spacing. Это можно применить для ссылки:
a:hover {
letter-spacing: 10px;
font-weight:bold;
color:red;
}
• Показать пример
Пример 1b: UPPERCASE и lowercase
В Уроке 5 мы рассмотрели свойство text-transform, которое может переключать символы с верхнего на нижний регистр. Это также можно использовать для создания эффектов на ссылке:
a:hover {
text-transform: uppercase;
font-weight:bold;
color:blue;
background-color:yellow;
}
Показать пример
Эти два примера показывают почти безграничные возможности комбинирования различных свойств. Вы можете создавать свои собственные эффекты - попробуйте!
Пример 2: Удаление подчёркивания ссылок
Обычный вопрос - как удалить подчёркивание ссылок?
Вы должны точно определить, нужно ли убрать подчёркивание ссылок, так как это может значительно снизить использование вашего web-сайта. Люди привыкли видеть на web-страницах синие подчёркнутые ссылки и знают, что по ним нужно щёлкать. Даже моя мама знает это! Если вы уберёте подчёркивание и измените цвет ссылок, весьма вероятно, что это смутит пользователей и они не получат доступа ко всему содержимому вашего сайта web-сайт.
Вообще-то удалить подчёркивание ссылок очень просто. Как вы, может быть, помните, свойство text-decoration можно использовать для определения подчёркивания текста. Для удаления подчёркивания просто установите в text-decoration значение none.
a {
text-decoration:none;
}
Альтернативно можно также установить text-decoration, наряду с другими свойствами, для всех четырёх псевдоклассов.
a:link {
color: blue;
text-decoration:none;
}
a:visited {
color: purple;
text-decoration:none;
}
a:active {
background-color: yellow;
text-decoration:none;
}
a:hover {
color:red;
text-decoration:none;
}
Идентификация и группирование элементов (class и id)
Иногда вам нужно будет применить особый стиль к определённому элементу или конкретной группе элементов. В этом уроке мы подробно разберём, как можно использовать class и id для специфицирования свойств выбранных элементов.
Как изменить цвет конкретного заголовка отдельно от других заголовков на вашем web-сайте? Как группировать ссылки по категориям и задавать для каждой категории особый стиль? Это лишь примерные вопросы, на которые мы ответим в этом уроке.
Группирование элементов с помощью class
Предположим, у нас есть два списка ссылок сортов винограда - для белого и для красного вина. HTML-код может быть таким:
<p>Виноград для белого вина:</p>
<ul>
<li><a href="ri.htm">Рислинг</a></li>
<li><a href="ch.htm">Шардонэ</a></li>
<li><a href="pb.htm">Пино Блан</a></li>
</ul>
<p>Виноград для красного вина:</p>
<ul>
<li><a href="cs.htm">Кабернэ Совиньон</a></li>
<li><a href="me.htm">Мерло</a></li>
<li><a href="pn.htm">Пино Нуар</a></li>
</ul>
• Показать пример
Далее, мы хотим, чтобы ссылки на белое вино были жёлтого цвета, на красное вино - красного, а остальные ссылки на этой же странице оставались синими.
Для достижения этой цели мы разделим ссылки на две категории с помощью присвоения класса каждой ссылке атрибутом class.
Попробуем установить классы для предыдущего примера:
Далее мы можем определить специальные свойства для ссылок whitewine и redwine, соответственно.
a {
color: blue;
}
a.whitewine {
color: #FFBB00;
}
a.redwine {
color: #800000;
}
• Показать пример
Как показано в примере, вы можете определять свойства для элементов, принадлежащих к определённому классу, с помощью .имя_класса в таблице стилей документа.
Идентификация элемента с помощью id
Помимо группирования элементов вам может понадобиться идентифицировать один уникальный элемент. Это можно реализовать с помощью атрибута id.
Особенность id в том, что в документе не может быть более одного элемента с данным конкретным id. Каждый id должен быть уникальным. В других случаях используйте атрибут class. Теперь взглянем на пример использования id:
<h1>Глава 1</h1>
...
<h2>Глава 1.1</h2>
...
<h2>Глава 1.2</h2>
...
<h1>Глава 2</h1>
...
<h2>Глава 2.1</h2>
...
<h3>Глава 2.1.2</h3>
...
Это могут быть заголовки документа, разделённого на главы или параграфы. Естественным будет назначить id каждой главе:
<h1 id="c1">Глава 1</h1>
...
<h2 id="c1-1">Глава 1.1</h2>
...
<h2 id="c1-2">Глава 1.2</h2>
...
<h1 id="c2">Глава 2</h1>
...
<h2 id="c2-1">Глава 2.1</h2>
...
<h3 id="c2-1-2">Глава 2.1.2</h3>
...
Заголовок, скажем, chapter 1.2, должен быть красным. Это делается в соответствии с CSS:
#c1-2 {
color: red;
}
• Показать пример
Как показано в предыдущем примере, вы можете определять свойства конкретного элемента с помощью #id в таблице стилей документа.
