Font size style p: How to change font size in HTML?

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

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

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

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

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

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

 

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

Центрировать весь документ с помощью CSS:

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

 

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

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

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

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

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

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

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

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

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

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

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

очистить = нет|левый|правый|все [КИ]

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

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

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

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

| |
**********
 

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

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

| | ------
**********
 

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

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

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

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

 

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

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


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

| |
**********
------------------
...

 

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

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

 TT  |  I  |  B  |  БОЛЬШОЙ  |  МАЛЕНЬКИЙ  ">


 

Начальный тег: обязательный , конечный тег: обязательный

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

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

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

TT: Отображается как телетайп или моноширинный текст.

I: Выводится курсивом.

B: Отображается жирным шрифтом.

BIG: Отображает текст «крупным» шрифтом.

SMALL: Отображает текст «мелким» шрифтом.

УДАР и S: Устарело. Текст в стиле зачеркнутого рендеринга.

U: Устарело. Отображает подчеркнутый текст.

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

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

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

С помощью таблицы стилей. Чтобы указать синий курсивный текст в абзаце с помощью CSS:

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


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

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

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

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

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

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

размер   = cданные [CN]

Устарело. Этот атрибут устанавливает размер шрифта. Возможные значения:

• Целое число от 1 до 7. Это устанавливает для шрифта некоторый фиксированный размер, чей рендеринг зависит от пользовательского агента. Не все пользовательские агенты могут визуализировать все семь размеров.
• Относительное увеличение размера шрифта. Значение «+1» означает один размер больше. Значение «-3» означает на три размера меньше. Все размеры принадлежат шкала от 1 до 7.

цвет = цвет [КИ]

Устарело. Этот атрибут устанавливает цвет текста.

лицо = cданные [КИ]

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

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

• идентификатор , класс (для всего документа идентификаторы)
• язык (язык информация), дир (направление текста)
• заголовок (заголовок элемента)
• стиль (встроенный стиль Информация)

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

Элемент BASEFONT устанавливает базовый шрифт size (с использованием атрибута size ). Размер шрифта изменения, достигнутые с помощью FONT , относятся к базовый размер шрифта установлен на БАЗОВЫЙ ШРИФТ . Если BASEFONT не используется, базовый размер шрифта по умолчанию 3.

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

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

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

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

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

15,3 Правила:

 HR  - O ПУСТОЙ -- горизонтальная линейка -->

 

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

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

выровнять = левый|центр|правый [КИ]

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

• слева : правило отображается заподлицо слева.
• центр : правило центрировано.
• справа : правило отображается справа.

По умолчанию align=center .

затенение [КИ]

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

размер = пикселей [CI]

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

ширина = длина [CI]

Устарело. Этот атрибут указывает ширину правила. Ширина по умолчанию 100%, т. е. правило распространяется на все полотно.

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

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

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

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

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

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

Какое свойство CSS управляет размером текста?

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

Существуют в основном две единицы, в которых записывается размер шрифта в CSS:

1. Абсолютные значения размера
2. Относительные значения

Подробные пояснения см. в разделах «Абсолютные значения размера» и «Относительные значения».

Синтаксис

Давайте посмотрим на синтаксис, используемый для размера шрифта в CSS:

 
 
    <стиль>
        п {
                 размер шрифта: значение;
         }
     
 

Пример

Пример 1 (с использованием абсолютного значения):

Давайте рассмотрим простой пример, чтобы понять, как размер шрифта в CSS влияет на текст на веб-странице. Мы будем отображать простой текст с размером шрифта 50 пикселей (абсолютное значение).

Код:

 
 

<голова>
    <мета-кодировка="UTF-8">
    
     0">
    
    
    <стиль>
        п {
                 размер шрифта: 50px;
         }
     

<тело>
    
Scaler Topics – это интерактивная платформа, на которой начинающие программисты могут учиться и совершенствовать свои навыки кодирования
    


 

Вывод:

Объяснение:

В приведенной выше программе мы использовали Internal CSS для использования свойства размера шрифта для абзацев внутри тега body. Мы использовали px (значение пикселя), чтобы изменить размер текста внутри тега параграфа (p). Здесь мы также использовали тег strong для отображения выбранных слов жирным шрифтом.

Пример 2 (с использованием относительного значения):

Возьмем другой пример, в котором мы будем использовать другое значение размера шрифта в CSS. Мы будем отображать простой текст с размером шрифта больше (относительное значение).

Код:

 
 

<голова>
    <мета-кодировка="UTF-8">
    
    
    
    
    <стиль>
        п {
                размер шрифта: больше;
        }
     

<тело>
    
Scaler Topics – это интерактивная платформа, на которой начинающие программисты могут учиться и совершенствовать свои навыки кодирования
    


 

