Как сделать жирный или подчеркнутый текст в CSS и HTML. Html подчеркивание тег


Подчеркивание в html: способы.

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

Подчеркивание в HTML

Итак, как же сделать подчеркивание? Подчеркивание текста в html оформляется при помощи тега <u>. Он используется во всех спецификациях html и xhtml, но только при условии переходного <DOCTYPE!>, так как должна быть указана версия разметки для браузера. В этом случае документ успешно проходит валидацию. Указывать элемент надо стандартно, то есть в самом верху страницы.html подчеркивание

Тег <u> закрывающийся, он обязательно должен сопровождаться </u>. В разметку его нужно добавлять таким образом:

  1. <h2>Заголовок номер один</h2>
  2. <p>Наш <u>текст</u> в абзаце</p>

Слово "текст" при этом будет подчеркнутым.

Подчеркнуть можно и отдельную букву в слове:

  1. <h3>Заголовок номер два</h3>
  2. <p>Наш те<u>к</u>ст в абзаце</p>

Рекомендации

Традиционно в разметке html подчеркиванием отображаются ссылки при наведении мышкой или даже стационарно, а происходит так по умолчанию во всех браузерах. Поэтому ставить тег <u> на постоянной основе крайне не рекомендуется.

Кроме того, прописывание стилей в css делает код более компактным, а это значит, что загрузка страницы будет быстрее.

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

Подчеркивание в CSS

Декорирование текста при помощи css — удобный и практичный способ. Самые простые способы такого выделения: использование text-decoration или border-bottom.

Чтобы подчеркнуть текст с text-decoration, свойство необходимо добавить к нужному классу.

  • нужный-класс {
  • text-decoration: underline;
  • }

Следует помнить, что названия классов всегда прописываются латиницей.подчеркивание текста html

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

  • нужный-класс {
  • text-decoration: none;
  • }

Затем текст украшается при помощи следующего свойства:

  • .нужный-класс {
  • text-decoration: none;
  • border-bottom: 2px dashed black;
  • }

Так выходит декорирование с пунктирной линией. Чтобы сделать ее сплошной, вместо "dashed" применяется "solid". Тем, кому нравится украшать текст подчеркиванием точками, можно попробовать применить "dotted".

Стили рамок прописываются в одну строку. Кроме типа подчеркивания, нужно еще указать толщину подчеркивания и цвет. Чтобы определиться с размером, можно поэкспериментировать, но обычно достаточно 1 или 2 пикселей. Цвет текста тоже можно сделать в цвет подчеркивания:

  • нужный-класс {
  • text-decoration: none;
  • border-bottom: 1px dotted blue;
  • color: blue;
  • }

Так получится синий текст с синим оформлением. Чтобы присоединить стиль к html, нужно в разметку добавить класс.

  • <h4>Третий заголовок</h4>
  • <p>Наш текст в абзаце</p>

Вот и все, это основы подчеркивания в html.

fb.ru

Подчеркнутый текст силами HTML и CSS

Серёжа СыроежкинКопирайтер

Подчеркнутый текст в HTML выделяется с помощью тега u HTML (от слова underline). Применяется он следующим образом (нужная часть текста помещается между тегами <u></u>):

Конструктор сайтов <u>"Нубекс"</u>

Но данный код считается невалидным, поэтому значительно эффективнее и правильнее использовать CSS-стили для декорации текста.

Подчеркнуть текст - CSS

Как мы уже говорили в статье Зачеркнутый текст, декорации текста задаются при помощи свойства text-decoration. Подчеркнутый текст задается параметром underline:

<!DOCTYPE html> <html> <head> <title>Подчеркнутый текст с помощью CSS - "Нубекс"</title> <meta charset="utf-8"> <style> .underline { text-decoration: underline; } </style> </head> <body> <p>Конструктор сайтов <span>Нубекс"</span></p> </body> </html>

Подчеркнуть текст с помощью CSS можно не только сплошной линией. Посмотрим, какими вариантами можно подчеркнуть текст:

  • Подчеркнуть текст пунктиром CSS: <!DOCTYPE html> <html> <head> <title>Подчеркнутый пунктиром текст - "Нубекс"</title> <meta charset="utf-8"> <style> .dashed { border-bottom: 1px dashed blue; } </style> </head> <body> <p>Конструктор сайтов <span>Нубекс"</span></p> </body> </html>
  • Подчеркивание точками: <!DOCTYPE html> <html> <head> <title>Подчеркнутый точками текст - "Нубекс"</title> <meta charset="utf-8"> <style> .dotted { border-bottom: 2px dotted blue; } </style> </head> <body> <p>Конструктор сайтов <span>Нубекс"</span></p> </body> </html>
  • Двойная черта: <!DOCTYPE html> <html> <head> <title>Подчеркнутый двумя линиями текст - "Нубекс"</title> <meta charset="utf-8"> <style> .double { border-bottom: double blue; } </style> </head> <body> <p>Конструктор сайтов <span>Нубекс"</span></p> </body> </html>

