Стили текста в html: Стили текста | Основы вёрстки контента


18.05.1976 Facebook Twitter LinkedIn Google+ Разное


Содержание

Стили текста | Основы вёрстки контента

Создание страницы это, в первую очередь, работа с текстом. Каким бы ни был красивым дизайн, но если информацию прочитать трудно или невозможно, то пользователь быстро уйдёт со страницы. CSS даёт широкие возможности для стилизации текста. В этом уроке рассмотрим основные стили, которые возможно применить к тексту. Описать их все в рамках одного урока невозможно и в этом нет необходимости. В процессе получения опыта вы будете узнавать о новых свойствах, но все они базируются на нескольких основных «китах»:

  • Цвет текста;
  • Расположение текста;
  • Отступы от текста;
  • Размер текста.

Цвет текста

Каждый текст на странице имеет свой цвет. Будь то заголовки или кричащий баннер, который рассказывает о скидке. Любой текст имеет цвет. Чтобы управлять им в CSS используется свойство color. С его помощью можно установить любой цвет для разных участков текста. В качестве значения свойство принимает цвет в разных моделях цветового пространства.

Распространённой является модель RGB. Она указывает, сколько красного, зелёного и синего используется в цвете. На первых порах вы можете использовать онлайн-сервисы, которые укажут выбранный цвет в этой модели. Одним из таких сервисов является HTML Colors Codes.

Первое, что настраивают разработчики во время вёрстки макета — цвет основного текста страницы. Так как свойство color является наследуемым, то его можно устанавливать для тега <html> или <body>. С помощью каскадности этот цвет будет применяться ко всему тексту, если не указано иного значения. Выберем неглубокий чёрный цвет, который записывается в модели RGB как #333333.

Интересно: в макетах редко встречается максимально чёрный цвет, который записывается как #000000. Дело в том, что такой цвет не встречается в природе и человеческому глазу непривычен.

body {
  color: #333;
}

Установка цвета текста — непростая задача. Помимо решения дизайнерской задачи и согласования текста с остальными цветовыми решениями, необходимо не забывать про доступность текста. Какой бы цвет ни был выбран, его прочтение должно быть комфортным для пользователя. Для этого текст должен быть контрастным относительно фона, на котором он лежит. Светло-серый текст на белом фоне будет трудно прочитать. Поэтому на белом фоне используют чёрный или близкий к чёрному цвет для основного текста.

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

Для проверки контраста текста можно использовать веб-инспектор Chrome DevTools. Выбрав любой цвет на панели Styles браузер автоматически выведет коэффициент контраста текста. Он обозначен как

Contrast ratio. Если контраст находится в рамках допустимого, то будет отмечен зелёной галочкой. В противном случае будет показан красный круг.

Выравнивание текста

Выравнивание текста является важным способом выделения текста на странице. Нестандартное выравнивание позволяет пользователю быстрее заметить текст. В связке с размером текста и цветом, выравнивание заголовков является общепризнанной практикой на страницах.

Для выравнивания текста используется свойство text-align, которое принимает следующие значения:

  • left — выравнивание текста по левому краю. Это значение устанавливается по умолчанию.
  • center — выравнивание текста по центру.
  • right — выравнивание текста по правому краю.
  • justify — выравнивание текста по ширине. Данное значение выравнивает текст так, чтобы поместить слова строго от начала блока до его конца. При этом возможны изменения размеров пробелов между словами.

Важно: использование значения justify является плохой практикой. Данный приём используется в оформлении книг, где есть возможность отредактировать текст так, чтобы выравнивание по ширине не создавало больших пробелов между словами. В условиях веб-страницы такое почти невозможно.

Свойство text-align также является наследуемым. Установив его для какого-либо блока весь текст внутри него будет выровнен в соответствии со значением свойства.

Насыщенность текста

Используя CSS можно гибко настраивать насыщенность шрифта. Насыщенность используется для выделения важного участка текста и придаёт ему «вес» относительно соседних элементов. Для управления насыщенностью в CSS используется правило

font-weight. Оно принимает следующие значения:

  • Значения от 100 до 900 с шагом 100.
  • lighter — сверхтонкое начертание. Делает текст менее насыщенным, чем текущее значение.
  • normal — значение по умолчанию. Соответствует числовому значению 400.
  • bold — жирное начертание текста. Соответствует числовому значению 700.
  • bolder — сверхжирное начертание. Делает текст насыщеннее, чем текущее значение.

Для многих шрифтов доступны только значения normal и bold. Это связано с тем, сколько создатели шрифта включат различных начертаний.

Размер текста

Управлять размером текста можно с помощью свойства font-size

. Текст с большим размером шрифта первым бросается в глаза, поэтому заголовки, помимо выравнивания по центру, имеют больший размер шрифта.

Сравните заголовки, которые создаются с помощью тегов <h2></h2> и <h3></h3>. Основное их визуальное отличие — размер текста. Помимо встроенных стилей, мы можем самостоятельно устанавливать размер шрифта. Для этого можно использовать единицы измерения пиксели px. В следующих уроках вы узнаете и о других единицах измерения и как с их помощью можно адаптировать контент.

. small-text {
  font-size: 12px;
}

.normal-text {
  font-size: 16px;
}

.big-text {
  font-size: 30px;
}

Свойства текста | htmlbook.ru

С помощью CSS можно определять стиль и вид текста. Аналогично тому, что используется тег <font>, задающий свойства шрифта, но стили обладают большими возможностями и позволяют сократить код HTML.

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

Изменение начертания шрифта и его размера происходит через свойства CSS, которые описаны в табл. 1.

Табл. 1. Атрибуты CSS для управления шрифтами
СвойствоЗначениеОписаниеПример
font-familyимя шрифтаЗадает список шрифтовP {font-family: Arial, serif}
font-stylenormal
italic
oblique
Нормальный шрифт
Курсив
Наклонный шрифт
P {font-style: italic}
font-variantnormal
small-caps
Капитель (особые прописные буквы)P {font-variant: small-caps}
font-weightnormal
lighter
bold
bolder
100–900
Нормальная жирность
Светлое начертание
Полужирный
Жирный
100 — светлый шрифт,
900 — самый жирный
P {font-weight: bold}
font-size normal
pt
px
%
нормальный размер
пункты
пикселы
проценты
font-size: normal
font-size: 12pt
font-size: 12px
font-size: 120%

В примере 1 показано использование параметров при работе со шрифтами.

Пример 1. Задание свойств шрифта с помощью CSS

<!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"> 
   h2 { 
    font-family: Arial, Helvetica, Verdana, sans-serif; /* Гарнитура шрифта */ 
    font-size: 150%; /* Размер текста */ 
    font-weight: lighter; /* Светлое начертание */ 
   }
  </style>
 </head>
 <body>
   <h2>Заголовок</h2>
  <p>Обычный текст</p>
 </body> 
</html>

Ниже приведен результат данного примера (рис. 1).

Рис. 1. Вид текста после применения стилей

В табл. 2 приведены некоторые стилевые параметры для работы с текстом и результат их применения.

Табл. 2. Результат использования различных параметров шрифтов
ПримерПримерПримерПримерПример
font-family: Verdana, sans-serif; font-size: 120%; font-weight: light font-size: large; font-weight: boldfont-family: Arial, sans-serif; font-size: x-small; font-weight: boldfont-variant: small-caps font-style: italic; font-weight: bold

Свойства текста

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

Табл. 3. Свойства CSS для управления видом текста
СвойствоЗначениеОписаниеПример
line-heightnormal
множитель
значение
%
Интерлиньяж (межстрочный интервал)line-height: normal
line-height: 1.5
line-height: 12px
line-height: 120%
text-decoration none
underline
overline
line-through
blink
Убрать все оформление
Подчеркивание
Линия над текстом
Перечеркивание
Мигание текста
text-decoration: none
text-transform none
capitalize
uppercase
lowercase
Убрать все эффекты
Начинать С Прописных
ВСЕ ПРОПИСНЫЕ
все строчные
text-transform: capitalize
text-alignleft
right
center
justify
Выравнивание текстаtext-align: justify
text-indentзначение
%
Отступ первой строкиtext-indent: 15px;
text-indent: 10%

Ниже, в табл. 4 приведены некоторые параметры текста и результат их применения.

Табл. 4. Результат использования различных параметров текста
Пример: и это все о немПример: текст по центруПример: Это не ссылка, а просто текстПример: отступ первой строкиПример: полуторный межстрочный интервал
text-transform: capitalize text-align:centertext-decoration: underlinetext-indent: 20pxline-height: 1.5

CSS стили текста

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

Примеры записи стилей с заданными свойствами

font-family

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

	
font-family : Arial, Gadget, sans-serif;
font-family : Courier New, monospace;
font-family : Impact, fantasy;


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


HTML

<div>
  <div>
    font-family
  </div>
  <div>
    Выбор шрифта
  </div>
</div>


CSS

.box{
    width: 260px;
    margin: 0px auto;
    padding: 3px 20px;
    background-color: #fc0;
}
.box .title,
.box .meaning{
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
}
.box .title{
    font-size: 25px;
    font-weight: bold;
}
. box .meaning{
    font-size: 22px;
}


font-size

Для определения размера шрифта в CSS делается следующая запись:


font-size : 250%;
font-size : 30px;
font-size : 11pt;
font-size : 0.5em;


font-style

Чтобы задать наклонный шрифт или отменить курсивное отображение запись ведётся следующим образом:


font-style : normal;
font-style : italic;


normal – обычное начертание текста

italic – курсивное начертание

oblique – наклонный текст. Отличается от курсива тем, что наклоняет текст, а не выводит соответствующие символы.

font-variant

Стилями CSS можно задать вывод символов в верхнем регистре либо в исходном формате.


font-variant : normal;
font-variant : small-caps;


normal – формат символов остаётся по умолчанию

small-caps – данная опция преобразует все строчные символы как заглавные буквы с уменьшенным размером.

font-weight

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


font-weight : lighter;
font-weight : bold;
font-weight : normal;
font-weight : bolder;


font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;


bold – полужирный шрифт

bolder – жирный шрифт

lighter – светлый шрифт

normal – установка стандартного начертания

100900 – значение насыщенности с шагом через 100

400 – Нормальное начертание шрифта, которое установлено по умолчанию

Пример записи стилей текста в одной строке

		
font : bold italic 22px Times New Roman, serif;
font : bold italic 22px Arial, sans-serif;
font : 12pt/10pt Courier New, monospace;
font : bold italic 110% Parkavenue, cursive;
font : normal small-caps 12px/14px Impact, fantasy;


Учебник CSS.

Стиль текста.

Глава 2

В этой главе пойдет речь о том, что можно сделать с текстом, применяя к элементам HTML содержащие в себе некий текст те или иные свойства CSS.

Ну поехали..

