Содержание

Объяснение ключевых слов initial, inherit, unset и revert в CSS — Веб-стандарты

В CSS есть несколько ключевых слов для задания значений свойств. Я собираюсь поговорить о нескольких из них: initial, inherit и об относительно новых — unset и revert.

В оригинальной статье в заголовке и во вступлении говорится только о трёх ключевых словах, но дальше в тексте идёт обсуждение четвёртого — revert. Мы решили добавить его во вступление для удобства читателя — прим. переводчика.)

Хотя большинство веб-разработчиков сталкивалось с ними, весьма вероятно, что многие, даже самые опытные, не до конца их понимают.

Долгое время я знал об этих ключевых словах только то, что они используются для сброса стилей в CSS. Но если все эти ключевые слова являются своего рода сбросом, то почему их так много? Какие именно различия между ними? Я решил глубже изучить эти ключевые слова, чтобы раз и навсегда разобраться, что отличает их друг от друга.

Базовые стили для вебаСкопировать ссылку

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

Начальное значение для каждого свойства в CSSСкопировать ссылку

Каждое свойство в CSS имеет начальное (initial) значение. Оно никак не связано с типом HTML-элемента, к которому применяется.

Пример начального значения из MDN:

Начальное значение свойства line-height — это normal.

Браузерные стилиСкопировать ссылку

После применения начальных стилей для всех CSS-свойств браузер загружает свои стили. Эти стили не имеют ничего общего с базовыми начальными значениями CSS-свойств.

Пример браузерных стилей:

Стили браузера Chrome, применяемые к элементу <h2>.

У HTML-элементов нет начальных значений для стилей! Базовые стили HTML-элемента, такого как <h2>, например, предоставляются стилями браузера, а не начальными значениями CSS-свойств.

Теперь начнем говорить о ключевых словах.

Ключевое слово

inheritСкопировать ссылку

Ключевое слово inherit сообщает браузеру, что значение свойства нужно найти у ближайшего родительского элемента и унаследовать его для текущего элемента. Если у ближайшего родителя также задано значение inherit, то браузер продолжит подниматься по DOM, пока не найдет какое-нибудь значение. Если значения нет, то браузер применит свои стили, а если и браузерных стилей нет, то тогда будет применено значение initial.

Ключевое слово

initialСкопировать ссылку

Чтобы понять ключевое слово initial, мы должны помнить важный факт: у каждого свойства в CSS есть значение по умолчанию, которое не имеет ничего общего со значениями, которые устанавливаются браузером. Браузерные стили — это стили, которые применяются браузером к конкретным HTML-элементам. Мы часто думаем, что они автоматически приходят вместе с HTML, но это не так.

Ключевое слово initial говорит браузеру использовать значение по умолчанию для заданного CSS-свойства. Например, для свойства color значение initial всегда будет black.

Такое поведение может очень запутывать, потому что, как мы и говорили ранее, значение по умолчанию для CSS-свойства не всегда совпадает со значением, которое браузер задает конкретному элементу. Например, initial

-значение для свойства display равно inline для всех элементов. Поэтому, если для элемента <div> будет задано свойство display со значением initial, то свойство будет вычислено как inline, а не block, как в стилях браузера.

Пример:

div.box {
    background-color: red;
    display: initial; /* примет значение `inline`, а не `block` */
}

Пример на CodePen значения initial для свойства display элемента <div>.

Информация об
initial-значении свойства display на MDN.

Ключевое слово

unsetСкопировать ссылку

Ключевое слово unset является уникальным и работает в зависимости от типа свойства. В CSS есть два типа свойств:

1. Наследуемые свойстваСкопировать ссылку

Свойства, которые затрагивают дочерние элементы. Все свойства, которые влияют на текст, имеют такое естественное поведение. Например, если мы зададим font-size элементу <html>, то он будет применяться ко всем дочерним элементам, пока вы не зададите другой font-size какому-нибудь из них.

Информация о наследуемости свойства font-size на MDN.

2. Ненаследуемые свойстваСкопировать ссылку

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

Информация о наследуемости свойства border на MDN.

Ключевое слово unset работает так же, как и inherit для наследуемых свойств. Например, для текстового свойства color оно будет работать как значение inherit, то есть будет искать ближайший родительский элемент с заданием нужного свойства, а если он не будет найден, то применится браузерное значение, а если и браузерных стилей нет, то применится значение

initial.

Для ненаследуемых свойств unset ведет себя как initial, то есть применится значение по умолчанию. Например, для свойства border-color оно будет работать как initial.

.some-class {
    color: unset; /* будет равно `inherit` */
    display: unset; /* будет равно `initial` */
}

Зачем использовать

unset, если оно работает так же, как inherit и initial?Скопировать ссылку

Если unset ведет себя как inherit и initial, то зачем оно может понадобиться? Если мы сбрасываем только одно свойство, то 

unset не нужен. Вместо него мы можем просто использовать inherit или initial. Но сейчас у нас есть свойство all, которое дает нам новую возможность — сбросить наследуемые и ненаследуемые свойства одновременно.

Таким образом, вам не нужно сбрасывать свойства по отдельности. Применение ключевого слова unset к свойству all приведет к сбросу всех наследуемых свойств к значению inherit и всех ненаследуемых свойств — к значению initial.

Это единственная причина существования нового ключевого слова unset! В противном случае мы могли бы вместо этого использовать inherit и initial.

Вместо сброса свойств по отдельности, к примеру:

/* Плохо */
.common-content {
    font-size: inherit;
    font-weight: inherit;
    border-width: initial;
    background-color: initial;
}

Мы можем использовать новое свойство all со значением unset, которое повлияет на все существующие свойства, например:

/* Хорошо */
. common-content {
    all: unset;
}

Я создал небольшой пример для демонстрации того, как свойства ведут себя, когда используется свойство

all со значением unset. Некоторые ведут себя так, как будто к ним применено значение inherit, а некоторые так, как будто к ним применено значение initial. Пример на Codepen использования all: unset.

Ключевое слово

revertСкопировать ссылку

Но что, если мы хотим сбросить значение свойства до первоначально заданных браузером значений, а не до значений по умолчанию? Например, вернуть значение свойства display элемента <div> к значению block (это стили браузера), а не к значению inline (это базовые стили CSS).

Браузерные стили для тега div

Для этих целей мы скоро получим новое ключевое слово в CSS:

revert. Оно очень похоже на unset, единственное отличие состоит в том, что оно предпочитает стили браузера базовым значениям свойств CSS. Например:

div {
    display: revert; /* = block */
}
h2 {
    font-weight: revert; /* = bold */
    font-size: revert; /* = 2em */
}

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

/* Хорошо */
.common-content {
    all: revert;
}

Соответственно, revert дает гораздо больше возможностей, чем unset. Правда, на данный момент revert работает только в Firefox и Safari. (В Chrome работает с версии 84 — прим. переводчика.)

ЗаключениеСкопировать ссылку

На этом всё. Надеюсь, вам понравилась эта статья, и вы чему-то научились из моего опыта.

Видео доклада по темеСкопировать ссылку

Я сделал короткий доклад на эту тему, смотрите видео целиком на YouTube:

Мой доклад «Ключевые слова в CSS, которые никто не понимает».

Черемисин Д.П. отмечен благодарностью губернатора — PECO

[kswr_animationblock anch_duration=». 5″ anch_delay=»0.1″ anch_type=»fadeInLeft» anch_reanimate=»false»][kswr_heading head_title_color=»{«type«:«gradient«,«color1«:«#137aba«,«color2«:«#5d5de2«,«direction«:«to right«}» head_subtitle_color=»#333333″ head_title_fsize=»font-size:14px;line-height:1em;» head_title_fstyle=»font-family:inherit;font-weight:700;» head_subtitle_fsize=»font-size:14px;» head_subtitle_fstyle=»font-family:inherit;font-weight:inherit;» head_title_margins=»margin-top:0px;margin-bottom:4px;» head_subtitle_margins=»margin-top:0px;margin-bottom:0px;» head_title=»Деловые контакты» head_link_enabled=»disabled»][/kswr_heading][kswr_lineseparator ls_height=»2″ ls_color=»{«type«:«color«,«color1«:«#eeba00«,«color2«:«#333«,«direction«:«to right«}» ls_alignement=»left» ls_style=»from-left» ls_margins=»margin-top:0px;margin-bottom:0px;margin-left:0px;margin-right:0px;» ls_width=»125px»][kswr_lineseparator ls_height=»2″ ls_color=»{«type«:«color«,«color1«:«#137aba«,«color2«:«#333«,«direction«:«to right«}» ls_alignement=»left» ls_style=»from-right» ls_margins=»margin-top:2px;margin-bottom:0px;margin-left:0px;margin-right:0px;» ls_width=»60px»][kswr_lineseparator ls_height=»2″ ls_color=»{«type«:«color«,«color1«:«#ed4500«,«color2«:«#333«,«direction«:«to right«}» ls_alignement=»left» ls_style=»from-right» ls_margins=»margin-top:2px;margin-bottom:0px;margin-left:0px;margin-right:0px;» ls_width=»30px»][/kswr_animationblock][kswr_animationblock anch_duration=».

5″ anch_delay=»0.25″ anch_type=»fadeInUp» anch_reanimate=»false»][kswr_heading head_subtitle_color=»#333333″ head_title_fsize=»font-size:19px;» head_title_fstyle=»font-family:inherit;font-weight:inherit;» head_subtitle_fsize=»font-size:30px;line-height:1.2em;—tablet-font-size:24px;—phone-font-size:22px;» head_subtitle_fstyle=»font-family:inherit;font-weight:800;» head_title_margins=»margin-top:10px;margin-bottom:0px;» head_subtitle_margins=»margin-top:20px;margin-bottom:0px;» head_link_enabled=»disabled»]ЧЕРЕМИСИН Д.П. ОТМЕЧЕН БЛАГОДАРНОСТЬЮ ГУБЕРНАТОРА[/kswr_heading][/kswr_animationblock][kswr_animationblock anch_duration=».5″ anch_delay=»0.4″ anch_type=»fadeInUp» anch_reanimate=»false»][kswr_heading head_title_color=»{«type«:«color«,«color1«:«rgba(31, 31, 31, 1)«,«color2«:«#333«,«direction«:«to left«}» head_subtitle_color=»#aaaaaa» head_title_fsize=»font-size:20px;» head_title_fstyle=»font-family:inherit;font-weight:inherit;» head_subtitle_fsize=»font-size:18px;line-height:1.8em;—tablet-font-size:14px;—phone-font-size:14px;» head_subtitle_fstyle=»font-family:inherit;font-weight:400;» head_title_margins=»margin-top:0px;margin-bottom:0px;» head_subtitle_margins=»margin-top:10px;margin-bottom:10px;» head_link_enabled=»disabled»]В рамках деятельности инвестиционного совета региона в связи с вхождением Сахалинской области в ТОП-30 Национального рейтинга состояния инвестиционного климата за 2020 год Черемисин Дмитрий Павлович был отмечен благодарностью губернатора Лимаренко В.
И.[/kswr_heading][/kswr_animationblock]

ДРУГИЕ НОВОСТИ

Экспедиция по поиску затонувшего корабля

/ Научная деятельность

«Тихоокеанская инжиниринговая компания» вместе с сахалинскими кинематографистами провела экспедицию по поиску затонувшего японского корабля сопровождения …
Подробнее

Первенство России по мини-футболу

/ Корпоративная жизнь

Футбольная команда РЕСО участвует в Первенстве России по мини-футболу среди любительских коллективов сезона 2019/2020 гг …
Подробнее

Научно-практическая конференция

/ Деловые контакты

«Тихоокеанская инжиниринговая компания» приняла участие в XV общероссийской научно-практической конференции и выставке …
Подробнее

ВЭФ-2019

/ Деловые контакты

«Тихоокеанская инжиниринговая компания» приняла участие в Восточном экономическом форуме, который состоялся 4–6 сентября 2019 г. во Владивостоке …
Подробнее

ПОИСК ПО САЙТУ

[kswr_button btn_link=»url:https%3A%2F%2Fpecoltd.net%2Fabout-company%2F|||» btn_align=»center» btn_width=»145″ btn_height=»45″ btn_bg=»{«type«:«color«,«color1«:«rgba(255, 255, 255, 1)«,«color2«:«#111«,«direction«:«to left«}» btn_clr=»{«type«:«color«,«color1«:«#137aba«,«color2«:«#fff«,«direction«:«to left«}» btn_border_radius=»0″ btn_style=»pushbottom» btn_hover_action=»translateup» btn_bg_hover=»{«type«:«color«,«color1«:«#3d3d3d«,«color2«:«#00AFD1«,«direction«:«to left«}» btn_txt=»О компании» btn_ftsize=»font-size:14px;» btn_ftstyle=»font-family:inherit;font-weight:700;» btn_full_width=»false» btn_margins=»margin-left:0px;margin-top:210px;margin-right:;margin-bottom:;» btn_paddings=»padding-left:0px;padding-right:0px;» btn_bxshadow_enabled=»yes» btn_bxshadow=»0px 5px 20px 0px rgba(0, 0, 0, 0. 15)» btn_bxshadow_enabled_h=»yes» btn_bxshadow_h=»0px 5px 20px 0px rgba(0, 0, 0, 0.21)»]

АРХИВ НОВОСТЕЙ

[kswr_button btn_link=»url:https%3A%2F%2Fpecoltd.net%2Fnews%2F|||» btn_align=»center» btn_width=»145″ btn_height=»45″ btn_bg=»{«type«:«color«,«color1«:«rgba(255, 255, 255, 1)«,«color2«:«#111«,«direction«:«to left«}» btn_clr=»{«type«:«color«,«color1«:«#137aba«,«color2«:«#fff«,«direction«:«to left«}» btn_border_radius=»0″ btn_style=»pushbottom» btn_hover_action=»translateup» btn_bg_hover=»{«type«:«color«,«color1«:«#3d3d3d«,«color2«:«#00AFD1«,«direction«:«to left«}» btn_txt=»Все новости» btn_ftsize=»font-size:14px;» btn_ftstyle=»font-family:inherit;font-weight:700;» btn_full_width=»false» btn_margins=»margin-left:0px;margin-top:0px;margin-right:;margin-bottom:20px;» btn_paddings=»padding-left:0px;padding-right:0px;» btn_bxshadow_enabled=»yes» btn_bxshadow=»0px 5px 20px 0px rgba(0, 0, 0, 0.15)» btn_bxshadow_enabled_h=»yes» btn_bxshadow_h=»0px 5px 20px 0px rgba(0, 0, 0, 0. 21)»]

ДРУГИЕ НОВОСТИ

Экспедиция по поиску затонувшего корабля

/ Научная деятельность

«Тихоокеанская инжиниринговая компания» вместе с сахалинскими кинематографистами провела экспедицию по поиску затонувшего японского корабля сопровождения …
Подробнее

Первенство России по мини-футболу

/ Корпоративная жизнь

Футбольная команда РЕСО участвует в Первенстве России по мини-футболу среди любительских коллективов сезона 2019/2020 гг …
Подробнее

Научно-практическая конференция

/ Деловые контакты

«Тихоокеанская инжиниринговая компания» приняла участие в XV общероссийской научно-практической конференции и выставке …
Подробнее

ВЭФ-2019

/ Деловые контакты

«Тихоокеанская инжиниринговая компания» приняла участие в Восточном экономическом форуме, который состоялся 4–6 сентября 2019 г. во Владивостоке …
Подробнее

[kswr_animationblock anch_duration=».5″ anch_delay=»0.1″ anch_type=»fadeInLeft» anch_reanimate=»false»][kswr_heading head_title_color=»{«type«:«gradient«,«color1«:«#137aba«,«color2«:«#5d5de2«,«direction«:«to right«}» head_subtitle_color=»#333333″ head_title_fsize=»font-size:14px;line-height:1em;» head_title_fstyle=»font-family:inherit;font-weight:700;» head_subtitle_fsize=»font-size:14px;» head_subtitle_fstyle=»font-family:inherit;font-weight:inherit;» head_title_margins=»margin-top:0px;margin-bottom:4px;» head_subtitle_margins=»margin-top:0px;margin-bottom:0px;» head_title=»Деловые контакты» head_link_enabled=»disabled»][/kswr_heading][kswr_lineseparator ls_height=»2″ ls_color=»{«type«:«color«,«color1«:«#eeba00«,«color2«:«#333«,«direction«:«to right«}» ls_alignement=»left» ls_style=»from-left» ls_margins=»margin-top:0px;margin-bottom:0px;margin-left:0px;margin-right:0px;» ls_width=»125px»][kswr_lineseparator ls_height=»2″ ls_color=»{«type«:«color«,«color1«:«#137aba«,«color2«:«#333«,«direction«:«to right«}» ls_alignement=»left» ls_style=»from-right» ls_margins=»margin-top:2px;margin-bottom:0px;margin-left:0px;margin-right:0px;» ls_width=»60px»][kswr_lineseparator ls_height=»2″ ls_color=»{«type«:«color«,«color1«:«#ed4500«,«color2«:«#333«,«direction«:«to right«}» ls_alignement=»left» ls_style=»from-right» ls_margins=»margin-top:2px;margin-bottom:0px;margin-left:0px;margin-right:0px;» ls_width=»30px»][/kswr_animationblock][kswr_animationblock anch_duration=». 5″ anch_delay=»0.25″ anch_type=»fadeInUp» anch_reanimate=»false»][kswr_heading head_subtitle_color=»#333333″ head_title_fsize=»font-size:19px;» head_title_fstyle=»font-family:inherit;font-weight:inherit;» head_subtitle_fsize=»font-size:44px;line-height:1.2em;—tablet-font-size:32px;—phone-font-size:26px;» head_subtitle_fstyle=»font-family:inherit;font-weight:800;» head_title_margins=»margin-top:0px;margin-bottom:0px;» head_subtitle_margins=»margin-top:0px;margin-bottom:0px;» head_link_enabled=»disabled»]ЧЕРЕМИСИН Д.П. ОТМЕЧЕН БЛАГОДАРНОСТЬЮ ГУБЕРНАТОРА[/kswr_heading][/kswr_animationblock][kswr_animationblock anch_duration=».5″ anch_delay=»0.4″ anch_type=»fadeInUp» anch_reanimate=»false»][kswr_heading head_title_color=»{«type«:«color«,«color1«:«rgba(31, 31, 31, 1)«,«color2«:«#333«,«direction«:«to left«}» head_subtitle_color=»#aaaaaa» head_title_fsize=»font-size:20px;» head_title_fstyle=»font-family:inherit;font-weight:inherit;» head_subtitle_fsize=»font-size:18px;line-height:1.8em;—tablet-font-size:14px;—phone-font-size:14px;» head_subtitle_fstyle=»font-family:inherit;font-weight:400;» head_title_margins=»margin-top:0px;margin-bottom:0px;» head_subtitle_margins=»margin-top:10px;margin-bottom:0px;» head_link_enabled=»disabled»]В рамках деятельности инвестиционного совета региона в связи с вхождением Сахалинской области в ТОП-30 Национального рейтинга состояния инвестиционного климата за 2020 год Черемисин Дмитрий Павлович был отмечен благодарностью губернатора Лимаренко В. И[/kswr_heading][/kswr_animationblock]

ПОИСК ПО САЙТУ

[kswr_button btn_link=»url:https%3A%2F%2Fpecoltd.net%2Fabout-company%2F|||» btn_align=»center» btn_width=»145″ btn_height=»45″ btn_bg=»{«type«:«color«,«color1«:«rgba(255, 255, 255, 1)«,«color2«:«#111«,«direction«:«to left«}» btn_clr=»{«type«:«color«,«color1«:«#137aba«,«color2«:«#fff«,«direction«:«to left«}» btn_border_radius=»0″ btn_style=»pushbottom» btn_hover_action=»translateup» btn_bg_hover=»{«type«:«color«,«color1«:«#3d3d3d«,«color2«:«#00AFD1«,«direction«:«to left«}» btn_txt=»О компании» btn_ftsize=»font-size:14px;» btn_ftstyle=»font-family:inherit;font-weight:700;» btn_full_width=»false» btn_margins=»margin-left:0px;margin-top:190px;margin-right:;margin-bottom:;» btn_paddings=»padding-left:0px;padding-right:0px;» btn_bxshadow_enabled=»yes» btn_bxshadow=»0px 5px 20px 0px rgba(0, 0, 0, 0.15)» btn_bxshadow_enabled_h=»yes» btn_bxshadow_h=»0px 5px 20px 0px rgba(0, 0, 0, 0.21)»]

АРХИВ НОВОСТЕЙ

[kswr_button btn_link=»url:https%3A%2F%2Fpecoltd. net%2Fnews%2F|||» btn_align=»center» btn_width=»145″ btn_height=»45″ btn_bg=»{«type«:«color«,«color1«:«rgba(255, 255, 255, 1)«,«color2«:«#111«,«direction«:«to left«}» btn_clr=»{«type«:«color«,«color1«:«#137aba«,«color2«:«#fff«,«direction«:«to left«}» btn_border_radius=»0″ btn_style=»pushbottom» btn_hover_action=»translateup» btn_bg_hover=»{«type«:«color«,«color1«:«#3d3d3d«,«color2«:«#00AFD1«,«direction«:«to left«}» btn_txt=»Все новости» btn_ftsize=»font-size:14px;» btn_ftstyle=»font-family:inherit;font-weight:700;» btn_full_width=»false» btn_margins=»margin-left:0px;margin-top:0px;margin-right:;margin-bottom:0;» btn_paddings=»padding-left:0px;padding-right:0px;» btn_bxshadow_enabled=»yes» btn_bxshadow=»0px 5px 20px 0px rgba(0, 0, 0, 0.15)» btn_bxshadow_enabled_h=»yes» btn_bxshadow_h=»0px 5px 20px 0px rgba(0, 0, 0, 0.21)»]

[kswr_animationblock anch_duration=».5″ anch_delay=»0.1″ anch_type=»fadeInLeft» anch_reanimate=»false»][kswr_heading head_title_color=»{«type«:«gradient«,«color1«:«#137aba«,«color2«:«#5d5de2«,«direction«:«to right«}» head_subtitle_color=»#333333″ head_title_fsize=»font-size:14px;line-height:1em;» head_title_fstyle=»font-family:inherit;font-weight:700;» head_subtitle_fsize=»font-size:14px;» head_subtitle_fstyle=»font-family:inherit;font-weight:inherit;» head_title_margins=»margin-top:0px;margin-bottom:4px;» head_subtitle_margins=»margin-top:0px;margin-bottom:0px;» head_title=»Деловые контакты» head_link_enabled=»disabled»][/kswr_heading][kswr_lineseparator ls_height=»2″ ls_color=»{«type«:«color«,«color1«:«#eeba00«,«color2«:«#333«,«direction«:«to right«}» ls_alignement=»left» ls_style=»from-left» ls_margins=»margin-top:0px;margin-bottom:0px;margin-left:0px;margin-right:0px;» ls_width=»125px»][kswr_lineseparator ls_height=»2″ ls_color=»{«type«:«color«,«color1«:«#137aba«,«color2«:«#333«,«direction«:«to right«}» ls_alignement=»left» ls_style=»from-right» ls_margins=»margin-top:2px;margin-bottom:0px;margin-left:0px;margin-right:0px;» ls_width=»60px»][kswr_lineseparator ls_height=»2″ ls_color=»{«type«:«color«,«color1«:«#ed4500«,«color2«:«#333«,«direction«:«to right«}» ls_alignement=»left» ls_style=»from-right» ls_margins=»margin-top:2px;margin-bottom:0px;margin-left:0px;margin-right:0px;» ls_width=»30px»][/kswr_animationblock][kswr_animationblock anch_duration=». 5″ anch_delay=»0.25″ anch_type=»fadeInUp» anch_reanimate=»false»][kswr_heading head_subtitle_color=»#333333″ head_title_fsize=»font-size:19px;» head_title_fstyle=»font-family:inherit;font-weight:inherit;» head_subtitle_fsize=»font-size:44px;line-height:1.2em;—tablet-font-size:32px;—phone-font-size:26px;» head_subtitle_fstyle=»font-family:inherit;font-weight:800;» head_title_margins=»margin-top:0px;margin-bottom:0px;» head_subtitle_margins=»margin-top:0px;margin-bottom:0px;» head_link_enabled=»disabled»]ЧЕРЕМИСИН Д.П. ОТМЕЧЕН БЛАГОДАРНОСТЬЮ ГУБЕРНАТОРА[/kswr_heading][/kswr_animationblock][kswr_animationblock anch_duration=».5″ anch_delay=»0.4″ anch_type=»fadeInUp» anch_reanimate=»false»][kswr_heading head_title_color=»{«type«:«color«,«color1«:«rgba(31, 31, 31, 1)«,«color2«:«#333«,«direction«:«to left«}» head_subtitle_color=»#aaaaaa» head_title_fsize=»font-size:20px;» head_title_fstyle=»font-family:inherit;font-weight:inherit;» head_subtitle_fsize=»font-size:18px;line-height:1.8em;—tablet-font-size:14px;—phone-font-size:14px;» head_subtitle_fstyle=»font-family:inherit;font-weight:400;» head_title_margins=»margin-top:0px;margin-bottom:0px;» head_subtitle_margins=»margin-top:10px;margin-bottom:20px;» head_link_enabled=»disabled»]В рамках деятельности инвестиционного совета региона в связи с вхождением Сахалинской области в ТОП-30 Национального рейтинга состояния инвестиционного климата за 2020 год Черемисин Дмитрий Павлович был отмечен благодарностью губернатора Лимаренко В. И.[/kswr_heading][/kswr_animationblock][kswr_animationblock anch_duration=».5″ anch_delay=»0.55″ anch_type=»fadeInUp» anch_reanimate=»false»]

[/kswr_animationblock]

ДРУГИЕ НОВОСТИ

Экспедиция по поиску затонувшего корабля

«Тихоокеанская инжиниринговая компания» вместе с сахалинскими кинематографистами провела экспедицию по поиску затонувшего японского корабля сопровождения …
Подробнее

Первенство России по мини-футболу

Футбольная команда РЕСО участвует в Первенстве России по мини-футболу среди любительских коллективов сезона 2019/2020 гг …
Подробнее

Научно-практическая конференция

«Тихоокеанская инжиниринговая компания» приняла участие в XV общероссийской научно-практической конференции и выставке …
Подробнее

ПОИСК ПО САЙТУ

[kswr_button btn_link=»url:https%3A%2F%2Fpecoltd.net%2Fabout-company%2F|||» btn_align=»center» btn_width=»145″ btn_height=»45″ btn_bg=»{«type«:«color«,«color1«:«rgba(255, 255, 255, 1)«,«color2«:«#111«,«direction«:«to left«}» btn_clr=»{«type«:«color«,«color1«:«#137aba«,«color2«:«#fff«,«direction«:«to left«}» btn_border_radius=»0″ btn_style=»pushbottom» btn_hover_action=»translateup» btn_bg_hover=»{«type«:«color«,«color1«:«#3d3d3d«,«color2«:«#00AFD1«,«direction«:«to left«}» btn_txt=»О компании» btn_ftsize=»font-size:14px;» btn_ftstyle=»font-family:inherit;font-weight:700;» btn_full_width=»false» btn_margins=»margin-left:0px;margin-top:100px;margin-right:;margin-bottom:;» btn_paddings=»padding-left:0px;padding-right:0px;» btn_bxshadow_enabled=»yes» btn_bxshadow=»0px 5px 20px 0px rgba(0, 0, 0, 0. 15)» btn_bxshadow_enabled_h=»yes» btn_bxshadow_h=»0px 5px 20px 0px rgba(0, 0, 0, 0.21)»]

АРХИВ НОВОСТЕЙ

[kswr_button btn_link=»url:https%3A%2F%2Fpecoltd.net%2Fnews%2F|||» btn_align=»center» btn_width=»145″ btn_height=»45″ btn_bg=»{«type«:«color«,«color1«:«rgba(255, 255, 255, 1)«,«color2«:«#111«,«direction«:«to left«}» btn_clr=»{«type«:«color«,«color1«:«#137aba«,«color2«:«#fff«,«direction«:«to left«}» btn_border_radius=»0″ btn_style=»pushbottom» btn_hover_action=»translateup» btn_bg_hover=»{«type«:«color«,«color1«:«#3d3d3d«,«color2«:«#00AFD1«,«direction«:«to left«}» btn_txt=»Все новости» btn_ftsize=»font-size:14px;» btn_ftstyle=»font-family:inherit;font-weight:700;» btn_full_width=»false» btn_margins=»margin-left:0px;margin-top:0px;margin-right:;margin-bottom:5px;» btn_paddings=»padding-left:0px;padding-right:0px;» btn_bxshadow_enabled=»yes» btn_bxshadow=»0px 5px 20px 0px rgba(0, 0, 0, 0.15)» btn_bxshadow_enabled_h=»yes» btn_bxshadow_h=»0px 5px 20px 0px rgba(0, 0, 0, 0. 21)»]

Обновление. Содержание · Bootstrap. Версия v4.0.0

Reboot — коллекция специфических изменений элементов CSS в едином файле, обеспечиваещая Bootstrap элегантную, простую и последовательную основу для быстрого начала работы.

Reboot — переводится как «перезагрузка», унифицирует отображение базовых стилей в браузерах (например переводит все единицы измерения в rem)

Подходы

Reboot основан на файле normalize.css (для лучшего отображения унифицирует стили которые в этом нуждаются), который позволяет обеспечить многие элементы HTML некоторым набором стилей, используя только селекторы элемента. Дополнительная стилизация реализуется только посредством классов. Например, мы «перезагружаем» стили некоего элемента <table> для более простого вертикального выравнивания (baseline – вертикальный «ритм» контента, или иной), а потом применяем классы <table>, . table-bordered и т.д.

Вот наши рекомендации и причины для использования Reboot:

  • Приведите настройки браузера по умолчанию к использованию единиц rem вместо em при масштабируемом расположении контента.
  • Избегайте margin-top’a. Вертикальные отступы могут «рушиться», приводя к нежелательным результатам. Однако важнее тот факт, что одно направление margin «марджина» — это более простая «ментальная модель» (более просто использовать).
  • Для более удобного масштабирования на разных устройствах, в блочных элементах должны использоваться единицы rem для margin марджинов.
  • Старайтесь минимально объявлять свойства font, вместо чего используйте inherit, где только возможно.

Страницы по умолчанию

Элементы <html> и <body> обновлены чтобы обеспечить лучшие «глобальные» умолчания страниц. Подробнее:

  • Свойство box-sizing глобально объявлено как border-box для каждого элемента – включая *::before и *::after. Это гарантирует, что объявленная ширина элемента никогда не будет превышена из-за паддинга или границы.
    • font-size не объявлен по умолчанию в <html>, но он предполагается как 16px (как в умолчаниях браузера). font-size: 1rem применяется к <body> для легкого отзывчивого масштабирования печатания текста через медиа-запросы и одновременно учитывая предпочтения юзера, а также обеспечивая более гибкий подход.
  • <body> также устанавливает глобальные значения font-family, line-height и text-align, которые наследуются позже некоторыми элементами форм для предотвращения несоответствия шрифтов.
  • Для безопасности <body> имеет объявленный background-color, который стремится к #fff.

Веб-шрифты по умолчанию (Helvetica Neue, Helvetica, Arial) интегрированы в Bootstrap 4 и заменены «стаком (набором) нативных шрифтов» для оптимального рендеринга текста на любой машине или устройстве под любой ОС. Подробнее можно прочитайте о «родных шрифтах» в данной статье.

$font-family-sans-serif:
  // Safari for OS X and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for OS X (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  "Roboto",
  // Basic web fallback
  "Helvetica Neue", Arial, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

Этот font-family применен к <body> и автоматически наследуется глобально во всем Bootstrap. Для изменения глобального font-family обновите карту $font-family-base и перекомпилируйте BS4.

Заголовки и параграфы

Из всех элементов заголовков: <h2> и <p> — удалены margin-top. Для удобного «спейсинга» заголовкам добавлен margin-bottom: margin-bottom: .5rem, а параграфам — margin-bottom: margin-bottom: 1rem.

Заголовок Пример

<h2></h2>

 h2. Заголовок Bootstrap

<h3></h3>

 h3. Заголовок Bootstrap

<h4></h4>

 h4. Заголовок Bootstrap

<h5></h5>

 h5. Заголовок Bootstrap

<h5></h5>

 h5. Заголовок Bootstrap

<h6></h6>

 h6. Заголовок Bootstrap

Списки

Из всех списков <ul>, <ol> и <dl> — удален margin-top, а margin-bottom установлен в 1rem. Вложенные списки без margin-bottom.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

Для более легкой стилизации, удобной иерархии и лучшего спейсинга, у списков описания (<dl>) обновлены марджины margin. У <dd> значение margin-left стало 0, а margin-bottom: .5rem. <dt> стали жирными.

<dl> прекрасно подходит для определений терминов:

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Пре-форматированный текст

У элемента <pre> удален margin-top, а единицами измерения его margin-bottom стали rem.


.example-element {
  margin-bottom: 1rem;
}

Таблицы

Таблицы слегка адаптированы — изменен <caption>, сдвинуты границы, и теперь таблицы имеют последовательное выравнивание text-align. Дополнительные изменения для границ, паддинга и еще кое-чего – в классе .table.

Это пример таблицы, и это ее заголовок для описания контента.
Заголовок Заголовок Заголовок Заголовок
Ячейка Ячейка Ячейка Ячейка
Ячейка Ячейка Ячейка Ячейка
Ячейка Ячейка Ячейка Ячейка

Формы

Различные элементы форм «перезагружены» для приобретения ими более простых «базовых» стилей. Вот несколько самых заметных изменений:

  • У <fieldset> убраны границы, паддинги и марджины; так что теперь они могут быть легко использованы как «обертки» для отдельных форм ввода или групп форм ввода.
  • Элементы <legend>, как и <fieldsets>, тоже изменены, и теперь отображаются как сортируемый заголовок.
  • Элементы <label> получили значение display: inline-block для возможности применения марджина margin.
  • К элементам <input>, <select>, <textarea> и <button> по большому счету, адресуется лишь normalize.css, но Reboot также удаляет их марджин margin и устанавливает line-height: inherit.
  • Элементы <textarea> изменены – теперь их можно изменять в размере лишь вертикально, потому что горизонтальное изменение часто «ломает» разметку страницы.

Эти изменения (и еще) показаны внизу.

Пример легенды

Пример ввода

Пример выбора Выберете. ..Option 1Option 2Option 3Option 4Option 5Option 6

Чекбокс

Вариант один Вариант второй — демонстрирует что он может быть очень очень очень очень очень очень очень длинным. Вариант третий — отключена

Пример текстового поля

Пример времени

Пример вывода 100

Элементы misc

Адрес

Элемент <address> обновлен – теперь вместо дефолтного браузерного font-style: italic стоит normal. line-height теперь наследуется и добавлен margin-bottom: 1rem. Элемент <address> добавлены для контактной информации ближайшего «наследника» (или описания работы в целом). Сохраняйте форматирование добавлением <br> в конец строк.

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890
Full Name
[email protected]

Цитата

По умолчанию, марджин margin элемента blockquotes составляет 1em 40px, так что мы «скинули» его до 0 0 1rem для большей «кучности» при работе с другими элементами.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Строчные элементы

Базовые стили элемента <abbr> созданы так, что они «заставляют» его выделяться среди параграфа текста.

Nulla attr vitae elit libero, a pharetra augue.

Резюме

Курсор cursor по умолчанию всегда стремится к курсору текста text, так что мы переназначили его на «указатель» pointer для обозначения возможности взаимодействия с объектом по клику.

Некоторые детали

Подробнее о деталях.

Еще подробности

Вот еще подробности о деталях.

Атрибут HTML5

[hidden]

HTML5 добавляет новый глобальный атрибут — [hidden], который не отображается по умолчанию имеет значение display: none. Позаимствовав эту идею из PureCSS, мы добавили в нее !important ([hidden] { display: none !important; }), чтобы избежать случайного «перекрытия» этого свойства и показа скрытого [hidden]. Хотя [hidden] не имеет встроенной поддержки в IE10, явное объявление его в вашем CSS решает эту проблему для данного браузера.

<input type="text" hidden>
Частичная несовместимость [hidden] с jQuery

[hidden] несовместим с методами $(...).hide() и $(...).show() jQuery. Поэтому мы пока не особенно одобряем использование [hidden] с другими методами управления свойством элементов display.

Чтобы лишь скрыть видимость элемента без его «исчезания» из разметки, т.е. без изменения свойства display, используйте вместо [hidden] класс .invisible.

font | CSS | WebReference

  • Содержание
    • Краткая информация
    • Синтаксис
    • Значения
    • Пример
    • Спецификация
    • Браузеры

Универсальное свойство, которое позволяет одновременно задать несколько характеристик шрифта и текста.

Значение по умолчаниюЗависит от использования
НаследуетсяДа
ПрименяетсяКо всем элементам
АнимируетсяДа

Синтаксис 

font: [font-style||font-variant||font-weight||font-stretch] font-size [/line-height] font-family

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Значения

В качестве обязательных значений свойства font указывается размер шрифта и его семейство. Остальные значения являются опциональными и задаются при желании. Для подробного ознакомления смотрите информацию о каждом свойстве отдельно.

Допускается в качестве значения использовать ключевые слова, определяющие шрифт различных элементов операционной системы пользователя.

caption
Шрифт для текста элементов форм вроде кнопок.
icon
Шрифт для текста под иконками.
menu
Шрифт применяемый в меню.
message-box
Шрифт для диалоговых окон.
small-caption
Шрифт для подписей к небольшим элементам управления.
status-bar
Шрифт для строки состояния окон.

Пример

p { font: 12pt/10pt sans-serif; }

Из типографики пошла запись указывать через слэш размер шрифта и высоту строки. Поэтому 12pt в данном случае означает размер основного текста в пунктах, а 10pt — высоту строки. В качестве семейства указывается рубленый шрифт (sans-serif).

p { font: bold italic 110% serif; }

Значение bold устанавливает жирное начертание текста, а italic — курсивное. В данном случае их порядок не важен, поэтому bold и italic можно поменять местами. Размер текста задаётся в процентах, а в качестве гарнитуры используется шрифт с засечками (serif).

p { font: normal small-caps 12px/14px fantasy; }

Значение small-caps принадлежит свойству font-variant и устанавливает текст в виде капители (заглавные буквы уменьшенного размера). Значение normal применяется сразу к двум свойствам: font-style и font-weight.

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>font</title> <style> .layer1 { font: 12pt sans-serif; } h2 { font: 2em serif; } </style> </head> <body> <div> <h2>Экзистенциальный либерализм</h2> <p>Карл Маркс исходил из того, что типология средств массовой коммуникации неизбежна. </p> </div> </body> </html>

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства font

Объектная модель

Объект.style.font

Спецификация

СпецификацияСтатус
CSS Fonts Module Level 3Возможная рекомендация
CSS Level 2 Revision 1 (CSS 2.1)Рекомендация
CSS Level 1Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

4121611
1161

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузера, начиная с которой свойство поддерживается.

Текст и шрифт

См. также

  • Сокращённое свойство font

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 02.03.2020

Редакторы: Влад Мержевич

Параметры шрифта и фона | Контейнеры

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

Заметим сразу, что все атрибуты стиля, описанные в этой главе, применимы к любым элементам Web-страниц — и блочным, и встроенным. Есть, правда, одно исключение, о котором мы предупредим особо.

Начнем с атрибутов стиля, задающих параметры шрифта, которым набран текст. Ведь текст на Web-страницах — всему голова.

Атрибут стиля font-family задает имя шрифта, которым будет выведен текст:

font-family: <список имен шрифтов, разделенных запятыми>|inherit

Имена шрифтов задаются в виде их названий, например, Arial или Times New Roman. Если имя шрифта содержит пробелы, его нужно взять в кавычки:

P { font-family: Arial }
h2 ( font-family: «Times New Roman» }

Если данный атрибут стиля присутствует во встроенном стиле, кавычки заменяют апострофами:

<P>

Если указанный нами шрифт присутствует на компьютере посетителя, Web-обозреватель его использует. Если же такого шрифта нет, то текст выводится шрифтом, заданным в настройках по умолчанию. И наша Web-страница, возможно,будет выглядеть не так, как мы задумывали. (Впрочем, шрифты Arial и Times New Roman присутствуют на любом компьютере, работающем под управлением Windows.)

Можно указать несколько наименований шрифтов через запятую:

P { font-family: Verdana, Arial }

Тогда Web-обозреватель сначала будет искать первый из указанных шрифтов, в случае неудачного поиска — второй, потом третий и т. д.

Вместо имени конкретного шрифта можно задать имя одного из семейств шрифтов, представляющих целые наборы аналогичных шрифтов. Таких семейств пять: serif (шрифты с засечками), sans-serif (шрифты без засечек), cursive (шрифты, имитирующие рукописный текст), fantasy (декоративные шрифты) и monospace (моноширинные шрифты):

h3 { font-family: Verdana, Arial, sans-serif }

Особое значение inherit указывает, что текст данного элемента Web-страницы должен быть набран тем же шрифтом, что и текст родительского элемента. Говорят, что в данном случае элемент Web-страницы «наследует» шрифт от родительского элемента. Это, кстати, значение атрибута стиля font-family по умолчанию.

Атрибут стиля font-size определяет размер шрифта:

font-size: <размер>|xx-small|x-small|small|medium|large|x-large|
-xx-large|larger|smaller|inherit

Размер шрифта можно задать в абсолютных и относительных величинах. Для этого используется одна из единиц измерения, поддерживаемая CSS (табл. 8.1).

Обозначение выбранной единицы измерения указывают после самого значения:

P { font-size: 10pt }
STRONG { font-size: 1cm }
EM { font-size: 150% }

Отметим, что все приведенные в табл. 8.1 единицы измерения подходят для задания значений других атрибутов стилей CSS.

Кроме числовых, атрибут font-size может принимать и символьные значения. Так, значения от xx-small до xx-large задают семь предопределенных размеров шрифта, от самого маленького до самого большого. А значения larger и smaller представляют следующий размер шрифта, соответственно, по возрастанию и убыванию. Например, если для родительского элемента определен шрифт размера medium, то значение larger установит для текущего элемента размер шрифта large.

Значение inherit указывает, что данный элемент Web-страницы должен иметь тот же размер шрифта, что и родительский элемент. Это значение атрибута стиля fontsize по умолчанию.

Атрибут стиля color задает цвет текста:

color: <цвет>|inherit

Ранее мы упоминали, что цвет можно задать так называемым RGB-кодом (Red, Green, Blue — красный, зеленый, синий). Он записывается в формате

#<доля красного цвета><доля зеленого цвета><доля синего цвета>,

где доли всех цветов указаны в виде шестнадцатеричных чисел от 00 до FF.

Зададим для текста красный цвет:

h2 { color: #FF0000 }

А теперь серый цвет:

ADDRESS { color: #CCCCCC }

Кроме того, CSS позволяет задавать цвета по именам. Так, значение black соответствует черному цвету, white — белому, red — красному, green — зеленому, а blue — синему.

Пример:

h2 { color: red }

Полный список имен и соответствующих им цветов можно посмотреть на Web-странице http://msdn.microsoft.com/en-us/library/aa358802%28v=VS. 85%29.aspx.

Значение inherit указывает, что данный элемент Web-страницы должен иметь тот же цвет шрифта, что и родительский элемент. Это значение атрибута стиля fontsize по умолчанию.

ВНИМАНИЕ!

Значение inherit поддерживают практически все атрибуты стиля CSS. Оно говорит Web-обозревателю, что элемент Web-страницы, к которому привязан стиль, «наследует» значение соответствующего параметра у родительского элемента. У всех атрибутов это значение по умолчанию. В дальнейшем мы не будем описывать данное значение у каждого атрибута стиля; если же какой-то атрибут стиля не поддерживает его, мы специально об этом упомянем.

С помощью атрибута стиля color мы можем, например, задать цвет горизонтальной линии HTML.

Атрибут стиля opacity позволяет указать степень полупрозрачности элемента Web-страницы:

opacity: <числовое значение>|inherit

Значение полупрозрачности представляет собой число от 0 до 1. При этом 0 обозначает полную прозрачность элемента (т. е. элемент фактически не виден), а 1 — полную непрозрачность (это обычное поведение).

Вот пример задания половинной прозрачности (значение 0,5) для текста фиксированного форматирования:

PRE { opacity: 0.5 }

Отметим, как мы указали дробное число — вместо символа запятой здесь используется точка.

НА ЗАМЕТКУ

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

Атрибут стиля font-weight устанавливает «жирность» шрифта:

font-weight: normal|bold|bolder|lighter|100|200|300|400|500|600|
-700|800|900|inherit

Здесь доступны семь абсолютных значений от 100 до 900, представляющих различную «жирность» шрифта, от минимальной до максимальной; при этом обычный шрифт будет иметь «жирность» 400 (или normal), а полужирный — 700 (или bold). Значение по умолчанию — 400 (normal). Значения bolder и lighter являются относительными и представляют следующие степени «жирности» соответственно в б?льшую и меньшую сторону.

Пример:

CODE { font-weight: bold }

Атрибут font-style задает начертание шрифта:

font-style: normal|italic|oblique|inherit

Доступны три значения, представляющие обычный шрифт (normal), курсив (italic) и особое декоративное начертание, похожее на курсив (oblique).

Атрибут стиля text-decoration задает «украшение» (подчеркивание или зачеркивание), которое будет применено к тексту:

text-decoration: none|underline|overline|line-through|blink|inherit

Здесь доступны пять значений (не считая inherit):

— none убирает все «украшения», заданные для шрифта родительского элемента;

— underline подчеркивает текст;

— overline «надчеркивает» текст, т. е. проводит линию над строками;

— line-through зачеркивает текст;

— blink делает шрифт мерцающим (на данный момент не поддерживается Safari).

ВНИМАНИЕ!

Не следует без особой необходимости задавать для текста подчеркивание. Дело в том, что Web-обозреватели по умолчанию выводят гиперссылки подчеркнутыми, и подчеркнутый текст, не являющийся гиперссылкой, может обескуражить посетителя.

Атрибут стиля font-variant позволяет указать, как будут выглядеть строчные буквы шрифта:

font-variant: normal|small-caps|inherit

Значение small-caps задает такое поведение шрифта, когда его строчные буквы выглядят точно так же, как прописные, просто имеют меньший размер. Значение normal задает для шрифта обычные прописные буквы.

Атрибут стиля text-transform позволяет изменить регистр символов текста:

text-transform: capitalize|uppercase|lowercase|none|inherit

Мы можем преобразовать текст к верхнему (значение uppercase этого атрибута) или нижнему (lowercase) регистру, преобразовать к верхнему регистру первую букву каждого слова (capitalize) или оставить в изначальном виде (none).

Атрибут стиля line-height задает высоту строки текста:

line-height: normal|<расстояние>|inherit

Здесь можно задать абсолютную и относительную величину расстояния, указав соответствующую единицу измерения CSS (см. табл. 8.1). При ее отсутствии заданное нами значение сначала умножается на высоту текущего шрифта и затем используется. Таким образом, чтобы увеличить высоту строки вдвое по сравнению с обычной, мы можем написать:

P { line-height: 2 }

Значение normal этого атрибута возвращает управление высотой строки Web-обозревателю.

Атрибут стиля letter-spacing позволяет задать дополнительное расстояние между символами текста:

letter-spacing: normal|<расстояние>

Отметим, что это именно дополнительное расстояние; оно будет добавлено к изначальному, установленному самим Web-обозревателем.

Здесь также можно задать абсолютное и относительное расстояние, указав соответствующую единицу измерения CSS (см. табл. 8.1). Расстояние может быть положительным и отрицательным; в последнем случае символы шрифта будут располагаться друг к другу ближе обычного. Значение normal устанавливает дополнительное расстояние по умолчанию, равное нулю.

Атрибут стиля letter-spacing не поддерживает значение inherit.

Вот пример задания дополнительного расстояния между символами равного пяти пикселам:

h2 { letter-spacing: 5px }

Текст, набранный такими символами, будет выглядеть разреженным.

А здесь мы задали отрицательное дополнительное расстояние между символами равным двум пикселам:

H6 { letter-spacing: -2px }

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

Аналогичный атрибут стиля word-spacing задает дополнительное расстояние между отдельными словами текста:

word-spacing: normal|<расстояние>

Пример:

h2 { word-spacing: 5mm }

Ну, 5 мм, пожалуй, многовато. .. Хотя это всего лишь пример.

И напоследок рассмотрим атрибут стиля font, позволяющий задать одновременно сразу несколько параметров шрифта:

font: [<начертание>] [<вид строчных букв>] [<«жирность»>]

[<размер>[/<высота строки текста>]] <имя шрифта>

Как видим, обязательным является только имя шрифта — остальные параметры могут отсутствовать.

Задаем для текста абзацев шрифт Times New Roman размером 10 пунктов:

P { font: 10pt «Times New Roman» }

А для заголовков шестого уровня — шрифт Arial размером 12 пунктов и курсивного начертания:

H6 { font: italic 12pt Verdana }

css — Какова цель использования шрифта: наследовать?

Спросил

Изменено 3 года, 11 месяцев назад

Просмотрено 83k раз

Я просто хотел знать, почему font: inherit; используется в каскадных таблицах стилей.

1

Как и в других ответах, нужно наследовать свойство CSS от родительского элемента.

В других ответах не было сказано зачем вам этот . Потому что, в конце концов, свойства CSS в любом случае наследуются, верно?

Нет. Большинство из них по умолчанию (но, например, цвет ссылки не наследуется от родительского элемента). Но рассмотрим этот случай:

 p { color: blue; }
div.important { цвет: красный; }
 
 <дел>
    
Это текст

Теперь текст будет синим, а не красным. Если мы хотим

, чтобы иметь стиль его родителя, а не стиль по умолчанию, мы должны переопределить его CSS. Конечно, мы могли бы повторить значение свойства ( red ), но это нарушает DRY (не повторяйтесь). Вместо этого мы наследуем it:

 div.important p { color: inherit; }

5

Объявление font:inherit используется во многих таблицах стилей «CSS Reset», которые часто копируются в различные библиотеки и фреймворки. Оригинальный Reset CSS от Эрика Мейера имеет 9Шрифт 0011: наследовать . Конкретной мотивации не приводится. Говорят, что общее обоснование заключается в том, чтобы «уменьшить несоответствия браузера в таких вещах, как высота строки по умолчанию, поля и размеры шрифта заголовков и так далее». Но Мейер ссылается на свой предыдущий пост, где он объясняет эту идею, говоря, среди прочего: «Я хочу всего этого, потому что я не хочу воспринимать эффекты стиля как должное. Это служит двум целям. Во-первых, это заставляет меня еще больше задуматься о семантике моего документа. При сбросе на месте я не выбираю сильный , потому что дизайн требует выделения жирным шрифтом. Вместо этого я выбираю нужный элемент — будь то strong или em , или b , или h4 , или что-то еще, — а затем стилизую его по мере необходимости».

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

Итак, речь идет об особой методологии (или, как некоторые могут сказать, идеологии или религии) авторства и дизайна. Он завоевал популярность и часто применяется рутинно.

2

Свойство CSS font является либо сокращенным свойством для настройки font-style , font-variant , вес шрифта , размер шрифта , высота строки и семейство шрифтов ; или способ установить шрифт элемента на системный шрифт, используя определенные ключевые слова. -МДН

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

В 1-й группе: вы можете видеть, что есть некоторые специальные стили, установленные по умолчанию из браузера, h2 жирнее и крупнее, он также наследует соответствующие значения от тело автоматически. Однако для элемента ввода он не наследует ни одно из этих значений, так как это замененный элемент, который служит своей уникальной цели.

Во 2-й группе: Принуждает эти элементы наследовать эти значения от body , используя шрифт : inherit; .

Теперь вы видите, что он делает. Это полностью зависит от вас, когда его использовать, например, вы можете использовать тег

для логотипа сайта на главной странице, и вы, вероятно, хотите, чтобы он не отличался от того, что отображается на других страницах. И, конечно же, он обычно используется в фреймворках сброса CSS.

 тело {
  семейство шрифтов: "Comic Sans MS", "Comic Sans", скоропись;
  стиль шрифта: курсив;
}

. наследовать {
  шрифт: наследовать;
} 
  
Заголовок
 


<час>

 
Заголовок

Не все браузеры наследуют свойства шрифта для всех элементов. Известно, что Netscape 4.x плохо относился к наследованию. Рассмотрим следующий стиль:

 body { фон: черный; белый цвет }

В Netscape 4.x цвет не применялся к элементам таблицы, поэтому внутри таблицы на черном фоне был бы черный текст по умолчанию.

Свойства шрифта имеют такое же отношение к некоторым элементам, особенно к элементам формы (и элементам таблицы для старых браузеров). Нередко можно увидеть такое определение:

 table, form { font: inherit }

1

наследование используется для получения свойств родительского элемента. Другими словами, наследовать свойства родительского элемента.

Свойство по умолчанию наследует , это означает, что у вас есть div и p .

 <дел>
    
Привет, мир!