Евгений

Ссылки CSS

2024-04-13T14:40:43.387Z

С помощью CSS ссылки могут быть стилизованы различными способами.

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

Ссылки могут быть оформлены с использованием любого свойства 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>

Иконки CSS

2024-04-13T14:35:21.699Z

Иконки можно легко добавить на вашу HTML-страницу с помощью библиотеки иконок.

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

Самый простой способ добавить значок на вашу 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>

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

2024-04-13T14:26:01.207Z

Свойство Шрифта CSS

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

Свойство 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; }

Отличные пары шрифтов CSS

2024-04-13T14:24:57.843Z

Отличные сочетания шрифтов необходимы для отличного дизайна.

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

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

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" для текста:

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" для текста:

Шрифты CSS Google

2024-04-13T14:13:45.650Z

Шрифты Google

Если вы не хотите использовать ни один из стандартных шрифтов в 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>

Результат:

Размер шрифта CSS

2024-04-13T14:05:54.509Z

Размер шрифта

Свойство 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 см.

Стиль шрифта CSS

2024-04-13T13:52:54.375Z

Стиль шрифта

Свойство 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; }

Резервные копии CSS-шрифтов

2024-04-13T13:50:00.901Z

Часто используемые варианты шрифтов

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

Serif
Sans-serif
Monospace
Cursive
Fantasy

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

Шрифты Sans-Serif

Monospace Шрифты

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

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

CSS Web Безопасные шрифты

2024-04-13T12:57:27.326Z

Что такое веб-безопасные шрифты?

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

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

Тем не менее, нет 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

2024-04-13T12:47:08.715Z

Выбор правильного шрифта для вашего сайта очень важен!

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

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

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

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

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

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

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

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

Разница между шрифтами 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; }

Евгений

Ссылки CSS

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

Пример

Пример

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

Пример

Цвет фона

Пример

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

Пример

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

Пример

Пример

Иконки CSS

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

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

Пример

Иконки Bootstrap

Пример

Иконки Google

Пример

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

Свойство Шрифта CSS

Пример

Отличные пары шрифтов CSS

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

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

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

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

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

Пример

Georgia и Verdana

Пример

Helvetica и Garamond

Пример

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

Merriweather и Open Sans

Пример

Ubuntu и Lora

Пример

Abril Fatface и Poppins

Пример

Cinzel и Fauna One

Пример

Fjalla One и Libre Baskerville

Пример

Space Mono и Muli

Пример

Spectral и Rubik

Пример

Oswald и Noto Sans

Пример

Шрифты CSS Google

Шрифты Google

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

Пример

Пример

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

Пример

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

Пример

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

Пример

Пример

Размер шрифта CSS

Размер шрифта

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

Пример

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

Пример

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

Пример

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

Стиль шрифта CSS

Стиль шрифта

Пример

Вес Шрифта

Пример

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