Ссылки на стиль

Ссылки могут быть оформлены с использованием любого свойства CSS (например color, font-family, background, итд.).

Пример

a {
color: hotpink;
}

Кроме того, ссылки могут быть оформлены по-разному в зависимости от того, в каком состоянии они находятся.

Четыре состояния ссылок:

• a:link- обычная, непосещенная ссылка
• a:visited- ссылка, которую посетил пользователь
• a:hover- ссылка, когда пользователь навыскивает на нее курсор мыши
• a:active- ссылка в момент нажатия

Пример

/* unvisited link */
a:link {
color: red;
}

/* visited link */
a:visited {
color: green;
}

/* mouse over link */
a:hover {
color: hotpink;
}

/* selected link */
a:active {
color: blue;
}

При настройке стиля для нескольких состояний ссылок есть некоторые правила порядка:

• a:hover ДОЛЖЕН прийти после a:link и a:visited
• a:active ДОЛЖЕН прийти после a:hover

Украшение текста

Свойство text-decoration в основном используется для удаления подчеркиваний из ссылок:

Пример

a:link {
text-decoration: none;
}

a:visited {
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

a:active {
text-decoration: underline;
}

Цвет фона

Свойство background-color можно использовать для указания цвета фона для ссылок:

Пример

a:link {
background-color: yellow;
}

a:visited {
background-color: cyan;
}

a:hover {
background-color: lightgreen;
}

a:active {
background-color: hotpink;
}

Кнопки ссылок

Этот пример демонстрирует более продвинутый пример, когда мы объединяем несколько свойств CSS для отображения ссылок в виде полей/кнопок:

Пример

a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}

a:hover, a:active {
background-color: red;
}

Больше примеров

Пример

Этот пример демонстрирует, как добавить другие стили к гиперссылкам:

