Содержание

CSS: в чем разница между стилями «bolder» и «bold» font-weight?

Ответ Пекки технически верен, но, судя по комментариям к этому ответу, его последствия не совсем понятны.

Сначала нам нужно понять разницу между заданным весом, вычисленным весом и визуализированным весом.

Для bold заданный вес равен «bold», вычисленный вес равен «700», а отображаемый вес зависит от шрифта, и единственная гарантия заключается в том, что он не будет легче элементов с более низкими вычисленными весами. Поскольку «normal» приравнивается к «400», «bold» никогда не будет отображаться легче, чем «normal» (хотя он может быть отображен идентично.)

Для bolder указанный вес равен «bolder», а вычисленный вес равен «400», если элемент контейнера имеет вычисленный вес меньше или равен 300, в противном случае «700», если элемент контейнера имеет вычисленный вес меньше или равен 500, в противном случае «900» отображаемый вес снова зависит от шрифта с той же гарантией.

Поскольку шрифты, как правило, только изначально поддерживают веса normal и bold , это часто означает, что font-weight:bold и font-weight:bolder отображаются одинаково, даже если они имеют разные вычисленные веса.

Но это не обязательно так, даже если шрифт поддерживает только эти два веса. В частности, если элемент контейнера имеет вычисленный вес меньше «400», то «bolder» вычислит вес «400» и отобразит то же самое, что и элемент с заданным весом «normal».

Чтобы проиллюстрировать это, смотрите этот JsFiddle: http://jsfiddle.net/UgAa5 / 1

<style>
  p { font-weight:300; font-size:2em }
  #scenario1 b { font-weight:bolder; }
  #scenario2 b { font-weight:bold; }
</style>

<p>
    <span>plain</span>
    <b>bold?</b>
</p>    

<p>
    <span>plain</span>
    <b>bold?</b>
</p>

1 текущие версии IE, Firefox, Chrome и Opera демонстрируют это правильно. Старые браузеры, такие как Safari 5.1, этого не делают.

2 в спецификации HTML5 говорится, что элемент <b> должен иметь вес шрифта по умолчанию «bolder». Firefox и IE делают это, но браузеры на основе webkit/blink по умолчанию имеют значение «bold», а normalize.css применяет параметр

font-weight:bold к элементу <b> для всех браузеров.

font-weight, font-style и т.д. | lesson-web.ru

Наверняка, из урока по Html вы помните теги «b», «i» и «u», которые делают наш текст жирным, курсивным и подчёркнутым. На самом деле, в CSS есть аналоги этих тегов, которые позволяют сделать тоже самое.

Итак, для того, чтобы сделать текст жирным, мы используем свойство «font-weight» со значением «bold».

.box{
  font-weight: bold;
}

А если у вас, может быть, уже задан «font-weight: bold» и вы хотите сбросить это значение, тогда вы пишете «normal».

 

.box{
  font-weight: normal;
}

Так же, можно задавать жирность в цифирных значениях. Если шрифт поддерживает разную толщину шрифтов, точнее разную толщину «bold’а». Толщину можно задать значением от 100 до 900. 

.box{
  font-weight: 300; // Миниуми: 100, Максимум: 900
}

Дальше, если мы хотим сделать наш шрифт курсивным, то пишем «font-style» и здесь задаёте свойство «italic», и тогда текст становится курсивным.

 
.box{
  font-style: italic; 
}

Но в случае с «font-style» есть ещё значение «oblique».

.box{
  font-style: oblique;
}

Оно, в принципе, ничего визуально не изменяет, но фактически делаются совершенно разные действия. Если мы делаем «italic», то берётся курсивное начертание шрифта. А вот второе значение, которое очень сложно произносить, «oblique», просто наклоняет текст. Короче, на будущее, просто используем «italic», и больше вам особо ничего не надо.

Дальше, как получить шрифт с нижним подчёркиванием? Для этого используем свойство «text-decoration» и «underline». 

.box{
  text-decoration: underline; 
}

Пример: Текст с нижним подчеркиванием

С английского «under» — «низ», «line» — «линия», «линия снизу». Всё логично.

Также у «text-decoration» есть ещё несколько подсвойств. Первое – это «overline», линия сверху.

.box{
  text-decoration: overline; 
}

Пример: Текст с верхним подчеркиванием

Дальше, «line-through», которое делает перечёркивание.