Если Вы помните, из курса HTML, для того что бы выровнять текст, например по центру экрана, мы применяли к тегу содержащему в себе текст атрибут align(выравнивание) и одно из его возможных значений center(по центру)

Запись имела такой вид:

<p align=»center»>текст по центру</p>

В CSS данную задачу берет на себя свойство text-align, которое выравнивает текстовое содержание относительно элемента родителя (например, блока div) или же окна браузера.

text-align (так же как и htmlловский атрибут align) имеет следующие значения:
  • left — Выровнять текст по левому краю элемента (по умолчанию).
  • right — Выровнять текст по правому краю.
  • center — Выровнять текст по центру.
  • justify — Выровнять текст по обоим краям.

Теперь для того чтобы выровнять текст того же параграфа по центру следует писать так:

<p>текст по центру </p>

— это в этом случае если мы, с помощью атрибута style, внедряем CSS непосредственно в HTML тег.

А вот в примере ниже используется тег <style> в заголовке документа:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Выравнивание текста</title>
<style type=»text/css»>
h2 { text-align: center }
p { text-align: justify }
</style>
</head>
<body>
<h2>Всё о слонах</h2>
<p>Слон — самое крупное млекопитающее на нашей планете! Самый большой слон из когда-либо живущих на Земле был зарегистрирован в Анголе в 1956 году. Этот самец весил около 12 тон, а в высоту достигал 4,2 метра, что на метр выше среднего Африканского слона.</p>
<p>Слоны являются королевским символом Азиатской культуры и известны своей отличной памятью и высоким интеллектом. Аристотель однажды сказал, что слон — «животное, которое превосходит всех других в остроумии и интеллекте».</p>
</body>
</html>

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

Возможные значения:

  • blink — Текст будет мигать.
  • line-through — Делает текст перечеркнутым.
  • overline — Надчёркивание текста.
  • underline — Подчеркивание текста.
  • none — Текст без оформления.

Пишется так:

<a href=»index. html»>Ссылка без подчёркивания</a>

Пример:

Файл mystyle.css

h2 {text-align: center}
h4 {text-align: left; text-decoration: underline}
a {text-decoration: underline}
a:hover {text-decoration:none}
p {text-align: justify}


Файл index.html

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Оформление текста</title>
<link rel=»stylesheet» href=»mystyle.css» type=»text/css»>
</head>
<body>
<h4>Меню:</h4>
<a href=»index.html»>Всё о слонах.</a><br>
<a href=»elephant.html»>Купить слона.</a>
<hr>
<h2>Всё о слонах</h2>
<p> Слон — самое крупное … … …</p>
<p>Слоны являются … … …</p>
</body>
</html>

Обратите внимание на внешний файл CSS в нем мы «декорировали» ссылку элемент <a>, причем делали это два раза первый раз a {text-decoration: underline} сделали её подчёркнутой, хотя можно было этого и не делать, так как тег <a> подчёркнут по умолчанию, а второй раз использовали так называемый псевдокласс hover и запретили подчеркивание a:hover {text-decoration:none}

Данный псевдокласс указывает на то, что применять к нему стилевое описание стоит лишь в том случае если пользователь навел курсор на этот элемент. Так если в примере навести курсор на одну из ссылок в меню то подчеркивание исчезнет, что создаёт определенный динамический эффект.. меню становиться «живым».

Впрочем, мы немного забежали вперёд.. о псевдоклассах речь пойдёт в отдельной главе.

Свойство text-indent — задаёт отступ первой строки в текстовом блоке с левой стороны, проще говоря делает «красную строку».

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

В примере ниже расстояние отступа от левого края задаётся в пикселях (px):

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Красная строка</title>
<style type=»text/css»>
h2 {text-align: center}
p {text-align: justify; text-indent: 20px}
</style>
</head>
<body>
<h2>Всё о слонах</h2>
<p>Слон — самое крупное млекопитающее на нашей планете! Самый большой слон из когда-либо живущих на Земле был зарегистрирован в Анголе в 1956 году. Этот самец весил около 12 тон, а в высоту достигал 4,2 метра, что на метр выше среднего Африканского слона.</p>
<p>Слоны являются королевским символом Азиатской культуры и известны своей отличной памятью и высоким интеллектом. Аристотель однажды сказал, что слон — «животное, которое превосходит всех других в остроумии и интеллекте».</p>
</body>
</html>

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

Значения:

  • none — Текст отображается без каких-либо изменений.(по умолчанию)
  • capitalize — Каждое слово в тексте отображается с заглавного символа.
  • lowercase — Все символы преобразуются в нижний регистр.
  • uppercase — Все символы преобразуются в верхний регистр.

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Трансформация текста</title>
</head>
<body>
<p>союз советских социалистических республик</p>
<p>СССР ссср</p>
<p>ссср СССР</p>
</body>
</html>

Вертикальное выравнивание текста в строке устанавливает свойство vertical-align

Возможные значения свойства vertical-align:

  • baseline — Выравнивает базовую линию элемента по базовой линии родителя.
  • bottom — Выравнивает элемент по нижней части строки.
  • middle — Выравнивает средину элемента по базовой линии родителя и прибавляет половину высоты родительского элемента.
  • sub — Нижний индекс (размер шрифта не меняется).
  • super — Верхний индекс (размер шрифта не меняется).
  • text-bottom — Нижняя граница элемента выравнивается по нижнему краю строки.
  • text-top — Верхняя граница элемента выравнивается по верхнему краю строки.
  • top — Выравнивает элемент по верхней части строки.

Базовая линия — это линия, на которой располагаются «сидят» символы в текстовой строке, Например буква «А» сидит прямо на этой линии, а вот строчная буква «у» сидит на ней же, но свесив ноги..

Взгляните на рисунок с разметкой строки:

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

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4. 01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Вертикальное выравнивание текста</title>
</head>
<body>
<font size=»+3″>А и Б </font>
<span>сидели на трубе </span>
<span>А упало </span>
<span>Б пропало.. </span>
<span>что осталось на трубе?</span>
<hr>
формула воды: H<span>2</span>O
<hr>
<span>н</span>
<span>а</span>
<span>и</span>
<span>с</span>
<span>к</span>
<span>о</span>
<span>с</span>
<span>о</span>
<span>к</span>
</body>
</html>

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

Свойство white-space имитирует работу тега <pre>, определяя показывать или нет пробелы между символов, если таковых больше чем один, а так же разрешает или запрещает перенос строки.

Может иметь следующие значения:

  • normal — текст выводится как обычно (лишние пробелы убираются), переносы строк определяются автоматически. (по умолчанию)
  • nowrap — запрещает автоматический перенос строки.
  • pre — показывает текст в том виде в котором он был набран. пробелы и переносы строки не удаляются.

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Пробелы и перенос строки</title>
</head>
<body>
<p>
Слон.

Дали туфельки слону.
Взял он туфельку одну
И сказал: — Нужны пошире,
И не две, а все четыре!

С. Я. Маршак.
</p>
<hr>
<p>
Это длинный предлинный текст, который вряд ли полностью поместится в одной строчке, по умолчанию в нужном месте, браузер перенес бы его на следующую строку, однако мы принудительно запретили это делать, с помощью значения nowrap свойства white-space. Так что теперь, по всей вероятности, в окне браузера появиться горизонтальная полоса прокрутки.. и зачем, спрашивается, мы это сделали?
</p>
</body>
</html>

При использовании nowrap текст в нужном месте можно переносить на следующую строку используя тег <br>

Свойство word-spacing задаёт расстояние между словами (группами символов не разделенными пробелом) в строке.

Значения:

  • normal — Нормальное расстояние. (по умолчанию)
  • px — Расстояние задаётся в пикселях или любых других единицах измерения принятых в CSS.

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Расстояние между словами</title>
</head>
<body>
<p align=»left»>Расстояние между словами равно десяти пикселям</p>
<p align=»left»>Расстояние между словами может иметь отрицательное значение</p>
</body>
</html>

А вот свойство letter-spacing определяет расстояние между символами в тексте и так же как и может word-spacing быть задано следующими значениями:

  • normal — Нормальное расстояние. (по умолчанию)
  • px — Расстояние задаётся в пикселях или любых других единицах измерения принятых в CSS.

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Расстояние между символами</title>
</head>
<body>
<p>Расстояние между буковками равно пяти пикселям</p>
<p>А здесь буквы, из за отрицательного значения, будут наплывать друг на друга</p>
</body>
</html>

Интерлиньяж — это расстояние между строками текста.

Расстояние между строками текста можно задать используя свойство line-height, сделать это можно следующими способами:

  • normal — Норма (по умолчанию).
  • % — Проценты. за сто процентов берется высота шрифта
  • 0.5 — Множитель. Может быть использовано любое число больше ноля. Так, например множитель 0.5 будет равняться половинному межстрочному расстоянию, а 2 — двойному.
  • px — Пиксели и любые другие единицы измерения, принятые в CSS.

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Интерлиньяж</title>
</head>
<body>
<div>
строка первая <br> строка вторая <br> строка третья <br> строка четвертая <br> строка пятая
</div>
<hr>
<div>
строка первая <br> строка вторая <br> строка третья <br> строка четвертая <br> строка пятая
</div>
<hr>
<div>
строка первая <br> строка вторая <br> строка третья <br> строка четвертая <br> строка пятая
</div>
</body>
</html>
  • При декорировании текста, свойство — text-decoration, будьте благоразумны используя подчеркивание текста это может ввести в заблуждение посетителя страницы, он может подумать, что данный текст является ссылкой.

  • А Вам точно нужно использовать значение nowrap свойства white-space, запрет переноса строки? Появление горизонтальной полосы прокрутки мало кого вдохновляет..

  • Используя псевдокласс hover в сочетании с различными элементами и их возможными CSS свойствами можно добиться весьма интересных эффектов.



Учебник HTML 5. Статья «Стили»

В этой статье мы с Вами познакомимся еще с одним глобальным атрибутом style, узнаем что такое каскадные таблицы стилей, что такое CSS стиль и научимся задавать его для HTML элементов.


К этой статье у вас уже есть четкое понимание, что язык гипертекстовой разметки используется, чтобы описать содержимое веб-страницы. Путешествуя по сети интернет, мы замечаем, что страницы выглядят по разному: цветовая гамма, шрифты, различный междустрочный интервал, фоновые изображения и даже анимация. Не откладывая в дальний ящик сразу хочу Вам объяснить, что на то как эти страницы будут выглядеть, влияют, используемые каскадные таблицы стилей (Cascading Style SheetsCSS). В рамках учебника HTML мы с Вами поверхностно рассмотрим использование каскадных таблиц стилей, подробно изучить их после этого курса вы можете в разделе CSS учебник.


Что такое стиль? Стиль устанавливает внешний вид какого-либо элемента страницы, т.е. грубо говоря, это правило, которое сообщает браузеру как форматировать определенный элемент (например, измененить фон или цвет шрифта).

