Как изменить размер текста в HTML. Атрибут size

В html размер текста задается с помощью атрибута size тега <font>, известного нам из предыдущего урока. Этот параметр очень ограничен, так как размеров всего 7 и куда лучше задавать размер текста в css. Но мы же только постигаем основы, поэтому все же давайте разберемся, как изменить размер текста в html.

С помощью атрибута size тега <font> можно задать размер от 1 до 7. Заметьте, единиц измерения нет никаких, просто 1 – самый маленький размер, а 7 – самый большой размер. Записывается это так:

<font size=размер>какой-то текст</font>



Обратите внимание, сам размер можно не брать в двойные кавычки, как мы делали это у других параметров, после знака равно мы сразу указываем размер текста. Хотя кавычки никто не запрещает можно записывать так size=размер и так size=»размер».

Закрепим теорию и откроем Notepad++, где наберем следующий код:

<html> <head> <title>Урок 5. Размер текста в html</title> </head> <body> <p><font size=1>Этот текст размера 1</font></p> <p><font size=2>Этот текст размера 2</font></p> <p><font size=3>Этот текст размера 3</font></p> <p><font size=4>Этот текст размера 4</font></p> <p><font size=5>Этот текст размера 5</font></p> <p><font size=6>Этот текст размера 6</font></p> <p><font size=7>Этот текст размера 7</font></p> </body> </html>

Как обычно сохраним файл с расширением .html и откроем его в браузере:

Видим, каждому абзацу задан свой размер от 1 до 7. Таким способом мы задали тексту абсолютный размер, но куда лучше назначать размер относительный, так как в браузере уже стоит по умолчанию size=3. Для того, чтобы указать относительный размер текста, нужно приписать знак плюс или минус. Например:

<font size=-1>Текст</font>

И так как в браузере стоит size=3, то мы можем назначать для размера значения от – 2 до +4. То есть, если мы запишем size=-1, то текст будет иметь размер 3 – 1 = 2. Рассмотрим пример:


<html>
  <head>
    <title>Урок 5. Относительный размер текста в html</title>
  </head>
  <body>
    <p><font size=-2>Этот  текст размера 1</font></p>
    <p><font size=-1>Этот текст  размера 2</font></p>
    <p><font>Здесь мы не задали размер, так как текст отобразиться размером 3 по умолчанию</font></p>
    <p><font size=+1>Этот текст  размера 4</font></p>
    <p><font size=+2>Этот  текст размера 5</font></p>
    <p><font size=+3>Этот текст  размера 6</font></p>
    <p><font size=+4>Этот текст  размера 7</font></p>
  </body>
</html>
			

Сохраним файл под другим именем и откроем его в браузере:

Как мы видим, каждому абзацу так же задался размер от 1 до 7. А теперь давайте сравним эту страницу со страницей, где мы задавали абсолютные размеры:

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

А вот что будет, если мы укажем размер, который окажется слишком большим относительно размера по умолчанию в браузере? Например, size=+6? Чтоб было понятнее, объясню: так как в браузере стоит по умолчанию 3 размер, а мы укажем плюс шесть, то это получиться 9 размер. Но мы знаем что размеров, которые можно назначить тексту, всего 7! Рассмотрим все на примере:


<html>
  <head>
    <title>Урок 5. Относительный размер текста в html</title>
  </head>
  <body>
    <p><font size=+1>Этот текст  размера 4</font></p>
    <p><font size=+2>Этот  текст размера 5</font></p>
    <p><font size=+3>Этот текст  размера 6</font></p>
    <p><font size=+4>Этот текст  размера 7</font></p>
    <p><font size=+6>Этот текст  размера 7</font></p>
    <p><font size=+8>Этот текст  размера 7</font></p>
  </body>
</html>
			

Браузер выдаст следующий результат:

Что мы видим? В последних трех абзацах текст имеет одинаковый размер. Для этих абзацев мы задали разные размеры:+4, +6 и +8, а изменений ни каких. Ничего удивительно, браузер увидев, что размеры +6 и +8 выходят за рамки допустимого размера и округлил значение до ближайшего возможного +4. Вот потому в последних трех абзацах текст имеет одинаковый размер. С отрицательными значениями происходит тоже самое, браузер не даст нам выйти за рамки и округлит значение до ближайшего меньшего размера.

Если все это показалось вам запутанным, рекомендую посмотреть видео урок. А на этом все! В следующем уроке мы закончим знакомство с тегом <font> и поговорим о последнем его атрибуте color, который изменяет цвет текста.

как его указать, увеличить, изменить

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

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

Как правильно менять размер текста

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

Так как увеличить размер шрифта в html правильно? Конечно, с помощью css. И не только увеличить, но и уменьшить, поскольку это тоже бывает необходимо.

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

Заголовки же, наоборот, должны быть как минимум в 2-3 раза больше основного содержимого. Также нужно позаботиться о правильном отображении подзаголовков. Здесь правило такое: ни в коем случае размер h4 не должен быть больше, чем у h3.

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

Используем CSS

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

Ключевые слова. В css в качестве значения этому свойству можно прописывать ключевые слова smaller и larger, которые уменьшают и увеличивают шрифт по отношению к родительскому элементу. Можно сказать, что эффект будет аналогичным использованию тегов small и big.

Абсолютный размер с помощью ключевых слов. Другая группа ключей для этого свойства – xx-small, x-small, small, medium, large, x-large и xx-large позволяют задать абсолютное значение. Хотя на самом деле точно вычислить в пикселах его не получится, потому что многое будет зависеть от настроек браузеров. Можно с уверенностью сказать, что использование таких значений точно не сделает сайт кроссбраузерным.

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

body{ font-size: 12px; } а{ font-size: 1.2em; } h2{ font-size: 2.8em; } table td{ font-size: 0.9em; }

body{

font-size: 12px;

}

а{

font-size: 1.2em;

}

h2{

font-size: 2.8em;

}

table td{

font-size: 0.9em;

}

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

Какие плюсы это даст? Если вдруг в браузере измениться шрифт, то у всех элементов он измениться пропорционально и не будет риска, что что-то в вашей верстке сломается. Также относительный размер можно писать в процентах. Тут все тоже просто – 100% это размер шрифта родительского элемента. Соответственно, если у абзаца стоит размер 120%, а у цитат в абзаце – 150%.

Другие факторы, влияющие на текстовое содержимое

В основном, конечно, с помощью font-size можно четко задать размеры шрифтов, но есть еще несколько свойств, которые так или иначе влияют на его объем. Коротко о них:

Font-variant: small-caps – это свойство с таким значением выводит все буквы заглавными, но немного уменьшенными по сравнению с обычными. Вот такое вот нестандартное поведение.

Text-transform: uppercase – весь текст с таким свойством будет выводиться заглавными буквами, что соответствующим образом скажется на их величине.

Text-transform: lowercase – противоположная ситуация, в таком тексте вообще не будет заглавных букв.

Font-weight: bold – тут, я думаю, вам понятно. Это свойство делает текст жирным, а в таком начертании он становится немного крупнее.

Letter-spacing: значение в пикселях – этот параметр позволяет определить расстояние между символами. На сам размер символов никак не влияет, но изменяет именно ширину текста. Можно прописывать положительные и отрицательные значения.

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

Итог

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее Размер шрифта в html

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Меняем размер текста CSS-стилями | Impuls-Web.ru

Приветствую вас на сайте Impuls-Web!

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

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

