recursal/MDN huggingface dataset:
CSS: каскадные таблицы стилей
=============================

**Cascading Style Sheets** (**CSS**) — это язык иерархических правил (таблиц стилей), используемый для представления внешнего вида документа, написанного на HTML или XML (включая различные языки XML, такие как SVG и XHTML. CSS описывает, каким образом элемент должен отображаться на экране, на бумаге, голосом или с использованием других медиа средств.

**CSS** является одним из основных языков *свободной веб-разработки,* который стандартизован спецификацией W3C. Стандарт CSS делится на уровни: CSS1 в настоящее время устарел, CSS2.1 — рекомендован для применения, а CSS3, разбитый на более мелкие модули, развивается на пути стандартизации.

* Справочник по CSS
 Исчерпывающий справочник для опытных веб-разработчиков, описывающий каждое свойство и понятие CSS.
* Самоучитель по CSS
 Пошаговое руководство для помощи начинающим программистам CSS. Содержит все необходимые основы.
* Примеры CSS3
 Набор примеров (en-US) представляющий новейшие технологии CSS в действии: толчок к креативности.
Документация
------------

* Справочник CSS: исчерпывающий справочник для опытных веб-разработчиков, в котором описаны все свойства и понятия CSS.
* Ключевые понятия CSS:
    + Описание синтаксиса и внешнего вида языка
    + Специфичность, наследование и каскадирование (en-US)
    + Единицы измерения в CSS (en-US) и функции в CSS (en-US)
    + Блоковая модель и схлопывание внешних отступов
    + Содержащий блок
    + Контекст наложения и блочный контекст форматирования
    + Начальное, вычисленное, используемое и действительное значения
    + Краткая форма записи CSS свойств
    + Флексбокс-раскладка в CSS
    + Грид-раскладка в CSS
    + CSS-селекторы
    + Медиавыражения
    + Анимация
Книга рецептов
--------------

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

Инструменты для разработки CSS
------------------------------

* Используйте Службу проверки W3C CSS для проверки правильности вашего CSS кода. Это отличный инструмент для отладки.
* Инструменты разработчика Firefox позволяют просматривать и изменять «на лету» CSS страницы с помощью инструментов Инспектор и Редактор стилей.
* Расширение Web Developer для Firefox позволяет отслеживать и изменять «на лету» CSS код на просматриваемых сайтах.
Смотрите также
--------------

* CSS демо (en-US): почерпните вдохновение, изучив примеры новейших технологий CSS в действии.
* Веб-языки в которых часто применяется CSS: HTML, SVG, MathML, XHTML и XML.
* Вопросы о CSS на Stack Overflow
XML: Extensible Markup Language
===============================

The **Extensible Markup Language** is a strict serialisation of the Document Object Model.

XML ВведениеXML - это язык разметки подобный HTML. Расшифровывается как (англ. Extensible Markup Language - Расширяемый Язык Разметки) и является рекомендацией сообщества W3C в качестве языка разметки общего назначения (W3C recommended). В отличии от остальных языков разметки, XML сам по себе не определён (это означает, что вы должны сами определять используемые теги). Основной целью XML является передача данных между разными системами (даже концептуально разными), такими как интернет.

Прямая и обратная обработка XMLИногда возникает необходимость в обработке XML и в последующей конвертации в древо DOM. Или наоборот, необходимо перевести древо DOM в XML. В этой статье рассмотрим объекты платформы web для обработки XML.
MathML
======

**Mathematical Markup Language (MathML)** разновидность языка разметки XML (en-US), предназначенная для построения математических выражений с сохранением их структуры и содержания. Здесь вы найдёте ссылки к документации, примеры и инструменты, которые помогут вам работать с этой мощной технологией. Для быстрого обзора - смотрите слайды для выставки инноваций на саммите Mozilla 2013.

Справочные данные по MathML
---------------------------

Справка по элементам MathML

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

Справка по атрибутам MathML

Информация по атрибутам MathML, которые могут изменять внешний вид или поведение элементов.

Примеры MathML

Примеры и образцы работы технологии MathML, которые помогут вам понять её принципы.

Средство разработки MathML

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

Получение помощи из сообщества
------------------------------

* IRC канал
* Wiki от авторов Mozilla
* Домашняя страница W3C Math
* Почтовый архив www-math w3.org
Инструменты
-----------

* W3C Validator (проверка online)
* Дополнение FireMath к Firefox
* Коллекция дополнений к Mathzilla Firefox
* TeXZilla - Javascript конвертер LaTeX в MathML (живая демонстрация, web-приложение Firefox OS, дополнение к Firefox, использование в Web странице, программа на JS, и.т.п.)
* LaTeXML - Конвертация документов LaTeX в HTML+MathML Web-страницы
* Web Equation - Вставка рукописных формул в MathML или LaTeX
* MathJax - Кросс-платформенное средство отображения математического контента на JavaScript. Для ускорения MathJax c использованием нативного MathML, испытайте это дополнение для Mozilla, это расширение для Safari или этот скрипт для GreaseMonkey.
Похожие темы
------------

* CSS
* HTML
* SVG
Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
XSLT
====

**XSLT** (*Extensible Stylesheet Language Transformations*) — является языком на основе XML, используемым вместе со специализированным программным обеспечением для преобразования XML-документов. Спецификация XSLT является рекомендацией W3C.

Хотя этот процесс называется «преобразованием», исходный документ не изменяется; скорее новый документ XML создаётся на основе содержимого существующего документа. Затем новый документ может быть сериализован (выведен) процессором в стандартном синтаксисе XML или в другом формате, таком как HTML или простой текст.

XSLT чаще всего используется для преобразования данных между различными схемами XML или для преобразования данных XML в веб-страницы или документы PDF.
Справка по HTML
===============

Эта справка описывает все **элементы** и **атрибуты** HTML, включая **глобальные атрибуты**, которые применяются ко всем элементам.

Справка по HTML-элементам

На этой странице перечислены все HTML-элементы.

Справка по HTML-атрибутам

У элементов в HTML есть атрибуты; это дополнительные величины, которые настраивают элементы или управляют их поведением различными способами, чтобы соответствовать критериям, которые хотят пользователи.

Глобальные атрибуты

Глобальные атрибуты - это атрибуты общие для всех элементов HTML; они могут использоваться на всех элементах, однако могут не оказывать влияние на некоторые элементы.

Типы ссылок

В HTML следующие типы ссылок указывают на связь между двумя документами, в котором один связывается с другим с помощью элементов `<a>`, `<area>` или `<link>`.

Категории контента

Каждый элемент HTML принадлежит одной или более категории контента - эти категории группируют элементы, которые имеют общие характеристики.

Форматы даты и времени, применяемые в HTML (en-US)

Некоторые элементы HTML позволяют вам указывать дату и/или время как значение или как значение атрибута. К ним относятся изменение даты и времени элемента `<input>`, а так же элементов `<ins>` и `<del>`.
style
=====

Глобальный атрибут **стиля** содержит объявления стилей CSS, которые могут применяться к элементу. Обратите внимание: рекомендуется, чтобы стили были определены в отдельном файле или файлах. Этот атрибут и элемент `<style>` имеют в основном назначение для быстрого добавления стиля, например, для целей тестирования.

**Примечание:** этот атрибут не должен использоваться для передачи семантической информации. Даже если весь стиль удаляется, страница должна оставаться семантически корректной. Обычно он не должен использоваться для скрытия несущественной информации; это должно быть сделано с использованием `скрытого` (en-US) атрибута.

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

| Specification |
| --- |
| HTML Standard # the-style-attribute |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* Все глобальные атрибуты.
class
=====

Глобальный атрибут **`class`** это разделённый пробелом список регистров зависимых классов элемента. Классы позволяют CSS и Javascript выбирать и получать доступ с помощью селекторов класса или функций, таких как методы DOM `document.getElementsByClassName`.

Интерактивный пример
--------------------

Хотя спецификация не предъявляет требований к именам классов, веб-разработчикам рекомендуется использовать имена, описывающие семантическое назначение элемента, а не представление элемента. Например, *атрибут* описывает атрибут, а не *курсив*, хотя элемент этого класса может быть представлен *курсивом*. Семантические имена остаются логичными даже при изменении представления страницы.

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

| Specification |
| --- |
| HTML Standard # global-attributes:classes-2 |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотреть также
--------------

* Все глобальные атрибуты.
contenteditable
===============

 (Mozilla / 5.0 (Windows NT 6.3, WOW64; rv: 29.0) Gecko / 20100101 Firefox / 29.0)
 Атрибут **`contenteditable`** global attribute - это перечисляемый атрибут, указывающий, должен ли элемент редактироваться пользователем. Если это так, браузер изменит свой виджет, чтобы разрешить редактирование. Атрибут должен принимать одно из следующих значений:

* true или *пустую строку*, которое показывает, что элемент должен быть редактируемым;
* false, которое показывает, что элемент должен быть нередактируемым.

Если атрибут не указан, то его значение *наследуется* от своего родительского элемента.

Этот атрибут *принимает одно из определённых значений* и не является *булевским*. Это значит, что точное использование одного из значений `true, false` или пустая строка обязательно и такое сокращение, как `<label contenteditable>Пример метки</label>` неразрешено. Верное использование — `<label contenteditable="true">Пример метки</label>`.

 Вы можете установить цвет, используемый для вставки текста caret (en-US)
 со свойством CSS `caret-color` (en-US).

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

| Specification |
| --- |
| HTML Standard # attr-contenteditable |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* Создание контента для редактирования (en-US)
* Все глобальные атрибуты
* `HTMLElement.contentEditable` и `HTMLElement.isContentEditable` (en-US)
tabindex
========

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2018.

* Learn more
* See full compatibility
* Report feedback

**Примечание:** Максимальное значение для tabindex не должно превышать 32767 (W3C 17.11.1)

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

* если представлено *отрицательное значение* – элемент может быть выделен, однако не участвует в последовательной навигации;
* если представлен **0** – элемент может быть выделен и достигнут с помощью последовательной навигации, однако порядок навигации определён платформой;
* если представлено *положительное целое значение* – элемент будет достигнут (и выделен) с помощью последовательной навигации, а порядок навигации определён этим самым значением. В случае, если несколько элементов содержат одно и то же значение **tabindex**, их порядок навигации определён относительным расположением в документе (DOM).

Элементы со значением 0, некорректным значением, или элементы с отсутствующим значением **tabindex** должны быть расположены после элементов с положительным целым числом.

Для более полного объяснения навигации смотри данную статью (en-US).

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

| Specification |
| --- |
| HTML Standard # attr-tabindex |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* Все глобальные атрибуты.
* `HTMLElement.tabindex` (en-US) отражает этот атрибут.
* Проблемы доступности (юзабилити): смотри Don't Use Tabindex Greater than 0 | Adrian Roselli.
data-\*
=======

The **data-\*** Глобальные атрибуты образуют класс атрибутов, называемых пользовательскими атрибутами данных, которые позволяют обмениваться проприетарной информацией между HTML и его представлением DOM посредством сценариев.

Интерактивный пример
--------------------

 Все такие пользовательские данные доступны через интерфейс `HTMLElement` элемента, для которого установлен атрибут. Свойство `HTMLElement.dataset` (en-US) предоставляет к ним доступ.
 Символ \* может быть заменён любым именем, соответствующим производственному правилу имён xml, со следующими ограничениями:

* имя не должно начинаться с xml, в любом случае для этих букв используется регистр;
* имя не должно содержать точку с запятой (U + 003A);
* имя не должно содержать заглавных букв.

Обратите внимание, что свойство `HTMLElement.dataset` (en-US) является `DOMStringMap`, и имя настраиваемого атрибута данных data-test-value будет доступно через HTMLElement.dataset. testValue (или HTMLElement.dataset ["testValue"]), поскольку любая тире (U + 002D) заменяется заглавной буквой следующей буквы, преобразуя имя в camelcase.

### Использование

Добавляя атрибуты data- \*, даже обычные элементы HTML могут стать довольно сложными и мощными программными объектами. Например, «спрайт» космического корабля в игре может быть простым элементом `<img>` с атрибутом класса и несколькими атрибутами data- \*:


```html
<img class="spaceship cruiserX3" src="shipX3.png"
 data-ship-id="324" data-weapons="laserI laserII" data-shields="72%"
 data-x="414354" data-y="85160" data-z="31940"
 onclick="spaceships[this.dataset.shipId].blasted()">
</img>
```


Более подробное руководство по использованию атрибутов данных HTML см. В разделе Using data attributes.

Specifications
--------------

| Specification |
| --- |
| HTML Standard # attr-data-\* |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* All global attributes.
* The `HTMLElement.dataset` (en-US) property that allows to access and modify these values.
* Using data attributes
itemid
======

Глобальный атрибут **`itemid`** предоставляет микроданные в форме уникального глобального идентификатора элемента. Атрибут `itemid` может быть указан только для элемента, который имеет оба атрибута `itemscope` и `itemtype`. Также, `itemid` может быть указан только для элементов, обладающих атрибутом `itemscope`, соответствующий ссылке `itemtype` или определяющий словарь, поддерживающий глобальные идентификаторы.

Точное значение глобального идентификатора `itemtype` обеспечивается определением этого идентификатора в пределах указанного словаря. Словарь определяет, могут ли сосуществовать несколько элементов с одним и тем же глобальным идентификатором, и, если да, то как обрабатываются элементы с одним и тем же идентификатором.

**Примечание:** Определение Whatwg.org указывает, что `itemid` должен быть URL. Однако, следующий пример правильно иллюстрирует, что URN, также может быть использован. Это несоответствие может отражать неполную природу спецификации микроданных.

Пример
------

### HTML


```html
<dl
 itemscope
 itemtype="http://vocab.example.net/book"
 itemid="urn:isbn:0-330-34032-8">
  <dt>Title</dt>
  <dd itemprop="title">The Reality Dysfunction</dd>
  <dt>Author</dt>
  <dd itemprop="author">Peter F. Hamilton</dd>
  <dt>Publication date</dt>
  <dd><time itemprop="pubdate" datetime="1996-01-26">26 January 1996</time></dd>
</dl>
```

### Структура данных

|  |  |  |
| --- | --- | --- |
| itemscope | itemtype: itemid | http://vocab.example.net/book: urn:isbn:0-330-34032-8 |
| itemprop | title | The Reality Dysfunction |
| itemprop | author | Peter F. Hamilton |
| itemprop | pubdate | 1996-01-26 |

### Результат

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

| Specification |
| --- |
| HTML Standard # attr-itemid |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* Другие различные глобальные атрибуты
* Другие глобальные атрибуты, связанные с микроданными
    + `itemprop`
    + `itemref`
    + `itemscope`
    + `itemtype`
id
==

**Глобальный атрибут (en-US) `id`** устанавливает элементу уникальный идентификатор (ID), имя которого должно быть уникальным в документе (на странице). Его назначением является идентификация элемента при связывании (использование идентификатора фрагмента), скриптинге или стилизации (с помощью CSS).

Интерактивный пример
--------------------

Значение этого атрибута "непрозрачная" строка: это означает, что веб-автор не должен использовать его для передачи какой-либо информации. Особое значение, например семантическое, получать из этой строки не надо.

Значение `id` не должно содержать пропусков (пробелов, табуляции и т.д). Браузеры обрабатывают пробелы, как часть уникального идентификатора. В отличии от атрибута `class`, который позволяет разделять пробелами значение (указывать несколько классов через пробел), элементы могут иметь только один ID.

**Примечание:** Использование символов отличных от ASCII букв, цифр, `'_'`, `'-'` и `'.'` может вызвать проблемы, связанные с совместимостью, т.к. они не были разрешены в HTML 4. Несмотря на то, что в HTML5 ограничение было снято, для совместимости ID должен начинаться с латинской буквы.

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

| Specification |
| --- |
| HTML Standard # global-attributes:the-id-attribute-2 |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* Все глобальные атрибуты.
* `Element.id` отражает этот атрибут.
lang
====

Глобальный атрибут `lang` помогает определить язык элемента: язык, на котором написаны нередактируемые элементы, или язык, на котором пользователем должны быть написаны редактируемые элементы. Атрибут содержит единственный "языковой тег" (`language tag`) в формате, определённом в *Tags for Identifying Languages (BCP47).*

Интерактивный пример
--------------------

Если значение атрибута — *пустая строка* (`lang=""`), язык устанавливается, как *неизвестный*. Если тег языка недействителен согласно BCP47, он устанавливается, как *недействительный*.

**Примечание:** ## Синтаксис языкового тегаПодробный синтаксис BCP47 достаточно подробен, чтобы отмечать специфичные языковые диалекты, но в большинстве случаев его использование намного проще.Языковой тег состоит из *языковых вложенных тегов*, разделённых дефисом, где каждый вложенный тег указывает на определённое свойство языка. 3 наиболее распространённых вложенных тега:

Языковой подтег

Обязателен. Двух-или-трёх-символьный код, определяющий базовый язык, обычно записываемый в нижнем регистре. К примеру, код английского языка является `en`, а для Бадеши — `bdz`.

Подтег скрипта

Необязателен. Данный подтег определяет систему записи, и всегда состоящий из 4 символов с первой заглавной буквой. К примеру, французский язык Брайля — это `fr-Brai`, а `ja-Kana` — это японский язык, написанный с использованием алфавита Катакана (Katakana). Если язык написан типичным способом, например, английский с латинским алфавитом, нет необходимости использовать данный подтег.

Подтег региона

Необязателен. Данный подтег определяет диалект основного языка из определённого места и состоит из двух букв в ALLCAPS, соответствующих коду страны, или трёх цифр, соответствующих региону, который не относится к стране. К примеру, `es-ES` — это испанский язык, на котором разговаривают в Испании, а `es-013` означает испанский язык, на котором разговаривают в Центральной Америке. "Международный испанский" было бы просто `es`.Подтег скрипта предшествует подтегу региона, если присутствуют оба тега — `ru-Cyrl-BY` — это русский язык, написанный кириллицей, на котором разговаривают в Беларуси.Чтобы найти правильный подтег кода языка, используйте the Language Subtag Lookup.


Даже если указан атрибут **lang**, то он может не учитываться, поскольку атрибут \*\*xml:lang \*\*имеет приоритет над **lang**.

Для псевдокласса CSS `:lang`, два недопустимых названия языка будут разными, если их имена различны. Хотя, `:lang(es)` соответствует обоим `lang="es-ES"` и `lang="es-419"`, но `:lang(xyzzy)` не соответствует `lang="xyzzy-Zorp!"`.

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

| Specification |
| --- |
| HTML Standard # attr-lang |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* Все глобальные атрибуты.
* `Content-Language` HTTP Header
is
==

Глобальный атрибут **`is`** позволяет указать, что стандартный HTML-элемент должен вести себя как определённый пользовательский встроенный элемент (см Using custom elements для информации).

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

Примеры
-------

Следующий код взят из нашего примеры word-count-web-component (см. в живую).


```js
// Создание класса для элемента
class WordCount extends HTMLParagraphElement {
  constructor() {
    // Всегда вызывайте super первым в конструкторе
    super();

    // Содержимое конструктора опущено для краткости
    ...

  }
}

// Определение нового элемента
customElements.define('word-count', WordCount, { extends: 'p' });
```



```html
<p is="word-count"></p>
```

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

| Specification |
| --- |
| HTML Standard # attr-is |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* All global attributes.