Font bold style css: How to bold text in CSS

Разное

Содержание

CSS font

HTML5CSS.ru

ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ

❮ Назад Полный CSS Справочник Дальше ❯

Пример

Укажите все свойства шрифта в одном объявлении:

p.a {
font: 15px arial, sans-serif;
}

p.b {
font: italic bold 12px/30px Georgia, serif;
}

Подробнее примеры ниже.

Определение и использование

Свойство font является сокращенным для следующих свойств:

font-style
font-variant
font-weight
font-size/line-height
font-family

Требуются значения размера шрифта и семейства шрифтов. Если одно из других значений отсутствует, используется значение по умолчанию.

Примечание: Свойство «высота линии» задает расстояние между линиями.

Значение по умолчанию:	Значение по умолчанию для всех свойств шрифта
Inherited:	yes
Animatable:	yes, see individual properties. Читайте о animatable
Version:	CSS1
Синтаксис JavaScript:	object.style.font=»italic small-caps bold 12px arial,sans-serif»

Поддержка браузера

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

Свойство
font	1.0	4.0	1.0	1.0	3.5

Примечание: В разделе поддержка отдельных обозревателей для каждого значения ниже.

Синтаксис CSS

Значения свойств

Property/Value	Описание
font-style	Задает стиль шрифта. Значение по умолчанию — «Normal»
font-variant	Задает вариант шрифта. Значение по умолчанию — «Normal»
font-weight	Задает вес шрифта. Значение по умолчанию — «Normal»
font-size/line-height	Задает размер шрифта и высоту линии. Значение по умолчанию — «Normal»
font-family	Задает семейство шрифтов. Значение по умолчанию зависит от обозревателя
caption	Использует шрифт, используемый элементами управления с подписями (например, кнопки, раскрывающиеся и т.д.)
icon	Использует шрифт, используемый метками значков
menu	Использует шрифты, используемые в раскрывающихся меню
message-box	Использует шрифты, используемые в диалоговых окнах
small-caption	Уменьшенная версия шрифта титров
status-bar	Использует шрифты, используемые в строке состояния
initial	Присваивает этому свойству значение по умолчанию. (Читайте о initial)
inherit	Наследует это свойство из родительского элемента. (Читайте о inherit)

Другие примеры

Пример

Демонстрация некоторых других значений свойств шрифта.

<p>The browser font used in captioned controls.</p>
<p>The browser font used in icon labels.</p>
<p>The browser font used in dropdown menus.</p>
<p>The browser font used in dialog boxes.</p>
<p>A smaller version of the caption font.</p>

<p>The browser font used in the status bar.</p>

Пример | Анализ

Пример

< html >
< головка >
< заголовок >Документ Заголовок заголовок >
голова >
< корпус ССЫЛКА=»#ff8080″ ВЛИНК=»#ff0000″ ССЫЛКА=»a05050″ >
< h2 ВЫРАВНИВАТЬ=»по центру» >Добро пожаловать на мою домашнюю страницу! h2 >
< бр >< бр >
< p >< диапазон >Привет! Если вы читаете это, значит, вы нашли мою домашнюю страницу! Поздравляем! span >
Я знаю, что найти мои страницы может быть трудно, но я Держу пари, что тебе сейчас повезло. Теперь, когда вы здесь, пожалуйста, взгляните на мою страницу ссылок на < a HREF=»http://www.mysite.com/coolsites.html»>круто сайты a > или подпишитесь на мой < и HREF=»http://www.mysite.com/guestbook.html»> гость книга a > p >
< раздел >< раздел >
< размах >M размах >y замечательная поэзия div > доступна, если вы Очень скучно. Почему бы не попробовать? div >
< h3 >
Лучшая поэзия I < em >НИКОГДА em > Писал h3 >
< ул. >
< li >’Жил-был человек из Нантакета’ —
< диапазон >Анонимный span > li >
< li >’Круто в меху’ —

< диапазон >Гарри Б. Фут span > или >
< li >И моя самая любимая:
< ул >
< ли > «Тост за мой тостер» —
< диапазон >Я! span > li >
ул >
li > ul >
< цитата >Принесено тебе письмом
< диапазон >»H» диапазон >
и < диапазон >Джо Шмо span > цитата >
< деление >
<
диапазон размер шрифта: х-большой; цвет: #ffffff»> W span >когда вы закончите просматривать эти шедевры, я призываю вас посетить моего гордого спонсора!! раздел >
< р >
< диапазон > РЕКЛАМА: span >
Купите созерцатель Navel Lint! Это браузер и это бутерброд! Перейти к нашему < HREF=»http://www. navellint.com»>главная страница страница a > без промедления! Почему? Потому что полка жизнь только 8 часов, если не в холодильнике. Мы знаем, что это затрудняет просмотр, но это способствует частому обновлению до последней и лучшей версии. р >
< h6 >Применяются все стандартные заявления об отказе от ответственности. Ваша жизнь зависит от НЕ копирование этого документа любым способом. Эта лента будет
< и HREF=»http://www.mysite.com/selfdestruct.html»>я уничтожить a > через 10 секунд… h6 >
корпус >
html >

Анализ

Строка: Общие
Проблемы CSS: Встроенные стили
Описание: Обратите внимание, что этот пример выглядит более загромождены, чем примеры внешнего и встроенного CSS. Это потому что информация о стиле смешивается с содержимым документа.

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