Вывод:

Объяснение:

Это та же программа, что и в «Примере 1», в котором мы использовали Внутренний CSS для использования свойства размера шрифта для абзацев внутри тега body. Мы использовали больше (относительное значение), чтобы изменить размер текста внутри тега абзаца (p). Здесь мы также использовали сильный тег, чтобы выделить выбранные слова жирным шрифтом.

Абсолютные значения размера

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

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

a.) Абсолютные значения ключевых слов

Абсолютные значения ключевых слов содержат некоторые ключевые слова, которые используются в свойстве font-size для установки абсолютного значения. Эти ключевые слова следующие:

• большой
• xx-большой
• х-большой
• средний
• маленький
• хх-маленький
• х-маленький

b.) Абсолютные значения длины

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

• дюймов (дюймы)
• мм (миллиметр)
• см (сантиметр)
• пикселей (пикселей)
• пт (баллы)
• шт (пики)

Примечание: Если мы не укажем значение свойства font-size, то средний будет назначен значением по умолчанию.

c.) Пример кода для установки размера текста с использованием абсолютных значений

Здесь мы использовали абсолютные значения в разных абзацах:

Код:

 
 

<голова>
    <мета-кодировка="UTF-8">
    
    
    
    
    <стиль>
        .пара-1 {
                размер шрифта: средний;
        }
        .пара-2 {
                размер шрифта: x-большой;
        }
        . пара-3 {
                размер шрифта: 30px;
        }
        .пара-4 {
                размер шрифта: 2 шт.;
        }
        .пара-5 {
                размер шрифта: 20pt;
        }
        .пара-6 {
                размер шрифта: x-маленький;
        }
         
    

<тело>
    
Scaler Topics – это интерактивная платформа для начинающих программистов (средний уровень)
    
Scaler Topics – это интерактивная платформа для начинающих программистов (x-large)
    
Scaler Topics – это интерактивная платформа для начинающих программистов (пиксели)
    
Scaler Topics – это интерактивная платформа для начинающих программистов (picas)
    
Scaler Topics – это интерактивная платформа для начинающих программистов (очки)
    
Scaler Topics – это интерактивная платформа для начинающих программистов (x-small)
    


 

Вывод:

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

Относительные значения

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

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

a.) Относительные значения ключевых слов

Некоторые определенные ключевые слова используются со свойствами размера шрифта для изменения размера текста. Эти ключевые слова следующие:

• больше
• меньше

b.) Значения относительной длины

Некоторые определенные единицы длины используются со свойствами размера шрифта для изменения представления текста. Эти единицы длины следующие:

• бэр
• эм
• %(проценты)

c.) Пример кода для установки размеров текста с использованием относительных значений

Код:

 


<голова>
    <мета-кодировка="UTF-8">
    
    
    
    
    <стиль>
        .пара-1 {
                размер шрифта: меньше;
        }
        .пара-2 {
                размер шрифта: больше;
        }
        .пара-3 {
                размер шрифта: 2rem;
        }
        .пара-4 {
                размер шрифта: 1.5em;
        }
        .пара-5 {
                размер шрифта: 80%;
        }
    

<тело>
    
Scaler Topics – это интерактивная платформа для начинающих программистов (меньше)
    
Scaler Topics – это интерактивная платформа для начинающих программистов (крупнее)
    
Scaler Topics – это интерактивная платформа для начинающих программистов (rem)
    
Scaler Topics – это интерактивная платформа для начинающих программистов (em)
    
Scaler Topics – это интерактивная платформа для начинающих программистов (в процентах)
    


 

Вывод:

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

Responsive Values ​​

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

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

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

• vw (ширина области просмотра)
• vh (Высота области просмотра)
• vmin (минимум области просмотра)
• vmax (максимум области просмотра)

a.

Код:

 
 

<голова>
    <мета-кодировка="UTF-8">
    
    
    
    
    <стиль>
        .пара-1 {
                размер шрифта: 3vw;
        }
        .пара-2 {
                размер шрифта: 5vh;
        }
        .пара-3 {
                размер шрифта: 5vmin;
        }
        .пара-4 {
                размер шрифта: 6vmax;
        }
    

<тело>
    
Scaler Topics – это интерактивная платформа для начинающих программистов (ширина области просмотра)
    
Scaler Topics – интерактивная платформа для начинающих программистов (высота окна просмотра)
    
Scaler Topics – это интерактивная платформа для начинающих программистов (минимум области просмотра)
    
Scaler Topics – это интерактивная платформа для начинающих программистов (максимум области просмотра)
    


 

Выходы:

• Выходы (на экране ноутбука):

• Вывод (видимый на экране мобильного):

• Вывод (на экране планшета):

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