Каждый элемент HTML имеет стиль по умолчанию. Изменение стиля по умолчанию в HTML элементе может быть произведено с использованием глобального атрибута style. Атрибут задает встроенный (inline) CSS стиль для элемента. Встроенный CSS используется, чтобы применить уникальный стиль для одного HTML элемента. В рамках изучения HTML мы рассмотрим только использование встроенного CSS.

Глобальный атрибут style имеет следующий синтаксис:

style = "property:value", где property это CSS свойство, а value его значение. 

Допускается использование нескольких CSS свойств и значений, при этом их необходимо разделять между собой точкой с запятой.

style = "property:value; property:value; property:value" 

В этой статье мы подробно рассмотрим только один пример, но от Вас потребуется максимально внимательно к нему отнестись.

В следующем примере мы используем целых пять новых для вас CSS свойств и с ипользованием глобального атрибута style применим их к различным, уже знакомым нам HTML элементам:

<!DOCTYPE html>
<html style = "text-align: center"> <!-- выравниваем текст по центру во всем документе --> 
	<head>
		<title>Пример использования глобального атрибута style</title>
	</head>
	<body style = "background-color: khaki"> <!-- задаем цвет заднего фона для элемента --> 
		<p style = "color: brown; font-size: 26px">А.С. Пушкин</p> <!-- задаем цвет текста коричневый, размер шрифта 26 пикселей --> 
		<pre style = "font-family: courier"> <!-- задаем шрифт для элемента --> 
			Я помню чудное мгновенье:
			Передо мной явилась ты, 
			Как мимолетное виденье, 
			Как гений чистой красоты. 
		</pre>
	</body>
</html>

Давайте разберем, какие стили к чему были добавлены:

  1. Для тега <html> установили выравнивание текста по центру, для этого мы использовали CSS свойство text-align со значением center. Обращаю внимание, что выравнивание по центру распостраняется на все элементы в документе, аналогичный эффект можно было достичь задав этот стиль для элемента <body>. Изменяя значения свойства text-align вы можете также выровнять текст как по левому (left) и правому (right) краю, так и по ширине (justify).
  2. Для всего видимого содержимого (тег <body>) с использованием CSS свойства background-color мы задали цвет заднего фона khaki. Цвет khaki является одним из предопределенных цветов (стандартное имя цвета). Более подробную информацию по использованию цветов вы получите в следующей статье «HTML цвета».
  3. Для абзаца (тег <p>), который содержит имя автора стихотворения, мы применили два CSS свойства, первое color задает цвет текста (стандартное имя цвета brown — коричневый), второе font-size устанавливает размер текста. Мы установили размер текста равный 26 пикселям. Применение пикселей широко распространено при создании веб-страниц, так как эти единицы измерения обеспечивают совместимые параметры размера шрифта на различных типах мониторов и не зависят от настроек браузера. Пиксель соответствует одному пикселю, который указан в разрешении экрана пользователя.
  4. Для элемента <pre>, который определяет предварительно отформатированный текст, мы, с использованием CSS свойства font-family установили шрифт содержимого — Courier (компьютерный шрифт, относящийся к классу моноширинных, все знаки (кегельные площадки), которого имеют одинаковую ширину).

Рис 16a Пример использования встроенных стилей.

Не расстраивайтесь если Вам на данном этапе, не понятны какие-то моменты, мы более подробно рассмотрим данный материал в следующих статьях и при изучении CSS. Главное не бросать начатое и как говорил известный в наше время экспонат: «Учиться, учиться и ещё раз учиться».



Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

  • Для выполнения задания вам понадобится скачать архив с текстовым файлом:

  • Используя полученные знания составьте следующую HTML страницу:

Практическое задание № 10.

Подсказка: в этом примере используются следующие цвета: white (белый), khaki (хаки), gray (серый). Для текста стихотворения используется шрифт Verdana.

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


как не надо • Не дублируйте стили текста

Не нужно задавать разным элементам одинаковые стили текста.

Почему? #

Это не имеет смысла и засоряет код. Воспользуйтесь наследованием: задайте стили для текста родительскому элементу, и дочерние элементы сами их унаследуют, вам не нужно для этого ничего делать.

Как это увидеть? #

В браузере в инструментах разработчика:

Все перечёркнутые свойства были унаследованы, но затем перезаписаны точно такими же. Так делать не надо.
А как надо? #

Стили текста достаточно задать один раз в body, и они автоматом применятся ко всем элементам страницы.

  • Плохо

    BODY {
      background: #FFF;
    }
    .page-main {
      font-family: Georgia, serif;
      font-size: 16px;
      line-height: 1.4;
      color: #333;
    }
    .news {
      font-family: Georgia, serif;
      font-size: 16px;
      line-height: 1.4;
    }
    .news-item {
      font-family: Georgia, serif;
      font-size: 16px;
      line-height: 1.4;
      color: #333;
    }
    .news-item__title {
      font-family: Georgia, serif;
      font-size: 20px;
      line-height: 1.4;
      color: #333;
    }
    .news-item__content {
      font-family: Georgia, serif;
      font-size: 16px;
      line-height: 1.4;
      color: #000;
    }
  • Хорошо

    BODY {
      background: #FFF;
      font-family: Georgia, serif;
      font-size: 16px;
      line-height: 1. 4;
      color: #333;
    }
    .news-item__title {
      font-size: 20px;
    }
    .news-item__content {
      color: #000;
    }

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

Как проверить, что всё работает как надо? Там же, в инструментах разработчика:

На скриншоте видно, что стили текста унаследовались из body, а цвет фона — нет (он показан бледным)

Ещё один способ:

Во вкладке Computed поищите конкретные свойства или посмотрите в Rendered Fonts — там показывается какой шрифт в итоге применился к тексту.Там же можно проверить применился ли ваш красивый кастомный шрифт. Не смотря на то, что кастомный MyFancyFont объявлен в списке первым, текст в итоге отрисовался запасным — Georgia. Значит надо проверить правильно ли подключен кастомный шрифт.

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

Подводные камни #

Стили текста для инпутов и кнопок задаются браузером:

Стили в body перечеркнуты, потому что перезаписаны стилями, который задаёт браузер — они отображаются на сером фоне, а в качестве источника указано user agent stylesheet.В Rendered Fonts что-то совсем не то, что нужно.

Это легко поправить, задав наследование явно:

input, textarea, select, button {
  font: inherit;
}

Если нужно наследовать только семейство шрифтов, вместо font: inherit; задайте font-family: inherit;

Проверяем в Computed: Georgia.Там же можно увидеть что чем перезаписалось.

Итого

  • Не дублируйте стили текста, они наследуются.
  • Браузер перезаписывает стили для инпутов и кнопок, пропишите явное наследование.

Свойства CSS для работы с текстом

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

Семьдесят процентов успеха в web-дизайне при создании сайта — это умение управлять текстом и шрифтами. Пользователей интересует текстовое наполнение сайта и то, с какой легкостью читается контент, влияет на длительность пребывания пользователя на сайте. И вернется ли он еще?

Для этого необходимо уметь правильно выбирать шрифты, грамотно их совмещать, а так же правильно управлять самим текстом.

text-indent — абзац с «красной строки», назначить любому абзацу отступ

letter-spacing — регулируем расстояние между буквами в слове (можно увеличить или уменьшить)

word-spacing — регулируем расстояние между словами в предложении

text-decoration — подчеркивание, зачеркивание, надчеркивание текста

text-align — выравнивание текста

line-height — расстояние между строками в тексте (но не меньше величины текста)

text-transform — различные изменения в тексте

Самое используемое свойство css, связанное с текстом, это выравнивание текста. Например, текст страницы, которую вы сейчас читаете, выровнен по левому краю.

В html для выравнивания текста применяли атрибут align.

В CSS тоже есть свойство, которое отвечает за выравнивание текста — text-align. Это свойство может принимать четыре значения:

left — выравнивание текста по левому краю (по умолчанию)

right — выравнивание текста по правому краю

center — выравнивание текста по центру

justify — выравнивание текста по левому и правому краю (растягивание текста)

Давайте в нашем CSS-файле пропишем новый стиль для работы с текстом. Пусть это будет стиль text.

Пример:

.text {

text-align:right;

}


Если в html-коде страницы прописать какому-нибудь абзацу этот стиль, то текст этого абзаца будет выровнен по правому краю.

Пример:

<p>Текст абзаца</p>

 

Следующее свойство CSS — отступ, так называемая «красная строка».

text-indent — свойство, отвечающее за написание абзаца с «красной строки». В значении этого свойства прописываем величину отступа в пикселях или других единицах измерения.

Пример:

.text {

text-align:left;

text-indent:30px;

}

 

Далее рассмотрим свойство css

text-decoration:line-through; — зачеркивание текста

Это свойство применяется, например, при написании цен. При изменении цены старое значение зачеркиваем и прописываем новое.

Но как же нам прописать это свойство одному слову из текста, а не всему абзацу. Для этого будем использовать тег <span>. Сам по себе этот тег никаких изменений в тексте не производит, но если ему прописать какой-либо стиль… Вот для этого и необходим этот тег — для придания какого-либо стиля отдельному объекту.

Давайте создадим новый стиль (например — cherta) и пропишем ему это свойство:

Пример:

. cherta {

text-decoration:line-through;

}

Теперь в абзаце зачеркнем любое слово:

<p>Цена: <span>150руб</span>120руб</p>

 

Изучим следующее свойство css — text-transform. Это свойство позволяет проделывать абзацам некоторые трансформации.

В каждом слове абзаца первую букву можно сделать заглавной, можно сделать весь текст абзаца заглавными буквами или прописными. И все это без ручного прописывания в html-коде.

Значения свойства text-transform:

capitalize — первая буква каждого слова абзаца будет заглавной

uppercase — весь текст будет написан заглавными буквами

lowercase — весь текст будет написан прописными буквами

Создадим новый стиль со свойством text-transform


Пример:

.tr {

text-transform: capitalize;

}

Пропишем абзацу этот стиль:

<p>Первая Буква Каждого Слова Абзаца — Заглавная</p>


Можно изменять расстояние между словами в тексте. Для этого применяем свойство css:

word-spacing — величина расстояния между словами в тексте

Пример:

.tr {

text-transform: capitalize;

word-spacing: 10px;

}


Можно изменять расстояние между буквами в словах применяя свойство:

letter-spacing — величина расстояния между буквами в словах

Пример:

.tr {

text-transform: capitalize;

word-spacing: 10px;

letter-spacing: 4px;

}


И последнее свойство css, которое мы изучим, свойство применяемое для изменения расстояния между строк в тексте. Это свойство:

line-height — величина расстояния между строками в тексте

Расстояние между строками — это не расстояние от нижнего края верхней строки до верхнего края нижней строки. Здесь учитывается и высота букв, так что это расстояние между верхними (или нижними) краями строк. Имейте это ввиду.

Пример:

.tr {

text-transform: capitalize;

word-spacing: 10px;

letter-spacing: 4px;

line-height: 25px;

}

Как изменить шрифт в HTML

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

Например, если в цветовой схеме вы предпочитаете темно-серый, а не черный, вам нужно изменить цвет шрифта по умолчанию для текста. Если вы работаете в СМИ, вы можете выбрать шрифт без засечек, который считается самым простым для чтения типографикой.Но если вы работаете в творческой сфере, вы можете выбрать декоративный шрифт, такой как Morris Troy. Это всего лишь несколько причин, по которым вы можете захотеть использовать шрифт на своем веб-сайте.

Давайте посмотрим, как вы можете изменить шрифт на своем сайте с помощью небольшого кода. Мы покроем:

Как изменить тип шрифта в HTML

Чтобы изменить тип шрифта в HTML, используйте свойство CSS font-family. Установите для него нужное значение и поместите его в атрибут стиля.Затем добавьте этот атрибут стиля к элементу HTML, например к абзацу, заголовку, кнопке или тегу span.

Вот как вы используете встроенный CSS. Встроенный CSS означает, что ваш HTML и CSS будут помещены вместе в основной раздел вашего HTML-документа. Итак, технически вы будете менять шрифт «в HTML».

Раньше можно было просто использовать тег font для изменения стиля текста в HTML. Допустим, вы хотите изменить шрифт на Arial размером 20 пикселей и красивого оранжевого цвета. Вы бы написали следующую строку HTML:

  
Ваш текст здесь.

Однако этот тег шрифта устарел еще в 1998 году, поэтому он не работает с последней версией HTML, HTML5. Он был заменен гораздо более эффективным способом изменения внешнего вида текста, а именно CSS. Форматирование текста CSS — это более легкая и гибкая альтернатива тегу шрифта HTML, и научиться этому несложно.

Давайте перепишем приведенный выше пример, используя CSS, чтобы изменить тип шрифта абзаца. Важно отметить, что я использую CodePen, который использует шрифт Times New Roman по умолчанию.Я собираюсь добавить атрибут стиля к первому элементу абзаца, что означает, что стиль будет применен только к этому абзацу. Другой абзац и заголовки на странице останутся в формате Times New Roman.

Вот HTML со встроенным CSS:

 
 

 

   

Как изменить тип шрифта в HTML [встроенный CSS]

Это фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст.Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст.

Объяснение

Поскольку я использую редактор CodePen, шрифт по умолчанию — Times New Roman. Это означает, что изменение шрифта абзаца потребует от меня использования атрибута стиля, который содержит свойство семейства шрифтов CSS, установленное на «Arial». Другие элементы на странице не затрагиваются встроенным CSS и поэтому остаются шрифтом Times New Roman.

Вот результат:

См. Pen oNBMjeB Кристины Перриконе (@hubspot) на CodePen.

Хотя встроенный CSS идеально подходит для изменения одного элемента на странице, вместо встроенного CSS рекомендуется использовать другие стили CSS. Например, внутренний CSS можно поместить в раздел заголовка HTML-документа для стилизации нескольких элементов на странице.

Допустим, я хочу изменить шрифт каждого элемента абзаца на Arial.Затем я мог бы использовать селектор CSS, чтобы настроить таргетинг на все абзацы и поместить его в раздел заголовка страницы.

Вот CSS:

 
 

 

   р {

 семейство шрифтов: Arial;

 }

 

Вот HTML:

 
 

 

   

Как изменить тип шрифта в HTML [внутренний CSS]

Это фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст.Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст.

Объяснение

Поскольку я использую редактор CodePen, шрифт по умолчанию — Times New Roman. Это означает, что для изменения шрифта всех абзацев на странице мне потребуется использовать селектор типа CSS и установить для свойства CSS font-family значение «Arial. " Заголовки на странице останутся в формате Times New Roman.

Вот результат:

См. Pen GRrBpyQ Кристины Перриконе (@hubspot) на CodePen.

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

Как изменить размер шрифта в HTML

Чтобы изменить размер шрифта в HTML, используйте свойство CSS font-size. Установите для него нужное значение и поместите его в атрибут стиля.Затем добавьте этот атрибут стиля к элементу HTML, например к абзацу, заголовку, кнопке или тегу span.

Чтобы продолжить переписывать первый пример, в котором использовался устаревший тег font, давайте изменим размер шрифта абзаца на 20 пикселей с помощью CSS. В этом примере я по-прежнему буду использовать CodePen, но буду загружать на страницу Bootstrap CSS. Это означает, что в дополнение к типу шрифта по умолчанию Helvetica размер шрифта по умолчанию для абзацев будет 16 пикселей, заголовок 2 будет 32 пикселя, а заголовок 3 будет 28 пикселей.

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

Вот HTML со встроенным CSS:

 
 

 

   

Как изменить размер шрифта в HTML [встроенный CSS]

Это фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст.Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст.

Объяснение

Я использую редактор CodePen, но загружаю BootstrapCDN, поэтому размер шрифта по умолчанию для основного текста и абзацев — 16 пикселей, h3 — 32 пикселя, а h4 — 28 пикселей. Шрифт по умолчанию также Helvetica. Это означает, что изменение размера первого абзаца потребует от меня использования атрибута стиля, который содержит свойство размера шрифта CSS, установленное на «20px." Другие элементы на странице не затрагиваются встроенным CSS и поэтому сохраняют свои размеры по умолчанию.

 

Вот результат:

См. Pen How to Change Font Size in HTML [Inline CSS] Кристины Перриконе (@hubspot) на CodePen.

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

Вот CSS:

 
 

 

   р {

 размер шрифта: 20 пикселей;

 }

 

Вот HTML:

 
 

 

   

Как изменить размер шрифта в HTML [внутренний CSS]

Это фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст.Это больше фиктивный текст.

Объяснение

Я использую редактор CodePen, но загружаю BootstrapCDN, поэтому размер шрифта по умолчанию для основного текста и абзацев — 16 пикселей, h3 — 32 пикселя, а h4 — 28 пикселей. Шрифт по умолчанию также Arial. Это означает, что для изменения размера всех абзацев на странице мне потребуется использовать селектор типа CSS и установить для свойства размера шрифта CSS значение «20 пикселей». Заголовки на странице будут иметь размеры по умолчанию.

Вот результат:

См. Pen How to Change Font Size in HTML [Internal CSS] Кристины Перриконе (@hubspot) на CodePen.

Изменить размер шрифта в пределах одного абзаца

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

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

Вот HTML со встроенным CSS:

 
 

 

   

Как изменить размер шрифта в одном абзаце [встроенный CSS]

Это фиктивный текст. Это больше фиктивный текст. Это более крупный текст. Это более фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст.

 

Объяснение

Я использую редактор CodePen, но загружаю BootstrapCDN, поэтому размер шрифта абзацев по умолчанию составляет 16 пикселей. Чтобы изменить размер шрифта текста внутри абзаца, я заключу текст в теги span. Затем я добавлю атрибут стиля, который содержит свойство размера шрифта CSS, установленное на значение, отличное от 16 пикселей. В этом примере установлено значение 22px.

 

Вот результат:

См. статью «Как изменить размер шрифта в одном абзаце [встроенный CSS]» Кристины Перриконе (@hubspot) на CodePen.

Если я хочу изменить размер шрифта абзаца и текста в этом абзаце на два разных размера, мне лучше использовать внутренний CSS. Я бы по-прежнему заключал текст, размер которого я хотел изменить, в теги . Затем я бы добавил атрибут ID как к элементу абзаца, так и к элементу span. Используя соответствующие селекторы идентификаторов, я бы установил для элементов абзаца и диапазона два разных размера.

Вот CSS:

 
 

 

   #больше {

  размер шрифта: 18 пикселей;

}

#меньше {

  размер шрифта: 14 пикселей;

}

 

Вот HTML:

 
 

 

   

Как изменить размер шрифта в одном и том же абзаце [внутренний CSS]

Это фиктивный текст.Это больше фиктивный текст. Это меньший текст.  Это более фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст.

 

Объяснение

Я использую редактор CodePen, но загружаю BootstrapCDN, поэтому размер шрифта абзацев по умолчанию составляет 16 пикселей. Чтобы изменить размер шрифта абзаца и текста внутри абзаца, я заключу текст в теги span и добавлю атрибуты ID как к абзацу, так и к элементу span.Затем я буду использовать селекторы идентификаторов и устанавливать для них разные размеры шрифта в разделе заголовка страницы.

 

Вот результат:

См. «Путь к изменению размера шрифта в одном и том же абзаце [внутренний CSS]» Кристины Перриконе (@hubspot) на CodePen.

Подробнее о свойствах и значениях, которые можно использовать для изменения размера текста, см. в статье Как изменить размер шрифта в CSS.

Как изменить цвет шрифта в HTML

Чтобы изменить цвет шрифта в HTML, используйте свойство цвета CSS.Установите для него нужное значение и поместите его в атрибут стиля. Затем добавьте этот атрибут стиля к элементу HTML, такому как абзац, заголовок, кнопка или тег span.

