- font-weight
- Краткая информация
- Синтаксис
- Значения
- Песочница
- Пример
- Мелодический голос персонажа
- Объектная модель
- Спецификация
- Браузеры
- См. также
- Как и когда использовать правило !important в CSS
- Как применить правило !important в CSS?
- Пример
- Когда использовать правило !important
- Где использовать правило !important ?
- Пример
- Пример
- Пример
- Пользовательские таблицы стилей
font-weight
Устанавливает насыщенность шрифта. Значение указывается в виде чисел от 100 до 900 с шагом 100 или с помощью заданных ключевых слов.
Краткая информация
Синтаксис
font-weight: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900Синтаксис
| Описание | Пример | |
|---|---|---|
| Указывает тип значения. | ||
| A && B | Значения должны выводиться в указанном порядке. | && |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,]* |
| + | Повторять один или больше раз. | + |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| Повторять не менее A, но не более B раз. | ||
| # | Повторять один или больше раз через запятую. | # |
Значения
Насыщенность шрифта задаётся с помощью ключевых слов: bold — жирное начертание и normal — нормальное начертание. Также допустимо использовать условные единицы от 100 до 900. Значения bolder и lighter изменяют жирность относительно насыщенности родителя, соответственно, в большую и меньшую сторону.
Вот как числовые значения влияют на насыщенность шрифта.
- 100 — тонкое начертание;
- 200 — сверхсветлое;
- 300 — светлое;
- 400 — нормальное (аналогично normal );
- 500 — среднее;
- 600 — полужирное;
- 700 — жирное (аналогично bold );
- 800 — сверхжирное;
- 900 — тяжёлое.
Учтите, что не все шрифты поддерживают этот набор. Если указанное значение не поддерживается, то браузер приведёт шрифт к ближайшей насыщенности. К примеру, если вы указали 900 и оно не может быть показано, то браузер в действительности применит значение 700 как ближайшее, которое работает корректно.
Песочница
Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.
@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900); div < font-family: Roboto, sans-serif; font-weight: >; > Пример
Мелодический голос персонажа
, соприкоснувшись в чем-то со своим главным антагонистом в постструктурной поэтике, иллюстрирует былинный мифопоэтический хронотоп, об этом свидетельствуют краткость и завершенность формы, бессюжетность, своеобразие тематического развертывания.
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства font-weight
Объектная модель
Объект.style.fontWeight
Спецификация
| Спецификация | Статус |
|---|---|
| CSS Fonts Module Level 3 | Возможная рекомендация |
| CSS Transitions | Рабочий проект |
| CSS Level 2 (Revision 1) | Рекомендация |
| CSS Level 1 | Рекомендация |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft ( Черновик спецификации ) — первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
См. также
Как и когда использовать правило !important в CSS
Когда вы смотрите Каскадную таблицу стилей (CSS) веб-страницы, первое, что вы заметите в коде, это !important. Это ключевое слово влияет на приоритетную обработку внутри таблицы стилей.
Каскадная таблица стилей на самом деле является каскадной. Это означает, что стили расположены в особом порядке. Стили обычно применяются в том порядке, в каком читает их браузер. Примените первый стиль, потом второй и т. д.
Поэтому, если нам встречается стиль наверху таблицы стилей, а потом опускается вниз внутри файла, тогда второй сценарий этого стиля это сценарий, примененный в последующих экземплярах, а не в первом. В сущности последний перечисленный используется, если две стили указывают одно и то же (т. е. они имеют одинаковый уровень специфики).
Давайте представим, что таблица стилей содержит следующие стили:
p < color: green; > p < color: black; >Несмотря на то, что к первому параграфу применен зеленый цвет, текст параграфа будет отображен в черном цвете. Причиной этому является то, что значение «black» применяется вторым. Так как CSS читается сверху вниз, завершением является «black».
В продолжении расскажем, как правило !important меняет приоритетность.
Как применить правило !important в CSS?
CSS правило !important дает больше значимости, чем любое другое свойство. В CSS !important означает, что “это важно” (this is important), все последующие правила игнорируются и применяется правило !important . Это правило должно быть указано в конце строки, сразу после точки с запятой.
Для баланса декларация !important (символ-разделитель «!» и ключевое слово «important» находятся после декларации) имеет преимущество над обычной декларацией. Авторские и пользовательские таблицы стилей могут содержать декларации !important , но пользовательские правила !important переопределяют авторские правила !important . Эта CSS функция улучшает доступность документов, давая пользователям c особыми требованиями (большой шрифт, цветовые комбинации и др.) контроль над отображением.
Объявление, чтобы сокращенное свойство (например, color) было !important, эквивалентно объявлению, чтобы все подсвойства были !important . В результате, !important используется для переопределения стилей, которые раньше были представлены в другом стилевом источнике.
Давайте рассмотрим пример:
Пример
html> html> head> title>Заголовок документа title> style> body < background-color: #1c87c9 !important; background-color: #ffcc00; > h2 < color: #8ebf42 ; > h2 < color: #eeeeee !important; > style> head> body> h2>W3docs h2> p>W3docs дает возможность бесплатно изучить материалы таких языков программирования, как HTML, CSS, Java Script, PHP и др. p> body> html>В данном примере фон имеет синий цвет вместо желтого, а заголовок имеет серый цвет вместо зеленого. Причиной является то, что применено правило !important .
Когда использовать правило !important
При тестировании и отладки веб-страницы !important является эффективным. Если вы не уверены, почему применятся стиль, и думаете, что это может быть конфликтом специфики, добавьте !important к вашему стилю. Если таким образом проблема решается, измените порядок селекторов и удалите директивы !important из вашего кода.
В результате у вас будет таблица стилей, загруженная стилями !important , если вы слишком много опирались на !important для достижения желаемых стилей. Вы можете изменить обработку CSS страницы в значительной степени.
Используйте !important для проверки или в некоторых случаях для переопределения встроенного стиля, который является частью оформления или шаблонов фреймворка. Даже в таких случаях рекомендуется использовать эту технику редко.
Где использовать правило !important ?
Использование правила !important может быть нормальным в следующих случаях:
Главным образом правило !important было создано, чтобы предоставить пользователю возможность переопределить стили веб-страниц. Оно часто используется программой чтения экрана, средствами блокирования рекламы и т. д.
Как разработчик вы должны стремиться иметь как можно больше контроля над вашим кодом. но бывают случаи. когда нет другого выбора кроме как работать с тем. что имеете. Используйте !important редко.
Наверное лучшим способом является использование utility-классов. Рассмотрим кнопки. Если на вашей веб-странице есть название класса подобно .button и неважно, какой элемент вы поместите, вам необходимо, чтобы этот элемент имел вид кнопки (с конкретным шрифтом, круглыми углами, особым фоном и границами), можете попробовать следующее:
Пример
html> html> head> title>Заголовок документа title> style> .button < background: #1c87c9; color: white; font-weight: bold; padding: 5px; border-radius: 4px; border: 1px solid #666; text-decoration: none; > style> head> body> a href="#" class="button">BUTTON a> body> html>Здесь спецификой является 0,0,1,0. Если есть и другие селекторы с высокой спецификой, которые влияют на элемент, у вас могут быть проблемы в таком виде:
Пример
html> html> head> title>Заголовок документа title> style> #mybutton a < border-bottom: 3px dashed #8ebf42; > .button < background: #1c87c9; color: white; font-weight: bold; padding: 5px; border-radius: 4px; border: 3px solid #666; text-decoration: none; > style> head> body> section id="mybutton"> p>This is a a href="#" class="button">BUTTON a> p> section> body> html>Как видите, кнопки с особым дизайном имеют нижнюю пунктирную границу в зеленом цвете, но мы ожидали другое. Довольно просто и иногда полностью подходяще установить CSS селектор со значением выше 0,0,1,0.
Будет более эффективно добавление правила !important к значениям. Рассмотрим пример, где к кнопкам применено правило !important .
Пример
html> html> head> title>Заголовок документа title> style> #mybutton a < border-bottom: 3px dashed #8ebf42; > .button < background: #1c87c9 !important; color: white !important; font-weight: bold !important; padding: 5px !important; border-radius: 4px !important; border: 3px solid #666 !important; text-decoration: none !important; > style> head> body> section id="mybutton"> p>This is a a href="#" class="button">BUTTON a> p> section> body> html>Пользовательские таблицы стилей
Эта директива была введена, чтобы помочь пользователям веб-страниц справиться с таблицами стилей, которые представляют для них трудность при использовании или чтении страниц.
Если кто-то определяет таблицу стилей для просмотра веб-страниц, то эта таблица будет переопределена таблицей стилей автора страницы. Если пользователь указывает стиль подобно !important, этот стиль переопределяет таблицу стилей автора веб-страницы, даже если автор выбирает такое правило, как !important .
Эта структура полезна для тех пользователей, кто каким-нибудь образом должен установить стили. Например на всех используемых ими веб-страницах слабовидящему читателю понадобится увеличить размер шрифта по умолчанию. С помощью использования директивы !important при разработке страниц, вы обеспечиваете индивидуальные требования ваших пользователей.
Не рекомендуется использовать правило !important слишком часто, так как единственное, что может переопределить !important — это другое правило !important. Один раз используя его, у вас получится CSS файл, полный правилами !important , и это не очень хорошо.