Размер текста в HTML и CSS кодах

Размер текста в HTML и CSS кодах

Здравствуйте уважаемые читатели! В текущей статье покажу, что нужно прописать в коде сайта, чтобы увеличить или уменьшить шрифт. Сложного ничего нет.

Задать размер текста в CSS или HTML коде можно при помощи разных единиц измерения. Например, параметры можно указать в пикселях, процентах, специальными словами. Сразу продемонстрирую написание некоторых единиц и их групп.

  • px.
  • em.
  • small, medium, large.

Знакомы с данными величинами? При просмотре исходного кода электронных страниц они часто встречаются.

Как задать размер шрифта в CSS?

Для наглядности сразу перейдем к практике. Посмотрим, как изменяется размер текста при указании специальных тегов. В своем примере я объединю стили документа и основной HTML код. Кстати, в такой вариации загрузка страницы может идти гораздо быстрее. Однако более распространенный вариант — выносить стили в отдельный CSS файл.

Итак, внимание на пример ниже.


<!doctype html>

<html lang="ru">

<head>

<meta charset="utf-8">

<link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon">

<title>Программирование сайта</title>

<meta name="description" content="«/>

<style type=»text/css">

.px, .em, .procenti, .slova { font-family: Verdana; }

.px { font-size: 24px; }

.em { font-size: 2em; }

.procenti { font-size: 100%; }

.slova { font-size: medium; }

</style>

</head>

<body>

<p class="px">Первый абзац.</p>

<p class="em">Второй.</p>

<p class="procenti">Третий.</p>

<p class="slova">Четвертый.</p>

</body>

</html>

Теперь открою готовую страницу в Google Chrome. Посмотрим, что получилось.

Так выглядит результат. Догадываетесь, зачем я открыл исходный код?

Чтобы сделать также, нажмите правую кнопку мыши на рабочей области или конкретном слове и выберите «посмотреть код». Как можете наблюдать на скриншоте выше, здесь можно менять HTML, CSS и сразу наглядно посмотреть результаты. Удобный функционал.

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

Сразу сделаю акцент на важной детали.

Какой бы красивый и технически правильный не был сайт, про высокую посещаемость и серьезные доходы можно забыть, если...

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

Если вам интересны данные темы, можете дополнительно ознакомиться с рекомендациями для вебмастеров. Ценную информацию также предоставлял в рамках продвижения этого блога. Соответствующие материалы находятся здесь.

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

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

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

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

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

Кстати, а у вас есть собственный сайт или только собираетесь его делать? Я вот часто замечаю, что многие программисты их делают на заказ, но у самих даже нет элементарного сайта-визитки с описанием услуг. А ведь такие проекты способствуют росту репутации и доходов, не говоря уже о конкурентных преимуществах.

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

Статья подходит к завершению. Надеюсь, теперь вы с легкостью сможете задавать и менять по своему усмотрению размеры текстов посредством работы с HTML и CSS кодами.

Есть дополнения к описанным выше сведениям? Опишите их в комментариях.

Напоследок упомяну, что совсем недавно я завершил составление чек-листа по написанию трафиковых статей. Информация в нем мощная. Рекомендации проверены на практике.

Вскоре начну подготовку новых материалов. В скором времени они появятся на блоге. До связи.

Оценить статью:
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Рейтинг: 5
Голосов: 1
Комментариев - 0

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

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