.box{
  text-decoration: line-through; 
}

Пример: Текст с перечеркиванием

То есть, на будущее, если вы захотите делать блок с прайсом на что-то, и там будет старая цена и новая цена. Как правило, старая цена подсвечивается красненьким и перечёркивается.

С помощью этого CSS-свойства вы можете перечеркнуть текст, и он будет как будто старая цена. Ну, не обязательно это будет старая цена, но, я думаю, можно для таких случаев использовать это свойство. Всё, «line-through», «overline» и «underline». Больше вам пока что тоже ничего не надо. 

И ещё одно CSS-свойство, которое нельзя сделать с помощью тегов – это «text-transform». Здесь есть несколько таких свойств. Первое, давайте, рассмотрим «capitalize».

.box{
  text-transform: capitalize; 
}

Что даёт это свойство? Каждая первая буква каждого слова становится заглавной. На самом деле, немножечко странное CSS-свойство. Честно, никогда в жизни его не использовал. Скорее всего, его можно использовать для аббревиатур, когда мы делаем каждое слово с большой буквы, то здесь можно использовать. Но вообще, довольно-таки бесполезное свойство, на мой взгляд.

Дальше, что нам ещё интересно?

«Lowercase» — это когда все буквы становятся нижнего регистра.

.box{
  text-transform: lowercase; 
}

И наоборот, «uppercase», когда все буквы становятся заглавными или верхнего регистра.

.box{
  text-transform: uppercase; 
}


Бывают такие сайты, где чисто по стилистике все слова пишутся большими буквами, когда каждая буква всегда заглавная. То есть чтобы не писать текст через CapsLock или с зажатым Shift’ом все слова – это неудобно, можно использовать свойство «text-transform: uppercase», и будет вам в принципе счастье. Давайте ещё раз: «capitalize», «lowercase» и «uppercase» — вот три самых важных свойства для этого CSS-свойства.

 

Собственно, вот так вот можно работать с нашим текстом. Давайте повторюсь. Первое — «font-weight», чтобы делать жирным/нежирным наш текст. «Font-style» для того, чтобы работать с курсивностью. «Text-transform», чтобы делать буквы заглавными и строчными. И «text-decoration», чтобы делать подчеркивание верхнее, нижнее или по центру.

 

Вот такие классные CSS-свойства. Всё, на этом мы заканчиваем с ними и идём к следующему уроку!

Каскадность в CSS — Основы современной вёрстки

Основы современной вёрстки

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

каскадные.

Что такое каскадность? Представьте себе каскад водопадов. В них вода перетекает из одного водопада в другой и так до тех пор, пока это всё не уйдёт в общий бассейн.

В CSS слово каскадность имеет такое же значение. В качестве воды у нас CSS свойства. Они могут накладываться и перекрывать друг друга. Другими словами каскадность — возможность языка CSS накладывать свойства друг на друга, а также расширять свойства в селекторах.

Возможно такое описание достаточно сложное, но давайте посмотрим на примере. Создадим параграф с двумя классами: text-bold и text-dark. Первый класс будет отвечать за жирное начертание текста, а второй за установку тёмного цвета шрифта. Также добавим селектор по тегу и укажем размер шрифта 24 пикселя.

<p>Какой-то очень интересный текст об интересной вещи. Очень интересно.</p>

В CSS файле укажем следующие стили:

p {
  font-size: 24px;
}

.text-bold {
  font-weight: bold;
}

.text-dark {
  color: #333333;
}

Попробуйте воспроизвести этот пример и вы увидите, что текст выводится тёмного цвета и с жирным начертанием. Стили от классов text-bold и text-dark сложились и применились к нашему параграфу. Также текст имеет размер 24 пикселя, которые мы указали для селектора по тегу.

Итоговыми стилями для нашего параграфа будут:

{
  font-size: 24px;
  font-weight: bold;
  color: #333333;
}

Это и есть каскадность стилей CSS. Хоть мы и использовали разные селекторы и классы для описания, но в конечном итоге они суммировались.

Приоритет селекторов

Важной чертой CSS является то, что разные типы селекторов имеют разный приоритет. Если стили противоречат друг другу в разных селекторах, то вступает в дело принцип приоритета. Разберём на примере. Возьмём параграф с классом red и идентификатором blue. Установим соответствующие цвета для текста. Для всех же параграфов в тексте установим зелёный цвет.

