Html стиль текста: Основы редактирования текста в HTML — Изучение веб-разработки

Конспект «Оформление текста» — Оформление текста — HTML Academy

Свойство font-size

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

Самая часто используемая единица измерения размера шрифта — пиксели px:

p {
  font-size: 20px;
}

Но, чтобы при изменении основного размера шрифта родителя его дочерние элементы пропорционально меняли свои размеры шрифта, есть специальная единица измерения — em.

Величина 1em — это такой же размер шрифта, что и у родителя. Соответственно, если нужно, чтобы шрифт дочернего элемента был всегда в 2 раза больше родительского, то надо задать значение 2em:

h2 {
  font-size: 2em;
}

Свойство line-height

Свойство управляет высотой строки или межстрочным интервалом.

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

p {
  font-size: 10px;
  line-height: normal; /* значение будет примерно 12px */
}

Значение normal позволяет всем нестилизованным текстам выглядеть удобочитаемо. Однако, если есть необходимость отойти от стилизации по умолчанию, line-height можно задать фиксированное абсолютное значение в px.

p {
  font-size: 16px;
  line-height: 26px;
}

Если нужно задать line-height относительное значение, но не такое, как normal, то значение задаётся в процентах или в виде множителя. В таком случае браузер вычисляет значение динамически в зависимости от 

p {
  font-size: 10px;
  line-height: 150%; /* вычисленное значение: 10px * 150% = 15px */
  line-height: 2;    /* вычисленное значение: 10px * 2 = 20px */
}

Относительные значения более гибкие, чем абсолютные. Но для простых сайтов фиксированных font-size и line-height будет вполне достаточно.

Свойство font-family

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

body {
  font-family: "PT Sans", "Arial", sans-serif;
}

Свойство font-weight

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

Например:

h2 {
  font-weight: 400; /* то же самое что и normal */
}
p {
  font-weight: bold; /* то же самое что и 700 */
}

Свойство text-align

Описывает, как выравнивается текст и другие

Свойство может принимать следующие значения:

1. left — выравнивание по левому краю блока, это значение по умолчанию;
2. right — по правому краю блока;
3. center — по центру блока;
4. justify — по ширине блока, при этом слова в строке будут размещаться так, чтобы занять равномерно всё пространство строки (пробелы между словами в таком случае становятся неравномерными, так как браузер «растягивает» слова в строке).

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

HTML:
<p>
  Я текст внутри абзаца
</p>
CSS:
p {
  text-align: center;
}

Свойство vertical-align

Свойством можно выравнивать инлайновые элементы относительно содержащей его строки. Самый простой пример — выровнять картинку <img> по вертикали в текстовой строке.

У свойства vertical-align много значений, но самые часто используемые:

1. top — выравнивание по верхнему краю строки;
2. middle — по середине строки;
3. bottom — по нижнему краю строки;
4. baseline — по базовой линии строки (значение по умолчанию).

В отличие от text-align свойство vertical-align задаётся самому элементу, а не содержащему его контейнеру:

HTML:
<p>
  <img src="picture.png" alt="Я картинка">
  Я текст внутри абзаца
</p>
CSS:
img {
  vertical-align: middle;
}

Свойство color

Цветом текста можно управлять свойством color.

Цвет может быть задан в виде ключевого слова (полный список ключевых слов приводится в спецификации). Например:

color: black; /* чёрный цвет */
color: red;   /* красный цвет */
color: white; /* белый цвет */

Ещё один вариант указания цвета — в виде шестнадцатеричного значения. В этом случае цвет формируется из красной, зелёной и синей составляющих, заданных в виде шестнадцатеричного числа от 00 до ff. Помимо шести, цветовой код может содержать три знака, в этом случае второй символ в цветовых составляющих дублируется первым:

color: #000000; /* чёрный цвет */
color: #f00;    /* красный цвет, то же что #ff0000 */
color: #fff;    /* белый цвет, то же что #ffffff */

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

color: rgb(0, 0, 0)       /* чёрный, то же что #000000 */
color: rgb(255, 0, 0)     /* красный, то же что #ff0000 */
color: rgb(255, 255, 255) /* белый, то же что #ffffff */

У функции rgb есть расширенная версия — rgba. В этом случае помимо указания цвета последним значением указывается степень непрозрачности цвета — alpha. Значение может быть от 0

color: rgba(0, 0, 0, 0.5)      /* чёрный, непрозрачный на 50% */
color: rgba(255, 0, 0, 0.3)     /* красный, непрозрачный на 30% */
color: rgba(255, 255, 255, 0.9) /* белый, непрозрачный на 90% */

Контраст цвета текста и фона

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

p {
  /* идеальный контраст: цвет текста белый, цвет фона — чёрный */
  background-color: #000000;
  color: #ffffff;
}
span {
  /* плохой контраст: цвет текста и фона — серые */
  background-color: #cccccc;
  color: #dddddd;
}

Свойство white-space, управление пробелами

Браузер игнорирует множественные пробелы и переносы строк в HTML-коде. С помощью свойства white-space можно управлять пробелами и переносами строк. Свойство принимает значения:

• nowrap — схлопывает лишние пробелы и отображает весь текст одной строкой без переносов;
• pre — сохраняет пробелы и переносы как в исходном коде аналогично тегу <pre>;
• pre-wrap — работает как значение pre, но добавляет автоматические переносы, если текст не помещается в контейнер;
• normal — режим по умолчанию: лишние пробелы и переносы строк схлопываются, текст переносится, пробелы в конце строк удаляются.