Как видно из приведенных примеров, управлять стилем подчеркивания можно при помощи свойства border-bottom (нижняя граница). С помощью этого параметра можно задать тип подчеркивания, цвет, толщину.

Смотрите также:

nubex.ru

Нижнее подчёркивание html или все хитрости оформления текста

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

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

А давай-ка вот этим подчеркнем!

В языке html существуют специальный парный тег для подчеркивания текста: <u>слово</u>.

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

Для подчеркивания текстового контента в основном используются такие свойства: border и text-decoration.

Элемент border отвечает за установку рамки вокруг указанного блока, а также позволяет задать толщину линии и ее стиль.

text-decorashion

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

  1. border- right (справа)
  2. border- top (сверху)
  3. border- left (слева)
  4. border- bottom (снизу)
Также при помощи border можно задать:
  • точечное (dotted)
  • пунктирное (dashed)
  • линейное (solid)
  • двойное (double)
  • объемное обрамление блокам (groove, inset, ridge и outset)

Не забывайте, что всегда можно повторить стилевые настройки блока-родителя при помощи ключевого слова inherit.

Теперь обсудим свойство языка css text-decoration. Данный элемент отвечает за дополнительные украшения текста.

К ним относятся:

  1. мигание (blink)
  2. линия над текстом (overline)
  3. зачеркнутые объекты (line-through)
  4. наследование стилизации (inherit)
  5. отмена всех дополнительных декораций (none)
  6. необходимое нам подчеркивание (underline)

Настало время практики

Теперь я хочу, чтоб вы закрепили полученные знания и практически опробовали приведенный мной пример программного кода. Для тех, кто знаком с данной темой, это также будет полезно. Как мы все знаем: «Повторение – мать учения!».

Пример использования подчеркивания

Данный код реализует видоизмененную стилизацию ссылок, а также устанавливает подчеркивание заголовка во всю ширину блока.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Подчеркивание</title> <style> h2 { text-align:center; border-bottom:3px double green; padding-bottom: 4px; } .block { border: 5px groove green; padding: 40px; font-size:21px; } .one { text-decoration: none; border-bottom: 2px dashed green; color: green; } .two { text-decoration: none; color: green; font-weight: 900; } a.two:hover, a.one:hover { color: blue; } </style> </head> <body> <h2>Озаглавим текст подчеркнутым названием</h2> <div> В этом блоке находится важный текст с некоторым описанием чего-то и ссылкой на первый ресурс с пунктирным подчеркиванием. Теперь мы опишем вторую ссылку, убрав стандартное подчеркивание и цвет. </div> </body> </html>

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Подчеркивание</title> <style> h2 { text-align:center; border-bottom:3px double green; padding-bottom: 4px; } .block { border: 5px groove green; padding: 40px; font-size:21px; } .one { text-decoration: none; border-bottom: 2px dashed green; color: green; } .two { text-decoration: none; color: green; font-weight: 900; } a.two:hover, a.one:hover { color: blue; } </style> </head> <body> <h2>Озаглавим текст подчеркнутым названием</h2> <div> В этом блоке находится важный текст с некоторым описанием чего-то и ссылкой на первый ресурс с пунктирным подчеркиванием. Теперь мы опишем вторую ссылку, убрав стандартное подчеркивание и цвет. </div> </body> </html>

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

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

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

С уважением, Роман Чуешов

Прочитано: 298 раз

romanchueshov.ru

Жирный или подчеркнутый текст в CSS и HTML

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

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

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

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

Как сделать интернет-магазин?

Как сделать подчеркнутый текст CSS-стилями

Чтобы как-то выделить фрагмент, и сделать его более заметным, мы можем сделать подчеркнутый текст css-стилями, используя свойство text-decoration:underline;

<div> <p>Подчеркнутый текст CSS</p> </div>

<div>

<p>Подчеркнутый текст CSS</p>

</div>

Подчеркнутый текст CSS

Так же это CSS-свойство имеет и другие интересные значения:

  • blink — позволяет сделать слово или предложение мерцающим,
  • line-through — перечёркивает слово или предложение,
  • overline — позволяет провести линию над словом.

