Как сделать жирный шрифт в html?

Возможности начертания в html

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

Для начала разберемся с жирным начертанием текстовых элементов.

Теперь рассмотрим такие теги, как <i> и <em>.

Они форматируют стандартный шрифт в курсивный. Думаю, вы зададите логически возникающий вопрос: «А эти элементы тоже разняться между собой по принципу тегов <b> и <strong>?». Вопрос правильный. И вы правы!

Как в HTML сделать текст курсивом

Курсивное начертание устанавливается при помощи тегов .

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

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

Элементы разметки могут быть вложенными, как в данной структуре, где элемент … вложен в элемент …. Современные браузеры способны верно обрабатывать вложенные теги. Потому для вас нужно смотреть за тем, чтоб не нарушался порядок вложения. Работа браузера окажется затрудненной, если вложенность будет нарушена. К примеру, такая запись будет неверной: …. Соблюдение вложенности — очень принципиальная часть общей культуры написания HTML кода.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

strong {
    font-weight: bold;
}

strong {
font-weight: bold;
}

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

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

Как в HTML прирастить текст

Сейчас увеличим размер шрифта текста. Это можно сделать различными методами.

Теги наращивают размер шрифта текста, заключенного меж ними.

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

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

При помощи тегов вы сможете уменьшить размер шрифта текста по сопоставлению с начальным.

Другой метод указания размера шрифта — при помощи тегов с атрибутом size. В качестве значений этого атрибута употребляются целые числа от 1 до 7. При этом значение 1 соответствует наименьшему размеру шрифта, а значение 7 — наибольшему.

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

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

Установите 5 в качестве значения атрибута size для рассматриваемого куска текста: . HTML код этого куска должен быть таким:

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

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

По умолчанию абзац с текстом Тут Вы узнаете… выровнен налево. Центрируем его по горизонтали при помощи тегов

Воткните теги

Направьте внимание, что для центрирования абзаца мы использовали теги

Внимание
! На 2010 год теги ,

=

Как сделать жирный текст CSS-стилями

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

Итак, свойство font-weight может принимать фиксированные значения:

• bold – жирный
• bolder – еще жирнее
• normal – начальный вид
• lighter – делает буквы тоньше, по сравнению с normal

Кроме этого, можно использовать числовые значения, что бы подобрать степень жирности на свое усмотрение. Для этого можно задать число от 100 до 900, при этом 100 будет соответствовать значению lighter, а 900 будет иметь наибольшую жирность, на порядок выше, чем у значения bolder.

XHTML

<div class=»bol-text»>
<p style=»font-weight:bold;»>Жирный</p>
<p style=»font-weight:bolder;»>Еще жирнее</p>
<p style=»font-weight:100;»>Совсем не жирный текст CSS</p>
<p style=»font-weight:900;»>Очень жирный текст CSS</p>
</div>

Жирный

Еще жирнее

Совсем не жирный текст CSS

Очень жирный текст CSS

Типы веб-шрифтов и их поддержка браузерами

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

• TTF/OTF (True Type и Open Type Fonts) — эти шрифты имеют широкую поддержку. Разработаны Microsoft совместно с Adobe, с целью применения в различных операционных системах.
• WOFF (Web Open Font Format) — сжатая версия шрифтов TTF/OTF. Формат включает в себя метаданные, в которые автор шрифта может добавить информацию об использовании шрифта. WOFF-формат имеет широкую поддержку со стороны браузеров.
• WOFF2 (Web Open Font Format 2) — спецификация была разработана, чтобы обеспечить улучшенное сжатие и тем самым снизить использование пропускной способности сети, в то же время, позволяя быстро производить декомпрессию даже на мобильных устройствах.
• SVG (Scalable Vector Graphic) – способ создания векторной графики. SVG-формат имеет очень ограниченную поддержку (IOS/Safari). Планируется, что он перестанет использоваться в Chrome.
• EOT (Embedded Open Type) – шрифты, которые поддерживаются только в Internet Explorer/Edge (разработаны компанией Microsoft для использования в качестве встроенных шрифтов на веб-страницах).

Курсив и жирный шрифт CSS — учебник CSS

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

Жирный шрифт в CSS: свойство font-weight

Управлять жирностью шрифта в CSS можно с помощью значений свойства :

Пример записи:

p {
font-weight: bold;
}

Насыщенность шрифта вы можете регулировать с помощью ключевых слов (полужирное), (обычное начертание),

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

Курсив в CSS: свойство font-style

Задать курсивное начертание шрифта можно при помощи значений свойства :

Пример записи:

p {
font-style: italic;
}

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

Значение устанавливает обычный стиль шрифта, а позволяет наследовать стиль родителя.

Далее в книге: строчные и заглавные буквы с помощью свойства CSS text-transform.

Font-family — задаем тип и гарнитуру шрифта в CSS

Нужно будет предварительно сказать, что все свойства, используемые для оформления шрифтов (Font и Line Height) в Html коде, :

Итак, с помощью font-family можно задать гарнитуру и тип шрифта, который вам требуется применить к какому-то конкретному тегу (например, к абзаца P или же заголовков). Понятно, что элемент, к которому требуется применить это свойство, вы будете задавать в Css коде с помощью селекторов (о них мы с вами уже подробно поговорили и в начале публикации приведена соответствующая ссылка).

Позволю себе напомнить вам синтаксис написания CSS правил:

Т.е. сначала пишется свойство, а через двоеточие — значение для него. Правила, прописанные для каждого селектора, отделяются друг от друга точкой с запятой (после последнего ее можно не ставить):

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

В приведенном примере браузер сначала поищет на компьютере пользователя установленный Arial, и если его найдет, то данный Html элемент им и будет в результате отрисован. А если Arial на компьютере пользователя найден не будет? Тогда браузер поищет Geneva, а в случае неудачи — Helvetica, ибо он идет следующим по убыванию приоритета в font-family. Понятно?

Ну, а если пользователь окажется настолько экзальтированным, что ничего из перечисленного в этом свойстве на его компе найдено не будет, то данный элемент будет отрисован тем шрифтом, который у этого пользователя выбран по умолчанию для семейства sans-serif (без засечек или, по другому, рубленные). Существуют еще семейства Serif (с засечками) и monospace (моноширинные), которые вы также можете использовать в Font-family для указания типа.

Да чего я объясняю?! Ведь это все в точности повторяет задание , который сейчас считается не рекомендуемым (не валидным) и которому на смену как раз и пришло CSS свойство Font.

Тамже вы можете более подробно почитать про то, как пользователь может назначить умолчательные фонты различных типов:

Еще, кстати, написано, что существует проблема использования на сайте абсолютно любых фонтов, ибо они должны быть обязательно установлены на компьютерах пользователей. Считается, что с большой долей вероятности на компьютере пользователя будут установлены только около десятка (Arial, Verdana, Times New Roman, Tahoma, Georgia, Trebuchet MS, Courier New, Comic Sans MS), а значит именно их вы можете без опаски использовать в правилах с Font-family.

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

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

Названия шрифтов, не содержащие пробелов в семействе Font-family, в кавычки заключать не обязательно:

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

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

Существует несколько способов указать размер шрифта, рассмотрим наиболее распространенные из них:

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

Пиксели

Значения в пикселях используются часто, поскольку такой подход предоставляет очень точный контроль над размером. Числовое значение заканчивает буквенными символами px, которые должны следовать сразу после числа (между числом и px не должно быть пробела).

body { font-size: 14px; }

Проценты

По умолчанию размер шрифта в браузерах равен 16px. Таким образом, значение 100% соответствует 16px, а 200% — 32px. Если вы определите правило, задающее всему тексту внутри элемента <body> значение 75% от размера по умолчанию (это будет соответствовать 12px), а затем определите еще одно правило, которое задает значение 75% для его дочернего элемента, то размер шрифта в этом элементе будет равен 9px (то есть 75% от 12px).

body { font-size: 100%; }

EM

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

body { font-size: 14px; }
h2 { font-size: 1.2em; }

В примере мы задали элементу <body> размер шрифта 14px, а для всех элементов <h2> — 1.2em. Это означает, что размер шрифта заголовков второго уровня будет масштабирован с коэффициентом 1,2. В нашем случае размер всех заголовков <h2> будет составлять 1,2 размера шрифта элемента <body>, что означает в 1,2 раза больше, чем 14px, и примерно равняется 17px. (На самом деле размер будет равняться 16,8, но большинство браузеров округлит его до 17.)

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

Ключевые слова

CSS предлагает семь ключевых слов, которые позволяют назначить размер шрифта относительно размера по умолчанию (16px): xx-small, x-small, small, medium, large, x-large и xx-large.