Свойство text-decoration

Задаёт дополнительное оформление текста. Значения свойства:

1. underline — подчёркивание;
2. line-through — зачёркивание;
3. overline — надчёркивание;
4. none — убирает вышеперечисленные эффекты.

К тексту можно одновременно применить несколько эффектов, если перечислить значения через пробел:

p {
  text-decoration: underline; /* подчёркнутый текст */
}
span {
  /* подчёркнутый и зачёркнутый текст */
  text-decoration: underline line-through;
}

Свойство text-decoration — составное. Оно раскладывается на отдельные свойства:

• text-decoration-line — вид линии: зачёркивание, подчёркивание или надчёркивание;
• text-decoration-style — стиль линии, может принимать значения:
  • solid — сплошная линия;
  • double — двойная линия;
  • dotted — точечная линия;
  • dashed — пунктирная линия;
  • wavy
     — волнистая линия.
• text-decoration-color — цвет линии.

Свойство font-style

Свойством можно задать начертание текста. Его основные значения:

1. normal — обычное начертание;
2. italic — курсивное начертание;
3. oblique — наклонное начертание.

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

Если отдельного курсивного начертания в шрифте не предусмотрено, то браузер сделает текст наклонным, то есть сымитирует курсив. Что равноценно заданию тексту значения font-style: oblique.

Свойство text-transform

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

1. lowercase — все строчные;
2. uppercase — все заглавные;
3. capitalize — каждое слово начинается с большой буквы;
4. none — отменяет изменение регистра.

Отступы

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

За отступы в CSS отвечают два свойства: padding задаёт внутренние отступы в блоке, а margin задаёт внешние отступы.

Проектирование отчетов > HTML теги

Stimulsoft Reports предоставляет уникальную возможность оформления текста при помощи HTML тегов.

Третье слово выделено при помощи другого начертания шрифта

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

Третье слово <b>выделено</b> при помощи другого начертания шрифта

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

HTML теги могут быть включены только в текстовое выражение, т.е. их использование возможно только в свойстве Текст (Text), компонента Текст (Text).

Кроме этого, HTML теги могут быть включены только в итоговую текстовую часть выражения. Например, следующие выражения верны:

Это простое <i>выражение {1+2}</i>

Это простое <i>выражение</i> {1+2}

Это простое выражение <i>{1+2}</i>

А эти неверны:

Это простое <i>выражение {1</i>+2}

Это простое <i>выражение {1+2</i>}

Это простое выражение {<i>1+2}</i>

Во втором случае HTML теги находятся в теле выражений на языке С# или VB. Net, и фактически последние становятся некорректными. Например, выражение

1+2</i>

невозможно вычислить.  Любые HTML теги могут быть вложенными. Например:

Это <b>простое <i>выражение {1+2}</i></b>

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

Стоит учитывать, что по умолчанию HTML теги игнорируются. Чтобы разрешить использование HTML тегов в текстовом выражении нужно использовать свойство Разрешить Html теги (AllowHtmlTags).

Этому свойству нужно присвоить значение истина (true), для того чтобы теги учитывались при выводе. Если в текстовом выражении используются HTML теги, то переводы строки в выражении игнорируются. В этом случае, для перевода строки нужно использовать тег <br>.

Таблица html тегов, которые поддерживаются в Stimulsoft

стилей HTML

Атрибут стиля — это новый атрибут HTML. Он представляет CSS в HTML.

Попробуйте сами

Атрибут стиля HTML

Назначение атрибута стиля:

Чтобы обеспечить общий стиль все HTML-элементы.

Стили были представлены в HTML 4 как новый и предпочтительный способ оформления HTML. элементы. С помощью стилей HTML стили можно добавлять к элементам HTML напрямую, с помощью атрибута стиля или косвенно в отдельных таблицах стилей (CSS файлы).

Вы можете узнать все о стилях и CSS в нашем учебнике по CSS.

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

Примеры стилей HTML

стиль = «цвет фона: желтый»

стиль = «размер шрифта: 10 пикселей»

стиль = «семейство шрифтов: Таймс»

стиль = «выравнивание текста: по центру»

В HTML 4 некоторые теги и атрибуты определены как устаревшие. Устаревшие означает, что они не будут поддерживаться в будущих версиях HTML. и XHTML.

Сообщение ясно: избегайте использования устаревших тегов и атрибутов.

Следует избегать следующих тегов и атрибутов:

Для всего вышеперечисленного: вместо этого используйте стили.

<тело>

Атрибут стиля определяет стиль для элемента.

Попробуй себя: цвет фона

Новый атрибут стиля делает «старый» атрибут bgcolor устаревший.

Попробуй себя: Фон по старинке

Семейство шрифтов, цвет и размер

Атрибут стиля определяет стиль для элемента

.

Попробуйте сами: Пример шрифта

Новый атрибут стиля делает старый тег устаревшим.

Попробуйте сами: Шрифты по старинке

 HTML *
{
   размер шрифта: 1em !важно;
   цвет: #000 !важно;
   семейство шрифтов: Arial !важно;
}
 

 body {
    шрифт: обычный 10px Verdana, Arial, без засечек;
}
 

 h3, h4 {
    размер шрифта: 14px;
}
 

 корпус {
    шрифт: 16px Arial, без засечек;
}
 

 * {
    шрифт: Verdana, Arial, 'sans-serif' !important;/* <-- шрифты */
}