Это свойство так же используется для стилизации отображения ссылок по умолчанию. Поэтому, если вы хотите что бы ссылки на страницах вашего сайта отображались без подчеркивания, вам нужно задать для нее text-decoration: none;

Подчеркнутый текст HTML-тегами

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

<div> Делаем <u>подчеркнутый текст HTML-тегом</u>. </div>

<div>

Делаем <u>подчеркнутый текст HTML-тегом</u>.

</div>

Делаем подчеркнутый текст HTML-тегом.

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

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

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

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

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

<div> <p>Жирный</p> <p>Еще жирнее</p> <p>Совсем не жирный текст CSS</p> <p>Очень жирный текст CSS</p> </div>

<div>

<p>Жирный</p>

<p>Еще жирнее</p>

<p>Совсем не жирный текст CSS</p>

<p>Очень жирный текст CSS</p>

</div>

Жирный

Еще жирнее

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

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

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

Так же как и в ситуации с подчеркиванием, если вам нужно в единичных случаях выделить одно или несколько слов, можно использовать для этого специальные HTML-теги, такие как <b>…</b>, или его аналог <strong>… </strong>.

Например:

Делаем <b>жирный текст</b> с помощью <strong> html-тегов </strong>.

Делаем <b>жирный текст</b> с помощью  <strong> html-тегов </strong>.

Делаем жирный текст с помощью html-тегов .

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

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

А на сегодня у меня все! Успешного вам форматирования текста! До встречи в следующих статьях!

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

impuls-web.ru

Как добавить подчеркивание к заголовку?

Подчеркивание для блочных элементов вроде тега <h2> можно проводить двояко. Например, линию под текстом устанавливать на всю ширину блока, независимо от объема текста. А также подчеркивание делать только у текста. Далее рассмотрим оба варианта.

Линия под текстом на всю ширину блока

Чтобы создать линию под текстом, следует добавить к элементу стилевое свойство border-bottom, его значением выступает одновременно толщина линии, ее стиль и цвет (пример 1).

Пример 1. Линия на всю ширину

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Линия под заголовком</title> <style> h2 { font-size: 200%; /* Размер шрифта */ border-bottom: 2px solid maroon; /* Параметры линии под текстом */ font-weight: normal; /* Убираем жирное начертание */ padding-bottom: 5px; /* Расстояние от текста до линии */ } </style> </head> <body> <h2>Пример текста</h2> <p>Черный заголовок привлекает к себе внимание, несмотря на то, что он черный, а не белый.</p> </body> </html>

Расстояние от линии до текста можно регулировать свойством padding-bottom, добавляя его к селектору h2. Результат данного примера показан на рис. 1.

Рис. 1. Линия под заголовком

Рис. 1. Линия под заголовком

Подчеркивание текста

Чтобы подчеркнуть только текст, необходимо воспользоваться свойством text-decoration со значением underline, опять же, добавляя его к селектору h2 (пример 2).

Пример 2. Линия на ширину текста

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Подчеркивание заголовка</title> <style> h2 { text-decoration: underline; /* Подчеркивание заголовка */ } </style> </head> <body> <h2>Пример текста</h2> <p>Черный заголовок привлекает к себе внимание, несмотря на то, что он черный, а не белый.</p> </body> </html>

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

Рис. 2. Подчеркивание заголовка

Рис. 2. Подчеркивание заголовка

В случае использования свойства text-decoration линия жестко привязана к тексту, поэтому определить ее положение и стиль не удастся.

htmlbook.ru

Подчеркивание в html: способы.

Компьютеры 12 декабря 2017

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

Подчеркивание в HTML

Итак, как же сделать подчеркивание? Подчеркивание текста в html оформляется при помощи тега <u>. Он используется во всех спецификациях html и xhtml, но только при условии переходного <DOCTYPE!>, так как должна быть указана версия разметки для браузера. В этом случае документ успешно проходит валидацию. Указывать элемент надо стандартно, то есть в самом верху страницы.html подчеркивание

Тег <u> закрывающийся, он обязательно должен сопровождаться </u>. В разметку его нужно добавлять таким образом:

  1. <h2>Заголовок номер один</h2>
  2. <p>Наш <u>текст</u> в абзаце</p>

Слово "текст" при этом будет подчеркнутым.

Подчеркнуть можно и отдельную букву в слове:

  1. <h3>Заголовок номер два</h3>
  2. <p>Наш те<u>к</u>ст в абзаце</p>

Рекомендации

