Изменение стилей шрифтов

Изменять стили написания шрифтов в HTML можно далеко не одним способом:

 

<B>...</B> и <STRONG>...</STRONG> — выделяют текст полужирным шрифтом.

<I>...</I> и <EM>...</EM> — выделяют текст курсивом.

<SUP>...</SUP> — выводит текст в верхнем индексе, например E = mc2.

<SUB>...</SUB> — выводит текст в нижнем индексе, например H2SO4.

 

Все эти теги являются встроенными (inline, уровня строки), то есть не создают переносы строк до и после себя, а располагаются на одной строке. Содержать они могут тоже только встроенные элементы, поэтому их свободно можно вкладывать друг в друга. Самое главное не забывайте о правильной вложенности: тег, открытый раньше — должен быть закрыт позже.

Для выделения жирным и курсивом существует по два тега. Дело в том, что обычные браузеры отображают содержимое этих тегов одинаково, а вот невизуальные (голосовые) браузеры могут по особенному акцентировать текст внутри <STRONG> и <EM>. Поэтому, если вы хотите выделить какие-то слова или фразы, чтобы привлечь читателя, то лучше использовать именно эти теги, хотя, по большому счету, разницы нет.

Существуют еще теги <S> и <STRIKE>, подчеркивающие текст, а также тег <U>, отображающий зачеркнутый текст. Эти теги являются устаревшими в HTML и их, как и атрибут align, возможно скоро перестанут понимать браузеры. Лучше использовать атрибут style, причем его допустимо указывать внутри любых тегов. Общий синтаксис следующий:

 

<тег style="text-decoration:underline">...</тег> — подчеркивает текст.

<тег style="text-decoration:overline">...</тег> — надчеркивает текст.

<тег style="text-decoration:line-through">...</тег> — зачеркивает текст.

 

Пример изменения стилей шрифтов

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">

<title>Изменение стилей шрифтов</title>

</head>

<body>

<p><b>Жирный шрифт.</b><i>Курсив.</i></p>

 

<p><b><i>Жирный курсив.</i></b></p>

 

<p><em>H<sub>2</sub>SO<sub>4</sub></em> - формула серной кислоты написанная курсивом.</p>

 

<p style="text-decoration:underline">Подчеркнутый параграф текста.</p>

 

<p>Обычный текст,

<strong style="text-decoration:line-through">зачеркнутый жирный.</strong>

</p>

</body>

</html>

 

Результат в браузере

Style — это абсолютно обычный атрибут тегов, но относится он к Каскадным таблицам стилей (CSS). В далеком прошлом все функции по структуризации HTML-страницы в целом и по внешнему представлению ее каждого элемента в отдельности (цвет, форма, положение на странице и т.д.) брал на себя язык HTML. Но потом разработчики языка решили разграничить эти функции и создали CSS. Соответственно многие теги или атрибуты тегов стали устаревшими. есть. Общий синтаксис атрибута style следующий:

 

<тег style="свойство CSS:значение">...</тег>

 

Тег <SPAN> или что делать, когда нет нужных тегов

Тег <SPAN>...</SPAN>. Этот тег тоже является встроенным (inline, уровня строки) и может содержать любые встроенные теги, но главное не это. Сам по себе <SPAN>, без атрибутов, не добавляет никаких изменений ни тексту, ни тегам находящимся внутри него. А создан он был специально для стилей, то есть, по сути, для атрибута style. Именно благодаря этому атрибуту, а вернее его разным значениям, у <SPAN> появляются те или иные свойства.

Пример использования тега SPAN

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">

<title>Использование тега SPAN</title>

</head>

<body>

<p><span>Обычный текст без изменений.</span></p>

 

<p>Еще обычный текст.

<span style="text-decoration:underline">Подчеркнутый.</span>

<span style="text-decoration:line-through">Зачеркнутый.</span>

</p>

</body>

</html>

Результат в браузере

 








Дата добавления: 2015-12-11; просмотров: 844;


Поиск по сайту:

При помощи поиска вы сможете найти нужную вам информацию.

Поделитесь с друзьями:

Если вам перенёс пользу информационный материал, или помог в учебе – поделитесь этим сайтом с друзьями и знакомыми.
helpiks.org - Хелпикс.Орг - 2014-2024 год. Материал сайта представляется для ознакомительного и учебного использования. | Поддержка
Генерация страницы за: 0.006 сек.