Устанавливает имя функции, которая будет работать с функциональной записью {{cssxref("font-variant-alternates", "swash()", "#swash()")}} для {{cssxref("font-variant-alternates")}}. Определение значения функции swash допускает только одно значение: ident1: 2 является действительным, но ident2: 2 4 нет.
Устанавливает имя функции, которая будет работать с функциональной записью {{cssxref("font-variant-alternates", "annotation()", "#annotation()")}} для {{cssxref("font-variant-alternates")}}. Определение значения функции допускает только одно значение: ident1: 2 действительным , но ident2: 2 4 нет.
Устанавливает имя функции, которая будет работать с функциональной записью {{cssxref("font-variant-alternates", "ornaments()", "#ornaments()")}} для {{cssxref("font-variant-alternates")}}. Определение значения функции ornaments допускает только одно значение: ident1: 2 является действительным, но ident2: 2 4 нет.
Specifies a feature name that will work with the {{cssxref("font-variant-alternates", "stylistic()", "#stylistic()")}} functional notation of {{cssxref("font-variant-alternates")}}. A stylistic feature value definition allows only one value: ident1: 2 is valid, but ident2: 2 4 isn't.
Specifies a feature name that will work with the {{cssxref("font-variant-alternates", "styleset()", "#styleset()")}} functional notation of {{cssxref("font-variant-alternates")}}. A stylset feature value definition allows an unlimited number of values: ident1: 2 4 12 1 maps to the OpenType values ss02, ss04, ss12, and ss01. Note that values higher than 99 are valid, but don't map to any OpenType values and are ignored.
Specifies a feature name that will work with the {{cssxref("font-variant-alternates", "character-variant()", "#character-variant()")}} functional notation of {{cssxref("font-variant-alternates")}}. A character-variant feature value definition allows either one or two values: ident1: 3 maps to cv03=1, and ident2: 2 4 maps to cv02=4, but ident2: 2 4 5 is invalid.
The @supportsCSSat-rule associates a set of nested statements, in a CSS block, that is delimited by curly braces, with a condition consisting of testing of CSS declarations, that is property-value pairs, combined with arbitrary conjunctions, disjunctions, and negations of them. Such a condition is called a supports condition.
+
The @supportsCSSat-rule associates a set of nested statements, in a CSS block, that is delimited by curly braces, with a condition consisting of testing of CSS declarations, that is property-value pairs, combined with arbitrary conjunctions, disjunctions, and negations of them. Such a condition is called a supports condition.
-
@supports gives CSS the ability to perform a feature query.
+
@supports gives CSS the ability to perform a feature query.
The @supports at-rule may be used not only at the top level of a CSS, but also inside any CSS conditional-group at-rule and can be accessed via the CSS object model interface {{domxref("CSSSupportsRule")}}.
-
Синтаксис
+
Синтаксис
-
A supports condition consists of one or several declarations combined by different logical operators. Precedence of operators can be overruled by using parentheses.
+
A supports condition consists of one or several declarations combined by different logical operators. Precedence of operators can be overruled by using parentheses.
-
Синтаксис объявления
+
Синтаксис объявления
The simplest expression is a CSS declaration, that is a CSS property name followed by a value, separated by a colon. The following expression
@@ -27,7 +27,7 @@
Оператор not
+
Оператор not
The not operator can precede any expression to create a new expression, resulting in the negation of the original expression. The following expression
@@ -40,13 +40,13 @@
Оператор not
not ( not ( transform-origin: 2px ) )
(display: flexbox) and ( not (display: inline-grid) )
-
-
Предупреждение: there is no need to enclose the not operator between two parentheses when at the top level. To combine it with other operators, like and and or, the parentheses are required.
+
+
Предупреждение: there is no need to enclose the not operator between two parentheses when at the top level. To combine it with other operators, like and and or, the parentheses are required.
-
Оператор and
+
Оператор and
-
From two expressions, the and operator creates a new expression consisting in the conjunction of the two original ones; the resulting expression is true only if both of the original expressions also resolve to true. In this example, the complete expression resolves to true if and only if the two expressions are simultaneously true:
+
From two expressions, the and operator creates a new expression consisting in the conjunction of the two original ones; the resulting expression is true only if both of the original expressions also resolve to true. In this example, the complete expression resolves to true if and only if the two expressions are simultaneously true:
(display: table-cell) and (display: list-item)
@@ -58,7 +58,7 @@
Оператор and
(display: table-cell) and ((display: list-item) and (display:run-in))
-
Оператор or
+
Оператор or
From two expressions, the or operator creates a new expression consisting in the disjunction of the two original ones; the resulting expression is true if one, or both, of the original expressions also resolves to true. In this example, the complete expression resolves to true if at least one of the two expressions is true:
@@ -74,17 +74,17 @@
Оператор or
( transform-style: preserve-3d ) or (( -moz-transform-style: preserve-3d ) or
(( -o-transform-style: preserve-3d ) or ( -webkit-transform-style: preserve-3d )))
-
-
Предупреждение: when using both and and or operators, the parentheses must be used in order to define the order in which they apply. If not, the condition is invalid leading to the whole at-rule to be ignored.
+
+
Предупреждение: when using both and and or operators, the parentheses must be used in order to define the order in which they apply. If not, the condition is invalid leading to the whole at-rule to be ignored.
-
Формальный синтаксис
+
Формальный синтаксис
{{csssyntax}}
-
Примеры
+
Примеры
-
Тестирование заданного свойства
+
Тестирование заданного свойства
@supports (animation-name: test) {
… /* specific CSS applied when animations are supported unprefixed */
@@ -94,7 +94,7 @@
}
-
Тестирование заданного свойства или его версии с префиксом
+
Тестирование заданного свойства или его версии с префиксом
@supports ( (perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or
(-ms-perspective: 10px) or (-o-perspective: 10px) ) {
@@ -102,13 +102,13 @@
Тестирование неподдерживаемого или специфического свойства
+
Тестирование неподдерживаемого или специфического свойства
@supports not ((text-align-last:justify) or (-moz-text-align-last:justify) ){
… /* specific CSS applied to simulate text-align-last:justify */
}
CSS псевдокласс:visited позволяет вам выбирать ссылки, которые были посещены. Этот стиль может переопределяться другими относящимися к ссылкам псевдоклассами, такими как {{ cssxref(":link") }}, {{ cssxref(":hover") }} и {{ cssxref(":active") }}, появляющимися в соответствующем порядке. Чтобы стилизировать ссылки должным образом, вставьте правило :visited после правила :link до правил :hover и :active, как определено LVHA-порядком: :link — :visited — :hover — :active.
-
+
Замечание: Из-за причин приватности, браузеры строго ограничивают стили, которые вы можете применить к элементу, используя этот псевдокласс: только {{ cssxref("color") }}, {{ cssxref("background-color") }}, {{ cssxref("border-color") }}, {{ cssxref("border-bottom-color") }}, {{ cssxref("border-left-color") }}, {{ cssxref("border-right-color") }}, {{ cssxref("border-top-color") }}, {{ cssxref("outline-color") }}, {{ cssxref("column-rule-color") }}, fill и stroke. Компонент альфа-канала в доступных стилях будет игнорироваться. Вместо него будет использоваться альфа-канал, используемый для непосещённых ссылок. Если в цвете альфа-канала для посещённых ссылок задан0, то в этом случае будет использоваться цвет непосещённых ссылок.
Несмотря на то, что цвет может меняться, метод getComputedStyle наврёт и всегда будет давать значение цвета непосещённых ссылок.
Источник этого интерактивного примера можно найти в репозитории на GitHub. Если вы хотите посодействовать развитию проекта, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на включение кода.
-
Это свойство не влияет на однострочные flex-контейнеры (т.е. с flex-wrap: nowrap)
Синтаксис
@@ -76,16 +74,16 @@
Значения
baseline
first baseline last baseline
-
-
Определяет участие в выравнивании первой или последней базовой линии: выравнивает базовую линию выравнивания первого или последнего базового набора блока с соответствующей базовой линией в общем первом или последнем базовом наборе всех блоков в его группе совместного использования базовой линии.
- Резервное выравнивание для first baseline равно start, для last baseline - end.
-
space-between
+
+
Определяет участие в выравнивании первой или последней базовой линии: выравнивает базовую линию выравнивания первого или последнего базового набора блока с соответствующей базовой линией в общем первом или последнем базовом наборе всех блоков в его группе совместного использования базовой линии.
+ Резервное выравнивание для first baseline равно start, для last baseline - end.
+
space-between
Элементы равномерно распределены внутри контейнера выравнивания вдоль поперечной оси. Интервал между каждой парой соседних элементов одинаков. Первый элемент находится на одном уровне с начальной кромкой контейнера выравнивания на поперечной оси, а последний элемент находится на одном уровне с конечной кромкой контейнера выравнивания на поперечной оси.
space-around
Элементы равномерно распределены внутри контейнера выравнивания вдоль поперечной оси. Интервал между каждой парой соседних предметов одинаков. Пустое пространство до первого и после последнего элемента равно половине пространства между каждой парой смежных элементов.
space-evenly
Элементы равномерно распределены внутри контейнера выравнивания вдоль поперечной оси. Интервал между каждой парой соседних элементов, начальным краем и первым элементом, а также конечным краем и последним элементом абсолютно одинаков.
-
stretch
+
stretch
Если объединённый размер элементов вдоль поперечной оси меньше размера контейнера выравнивания, размер любого auto-размерного элемента увеличивается одинаково (не пропорционально), но при этом соблюдаются ограничения, налагаемые {{cssxRef('max-height')}}/{{cssxRef('max-width')}} (или эквивалентной функциональности), так что объединённый размер точно заполняет контейнер выравнивания вдоль поперечной оси.
safe
Используется вместе с ключевым словом выравнивания. Если выбранное ключевое слово означает, что элемент переполняет контейнер выравнивания, что приводит к потере данных, вместо этого элемент выравнивается, как если бы режим выравнивания был start.
@@ -101,7 +99,7 @@
Пример
CSS
-
#container {
+
#container {
height:200px;
width: 240px;
align-content: center; /* Can be changed in the live sample */
diff --git a/files/ru/web/css/align-items/index.html b/files/ru/web/css/align-items/index.html
index b03dcfae77bf85..640131c793325b 100644
--- a/files/ru/web/css/align-items/index.html
+++ b/files/ru/web/css/align-items/index.html
@@ -59,11 +59,10 @@
Значения
All flex items are aligned such that their baselines align. The item with the largest distance between its cross-start margin edge and its baseline is flushed with the cross-start edge of the line.
stretch
Элементы Flex растягиваются, например, поперечный размер поля элемента совпадает с линией при соблюдении ограничений ширины и высоты.
Тип данныхCSS<angle> представляет собой значение угла, выраженное в градусах, градах, радианах или оборотах. Он используется, например, в {{cssxref ("<gradient>")}} и в некоторых функциях {{cssxref ("transform")}}.
+
Тип данныхCSS<angle> представляет собой значение угла, выраженное в градусах, градах, радианах или оборотах. Он используется, например, в {{cssxref ("<gradient>")}} и в некоторых функциях {{cssxref ("transform")}}.
Анимация меняет направление в каждом цикле, то есть в первом цикле она начинает с начального положения, доходит до конечного, а во втором цикле продолжает с конечного и доходит до начального и так далее, в зависимости от количества циклов анимации animation-iteration-count.
alternate-reverse
Анимация начинает проигрываться с конечного положения и доходит до начального, а в следующем цикле продолжая с начального переходит в конечное, в зависимости от количества итераций анимации animation-iteration-count.
Длительность анимации определяется в секундах s или в миллисекундах ms. По умолчанию стоит значение 0s. Отрицательные значения являются недействительными.
Название атрибута элемента HTML, на который ссылаемся в CSS.
-
<type-or-unit> {{Experimental_Inline}}
-
-
Является ключевым словом, представляющим либо тип значения атрибута, либо его единицу, так как в HTML некоторые атрибуты имеют неявные единицы. Если использование <type-or-unit> в качестве значения для данного атрибута недопустимо, выражение attr() также будет недопустимым. Если этот параметр опущен, по умолчанию используется string . Список допустимых значений:
-
+
<type-or-unit> {{Experimental_Inline}}
+
Является ключевым словом, представляющим либо тип значения атрибута, либо его единицу, так как в HTML некоторые атрибуты имеют неявные единицы. Если использование <type-or-unit> в качестве значения для данного атрибута недопустимо, выражение attr() также будет недопустимым. Если этот параметр опущен, по умолчанию используется string . Список допустимых значений:
Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, склонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на извлечение.
-
Задняя поверхность элемента является зеркальным отражением его передней поверхности. Однако невидимая в 2D, задняя грань может быть видимой, когда преобразование вызывает вращение элемента в 3D пространстве. (Это свойство не влияет на 2D-преобразования, которые не имеют перспективы.)
Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на извлечение.
-
Обратите внимание, что background-origin игнорируется, когда {{cssxref("background-attachment")}} является fixed.
Примечание: Сокращение {{cssxref("background")}} сбрасывает значения этого свойства к его начальному значению, если оно не указано.
Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на извлечение.
{{cssxref("<position>")}}. Позиция определяет координату x/y, чтобы разместить элемент относительно границ поля элемента. Она может быть определена с использованием одного и двух значений. Если используются два значения, первое значение предоставляет горизонтальную позицию, а второе представляет вертикальную позицию. Если указано только одно, второе значение считается center.
-
+
<position>
+
{{cssxref("<position>")}}. Позиция определяет координату x/y, чтобы разместить элемент относительно границ поля элемента. Она может быть определена с использованием одного и двух значений. Если используются два значения, первое значение предоставляет горизонтальную позицию, а второе представляет вертикальную позицию. Если указано только одно, второе значение считается center.
he border-image-width CSS property defines the width of the border image by defining inward offsets from the border edges. If the border-image-width is greater than the {{cssxref("border-width")}}, then the border image extends beyond the padding (and/or content) edge.
{{cssinfo}}
-
Синтаксис
+
Синтаксис
/* border-image-width: all */
border-image-width: 3;
@@ -31,12 +31,12 @@
Синтаксис
border-image-width: unset;
-
где:
+
где:
-
-
width
-
Is a value denoting the width of the image used as a border to apply to all four edges. It is used only in the one-value syntax.
-
vertical
+
+
width
+
Is a value denoting the width of the image used as a border to apply to all four edges. It is used only in the one-value syntax.
+
vertical
Is a value denoting the width of the image used as a border to apply to all vertical edges, that is the top and bottom edges. It is used only in the two-value syntax.
horizontal
Is a value denoting the width of the image used as a border to apply to all horizontal edges, that is the right and left edges. It is used only in the two- and three-value syntaxes.
@@ -52,24 +52,24 @@
Синтаксис
Is a keyword indicating that all four values are inherited from their parent's element calculated value.
-
Значения
+
Значения
-
+
<length>
Represents the width of the border. It can be an absolute or relative length. This length must not be negative.
<percentage>
-
Represents the width of the border as a percentage of the element. The percentage must not be negative.
+
Represents the width of the border as a percentage of the element. The percentage must not be negative.
<number>
Represents a multiple of the computed value of the element's {{cssxref("border-width")}} property to be used as the border width. The number must not be negative.
auto
Causes the border image width to equal the intrinsic width or height (whichever is applicable) of the corresponding {{cssxref("border-image-slice")}}. If the image does not have the required intrinsic dimension then the corresponding computed border-width is used instead.
Обозначает размер радиуса окружности, или две полуоси эллипса. Проценты по горизонтальной оси относятся к ширине элемента, проценты по вертикальной оси к высоте. Отрицательные значения недействительны.
@@ -140,38 +140,93 @@
Формальный синта
Примеры
-
border: solid 10px;
- /* угол изгибается в виде 'D' */
- border-radius: 10px 40px 40px 10px;
+
border-width: ширина /* Одно значение */
border-width: вертикальная горизонтальная /* Два значения */
@@ -55,11 +55,7 @@
Values
The specification doesn't precisely define the thickness of each of the keywords, which is therefore implementation specific. Nevertheless, it requests that the thickness does follow the thin ≤ medium ≤ thick inequality and that the values are constant on a single document.
-
-
-
inherit
-
-
+
inherit
Is a keyword indicating that all four values are inherited from their parent's element calculated value.
Замечание: Рекомендуется использовать border, когда вы хотите установить все свойства границ одновременно. Тогда как универсальные свойства {{Cssxref("border-width")}}, {{Cssxref("border-style")}}, и {{Cssxref("border-color")}} принимают до четырёх значений, позволяя установить различные значения для каждого ребра, border принимает единственное значение для каждого свойства. И этот стиль применяется для всех четырёх границ.
Исходный код этого интерактивного примера хранится в GitHub репозитории. Если вы хотите внести свой вклад в проект интерактивных примеров, скопируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.
-
Эффект свойства bottom зависит от того, как позиционируется элемент (то есть от значения свойства {{cssxref("position")}}):
Это значение по умолчанию, определённое в CSS стандарте. Свойства width и height включают исключительно контент, и не включают padding и border. Например .box {width: 350px; border: 10px solid black;} будет иметь ширину 370 пикселей.
-
Размеры элемента рассчитываются следующим образом: width = ширина контента, и height = высота контента. (Границы и внутренние отступы не включаются в вычисление.)
-
-
-
+
Это значение по умолчанию, определённое в CSS стандарте. Свойства width и height включают исключительно контент, и не включают padding и border. Например .box {width: 350px; border: 10px solid black;} будет иметь ширину 370 пикселей.
+
Размеры элемента рассчитываются следующим образом: width = ширина контента, и height = высота контента. (Границы и внутренние отступы не включаются в вычисление.)
border-box
-
Свойства width и height включают контент, внутренний отступ и границы, но не включают внешний отступ. Заметьте, что внутренний отступ и граница будут внутри блока. Например, .box {width: 350px; border: 10px solid black;} будет иметь общую ширину 350 пикселей, а ширина контента составит 330 пикселей. Размер контента не может быть отрицательным, минимальное значение - 0, поэтому border-box невозможно использовать для скрытия элемента.
-
Размеры элемента рассчитываются следующим образом: width = граница + внутренний отступ + ширина контента, и height = граница + внутренний отступ + высота контента.
+
Свойства width и height включают контент, внутренний отступ и границы, но не включают внешний отступ. Заметьте, что внутренний отступ и граница будут внутри блока. Например, .box {width: 350px; border: 10px solid black;} будет иметь общую ширину 350 пикселей, а ширина контента составит 330 пикселей. Размер контента не может быть отрицательным, минимальное значение - 0, поэтому border-box невозможно использовать для скрытия элемента.
+
Размеры элемента рассчитываются следующим образом: width = граница + внутренний отступ + ширина контента, и height = граница + внутренний отступ + высота контента.
Источник этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, скопируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.
-
При применении к неплавающим блокам он перемещает границу края border edge элемента до тех пор, пока не окажется ниже края margin edge поля всех соответствующих поплавков. Вертикальный край неплавающего блока сжимается.
Вертикальные поля между двумя плавающими элементами, с другой стороны, не будут разрушаться. При применении к плавающим элементам - margin edge нижнего элемента перемещается ниже margin edge всех соответствующих поплавков. Это влияет на положение более поздних поплавков, поскольку более поздние поплавки не могут быть расположены выше предыдущих.
Функциональная нотация: hsl(H, S, L[, A]) илиhsla(H, S, L, A)
-
H (hue) - это {{cssxref("<угол>")}} цветового круга, заданного в degS, rads, градусах или поворотах {{SpecName("CSS4 Colors","#The-HSL-notation")}}. При записи в виде unitless {{cssxref ("<number>")}} он интерпретируется как Градусы, как указано в {{SpecName ("CSS3 Colors","#hsl-color")}}. По определению, red=0 deg=360 град, с другими цветами, распространёнными по кругу, поэтому green=120deg град, blue=240deg град и т. д. В качестве < угла > он неявно обёртывается таким образом, что -120deg=240deg, 480deg=120deg, -1turn=1turn, и т. д.
-
S (насыщенность) и L (лёгкость) являются процентами. 100% насыщенность полностью насыщена, в то время как 0% полностью ненасыщен (серый). 100% лёгкость белый, 0% лёгкость чёрный, и 50% лёгкость “нормально.”
-
A (alpha) can be a {{cssxref("<number>")}} between 0 and 1, or a {{cssxref("<percentage>")}}, where the number 1 corresponds to 100% (full opacity). A (Альфа) может быть {{cssxref("<number>")}} между 0 и 1 или {{cssxref("<percentage>")}}, где число 1 соответствует 100% (полная непрозрачность).
-
-
-
+
H (hue) - это {{cssxref("<угол>")}} цветового круга, заданного в degS, rads, градусах или поворотах {{SpecName("CSS4 Colors","#The-HSL-notation")}}. При записи в виде unitless {{cssxref ("<number>")}} он интерпретируется как Градусы, как указано в {{SpecName ("CSS3 Colors","#hsl-color")}}. По определению, red=0 deg=360 град, с другими цветами, распространёнными по кругу, поэтому green=120deg град, blue=240deg град и т. д. В качестве < угла > он неявно обёртывается таким образом, что -120deg=240deg, 480deg=120deg, -1turn=1turn, и т. д.
+
S (насыщенность) и L (лёгкость) являются процентами. 100% насыщенность полностью насыщена, в то время как 0% полностью ненасыщен (серый). 100% лёгкость белый, 0% лёгкость чёрный, и 50% лёгкость “нормально.”
+
A (alpha) can be a {{cssxref("<number>")}} between 0 and 1, or a {{cssxref("<percentage>")}}, where the number 1 corresponds to 100% (full opacity). A (Альфа) может быть {{cssxref("<number>")}} между 0 и 1 или {{cssxref("<percentage>")}}, где число 1 соответствует 100% (полная непрозрачность).
Функциональная нотация: hsl(H S L[ A]) or hsla(H S L A)
CSS Colors Level 4 добавляет поддержку разделённых пробелами значений в функциональной нотации.
@@ -1118,7 +1115,7 @@
Examples
HSL варианты синтаксиса
-
/* Все эти примеры указывают один и тот же цвет: лаванда. */
+
/* Все эти примеры указывают один и тот же цвет: лаванда. */
hsl(270,60%,70%)
hsl(270, 60%, 70%)
hsl(270 60% 70%)
@@ -1302,7 +1299,7 @@
На размер и позицию элемента часто влияет его содержащий блок (containing block). Чаще всего содержащим блоком является content область (content area) ближайшего блочного (block-level) предка, но это не всегда так. В этой статье мы рассмотрим факторы, которые определяют содержащий блок элемента.
+
На размер и позицию элемента часто влияет его содержащий блок (containing block). Чаще всего содержащим блоком является content область (content area) ближайшего блочного (block-level) предка, но это не всегда так. В этой статье мы рассмотрим факторы, которые определяют содержащий блок элемента.
-
Когда пользовательский агент (такой как ваш браузер) делает разметку документа, он создаёт бокс (box) для каждого элемента. Каждый бокс разделяется на следующие области:
+
Когда пользовательский агент (такой как ваш браузер) делает разметку документа, он создаёт бокс (box) для каждого элемента. Каждый бокс разделяется на следующие области:
-
+
Content область или область контента (content area).
Padding область или область внутреннего поля (padding area).
Border область или область границы (border area).
@@ -18,21 +18,21 @@
-
Многие разработчики верят, что содержащий блок элемента - это всегда content область его родителя, но это не всегда является правдой. Давайте исследуем факторы, которые определяют, что представляет собой содержащий элемент блок.
+
Многие разработчики верят, что содержащий блок элемента - это всегда content область его родителя, но это не всегда является правдой. Давайте исследуем факторы, которые определяют, что представляет собой содержащий элемент блок.
-
Эффекты содержащего блока
+
Эффекты содержащего блока
-
Перед изучением того, что определяет содержащий блок элемента, будет полезно сначала узнать, почему этот блок так важен.
+
Перед изучением того, что определяет содержащий блок элемента, будет полезно сначала узнать, почему этот блок так важен.
-
На размер и положение элемента часто влияет его содержащий блок.
+
На размер и положение элемента часто влияет его содержащий блок.
-
Значения заданные в процентах для свойств {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("padding")}}, {{cssxref("margin")}}, и свойства задающие смещение абсолютно позиционированного элемента (т.е., такого, у которого свойство {{cssxref("position")}} имеет значение absolute или fixed) рассчитываются исходя из его содержащего блока.
+
Значения заданные в процентах для свойств {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("padding")}}, {{cssxref("margin")}}, и свойства задающие смещение абсолютно позиционированного элемента (т.е., такого, у которого свойство {{cssxref("position")}} имеет значение absolute или fixed) рассчитываются исходя из его содержащего блока.
-
Определение содержащего блока
+
Определение содержащего блока
-
Определение содержащего блока элемента полностью зависит от значения свойства {{cssxref("position")}}:
+
Определение содержащего блока элемента полностью зависит от значения свойства {{cssxref("position")}}:
-
+
Если свойство position имеет значение static,relative, или sticky, то содержащий блок задаётся краем content бокса ближайшего предка, который:
@@ -48,7 +48,7 @@
Оп
Если свойство positionимеет значение absolute или fixed, то содержащий блок может также задаваться краем padding бокса ближайшего предка, у которого:
-
+
Свойство {{cssxref("transform")}} или {{cssxref("perspective")}} имеет значение отличное от none.
Свойство {{cssxref("will-change")}} имеет значение transform или perspective.
Свойство {{cssxref("filter")}} имеет значение отличное от none или will-change value of filter (работает только в Firefox).
@@ -58,37 +58,37 @@
Оп
-
Примечание: Содержащий блок в котором находится корневой элемент ({{HTMLElement("html")}}) представляет собой прямоугольник, который называется начальный содержащий блок. Он имеет размеры области просмотра (вьюпорт - viewport) для непрерывного медиа (continuous media) или области страницы (page area) для страничного медиа (paged media).
+
Примечание: Содержащий блок в котором находится корневой элемент ({{HTMLElement("html")}}) представляет собой прямоугольник, который называется начальный содержащий блок. Он имеет размеры области просмотра (вьюпорт - viewport) для непрерывного медиа (continuous media) или области страницы (page area) для страничного медиа (paged media).
-
Calculating percentage values from the containing block
+
Calculating percentage values from the containing block
-
As noted above, when certain properties are given a percentage value, the computed value depends on the element's containing block. The properties that work this way are box model properties and offset properties:
+
As noted above, when certain properties are given a percentage value, the computed value depends on the element's containing block. The properties that work this way are box model properties and offset properties:
-
+
The {{cssxref("height")}}, {{cssxref("top")}}, and {{cssxref("bottom")}} properties compute percentage values from the heightof the containing block.
The {{cssxref("width")}}, {{cssxref("left")}}, {{cssxref("right")}}, {{cssxref("padding")}}, and {{cssxref("margin")}} properties compute percentage values from the widthof the containing block.
-
Some examples
+
Some examples
-
The HTML code for all our examples is:
+
The HTML code for all our examples is:
-
<body>
+
<body>
<section>
<p>This is a paragraph!</p>
</section>
</body>
-
Only the CSS is altered in each instance below.
+
Only the CSS is altered in each instance below.
Example 1
In this example, the paragraph is statically positioned, so its containing block is {{HTMLElement("section")}} because it's the nearest ancestor that is a block container.
-
<body>
+
<body>
<section>
<p>This is a paragraph!</p>
</section>
@@ -96,7 +96,7 @@
Example 1
-
body {
+
body {
background: beige;
}
@@ -123,7 +123,7 @@
Example 2
In this example, the paragraph's containing block is the {{HTMLElement("body")}}element, because <section> is not a block container (because of display: inline) and doesn’t establish a formatting context.
-
<body>
+
<body>
<section>
<p>This is a paragraph!</p>
</section>
@@ -131,7 +131,7 @@
Example 2
-
body {
+
body {
background: beige;
}
@@ -154,7 +154,7 @@
Example 3
In this example, the paragraph's containing block is <section> because the latter's position is absolute. The paragraph's percentage values are affected by the padding of its containing block, though if the containing block's {{cssxref("box-sizing")}} value were border-box this would not be the case.
-
<body>
+
<body>
<section>
<p>This is a paragraph!</p>
</section>
@@ -162,7 +162,7 @@
Example 3
-
body {
+
body {
background: beige;
}
@@ -193,7 +193,7 @@
Example 4
In this example, the paragraph's position is fixed, so its containing block is the initial containing block (on screens, the viewport). Thus, the paragraph's dimensions change based on the size of the browser window.
-
<body>
+
<body>
<section>
<p>This is a paragraph!</p>
</section>
@@ -201,7 +201,7 @@
Example 4
-
body {
+
body {
background: beige;
}
@@ -230,7 +230,7 @@
Example 5
In this example, the paragraph's position is absolute, so its containing block is <section>, which is the nearest ancestor with a {{cssxref("transform")}} property that isn't none.
-
<body>
+
<body>
<section>
<p>This is a paragraph!</p>
</section>
@@ -238,7 +238,7 @@
Example 5
-
body {
+
body {
background: beige;
}
diff --git a/files/ru/web/css/content/index.html b/files/ru/web/css/content/index.html
index ed622ddd6b3b86..13ead2e4e32498 100644
--- a/files/ru/web/css/content/index.html
+++ b/files/ru/web/css/content/index.html
@@ -64,8 +64,7 @@
Значения
{{cssxref("<image>")}}
{{cssxref("<image>")}}, указанный типом данных {{cssxref("<url>")}} или {{cssxref("<gradient>")}}, или частью веб-страницы, определяемой функцией {{cssxref("element", "element()")}}, указывающей содержимое для обозначения.
{{cssxref("<counter>")}}
-
Значение CSS счётчика, как правило число. Его можно отобразить с помощью функций {{cssxref("counter()")}} или{{cssxref("counters()")}}.
-
+
Значение CSS счётчика, как правило число. Его можно отобразить с помощью функций {{cssxref("counter()")}} или{{cssxref("counters()")}}.
Функция counter() имеет две формы записи: 'counter(имя)' или 'counter(имя, стиль)'. Сгенерированный текст - это значение самого вложенного счётчика с заданным именем в области видимости данного элемента. Он отформатирован в указанном стиле (по умолчанию decimal).
Функция counters() также имеет две формы записи: 'counters(name, string)' или 'counters(name, string, style)'. Сгенерированный текст - это значение всех счётчиков с заданным именем в области видимости данного элемента, от крайнего к вложенному. разделённых указанной строкой. Счётчики отображаются в указанном стиле (по умолчанию decimal).
Внутренняя область элемента (content area) содержит текст и другие элементы, расположенные внутри (контент или содержимое). У неё часто бывает фон, цвет или изображение (в таком порядке: фоновый цвет скрывается под непрозрачным изображением), и она находится внутри content edge; её размеры называются ширина контента (content width или content-box width), и высота контента (content height или content-box height). Иногда ещё говорят «внутренняя ширина/высота элемента»
По умолчанию, если CSS-свойство {{ cssxref("box-sizing") }} не задано, размер внутренней области с содержимым задаётся свойствами {{ cssxref("width") }}, {{ cssxref("min-width") }}, {{ cssxref("max-width") }}, {{ cssxref("height") }}, {{ cssxref("min-height") }} и {{ cssxref("max-height") }}. Если же свойство {{ cssxref("box-sizing") }} задано, то оно определяет, для какой области указаны размеры.
Поля элемента (padding area) — это пустая область, окружающая контент. Она может быть залита каким-то цветом, покрыта фоновый картинкой, а её границы называются края полей (padding edge).
Размеры полей задаются по отдельности с разных сторон свойствами {{ cssxref("padding-top") }}, {{ cssxref("padding-right") }}, {{ cssxref("padding-bottom") }}, {{ cssxref("padding-left") }} или общим свойством {{ cssxref("padding") }}.
Область рамки (border area) окружает поля элемента, а её граница называется края рамки (border edge). Ширина рамки задаётся отдельным свойством {{ cssxref("border-width") }} или в составе свойства {{ cssxref("border") }}. Размеры элемента с учётом полей и рамки иногда называют внешней шириной/высотой элемента.
Отступы (margin area) добавляют пустое пространство вокруг элемента и определяют расстояние до соседних элементов.
Величина отступов задаётся по отдельности в разных направлениях свойствами {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }}, {{ cssxref("margin-left") }} или общим свойством {{ cssxref("margin") }}.
Дизайнеры часто предпочитают использовать цветовую модель {{interwiki("wikipedia", "HSL and HSV", "HSL")}}, где H - Hue (оттенок), S - Saturation (насыщенность), L - Lightness or Luminance (светлота). В браузерах HSL цвет представлен через запись HSL в виде функции. CSS функция hsl() очень похожа на rgb() функцию.
-
-
-
+
+
Рис. 1. Цилиндрическая модель HSL. Hue (оттенок) определяет фактический цвет, основанный на положении вдоль цветового круга, представляя цвета видимого спектра. Saturation (насыщенность) представляет собой процентное соотношение оттенка от серого до максимально насыщенного цвета. По мере увеличения значения luminance/ lightness (светлоты) цвет переходит от самого тёмного к самому светлому (от чёрного к белому). Изображение представлено пользователем SharkD в Wikipedia, распространяется на правах лицензии CC BY-SA 3.0 .
-
-
-
Значение компонента оттенок (H) цветовой модели HSL определяется углом при движении вдоль окружности цилиндра от красного через жёлтый, зелёный, голубой, синий и маджента, и заканчивая через 360° снова красным. Данное значение определяет базовый цвет. Его можно задать в любых единицах, поддерживаемых CSS-свойством {{cssxref("<angle>")}}, а именно - в градусах (deg), радианах (rad), градиентах (grad) или поворотах (turn). Но компонент оттенок никак не влияет на то, насколько насыщенным, ярким или темным будет цвет.
-
-
\ No newline at end of file
diff --git a/files/ru/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html b/files/ru/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html
index ce93888a07aaac..1972e9d2ce9a39 100644
--- a/files/ru/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html
+++ b/files/ru/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html
@@ -643,61 +643,3 @@
Alignment and Writing Modes
CSS Grid Layout и спецификация Box Alignment предназначены для работы с режимами записи в CSS. Это означает, что если вы работаете с языком справа налево, например на арабском языке, начало сетки будет верхним и правым, поэтому значение по умолчанию для justify-content: start будет состоять в том, что треки сетки начинаются с правой стороны сетки.
Однако, если вы устанавливаете автоматические поля, используя margin-right или margin-left, или абсолютно позиционирующий элемент, используя top, right, bottom and left смещения, вы не будете соблюдать режимы записи. В следующем руководстве мы рассмотрим это взаимодействие между компоновкой сетки CSS, выравниванием ящиков и режимами записи. Это будет важно понимать, если вы разрабатываете сайты, которые затем отображаются на нескольких языках, или если вы хотите смешивать языки или режимы записи в дизайне.
Наши новые методы компоновки дают нам возможность использовать эти логические значения для размещения элементов, однако, как только мы начнём объединять их с физическими свойствами, используемыми для полей и отступов, нам нужно помнить, что эти физические свойства не изменятся в соответствии с режимом записи.
Спецификация логических свойств CSS имеет целью изменить это и в будущем мы сможем использовать логические эквиваленты для свойств, такие как {{cssxref ("margin-left")}} и {{cssxref ("margin-right") }}, в нашем CSS. Firefox уже реализовал их, поэтому вы можете попробовать их прямо сейчас в Firefox. Я знаю в будущем, как только эти корабли повсюду, ваши знания «Блокировать и встроить» с помощью Grid означают, что вы точно знаете, как их использовать.
Мы снова рассмотрим другие функции, предлагаемые этом сокращением позже в этих руководствах, когда мы рассмотрим автоматическое размещение и свойство grid-auto-flow.
Если вы проработали эти начальные руководства, теперь вы должны иметь возможность создавать сетки с использованием линейного размещения или названных областей. Потратьте некоторое время на создание некоторых общих шаблонов макетов с использованием сетки, в то время как есть много новых терминов для изучения, синтаксис относительно прост. По мере того, как вы разрабатываете примеры, вы, вероятно, придумаете некоторые вопросы и воспользуетесь случаями, которые мы ещё не рассмотрели. В остальных этих руководствах мы рассмотрим некоторые детали, включённые в спецификацию, - чтобы вы могли начать создавать с ним расширенные макеты.
\ No newline at end of file
diff --git a/files/ru/web/css/css_grid_layout/layout_using_named_grid_lines/index.html b/files/ru/web/css/css_grid_layout/layout_using_named_grid_lines/index.html
index 123512750584f6..6eeb78a848d9db 100644
--- a/files/ru/web/css/css_grid_layout/layout_using_named_grid_lines/index.html
+++ b/files/ru/web/css/css_grid_layout/layout_using_named_grid_lines/index.html
@@ -279,8 +279,6 @@
-
<div class="wrapper">
<div class="item1">I am placed from col-start line 1 to col-start 5</div>
<div class="item2">I am placed from col-start line 7 spanning 3 lines</div>
@@ -433,61 +431,3 @@
Чтобы лучше освоиться с размещением элементов по грид-линиям, попробуйте собрать несколько распространённых макетов, располагая элементы на гридах с различным количеством колонок. Помните, что если вы не размещаете все ваши элементы, оставшиеся располагаются в соответствии с правилами авторазмещения. В результате может получиться как раз тот макет, который вам нужен, но не факт, и если что-то пошло не так, проверьте, определили ли вы позицию для проблемного элемента.
Также помните, что элементы на гриде могут перекрывать друг друга, если вы намеренно разместили их так, чтобы они друг друга перекрывали. Подобное поведение позволяет получить интересные эффекты, но, если вы некорректно задали начальные и конечные линии, результат может неприятно вас удивить. Firefox Grid Highlighter будет крайне полезен в процессе обучения, особенно, когда вы строите сложные гриды.
Чтобы завершить набор руководств по CSS Grid Layout, я собираюсь пройтись по основным видам макетов, которые демонстрируют несколько различных методов, которые можно использовать при проектировании с помощью grid layout. Мы рассмотрим пример использования областей сетки-шаблона, типичную гибкую сеточную систему с 12 столбцами, а также список продуктов с использованием автоматического размещения. Как вы можете видеть из этого списка примеров, существует несколько способов достижения желаемого результата с помощью компоновки сетки. Выберите метод, который вы считаете наиболее полезным для решения проблем, которые вы решаете, и проектов, которые вам нужно реализовать.
-
Адаптивный 1-3 колоночный макет с использованием grid-template-areas
+
Адаптивный 1-3 колоночный макет с использованием grid-template-areas
Многие веб-сайты являются разновидностью такого типа макета, с основным содержанием, боковыми панелями, хедером и футером. В адаптивном дизайне вы можете отобразить макет в виде одного столбца, добавив боковую панель в определённом месте, а затем ввести макет из трёх столбцов для более широких экранов.
@@ -142,7 +142,7 @@
Гибкий 12-колоночный макет.
+
Гибкий 12-колоночный макет.
Если вы работали с фреймворками или grid системами, вам знакомо размещение сайта на гибкой сетке с 12 или 16 столбцами. Мы можем создать такой макет, используя CSS Grid Layout. В качестве простого примера я создаю гибкую сетку из 12 столбцов, которая имеет 12 линий столбцов размером 12 1fr-все они имеют начальную линию с именем col-start. Это означает, что у нас будет двенадцать линий сетки с именем col-start.
@@ -209,7 +209,7 @@
Построение макета с использованием 12-столбцовой системы
+
Построение макета с использованием 12-столбцовой системы
Чтобы увидеть, как этот метод макета работает на практике, мы можем создать тот же самый макет, который мы создали с {{cssxref("grid-template-areas")}}, на этот раз используя сеточную систему из 12 столбцов. Я начинаю с той же разметки, которая используется для примера областей шаблона сетки.
@@ -533,61 +533,3 @@
Дальнейшие ис
For inspiration see the Layout Labs from Jen Simmons, she has been creating layouts based on a range of sources.
For additional common layout patterns see Grid by Example, where there are many smaller examples of grid layout and also some larger UI patterns and full page layouts.
UPD: На 04.02.2018 главная проблема с display:contents в том, что "редкий браузер долетел до середины Днепра", поддержка у свойства - отсутствует. Следите за обновлениями https://caniuse.com/#feat=css-display-contents
Как вы могли увидеть, CSS Grid Layout - это часть вашего инструментария. Не бойтесь смешивать его с другими методами создания макетов, чтобы получить различные эффекты. И не переключайтесь, дальше будет много интересного.
Определяет функцию, указывающую, как вычисляются промежуточные значения свойств. Вы также можете выбрать ослабления от функции замедления Шпаргалка.Большинство функций времени может быть определено графиком соответствующей функции, образующей четырьмя точками кривую Безье. Также можете выбрать функцию отсюда Easing Functions Cheat Sheet.
-
Applies a hue rotation on the input image. The value of ‘angle’ defines the number of degrees around the color circle the input samples will be adjusted. A value of 0deg leaves the input unchanged. If the ‘angle’ parameter is missing, a value of 0deg is used. Though there is no maximum value, the effect of values above 360deg wraps around.
+
Applies a hue rotation on the input image. The value of ‘angle’ defines the number of degrees around the color circle the input samples will be adjusted. A value of 0deg leaves the input unchanged. If the ‘angle’ parameter is missing, a value of 0deg is used. Though there is no maximum value, the effect of values above 360deg wraps around.
filter: hue-rotate(90deg)
@@ -682,7 +682,7 @@
hue-rotate() [изм
invert() [инвертирование]
-
Inverts the samples in the input image. The value of ‘amount’ defines the proportion of the conversion. A value of 100% is completely inverted. A value of 0% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. If the ‘amount’ parameter is missing, a value of 0 is used.
+
Inverts the samples in the input image. The value of ‘amount’ defines the proportion of the conversion. A value of 100% is completely inverted. A value of 0% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. If the ‘amount’ parameter is missing, a value of 0 is used.
filter: invert(100%)
@@ -766,7 +766,7 @@
invert() [инвертиро
opacity() [непрозрачность]
-
Applies transparency to the samples in the input image. The value of ‘amount’ defines the proportion of the conversion. A value of 0% is completely transparent. A value of 100% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. This is equivalent to multiplying the input image samples by amount. If the ‘amount’ parameter is missing, a value of 1 is used. This function is similar to the more established {{Cssxref("opacity")}} property; the difference is that with filters, some browsers provide hardware acceleration for better performance.
+
Applies transparency to the samples in the input image. The value of ‘amount’ defines the proportion of the conversion. A value of 0% is completely transparent. A value of 100% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. This is equivalent to multiplying the input image samples by amount. If the ‘amount’ parameter is missing, a value of 1 is used. This function is similar to the more established {{Cssxref("opacity")}} property; the difference is that with filters, some browsers provide hardware acceleration for better performance.
filter: opacity(50%)
@@ -848,7 +848,7 @@
opacity() [непрозра
saturate() [насыщенность]
-
Saturates the input image. The value of ‘amount’ defines the proportion of the conversion. A value of 0% is completely un-saturated. A value of 100% leaves the input unchanged. Other values are linear multipliers on the effect. Values of amount over 100% are allowed, providing super-saturated results. If the ‘amount’ parameter is missing, a value of 1 is used.
+
Saturates the input image. The value of ‘amount’ defines the proportion of the conversion. A value of 0% is completely un-saturated. A value of 100% leaves the input unchanged. Other values are linear multipliers on the effect. Values of amount over 100% are allowed, providing super-saturated results. If the ‘amount’ parameter is missing, a value of 1 is used.
filter: saturate(200%)
@@ -929,7 +929,7 @@
saturate() [насыщенно
sepia() [сепия]
-
Converts the input image to sepia. The value of ‘amount’ defines the proportion of the conversion. A value of 100% is completely sepia. A value of 0% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. If the ‘amount’ parameter is missing, a value of 0 is used.
+
Converts the input image to sepia. The value of ‘amount’ defines the proportion of the conversion. A value of 100% is completely sepia. A value of 0% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. If the ‘amount’ parameter is missing, a value of 0 is used.
An absolute {{cssxref("<length>")}}, a {{cssxref("<percentage>")}} родительского flex контейнера главное size свойство, или ключевое слово auto. Негативные значения не допустимы.
Автоматический задаёт размер на основе содержимого элемента flex.
-
+
content
+
Автоматический задаёт размер на основе содержимого элемента flex.
Примечание: Это значение отсутствовало в первоначальном релизе Flexible Box Layout, и, следовательно, некоторые предыдущие релизы не будут поддерживать его. Аналогичный эффект можно получить, используя auto вместе с основным размером (width или height) auto.
element {
/* Main-axis is the block direction with reversed main-start and main-end. Flex items are laid out in multiple lines */
flex-flow: column-reverse wrap;
}
diff --git a/files/ru/web/css/flex-grow/index.html b/files/ru/web/css/flex-grow/index.html
index 8f5b469857e8a3..7eb120f1a8eddf 100644
--- a/files/ru/web/css/flex-grow/index.html
+++ b/files/ru/web/css/flex-grow/index.html
@@ -18,10 +18,6 @@
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
-
-
Синтаксис
/* Значения типа <number>*/
diff --git a/files/ru/web/css/flex-wrap/index.html b/files/ru/web/css/flex-wrap/index.html
index d1d310f45c7f7b..3c16fb023e034f 100644
--- a/files/ru/web/css/flex-wrap/index.html
+++ b/files/ru/web/css/flex-wrap/index.html
@@ -36,11 +36,10 @@
Значения
Расположение в несколько линий. Свойство cross-start эквивалентно start или before в зависимости от значения flex-direction и свойство cross-end противоположно cross-start.
wrap-reverse
Ведёт себя так же, как и wrap но cross-start и cross-end инвертированы.
Определяет {{cssxref("flex-basis")}} для флекс элемента. Любое корректное значение для высоты(height) и ширины(width) - корректно и для данного свойства. Предпочтительный размер 0 должен иметь единицу измерения, чтобы не восприниматься как гибкий. Значение по умолчанию 0%, если не указано.
none
Размер элемента устанавливается в соответствии с его свойствами width и height. Он полностью негибкий: не сжимается и не увеличивается по отношению к гибкому контейнеру. Эквивалентно значению "flex: 0 0 auto".
Тип данных <flex> определяется как {{cssxref("<number>")}} с единицей измерения fr. Единица измерения fr представляет собой долю оставшегося в сетке пространства. Как и все CSS размеры, между числом и единицей измерения нет пробела.
+
Тип данных <flex> определяется как {{cssxref("<number>")}} с единицей измерения fr. Единица измерения fr представляет собой долю оставшегося в сетке пространства. Как и все CSS размеры, между числом и единицей измерения нет пробела.
Имя семейства шрифтов. К примеру, "Times" и "Helvetica" это семейства шрифтов. Названия семейства шрифтов, которые содержат пробелы, должны быть взяты в кавычки.
Общие семейства шрифтов используются как резервный механизм для сохранения некоторого авторского стиля в момент, когда ни один из желаемых шрифтов недоступен. Общие семейства шрифтов являются ключевыми словами и не должны браться в кавычки. Общее семейство шрифтов должно определяться последним в списке семейств шрифтов. Определены следующие ключевые слова:
Эти значения управляют определёнными лигатурами, специфичными для шрифта и определяемыми дизайнером шрифта.Они соответствуют значениям OpenType hlig. Доступны два значения:
+
Эти значения управляют определёнными лигатурами, специфичными для шрифта и определяемыми дизайнером шрифта. Они соответствуют значениям OpenType hlig. Доступны два значения:
discretionary-ligatures активирует данные лигатуры.
no-discretionary-ligatures деактивирует лигатуры. Обратите внимание, обычно, ключевое слово normal также деактивирует лигатуры.
<historical-lig-values>
-
(ß) Эти значения контролируют лигатуры, которые исторически использовались в старых книгах, например, немецкийtz ("tz диаграф", прим. перев.). Они соответствуют значениям OpenType hlig. Доступны два значения:
+
(ß) Эти значения контролируют лигатуры, которые исторически использовались в старых книгах, например, немецкий tz ("tz диаграф", прим. перев.). Они соответствуют значениям OpenType hlig. Доступны два значения:
historical-ligatures активирует данные лигатуры.
no-historical-ligatures деактивирует лигатуры. Обратите внимание, обычно, ключевое слово normal также деактивирует лигатуры.
font-variant-numeric: normal
font-variant-numeric: ordinal
diff --git a/files/ru/web/css/gap/index.html b/files/ru/web/css/gap/index.html
index bd5efcddb5777f..2600bc767cd199 100644
--- a/files/ru/web/css/gap/index.html
+++ b/files/ru/web/css/gap/index.html
@@ -7,8 +7,6 @@
The gapCSS property sets the gaps ({{glossary("gutters")}}) between rows and columns. It is a shorthand for {{CSSxRef("row-gap")}} and {{CSSxRef("column-gap")}}.
-
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Ключевое слово, указывающее размещать элементы, заполняя поочерёдно каждый столбец и добавляя новые столбцы по мере необходимости.
dense
-
Ключевое слово, указывающее заполнять элементами свободное пространство сетки. Это может привести к нарушению порядка, т.к. элементы будут выстраиваться не в соответствии со своим расположением, а в соответствии с размером.
-
- Если свойство не используется, алгоритм разместит элементы строго по порядку, вне зависимости от наличия свободных ячеек.
+
Ключевое слово, указывающее заполнять элементами свободное пространство сетки. Это может привести к нарушению порядка, т.к. элементы будут выстраиваться не в соответствии со своим расположением, а в соответствии с размером.
+
Если свойство не используется, алгоритм разместит элементы строго по порядку, вне зависимости от наличия свободных ячеек.
Ключевое слово, указывающее, что свойство никак не влияет на размещение элемента сетки, обозначающее автоматическое размещение, автоматический диапазон или диапазон по умолчанию, равный 1.
<custom-ident>
-
Если есть именованная строка с именем '<custom-ident>-start', он вносит первую такую строку в размещение элемента сетки.
-
+
Если есть именованная строка с именем '<custom-ident>-start', он вносит первую такую строку в размещение элемента сетки.
Note: Named grid areas automatically generate implicit named lines of this form, so specifying grid-row-start: foo; will choose the start edge of that named grid area (unless another line named foo-start was explicitly specified before it).
В противном случае это обрабатывается так, как если бы целое число 1 было указано вместе с <custom-ident>.
<integer> && <custom-ident>?
-
Вносит n-ю линию сетки в размещение элемента сетки. Если задано отрицательное целое число, вместо этого начинается обратный отсчёт, начиная с конечного края явной сетки. Если имя задано как <custom-ident>, подсчитываются только строки с этим именем. Если существует недостаточно строк с таким именем, предполагается, что все неявные линии сетки имеют это имя для нахождения этой позиции.
-
+
Вносит n-ю линию сетки в размещение элемента сетки. Если задано отрицательное целое число, вместо этого начинается обратный отсчёт, начиная с конечного края явной сетки. Если имя задано как <custom-ident>, подсчитываются только строки с этим именем. Если существует недостаточно строк с таким именем, предполагается, что все неявные линии сетки имеют это имя для нахождения этой позиции.
Определяет {{cssxref("grid-template")}} (шаблон сетки) включая {{cssxref("grid-template-columns")}} (столбцы), {{cssxref("grid-template-rows")}} (ряды) и {{cssxref("grid-template-areas")}} (области).
Устанавливает auto-flow явно задавая размещение по рядам с помощью свойства {{cssxref("grid-template-rows")}} (и устанавливая свойство {{cssxref("grid-template-columns")}} в значение none) и уточняет, как должно работать авто-повторение столбцов при помощи свойства {{cssxref("grid-auto-columns")}} (и устанавливая {{cssxref("grid-auto-rows")}} в значение auto). Свойство {{cssxref("grid-auto-flow")}} может быть так же установлено для столбцов со свойством dense если оно определено.
-
+
Устанавливает auto-flow явно задавая размещение по рядам с помощью свойства {{cssxref("grid-template-rows")}} (и устанавливая свойство {{cssxref("grid-template-columns")}} в значение none) и уточняет, как должно работать авто-повторение столбцов при помощи свойства {{cssxref("grid-auto-columns")}} (и устанавливая {{cssxref("grid-auto-rows")}} в значение auto). Свойство {{cssxref("grid-auto-flow")}} может быть так же установлено для столбцов со свойством dense если оно определено.
Все остальные подсвойства grid сбрасываются в их начальные значения .
Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и отправьте нам пулреквест.
-
-
Атрибуты {{cssxref("min-height")}} и {{cssxref("max-height")}} при добавлении меняют значение {{Cssxref("height")}}.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
-
Правила расстановки переносов зависят от языка. В HTML язык определяется атрибутом lang, и браузеры применяют правила переноса только при присутствии данного атрибута и доступности соответствующего словаря для расстановки переносов. В XML необходимо использовать атрибут xml:lang.
Примечание: Правила, определяющие, как выполняется расстановка переносов, явно не определены в спецификации, поэтому точная расстановка переносов может варьироваться от браузера к браузеру.
Cascading Style Sheets (CSS) — это язык иерархических правил (таблиц стилей), используемый для представления внешнего вида документа, написанного на HTML или XML (включая различные языки XML, такие как SVG и XHTML). CSS описывает, каким образом элемент должен отображаться на экране, на бумаге, голосом или с использованием других медиа средств.
+
Cascading Style Sheets (CSS) — это язык иерархических правил (таблиц стилей), используемый для представления внешнего вида документа, написанного на HTML или XML (включая различные языки XML, такие как SVG и XHTML). CSS описывает, каким образом элемент должен отображаться на экране, на бумаге, голосом или с использованием других медиа средств.
CSS является одним из основных языков свободной веб-разработки, который стандартизован спецификацией W3C. Стандарт CSS делится на уровни: CSS1 в настоящее время устарел, CSS2.1 — рекомендован для применения, а CSS3, разбитый на более мелкие модули, развивается на пути стандартизации.
-
-
-
Справочник по CSS
+
+
Справочник по CSS
Исчерпывающий справочник для опытных веб-разработчиков, описывающий каждое свойство и понятие CSS.
-
Самоучитель по CSS
+
Самоучитель по CSS
Пошаговое руководство для помощи начинающим программистам CSS. Содержит все необходимые основы.
-
Примеры CSS3
+
Примеры CSS3
Набор примеров представляющий новейшие технологии CSS в действии: толчок к креативности.
Статьи, которые помогут вам узнать все: начиная от основ организации стилей в HTML, заканчивая различными методами языка CSS, чтобы сделать свой контент сияющим.
Расширение Firebug для Firefox, популярное расширение для этого браузера, которое также позволяет редактировать "на лету" CSS код при просмотре сайтов. Помогает легко тестировать работу кода при внесении различных изменений. Помимо этого, расширение имеет другие полезные функции.
+
Расширение Firebug для Firefox, популярное расширение для этого браузера, которое также позволяет редактировать "на лету" CSS код при просмотре сайтов. Помогает легко тестировать работу кода при внесении различных изменений. Помимо этого, расширение имеет другие полезные функции.
Расширение Web Developer для Firefox позволяет отслеживать и изменять "на лету" CSS код на просматриваемых сайтах. Проще чем Firebug, но обладает меньшей функциональностью.
Атрибут CSSjustify-items определяет атрибут по умолчанию {{CSSxRef ("justify-self")}} для всех элементов блока, предоставляя всем им способ выравнивания по умолчанию каждого блока вдоль соответствующей оси.
Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, создайте копию https://github.com/mdn/interactive-examples и отправьте нам запрос на включение изменений.
-
Эффект этого атрибута зависит от выбранного способа разметки:
@@ -110,8 +107,8 @@
Значения
baseline
first baseline last baseline
-
Определяет участие значений first baseline или last baseline в исходном выравнивании. Значение baseline выравнивает первый или последний блок набора в соответствии с исходным выравниванием в общем первом или последнем наборе всех блоков в его совместной группе исходного выравнивания.
-
Возвратным выравниванием для first baseline является значение start, для last baseline является значение end.
+
Определяет участие значений first baseline или last baseline в исходном выравнивании. Значение baseline выравнивает первый или последний блок набора в соответствии с исходным выравниванием в общем первом или последнем наборе всех блоков в его совместной группе исходного выравнивания.
+
Возвратным выравниванием для first baseline является значение start, для last baseline является значение end.
stretch
Если объединённый размер элементов меньше, чем размер контейнера выравнивания, то размер любого элемента со значением auto увеличивается одинаково (не пропорционально), но при этом соблюдаются ограничения, налагаемые {{CSSxRef("max-height")}}/{{CSSxRef("max-width")}} (или эквивалентной функциональностью), таким образом, что объединённый размер точно заполняет контейнер выравнивания.
Исходники для интерактивных примеров находятся в репозитории на GitHub. Если вы желаете поучаствовать в их улучшении, пожалуйста склонируйте https://github.com/mdn/interactive-examples и отправьте нам pull-реквест.
-
Синтаксис
/* Значения - ключевые слова */
diff --git a/files/ru/web/css/line-height/index.html b/files/ru/web/css/line-height/index.html
index ed1a8fd5ee1fcf..d3b2d75ef280ef 100644
--- a/files/ru/web/css/line-height/index.html
+++ b/files/ru/web/css/line-height/index.html
@@ -50,13 +50,13 @@
Зависит от пользовательского браузера. Компьютерные браузеры (включая Firefox) используют значение по умолчанию приблизительно 1.2, в зависимости от элементов font-family.
Значением line-height будет результат умножения указанного числа (без именования) на размер шрифта элементов. Указанное число, по сути, множитель. В большинстве случаев это предпочтительный способ указания значения line-height, потому что позволяет избежать непредвиденных результатов при наследовании.
Указанная {{cssxref("<величина>")}} используется при вычислении высоты блока строки. Значение, заданное в единицах em может привести к непредвидимым результатам (смотри пример ниже).
Relative to the font size of the element itself. The computed value is this {{cssxref("<percentage>")}} multiplied by the element's computed font size. Percentage values may produce unexpected results (see the second example below).
Relative to the font size of the element itself. The computed value is this {{cssxref("<percentage>")}} multiplied by the element's computed font size. Percentage values may produce unexpected results (see the second example below).
Исходник этого интерактивного примера хранится на репозитории GitHub.Если вы хотите внести свой вклад в проект интерактивных примеров, перейдите по ссылке https://github.com/mdn/interactive-examples и отправьте нам запрос на добавление.
-
Это свойство не имеет воздействия на незамещаемые элементы, такие как {{HTMLElement("span")}} или {{HTMLElement("code")}}.
Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и отправьте нам пулреквест.
В редких случаях, когда ширина (т.е., когда все значения width, margin-left, border, padding, область содержимого, и margin-right определены), margin-left игнорируется, и будет иметь такое же расчётное значение, как и auto .
Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и отправьте нам пулреквест.
Исходники для этого интерактивного примера хранятся в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, скопируйте https://github.com/mdn/interactive-examples и отправьте нам соответствующий запрос.
-
Это свойство не имеет эффекта на незамещаемых (non-replaced) строковых (inline) элементах, таких как {{HTMLElement("span")}} или {{HTMLElement("code")}}.
Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и отправьте нам пулреквест.
Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и отправьте нам пулреквест.
Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и отправьте нам пулреквест.
-
Высота элемента принимает значение min-height всякий раз, когда min-height больше чем {{ Cssxref("max-height") }} или {{Cssxref("height")}}.
Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и отправьте нам пулреквест.
-
Ширина элемента принимает значение min-width когда min-width больше чем {{ Cssxref("max-width") }} или {{Cssxref("width")}}.
Исходный код этого интерактивного примера хранится в GitHub репозитории. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и пришлите нам pull request.
-
Синтаксис
/* Числовые значения, в том числе отрицательные */
diff --git a/files/ru/web/css/overflow-block/index.html b/files/ru/web/css/overflow-block/index.html
index a5ad630f09420c..86d4b37479d371 100644
--- a/files/ru/web/css/overflow-block/index.html
+++ b/files/ru/web/css/overflow-block/index.html
@@ -95,9 +95,7 @@
Исходники для интерактивных примеров хранятся в GitHub репозитории. Если вы хотите поучаствовать в проекте с примерами, пожалуйста, склонируйте https://github.com/mdn/interactive-examples и пришлите нам пул реквест.
-
Note: В отличие от {{cssxref("word-break")}}, overflow-wrap создаёт перенос только, если целое слово не может быть размещено на своей линии без переполнения
Исходный код этого интерактивного примера хранится в GitHub репозитории. Если вы хотите внести свой вклад в проект интерактивных примеров, скопируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.
-
Типы позиционирования
@@ -41,17 +39,17 @@
Значения
static
Это значение позволяет элементу находиться в обычном его состоянии, расположенном на своём месте в документе. Свойства top, right, bottom, left и z-indexне применяются к данному элементу. Это значение по умолчанию.
relative
-
Элемент позиционируется в соответствии с нормальным потоком документа, а затем смещается относительно себя на основе значений top, right, bottom и left. Смещение не влияет на положение любых других элементов; таким образом, пространство, заданное для элемента в макете страницы, такое же, как если бы позиция была static.
-
Это значение создаёт новый {{cssxref('CSS_Positioning/Understanding_z_index/The_stacking_context','контекст наложения')}}, когда значение z-index не auto. Его влияние на элементы table-*-group, table-row, table-column, table-cell и table-caption не определено.
+
Элемент позиционируется в соответствии с нормальным потоком документа, а затем смещается относительно себя на основе значений top, right, bottom и left. Смещение не влияет на положение любых других элементов; таким образом, пространство, заданное для элемента в макете страницы, такое же, как если бы позиция была static.
+
Это значение создаёт новый {{cssxref('CSS_Positioning/Understanding_z_index/The_stacking_context','контекст наложения')}}, когда значение z-index не auto. Его влияние на элементы table-*-group, table-row, table-column, table-cell и table-caption не определено.
absolute
-
Элемент удаляется из обычного потока документов, и для элемента в макете страницы не создаётся пробела. Он расположен относительно его ближайшего относительно позиционированного предка, если таковой имеется; в противном случае он помещается относительно исходного {{cssxref('Containing_Block', 'содержащего блока')}}. Его конечная позиция определяется значениями top, right, bottom, и left.
-
Это значение создаёт новый {{cssxref('CSS_Positioning/Understanding_z_index/The_stacking_context', 'контекст наложения')}}, когда значение z-index не auto. Поля абсолютно позиционированных коробок не {{cssxref('CSS_Box_Model/Mastering_margin_collapsing', 'сворачиваются')}} с другими полями.
+
Элемент удаляется из обычного потока документов, и для элемента в макете страницы не создаётся пробела. Он расположен относительно его ближайшего относительно позиционированного предка, если таковой имеется; в противном случае он помещается относительно исходного {{cssxref('Containing_Block', 'содержащего блока')}}. Его конечная позиция определяется значениями top, right, bottom, и left.
+
Это значение создаёт новый {{cssxref('CSS_Positioning/Understanding_z_index/The_stacking_context', 'контекст наложения')}}, когда значение z-index не auto. Поля абсолютно позиционированных коробок не {{cssxref('CSS_Box_Model/Mastering_margin_collapsing', 'сворачиваются')}} с другими полями.
fixed
-
Элемент выбивается из обычного потока документа, и для элемента в макете страницы не создаётся пространство. Он позиционируется относительно исходного {{cssxref('Containing_Block', 'содержащего блока')}}, установленного {{glossary("viewport")}}, за исключением случаев, когда один из его предков имеет свойство transform, perspective, или filter, установленное на что-то иное, кроме none (см. CSS Transforms Spec), и в этом случае этот предок ведёт себя как содержащий блок. (Обратите внимание, что существуют несогласованности браузера с perspective и filter, способствующими содержанию формирования блоков.) Его конечная позиция определяется значениями top, right, bottom и left.
-
Это значение всегда создаёт новый {{cssxref('CSS_Positioning/Understanding_z_index/The_stacking_context', 'контекст наложения')}}. В печатных документах элемент помещается в одно и то же положение на каждой странице.
+
Элемент выбивается из обычного потока документа, и для элемента в макете страницы не создаётся пространство. Он позиционируется относительно исходного {{cssxref('Containing_Block', 'содержащего блока')}}, установленного {{glossary("viewport")}}, за исключением случаев, когда один из его предков имеет свойство transform, perspective, или filter, установленное на что-то иное, кроме none (см. CSS Transforms Spec), и в этом случае этот предок ведёт себя как содержащий блок. (Обратите внимание, что существуют несогласованности браузера с perspective и filter, способствующими содержанию формирования блоков.) Его конечная позиция определяется значениями top, right, bottom и left.
+
Это значение всегда создаёт новый {{cssxref('CSS_Positioning/Understanding_z_index/The_stacking_context', 'контекст наложения')}}. В печатных документах элемент помещается в одно и то же положение на каждой странице.
sticky
-
Элемент позиционируется в соответствии с нормальным потоком документа, а затем смещается относительно его ближайшего прокручивающего предка и {{cssxref('Containing_Block', 'содержащего блока')}} (ближайший родительский уровень блока), включая элементы, связанные с таблицей, на основе значений top, right, bottom, и left. Смещение не влияет на положение любых других элементов.
-
Это значение всегда создаёт новый {{cssxref('CSS_Positioning/Understanding_z_index/The_stacking_context', 'контекст наложения')}}. Обратите внимание, что липкий элемент «прилипает» к его ближайшему предшественнику, имеющему «механизм прокрутки» (созданный при overflow равном hidden, scroll, auto или overlay), даже если тот не является ближайшим фактически прокручивающим предком. Это эффективно препятствует любому «липкому» поведению (см. Github issue on W3C CSSWG).
+
Элемент позиционируется в соответствии с нормальным потоком документа, а затем смещается относительно его ближайшего прокручивающего предка и {{cssxref('Containing_Block', 'содержащего блока')}} (ближайший родительский уровень блока), включая элементы, связанные с таблицей, на основе значений top, right, bottom, и left. Смещение не влияет на положение любых других элементов.
+
Это значение всегда создаёт новый {{cssxref('CSS_Positioning/Understanding_z_index/The_stacking_context', 'контекст наложения')}}. Обратите внимание, что липкий элемент «прилипает» к его ближайшему предшественнику, имеющему «механизм прокрутки» (созданный при overflow равном hidden, scroll, auto или overlay), даже если тот не является ближайшим фактически прокручивающим предком. Это эффективно препятствует любому «липкому» поведению (см. Github issue on W3C CSSWG).
Исходный код этого интерактивного примера хранится в GitHub репозитории. Если вы хотите внести свой вклад в проект интерактивных примеров, скопируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.
-
Эффект свойства right зависит от того, как позиционируется элемент (то есть от значения свойства {{cssxref("position")}}):
Специфичность - это способ, с помощью которого браузеры определяют, какие значения свойств CSS наиболее соответствуют элементу и, следовательно, будут применены. Специфичность основана на правилах соответствия, состоящих из селекторов CSS различных типов.
+
Специфичность - это способ, с помощью которого браузеры определяют, какие значения свойств CSS наиболее соответствуют элементу и, следовательно, будут применены. Специфичность основана на правилах соответствия, состоящих из селекторов CSS различных типов.
-
Как вычисляется специфичность?
+
Как вычисляется специфичность?
-
Специфичность представляет собой вес, придаваемый конкретному правилу CSS. Вес правила определяется количеством каждого из типов селекторов в данном правиле. Если у нескольких правил специфичность одинакова, то к элементу применяется последнее по порядку правило CSS. Специфичность имеет значение только в том случае, если один элемент соответствует нескольким правилам. Согласно спецификации CSS, правило для непосредственно соответствующего элемента всегда будет иметь больший приоритет, чем правила, унаследованные от предка.
+
Специфичность представляет собой вес, придаваемый конкретному правилу CSS. Вес правила определяется количеством каждого из типов селекторов в данном правиле. Если у нескольких правил специфичность одинакова, то к элементу применяется последнее по порядку правило CSS. Специфичность имеет значение только в том случае, если один элемент соответствует нескольким правилам. Согласно спецификации CSS, правило для непосредственно соответствующего элемента всегда будет иметь больший приоритет, чем правила, унаследованные от предка.
Примечание: Взаимное расположение элементов в дереве документа не влияет на специфичность.
Типы селекторов
В следующем списке типы селекторов расположены по возрастанию специфичности:
-
+
селекторы типов элементов (например, h1) и псевдоэлементов (например, ::before).
селекторы классов (например, .example), селекторы атрибутов (например, [type="radio"]) и псевдоклассов (например, :hover).
селекторы идентификаторов (например, #example).
@@ -56,14 +56,14 @@
Важ
Использовать более специфичные правила. Чтобы сделать правило более специфичным и повысить его приоритет, укажите один элемент или несколько перед нужным вам элементом:
-
<divid="test">
- <span>Text</span>
-</div>
+
<div id="test">
+ <span>Text</span>
+</div>
-
div#test span {color: green }
+
div#test span { color: green }
div span { color: blue }
-span
{color: red }
-
+span { color: red }
+
@@ -84,13 +84,13 @@
Важ
Б) Ещё сценарий:
-
#someElement p {
- color: blue;
-}
+
#someElement p {
+ color: blue;
+}
-p
.awesome {
- color: red;
-}
+p.awesome {
+ color: red;
+}
Как сделать цвет текста в абзацах awesome красным всегда, даже если они расположены внутри #someElement? Без !important у первого правила специфичность больше и оно имеет преимущество перед вторым.
Б) Или добавьте правило с модификатором !important и таким же селектором, но расположенное в файле после существующего (при прочих равных выигрывает последнее объявленное правило):
-
td {height:50px!important;}
+
td {height: 50px !important;}
В) Или перепишите первоначальное правило без использования !important.
@@ -150,9 +150,9 @@
Не исключение - :no
... отобразится на экране так:
-
Это div.outer
+
Это div.outer
-
Это текст в div.inner
+
Это текст в div.inner
Специфичность основана на форме
@@ -175,11 +175,11 @@
Специ
... в результате выглядят так:
-
Это пример.
+
Это пример.
Потому что оба правила соответствуют одному и тому же элементу, но селектор идентификатора имеет большую специфичность.
Непосредственно соответствующие элементы и унаследованные стили
Стили непосредственно соответствующих элементов всегда предпочитаются унаследованным стилям, независимо от специфичности унаследованного правила. Этот CSS ...
Свойство (property) — идентификатор действия, которое будет применено к элементу (например, цвет, или размер границы, и т.д.).
-
Значение (value) — описывает, как именно свойство будет обработано браузером. Каждое свойство имеетнабор допустимых значений, определённыхформальными правилами, а такжесемантическийсмысл,реализованный движком браузера.
+
Значение (value) — описывает, как именно свойство будет обработано браузером. Каждое свойство имеет набор допустимых значений, определённых формальными правилами, а также семантический смысл, реализованный движком браузера.
Объявления CSS
@@ -23,7 +23,7 @@
Объявления CSS
-
В CSS существует более ста различных свойств, и бесконечное число допустимых значений. Не всепарысвойств и значенийдопускаются, и каждое свойствоопределяет, каковыдопустимые значения.Когда значениене подходит дляданного свойства,объявление считаетсянедействительной ицеликомигнорируютсяCSS-движком.
+
В CSS существует более ста различных свойств, и бесконечное число допустимых значений. Не все пары свойств и значений допускаются, и каждое свойство определяет, каковы допустимые значения. Когда значение не подходит для данного свойства, объявление считается недействительной и целиком игнорируются CSS-движком.
Блоки объявлений CSS
@@ -68,7 +68,7 @@
CSS statements
Any statement which isn't a rule or an at-rule is invalid and ignored.
There is another group of statements, the nested statements, these are statements that can be used in a specific subset of at-rules, the conditional group rules. These statements only apply if a specific condition is matched: the @media at-rule content is applied only if the device on which runs the browser matches the expressed condition; the @document at-rule content is applied only if the current page matches some conditions, and so on. In CSS1 and CSS2.1, only rulesets could be used inside a conditional group rules. That was very restrictive and this restriction was lifted in CSS Conditionals Level 3. Now, though it still is experimental and not supported by every browser, a conditional group rules can contain a wider range of content, rulesets but also some, but not all, at-rules.
text-align: left
text-align: right
diff --git a/files/ru/web/css/text-decoration-skip/index.html b/files/ru/web/css/text-decoration-skip/index.html
index c285b03c5da84e..28bcf2ac8b0a7e 100644
--- a/files/ru/web/css/text-decoration-skip/index.html
+++ b/files/ru/web/css/text-decoration-skip/index.html
@@ -39,18 +39,18 @@
Значения
spaces
All spacing is skipped, i.e. all Unicode white space characters and all word separators, plus any adjacent {{cssxref("letter-spacing")}} or {{cssxref("word-spacing")}}.
ink
-
The text decoration is only drawn where it does not touch or closely approach a glyph. I.e. it is interrupted where it would otherwise cross over a glyph.
-
+
The text decoration is only drawn where it does not touch or closely approach a glyph. I.e. it is interrupted where it would otherwise cross over a glyph.
+
edges
-
The start and end of the text decoration is placed slightly inward (e.g. by half of the line thickness) from the content edge of the decorating box. E.g. two underlined elements side-by-side do not appear to have a single underline. (This is important in Chinese, where underlining is a form of punctuation.)
-
+
The start and end of the text decoration is placed slightly inward (e.g. by half of the line thickness) from the content edge of the decorating box. E.g. two underlined elements side-by-side do not appear to have a single underline. (This is important in Chinese, where underlining is a form of punctuation.)
+
box-decoration
The text decoration is skipped over the box's margin, border and padding areas. This only has an effect on decorations imposed by an ancestor; a decorating box never draws over its own box decoration.
Исходный код этого интерактивного примера размещён в репозитории на GitHub. Если вы желаете внести вклад в проект интерактивных примеров, пожалуйста создайте клон https://github.com/mdn/interactive-examples и пришлите нам запрос на извлечение (pull request).
Исходный код этого интерактивного примера хранится в GitHub репозитории. Если вы хотите внести свой вклад в проект интерактивных примеров, скопируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.
-
Эффект свойства top зависит от того, как позиционируется элемент (то есть от значения свойства {{cssxref("position")}}):
Enable panning and pinch zoom gestures, but disable additional non-standard gestures such as double-tap to zoom. Disabling double-tap to zoom removes the need for browsers to delay the generation of click events when the user taps the screen. This is an alias for "pan-x pan-y pinch-zoom" (which, for compatibility, is itself still valid).
Enable single-finger gestures that begin by scrolling in the given direction(s). Once scrolling has started, the direction may still be reversed. Note that scrolling "up" (pan-up) means that the user is dragging their finger downward on the screen surface, and likewise pan-left means the user is dragging their finger to the right. Multiple directions may be combined except when there is a simpler representation (for example, "pan-left pan-right" is invalid since "pan-x" is simpler, but "pan-left pan-down" is valid).
Enable multi-finger panning and zooming of the page. This may be combined with any of the pan- values.
diff --git a/files/ru/web/css/transform-function/index.html b/files/ru/web/css/transform-function/index.html
index a721d4b8809800..0aef80df01c074 100644
--- a/files/ru/web/css/transform-function/index.html
+++ b/files/ru/web/css/transform-function/index.html
@@ -5,123 +5,261 @@
- CSS
- CSS Data Type
- CSS Transforms
+ - Data Type
- Layout
- - NeedsTranslation
- Reference
- - TopicStub
translation_of: Web/CSS/transform-function
+browser-compat: css.types.transform-function
---
{{CSSRef}}
-
The <transform-function> CSS data type denotes a function used to modify an element's appearance. A transform can usually be expressed by matrices, with the result determined by using matrix multiplication on each point.
+
The <transform-function>CSSdata type represents a transformation that affects an element's appearance. Transformation functions can rotate, resize, distort, or move an element in 2D or 3D space. It is used in the {{cssxref("transform")}} property.
-
Coordinates for 2D graphics
+
Syntax
-
Various coordinate models can be used to describe any transformation. The most common are the Cartesian coordinate system and homogeneous coordinates.
+
The <transform-function> data type is specified using one of the transformation functions listed below. Each function applies a geometric operation in either 2D or 3D.
Various coordinate models can be used to describe an HTML element's size and shape, as well as any transformations applied to it. The most common is the Cartesian coordinate system, although homogeneous coordinates are also sometimes used.
Cartesian coordinates
-
+
In the Cartesian coordinate system, a two-dimensional point is described using two values: an x coordinate (abscissa) and a y coordinate (ordinate). This is represented by the vector notation (x, y).
+
+
+
+
In CSS (and most computer graphics), the origin (0, 0) represents the top-left corner of any element. Positive coordinates are down and to the right of the origin, while negative ones are up and to the left. Thus, a point that's 2 units to the right and 5 units down would be (2, 5), while a point 3 units to the left and 12 units up would be (-3, -12).
+
+
Transformation functions
+
+
Transformation functions alter the appearance of an element by manipulating the values of its coordinates. A linear transformation function is described using a 2×2 matrix, like this:
+
+
+
+
The function is applied to an element by using matrix multiplication. Thus, each coordinate changes based on the values in the matrix:
-
In the Cartesian coordinate system each point of Euclidian space is described using two values: the abscissa and the ordinate. In CSS (and most computer graphics), the origin (0, 0) is the top-left corner of any element. Each point is mathematically described using the vector notation (x, y).
+
-
Each linear function is described using a 2x2 matrix like:
+
It is even possible to apply several transformations in a row:
-
-
+
+
+
With this notation, it is possible to describe, and therefore compose, most common transformations: rotations, scaling, or skewing. (In fact, all transformations that are linear functions can be described.) Composite transformations are effectively applied in order from right to left.
+
+
However, one major transformation is not linear, and therefore must be special-cased when using this notation: translation. The translation vector (tx, ty) must be expressed separately, as two additional parameters.
+
+
+
Note: Though trickier than Cartesian coordinates, homogeneous coordinates in projective geometry lead to 3×3 transformation matrices, and can express translations as linear functions.
-
By using matrix multiplication with the linear function and each point in question, a transformation is created:
+
Examples
-
.
+
Transform function comparison
-
Note that it is possible to apply several transformations in a row:
+
The following example provides a 3D cube created from DOM elements and transforms, and a select menu allowing you to choose different transform functions to transform the cube with, so you can compare the effects of the different types.
-
.
+
Choose one, and the transform is applied to the cube; after 2 seconds, the cube reverts back to its starting state. The cube's starting state is slightly rotated using transform3d(), to allow you to see the effect of all the transforms.
-
+
HTML
-
With this notation, it is possible to describe, and therefore composite, most common transformations: rotations, scaling, or skewing. In fact, all transformations that are linear functions can be described. Composite transforms are effectively applied in order from right to left. However, one major transformation is not linear and therefore must be special-cased when using this notation: translation. The translation vector (tx, ty) must be expressed separately, as two additional parameters.
Möbius' homogeneous coordinates in projective geometry leading to 3x3 transformation matrices, though more complex and unusual for non-specialists, doesn't suffer from the translation limitation as these can be expressed as linear functions in this algebra, removing the need for special cases.
The matrix() CSS function specifies a homogeneous 2D transformation matrix comprised of the specified six values. The constant values of such matrices are implied and not passed as parameters; the other parameters are described in the column-major order.
-
matrix(a, b, c, d, tx, ty) is a shorthand for matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1).
The perspective() CSS function defines the distance between the z=0 plane and the user in order to give to the 3D-positioned element some perspective. Each 3D element with z>0 becomes larger; each 3D-element with z<0 becomes smaller. The strength of the effect is determined by the value of this property.
The rotate() CSS function defines a transformation that moves the element around a fixed point (as specified by the {{ Cssxref("transform-origin") }} property) without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise. A rotation by 180° is called point reflection.
The rotate3d() CSS function defines a transformation that moves the element around a fixed axis without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise.In opposition to rotations in the plane, the composition of 3D rotations is usually not commutative; it means that the order in which the rotations are applied is crucial.
The rotateX() CSS function defines a transformation that moves the element around the abscissa without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise. The axis of rotation passes by the origin, defined by {{ cssxref("transform-origin") }} CSS property.
-
rotateX(a)is a shorthand for rotate3D(1, 0, 0, a).
The rotateY() CSS function defines a transformation that moves the element around the ordinate without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise. The axis of rotation passes by the origin, defined by {{ cssxref("transform-origin") }} CSS property.
-
rotateY(a)is a shorthand for rotate3D(0, 1, 0, a).
The rotateZ() CSS function defines a transformation that moves the element around the z-axis without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise. The axis of rotation passes by the origin, defined by {{ cssxref("transform-origin") }} CSS property.
-
rotateZ(a)is a shorthand for rotate3D(0, 0, 1, a).
-
{{cssxref("transform-function/scale","scale()")}}
-
The scale() CSS function modifies the size of the element. It can either augment or decrease its size and as the amount of scaling is defined by a vector, it can do so more in one direction than in another one. This transformation is characterized by a vector whose coordinates define how much scaling is done in each direction. If both coordinates of the vector are equal, the scaling is uniform, or isotropic, and the shape of the element is preserved. In that case, the scaling function defines a homothetic transformation.
The scale3d() CSS function modifies the size of an element. Because the amount of scaling is defined by a vector, it can resize different dimensions at different scales. This transformation is characterized by a vector whose coordinates define how much scaling is done in each direction. If all three coordinates of the vector are equal, the scaling is uniform, or isotropic, and the shape of the element is preserved. In that case, the scaling function defines a homothetic transformation.
The scaleX() CSS function modifies the abscissa of each element point by a constant factor, except if this scale factor is 1, in which case the function is the identity transform. The scaling is not isotropic and the angles of the element are not conserved. scaleX(-1) defines an axial symmetry with a vertical axis passing by the origin (as specified by the {{cssxref("transform-origin")}} property).
-
scaleX(sx) is a shorthand for scale(sx, 1) or for scale3d(sx, 1, 1).
The scaleY() CSS function modifies the ordinate of each element point by a constant factor except if this scale factor is 1, in which case the function is the identity transform. The scaling is not isotropic and the angles of the element are not conserved. scaleY(-1) defines an axial symmetry with a horizontal axis passing by the origin (as specified by the {{cssxref("transform-origin")}} property).
-
scaleY(sy) is a shorthand for scale(1, sy) or for scale3d(1, sy, 1).
The scaleZ() CSS function modifies the z-coordinate of each element point by a constant factor, except if this scale factor is 1, in which case the function is the identity transform. The scaling is not isotropic and the angles of the element are not conserved. scaleZ(-1) defines an axial symmetry along the z-axis passing by the origin (as specified by the {{cssxref("transform-origin")}} property).
-
scaleZ(sz) is a shorthand for scale3d(1, 1, sz).
-
{{cssxref("transform-function/skew","skew()")}}
-
The skew() CSS function is a shear mapping, or transvection, distorting each point of an element by a certain angle in each direction. It is done by increasing each coordinate by a value proportionate to the specified angle and to the distance to the origin. The more far from the origin, the more away the point is, the greater will be the value added to it.
-
{{cssxref("transform-function/skewX","skewX()")}}
-
The skewX() CSS function is a horizontal shear mapping distorting each point of an element by a certain angle in the horizontal direction. It is done by increasing the abscissa coordinate by a value proportionate to the specified angle and to the distance to the origin. The more far from the origin, the more away the point is, the greater will be the value added to it.
-
{{cssxref("transform-function/skewY","skewY()")}}
-
The skewY() CSS function is a vertical shear mapping distorting each point of an element by a certain angle in the vertical direction. It is done by increasing the ordinate coordinate by a value proportionate to the specified angle and to the distance to the origin. The more far from the origin, the more away the point is, the greater will be the value added to it.
The translate() CSS function moves the position of the element on the plane. This transformation is characterized by a vector whose coordinates define how much it moves in each direction.
The translate3d() CSS function moves the position of the element in the 3D space. This transformation is characterized by a 3-dimension vector whose coordinates define how much it moves in each direction.
The translateX() CSS function moves the element horizontally on the plane. This transformation is characterized by a {{cssxref("<length>")}} defining how much it moves horizontally.
-
translateX(tx) is a shorthand for translate(tx, 0).
The translateY() CSS function moves the element vertically on the plane. This transformation is characterized by a {{cssxref("<length>")}} defining how much it moves vertically.
-
translateY(ty) is a shorthand for translate(0, ty).
The translateZ() CSS function moves the element along the z-axis of the 3D space. This transformation is characterized by a {{cssxref("<length>")}} defining how much it moves.
-
translateZ(tz) is a shorthand for translate3d(0, 0, tz).
Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и отправьте нам pull request.
-
Transition позволяет определять переходное состояние между двумя состояниями элемента. Различные состояния могут быть определены с помощью {{ cssxref("Псевдо-классы", "псевдоклассов") }}, таких как {{cssxref(":hover")}} или {{cssxref(":active")}} или установлены динамически с помощью JavaScript.
Relative URLs, if used, are relative to the URL of the stylesheet (not to the URL of the web page).
-
The url() function can be included as a value for {{cssxref('background')}}, {{cssxref('background-image')}}, {{cssxref('list-style')}}, {{cssxref('list-style-image')}}, {{cssxref('content')}}, {{cssxref('cursor')}}, {{cssxref('border')}}, {{cssxref('border-image')}}, {{cssxref('border-image-source')}}, {{cssxref('mask')}}, {{cssxref('mask-image')}}, src as part of a @font-face block, and @counter-style/symbol
+
The url() function can be included as a value for {{cssxref('background')}}, {{cssxref('background-image')}}, {{cssxref('list-style')}}, {{cssxref('list-style-image')}}, {{cssxref('content')}}, {{cssxref('cursor')}}, {{cssxref('border')}}, {{cssxref('border-image')}}, {{cssxref('border-image-source')}}, {{cssxref('mask')}}, {{cssxref('mask-image')}}, src as part of a @font-face block, and @counter-style/symbol
In CSS Level 1, the url() functional notation described only true URLs. In CSS Level 2, the definition of url() was extended to describe any URI, including URNs. CSS Values and Units Level 3 returned to the narrower, initial definition. Now, url() denotes only true <url>s.
Используемое значение - CSS свойство, которое используется, когда все вычисления уже выполнены, смотрите вычисленное значение.
-
После того как {{glossary("user agent")}} закончил свои расчёты каждое свойство CSS имеет своё значение. Используемые значения (например, {{cssxref("width")}}, {{cssxref("line-height")}}) в пикселях. Используемые значения сокращённых свойств (например, {{cssxref("background")}}) согласуются с теми из свойств компонентов (например, {{cssxref("background-color")}} или {{cssxref("background-size")}}) и с {{cssxref("position")}} и {{cssxref("float")}}.
Главный блок-бокс содержит сгенерированные боксы-потомки и сгенерированный контекст. Он так же будет боксом, участвующем в схеме позиционирования.
-
Элемент блочного уровня так же может быть блоком-контейнером. Блок-контейнер - это блок, который содержит либо только другие элементы блочного уровня, либо создаёт контекст инлайнового форматирования и, таким образом, содержит только инлайновые элементы.
+
Элемент блочного уровня так же может быть блоком-контейнером. Блок-контейнер - это блок, который содержит либо только другие элементы блочного уровня, либо создаёт контекст инлайнового форматирования и, таким образом, содержит только инлайновые элементы.
Важно понимать, что понятие блочного элемента и понятие блочного контейнера - это разные вещи. Первое описывает, как блок будет себя вести по отношению к своему родителю и своим соседям/братьям. А второе - описывает, как блок будет взаимодействовать со своими потомками. Некоторые элементы блочного уровня, например, таблицы, не являются содержащими блоками. И наоборот, некоторые блоки-контейнеры, например, ячейки таблицы, не являются элементами блочного уровня.
@@ -88,7 +88,7 @@
Элементы, которые называются элементами инлайн-уровня - это элементы, у которых вычисленное значение CSS-свойства {{ cssxref("display") }} установлено в : inline, inline-block или inline-table. Визуально они не представляют собой какие-то отдельные блоки, но они они располагаются в одну линию с другим контентом инлайн-уровня. Например, содержание параграфа, с различным форматированием, таким как подчёркивание или картинка, состоит из элементов инлайн-уровня.
-
+
Эта диаграмма использует устаревшую терминологию; см. примечания ниже. К тому же она некорректна, потому что жёлтый эллипс справа по определению должен быть изображён одинаковым по размеру с эллипсом слева или больше него (it could be a mathematical superset), потому что в спецификации сказано: "Элемент инлайн-уровня генерируют боксы инлайн-уровня, участвующие в форматировании инлайн-уровня", см. CSS 2.2, глава 9.2.2
Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и отправьте нам пулреквест.
-
Свойства {{cssxref("min-width")}} и {{cssxref("max-width")}} перекрывают {{cssxref("width")}}.
Исходники для интерактивных примеров находятся в репозитории на GitHub. Если вы желаете помочь в улучшении примеров, пожалуйста склонируйте https://github.com/mdn/interactive-examples и отправьте нам pull-реквест.
-
Синтаксис
/* Значения ключевых слов */
@@ -29,7 +27,7 @@
Синтаксис
Свойство word-break определяется одним из описанных ниже ключевых слов.
.png)
-
+
Определяет функцию, указывающую, как вычисляются промежуточные значения свойств. Вы также можете выбрать ослабления от функции замедления Шпаргалка.Большинство 
.png)
Элемент блочного уровня так же может быть блоком-контейнером. Блок-контейнер - это блок, который содержит либо только другие элементы блочного уровня, либо создаёт 