Выделение жирным шрифтом css. Выделение текста жирным начертанием. Теги выделения текста чертой —, и
Акцентировать текст в большом количестве информации – хорошая идея. Ведь чтец может не заметить нужной, важной или еще какой-то информации, которую вы хотите донести. Например, я тоже акцентирую текст: теги, стили, атрибуты, ключевые слова, ссылки и прочее я выделяю своим цветом, но делаю я это при помощи стилей. В HTML предусмотрены стандартные «выделители» текста: жирное начертание, косое начертание, подчеркнутое начертание, зачеркнутое начертание, больше размера, меньше размера. Пробежимся по всем элементам акцентирования.
Жирный текстВсеми известный жирный шрифт, который можно увидеть везде. Для этого было разработано два тега и . Тег , более распространенный. Эти теги не одинаковы, хоть и результат схож. Различие заключается в том, что тег определяет физическую жирность текста, а тег определяет важность этого текста и выделяет его жирным начертанием. Но, большое «но», в современных браузерах их права «уравняли», они стали равнозначными (эквивалентными). Такая же ситуация и у тегов и . Следовательно, выгоднее использовать тег, который короче. Далее пример:
Жирный текст
Курсивный текстЗа акцентирование курсивным шрифтом, отвечают теги и . Как сказано выше, они различны по своей направленности, но в современных браузерах эквивалентны. Далее пример:
Подчеркнутый текстАкцентировать текст подчеркнутым шрифтом можно при помощи тега . Этот тег осуждают спецификацией HTML и рекомендуют использовать стили, с чем я и соглашусь. Я обязательно напишу эквиваленты тегов акцентирования в CSS. Далее пример:
Подчеркнутый текст
Зачеркнутый текстДля того чтобы зачеркнуть текст, используют два эквивалентных тега: и . Эти два тега осуждают и рекомендуют взамен им использовать стили. А тег категорически запрещен в HTML5. Далее пример:
Зачеркнутый текст
Крупнее и мельче обычного текстаАкцентировать текст, можно и увеличив размер это текста. Для этого есть тег . Чтобы текст был мельче обычного, применяют тег . Но все же выгодно использовать всегда стили CSS. Далее пример:
Крупнее текст
Замена жирного текста стилями CSSЕсть такое свойство в CSS – font-weight . Оно принимает много значений: font-weight :bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900 . Чтобы сделать текст самым жирным, нужно использовать значение font-weight : 900 . О нем мы еще поговорим в следующих уроках.
Замена курсивного текста стилями CSSВ CSS есть аналог тегу (Курсивный текст). Это свойство font-style . Далее пример:
I {
font-style: italic;
}
Тег осуждается спецификацией HTML и рекомендуется использовать стили. Аналогом может служить свойство text-decoration . Я обычно его использую, чтобы убрать подчеркивание у ссылок (значение none), но в этом случае нам нужно добавить подчеркивание (значение underline). Далее пример:
Подчеркнутый текст
U {
text-decoration: underline;
Один из наиболее простых способов выделить в тексте слово или фразу - использовать другое начертание букв. Так можно подчеркнуть слово или фразу, используя жирный страницы с легкостью позволяет выделять слова с помощью различного начертания - курсивного, подчеркнутого, жирного.
Жирный шрифт как способ выделить главноеНаиболее ярко и броско выглядят слова, выделенные с помощью жирного шрифта. Такие слова и фразы сразу бросаются в глаза. Итак, для того чтобы научиться быстро выделять в тексте нужные места, следует запомнить специальный HTML-код. Жирный шрифт выставляется с помощью парного тэга .
Перед словом или фразой, предложением, которые должны быть выделены, ставится открывающий тэг . После последней буквы в тексте, который следует выделить, ставится закрывающий тэг . Все, что оказывается между этими двумя тэгами, при отображении в браузере имеет жирное начертание.
Другие варианты выделения
Итак, мы выяснили, что можно выделить текст с помощью другого начертания. Определились, что наиболее просто и в то же время эффективно использовать жирный шрифт HTML. Теперь поговорим о других вариантах выделения.
Так, можно выделить текст курсивом с помощью парного тэга , подчеркнуть его с помощью . Это наиболее простые способы выделения текста.
Есть также менее известные и используемые тэги, с помощью которых можно выделять слова и предложения в тексте. Так, для того чтобы перечеркнуть текст, достаточно использовать . Сделать текст моноширным поможет парный тэг . Если вам нужно создать верхний индекс, используйте , нижний - .
При этом, как и ранее, нужный вам текст должен находиться между открывающим и закрывающим тэгом. Как видите, нет ничего сложного, главное - запомнить данные коды или записать их.
Использование нескольких шрифтовЕсли вы хотите сделать текст более выразительным, вы можете использовать не только жирный шрифт. HTML-разметка позволяет одновременно выделять слово с помощью нескольких начертаний. Так, можно одновременно сделать слово жирным, перечеркнутым и курсивным.
При этом надо помнить одно - все тэги должны закрываться последовательно. Например, правильная запись может быть такой:
- выделенный текст .
Если же вы закроете тэги в другом порядке, то текст будет выделен неправильно. Пример ошибочной записи:
- выделенный текст .
В таком случае браузер запутается и не поймет, что именно вы от него хотите.
Кстати, тут можно отметить, что три варианта начертания - жирное, подчеркнутое и курсивное - запоминаются довольно легко, если вы владеете горячими клавишами в Word. Там начертание задается с помощью тех же букв-клавиш при зажатом Ctrl.
Как видите, использовать можно не только курсивный или жирный шрифт. HTML-разметка позволяет выделять слова так же легко, как и обычный Word.
ВыводыДля выделения текста широко используются не только разнообразные цвета и оттенки, разный размер и тип шрифта, но и его начертание. Причем именно с помощью другого очертания можно красиво и легко выделить тот или иной фрагмент текста.
Для того чтобы изменить начертание шрифта, следует использовать любой известный вам тег. Жирный шрифт HTML-страницы - наиболее яркий и заметный, а потому используется наиболее часто для выделения.
Все мы привыкли выделять часть текста или отдельные слова на сайте жирным, подчеркиванием или курсивом. Однако при чрезмерном злоупотреблении данными вещами, поисковые системы могут фильтрануть вашу страничку, либо же сайт.
Сегодня я предложу выход для тех, кто хочет все также выделять слова и текст, однако не бояться санкций со стороны поисковиков. Данный способ я использую лично на нескольких сайтах.
За форматирование текста отвечают стандартные теги HTML:
Внимание! Я выпустил новую тему Romb для ваших статейников и блогов. Максимально быстрая по Google PageSpeed и максимальная оптимизация под SEO.
Я же предлагаю использовать CSS для выделения текста, что будет восприниматься поисковиками вполне адекватно.
Шаг 1. Прописываем параметры CSSОткройте свой файл стилей (style.css, css.css, screen.css и прочее) и добавьте в самый конец такое:
Strong {font-weight:bold;} .italic {font-style:italic;} .underline{text-decoration:underline;}
Strong { font-weight : bold ; } Italic { font-style : italic ; } Underline { text-decoration : underline ; } |
Здесь мы задали соответствующим классам свой внешний вид. Теперь вы можете в режиме HTML взять нужный отрезок текста, или слово, в тег span с нужным параметров, в результате чего текст примет нужный вид: жирный, курсив или подчеркивание нижнее. Смотрите:
Однако это времязатратно каждый раз вручную прописывать новый тег span с классом. Поэтому предлагаю вариант это автоматизировать.
Шаг 2. Добавляем свои кнопки в панель форматирования текстаТеперь мы добавим новые кнопки в панель форматирования текста в админке вашего сайта на WordPress. Выглядеть это будет вот так:
Как видно с картинки, у меня в режиме HTML добавилось 3 новых кнопки. Именно на них я "подвесил" созданные span с нужными классами (strong, italic и underline).
Открываем свой файл functions.php и в самый конец, перед закрывающим ?> , добавляем такой код (позаимствован, но модифицирован мной):
/*свои кнопки форматирования текста*/ add_action("admin_footer", "eg_quicktags"); function eg_quicktags() { ?> jQuery(document).ready(function(){ if(typeof(QTags) !== "undefined") { QTags.addButton("zhirny", "Жирный", "", ""); QTags.addButton("italic", "Курсив", "", ""); QTags.addButton("underline", "Подчеркивание", "", ""); } });
