ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

W3.CSS Учебник

W3.CSS Учебник W3.CSS Введение W3.CSS Цвета W3.CSS Контейнеры W3.CSS Панели W3.CSS Границы W3.CSS Открытки W3.CSS Шрифты W3.CSS Текст W3.CSS Округлости W3.CSS Внутренние отступы W3.CSS Внешние отступы W3.CSS Отображение W3.CSS Кнопки W3.CSS Примечания W3.CSS Цитаты W3.CSS Оповещения W3.CSS Таблицы W3.CSS Списки W3.CSS Изображения W3.CSS Вводы W3.CSS Значки W3.CSS Ярлыки W3.CSS Иконки W3.CSS Адаптив W3.CSS Макеты W3.CSS Анимация W3.CSS Эффекты W3.CSS Панели W3.CSS Выпадающие W3.CSS Аккордионы W3.CSS Навигация W3.CSS Сайдбар W3.CSS Вкладки W3.CSS Пагинация W3.CSS Прогресс-бары W3.CSS Слайдшоу W3.CSS Модальные окна W3.CSS Всплывающие подсказки W3.CSS Сетка W3.CSS Код W3.CSS Фильтры W3.CSS Тренды W3.CSS Кейс W3.CSS Material-дизайн W3.CSS Валидация W3.CSS Версии W3.CSS Мобильность

W3.CSS Цвета

W3.CSS Классы цветов W3.CSS Цвет Material W3.CSS Цвет Flat UI W3.CSS Цвет Metro UI W3.CSS Цвет Win8 W3.CSS Цвет iOS W3.CSS Библиотеки цветов W3.CSS Цветовые схемы W3.CSS Цветовые темы W3.CSS Генератор цветов

Примеры

W3.CSS Примеры W3.CSS Демо W3.CSS Шаблоны

Справочники

W3.CSS Справочник W3.CSS Загрузки

W3.CSS Уроки для начинающих

W3.CSS Шрифты


Страницы со стилем W3.CSS легко читать!

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

  • В W3.CSS по умолчанию размер шрифта составляет 15 пикселей
  • По умолчанию используется шрифт Verdana с удобным межбуквенным интервалом
  • Межстрочный интервал по умолчанию (1.5) также очень удобен

HTML Заголовки <h1> - <h6>

По умолчанию W3.CSS стилизирует HTML заголовки таким образом:

Пример

<h1>Заголовок 1 (36px)</h1>

<h2>Заголовок 2 (30px)</h2>

<h3>Заголовок 3 (24px)</h3>

<h4>Заголовок 4 (20px)</h4>

<h5>Заголовок 5 (18px)</h5>
<h6>Заголовок 6 (16px)</h6>
Попробуйте сами »

Классы размера шрифта (font-size)

Заголовки должны использоваться как есть: только как заголовки.

В W3.CSS размеры шрифта могут быть установлены с помощью следующих классов w3-size:

Пример

w3-tiny
w3-small
w3-medium (по-умолчанию)
w3-large
w3-xlarge
w3-xxlarge
w3-xxxlarge
w3-jumbo
Попробуйте сами »

Переопределение настроек W3.CSS по умолчанию

Переопределить настройки W3.CSS по умолчанию очень просто.

Есть как минимум три варианта:

  1. Переопределите настройки по умолчанию в разделе <head> веб-страницы
  2. Добавьте ссылку на свой собственный файл CSS после ссылки на файл W3.CSS
  3. Загрузите и измените содержимое файла W3.CSS на свое усмотрение

Переопределить в <head>

h1{font-size:64px;}
h2{font-size:48px;}
h3{font-size:36px;}
h4{font-size:24px;}
h5{font-size:20px;}
h6{font-size:18px;}
Попробуйте сами »

Добавить ссылку на свой собственный файл CSS

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="myStyle.css"> <!-- ссылка на свой файл css -->

Изменить W3.CSS

h1{font-size:36px} h2{font-size:30px} h3{font-size:24px} h4{font-size:20px} h5{font-size:18px} h6{font-size:16px}

Изменение шрифта страницы по умолчанию

В заголовке вашей веб-страницы (или в таблице стилей) после подключения W3.CSS измените стиль html и body:

Пример

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
html, body, h1, h2, h3, h4, h5, h6 {
  font-family: "Comic Sans MS", cursive, sans-serif;
}
</style>
Попробуйте сами »

W3.CSS Внешние шрифты

Making the web beautiful!

С помощью W3.CSS очень легко добавлять новые шрифты на веб-страницу.

  • Очень прост в использовании (только CSS и HTML)
  • Неограниченное использование внешних библиотек шрифтов (например, Google Fonts)
  • Работает во всех современных браузерах

Использование класса шрифтов

Создаём сеть!

В заголовке веб-страницы (или в таблице стилей) создайте класс шрифта:

Пример

.w3-myfont {
  font-family: "Comic Sans MS", cursive, sans-serif;
}

В теле (body) вашей веб-страницы используйте имя класса шрифта:

Пример

<body>
  <p class="w3-myfont">Создаём сеть!</p>
</body>
Попробуйте сами »

Использование внешних шрифтов

В заголовке веб-страницы добавьте внешний шрифт и присвойте шрифту имя класса:

Пример

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">

<style>
.w3-tangerine {
  font-family: 'Tangerine', serif;
}
</style>

В теле (body) веб-страницы используйте имя класса:

Пример

<body>
  <p class="w3-tangerine">Делаем Интернет красивым!</p>
</body>
Попробуйте сами »

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

Создаём сеть!

Пример

<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster">
Попробуйте сами »
Создаём сеть!

Пример

<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster&effect=brick-sign">
Попробуйте сами »
Создаём сеть!

Пример

<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Allerta+Stencil">
Попробуйте сами »

Эффекты шрифта не работают в Internet Explorer 9 и более ранних версиях.

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