p { font-size: small; }

Среднее значение medium — размер шрифта по умолчанию в браузерах. Остальные значения уменьшают или увеличивают размер шрифта с различными коэффециентами. Самый маленький размер шрифта xx-small равен примерно 9 пикселям, каждый последующий размер примерно на 20% больше предыдущего:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      p.class1 { font-size: 120%; }
      p.class2 { font-size: 18px; }
      p.class3 { font-size: x-small; }
    </style>
  </head>

  <body>
    <p class="class1">Изменение размера с помощью процентов.</p>
    <p class="class2">Изменение размера с помощью пикселей.</p>
    <p class="class3">Изменение размера с помощью ключевого слова x-small.</p>
  </body>
</html>

Попробовать »

С этой темой смотрят:

• Отступ текста в CSS
• Выравнивание текста в CSS
• Цвет и тень текста в CSS
• Как изменить шрифт в CSS
• Стандартные (безопасные) шрифты

Как установить CSS свойства шрифта?

В файле CSS вы можете настроить несколько свойств шрифта: font-family, font-size, font-style. Это наиболее часто используемые свойства шрифта:

font-family

С помощью свойства font-family можно задать семейство, которым будет отображаться CSS жирный шрифт:

body {
	 font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
 }
 p {
	 font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida 	Typewriter", monospace;
 }

Результат:

CSS font family

font-size

Свойство font-size предназначено для изменения размера шрифта. Вы можете использовать единицы измерения CSS, такие как пиксели, em и проценты:

font-sizeCSS

p {font-size:20px;}

Пиксели (px) — это наиболее часто используемые единицы измерения. Но если вы используете em, то это может помочь избежать некоторых проблем при изменении размеров элементов в окне просмотра:

p {font-size:0.875em;}

Em связаны с текущим размером шрифта браузера. 1em равен текущему значению размера шрифта, установленному в браузере. Если сравнивать с пикселями, то вы можете вычислить значение em по следующей формуле: pixels/16=em:

body {font-size:100%;}

Также можно задать размер CSS шрифта, используя процентные значения. font-size:100%; означает, что шрифт использует текущий размер шрифта браузера. Для увеличения размера нужно задать большее процентное значение. Аналогично, если нужно уменьшить размер шрифта, вы можете уменьшить процентное значение:

body {font-size:200%;}

Приведенный выше код увеличивает размер шрифта в два раза по сравнению с текущим размером, установленным в браузере:

body {font-size:50%;}

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

font-style

В CSS предусмотрены два значения для свойства font-style — italic и oblique:

p {font-style:italic;}
	h1{font-style:oblique;}

font-weight

Если нужно вывести жирный шрифт, то можете использовать свойство CSS font weight:

p{font-weight:bold;}

Значения свойства font-weight: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900:

p{font-weight:bolder;} 
	p{font-weight:500;}

font-variant

Свойство font-variant используется, чтобы преобразовать все строчные буквы в заглавные. При этом преобразованные заглавные буквы будут выводиться меньшим шрифтом, чем оригинальные заглавные буквы в документе:

p{ font-variant:small-caps;}

В следующем коде использовано большинство описанных выше свойств шрифтов в CSS:

<html>
<head>
	<style type="text/css">
		body {
			font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
		}
		p.size{ font-size:20px;}
		p.percentage{ font-size:80%;}
		p.style{ font-style:italic; }
		p.bold { font-weight:bold; }
		p.variant { font-variant:small-caps; }
	</style>
</head>
<body>
	<p class="size">This paragraph displays in font size 20</p>
	<p class="percentage">This paragraph displays in font size smaller as 80%</p>
	<p class="style">This paragraph displays in font style as Italics</p>
	<p class="bold">This paragraph displays BOLD letters</p>
	<p class="variant">This paragraph change small to capital letters</p>
</body>
</html>

Результат:

Данная публикация является переводом статьи «CSS font properties» , подготовленная редакцией проекта.

Свойства font-weight, line-height и font-style

«Font-weight» в Css позволяет задавать нормальное (normal) или жирное (bold) начертание шрифта для того элемента, которому это свойство адресовано. Но на самом деле у него могут быть и другие значения. Их всего четыре буквенных плюс цифровая шкала:

1. Для «font weight» можно использовать значения: normal, bold, bolder (чуть более жирный) или lighter (чуть более тонкий). Причем, реально работают во всех браузерах только значения normal (в него же будет переключать и lighter) и bold (bolder также даст просто жирное начертание).

2. Либо цифровые значения от 100 до 900 с шагом в 100 (от сверхтонкого до сверхжирного). Т.е. по этой шкале шрифт мог использовать много начертаний разной степени жирности. Изначально значение normal соответствовало 400, а значение bold — 700.

   Но на практике пока ни один браузер для «Font-weight» этого не поддерживает в полной мере. А жаль, иногда хочется использовать чуть более жирный или чуть более тонкий фонт, чем тот, что нам могут дать значения «normal» и «bold». Увы и ах, сейчас все цифры менее 400 дадут вам в итоге нормальный, а все что больше — жирный.

Следующее правило, которое у нас стоит на очереди и которое позволяете задать оформление шрифтов для имеющихся у вас Html элементов, это «Line-height», что означает — высота линии. Смысл этого правила в том, чтобы отодвинуть строчки текста на веб-странице друг от друга по высоте, ибо слепленные друг с другом строки становятся не читаемыми. В полиграфии это называется интер-линьяж.

С помощью «Line-height» можно добавить или уменьшить пространство над и под строкой с текстом, изменяя таким образом всю высоту линии с текстом:

Например, для Arial высота линии равна примерно 120%, т.е. размер по вертикали всей строки (литеры плюс свободное пространство над и под ней) будет на 120% больше высоты шрифта. А для Times New Roman значение этого свойства по умолчанию будет уже примерно 125%.

Для увеличения и уменьшения расстояния между строками текста можно использовать относительные значения для «Line-height» в виде процентов или «Em». Например, для сильного разрежения строк (увеличения высоты линии) можно написать:

line-height:300%;
или
line-height:3em;

А если написать так:

line-height:30%;
или
line-height:0.3em;

то высота линии станет меньше, чем высота шрифта (font-size), и строки текста попросту наедут друг на друга.

В качестве значений для «Line-height» можно также использовать и любые абсолютные значения, которые принято использовать для шрифтов в таблицах каскадных стилей — пикселы (px), дюймы (in), пункты (pt). Либо можно использовать безразмерный множитель (любое число больше нуля). Например, для задания полуторного интервала между строками можно написать так:

line-height: 1.5;

Следующее Css свойство — это «font-style», с его помощью можно задать наклонный шрифт (курсив). Для него по спецификации предусмотрено три варианта значений: normal, italic и oblique. Но на практике используются только первые два. Причем, значение «normal» является значением по умолчанию.

Когда вы задаете для какого-либо элемента Html кода значение font-style:italic, то браузер будет искать нужную гарнитуру, помеченную как «italic» (т.е. курсивное начертание). Если сами вы зайдете через панель управления на своем компьютере в «шрифты» , то увидите там, что многие из них имеют вариант с «italic» или «курсив» в названии.

Но есть шрифты (например, всем известный Tahoma), у которых разработчиками не было предусмотрено наклонного начертания. Что же сделает в этом случае браузер (если вы в font-style прописали italic)? А он будет сам пытаться наклонить буквы этого шрифта, раз об этом заблаговременно не позаботились его разработчики. Выглядеть это будет, конечно же, хуже.

Ну, а значение oblique для font-style будет вынуждать браузер всегда наклонять шрифт своими средствами, даже если для него имеется курсивное начертание. Выглядеть это будет зачастую просто ужасно, поэтому значение «oblique» практически не используется.

Ну и последнее из рассмотренных сегодня свойств таблиц каскадных стилей — font-variant, которое очень редко используется при верстке с учетом Html и CSS.

По умолчанию в шрифтах начертание строчных букв отличается от заглавных не только размером, но и внешним видом самих литер. А вот «font-variant» позволяет, не изменяя размера строчных букв, сделать их начертание точно таким же, как и начертание заглавных.

Соответственно, у этого свойства имеется всего два значения: normal (по умолчанию) и small-caps (начертание строчных будет таким же, как и у заглавных букв). Для русского языка это свойство используется крайне редко.

Другие варианты выравнивания и использования стилей

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

Это делается при помощи атрибута style, применяемого с большинством стандартных тегов HTML. Но есть и другие варианты использования CSS.

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

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

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

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

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