a.one:link {color: #ff0000;}
a.one:visited {color: #0000ff;}
a.one:hover {color: #ffcc00;}

a.two:link {color: #ff0000;}
a.two:visited {color: #0000ff;}
a.two:hover {font-size: 150%;}

a.three:link {color: #ff0000;}
a.three:visited {color: #0000ff;}
a.three:hover {background: #66ff66;}

a.four:link {color: #ff0000;}
a.four:visited {color: #0000ff;}
a.four:hover {font-family: monospace;}

a.five:link {color: #ff0000; text-decoration: none;}
a.five:visited {color: #0000ff; text-decoration: none;}
a.five:hover {text-decoration: underline;}

Еще один пример создания полей/кнопок ссылок:

a:link, a:visited {
background-color: white;
color: black;
border: 2px solid green;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
}

a:hover, a:active {
background-color: green;
color: white;
}

Пример

Этот пример демонстрирует различные типы курсоров (может быть полезно для ссылок):

<span style="cursor: auto">auto</span><br>
<span style="cursor: crosshair">crosshair</span><br>
<span style="cursor: default">default</span><br>
<span style="cursor: e-resize">e-resize</span><br>
<span style="cursor: help">help</span><br>
<span style="cursor: move">move</span><br>
<span style="cursor: n-resize">n-resize</span><br>
<span style="cursor: ne-resize">ne-resize</span><br>
<span style="cursor: nw-resize">nw-resize</span><br>
<span style="cursor: pointer">pointer</span><br>
<span style="cursor: progress">progress</span><br>
<span style="cursor: s-resize">s-resize</span><br>
<span style="cursor: se-resize">se-resize</span><br>
<span style="cursor: sw-resize">sw-resize</span><br>
<span style="cursor: text">text</span><br>
<span style="cursor: w-resize">w-resize</span><br>
<span style="cursor: wait">wait</span>

Как добавить иконки

Самый простой способ добавить значок на вашу HTML-страницу - это библиотека значков, например Font Awesome.

Добавьте название указанного класса значков к любому встроенному HTML-элементу (например, <i> или <span>).

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

Потрясающие иконки шрифта

Чтобы использовать иконки Font Awesome, перейдите по ссылке fontawesome.com, войдите в систему и получите код для добавления в раздел <head> вашей HTML-страницы:

<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>

Пример

<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>

<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>

</body>
</html>

Иконки Bootstrap

Чтобы использовать начальные символы Bootstrap, добавьте следующую строку в раздел <head> вашей HTML-страницы:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Пример

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>

<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>

</body>
</html>

Иконки Google

Чтобы использовать значки Google, добавьте следующую строку в раздел <head> вашей HTML-страницы:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Пример

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>

<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>

</body>
</html>

Чтобы сократить код, также можно указать все отдельные свойства шрифта в одном свойстве.

Свойство font является сокращенным свойством для:

• font-style
• font-variant
• font-weight
• font-size/line-height
• font-family

Примечание: Требуются значения размера шрифта и семейства шрифтов. Если одно из других значений отсутствует, используются значения по умолчанию.

Пример

Используйте font, чтобы установить несколько свойств шрифта в одном объявлении:

p.a {
font: 20px Arial, sans-serif;
}

p.b {
font: italic small-caps bold 12px/30px Georgia, serif;
}

Правила сопряжения шрифтов

Вот несколько основных правил для создания отличных сочетаний шрифтов:

1. Дополнение

Всегда безопасно найти пары шрифтов, которые дополняют друг друга.

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

2. Используйте суперсемьи шрифтов

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

Например, суперсемейство Lucida содержит следующие шрифты: Lucida Sans, Lucida Serif, Lucida Typewriter Sans, Lucida Typewriter Serif и Lucida Math.

3. Контраст - это король

Два слишком похожих шрифта часто конфликтуют. Тем не менее, контрасты, сделанные правильно, выделяют лучшее в каждом шрифте.

Пример: Сочетание засечек с без засечками является хорошо известной комбинацией.

Сильное суперсемейство включает в себя как засечек, так и без засечек одного и того же шрифта (например, Люсида и Люсида Санс).

4. Выбери только одного босса

Один шрифт должен быть боссом. Это устанавливает иерархию шрифтов на вашей странице. Это может быть достигнуто путем изменения размера, веса и цвета.

Пример

Без сомнения, "Georgia" - это босс здесь:

body {
background-color: black;
font-family: Verdana, sans-serif;
font-size: 16px;
color: gray;
}

h1 {
font-family: Georgia, serif;
font-size: 60px;
color: white;
}

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

Georgia и Verdana

Georgia и Verdana - это классическое сочетание. Он также придерживается стандартов веб-безопасных шрифтов:

Пример

Используйте шрифт "Georgia" для заголовков и "Verdana" для текста:

Helvetica и Garamond

Helvetica и Garamond - это еще одна классическая комбинация, в которой используются безопасные веб-шрифты:

Пример

Используйте шрифт "Helvetica" для заголовков и "Garamond" для текста:

Популярные пары шрифтов Google

Если вы не хотите использовать стандартные шрифты в HTML, вы можете использовать Google Fonts.

Шрифты Google бесплатны в использовании и имеют более 1000 шрифтов на выбор.

Ниже приведены некоторые популярные сочетания шрифтов Google.

Merriweather и Open Sans

Пример

Используйте шрифт "Merriweather" для заголовков и "Open Sans" для текста:

Ubuntu и Lora

Пример

Используйте шрифт "Ubuntu" для заголовков и "Lora" для текста:

Abril Fatface и Poppins

Пример

Используйте шрифт "Abril Fatface" для заголовков и "Poppins" для текста:

Cinzel и Fauna One

Пример

Используйте шрифт "Cinzel" для заголовков и "Fauna One" для текста:

Fjalla One и Libre Baskerville

Пример

Используйте шрифт "Fjalla One" для заголовков и "Libre Baskerville" для текста:

Space Mono и Muli

Пример

Используйте шрифт "Space Mono" для заголовков и "Muli" для текста:

Spectral и Rubik

Пример

Используйте шрифт "Spectral" для заголовков и "Rubik" для текста:

Oswald и Noto Sans

Пример

Используйте шрифт "Oswald" для заголовков и "Noto Sans" для текста:

Если вы не хотите использовать ни один из стандартных шрифтов в HTML, вы можете использовать Google Fonts.

Шрифты Google бесплатны в использовании и имеют более 1000 шрифтов на выбор.

Как Использовать Шрифты Google

Просто добавьте специальную ссылку на таблицу стилей в разделе <head>, а затем обратитесь к шрифту в CSS.

Пример

Здесь мы хотим использовать шрифт под названием "Sofia" из Google Fonts:

<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
}
</style>
</head>

Пример

Здесь мы хотим использовать шрифт с именем "Trirong" из Google Fonts:

<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Trirong">
<style>
body {
font-family: "Trirong", serif;
}
</style>
</head>

Используйте Несколько Шрифтов Google

Чтобы использовать несколько шрифтов Google, просто разделите имена шрифтов символом конвейера (|), например:

Пример

Запросить несколько шрифтов:

<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong">
<style>
h1.a {font-family: "Audiowide", sans-serif;}
h1.b {font-family: "Sofia", sans-serif;}
h1.c {font-family: "Trirong", serif;}
</style>
</head>

Примечание: Запрос нескольких шрифтов может замедлить ваши веб-страницы! Так что будьте осторожны с этим.

Стилизация шрифтов Google

Конечно, вы можете стилизовать шрифты Google, как вам нравится, с помощью CSS!

Пример

Стиль шрифта "Sofia":

<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
text-shadow: 3px 3px 3px #ababab;
}
</style>
</head>

Включение Эффектов Шрифта

Google также включил различные эффекты шрифта, которые вы можете использовать.

Пример

Добавьте эффект огня к шрифту "София":

<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia&effect=fire">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
}
</style>
</head>
<body>

<h1 class="font-effect-fire">Sofia on Fire</h1>

</body>

Чтобы запросить несколько эффектов шрифта, просто разделите имена эффектов символом конвейера (|), например:

Пример

Добавьте несколько эффектов к шрифту "Sofia":

<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia&effect=neon|outline|emboss|shadow-multiple">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
}
</style>
</head>
<body>

<h1 class="font-effect-neon">Neon Effect</h1>
<h1 class="font-effect-outline">Outline Effect</h1>
<h1 class="font-effect-emboss">Emboss Effect</h1>
<h1 class="font-effect-shadow-multiple">Multiple Shadow Effect</h1>

</body>

Результат:

Свойство font-size (Размер шрифта) задает размер текста.

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

Всегда используйте соответствующие HTML-теги, такие как <h1> - <h6> для заголовков и <p> для абзацев.

Значение размера шрифта может быть абсолютным или относительным.

Абсолютный размер:

• Устанавливает текст в заданный размер
• Не позволяет пользователю изменять размер текста во всех браузерах (плохо по причинам доступности)
• Абсолютный размер полезен, когда известен физический размер вывода

Относительный размер:

• Устанавливает размер относительно окружающих элементов
• Позволяет пользователю изменять размер текста в браузерах

Примечание: Если вы не указываете размер шрифта, размер по умолчанию для обычного текста, такого как абзацы, составляет 16px (16px=1em).

Установите размер шрифта с помощью пикселей

Установка размера текста с помощью пикселей дает вам полный контроль над размером текста:

Пример

h1 {
font-size: 40px;
}

h2 {
font-size: 30px;
}

p {
font-size: 14px;
}

Совет: Если вы используете пиксели, вы все равно можете использовать инструмент масштабирования для изменения размера всей страницы.

Установите размер шрифта с помощью Em

Чтобы позволить пользователям изменять размер текста (в меню браузера), многие разработчики используют em вместо пикселей.

1em равен текущему размеру шрифта. Размер текста по умолчанию в браузерах составляет 16 пикселей. Таким образом, размер по умолчанию 1em составляет 16 пикселей.

Размер можно рассчитать от пикселей до em, используя эту формулу: пиксели/16=em

Пример

h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}

p {
font-size: 0.875em; /* 14px/16=0.875em */
}

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

К сожалению, все еще существует проблема со старыми версиями Internet Explorer. Текст становится больше, чем должен, когда становится больше, и меньше, чем должен, когда становится меньше.

Используйте комбинацию процентов и Em

Решение, которое работает во всех браузерах, заключается в том, чтобы установить размер шрифта по умолчанию в процентах для элемента <body>:

Пример

body {
font-size: 100%;
}

h1 {
font-size: 2.5em;
}

h2 {
font-size: 1.875em;
}

p {
font-size: 0.875em;
}

Наш код теперь отлично работает! Он показывает одинаковый размер текста во всех браузерах и позволяет всем браузерам масштабировать или изменять размер текста!

Адаптивный Размер Шрифта

Размер текста может быть установлен с помощью единицы vw, что означает "ширина просмотра".

Таким образом, размер текста будет соответствовать размеру окна браузера:

<h1 style="font-size:10vw">Привет мир</h1>

Viewport - это размер окна браузера. 1vw = 1% ширины видового экрана. Если видовой экран имеет ширину 50 см, то 1vw равен 0,5 см.

Свойство font-style в основном используется для выделения текста курсивом.

Это свойство имеет три значения:

• нормально - текст отображается нормально
• курсив - Текст показан курсивом
• косой - текст "наклонный" (косой очень похож на курсив, но менее поддерживается)

Пример

p.normal {
font-style: normal;
}

p.italic {
font-style: italic;
}

p.oblique {
font-style: oblique;
}

Вес Шрифта

Свойство font-weight определяет вес шрифта:

Пример

p.normal {
font-weight: normal;
}

p.thick {
font-weight: bold;
}

Вариант шрифта

Свойство font-variant определяет, должен ли текст отображаться шрифтом с маленькой буквы или нет.

В шрифте с маленькими буквами все строчные буквы преобразуются в прописные буквы. Однако преобразованные заглавные буквы отображаются в меньшем размере шрифта, чем оригинальные заглавные буквы в тексте.

Пример

p.normal {
font-variant: normal;
}

p.small {
font-variant: small-caps;
}

Ниже приведены некоторые часто используемые варианты шрифтов, сгруппированные по 5 общим семействам шрифтов:

• Serif
• Sans-serif
• Monospace
• Cursive
• Fantasy

Шрифты с засечками

Шрифты Sans-Serif

Monospace Шрифты

Курсивные Шрифты

Фэнтезийные Шрифты

Веб-безопасные шрифты - это шрифты, которые универсально устанавливаются во всех браузерах и устройствах.

Обратные Шрифты

Тем не менее, нет 100% полностью безопасных веб-шрифтов. Всегда есть вероятность того, что шрифт не найден или не установлен должным образом.

Поэтому очень важно всегда использовать резервные шрифты.

Это означает, что вы должны добавить список аналогичных "резервных шрифтов" в свойство font-family. Если первый шрифт не работает, браузер попробует следующий, следующий и так далее. Всегда заканчивайте список общим именем шрифта.

Пример

Здесь есть три типа шрифтов: Tahoma, Verdana и sans-serif. Второй и третий шрифты являются резервными копиями, если первый не найден.

p {
font-family: Tahoma, Verdana, sans-serif;
}

Лучшие веб-безопасные шрифты для HTML и CSS

Следующий список - лучшие веб-безопасные шрифты для HTML и CSS:

• Ариал (без засечки)
• Вердана (без засечки)
• Тахома (без засечек)
• Trebuchet MS (без засечек)
• Times New Roman (засечка)
• Грузия (засечка)
• Гарамонд (засечка)
• Курьер Новый (монопространство)
• Скрипт Кисти MT (курсив)

Ариал (без засечки)

Arial является наиболее широко используемым шрифтом как для онлайн, так и для печатных СМИ. Arial также является шрифтом по умолчанию в Google Docs.

Arial - один из самых безопасных веб-шрифтов, и он доступен во всех основных операционных системах.

Вердана (без засечки)

Verdana - очень популярный шрифт. Verdana легко читается даже для небольших шрифтов.

Тахома (без засечек)

Шрифт Tahoma имеет меньше места между символами.

Trebuchet MS (без засечек)

Trebuchet MS был разработан Microsoft в 1996 году. Используйте этот шрифт осторожно. Не поддерживается всеми мобильными операционными системами.

Times New Roman (засечки)

Times New Roman - один из самых узнаваемых шрифтов в мире. Он выглядит профессионально и используется во многих газетах и на новостных сайтах. Это также основной шрифт для устройств и приложений Windows.

Georgia (засечки)

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

Garamond (засечки)

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

Courier New(монопространство)

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

Brush Script MT(курсив)

Шрифт Brush Script MT был разработан для имитирования почерка. Он элегантный и утонченный, но его трудно читать. Используйте его осторожно.

Выбор шрифта важен

Выбор правильного шрифта оказывает огромное влияние на то, как читатели воспринимают веб-сайт.

Правильный шрифт может создать сильную идентичность для вашего бренда.

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

Общие Семейства Шрифтов

В CSS есть пять общих семейств шрифтов:

1. Шрифты с засечками имеют небольшой штрих по краям каждой буквы. Они создают ощущение формальности и элегантности.
2. Шрифты без засечек имеют чистые линии (без небольших штрихов). Они создают современный и минималистичный вид.
3. Моноширные шрифты - здесь все буквы имеют одинаковую фиксированную ширину. Они создают механический вид.
4. Курсивные шрифты имитируют человеческий почерк.
5. Фэнтезийные шрифты - это декоративные/игривые шрифты.

Все названия шрифтов принадлежат к одному из общих семейств шрифтов.

Разница между шрифтами Serif и Sans-Serif

Некоторые примеры шрифтов

Свойство семейства шрифтов CSS

В CSS мы используем свойство font-family для указания шрифта текста.

Примечание: Если название шрифта составляет более одного слова, оно должно быть в кавычках, например: "Times New Roman".

Совет: Свойство font-family должно содержать несколько названий шрифтов в качестве "запасного варианта", чтобы обеспечить максимальную совместимость между браузерами/операционными системами. Начните с нужного шрифта и завершите типовым семейством (чтобы браузер мог выбрать аналогичный шрифт в типовом семействе, если другие шрифты недоступны). Названия шрифтов следует разделять запятой.

Пример

Укажите несколько различных шрифтов для трех абзацев:

.p1 {
font-family: "Times New Roman", Times, serif;
}

.p2 {
font-family: Arial, Helvetica, sans-serif;
}

.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}