Навигация по статье:

Обучение фотошоп

Как изменить размер текста CSS-стилями

Для изменения параметров в таблице стилей css существует специализированное свойство font-size, используя которое можно задать размер текста css-стилями в любых, удобных для вас единицах измерения. При этом можно использовать абсолютные и относительные единицу измерения.

Пример:

.font-s{ font-size:20px; }

.font-s{

font-size:20px;

}

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

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

К таким единицам измерения относятся:

  • px (пиксель)
  • pt (пункт)
  • pc (пика)

Кроме этого можно использовать ключевые слова:

  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large

Наиболее распространённой абсолютной единицей измерения шрифта является пиксель (px). Все остальные единицы используются редко, но при желании вы можете использовать и их.

При использовании относительных единиц, таких как: %, em, rem, размер шрифта в CSS будет рассчитываться относительно родительского элемента.

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

Например:

font-size: 2em;

Также расчёт размера шрифта может осуществляться относительно ширины или высоты области просмотра.

Для этого можно воспользоваться такими единицами измерения как:

  • 1vw – 1% от ширины области просмотра
  • 1vh – 1% от высоты области просмотра
  • 1vmin — 1% от меньшей стороны окна браузера
  • 1vmax — 1% от большей стороны окна браузера

Кроме того, так же можно указать размер шрифта CSS ключевым словом в относительном выражении: larger, smaller.

Например:

font-size: larger;

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

При использовании smaller – шрифт будет меньше чем родительском блоке.

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

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

Вот так это будет выглядеть на примере:

Меняем размер <span>шрифта</span> в CSS

Меняем размер <span>шрифта</span> в CSS

Меняем размер шрифта в CSS

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

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

Как научиться продвигать сайты?

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

Не забудьте поделиться статьей в социальных сетях и подписаться на мою рассылку. Увидимся в следующих статьях!

С уважением Юлия Гусарь

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

Размер шрифта или, как он ещё называется в типографике — кегль, определяется высотой символов, которая, в свою очередь, на веб-странице может задаваться как в относительных (em, rem), так и в абсолютных единицах (дюймы (in), миллиметры (mm), пункты (pt) и др).

На вид шрифта влияет не только заданный размер, но и выбор гарнитуры. Шрифт Arial выглядит крупнее, чем шрифт Times того же размера, а шрифт Courier New чуть меньше шрифта Arial (рис. 1). Учитывайте эту особенность при выборе шрифта и его размеров.

Размеры текста на веб-странице

Рис. 1. Размеры текста на веб-странице

На рис. 1 приведены три типа шрифтов с размером 12 и 24 пункта. Легко заметить, что при одинаковых заданных размерах текст различается как по высоте, так и по насыщенности.

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

На практике константы применяются редко, а в основном используются допустимые единицы CSS: em (высота шрифта элемента), пункты (pt), пиксели (рх) и др. Перечислим несколько популярных.

Пиксели

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

Пункты

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

em

Эта единица показывает размер шрифта текущего элемента и он всегда равен 1em независимо от реального размера текста. Зачем тогда использовать? Em связан с размером шрифта родительского элемента и мы можем легко изменять размер текста самого элемента в большую (1.2em) или меньшую сторону (0.8em) без дополнительных вычислений. В каком-то смысле это является синонимом процентной записи.

rem

При использовании множественных вложений одних элементов в другие, с em легко запутаться в вычислениях. Например, если уменьшить размер шрифта до 0.8em, а потом у дочернего элемента увеличить до 1.2em, то будет ли текст одного размера? Единица rem привязана только к корневому элементу и таким образом не зависит от уровня вложения элементов.

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

Пример 1. Изменение размеров текста

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Размер текста</title> <style> body { font-size: 16px; } h2 { font-size: 22pt; } p { font-size: 1.5em; } </style> </head> <body> <h2>Почему неоднозначна первообразная функция?</h2> <p>Начало координат, в первом приближении, непредсказуемо. Абсолютно сходящийся ряд накладывает полином, что несомненно приведет нас к истине.</p> </body> </html>

Результат данного примера показан на рис. 2.

адание размера для заголовка и основного текста

Рис. 2. Задание размера для заголовка и основного текста

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 11.03.2020

Редакторы: Влад Мержевич

Как научиться разрабатывать сайты

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

Раздел: Сайтостроение / HTML /

Шрифт (нем. Schrift от schreiben «писать») — это (согласно Википедии) графический рисунок начертаний букв и знаков, составляющих единую стилистическую и композиционную систему, набор символов определённого размера и рисунка.

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

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

С помощью тега <font> можно изменять стиль, цвет и размер текста. Основные атрибуты тега <font>:

  • color — устанавливает цвет текста.
  • face — изменяет шрифт в HTML (это как раз то, что нам нужно).
  • size — устанавливает размер букв.

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

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


<font face="Arial">
Для этого текста установлен шрифт Arial
<font>

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

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


<p>
<font face="MyFont, Verdana, Arial">
Для этого текста установлен шрифт MyFont
<font>
</p>

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

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

На рисунке пример отображения текста несколькими шрифтами:

Примеры отображения разных шрифтов в браузере.

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

В теге <font> это можно сделать с помощью атрибута size. Размер может быть абсолютным и относительным.

Абсолютный размер устанавливается путём передачи в атрибут непосредственного значения от 1 до 7. Например, ниже мы устанавливаем для шрифта размер 3:


<font size="3">
Размер шрифта 3
<font>

Если установить атрибут size менее 1 или более 7, то браузер автоматически ограничит размер шрифта. Пример вы можете увидеть на рисунке ниже — несмотря на то, что мы попытались установить размер 8, браузер отобразил шрифт таким же размером, как и размер 7.

Примеры отображения шрифтов разных размеров в браузере.

Относительный размер устанавливается путём передачи в атрибут числа со знаком + (плюс). Например, вот такой HTML-код:


<p>
<font size="3">
Размер шрифта 3
<font>
</p>

<p>
<font size="+2">
Размер шрифта 5 (3 + 2)
<font>
</p>

<p>
<font size="5">
Размер шрифта 5
<font>
</p>

Здесь мы сначала установили шрифт размером 3. Затем увеличили этот шрифт на 2 (то есть сделали размер шрифта равным 5). Ну а далее, чтобы убедиться, что это всё правильно работает, снова установили абсолютный размер шрифта. На рисунке ниже видно, что это действительно работает так, как и задумывалось:

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

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

Для лучшего понимания посмотрите видео (выше) и изучите курс о вёрстке сайтов.


Как создать свой сайт Как создать свой сайт

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

Как задать шрифт, изменить размер или цвет текста отдельного участка. Самоучитель HTML

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

  <UL>
     <LI> HTML </LI>
     <LI> CSS 
      <UL>
         <LI> введение </LI>
         <LI> типы документов </LI>
         <LI> типы стилей </LI>
     </UL>
     </LI>
    <LI> PHP </LI>
  </UL>
Но на самом деле я подразумевал вот так:
        <html>
        <head>
        <title>Использование списков.</title>
        </head>
        <body>
            <UL> фотошоп
               <LI> HTML
               <LI> РНР
            </UL>
        </body>
        </html>
Т.е. в дальнейшем вы должны понимать что все теги которые я демонстрирую вы должны вставлять в основной ХТМЛ-шаблон между тегами <body> и </body>

А сейчас вернемся к нашей главе, для выполнения всех этих функций перечисленных в заглавии служит тег-контейнер <font> </font>

