Стили html для текста – Как сделать красивый шрифт в html: размеры, цвета, теги шрифтов html

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 – установка стандартного начертания

100 – 900 – значение насыщенности с шагом через 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 свойствами можно добиться весьма интересных эффектов.

Стили применяемые для оформления текста.

 

 

К тексту, расположенному в тэге <p>, можно применить следующие типы свойств для его оформления:

—font –family: – свойство используется для задания гарнитуры шрифта
список наиболее распространенных шрифтов, которые установлены у большинства пользователей любой операционной системы:

• Arial;
• Arial Black;
• Courier New;
• Comic Sans MS;
• Tahoma;
• Times New Roman;
• Verdana.

— font-style: — выбор стиля шрифта;
Это свойство может принимать 3 значения: normal (обычное начертание), italic (курсивное) и oblique (наклонное), причем два последних на практике чаще всего обозначают одно и то же, поскольку если для гарнитур типа антиквы, как правило, используется только курсивный вариант, а для гротеска – наклонный.

— font-weight: вес шрифта
 Свойство font-weight чаще всего применяется со значениями normal (обычный) и bold (полужирный). Как обычно, свойство CSS имеет большую гибкость по сравнению со средствами HTML. Прежде всего – это возможность изменять вес шрифта относительно унаследованного, для чего предусмотрены значения bolder и lighter, делающие шрифт жирнее или тоньше соответственно. Другая особенность – указание веса шрифта при помощи числового значения от 100 до 900 с шагом 100. При этом за нормальное начертание принимается 400, а за полужирное – 700.

—text-indent: отступ первой строки текста в блоке;
Начнем с отступов – свойства text-indent. Оно определяет отступ первой строки теста в блоке. Выражаясь более точно, оно определяет отступ первого блока, который входит в первую строку группы линейных блоков, образующих данный структурный блок. При этом смещение происходит относительно левого (или правого при расположении текста справа налево) края линейного блока.

В качестве значения для text-indent может указываться либо определенный размер, либо значение в процентах. Во втором случае результат вычисляется браузером относительно ширины содержащего блока. Применительно к абзацу типичное смещение может составлять величину в 2 или 3 символа:
p {text-indent: 2.5em;}
Поскольку исторически сложилось так, что браузеры выделяют абзацы не красной строкой, а интервалом, то в случае использования отступов было бы логично этот интервал убрать. Делается это путем назначения внешним полям нулевой величины:
p {text-indent: 2.5em; margin-top: 0; margin-bottom 0;}

—text-align: выравнивание текста;
свойство, которое применяется едва ли не чаще всех других, а именно – горизонтальное выравнивание текста, позволяет выровнять строковое содержимое блока:
p {text-align: both;}
В данном случае мы создали правило, по которому содержимое абзацев будет выравниваться по ширине (т.е. по обоим краям). Разумеется, можно выравнивать и по одной из сторон – левой (left) или правой (right), а так же по центру (center):

—text-decoration: оформление текста;
свойство может иметь значение none, принятое по умолчанию для большинства элементов (кроме ссылок), либо одно или несколько из следующих возможных значений:

• underline. Подчеркнутый текст;
• overline. «Подчеркнутый сверху», т.е. линия располагается над текстом. Это значение не поддерживается MSIE 4 и Netscape 4;
• line-through. «Зачеркнутый», т.е. линия перечеркивает текст;
• blink. Текст мигает, т.е. становится то видимым, то невидимым. Это значение не поддерживается MSIE.

—text-transform:  трансформация текста;
специальное свойство, отвечающее за преобразование регистра символов – text-transform. Оно может иметь такие значения, как uppercase, lowercase и capitalize. Первые два значения назначают преобразование символов в верхний и в нижний регистр соответственно, а последнее – делает первые буквы слов прописными, не влияя на остальные. Наконец, еще одно значение, none, никак не влияет на текст и является принятым по умолчанию.

—word-spacing: установка пробела между слов; 
Устанавливает интервал между словами. Если установлен параметр выравнивания justify, то атрибут word-spacing не действует, поскольку интервал между словами будет установлен принудительно, чтобы строка текста была выровнена по правому и левому краю.

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. Значение параметра может быть и отрицательным, но следует проверять работоспособность в разных браузерах. Процентная запись не применима. Аргумент normal устанавливает интервал между словами как обычно.

—letter- spacing: расстояние между буквами
Определяет интервал между символами в пределах элемента. Браузеры обычно устанавливают расстояние между символами, исходя из типа и вида шрифта, его размеров и настроек операционной системы. Чтобы изменить это значение и применяется данный атрибут. Допустимо использовать отрицательное значение, но в этом случае надо убедиться, что сохраняется читабельность текста.

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. Наилучший результат дает использование относительных единиц основанных на размере шрифта (em и ex). Аргумент normal задает интервал между символами как обычно.

— font-size: размер шрифта;
Определяет размер шрифта элемента. Размер может быть установлен несколькими способами. Набор констант (xx-small, x-small, small, medium, large, x-large, xx-large) задают размер, который называется абсолютным. По правде говоря, они не совсем абсолютны, поскольку зависят от настроек браузера и операционной системы.

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

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

Для задания абсолютного размера используются следующие значения: xx-small, x-small, small, medium, large, x-large, xx-large. Относительный размер шрифта задается аргументами larger и smaller.

Также разрешается использовать любые допустимые единицы CSS: em (высота шрифта элемента), ex (высота символа х), пункты (pt), пикселы (px), проценты (%) и др. За 100% берется размер шрифта родительского элемента. Отрицательные значения не допускаются

— font-variant : установка всего текста заглавными буквами;
Определяет, как нужно представлять строчные буквы — делать их все прописными уменьшенного размера или оставить без изменений. Такой способ изменения символов называется капителью.

Значение normal не изменяет регистр символов, оставляя его по умолчанию. Аргумент small-caps модифицирует все строчные символы как заглавные уменьшенного размера. 

 

Добавить комментарий

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

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

Почему? #

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

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

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

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

А как надо? #

Стили текста достаточно задать один раз в 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.Там же можно увидеть что чем перезаписалось.

Итого

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