Урок 3. заголовки и форматирование текста

Содержание:

Свойства шрифта
Использование горизонтальных разделителей
Тэги изменения начертания шрифта
Теги группировки
Работа с текстом в ворде.
Что такое семантика?
Как сделать жирный шрифт на HTML и CSS
- Жирный текст на HTML
- Жирный текст на CSS
HTML тег подчеркивания текста u
Использование заголовков
Теги оформления основного текста
CSS размер шрифта
- Описание
- Значения
Duis te feugifacilisi
- Браузеры

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

CSS предоставляет несколько свойств для стилизации шрифтов, таких как: font-family, font-style, font-option, font-weight и font-size. В следующем разделе описывается каждое из этих свойств.

Семейство шрифтов (font-family)

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

Свойство font-family может содержать несколько имен шрифтов в качестве резерва. Сначала идет название приоритетного шрифта, а затем любые шрифты, которые могли бы заменить первый, если он недоступен. Вы должны закончить список общим семейством шрифтов: с засечками (serif), без засечек (sans-serif), моноширинный (monospace), курсивный (cursive) и фэнтезийный (fantasy). Объявление семейства шрифтов может выглядеть так:

p {
  font-family: "Times New Roman", Times, serif;
}

Если имя семейства шрифтов содержит более одного слова, оно должно быть заключено в кавычки, такие как «Times New Roman», «Courier New», «Trebuchet MS» и т.д.

Стиль шрифта

блок 1

Свойство font-style устанавливает стиль шрифта. Возможные значения этого свойства: нормальное (normal), курсивное (italic) или наклонное (oblique).

p.one {
  font-style: normal;
}
p.two {
  font-style: italic;
}
p.three {
  font-style: oblique;
}

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

Свойство font-size устанавливает размер шрифта для текстового содержимого элемента.

Есть несколько способов указать значения размера шрифта, например, при помощи ключевых слов, пикселей (px) или em.

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

Установив размер шрифта при помощи ключевого слова в элементе body, вы можете установить относительный размер шрифта повсюду на странице, что дает вам возможность легко масштабировать шрифт. Абсолютный размер указывается с использованием одного из следующих ключевых слов: xx-small, x-small, small, medium, large, x-large, xx-large.

Относительный размер указывается с помощью одного из следующих ключевых слов: smaller, larger.

body {
  font-size: large;
}
h1 {
  font-size: larger;
}
p {
  font-size: smaller;
}

Однако этот способ не рекомендуется использовать. Давайте рассмотрим как можно установить размер шрифта при помощи px и em.

Установка размера шрифта в пикселях

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

h1 {
  font-size: 24px;
}
p {
  font-size: 14px;
}

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

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

Единица em относится к размеру шрифта родительского элемента.

Размер значения em является динамическим. При определении свойства font-size, em равно размеру шрифта, который применяется к родительскому элементу.

Если вы установите размер шрифта 20px для элемента body, то 1em = 20px и 2em = 40px.

Если вы нигде не указали размер шрифта на странице, то будет использоваться размер, который установлен в браузере по умолчанию, обычно он составляет 16 пикселей. Итак, по умолчанию 1em = 16px, а 2em = 32px.

h1 {
  font-size: 2em; /* 32px/16px=2em */
}
p {
  font-size: 0.875em; /* 14px/16px=0.875em */
}

Толщина шрифта (weight)

Свойство font-weight указывает толщину или жирность шрифта.

Возможные значения свойства font-weight: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 и inherit.

p {
  font-weight: bold;
}

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

блок 3

Использование горизонтальных разделителей

Html форматирование

При оформлении текста можно воспользоваться горизонтальными разделителями. Для того чтобы их вставить нужно воспользоваться тэгом <HR>.Линия всегда начинается с новой строки, а после нее все элементы отображаются на следующей строке. Этот элемент является одинарным тэгом и не требует закрытия.

У тэга HR есть параметры:

SIZE — устанавливает толщину линии.

Пример:

<HR SIZE=”3”>

WIDTH – устанавливает ширину линии в пикселах или процентах.