p {
  color: green;
}

.red {
  color: red;
}

#blue {
  color: blue;
}

<p>Какого же цвета будет параграф?</p>

Перед тем, как читать дальше попробуйте выполнить этот пример в любом удобном вам месте.

Как вы смогли заметить, текст параграфа будет синим. Но почему так? Может быть дело в том, что синий цвет в CSS указан самым последним? В данном случае нет. Даже если мы переместим селектор по идентификатору в самый вверх, параграф всё равно останется синим.

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

Условно можно расставить селекторы в следующем порядке по приоритету:

  1. Селектор по идентификатору (#blue)
  2. Селектор по классу (.red)
  3. Селектор по тегу (p)

Где 1 — самый высокий приоритет, а 3 — самый низкий.

Разберём ещё один пример:

#intro {
  color: green;
}

p {
  color: blue;
  font-weight: bold;
}

.important {
  color: purple;
  font-style: italic;
}

<p>Индейские племена Манахаттоу и Канарси.</p>

Этот текст будет наклонным, жирным и зелёным. И вот почему:

  • Селектор по тегу p:
    • Добавит синий цвет
    • Добавит жирное начертание
  • Селектор по классу .important:
    • Заменит синий цвет на пурпурный
    • Сделает текст курсивным
  • Селектор по идентификатору #intro:
    • Заменит пурпурный цвет на зелёный

После всех таких преобразований итоговые стили для параграфа сложатся следующим образом:

{
  color: green;
  font-weight: bold;
  font-style: italic;
}

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

Переопределение свойств

Возможно у вас возник вопрос, а что случится, если элемент будет иметь несколько классов, свойства которых противоречат друг другу? Здесь каскадность работает по принципу «Кто последний, тот и прав». Проще всего это так же посмотреть на примере.

.alert {
  color: gray;
}

.alert-error {
  color: red;
}

<p>Важное сообщение! Сообщение красного цвета</p>

Отталкиваясь от принципа каскадности, браузер вначале увидит селектор .alert и установит серый цвет текста. Далее ему встретится селектор .alert-error, который говорит установить красный цвет. И браузер просто перезапишет серый цвет на красный. Порядок классов в HTML в данном случае не играет никакой роли. Даже в таком случае

<p>Важное сообщение! Сообщение красного цвета</p>

цвет текста будет красным. Это наглядно показывает независимость CSS от HTML. Если же поменять местами селекторы в CSS, то поменяются и итоговые стили.

.alert-error {
  color: red;
}

.alert {
  color: gray;
}

<p>Важное сообщение! Сообщение серого цвета</p>

Дополнительное задание

Создайте файлы index.html и style.css на своём компьютере.

Внутри HTML расположите следующую запись:

<div>Какой-то текст</div>

и следующие CSS стили:

div {
  width: 500px;
  height: 500px;

  background: #333333;
}

#main {
  color: white;
  width: 750px;
}

.text-white {
  color: white;
}

.alert {
  height: 350px;
  color: gray;
}

div {
  background: blue;
}

.alert-warning {
  background: #000000;
  color: yellow;
}

Проанализируйте получившийся результат.

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

Свойства CSS для шрифтов | bookhtml.ru

Этот урок css посвятим css свойствам.

Из курса HTML мы знаем, что для того, чтобы сделать шрифт курсивом, необходимо применить тег <i> или <em>. Сделать шрифт курсивом можно и в таблице стилей, не используя тегов. Для этого абзацу, который мы хотим прописать курсивом, добавляем css свойство придающее шрифту курсив — font-style: со значением italic.

Давайте наш абзац из прошлого урока:

p.new {

font-weight:bold;

color:#cc0000;

}

пропишем курсивом:

Пример:

p.new {

font-weight:bold;

color:#cc0000;

font-style:italic;

}

Теперь рассмотрим еще одно css свойство шрифта, позволяющее отображать весь текст абзаца заглавными буквами. Не большими (как при использовании регистра), а именно заглавными. Это свойство font-variant: со значением small-caps;

Пример:

p.new {

font-weight:bold;

color:#cc0000;

font-style:italic;

font-variant:small-caps;

}

И еще один момент — это сокращенное указание css свойств. Вот в примере абзаца

Пример:

p {

color:#424242;

font-size:16px;

font-family:Verdana, Tahoma;

font-weight:normal;

}