Теперь вернемся к нашей теме.

Для того что бы изменить размер, шрифт или цвет текста отдельного участка в HTML существует тег-контейнер <font> отдельный кусок текста</font>

Начнем по порядку, и научимся изменять цвет текста отдельного участка, для этой цели в тег FONT нужно поместить атрибут COLOR вот так:

 <font color="red"> отдельный кусок текста</font>
Значения атрибута color такие-же как и для атрибутов bgcolor text тега body, т.е мы можем их задавать словами по английски(Black, Green, Silver, Lime, Gray, Olive, White, Yellow, Maroon, Navy, Red, Blue, Purple, Teal, Fuchsia, Aqua)или номерами цвета в RGB (#000000- #FFFFFF)

Далее мы с вами научимся задавать шрифты для текста и познакомимся с новым атрибутом FACE тега FONT,

 <font face="Tahoma"> отдельный кусок текста</font>
Шрифты служат для того что-бы текст имел более неординарный вид, но есть одна проблема, шрифтов которые есть у вас(посмотреть их можно в C:WINDOWSFonts) может не оказаться у ваших посетителей, вторая проблема шрифтов что некоторые шрифты можно использовать только к кириллице(русскими буквам) или наоборот только с латиницей(английскими буквами), есть конечно и третий тип который подходит и к латинице и кириллице. В нижнем списке я покажу какие шрифты есть стандартными и есть на всех компах а также подходят к любым буквам:
  • Arial
  • Cosmic Sans
  • Courier
  • Garamond
  • Helvetica
  • Verdana
  • Tahoma
  • Times
  • Times New Roman
Можно одновременно задавать несколько шрифтов:
 <font face="Tahoma, Times, Verdana"> отдельный кусок текста</font>

Из этого кода хотел заметить следующее, что если у вашего посетителя не окажется шрифта Tahoma , то текст будет предоставлен шрифтом Times , а если нет и Times то текст будет Times New Roman. Ну а если и этого шрифта не будет то шрифт по умолчанию браузера.

А теперь перейдем к размерам, изменить размер текста в HTML можно при помощи двух тегов font и/или BASEFONT.
Начнем с BASEFONT, этот тег служит для изменения базового цвета, шрифта и размера текста, на пример:
<BASEFONT face=»Tahoma, Times, Verdana» color=»red» size=»3″>….текст….
Этот тег не является контейнером, т.е. обратного тега не имеет. Цвет и шрифт текста задается как в теге FONT, а вот для изменения размера текста используется атрибут SIZE с значением от 1 до 7. Этот тег в тексте можно использовать несколько раз: <BASEFONT face=»Tahoma, Times, Verdana» color=»red» size=»4″>….текст….
<BASEFONT size=»6″>….текст….
<BASEFONT color=»gold» size=»3″>….текст….
По умолчанию размер текста = «3», этот размер можно не задавать. В первом примере мы весть текст увеличили на единицу, во второй линии мы его увиличили до «6», а в третей мы опять его вернули к тексту по умолчанию.
Теперь хочу вас круто огорчить, этот тег был введен в версии HTML-4.01, и соответственно поддерживается в браузере только Интернет Експлорер, остальные браузеры его просто игнорируют, Так что лучше этот тег не использовать вообще!!!
А пользоваться только тегом FONT с атрибутом SIZE он поддерживается почти всеми браузерами. Атрибут SIZE, так же принимает значения от 1 до 7, но эти размеры могут задаваться и от «-2» до «+4»
<font size=»+4″> текст </font>
<font size=»+3″> текст </font>
<font size=»+2″> текст </font>
<font size=»+1″> текст </font>
<font size=»+0″> текст </font>
<font size=»-1″> текст </font>
<font size=»-2″> текст </font>
Тег FONT как и BASEFONT может содержать несколько атрибутов:
<font size=»5″ color=»red» fase=»Tahoma, Times, Verdana»>…. текст….</font>

Размер текста в CSS, жирный текст CSS

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

Стиль, вариант, ширина и размер текста

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

Стиль:

+

7
8
9
10

#fo
  {
  font-size: 30px;
  }

HTML код:

14

<p>Текст</p>

Стиль шрифта позваляет выделить текст курсивом. Для установки стиля шрифта используется свойство font-style. Оно может принимать следующие значения:

font-style: normal — обычный шрифт (по умолчанию)

font-style: italic — курсивный шрифт

font-style: oblique — наклонный шрифт

font-style: inherit — значение принимается от родительского элемента

У одних шрифтов стиль italic и oblique выглядит одинаково, у других шрифтов по-разному.

Установим созданному абзацу стиль шрифта. Для этого добавим селектору #fo свойство font-style:

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

font-variant: normal — нормальный шрифт (по умолчанию)

font-variant: small-caps — прописные буквы выглядят как заглавные

font-variant: inherit — значение принимается от родительского элемента

Добавим селектору #fo свойство font-variant:

11

font-variant: small-caps;

Если увеличить ширину шрифта, то можно сделать жирный текст. В CSS Это делается с помощью свойства font-weight. Оно принимает такие значения:

font-weight: normal — обычный текст

font-weight: bold — жирный текст

font-weight: inherit — принимает значение от родительского элемента

Кроме того, ширину шрифта можно указать с помощью чисел от 100 до 900. Число 400 соответствует значению normal, а число 700 значению bold. Но числа работают не со всеми шрифтами, а также они не работают в некоторых браузерах, поэтому они редко используются.

Добавим селектору #fo свойство font-weight:

Существует совойство font, в котором можно указать все перечисленные свойства, а также шрифт. Значения свойств перечисляются через пробел в таком порядке: стиль, вариант, ширина, размер, шрифт. Для примера добавим на страницу тэг <span> и установим для него свойство font:

Стиль:

14
15
16
17

#s1
  {
  font: italic small-caps bold 30px Arial;
  }

HTML код:

22

<span>Текст</span>

Если какое-то из свойств не указано, то используется значение по умолчанию. Но размер и шрифт нужно указывать обязательно. При указании шрифта, так же, как и для свойства font-family, можно перечислить несколько шрифтов через запятую. Добавим на страницу ещё один тег <span> и установим ему свойство font, но по-другому:

Стиль:

18
19
20
21

#s2
  {
  font: 20px Tahoma, Verdana, sans-serif;
  }

HTML код:

27

<span>Текст</span>

Цвет текста

Цвет текста устанавливается с помощью свойства color. Значением этого свойства является цвет, указанный одним из способов, предусмотренных в CSS. Для примера установим цвет тэгу <span>, который мы создавали ранее. Добавим селектору #s2 свойство color:

Высота строки

Межстрочный интервал — это расстояние между строками текста. Для его установки используется свойство line-height. Оно устанавлявает высоту строки. Высота строки состоит из размера шрифта и межстрочного интервала. Если высота строки равна 50 пикселей, а размер шрифта 30 пикселей, то межстрочный интервал получится 20 пикселей. Если высоту строки установить меньше размера шрифта, то строки будут пересекаться. Свойство line-height может принимать такие значения:

line-height: normal — обычный интервал (по умолчанию)

line-height: число, на которое будет умножен размер шрифта

line-height: высота в единицах измерения, доступных в CSS

line-height: проценты от размера шрифта

line-height: inherit значение принимается от родительского элемента

Для примера создадим большой абзац текста, состоящий из нескольких строк. Установим ему размер шрифта и высоту строки:

Стиль:

7
8
9
10
11

#text
  {
  font-size: 20px;
  line-height: 30px;
  }

HTML код:

34
35
36
37
38
39

<p>Текст из нескольких строк Текст из нескольких строк
Текст из нескольких строк Текст из нескольких строк Текст из нескольких строк
Текст из нескольких строк Текст из нескольких строк Текст из нескольких строк
Текст из нескольких строк Текст из нескольких строк Текст из нескольких строк
Текст из нескольких строк
</p>

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

Отступ первой строки

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

Установим отступ большому абзацу. Для этого селектору #text добавим свойство text-indent:

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

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

text-align: left — по левому краю (по умолчанию)

text-align: right — по правому краю

text-align: center — по центру

text-align: justify — по ширине. Используется для текстов длинной более одной строки.

Добавим на страницу абзац и выравнем текст в нём по центру. Обратите внимание — выравнивается не сам элемент а текст внутри него:

40

<p>Выравнивание по центру</p>

Декорирование текста

Декорирование — это оформление текста определённым образом. Оно устанавливается с помощью свойства text-decoration. Оно принимает такие значения:

text-decoration: none — без декорирования

text-decoration: underline — подчёркнутый текст

text-decoration: overline — надчёркнутый текст

text-decoration: line-through — зачёркнутый текст

text-decoration: inherit — значение принимается от родительского элемента

Для примера создадим абзац с подчёркнутым текстом:

41

<p>Подчёркнутый текст</p>
Установите фиксированный размер текста в вашем HTML

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

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

Баннер:

Меню:

Главная | О нас | Наши продукты | Наши услуги | Техническая поддержка | Свяжитесь с нами

Рецепт:

Image 1 Dumpling Recipe Logo
Food Service

Наша главная цель это качественная еда
Китайцы давно пользуются варениками в качестве основной еды.Они подаются ежедневно, а также в праздничных случаях. Есть рестораны, которые имеют прославиться своими пельменями. Кто знает, может быть, вы могли бы быть знаменитым для твоего. Сегодня американцы также очень любят пельмени, так как они приходят в разных стилях и начинках, здоровых и питательных. Это наверняка стал бы всеми любимым. PRIME FOOD с гордостью предлагает несколько виды вареников, чтобы предоставить вам много вариантов и вариантов.Из кнедлики из свинины и капусты к нашим восхитительным кнедликам из морепродуктов вместе с различными типами приготовления пищи, есть что-то для все.

Пожалуйста, измените размер шрифта, чтобы увидеть, что произойдет. В IE вы можете открыть контекстное меню «Вид», затем «Размер текста» для изменения размера текста на «Самый большой». В Netscape та же функция в контекстном меню: «Вид»> «Увеличить шрифт / Уменьшить» Шрифт».

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

Эта проблема вызвана размером текста. Как решить эту проблему? Они разные решения. Распространенным способом является использование изображений для остановки изменения размера шрифта. Так как Вы можете знать, что при изменении размера шрифта браузером размер изображения будет не будет изменено Это одна из причин, почему большинство веб-дизайнеров используют этот метод сделать меню навигатора, баннеры и другой дизайн, который должен набирать текст на Картины.

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

Позвольте мне показать вам другое решение.

Мы можем использовать CSS для решения этой проблемы. Ниже приведен исходный код:

 
<Голова>
 Как установить фиксированный размер текста </ title>
<style type = "text / css">
<! -
.fixed {font-size: 12px}
->
</ Стиль>
</ HEAD>
<Тело>
<span> Это тест. </ span>
</ Body>
</ Html>
 </pre>
 <p> Откройте браузер, IE и Netscape и попробуйте прямо сейчас! Изменение шрифта текста (IE)
  или Увеличить шрифт / Уменьшить шрифт (Netscape), как вы можете видеть, размер текста фиксирован!
 </p>
 <p> Точка задается единицей размера шрифта как «px», а не «pt».
   <b> <i>. Исправлено </i> </b> является селектором класса. Вы можете использовать любое имя для класса. </p>
 <p> Любой открывающий тег HTML может использоваться как селектор. Например, <p>,
  <font>, <a>, <bockquote>, <pre>, <div>, <i>,
  <table>, <td> и т. д. Вы также можете использовать тег <body> в качестве селектора.
  Образец, как показано ниже: </p>
 <pre> <html>
<Голова>
<title> Как установить фиксированный размер текста </ title>
<style type = "text / css">
<! -
p {font-size: 12px}
предварительно {размер шрифта: 10px}
h2 {размер шрифта: 24px}
h3 {размер шрифта: 18px}
->
</ Стиль>
</ HEAD>
<Тело>
<div> Это пример CSS </ h2>
<p> CSS действительно полезен.</ Р>
<pre> Я установил фиксированный шрифт для своей страницы! </ pre>
</ Body>
</ Html>
 </pre>
 <p> Чтобы узнать больше о CSS, вы можете перейти на:
   <b> CSS для начинающих </b> </p>
  
 <p> Можно сказать, что мне не нравится это решение, потому что после установки фиксированного шрифта
  размер, другие не могут его изменить. Возможно, я должен упомянуть, что когда вы идете в
  Книжный магазин, чтобы купить книгу, вы также не можете изменить размер шрифта в книге.
  Вы можете предпочесть другие решения, например, с использованием изображения, но ясно одно:
  Результат такой же, используя «изображение-текст»
  и используя «CSS-fixed-text».Вы не можете изменить «изображение-текст»
  вашим браузером. Кроме того, если однажды вы или ваш начальник или ваши клиенты захотят
  изменить текст, вам придется сделать изображение снова. Это займет больше времени
  сделать это, чем изменить текст с фиксированным CSS. </p>
 <p> Теперь это не закон, а одно из решений. У вас все еще есть права на
  используйте другие решения или не используйте решение. Или вы можете просто использовать его на своих баннерах,
  меню и заголовки, а также сохранить другое содержимое как обычно. </p>


,<div> CSS свойство font-size </h2><div class="advv">
<ins class="adsbygoogle"
     style="display:inline-block;width:336px;height:280px"
     data-ad-client="ca-pub-1812626643144578"
     data-ad-slot="9935184599"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
      



 <br/>


 <h4><span class="ez-toc-section" id="i-13"> Пример </span></h4>
 <p> Установить размер шрифта для разных элементов: </p>

  
    div.a {<br/> размер шрифта: 15 пикселей; <br/>} <p> div.b {<br/>
    размер шрифта: большой; <br/>} </p> <p> div.c {<br/> размер шрифта: 150%; <br/>
    }
  
 </p>
Попробуй сам "

 <hr/>

 <h3><span class="ez-toc-section" id="i-14"> Определение и использование </span></h3>
 <p> Свойство <code> font-size </code> устанавливает размер шрифта. </p>


 <hr/>

 <h3><span class="ez-toc-section" id="i-15"> Поддержка браузера </span></h3>
 <p> Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.</p>

 <table>
   <tr>
     <th> Недвижимость </th>
     <th title="Chrome"/>
     <th title="Internet Explorer / Edge"/>
     <th title="Firefox"/>
     <th title="Safari"/>
     <th title="Opera"/>
   </tr>
   <tr>
     <td> размер шрифта </td>
     <td> 1,0 </td>
     <td> 5,5 </td>
     <td> 1,0 </td>
     <td> 1,0 </td>
     <td> 7,0 </td>
   </tr>
 </table>

 <hr/>

 <hr/>
 <h3><span class="ez-toc-section" id="_CSS-3"> Синтаксис CSS </span></h3>
 <p>
Размер шрифта: средняя | хх-малогабаритные | х-малые | малые | большие | X-LARGE | хх-большой | меньше | больше | Длина <i> </i> | начальная | наследовать; </p>
 <h3><span class="ez-toc-section" id="i-16"> Значения недвижимости </span></h3>


 <table>
   <tr>
     <th> Значение </th>
     <th> Описание </th>
     <th> Слушать это </th>
   </tr>
   <tr>
     <td> средний </td>
     <td> Устанавливает размер шрифта на средний размер.Это по умолчанию </td>
   <td> Играть »</td>
   </tr>
   <tr>
     <td> хх-маленький </td>
     <td> Устанавливает размер шрифта для размера xx-small </td>
   <td> Играть »</td>
   </tr>
   <tr>
     <td> х-маленький </td>
     <td> Устанавливает размер шрифта на очень маленький размер </td>
   <td> Играть »</td>
   </tr>
   <tr>
     <td> малый </td>
     <td> Устанавливает размер шрифта на маленький размер </td>
      <td> Играть »</td>
   </tr>
   <tr>
     <td> большой </td>
     <td> Устанавливает размер шрифта большого размера </td>
      <td> Играть »</td>
   </tr>
   <tr>
     <td> х-большой </td>
     <td> Устанавливает размер шрифта очень большого размера </td>
      <td> Играть »</td>
   </tr>
   <tr>
     <td> хх-большой </td>
     <td> Устанавливает размер шрифта в xx-large size </td>
   <td> Играть »</td>
   </tr>
   <tr>
     <td> меньше </td>
     <td> Устанавливает размер шрифта меньшего размера, чем родительский
      элемент </td>
        <td> Играть »</td>
   </tr>
   <tr>
     <td> больше </td>
     <td> Устанавливает размер шрифта больше, чем родительский элемент </td>
      <td> Играть »</td>
   </tr>
   <tr>
     <td> <i> длина </i> </td>
     <td> Устанавливает фиксированный размер шрифта в пикселях, см и т. Д.Читайте о единицах длины </td>
      <td> Играть »</td>
   </tr>
   <tr>
     <td> <i>% </i> </td>
     <td> Устанавливает размер шрифта в процентах от размера шрифта родительского элемента </td>
   <td> Играть »</td>
   </tr>
   <tr>
     <td> начальный </td>
     <td> Устанавливает для этого свойства значение по умолчанию. Читайте о <em> начальной </em> </td>
   <td> Играть »</td>
     </tr>
   <tr>
     <td> наследуют </td>
     <td> Унаследует это свойство от родительского элемента.Читать о <em> наследовать </em> </td>
   <td/>
     </tr>
 </table>

 <hr/>

 <h3><span class="ez-toc-section" id="i-17"> Связанные страницы </span></h3>
 <p> Учебник по CSS: Шрифты CSS </p>
 <p> Ссылка CSS: свойство шрифта </p>
 <p> HTML DOM ссылка:
свойство fontSize </p>

 <br/>

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    ,<h2><span class="ez-toc-section" id="_HTML-4"> Как изменить размер шрифта в текстовом поле в HTML </span></h2><div class="advv">
<ins class="adsbygoogle"
     style="display:inline-block;width:336px;height:280px"
     data-ad-client="ca-pub-1812626643144578"
     data-ad-slot="9935184599"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
    
    
        

    
        
                
                
                    
                
                    
                        Переполнение стека
                    



        

             <ol role="presentation">
                 <li>
                    
                        Товары
                    
                 </li>

                     <li>
                        Клиенты
                     </li>
                     <li>
                        Случаи использования
                     </li>
             </ol>
            
                
                 <ol>
                     <li>
                        
                            Переполнение стека
                            Публичные вопросы и ответы
                        
                     </li>
                     <li>
                        
                            Команды
                            Частные вопросы и ответы для вашей команды
                        
                     </li>
                     <li>
                        
                            предприятие
                            Частные вопросы и ответы для вашего предприятия
                        
                     </li>
                     <li>
                        
                            работы
                            Программирование и связанные с ним технические возможности карьерного роста
                        
                     </li>
                     <li>
                        
                            Талант
                            Нанимать технический талант
                        
                     </li>
                     <li>
                         </li> </ol>.<h2><span class="ez-toc-section" id="_HTML-5"> Как установить размер кнопки в HTML </span></h2><div class="advv">
<ins class="adsbygoogle"
     style="display:inline-block;width:336px;height:280px"
     data-ad-client="ca-pub-1812626643144578"
     data-ad-slot="9935184599"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
    
    
        

    
        
                
                
                    
                
                    
                        Переполнение стека
                    



        

             <ol role="presentation">
                 <li>
                    
                        Товары
                    
                 </li>

                     <li>
                        Клиенты
                     </li>
                     <li>
                        Случаи использования
                     </li>
             </ol>
            
                
                 <ol>
                     <li>
                        
                            Переполнение стека
                            Публичные вопросы и ответы
                        
                     </li>
                     <li>
                        
                            Команды
                            Частные вопросы и ответы для вашей команды
                        
                     </li>
                     <li>
                        
                            предприятие
                            Частные вопросы и ответы для вашего предприятия
                        
                     </li>
                     <li>
                        
                            работы
                            Программирование и связанные с ним технические возможности карьерного роста
                        
                     </li>
                     <li>
                        
                            Талант
                            Нанимать технический талант
                        
                     </li>
                     <li>
                        
                            реклама
                            Связаться с разработчиками по всему миру
                        
                     </li>

                 </ol>
            

            
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        ,<div class='yarpp-related yarpp-related-none'>
<p>No related posts.</p>
</div>
											</div><!--/.entry-->
					
										
				</div><!--/.post-content-->
				<div class="post-sharrre group">
	<div id="twitter" data-url="https://ylianova.ru/html/zadat-razmer-teksta-v-html-razmer-teksta-htmlbook-ru.html" data-text="Задать размер текста в html: Размер текста | htmlbook.ru" data-title="Tweet"></div>
	<div id="facebook" data-url="https://ylianova.ru/html/zadat-razmer-teksta-v-html-razmer-teksta-htmlbook-ru.html" data-text="Задать размер текста в html: Размер текста | htmlbook.ru" data-title="Like"></div>
	<div id="googleplus" data-url="https://ylianova.ru/html/zadat-razmer-teksta-v-html-razmer-teksta-htmlbook-ru.html" data-text="Задать размер текста в html: Размер текста | htmlbook.ru" data-title="+1"></div>
	<div id="pinterest" data-url="https://ylianova.ru/html/zadat-razmer-teksta-v-html-razmer-teksta-htmlbook-ru.html" data-text="Задать размер текста в html: Размер текста | htmlbook.ru" data-title="Pin It"></div>
</div><!--/.post-sharrre-->

<script type="text/javascript">
	// Sharrre
	jQuery(document).ready(function(){
		jQuery('#twitter').sharrre({
			share: {
				twitter: true
			},
			template: '<a class="box group" href="#"><div class="count" href="#">{total}</div><div class="share"><i class="fa fa-twitter"></i></div></a>',
			enableHover: false,
			enableTracking: true,
			buttons: { twitter: {via: ''}},
			click: function(api, options){
				api.simulateClick();
				api.openPopup('twitter');
			}
		});
		jQuery('#facebook').sharrre({
			share: {
				facebook: true
			},
			template: '<a class="box group" href="#"><div class="count" href="#">{total}</div><div class="share"><i class="fa fa-facebook-square"></i></div></a>',
			enableHover: false,
			enableTracking: true,
			click: function(api, options){
				api.simulateClick();
				api.openPopup('facebook');
			}
		});
		jQuery('#googleplus').sharrre({
			share: {
				googlePlus: true
			},
			template: '<a class="box group" href="#"><div class="count" href="#">{total}</div><div class="share"><i class="fa fa-google-plus-square"></i></div></a>',
			enableHover: false,
			enableTracking: true,
			urlCurl: 'https://ylianova.ru/wp-content/themes/anew/js/sharrre.php',
			click: function(api, options){
				api.simulateClick();
				api.openPopup('googlePlus');
			}
		});
		jQuery('#pinterest').sharrre({
			share: {
				pinterest: true
			},
			template: '<a class="box group" href="#" rel="nofollow"><div class="count" href="#">{total}</div><div class="share"><i class="fa fa-pinterest"></i></div></a>',
			enableHover: false,
			enableTracking: true,
			buttons: {
			pinterest: {
				description: 'Задать размер текста в html: Размер текста | htmlbook.ru'				}
			},
			click: function(api, options){
				api.simulateClick();
				api.openPopup('pinterest');
			}
		});
	});
</script>				
			</div><!--/.post-inner-->
			
		</article><!--/.post-->			
			
		
		<ul class="post-nav group">
		<li class="next"><a href="https://ylianova.ru/raznoe-2/dlya-chego-nuzhna-komandnaya-stroka-zachem-nuzhna-komandnaya-stroka.html" rel="next"><i class="fa fa-chevron-right"></i><strong>Вперед</strong> <span>Для чего нужна командная строка: Зачем нужна командная строка</span></a></li>
		<li class="previous"><a href="https://ylianova.ru/raznoe-2/ajpi-adres-primer-ip-adres-chto-eto-takoe-kak-rasshifrovyvaetsya-i-kak-vyglyadit-unikalnyj-adres-v-internete-ipv4.html" rel="prev"><i class="fa fa-chevron-left"></i><strong>Назад</strong> <span>Айпи адрес пример: IP адрес: что это такое, как расшифровывается и как выглядит уникальный адрес в интернете (ipv4)</span></a></li>
	</ul>
	
		
	    <div class="wpdiscuz_top_clearing"></div>
    <div id="comments" class="comments-area"><div id="respond" style="width: 0;height: 0;clear: both;margin: 0;padding: 0;"></div>            <h3 id="wc-comment-header">
                                Отправить ответ            </h3>
                    <div id="wpcomm" class="wpdiscuz_unauth wpd-default">
            <div class="wpdiscuz-form-top-bar">
                <div class="wpdiscuz-ftb-left">
                                                            <div id="wc_show_hide_loggedin_username">
                                            </div>
                </div>
                                <div class="wpd-clear"></div>
            </div>


                        <div class="wc_social_plugin_wrapper">
                            </div>
                    <div class="wc-form-wrapper wc-main-form-wrapper"  id='wc-main-form-wrapper-0_0' >
            <div class="wpdiscuz-comment-message" style="display: block;"></div>
                                        <form class="wc_comm_form wc_main_comm_form" method="post"  enctype="multipart/form-data">
                    <div class="wc-field-comment">
                        <div class="wpdiscuz-item wc-field-textarea" >
                            <div class="wpdiscuz-textarea-wrap ">

                                                                                                        <div class="wc-field-avatararea">
                                        <img alt='avatar' src='https://secure.gravatar.com/avatar/?s=40&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/?s=80&d=mm&r=g 2x' class='avatar avatar-40 photo avatar-default' height='40' width='40' loading='lazy'/>                                    </div>
                                
                                <textarea id="wc-textarea-0_0"   placeholder="Начать обсуждение..." required name="wc_comment" class="wc_comment wpd-field"></textarea>
                                                                                            </div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="wc-form-footer"  style="display: none;"> 
                                <div class="wpd-form-row">
                    <div class="wpd-form-col-left">
                        <div class="wpdiscuz-item wc_name-wrapper wpd-has-icon">
                                <div class="wpd-field-icon"><i class="fas fa-user"></i></div>
                                                <input value="" required="required" class="wc_name wpd-field" type="text" name="wc_name" placeholder="Имя*" maxlength="50" pattern=".{3,50}" title="">
                            </div>
                        <div class="wpdiscuz-item wc_email-wrapper wpd-has-icon">
                                    <div class="wpd-field-icon"><i class="fas fa-at"></i></div>
                                                <input value="" required="required" class="wc_email wpd-field" type="email" name="wc_email" placeholder="Email*">
                            </div>
                            <div class="wpdiscuz-item wc_website-wrapper wpd-has-icon">
                                            <div class="wpd-field-icon"><i class="fas fa-link"></i></div>
                                        <input value="" class="wc_website wpd-field" type="text" name="wc_website" placeholder="Website">
                                            </div>
                        </div>
                <div class="wpd-form-col-right">
                    <div class="wc-field-captcha wpdiscuz-item wc_captcha-wrapper">
            <div class="wc-captcha-input">
                <input type="text" maxlength="5" value="" autocomplete="off" required="required" name="wc_captcha"  class="wpd-field wc_field_captcha" placeholder="Code" title="Вставьте код CAPTCHA">
            </div>
            <div class="wc-label wc-captcha-label">
                                <a class="wpdiscuz-nofollow" href="#" rel="nofollow"><img alt="wpdiscuz_captcha" class="wc_captcha_img" src="https://ylianova.ru/wp-content/plugins/wpdiscuz/utils/captcha/captcha.php?key=c5f8088ba3890e"  width="80" height="26"/></a><a class="wpdiscuz-nofollow wc_captcha_refresh_img" href="#" rel="nofollow"><img  alt="refresh" class="" src="https://ylianova.ru/wp-content/plugins/wpdiscuz/assets/img/captcha-loading.png" width="16" height="16"/></a>
                <input type="hidden" id="c5f8088ba3890e" class="wpdiscuz-cnonce" name="cnonce" value="c5f8088ba3890e" />
            </div>
            <div class="clearfix"></div>
        </div>
                <div class="wc-field-submit">
                                            
                                            <label class="wpd_label" title="Сообщать о всех новых ответах на мои комментарии">
                            <input id="wc_notification_new_comment-0_0" class="wc_notification_new_comment-0_0 wpd_label__checkbox" value="comment" type="checkbox" name="wpdiscuz_notification_type" />
                            <span class="wpd_label__text">
                                <span class="wpd_label__check">
                                    <i class="fas fa-bell wpdicon wpdicon-on"></i>
                                    <i class="fas fa-bell-slash wpdicon wpdicon-off"></i>
                                </span>
                            </span>
                        </label>
                                                                <input class="wc_comm_submit wc_not_clicked button alt" type="submit" name="submit" value="Оставить комментарий">
        </div>
                </div>
                    <div class="clearfix"></div>
        </div>
                            </div>
                    <div class="clearfix"></div>
                    <input type="hidden" class="wpdiscuz_unique_id" value="0_0" name="wpdiscuz_unique_id">
                </form>
                        </div>
                <div id = "wpdiscuz_hidden_secondary_form" style = "display: none;">
                    <div class="wc-form-wrapper wc-secondary-form-wrapper"  id='wc-secondary-form-wrapper-wpdiscuzuniqueid'  style='display: none;' >
            <div class="wpdiscuz-comment-message" style="display: block;"></div>
                            <div class="wc-secondary-forms-social-content"></div><div class="clearfix"></div>
                                        <form class="wc_comm_form wc-secondary-form-wrapper" method="post"  enctype="multipart/form-data">
                    <div class="wc-field-comment">
                        <div class="wpdiscuz-item wc-field-textarea" >
                            <div class="wpdiscuz-textarea-wrap ">

                                                                                                        <div class="wc-field-avatararea">
                                        <img alt='avatar' src='https://secure.gravatar.com/avatar/?s=48&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/?s=96&d=mm&r=g 2x' class='avatar avatar-48 photo avatar-default' height='48' width='48' loading='lazy'/>                                    </div>
                                
                                <textarea id="wc-textarea-wpdiscuzuniqueid"   placeholder="Присоединиться к обсуждению..." required name="wc_comment" class="wc_comment wpd-field"></textarea>
                                                                                            </div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="wc-form-footer"  style="display: none;"> 
                                <div class="wpd-form-row">
                    <div class="wpd-form-col-left">
                        <div class="wpdiscuz-item wc_name-wrapper wpd-has-icon">
                                <div class="wpd-field-icon"><i class="fas fa-user"></i></div>
                                                <input value="" required="required" class="wc_name wpd-field" type="text" name="wc_name" placeholder="Имя*" maxlength="50" pattern=".{3,50}" title="">
                            </div>
                        <div class="wpdiscuz-item wc_email-wrapper wpd-has-icon">
                                    <div class="wpd-field-icon"><i class="fas fa-at"></i></div>
                                                <input value="" required="required" class="wc_email wpd-field" type="email" name="wc_email" placeholder="Email*">
                            </div>
                            <div class="wpdiscuz-item wc_website-wrapper wpd-has-icon">
                                            <div class="wpd-field-icon"><i class="fas fa-link"></i></div>
                                        <input value="" class="wc_website wpd-field" type="text" name="wc_website" placeholder="Website">
                                            </div>
                        </div>
                <div class="wpd-form-col-right">
                    <div class="wc-field-captcha wpdiscuz-item wc_captcha-wrapper">
            <div class="wc-captcha-input">
                <input type="text" maxlength="5" value="" autocomplete="off" required="required" name="wc_captcha"  class="wpd-field wc_field_captcha" placeholder="Code" title="Вставьте код CAPTCHA">
            </div>
            <div class="wc-label wc-captcha-label">
                                <a class="wpdiscuz-nofollow" href="#" rel="nofollow"><img alt="wpdiscuz_captcha" class="wc_captcha_img" src="https://ylianova.ru/wp-content/plugins/wpdiscuz/utils/captcha/captcha.php?key=c5f8088ba38db1"  width="80" height="26"/></a><a class="wpdiscuz-nofollow wc_captcha_refresh_img" href="#" rel="nofollow"><img  alt="refresh" class="" src="https://ylianova.ru/wp-content/plugins/wpdiscuz/assets/img/captcha-loading.png" width="16" height="16"/></a>
                <input type="hidden" id="c5f8088ba38db1" class="wpdiscuz-cnonce" name="cnonce" value="c5f8088ba38db1" />
            </div>
            <div class="clearfix"></div>
        </div>
                <div class="wc-field-submit">
                                            
                                            <label class="wpd_label" title="Сообщать о всех новых ответах на мои комментарии">
                            <input id="wc_notification_new_comment-wpdiscuzuniqueid" class="wc_notification_new_comment-wpdiscuzuniqueid wpd_label__checkbox" value="comment" type="checkbox" name="wpdiscuz_notification_type" />
                            <span class="wpd_label__text">
                                <span class="wpd_label__check">
                                    <i class="fas fa-bell wpdicon wpdicon-on"></i>
                                    <i class="fas fa-bell-slash wpdicon wpdicon-off"></i>
                                </span>
                            </span>
                        </label>
                                                                <input class="wc_comm_submit wc_not_clicked button alt" type="submit" name="submit" value="Оставить комментарий">
        </div>
                </div>
                    <div class="clearfix"></div>
        </div>
                            </div>
                    <div class="clearfix"></div>
                    <input type="hidden" class="wpdiscuz_unique_id" value="wpdiscuzuniqueid" name="wpdiscuz_unique_id">
                </form>
                        </div>
                </div>
                                           

                                    <div class="wpdiscuz-front-actions">
                                                    <div class="wpdiscuz-sbs-wrap">
                                <span><i class="far fa-envelope" aria-hidden="true"></i>  Подписаться  <i class="fas fa-caret-down" aria-hidden="true"></i></span>
                            </div>
                                                                        <div class="clearfix"></div>
                    </div>
                                                    <div class="wpdiscuz-subscribe-bar wpdiscuz-hidden">
                                                    <form action="https://ylianova.ru/wp-admin/admin-ajax.php?action=addSubscription" method="post" id="wpdiscuz-subscribe-form">
                                <div class="wpdiscuz-subscribe-form-intro">Уведомление о </div>
                                <div class="wpdiscuz-subscribe-form-option" style="width:40%;">
                                    <select class="wpdiscuz_select" name="wpdiscuzSubscriptionType" >
                                                                                    <option value="post">новые последующие комментарии</option>
                                                                                                                            <option value="all_comment" >новые ответы на мои комментарии</option>
                                                                            </select>
                                </div>
                                                                    <div class="wpdiscuz-item wpdiscuz-subscribe-form-email">
                                        <input  class="email" type="email" name="wpdiscuzSubscriptionEmail" required="required" value="" placeholder="Email"/>
                                    </div>
                                                                <div class="wpdiscuz-subscribe-form-button">
                                    <input id="wpdiscuz_subscription_button" type="submit" value="›" name="wpdiscuz_subscription_button" />
                                </div> 
                                                                <input type="hidden" id="wpdiscuz_subscribe_form_nonce" name="wpdiscuz_subscribe_form_nonce" value="1c06bf69d1" /><input type="hidden" name="_wp_http_referer" value="/html/zadat-razmer-teksta-v-html-razmer-teksta-htmlbook-ru.html" />                                                                <input type="hidden" value="5406" name="wpdiscuzSubscriptionPostId" />
                            </form>
                                                <div class="wpdiscuz_clear"></div>
                                            </div>
                    
                                <div id="wcThreadWrapper" class="wc-thread-wrapper">
                                    
                    <div class="wpdiscuz-comment-pagination">
                                            </div>
                </div>
                <div class="wpdiscuz_clear"></div>
                                            </div>
        </div>
        <div id="wpdiscuz-loading-bar" class="wpdiscuz-loading-bar wpdiscuz-loading-bar-unauth"></div>
        	
	</div><!--/.pad-->
	
</section><!--/.content-->


	<div class="sidebar s1">
		
		<a class="sidebar-toggle" title="Развернуть боковую панель"><i class="fa icon-sidebar-toggle"></i></a>
		
		<div class="sidebar-content">
				
						
			<div id="search-2" class="widget widget_search"><form method="get" class="searchform themeform" action="https://ylianova.ru/">
	<div>
		<input type="text" class="search" name="s" onblur="if(this.value=='')this.value='Введите поисковую фразу';" onfocus="if(this.value=='Введите поисковую фразу')this.value='';" value="Введите поисковую фразу" />
	</div>
</form></div><div id="nav_menu-2" class="widget widget_nav_menu"><h3>Рубрики</h3><div class="menu-2-container"><ul id="menu-2" class="menu"><li id="menu-item-5370" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5370"><a href="https://ylianova.ru/category/css">Css</a></li>
<li id="menu-item-5371" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-5371"><a href="https://ylianova.ru/category/html">Html</a></li>
<li id="menu-item-5372" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5372"><a href="https://ylianova.ru/category/http">Http</a></li>
<li id="menu-item-5373" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5373"><a href="https://ylianova.ru/category/javascript">Javascript</a></li>
<li id="menu-item-5374" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5374"><a href="https://ylianova.ru/category/photoshop">Photoshop</a></li>
<li id="menu-item-5375" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5375"><a href="https://ylianova.ru/category/verstka">Верстка</a></li>
<li id="menu-item-5376" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5376"><a href="https://ylianova.ru/category/raznoe">Вопросы и ответы</a></li>
<li id="menu-item-5377" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5377"><a href="https://ylianova.ru/category/maket">Макет</a></li>
<li id="menu-item-5378" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5378"><a href="https://ylianova.ru/category/sajt">Развитие сайтов</a></li>
<li id="menu-item-5380" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5380"><a href="https://ylianova.ru/category/sajt-2">Сайт</a></li>
<li id="menu-item-5381" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5381"><a href="https://ylianova.ru/category/shablon-2">Шаблон</a></li>
<li id="menu-item-5382" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5382"><a href="https://ylianova.ru/category/shrift-2">Шрифт</a></li>
<li id="menu-item-5379" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5379"><a href="https://ylianova.ru/category/raznoe-2">Разное</a></li>
</ul></div></div><div id="categories-3" class="widget widget_categories"><h3>Рубрики</h3>
			<ul>
					<li class="cat-item cat-item-5"><a href="https://ylianova.ru/category/css">Css</a>
</li>
	<li class="cat-item cat-item-4"><a href="https://ylianova.ru/category/html">Html</a>
</li>
	<li class="cat-item cat-item-9"><a href="https://ylianova.ru/category/http">Http</a>
</li>
	<li class="cat-item cat-item-10"><a href="https://ylianova.ru/category/javascript">Javascript</a>
</li>
	<li class="cat-item cat-item-11"><a href="https://ylianova.ru/category/photoshop">Photoshop</a>
</li>
	<li class="cat-item cat-item-17"><a href="https://ylianova.ru/category/verstka">Верстка</a>
</li>
	<li class="cat-item cat-item-3"><a href="https://ylianova.ru/category/raznoe">Вопросы и ответы</a>
</li>
	<li class="cat-item cat-item-16"><a href="https://ylianova.ru/category/maket">Макет</a>
</li>
	<li class="cat-item cat-item-6"><a href="https://ylianova.ru/category/sajt">Развитие сайтов</a>
</li>
	<li class="cat-item cat-item-13"><a href="https://ylianova.ru/category/raznoe-2">Разное</a>
</li>
	<li class="cat-item cat-item-12"><a href="https://ylianova.ru/category/sajt-2">Сайт</a>
</li>
	<li class="cat-item cat-item-15"><a href="https://ylianova.ru/category/shablon-2">Шаблон</a>
</li>
	<li class="cat-item cat-item-7"><a href="https://ylianova.ru/category/shablon">Шаблоны</a>
</li>
	<li class="cat-item cat-item-14"><a href="https://ylianova.ru/category/shrift-2">Шрифт</a>
</li>
	<li class="cat-item cat-item-8"><a href="https://ylianova.ru/category/shrift">Шрифты</a>
</li>
			</ul>

			</div><div id="custom_html-21" class="widget_text widget widget_custom_html"><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>			
		</div><!--/.sidebar-content-->
		
	</div><!--/.sidebar-->
	

		</div><!--/.main-->
	</div><!--/.container-inner-->
	
	<footer id="footer">	
				
				
		<section id="footer-bottom">
			<div class="container">
			
				<a id="back-to-top" href="#"><i class="fa fa-angle-up"></i></a>
				
				<div class="pad group">				
					<div class="grid one-half">
					
												
						<div id="copyright">
															<p>Блог сумасшедшего сисадмина © 2020. Все права защищены.</p>
													</div><!--/#copyright-->
						
												<div id="credit">
							<p><a href="/sitemap.xml" class="c_sitemap">Карта сайта</a>
</p>
						</div><!--/#credit-->
												
					</div>		
					<div class="grid one-half last">	
											</div>		
				</div><!--/.pad-->
				
			</div><!--/.container-->
		</section><!--/#footer-bottom-->
		
	</footer><!--/#footer-->

</div><!--/#wrapper-->

		<style type="text/css">
			.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>
	<a id='wpdUserContentInfoAnchor' style='display:none;' rel='#wpdUserContentInfo' data-wpd-lity>wpDiscuz</a><div id='wpdUserContentInfo' style='overflow:auto;background:#FDFDF6;padding:20px;width:600px;max-width:100%;border-radius:6px;' class='lity-hide'></div><link rel='stylesheet' id='yarppRelatedCss-css'  href='https://ylianova.ru/wp-content/plugins/yet-another-related-posts-plugin/style/related.css?ver=5.5.1' type='text/css' media='all' />
<link rel='stylesheet' id='pgntn_stylesheet-css'  href='https://ylianova.ru/wp-content/plugins/pagination/css/nav-style.css?ver=5.5.1' type='text/css' media='all' />
<script type='text/javascript' src='https://ylianova.ru/wp-includes/js/jquery/jquery.form.min.js?ver=4.2.1' id='jquery-form-js'></script>
<script type='text/javascript' src='https://ylianova.ru/wp-content/themes/anew/js/jquery.jplayer.min.js?ver=5.5.1' id='jplayer-js'></script>
<script type='text/javascript' src='https://ylianova.ru/wp-content/themes/anew/js/scripts.js?ver=5.5.1' id='scripts-js'></script>
<script type='text/javascript' src='https://ylianova.ru/wp-content/themes/anew/js/jquery.sharrre.min.js?ver=5.5.1' id='sharrre-js'></script>
<script type='text/javascript' src='https://ylianova.ru/wp-includes/js/comment-reply.min.js?ver=5.5.1' id='comment-reply-js'></script>
<script type='text/javascript' src='https://ylianova.ru/wp-includes/js/wp-embed.min.js?ver=5.5.1' id='wp-embed-js'></script>
<script type='text/javascript' src='https://ylianova.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 type='text/javascript' src='https://ylianova.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 type='text/javascript' src='https://ylianova.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 type='text/javascript' src='https://ylianova.ru/wp-content/plugins/easy-table-of-contents/vendor/waypoints/jquery.waypoints.min.js?ver=1.9.2' id='jquery-waypoints-js'></script>
<script type='text/javascript' id='ez-toc-js-js-extra'>
/* <![CDATA[ */
var ezTOC = {"smooth_scroll":"1","visibility_hide_by_default":"","width":"auto","scroll_offset":"30"};
/* ]]> */
</script>
<script type='text/javascript' src='https://ylianova.ru/wp-content/plugins/easy-table-of-contents/assets/js/front.min.js?ver=1.7' id='ez-toc-js-js'></script>
<!--[if lt IE 9]>
<script src="https://ylianova.ru/wp-content/themes/anew/js/ie/respond.js"></script>
<![endif]-->
</body>
</html>