Пример:

<HR WIDTH =”300”>
<HR WIDTH =”25%”>

COLOR – задает линии определенный цвет.

Пример:

<HR COLOR =”red”>

ALIGN определяет выравнивание линии.

Пример:

<HR ALIGN=”LEFT”>

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

Пример:

<HTML>
<HEAD>
<TITLE>   Стихотворение </TITLE>
</HEAD>
<BODY>
<H1 ALIGN = “CENTER”>
Унылая пора! Очей очарованье!...
</H1>
<H3 ALIGN = “RIGHT”>
Александр Пушкин
</H3>
<P>
Унылая пора! Очей очарованье!   <BR>
Приятна мне твоя прощальная краса —   <BR>
Люблю я пышное природы увяданье,   <BR>
В багрец и в золото одетые леса,   <BR>
В их сенях ветра шум и свежее дыханье,   <BR>
И мглой волнистою покрыты небеса,   <BR>
И редкий солнца луч, и первые морозы,   <BR>
И отдаленные седой зимы угрозы.   <BR>
</P>
<HR COLOR="yellow" SIZE="2">
</BODY>
</HTML>

Замечание. Если для одного тэга мы применяем несколько атрибутов, то достаточно перечислить их через пробел.

Результат:

Тэги изменения начертания шрифта

Форматирование текста в «telegram»: как писать жирным шрифтом

Создадим новый документ.

Пример:

<HTML>
<HEAD>
<TITLE>   Формулы </TITLE>
</HEAD>
<BODY>
<H3 ALIGN = “CENTER”>
Пример некоторых математических формул
</H3>
здесь будут записаны 2 математические формулы
<H3 ALIGN = “CENTER”>
Пример некоторых химических формул
</H3>
здесь будут записаны 2 химические формулы
</BODY>
</HTML>

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

Пример:

<I>
здесь будут записаны 2 математические формулы
</I>

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

Пример:

<B>
здесь будут записаны 2 химические формулы
</B>

Результат:

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

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

Пример:

<HTML>
<HEAD>
<TITLE>   Формулы </TITLE>
</HEAD>
<BODY>
<H3 ALIGN = “CENTER”>
Пример некоторых математических формул
</H3>
<I>
здесь будут записаны 2 математические формулы <BR>
</I>
(a+b) <SUP> 2</SUP> =a<SUP> 2</SUP> +2*a*b+b<SUP> 2</SUP> <BR>
(a+b)*(a-b)=a<SUP> 2</SUP>-b<SUP> 2</SUP> <BR>
<H3 ALIGN = “CENTER”>
Пример некоторых химических формул
</H3>
<B>
здесь будут записаны 2 химические формулы
</B>
H<SUB> 2</SUB> O <BR>
H<SUB> 2</SUB> SO<SUB> 4</SUB>
</BODY>
</HTML>

Результат:

Теги группировки

Редактирование и форматирование текста

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

Внутри тегов

заключается абзац.

<p>Первый абзац</p>
<p>Второй абзац</p>

Тег осуществляет переход на следующую строку внутри абзаца (отступа перед строкой не будет).
<hr> позволяет нарисовать горизонтальную линию. Использовать его можно для более наглядного разделения текста. Атрибуты width, size, color, align и noshade задают ширину, толщину, цвет, выравнивание и отсутствие 3D-эффекта линии соответственно.

      <p>Строка над линией. <hr width=”10” color=”#FE2E2E”>Строка под линией.</p>

Дата размещения/обновления информации: 29.04.2021 г.
Сообщить об ошибке

Работа с текстом в ворде.

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

В статье «Редактирование текста в Word» мы рассмотрели основные инструменты необходимые для работы с текстом. Теперь давайте попробуем применить теорию на практике. Самое первое правило работы с текстом это применение всех инструментов только к выделенной области текста. Что бы выделить текст Вам необходимо навести курсор мыши на начало нужного участка текста, что бы появилась вертикальная палочка. Затем нажимаем правую клавишу мыши и удерживая ее в нажатом состоянии плавно ведем по тексту. Выделенная область текста будет иметь темный фон. Теперь можно применять различные инструменты к выделенной области. Смотрим пример:

1. Выделяем текст и применяем инструменты выделения текста:

— и все три инструмента вместе

Смотрим пример:

Все три инструмента применяются для выделения или акцентирования определенных участков текста

То на что следует обратить внимание. Не следует весь текст в документе делать курсивом или жирным, как бы для красоты

Честно, смотреться гадко и не профессионально.

2. Применяем инструменты выравнивания текста.

— выравнивание по левому краю

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

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

— выравнивание по ширине страницы

Смотрим пример:

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

3. Стиль шрифта и размер шрифта.

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

Обратите внимание на стиль и размер шрифта, он во всем документе одинаков. За исключением заголовок делают немного больше размером

Смотрим пример:

4. Применяем стилистические эффекты.

— Анимация. Применяется для придания тексту оригинального отображения. (выделено зеленым цветом)

— Цвет выделения текста. Применяется для выделения наиболее важных участков текста. Аналог ручной работы это выделитель или маркер. Для выделения текста так же применяется «Заливка». (выделено красным цветом)

— Цвет текста. Так же применяется для выделения особо важных участков текста. А так же для придания тексту красочного вида. (выделено оранжевым цветом)

— Регистр. Буквы выделенного текста делает заглавными, строчными, а так же различные варианты написания с заглавной или строчной буквы в начале предложения. (выделено розовым цветом)

Смотрим пример:

Что такое семантика?

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

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

Как сделать жирный шрифт на HTML и CSS

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

Жирный текст на HTML

Для выделения определенного текста жирным используются специальные HTML теги — и . Например следующий код:

<p>Обычный текст.</p>
<p><b>Жирный текст</b>.</p> 
<p><strong>Жирный текст strong</strong>.</p>

Обычный текст.
Жирный текст.
Жирный текст strong.

На выходе дает такую картинку:

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

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

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

Вы также можете встретить прописанный в HTML жирный шрифт с помощью стилей:

<p>Пример жирного текста.</p>
<p>Пример текста с <span>жирным</span> словом.</p>

Пример жирного текста.
Пример текста с жирным словом.

На сайте это отображается так:

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

Жирный текст на CSS

Дабы сделать в CSS жирный шрифт используется свойство font-weight. С его помощью указывается «насыщенность» фрагмента текста. Значения могут быть от 100 до 900, но наиболее часто используемые это:

bold (жирный) — 700 по умолчанию;
normal (обычный) — 400 по умолчанию.

Есть также варианты значений bolder и lighter, которые меняют шрифт в зависимости от родителя на более или менее жирный соответственно.

Чтобы задать жирный текст в CSS нужно тому или иному элементу задать какой-то стиль, например:

<p>Обычный текст с <span>жирным выделением</span> по центру.</p>

Обычный текст с жирным выделением по центру.

Далее в CSS стилях вы определяете для него жирность вместе с другими свойствами по типу подчеркивания текста и т.п.:

. my-bold-font {
    color: black;
    font-weight: 700; 
 }

. my-bold-font {
color: black;
font-weight: 700;
}

Либо можно написать:

. my-bold-font {
    color: black;
    font-weight: bold;
 }

. my-bold-font {
color: black;
font-weight: bold;
}

Разницы нет никакой. Кстати, если говорить о HTML теге , то для него по умолчанию прописан такой стиль:

strong {
    font-weight: bold;
}

strong {
font-weight: bold;
}

Тут хотелось отметить один небольшой нюанс, который мне рассказали на курсах верстки — если вы создаете для какого-то элемента новый класс, то желательно использовать более-менее «понятное название». Например, в примере выше стиль class=»my-bold-font» выглядит логичнее чем class=»new-font», т.к. можно отчасти понять его назначение. Это плюс для тех, кто будет смотреть и использовать вашу верстку в дальнейшем.

В следующей статье расскажу про интересные жирные шрифты, которые мне удалось найти.