можно записать сокращенное указание свойств. Три строки css свойств шрифта:

font-size:16px;

font-family:Verdana, Tahoma;

font-weight:normal;

записываем одной строкой:

font:normal 16px Verdana;

Вначале пишем вес шрифта normal затем через пробел размер шрифта 16px и опять же через пробел какой шрифт — Verdana

Пример:

p {

color:#424242;

font:normal 16px Verdana;

}

Вот таким способом мы три строки заменяем одной. Это применяется для сокращения таблицы стилей, если она занимает много места.

HTML: 3 способа сделать текст жирным в CSS

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

В большинстве случаев вы будете использовать ключевое слово bold, чтобы выделить шрифт жирным шрифтом, используя свойство font-weight . Но если вы хотите применить разную степень жирности, вы можете использовать число, кратное 100.

Кроме того, вы можете использовать встроенный CSS для элементов и можете использовать элементы и , чтобы сделать текст жирным в параграф.Ниже приведены примеры:

1. Использование свойства CSS font-weight в разделе Head

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

Синтаксис для font-weight 

 font-weight: нормальный | полужирный | полужирный | светлее | число | начальный | наследование;

Как указать font-weights 

 font-weight: 700;
font-weight: жирный; / * то же, что 700 * /
шрифт: нормальный; / * то же, что и 400 * /
font-weight: светлее; / * относительно родительского элемента * /

CSS для Class in Head Section

HTML 

 

 Этот абзац полностью выделен полужирным шрифтом.

Вывод 

  Этот абзац полностью выделен жирным шрифтом.

2. Использование элемента

Поместите элемент между элементом абзаца, чтобы выделить определенную часть абзаца жирным шрифтом.

HTML 

 
 Часть абзаца    выделена жирным шрифтом   .

Вывод 

 Некоторая часть абзаца  выделена жирным шрифтом .

3. Использование элемента

Выделите текст определенной части абзаца полужирным шрифтом, используя элемент .

HTML 

 
 Часть абзаца выделена жирным шрифтом    с использованием сильного элемента   .

Вывод 

 Некоторая часть абзаца выделена жирным шрифтом  с использованием сильный элемент .

Полный пример 

 



    <стиль>
        .жирный текст {
            font-weight: жирный;
        }
    



     
 Примеры: выделение текста жирным шрифтом в CSS 
 
     
 Использование класса CSS 
 
    
 Этот абзац полностью выделен полужирным шрифтом. 

     
 Использование элемента b 
 
    
 Некоторая часть  абзаца выделена жирным шрифтом . 

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

Выходные данные

Как показано на избранном изображении в этой статье.

См. Также:

CSS Bold: A Guide to Using Font-Weight

Чтобы создать эффект полужирного текста CSS, необходимо использовать свойство font-weight. Свойство font-weight определяет «вес» шрифта или его жирность. Вы можете использовать ключевые слова или числовые значения, чтобы указать CSS, насколько жирным должен быть фрагмент текста.

Как разработчики, собирая верстку веб-сайта, мы иногда хотим привлечь к чему-то внимание. Есть несколько способов сделать это. Самый простой способ — увеличить font-weight на текста, который вы хотите выделить. Это относится к выделению текста жирным шрифтом.

В этой статье мы поговорим о font-weight, о том, как его установить, и проиллюстрируем различные возможные значения этого свойства.

CSS Bold: Руководство

Свойство font-weight устанавливает, как жирный текст должен отображаться на экране.Вы можете использовать ключевые слова или числовое значение, чтобы указать CSS, каким жирным шрифтом должен отображаться конкретный набор текста.

Найди свой матч на тренировочном лагере

Относительный вес шрифта Фактический вес шрифта
тонкий 100
нормальный 400
полужирный 700
Исходное значение легче смелее
100 100 300
9014 901 9014 9014 901 400
400 100 700
500 100 700
600 400 900 9014 9014 9014 9014 9014 9014 9014 9014 9014 800 700 900
900 700 900

< html >

< стиль 2 type = "text / css" >

h3 {

font-weight: 700;

цвет: зеленый;

}

. текст {

font-weight: bold;

}

стиль >

головка >

корпус

< h3 >

Добро пожаловать в компьютерщики для компьютерных фанатов

h3 класс >

80 = "текст" >

Портал компьютерных наук для вундеркиндов

p >

html >