Традиционно в разметке html подчеркиванием отображаются ссылки при наведении мышкой или даже стационарно, а происходит так по умолчанию во всех браузерах. Поэтому ставить тег <u> на постоянной основе крайне не рекомендуется.

Кроме того, прописывание стилей в css делает код более компактным, а это значит, что загрузка страницы будет быстрее.

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

Видео по теме

Подчеркивание в CSS

Декорирование текста при помощи css — удобный и практичный способ. Самые простые способы такого выделения: использование text-decoration или border-bottom.

Чтобы подчеркнуть текст с text-decoration, свойство необходимо добавить к нужному классу.

  • нужный-класс {
  • text-decoration: underline;
  • }

Следует помнить, что названия классов всегда прописываются латиницей.подчеркивание текста html

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

  • нужный-класс {
  • text-decoration: none;
  • }

Затем текст украшается при помощи следующего свойства:

  • .нужный-класс {
  • text-decoration: none;
  • border-bottom: 2px dashed black;
  • }

Так выходит декорирование с пунктирной линией. Чтобы сделать ее сплошной, вместо "dashed" применяется "solid". Тем, кому нравится украшать текст подчеркиванием точками, можно попробовать применить "dotted".

Стили рамок прописываются в одну строку. Кроме типа подчеркивания, нужно еще указать толщину подчеркивания и цвет. Чтобы определиться с размером, можно поэкспериментировать, но обычно достаточно 1 или 2 пикселей. Цвет текста тоже можно сделать в цвет подчеркивания:

  • нужный-класс {
  • text-decoration: none;
  • border-bottom: 1px dotted blue;
  • color: blue;
  • }

Так получится синий текст с синим оформлением. Чтобы присоединить стиль к html, нужно в разметку добавить класс.

  • <h4>Третий заголовок</h4>
  • <p>Наш текст в абзаце</p>

Вот и все, это основы подчеркивания в html.

Источник: fb.ru

Комментарии

Идёт загрузка...

Похожие материалы

Как убрать подчеркивание в Word: обзор простых способовКомпьютеры Как убрать подчеркивание в Word: обзор простых способов

Как убрать подчеркивание в Word? Если вы задались таким вопросом, значит с вашим текстом что-то не так. Дело в том, что так программа указывает вам на какие-то несовершенства написанного в документе материала. Какие и...

Как убрать подчеркивание в ссылке HTML-страницы?Компьютеры Как убрать подчеркивание в ссылке HTML-страницы?

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

Несколько способов, как вставить видео в HTMLКомпьютеры Несколько способов, как вставить видео в HTML

Сайт в Интернете – это средство продвижения какой-то услуги или предмета. Но какой же веб-ресурс без медиа-контента? Практически на каждом сайте есть видеоролики, которые объясняют, привлекают, заинтересовывают....

 Несколько советов, как при помощи CSS убрать подчеркивание ссылок в HTMLКомпьютеры Несколько советов, как при помощи CSS убрать подчеркивание ссылок в HTML

Верстка любого информативного текста подразумевает включение смысловых гиперссылок или анкоров. Добавляются эти элементы при помощи тега "а" (anchor). Современные браузеры по умолчанию отображают подобный элемент с ни...

Что и как продавать в Интернете: способы, советыБизнес Что и как продавать в Интернете: способы, советы

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

Программы для заработка денег в Интернете. Способы подработки в СетиБизнес Программы для заработка денег в Интернете. Способы подработки в Сети

Сейчас нам предстоит узнать с вами, какие существуют программы для заработка денег в Интернете, да и вообще, познакомиться с таким понятием, как "виртуальная" работа. На самом деле здесь существует довольно много отве...

Пассивный заработок в интернете. Способы пассивного заработкаБизнес Пассивный заработок в интернете. Способы пассивного заработка

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

Как самостоятельно определить положение ребенка в животе: способы диагностики позы малышаДом и семья Как самостоятельно определить положение ребенка в животе: способы диагностики позы малыша

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

Черно-белый пол в интерьере: способы выкладки. Черно-белый пол в ванной комнате и на кухнеДомашний уют Черно-белый пол в интерьере: способы выкладки. Черно-белый пол в ванной комнате и на кухне

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

Как вырастить картошку в мешке? Способы выращивания картошкиДомашний уют Как вырастить картошку в мешке? Способы выращивания картошки

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

monateka.com

Форматирование текста html

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

Здесь мы рассмотрим те, которые используются часто.

Теги, делающие текст заголовками