Строка: 5
Проблемы CSS: Псевдоклассы
Описание: Мы используем атрибуты HTML BODY для управления поведением гиперссылок. Отсутствие якорных псевдоклассов делает это необходимо. Здесь можно использовать атрибуты BGCOLOR и TEXT для элемента BODY. также, но мы пытаемся использовать встроенные стили в как можно большем количестве ситуаций. возможно, поэтому просто игнорируйте этот момент. знак равно
Линия: 6
Проблемы с CSS: Несколько Селекторы, множественные сокращения объявления
Описание: Атрибут стиля здесь устанавливает многие свойства элемента h2. Большая часть информации об этом стиле также используется на SPAN в строке 31. При использовании встроенного метода мы теряем преимущество группировка селекторов, которую предлагают классы.
Строка: 8
Проблемы CSS: Псевдоэлементы
Описание: Мы используем элемент SPAN внутри элемент P для имитации псевдоэлемента «первой строки», используемого в примеры уровня документа и внешней таблицы стилей. Встроенные стили не допускают возможность прикрепления стилей к виртуальным псевдоэлементам, поэтому эффект должны быть смоделированы с реальным элементом. Обратите внимание, что хак в этом примере грубый, и нельзя рассчитывать на то, что он всегда будет производить истинный эффект «первой линии», т. созданная виртуальной структурой псевдоэлемента.
Строка: 10
Проблемы CSS: Псевдоэлементы
Описание: Здесь у нас есть вложенные элементы DIV. самая внутренняя пара элементов DIV используется, как и в предыдущей строке, для достижения эффект псевдоэлемента («первая строка»). Первая строка довольно легко определяется в этом случае ранним размещением тега BR для завершения первого линия. Конец «первой линии» не так легко определить в предыдущей линия, потому что исходная линия в том виде, в каком она была разработана, будет перетекать намного дальше одной линии под большинство разрешений браузеров и размеров экрана. Помните, что разрыв строки решения для конечного пользователя не могут быть предопределены — если иметь это в виду вас гораздо меньше будут беспокоить неизбежные вариации, происходящие от браузер в браузер.
Телефон: 11 / 29
Проблемы CSS: Псевдоэлементы
Описание: В этих экземпляры при отсутствии возможности использовать псевдоэлемент ‘first-letter’. Поскольку мы можем легко определить, что представляет собой первая буква в этих и В большинстве случаев мы можем назначить SPAN с желаемой информацией о стиле для нашего предполагалось «первое письмо». Учитывая выбор, представляется предпочтительным использовать псевдоэлемент, когда это возможно, так как он не использует дополнительные элементы/разметку.
Строка: 12
Проблемы CSS: Множественные селекторы
Описание: Внешний и встроенный CSS примеры используют отдельное правило для установки фоновой информации для нескольких элементов. Так как здесь этого сделать нельзя, его необходимо указывать снова и снова для экземпляр каждого элемента. Это приводит к созданию повторяющихся операторов стиля. а также некоторые очень занятые элементы HTML.
Линия: 13
Проблемы CSS: Контекстные Селекторы, встроенные стили
Описание: Элементу EM присваивается особый стиль. В других примерах CSS это достигается с помощью контекстных селекторов (которые могут нельзя использовать в случае встроенных стилей.) Поскольку существует только один экземпляр данной ситуации вложенности элементов в этих примерах ни один из методов не имеет недостатков.
Линия: 16 / 18 / 22 / 26
Проблемы с CSS: Несколько Селекторы, специальные свойства
Описание: Мы устанавливаем несколько свойств на несколько элементов HTML здесь. Теперь мы начинаем видеть великую силу в краткость структур классов HTML. Мы должны повторить нашу информацию о стиле не просто дважды, а ЧЕТЫРЕ раза, чтобы охватить все случаи. Четко это приводит к увеличению размера файла и сокращает время загрузки.
Строка: 21
Проблемы CSS: Наследование
Описание: Особые свойства присваиваются этот конкретный пункт в списке. Вложенный элемент SPAN наследует Свойства FONT-SIZE и FONT-STYLE, назначенные этому LI.
Линия: 25 / 26 / 27 / 28 / 31
Проблемы с CSS: Наследование
Описание: Это просто нормальное, обыденное встроенные операторы CSS, применяемые к BLOCKQUOTE, DIV, P с вложенными элементами SPAN внутри них. Элементы SPAN наследуют значения свойств, присвоенные родительские элементы, если эти свойства также не указаны для SPAN.
Линия: 30
Вопросы CSS: Стенограмма Свойства
Описание: Использует сокращенные свойства на П элемент. Использование 4 сокращений в этом случае выполняет ту же работу, используя сокращенный синтаксис как 15 обычных отдельных свойств. Когда используешь встроенные стили, нам нужно сохранить все пространство, которое мы можем.
Строка: 33
Проблемы CSS: Наследование, Каскадные правила
Описание: Это использование ‘!important’ в стиле назначения уникальны здесь в этом документе. Это укажет браузеру что это правило должно использоваться вместо обычного набора правил для этого элемента ситуация, указанная другим методом (используя собственную таблицу стилей читателя например.) Это хороший способ гарантировать, что ключевой элемент стиля на вашей странице выдерживает неопределенность расчета каскадного порядка.
No related posts.