Используя тот же пример, что и выше, давайте теперь изменим цвет шрифта абзаца на оранжевый Lorax (шестнадцатеричный код цвета #FF7A59) с помощью CSS. В этом примере я буду использовать редактор CodePen и не буду загружать Bootstrap CSS. Но если вы хотите использовать этот фреймворк, цвет шрифта по умолчанию тот же (т.е. черный), как и сам процесс.

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

Вот HTML со встроенным CSS:

 
 

 

   

Как изменить цвет шрифта в HTML [встроенный CSS]

Это фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст.Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст.

Объяснение

Поскольку я использую редактор CodePen, цвет шрифта по умолчанию — черный. (Обычно это так, независимо от того, какой инструмент или инфраструктуру вы используете для создания своих веб-проектов.) Это означает, что для изменения цвета абзаца мне потребуется использовать атрибут стиля, который содержит свойство цвета CSS, установленное на шестнадцатеричный цвет. код #FF7A59.Другие элементы на странице не затрагиваются встроенным CSS и поэтому остаются черными.

 

Вот результат:

См. Pen How to Change Font Color in HTML [Inline CSS] Кристины Перриконе (@hubspot) на CodePen.

Предположим, я хочу изменить цвет каждого элемента абзаца на темно-бордовый. Затем я мог бы использовать селектор CSS, чтобы настроить таргетинг на все абзацы и поместить его в раздел заголовка страницы.

Вот CSS:

 
 

 

   р {

 цвет: #FF7A59;

 }

Вот HTML:

 
 

 

   

Как изменить цвет шрифта в HTML [внутренний CSS]

Это фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст.

Объяснение

Поскольку я использую редактор CodePen, цвет шрифта по умолчанию — черный. Это означает, что для изменения цвета всех абзацев на странице мне потребуется использовать селектор типа CSS и установить для свойства цвета CSS шестнадцатеричный код цвета для оранжевого цвета (#FF7A59).Заголовки на странице останутся черными.

 

Вот результат:

См. Pen How to Change Font Color in HTML [Internal CSS] Кристины Перриконе (@hubspot) на CodePen.

Чтобы узнать, как изменить цвет фона текста, прочитайте статью Как изменить цвет текста и фона в CSS.

Как изменить шрифт в Div в HTML

Изменение шрифта в div ничем не отличается от изменения шрифта в абзаце или элементе span.

«div» в HTML — это просто элемент, который может разделить вашу веб-страницу на разделы, чтобы вы могли настроить для них уникальные свойства CSS.

Если вы хотите изменить тип шрифта, размер и цвет текста на странице, вы можете заключить его в теги div и использовать селектор CSS для стилизации этого элемента. Давайте рассмотрим пример:

Вот CSS:

 
 

 

   #пример {

  семейство шрифтов: Arial;

  размер шрифта: 20 пикселей;

  цвет: #FF7A59;

}

 

Вот HTML:

 
 

 

   

Как изменить шрифт в Div в HTML [Внутренний CSS]

 

Это фиктивный текст. Это больше фиктивный текст. Это меньший текст. Это более фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это скорее фиктивный текст.

 

Объяснение

Я использую редактор CodePen, поэтому тип, размер и цвет шрифта по умолчанию — Times New Roman, 16 пикселей и черный. Чтобы изменить все эти свойства раздела текста, я мог бы обернуть текст в div и добавить к элементу атрибут ID.Затем я могу использовать селектор идентификаторов и установить свойства font-family, font-size и font-color в разделе заголовка страницы.

 

Вот результат:

См. Pen How to Change Font in Div in HTML [Internal CSS] Кристины Перриконе (@hubspot) на CodePen.

Изменение шрифта с помощью HTML и CSS

Имея базовые знания веб-дизайна, вы можете изменить тип, размер и цвет шрифта. Это может позволить вам настроить каждую деталь на вашем сайте и сделать ваш контент более читабельным.Если вы работаете с платформой Bootstrap, ознакомьтесь с дополнительными способами переопределения настроек по умолчанию в Bootstrap CSS для создания действительно уникального веб-сайта.

Примечание редактора. Этот пост был первоначально опубликован в июле 2020 г. и обновлен для полноты картины.

Стиль шрифта HTML — как изменить цвет и размер текста с помощью тега HTML Вы хотите, чтобы этот текст выглядел хорошо.

И для этого вам нужно изменить их внешний вид с помощью свойств CSS color и font-size .

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

Основной

размер шрифта Синтаксис
  селектор {
     размер шрифта: значение;
     цвет: значение;
}
  

Как изменить размер и цвет текста в теге HTML

Вы можете изменить цвет и размер текста прямо внутри его тега с помощью свойств цвета и размера шрифта. Это известно как встроенный CSS. Вы делаете это с атрибутом стиля в HTML.

В приведенном ниже HTML-коде мы изменим цвет и размер текста freeCodeCamp.

   

freeCodeCamp

  корпус {
    дисплей: гибкий;
    выравнивание элементов: по центру;
    выравнивание содержимого: по центру;
    высота: 100вх;
}
  

В браузере выглядит так:

Чтобы изменить размер текста, вы будете использовать атрибут стиля, а затем установите значение с помощью свойства font-size следующим образом:

   

freeCodeCamp

Текст теперь выглядит в браузере так:

Если вам интересно, что такое 4rem, это единица измерения.Это то же самое, что и 64 пикселя, потому что 16px составляют 1rem, если только вы не измените корневой размер шрифта ( html ) на другое значение.

Чтобы изменить цвет текста, вы можете использовать атрибут стиля, а затем установить значение с помощью свойства цвета:

   

freeCodeCamp

Вот что у нас сейчас в браузере:

Сочетание свойств font-size и color дает нам в браузере следующее:

С кодом:

   

freeCodeCamp

Как изменить размер и цвет текста во внешнем файле CSS

Вы также можете изменить цвет и размер текста во внешней таблице стилей. Самое главное, вы должны связать внешний CSS в разделе заголовка вашего HTML.

Базовый синтаксис для этого выглядит следующим образом:

  
  

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

Помните, что это наш простой HTML-код:

.
   

freeCodeCamp

Вы можете изменить цвет и размер текста, выбрав элемент (h2) и присвоив значения свойствам цвета и размера шрифта:

  ч2 {
    цвет: #2ecc71;
    размер шрифта: 4rem;
}
  

Тот же результат в браузере:

Заключение

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

Спасибо за прочтение и продолжайте писать код.

Как изменить тип, размер и цвет шрифта на веб-странице

Обновлено: 16. 08.2021 автором Computer Hope

На этой странице содержатся инструкции по изменению шрифта и его цвета на веб-странице. С появлением HTML5 правильный способ настройки шрифтов веб-страницы — использование каскадных таблиц стилей. Старый метод использования встроенного атрибута стиля или тега шрифта устарел и больше не должен использоваться.

Примечание

Хотя устаревшие методы могут корректно отображаться в современных интернет-браузерах, это больше не гарантируется. Чтобы создать веб-страницы, которые правильно отображаются для максимального количества пользователей, используйте методы CSS, описанные на этой странице.

Наконечник

Методы изменения атрибутов шрифта на этой странице работают для текста, содержащегося в большинстве тегов HTML, включая

,

и . Эти методы также работают для текста в таблице с использованием тегов

, и
.

Использование CSS для одного приложения

Если вы планируете изменить начертание шрифта и его цвет для одного слова, предложения или абзаца на веб-странице, настройте его атрибуты в теге элемента. Используя атрибут стиля , вы можете указать начертание и цвет шрифта с помощью font-family , color и размер шрифта с помощью font-size , как показано в примере ниже.

Пример кода

 

Этот текст имеет шрифт Courier, синий и 20 пикселей.

Результат

Этот текст имеет шрифт Courier, синий цвет и размер 20 пикселей.

Использование CSS для одной или нескольких страниц

Пользовательский шрифт для одной страницы

В верхней части веб-страницы вы можете вставить код между вкладками , чтобы изменить внешний вид текста в различных элементах. Следующее синее поле содержит пример кода, который после вызова изменит ваш шрифт на Courier и окрасит его в красный цвет. Как видите, мы определили имя класса как «custom.»

 <тип стиля = "текст/css">
.обычай {
 семейство шрифтов: Courier;
 красный цвет;
 размер шрифта: 20 пикселей;
}
 

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

Пример

 

Все это предложение красное и Курьер

Только слово test красного цвета и Courier.

Результат

Вся эта фраза красная и курьерская.

Только слово тест красное и Курьер.

Пользовательский шрифт для многих страниц

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

Используя любой простой текстовый редактор, сохраните следующий текст в виде файла .css, чтобы подготовить его к импорту.

 @charset "utf-8"; 
.курьер { семейство шрифтов: Courier; цвет: #005CB9; }

После того, как предыдущий текст будет помещен в файл . css (мы назвали наш basic.css ), вы можете сделать ссылку на него с любой другой страницы, используя строку, аналогичную следующему примеру.

  
Наконечник

Пользователи могут изменять атрибуты элементов на странице, изменяя код в импортированном файле .css.

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

Несмотря на то, что HTML-тег устарел, его все еще можно использовать, и он может быть необходим для использования с некоторыми онлайн-сервисами. При использовании тега FONT вы должны включить атрибут face, описывающий используемый шрифт. В приведенном ниже примере мы используем шрифт Courier и шестнадцатеричный код цвета #005CB9 , т.е. темно-синий.

Пример кода

 Пример специального шрифта. 

Результат

Пример специального шрифта.

Выравнивание, стили шрифтов и горизонтальные линейки в HTML-документах

Выравнивание, стили шрифтов и горизонтальные линейки в HTML-документах

В этом разделе спецификации обсуждаются некоторые элементы HTML и атрибуты, которые могут использоваться для визуального форматирования элементов. Многие из них устарел.

15.1 Форматирование

15.1.1 Фон цвет

Определения атрибутов

bgcolor = цвет [CI]
Устарело. Это Атрибут задает цвет фона для тела документа или ячеек таблицы.

Этот атрибут устанавливает цвет фона холста для основной части документа. (элемент BODY ) или для таблиц (элемент ТАБЛИЦА , TR , TH и элементы ТД ).Дополнительные атрибуты для указания цвета текста могут быть используется с элементом BODY .

Этот атрибут устарел в пользу таблиц стилей для указания информации о цвете фона.

15.1.2 Выравнивание

Возможно выравнивание элементов блока (таблицы, изображения, объекты, абзацы, д.) на холсте с атрибутом align . Хотя это атрибут может быть установлен для многих элементов HTML, его диапазон возможных значений иногда отличается от элемента к элементу. Здесь мы обсуждаем только значение атрибут align для текста.

Определения атрибутов

выровнять = слева|в центре|справа|по ширине [КИ]
Устарело. Это определяет горизонтальное выравнивание своего элемента относительно окружающий контекст. Возможные значения:
  • слева : строки текста выравниваются по левому краю.
  • center : текстовые строки располагаются по центру.
  • справа : текстовые строки выравниваются по правому краю.
  • по ширине : текстовые строки выравниваются по обоим полям.

Значение по умолчанию зависит от основного направления текста. Для текста слева направо по умолчанию align=left , а для текста справа налево значение по умолчанию align=right .

УСТАРЕВШИЙ ПРИМЕР:
В этом примере заголовок центрируется на холсте.

Как вырезать дерево

Используя CSS, например, вы можете добиться такого же эффекта следующим образом:

<ГОЛОВА>
 Как вырезать дерево
 <СТИЛЬ type="text/css">
  h2 {выравнивание текста: по центру}
 
<ТЕЛО>
  

Как вырезать дерево

Обратите внимание, что это приведет к центрированию всех объявлений h2 .Вы могли бы уменьшить рамки стиля, установив атрибут класса для элемента:

<ГОЛОВА>
 Как вырезать дерево
 <СТИЛЬ type="text/css">
  h2.wood {выравнивание текста: по центру}
 
<ТЕЛО>
  

Как вырезать дерево

УСТАРЕВШИЙ ПРИМЕР:
Аналогично, чтобы выровнять абзац по правому краю на холсте с помощью HTML align атрибут, который вы могли бы иметь:

...Много текста абзаца...

, что с CSS будет:

<ГОЛОВА>
 Как вырезать дерево
 <СТИЛЬ type="text/css">
  P. mypar {выравнивание текста: вправо}
 
<ТЕЛО>
 

...Много текста абзаца...

УСТАРЕВШИЙ ПРИМЕР:
Чтобы выровнять ряд абзацев по правому краю, сгруппируйте их с помощью Элемент DIV :

...текст в первом абзаце...

...текст во втором абзаце...

...текст в третьем абзаце...

С помощью CSS свойство text-align наследуется от родительского элемента. поэтому можно использовать:

<ГОЛОВА>
 Как вырезать дерево
 <СТИЛЬ type="text/css">
  DIV.mypars {выравнивание текста: вправо}
 
<ТЕЛО>
 <ДЕЛ>
  

...текст в первом абзаце... <Р> ...текст во втором абзаце...

...текст в третьем абзаце...

Чтобы центрировать весь документ с помощью CSS:

<ГОЛОВА>
 Как вырезать дерево
 <СТИЛЬ type="text/css">
  BODY {выравнивание текста: по центру}
 
<ТЕЛО>
   . ..тело центрировано... 

 

Элемент ЦЕНТР точно эквивалентно указанию элемента DIV с выравниванием атрибут установлен в «центр». Элемент CENTER устарел.

15.1.3 Плавающие объекты

Изображения и объекты могут отображаться непосредственно «в строке» или могут быть смещены к одному стороне страницы, временно изменяя поля текста, которые могут располагаться на с любой стороны объекта.

Плавающий объект

атрибут align для объектов, изображений, таблиц, фреймов и т.д., причины объект плавает к левому или правому краю. Плавающие объекты в целом начать новую строку.Этот атрибут принимает следующие значения:

  • слева: Помещает объект на текущее левое поле. Последующий текст течет вдоль правой стороны изображения.
  • right: Помещает объект на текущее правое поле. Последующий текст течет вдоль левой стороны изображения.

УСТАРЕВШИЙ ПРИМЕР:
В следующем примере показано, как плавать IMG к текущему левому полю холста.

моя лодка
 

Некоторые атрибуты выравнивания также допускают значение «центр», которое не вызывает плавание, но центрирует объект в пределах текущих полей. Однако для P и DIV значение «центр» приводит к тому, что содержимое элемент для центрирования.

Плавающий текст вокруг объекта

Другой атрибут, определенный для элемента BR , управляет текст обтекает плавающие объекты.

Определения атрибутов

прозрачный = нет|влево|вправо|все [КИ]
Устарело. Указывает, где следующая строка должна появиться в визуальном браузере после строки поломка, вызванная этим элементом. Этот атрибут учитывает плавающие объекты (изображения, таблицы и т. д.). Возможные значения:
  • нет: Следующая строка начнется нормально. Это значение по умолчанию стоимость.
  • слева: Следующая строка будет начинаться с ближайшей строки ниже любой плавающие объекты на левом поле.
  • справа: Следующая строка будет начинаться с ближайшей строки ниже любой плавающие объекты на правом поле.
  • все: Следующая строка будет начинаться с ближайшей строки ниже любой плавающие объекты на любом поле.

Рассмотрим следующий визуальный сценарий, в котором текст располагается справа от изображение до тех пор, пока строка не будет разорвана на BR :

********* -------
| | -------
| изображение | --
| | *********

Если для атрибута clear установлено значение none , строка следующий за BR начнется сразу под ним на правом краю изображение:

********* -------
| | -------
| изображение | --
| | ------ *********

УСТАРЕВШИЙ ПРИМЕР:
Если для атрибута очистить установлено значение , осталось или . все , следующая строка будет выглядеть так:

********* -------
| | -------
| изображение | --
| | ********* ------------------

Используя таблицы стилей, вы можете указать, что все разрывы строк должны вести себя таким образом для объектов (изображений, таблиц и т.) плавает по левому краю. С помощью CSS вы можете добиться этого следующим образом:

<СТИЛЬ type="text/css">
BR {очистить: слева}

 

Чтобы указать это поведение для конкретного экземпляра BR элемент, вы можете комбинировать информацию о стиле и идентификатор атрибут:

<ГОЛОВА>
  ... 
<СТИЛЬ type="text/css">
BR#mybr {очистить: слева}


<ТЕЛО>
<Р>...
********* -------
| | -------
| стол | --
| | ********* ------------------ ...

Следующие элементы HTML определяют информацию о шрифте. Хотя они не все устарели, их использование не рекомендуется в пользу таблиц стилей.

15.2.1 Элементы стиля шрифта:

ТТ , я , б , БОЛЬШОЙ , МАЛЕНЬКИЙ , STRIKE , S и U элементы

Начальный тег: требуется , Конечный тег: требуется

Атрибуты, определенные в другом месте

  • id , class (идентификаторы всего документа)
  • lang (информация о языке), дир (текст направление)
  • заголовок (элемент название)
  • стиль (встроенный стиль информация)
  • onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown onkeyup (внутренние события)

Отображение элементов стиля шрифта зависит от пользовательского агента. Следующее только информативное описание.

TT: Отображается как телетайп или моноширинный текст.
I: Отображается курсивом.
B: Отображается жирным шрифтом.
BIG: Отображает текст «крупным» шрифтом.
SMALL: Отображает текст «мелким» шрифтом.
УДАР и S: Устарело. Текст в стиле зачеркивания.
У: Устарело. Отображает подчеркнутый текст.

Следующее предложение показывает несколько типов текста:

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

Эти слова можно перевести следующим образом:

Можно достичь гораздо большего разнообразия шрифтовых эффектов, используя стиль листы.Чтобы указать синий курсивный текст в абзаце с помощью CSS:

<ГОЛОВА>
<СТИЛЬ type="text/css">
P#mypar {стиль шрифта: курсив; цвет синий}


. ..Много синего курсивного текста...

Элементы стиля шрифта должны быть правильно вложены. Рендеринг вложенного стиля шрифта элементы зависят от пользовательского агента.

15.2.2 Модификатор шрифта элементы:

FONT и BASEFONT

FONT и BASEFONT устарели.

См. Transitional DTD для формальное определение.

Определения атрибутов

размер = cdata [CN]
Устарело. Это Атрибут устанавливает размер шрифта. Возможные значения:
  • Целое число от 1 до 7. Это устанавливает для шрифта некоторый фиксированный размер, рендеринг зависит от пользовательского агента. Не все пользовательские агенты могут отображать все семь размеры.
  • Относительное увеличение размера шрифта.Значение «+1» означает на один размер больше. То значение «-3» означает на три размера меньше. Все размеры относятся к шкале от 1 до 7.
цвет = цвет [CI]
Устарело. Это атрибут устанавливает цвет текста.
лицо = cdata [CI]
Устарело. Это Атрибут определяет разделенный запятыми список имен шрифтов, которые должен использовать пользовательский агент. искать в порядке предпочтения.

Атрибуты, определенные в другом месте

Элемент FONT изменяет размер и цвет шрифта текста в своем содержание.

Элемент BASEFONT задает базовый размер шрифта (с помощью атрибута size ). Изменения размера шрифта, достигнутые с помощью FONT относятся к базовому размеру шрифта, установленному BASEFONT . Если BASEFONT не используется, базовый размер шрифта по умолчанию равен 3.

УСТАРЕВШИЙ ПРИМЕР:
В следующем примере показана разница между семью размерами шрифта. доступен с ШРИФТ :

size=1 размер=2 размер=3 size=4 размер=5 размер=6 размер=7

Это может быть представлено как:

Ниже показан пример влияния относительных размеров шрифта с использованием базовый размер шрифта 3:

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

15.3 Правила:

HR элемент

Начальный тег: требуется , Конечный тег: запрещено

Определения атрибутов

выровнять = слева|в центре|справа [CI]
Устарело. Это определяет горизонтальное выравнивание правила относительно окружающий контекст. Возможные значения:
  • слева : правило отображается заподлицо слева.
  • center : правило центрировано.
  • справа : правило отображается заподлицо справа.

Значение по умолчанию: align=center .

накладка [CI]
Устарело. Когда установлен, этот логический атрибут запрашивает, чтобы пользовательский агент отображал правило в сплошной цвет, а не как традиционный двухцветный «паз».
размер = пикселей [CI]
Устарело. Это атрибут указывает высоту правила. Значение по умолчанию для этого Атрибут зависит от пользовательского агента.
ширина = длина [CI]
Устарело. Это атрибут указывает ширину правила. Ширина по умолчанию равна 100%, т. е. правило распространяется на весь холст.

Атрибуты, определенные в другом месте

  • id , class (идентификаторы всего документа)
  • lang (информация о языке), дир (текст направление)
  • заголовок (элемент название)
  • стиль (встроенный стиль информация)
  • onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (внутренние события)

Элемент HR вызывает визуализацию горизонтальной линейки визуальным пользователем агенты.

Расстояние по вертикали между правилом и содержимым, которое окружает его, зависит от пользовательского агента.

УСТАРЕВШИЙ ПРИМЕР:
В этом примере правила центрируются, а их размер составляет половину доступной ширины. между полями. Верхняя линейка имеет толщину по умолчанию, а нижняя два установлены на 5 пикселей. Нижнее правило должно отображаться сплошным цветом. без штриховки:




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

Размер шрифта HTML – Как изменить размер текста с помощью встроенного стиля CSS

В HTML выбранный вами шрифт будет играть важную роль во внешнем виде ваших веб-страниц.

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

С помощью свойства font-size в CSS вы можете изменить размер текста на веб-странице. Вы можете использовать это свойство в любом типе CSS, который вы пишете — внешнем, внутреннем или встроенном.

В этой статье я покажу вам, как изменить размер текста с помощью свойства font-size во встроенном CSS.

Что такое встроенный CSS?

Встроенный CSS — это один из трех различных способов стилизации любого HTML-элемента.

Вместо того, чтобы нацеливать элемент с атрибутом class или id или сам элемент в качестве селектора и стилизовать его с помощью этого, вы помещаете все стили CSS в открывающий тег.

Кроме того, вы должны убедиться, что все свойства и значения ваших стилей находятся внутри атрибута стиля . Этот атрибут стиля является одним из многочисленных атрибутов, принимаемых всеми тегами HTML.

В приведенном ниже примере я изменил цвет фона текста на малиновый, цвет текста на #f1f1f1 (светло-серый) и толщину шрифта на жирный с помощью встроенного CSS.

  <р>
      Привет кемперы...

Кстати, мой браузер увеличен до уровня 400%, поэтому все кажется таким большим. Никаких дополнительных стилей для этого я не применял 🙂

Как изменить размер текста с помощью встроенного CSS

Чтобы изменить размер текста с помощью встроенного CSS, вы должны сделать это с помощью атрибута стиля .Вы вводите свойство font-size , а затем присваиваете ему значение.

Имеются встроенные значения, такие как большой , большой , средний , маленький , x-большой и т. д.:

В приведенном ниже фрагменте кода я изменяю размер текста «Hello Campers…» на x-large, одно из встроенных значений свойства font-size.

  

Привет туристам...

Вы также можете установить значение свойства font-size , используя число с любой единицей измерения, такой как пиксели (px), бэр или em.

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

В фрагменте кода ниже я изменил размер текста на 30px с помощью встроенного CSS:

  

Привет туристам...

Заключение

В этой статье вы узнали, как изменить размер текста с помощью встроенного CSS и свойства font-size. Вы также видели, как можно присваивать значения свойству font-size.

На заметку: встроенный CSS отлично подходит для стилизации, но вам не следует сильно полагаться на него, поскольку он затрудняет чтение вашего HTML, особенно если вы работаете в команде. Вы не хотите быть единственным, кто сможет прочитать ваш собственный код.

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

При присвоении значений свойству font-size лучше назначать значения в rem вместо, например, px .Это связано с тем, что при использовании rem браузер сможет изменять размер шрифта по мере того, как пользователь увеличивает или уменьшает масштаб, чего не произойдет при использовании px .

Спасибо за прочтение и продолжайте писать код.

HTML: тег


В этом руководстве по HTML объясняется, как использовать элемент HTML, называемый тегом , с синтаксисом и примерами.

Описание

Тег HTML определяет размер шрифта, цвет и начертание текста в документе HTML.Поскольку этот тег был удален в HTML5, рекомендуется использовать свойства CSS, такие как шрифт, семейство шрифтов, размер шрифта и цвет, для форматирования текста в документе. Этот тег также часто называют элементом .

Синтаксис

В HTML синтаксис для тега : (пример , который форматирует текст как красный, использует семейство шрифтов Verdana, Geneva, sans-serif и имеет относительный размер +1 )

  <тело>

Здесь находится отформатированный текст

Пример вывода

 

Атрибуты

В дополнение к глобальным атрибутам, ниже приведен список атрибутов, специфичных для тега :

Атрибут Описание HTML-совместимость
цвет Цвет текста либо в шестнадцатеричном формате (т. е. в формате #RRGGBB), либо в именованном цвете (т. е.: черный, красный, белый) HTML 4.01
лицо Шрифт для текста. Перечислены как одно или несколько имен шрифтов (через запятую) HTML 4.01
размер Размер шрифта, выраженный числовым или относительным значением.

Диапазон числовых значений от 1 до 7 (1 — наименьшее, 7 — наибольшее, 3 — по умолчанию).
Относительными значениями могут быть такие значения, как +1 или -2, увеличивающиеся на один размер шрифта или уменьшающиеся на 2 размера шрифта соответственно.

HTML 4.01

Совместимость с браузером

Тег имеет базовую поддержку в следующих браузерах:

  • Хром
  • Андроид
  • Firefox (Геккон)
  • Firefox Mobile (Геккон)
  • Internet Explorer (IE)
  • Пограничный мобильный телефон
  • Опера
  • Опера Мобайл
  • Сафари (веб-кит)
  • Сафари Мобильный

Пример

Мы обсудим тег ниже, исследуя примеры использования тега в HTML5, HTML 4. 01 Переходный, XHTML 1.0 Переходный, XHTML 1.0 Строгий и XHTML 1.1.

Документ HTML5

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

Переходный документ HTML 4.01

Если вы создали новую веб-страницу в HTML 4.01 Transitional, ваш тег может выглядеть так:

  


<голова>

Переходный пример HTML 4.01 от www.techonthenet.com


<тело>
 

Заголовок 1

Пример 1 красный цвет шрифта с использованием именованного цвета

Пример 2 красный цвет шрифта в шестнадцатеричном формате

Пример 3 начертание шрифта — это другое семейство шрифтов

Пример 4. размер шрифта равен 5 с использованием числового значения

Пример 5. размер шрифта на два размера больше с использованием относительного значения

Пример 6 объединение атрибутов

В этом HTML 4.01 Пример переходного документа, у нас есть 6 примеров тегов .

Первый тег показывает, как установить цвет шрифта с помощью именованного цвета, а второй тег показывает, как установить цвет шрифта с помощью шестнадцатеричного значения. Третий тег показывает, как установить начертание шрифта с помощью разделенного запятыми списка используемых семейств шрифтов. Четвертый тег показывает, как установить размер шрифта, используя числовое значение, а пятый тег показывает, как установить размер шрифта, используя относительное значение.

Шестой тег показывает, как объединить цвет, шрифт и размер в одном теге .

Переходный документ XHTML 1.0

Если вы создали новую веб-страницу в XHTML 1.0 Transitional, ваш тег может выглядеть следующим образом:

  


<голова>

<название>XHMTL 1.0 Переходный пример www.techonthenet.com


<тело>
 

Заголовок 1

Пример 1 красный цвет шрифта с использованием именованного цвета

Пример 2 красный цвет шрифта в шестнадцатеричном формате

Пример 3 начертание шрифта — это другое семейство шрифтов

Пример 4. размер шрифта равен 5 с использованием числового значения

Пример 5. размер шрифта на два размера больше с использованием относительного значения

Пример 6 объединение атрибутов

В этом XHTML 1. 0 Пример документа Transitional, у нас есть 6 примеров тега .

Первый тег показывает, как установить цвет шрифта с помощью именованного цвета, а второй тег показывает, как установить цвет шрифта с помощью шестнадцатеричного значения. Третий тег показывает, как установить начертание шрифта с помощью разделенного запятыми списка используемых семейств шрифтов. Четвертый тег показывает, как установить размер шрифта, используя числовое значение, а пятый тег показывает, как установить размер шрифта, используя относительное значение.

Шестой тег показывает, как объединить цвет, шрифт и размер в одном теге .

Строгий документ XHTML 1.0

Вы не можете использовать тег в XHTML 1.0 Strict.

Документ XHTML 1.1

Вы не можете использовать тег в XHTML 1.1.

4.5. Теги физического стиля — HTML и XHTML: Полное руководство, 6-е издание [Книга]

Текущие стандарты HTML и XHTML в настоящее время обеспечивают девять физические стили: полужирный, курсив, моноширинный, подчеркнутый, зачеркнутый, больший, меньший, надстрочный и подстрочный текст. К нашему большому облегчение, Internet Explorer перестал поддерживать десятый физический стиль, «мигающий» текст. Мы хотим, чтобы другие «получили это». Весь физический стиль теги требуют закрывающих тегов.

Когда мы подробно обсуждаем физические теги, имейте в виду, что они передать острый стиль для непосредственного текста. Для более полного, управление отображением текста на уровне документа, используйте таблицы стилей (см. главу 8).

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

Тег позволяет легко увеличить размер текста. Проще и быть не может: браузер рендерит текст между тегом и его соответствующий закрывающий тег на один размер шрифта больше, чем окружающий текст.Если этот текст уже при наибольшем размере не действует. [, 4.10.3]

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

Тег

(устаревшее расширение)

Текст, содержащийся между тегом и его конечным тегом, , делает именно это: он мигает. и выкл.Firefox, например, просто и многократно переворачивает цвета фона и переднего плана для -вложенного текста. Ни Ни HTML, ни стандарт XHTML не включают . Изначально поддерживался как расширение только для версий Netscape Navigator до версии 6; затем он был удален в версии 6 и восстановлен в версиях 7 и позже. Opera и Firefox также поддерживают его — только Internet Explorer. избегает этого.Вы тоже должны.

Мы не можем эффективно воспроизвести анимированный эффект в этих статические страницы, но это легко представить и лучше оставить на усмотрение воображение тоже. Мигающий текст имеет два основных эффекта: внимание читателей, а затем быстро раздражает их до бесконечности. Забывать о мигающем тексте.

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

Тег сокращенная форма тега , поддерживаемая всеми текущими браузерами, даже если это устарело в HTML 4 и XHTML. Другими словами, «с» означает застенчивый: не используйте его; будет уходи, в конце концов.

Тег работает так же, как его <большой> аналог (см. [The Тег, 4.5.2]), за исключением того, что он уменьшает размер текста, а не увеличивает его. Если вложенный текст уже при наименьшем размере, поддерживаемом моделью шрифта, не действует.

Как можно с , вы можете вложить тегов в последовательно уменьшать текст. Каждый тег делает текст одного размера меньше, чем содержащий тег , до предела размера 1.

Тег

(устаревший)

Популярные браузеры перечеркивают текст («перечеркивают») который появляется внутри тега и его конечного тега . Предположительно, это разметка редактирования, которая говорит читателю игнорировать отрывок текста, напоминает дни до исправления ленты для пишущей машинки. Вы будете редко, если вообще когда-либо, увидеть тег, используемый сегодня: он устарел в HTML 4 и XHTML, всего в одном шаге от полного исключения из стандарт.

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

Тег и его Верхний индекс конечного тега вложенный текст; он отображается на пол-символа выше, но с тем же шрифтом и размером, что и текущий поток текста.Этот тег полезно для добавления сносок к вашим документам, наряду с экспоненциальным значения в уравнениях. Когда вы используете его в сочетании с тегом , вы можете создавать красивые, сноски с гиперссылками:

 Личинка quat
долгоносик74 — это
 

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

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

Этот тег сообщает браузеру, что нужно подчеркнуть текст содержится между и соответствующий тег .Техника подчеркивания упрощена, рисование линии под пробелами и пунктуации, и текста. Этот тег устарел в HTML 4. и XHTML, но популярные браузеры его поддерживают.

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

Атрибуты класса, стиля, идентификатора и заголовка

Хотя каждый физический тег имеет определенный стиль, вы можете переопределить этот стиль, определив свой собственный внешний вид для каждого тега.Вы можете применить это новый взгляд на физические теги с использованием либо атрибута стиля , либо атрибута класса . [Встроенные стили: атрибут стиля, 8.1.1] [Классы стилей, 8.3]

Вы также можете назначить уникальный идентификатор тегу физического стиля, как а также менее строгое название с использованием соответствующего атрибута и сопровождающее строковое значение, заключенное в кавычки. [Атрибут id, 4.1.1.4] [Атрибут title, 4.1.1.5]

Как и в случае тегов стиля на основе содержимого, события клавиатуры могут происходить внутри тега физического стиля и вокруг него. содержание.Браузер распознает многие из этих событий, если он соответствует к текущим стандартам и с соответствующим атрибутом и значением на , вы можете реагировать на событие, отображая диалоговое окно пользователя или активируя некоторые мультимедийные мероприятие. [Событие JavaScript Handlers, 12.3.3]

Сводка тегов физического стиля

Различные графические браузеры отображают текст внутри физического теги стилей аналогичным образом. Таблица 4-2 суммирует эти стили отображения браузеров для этих тегов.Определения таблиц стилей могут переопределить эти собственные стили отображения.

Таблица 4-2. Физические теги стиля

Удар

Tag

Значение

Показать стиль

Жирного содержания

Жирных

Увеличенный размер шрифта

Увеличенный текст (устарело)

Чередование переднего и заднего плана цвета

Мигающий текст

Курсивное содержание

1 Ital2ic2961

уменьшил размер шрифта

меньший текст

, (устарел)

STRIKETHROUGH TEXT

подписан текст

sub script

Надстрочный текст

SUP ERScript

TeletyPewRiter Style

Моноссы

(устарело)

Подчеркнутое содержимое

Подчеркнутое

Следующий пример исходного кода HTML иллюстрирует некоторые из различные физические теги, отображаемые Firefox (см. рис. 4-12):

 Явно выделены жирным шрифтом, выделены курсивом или
Следует использовать текст в стиле телетайпа
экономно.В противном случае пейте много 1x106
капли H2O.
 

Рис. 4-12. Используйте теги физического текста с осторожностью

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

Вы можете использовать любой тег физического стиля везде, где вы можете использовать предмет допускается в тексте.В общем, это означает, что где-нибудь в документе, кроме </code> , <code> <listing> </code> и <code> <xmp> </code> теги. Вы можете использовать физ. тег стиля в заголовке, но браузер, вероятно, переопределит его и игнорировать его эффект вместо тега заголовка.<img src='/800/600/https/fs.znanio.ru/d5af0e/e5/ef/84db932d7ea64a012963b300f7a4a7ffdc.jpg' /> </div> </div> <div class="panel panel-default"> <div class="panel-heading">Comments</div> <div class="panel-body"> <div class='text-center'><a class='btn btn-lg btn-success' href="javascript:void(0);" onclick="jQuery('#wlt_comments_form').show(); jQuery('#wlt_comments_form_lc').hide();" id="wlt_comments_form_lc">Leave Comment</a></div> <div style="display:none;" id="wlt_comments_form"> <a class='badge pull-right' href="javascript:void(0);" onclick="jQuery('#wlt_comments_form').hide(); jQuery('#wlt_comments_form_lc').show();">Close</a> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Leave a Comment <hr /> <small><a rel="nofollow" id="cancel-comment-reply-link" href="/raznoe-2/stili-teksta-v-html-stili-teksta-osnovy-vyorstki-kontenta.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://winx-fan.ru/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p><textarea id="comment" name="comment" aria-required="true" placeholder="Комментарий" class="form-control"></textarea></p><p> <input id="author" name="author" type="text" value="" size="30" placeholder="Name" class="form-control" /></p> <p> <input id="email" name="email" type="text" value="" size="30" placeholder="Email" class="form-control" /></p> <p><input id="url" name="url" type="text" value="" size="30" placeholder="Website" class="form-control" /></p> <p class="form-submit wp-block-button"> <input type='hidden' name='comment_post_ID' value='22268' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> <hr /> <div class="form-group clearfix"> <label class="control-label col-md-5">What is the sum of:</label> <div class="input-group controls col-md-3"> <span class="input-group-addon"> 3 + 9 = </span> <input type="text" name="reg_val" tabindex="500" class="form-control"> <input type="hidden" name="reg1" value="3" /> <input type="hidden" name="reg2" value="9" /> </div> </div> <hr /> <div class="clearfix"></div><div class="btnbox"><button name="submit" class="btn btn-success btn-lg" type="submit" id="submit"(.+)>Submit Comment</button></div> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p></form> </div><!-- #respond --> </div> <div class="clearfix"></div> </div> </div> </div></article> <aside class="core_sidebar col-md-300 col-sm-300 hidden-xs" id="core_right_column"> <div class="widget_text panel panel-default" id="custom_html-3"><div class="panel-heading"> </div><div class="panel-body widget"><div class="textwidget custom-html-widget"><ins class="adsbygoogle" style="display:inline-block;width:100%;height:600px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="6847132033" ></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div><div class="clearfix"></div></div></div><div class="panel panel-default" id="categories-2"><div class="panel-heading">Рубрики </div><div class="panel-body widget"> <ul> <li class="cat-item cat-item-3"><a href="https://winx-fan.ru/category/akvarelyu">Акварелью</a> </li> <li class="cat-item cat-item-1"><a href="https://winx-fan.ru/category/%d0%b1%d0%b5%d0%b7-%d1%80%d1%83%d0%b1%d1%80%d0%b8%d0%ba%d0%b8">Без рубрики</a> </li> <li class="cat-item cat-item-8"><a href="https://winx-fan.ru/category/guashyu">Гуашью</a> </li> <li class="cat-item cat-item-6"><a href="https://winx-fan.ru/category/dlya-nachinayushhix">Для начинающих</a> </li> <li class="cat-item cat-item-4"><a href="https://winx-fan.ru/category/karandashom">Карандашом</a> </li> <li class="cat-item cat-item-7"><a href="https://winx-fan.ru/category/portret">Портрет</a> </li> <li class="cat-item cat-item-5"><a href="https://winx-fan.ru/category/poetapno">Поэтапно</a> </li> <li class="cat-item cat-item-10"><a href="https://winx-fan.ru/category/raznoe-2">Разное</a> </li> <li class="cat-item cat-item-2"><a href="https://winx-fan.ru/category/raznoe">Советы художника</a> </li> </ul> <div class="clearfix"></div></div></div><div class="widget_text panel panel-default" id="custom_html-2"><div class="panel-heading"> </div><div class="panel-body widget"><div class="textwidget custom-html-widget"><style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script type="text/javascript">jQuery(document).ready(function($){$('.mylink').replaceWith(function(){return'<a href="'+$(this).attr('data-url')+'" title="'+$(this).attr('title')+'">'+$(this).html()+'</a>'})});new Image().src="//counter.yadro.ru/hit?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+";"+Math.random();</script></div><div class="clearfix"></div></div></div><div class="widget_text panel panel-default" id="custom_html-4"><div class="panel-heading"> </div><div class="panel-body widget"><div class="textwidget custom-html-widget"><!-- Yandex.RTB R-A-462750-6 --> <div id="yandex_rtb_R-A-462750-6"></div> <script type="text/javascript"> (function(w, d, n, s, t) { w[n] = w[n] || []; w[n].push(function() { Ya.Context.AdvManager.render({ blockId: "R-A-462750-6", renderTo: "yandex_rtb_R-A-462750-6", async: true }); }); t = d.getElementsByTagName("script")[0]; s = d.createElement("script"); s.type = "text/javascript"; s.src = "//an.yandex.ru/system/context.js"; s.async = true; t.parentNode.insertBefore(s, t); })(this, this.document, "yandexContextAsyncCallbacks"); </script></div><div class="clearfix"></div></div></div> </aside> </div> </div> </div> </div> </div> <!-- [WLT] FRAMRWORK // FOOTER --> <p id="back-top"> <a href="#top"><span></span></a> </p> <footer id="footer"> <div id="footer_content"> <div class="container-fluid"> <div class="row clearfix"> <div class="col-md-3"></div> <div class="col-md-3 hidden-xs"></div> <div class="col-md-3 hidden-xs"></div> <div class="col-md-3 hidden-xs"></div> </div> </div> </div> <div id="footer_bottom"> <div class="container-fluid"> <div class="row clearfix"> <div class="pull-left copybit">2019 © Все права защищены. <a href="/sitemap.xml">Карта сайта</a></div> </div> </div> </div> </footer> <div id="freeow" class="freeow freeow-top-right"></div> </div> <div id="core_footer_ajax"></div> <style type="text/css"> .pgntn-page-pagination { text-align: left !important; } .pgntn-page-pagination-block { width: 60% !important; padding: 0 0 0 0; } .pgntn-page-pagination a { color: #1e14ca !important; background-color: #ffffff !important; text-decoration: none !important; border: 1px solid #cccccc !important; } .pgntn-page-pagination a:hover { color: #000 !important; } .pgntn-page-pagination-intro, .pgntn-page-pagination .current { background-color: #efefef !important; color: #000 !important; border: 1px solid #cccccc !important; } .archive #nav-above, .archive #nav-below, .search #nav-above, .search #nav-below, .blog #nav-below, .blog #nav-above, .navigation.paging-navigation, .navigation.pagination, .pagination.paging-pagination, .pagination.pagination, .pagination.loop-pagination, .bicubic-nav-link, #page-nav, .camp-paging, #reposter_nav-pages, .unity-post-pagination, .wordpost_content .nav_post_link,.page-link, .page-links,#comments .navigation, #comment-nav-above, #comment-nav-below, #nav-single, .navigation.comment-navigation, comment-pagination { display: none !important; } .single-gallery .pagination.gllrpr_pagination { display: block !important; } </style> <link rel='stylesheet' id='pgntn_stylesheet-css' href='https://winx-fan.ru/wp-content/plugins/pagination/css/nav-style.css?ver=5.9.3' media='all' /> <script src='https://winx-fan.ru/wp-includes/js/jquery/ui/core.min.js?ver=1.13.1' id='jquery-ui-core-js'></script> <script src='https://winx-fan.ru/wp-includes/js/jquery/ui/mouse.min.js?ver=1.13.1' id='jquery-ui-mouse-js'></script> <script src='https://winx-fan.ru/wp-includes/js/jquery/ui/draggable.min.js?ver=1.13.1' id='jquery-ui-draggable-js'></script> <script id='q2w3_fixed_widget-js-extra'> var q2w3_sidebar_options = [{"sidebar":"sidebar-1","margin_top":10,"margin_bottom":0,"stop_id":"","screen_max_width":0,"screen_max_height":0,"width_inherit":false,"refresh_interval":1500,"window_load_hook":false,"disable_mo_api":false,"widgets":["custom_html-4"]}]; </script> <script src='https://winx-fan.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.1.9' id='q2w3_fixed_widget-js'></script> <script src='https://winx-fan.ru/wp-content/plugins/easy-table-of-contents/vendor/smooth-scroll/jquery.smooth-scroll.min.js?ver=1.5.5' id='jquery-smooth-scroll-js'></script> <script src='https://winx-fan.ru/wp-content/plugins/easy-table-of-contents/vendor/js-cookie/js.cookie.min.js?ver=2.0.3' id='js-cookie-js'></script> <script src='https://winx-fan.ru/wp-content/plugins/easy-table-of-contents/vendor/sticky-kit/jquery.sticky-kit.min.js?ver=1.9.2' id='jquery-sticky-kit-js'></script> <script src='https://winx-fan.ru/wp-content/plugins/easy-table-of-contents/vendor/waypoints/jquery.waypoints.min.js?ver=1.9.2' id='jquery-waypoints-js'></script> <script id='ez-toc-js-js-extra'> var ezTOC = {"smooth_scroll":"1","visibility_hide_by_default":"","width":"auto","scroll_offset":"30"}; </script> <script src='https://winx-fan.ru/wp-content/plugins/easy-table-of-contents/assets/js/front.min.js?ver=1.7' id='ez-toc-js-js'></script> <script src='https://winx-fan.ru/wp-content/themes/premiumpress/framework/js/core.ajax.js?ver=5.9.3' id='core.ajax-js'></script> <script src='https://winx-fan.ru/wp-content/themes/premiumpress/framework/js/core.jquery.js?ver=5.9.3' id='core.jquery-js'></script> </body> </html>