Меню
Наши новости
Учебник CSS

Невозможно отучить людей изучать самые ненужные предметы.

Введение в CSS
Преимущества стилей
Добавления стилей
Типы носителей
Базовый синтаксис
Значения стилевых свойств
Селекторы тегов
Классы
CSS3

Надо знать обо всем понемножку, но все о немногом.

Идентификаторы
Контекстные селекторы
Соседние селекторы
Дочерние селекторы
Селекторы атрибутов
Универсальный селектор
Псевдоклассы
Псевдоэлементы

Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить - становится деканом. (Т. Мартин)

Группирование
Наследование
Каскадирование
Валидация
Идентификаторы и классы
Написание эффективного кода

Самоучитель CSS

Вёрстка
Изображения
Текст
Цвет
Линии и рамки
Углы
Списки
Ссылки
Дизайны сайтов
Формы
Таблицы
CSS3
HTML5

Новости

Блог для вебмастеров
Новости мира Интернет
Сайтостроение
Ремонт и советы
Все новости

Справочник CSS

Справочник от А до Я
HTML, CSS, JavaScript

Афоризмы

Афоризмы о учёбе
Статьи об афоризмах
Все Афоризмы

Видео Уроки


Популярные статьи
Наш опрос



РЕКЛАМА


ВАША РЕКЛАМА
18-03-2016, 16:18
Жирный текст с помощью HTML и CSS - «Верстка»
Рейтинг:

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


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


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


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



Обычный текст.


[b]Жирный текст.


Жирный текст strong.



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



Последние два варианта визуально выглядят одинаково, однако они между собой немного отличаются. Тег [b] задает простое стилистическое выделение слова жирным шрифтом, тогда как добавляет при этом некое семантическое “усиленное” (важное) значение. То есть последняя строка – это не просто жирный текст, а какая-то важная информация. В принципе, для поисковиков рекомендуют использовать именно .


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



Пример жирного текста.


Пример текста с жирным словом.



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



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

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


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


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



  • bold (жирный) – 700 по умолчанию;

  • normal (обычный) – 400 по умолчанию.


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


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



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



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



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


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



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


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



    strong {
    font-weight: bold;
    }


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


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


    Теги: CSS Верстка HTML текст жирный жирным помощью

    Просмотров: 1 875
    Комментариев: 0:   18-03-2016, 16:18
    Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

     
    Еще новости по теме:



    Другие новости по теме: