Var html что это

Браузеры обычно помечают текст в контейнере курсивным начертанием.

Демо¶

Текстовые элементы

Синтаксис¶

var>Текстvar> 

Закрывающий тег обязателен.

Атрибуты¶

Для этого элемента доступны универсальные атрибуты.

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

• WHATWG HTML Living Standard
• HTML 5

Примеры¶

Пример 1¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

 html> head> meta charset="utf-8" /> title>VARtitle> head> body> p> В данном примере делается запрос к базе данных для получения поля var>content_titlevar> из таблицы var>contentvar>, причем должно удовлетворяться условие code>section_id = 1code>. p> body> html> 

Пример 2¶

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

p>A simple equation: var>xvar> = var>yvar> + 2p> 

Пример 3¶

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

1 2 3 4 5

p> The variables var>minSpeedvar> and var>maxSpeedvar> control the minimum and maximum speed of the apparatus in revolutions per minute (RPM). p> 

1 2 3

var  font: bold 15px 'Courier', 'Courier New', monospace; > 

Функция var()

Стилевая функция var() позволяет вставлять значения пользовательских переменных в значения стилевых свойств. var() нельзя использовать в именах селекторов и в свойствах.

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

aside

Для обращения к переменной —my-font используется запись var(—my-font) , которую можно вставлять в качестве значения свойства. При этом область видимости переменной ограничена указанным селектором ( aside в данном случае) и применение var(—my-font) в другом селекторе не даст результата. Для создания глобальных переменных их следует описать внутри селектора :root.

Синтаксис

Значения

<переменная>Имя переменной, обозначается двумя дефисами впереди (—my-font). Резервное значение, которое подставляется вместо заданного, в том случае, если переменная не определена. Через запятую можно указать несколько значений.

Пример

:root < --primary-color: #0275d8; --info-color: #5bc0de; >button < padding: .5rem 1rem; border: none; >.primary < color: var(--white, #fff); background-color: var(--primary-color); >.info < color: var(--white, #fff); background-color: var(--info-color); >p.info

В данном примере вводятся две переменные: —primary-color и —info-color . Переменная —white не определена, поэтому подставляется указанное значение по умолчанию. Для селектора p.info значение переменной —primary-color переопределяется.

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

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

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

Браузеры

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

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

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

См. также

• :root
• Введение в переменные CSS
• Градиенты у
• Добавление резервного значения

Справочник CSS

• !important
• ::after
• ::backdrop
• ::before
• ::first-letter
• ::first-line
• ::marker
• ::placeholder
• ::selection
• :active
• :blank
• :buffering
• :checked
• :default
• :dir
• :disabled
• :empty
• :enabled
• :first-child
• :first-of-type
• :focus
• :focus-within
• :fullscreen
• :hover
• :in-range
• :indeterminate
• :invalid
• :is()
• :lang()
• :last-child
• :last-of-type
• :link
• :muted
• :not()
• :nth-child()
• :nth-last-child()
• :nth-last-of-type()
• :nth-of-type()
• :only-child
• :only-of-type
• :optional
• :out-of-range
• :paused
• :placeholder-shown
• :playing
• :read-only
• :read-write
• :required
• :root
• :seeking
• :stalled
• :target
• :valid
• :visited
• :volume-locked
• @charset
• @document
• @font-face
• @import
• @keyframes
• @media
• @page
• @supports
• @viewport
• accent-color
• align-content
• align-items
• align-self
• all
• animation
• animation-delay
• animation-direction
• animation-duration
• animation-fill-mode
• animation-iteration-count
• animation-name
• animation-play-state
• animation-timing-function
• aspect-ratio
• backdrop-filter
• backface-visibility
• background
• background-attachment
• background-blend-mode
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-position-x
• background-position-y
• background-repeat
• background-size
• block-size
• border
• border-block
• border-block-color
• border-block-end
• border-block-end-color
• border-block-end-style
• border-block-end-width
• border-block-start
• border-block-start-color
• border-block-start-style
• border-block-start-width
• border-block-style
• border-block-width
• border-bottom
• border-bottom-color
• border-bottom-left-radius
• border-bottom-right-radius
• border-bottom-style
• border-bottom-width
• border-collapse
• border-color
• border-image
• border-left
• border-left-color
• border-left-style
• border-left-width
• border-radius
• border-right
• border-right-color
• border-right-style
• border-right-width
• border-spacing
• border-style
• border-top
• border-top-color
• border-top-left-radius
• border-top-right-radius
• border-top-style
• border-top-width
• border-width
• bottom
• box-decoration-break
• box-shadow
• box-sizing
• caption-side
• caret-color
• clear
• clip
• color
• column-count
• column-fill
• column-gap
• column-rule
• column-rule-color
• column-rule-style
• column-rule-width
• column-span
• column-width
• columns
• content
• counter-increment
• counter-reset
• cursor
• direction
• display
• empty-cells
• filter
• flex
• flex-basis
• flex-direction
• flex-flow
• flex-grow
• flex-shrink
• flex-wrap
• float
• font
• font-family
• font-kerning
• font-size
• font-stretch
• font-style
• font-variant
• font-weight
• gap
• height
• hyphenate-character
• hyphenate-limit-chars
• hyphens
• image-rendering
• justify-content
• left
• letter-spacing
• line-clamp
• line-height
• list-style
• list-style-image
• list-style-position
• list-style-type
• margin
• margin-bottom
• margin-left
• margin-right
• margin-top
• marks
• max-height
• max-width
• min-block-size
• min-height
• min-width
• mix-blend-mode
• object-fit
• opacity
• order
• orphans
• outline
• outline-color
• outline-offset
• outline-style
• outline-width
• overflow
• overflow-x
• overflow-y
• padding
• padding-block
• padding-block-end
• padding-block-start
• padding-bottom
• padding-inline
• padding-inline-end
• padding-inline-start
• padding-left
• padding-right
• padding-top
• page-break-after
• page-break-before
• page-break-inside
• perspective
• perspective-origin
• place-content
• pointer-events
• position
• quotes
• resize
• right
• row-gap
• scroll-behavior
• tab-size
• table-layout
• text-align
• text-align-last
• text-decoration
• text-decoration-color
• text-decoration-line
• text-decoration-skip-ink
• text-decoration-style
• text-emphasis
• text-emphasis-color
• text-emphasis-position
• text-emphasis-style
• text-fill-color
• text-indent
• text-orientation
• text-overflow
• text-shadow
• text-stroke
• text-stroke-color
• text-stroke-width
• text-transform
• top
• transform
• transform-origin
• transform-style
• transition
• transition-delay
• transition-duration
• transition-property
• transition-timing-function
• unicode-bidi
• user-select
• vertical-align
• visibility
• white-space
• widows
• width
• word-break
• word-spacing
• word-wrap
• writing-mode
• z-index
• zoom

Тег var

Тег var используется для выделения переменных компьютерных программ в тексте вашей HTML страницы.

По умолчанию содержимое var выделяется курсивом, это поведение можно изменить с помощью CSS свойства font-style .

Пример

Давайте посмотрим, как работает тег var :

Вводим переменную $a, равную трем.

Смотрите также

• тег code ,
  в который принято заключать код программ
• тег samp ,
  предназначенный для результата программ