<h2></h2><h3></h3><h4></h4><h5></h5><h5></h5><h6></h6>Эти теги выделяют текст в виде заголовков. Т.е. каждый заголовок начинается с новой строки, выделен полужирным шрифтом и имеет свой размер (заголовок первого уровня самый большой, шестого - самый маленький).

Эти теги могут использоваться с параметром горизонтального выравнивания align. Возможные значения этого параметра:

  • left - слева,
  • right - справа,
  • center - по центру,
  • jastify - по ширине.
Пример кода:

Это заголовок второго уровня

Это заголовок третьего уровня

Это заголовок четвертого уровня
Это заголовок пятого уровня
Это заголовок шестого уровня Это просто текст

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

Теги разделения на абзацы и переноса строки

Тег <br> - тег принудительного перевода строки. Текст, после этого тега начинается с новой строки.Теги <p></p> разделяют текст на абзацы. Перед началом каждого абзаца следует поместить тег <p>, закрывающий тег не обязателен. В отличии от тега <br> абзацы отделяются друг от друга пустой строкой.

У тега <p> есть параметр align, который задает способ выравнивания текста внутри параграфа. Возможные значения этого параметра:

  • left - слева,
  • right - справа,
  • center - по центру,
  • jastify - по ширине.
Пример кода:

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

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

Это абзац, он отделен от всего текста пустыми строками сверху и снизу и выровнен по центру.

Это просто текст. Это текст с новой строки. В окне браузера это будет выглядеть так:

Теги, выделяющие текст курсивом

<cite></cite><dfn></dfn><em></em><i></i>Эти теги выделяют текст курсивом, но делают они это по разным причинам. Теги <cite></cite> используются для логического выделения названий книг, статей и цитат.Теги <dfn></dfn> используются для выделения определений.Тегами <em></em> и <i></i> выделяют важные фрагменты текста. Последний не рекомендуется к употреблению.

Пример кода:

Этот текст в тегах cite Этот текст в тегах dfn Этот текст в тегах em Этот текст в тегах i

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

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

<strong></strong><b></b>Оба используются для выделения важных фрагментов текста, но предпочтительнее использовать первый.

Пример кода:

Просто текст Этот текст в тегах strong Этот текст в тегах b

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

Теги, выделяющие текст подчеркиванием

<ins></ins><u></u>Оба используются для подчеркивания важных фрагментов текста, но предпочтительнее использовать первый.

Пример кода:

Просто текст Этот текст в тегах ins Этот текст в тегах u

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

Теги, выводящие текст моноширинным шрифтом

<kbd></kbd><samp></samp><tt></tt>Выводят текст моноширинным шрифтом, но предпочтительнее использовать первый.

Пример кода:

Просто текст Этот текст в тегах kbd Этот текст в тегах samp Этот текст в тегах tt

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

Теги, выводящие текст в верхнем и нижнем индексах

Теги <sub></sub> выводят текст ниже уровня строки шрифтом меньшего размера. Теги <sup></sup> выводят текст выше уровня строки шрифтом меньшего размера.Удобны для вывода математических и химических формул.

Пример кода:

y=x2 - уравнение параболы.

h3O - формула воды.

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

Тег font и его параметры

Теги <font></font> указывают параметры шрифта текста:

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

size - размер шрифта в условных единицах от 1 до 7. По умолчанию размер шрифта равен 3.

color - цвет текста (по умолчанию - черный).

Существуют два способа задания цвета: по имени и указанием шестнадцатеричного кода цвета.

С именными цветами (их 156) все просто, смотрим в соответствующую таблицу, выбираем понравившийся цвет и пишем его имя в значение параметра (например, color="blue").

Но гораздо больший выбор предоставляет второй способ. Здесь мы можем выбирать из миллиона цветов, указав его шестнадцатеричный код. Этот код представляет собой 6 цифр и начинается с символа "#". Не будем вдаваться в подробности, как формируется код цвета, укажем лишь на то, что получить его можно, например, в программе Photoshop. О том, как это делать читайте на странице Цвета для web.

Пример кода:

Это простой текст. Этот текст красный, размера 5. Этот текст синий, размера 2.

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

Тег center

Теги <center></center> предназначен для выравнивания всех элементов внутри него по центру окна браузера.

Пример кода:

Это простой текст Это выровненный по центру текст.

Совместное использование тегов

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

Понятнее будет на примере:

Выделим слово "текст" красным цветом:

Текст

Теперь добавим теги курсива (открывающий - слева, закрывающий - справа):

Текст

А теперь - теги полужирного начертания:

Текст

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

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

Предыдущий урок Вернуться в раздел Следующий урок 

www.site-do.ru