Синтаксис css ключевые слова комментарии правила: Синтаксис CSS — правила, селекторы, свойства, их значения (параметры) и комментарии в языке каскадных таблиц стилей

Введение в CSS команды

CSS означает Каскадные таблицы стилей. Он используется для описания представления документа, написанного на языке разметки, например HTML. Он выполняет работу по разделению презентации и контента, которая включает в себя различные макеты, цвета и шрифты. Разделение обеспечивает гибкость, а также управление различными характеристиками, которые позволяют нескольким веб-страницам совместно использовать форматирование путем указания соответствующего CSS. Спецификации CSS поддерживаются World Web Consortium. В дополнение к этому, он также предоставляет специальные правила, которые помогают в альтернативном форматировании, если доступ к контенту осуществляется с мобильного устройства.

Основные команды CSS

1. Синтаксис CSS: существует набор правил, которым необходимо следовать в команде CSS. Набор правил CSS состоит из селектора и блока объявления. Селектор используется для указания элемента HTML, который пользователь хотел бы стилизовать. Блок объявлений может содержать одно или несколько объявлений, которые могут быть разделены точками с запятой. Каждое объявление должно содержать имя свойства с его значением, разделенное двоеточиями.

2. Селектор идентификатора : селектор идентификатора может использовать идентификатор атрибута элемента HTML и помочь в выборе конкретного элемента. Он используется для выбора одного уникального элемента, и этот элемент должен быть уникальным для этой страницы. Для выбора элемента с определенным идентификатором используется «#», за которым следует идентификатор этого элемента.

3. Селектор класса: чтобы выбрать определенный атрибут класса, селектор класса используется для выбора элементов этого класса. Для использования элементов в определенном классе используется символ точки (.). За ним следует название класса. При этом, если пользователь хочет, чтобы только определенные элементы использовались, тогда только те могут быть определены классом.

4. Группировка селекторов: бывают случаи, когда элементы имеют одинаковые определения стиля. Лучше всего объединить их вместе и минимизировать код. Для группы пользователь селектора может использовать запятую и отделять каждый селектор

5. Комментарии: Эти CSS-команды рекомендуется использовать при написании кода. Они дают ясность относительно того, что делает код, и помогают вам или кому-то еще, кто новичок в коде, работать над ним соответственно. Комментарии игнорируются браузерами. Комментарий CSS начинается и заканчивается на / * * /.

6. Display: Block — для многих элементов HTML установлен этот режим отображения. По умолчанию элементы уровня блока занимают столько же места, и их нельзя разместить на одной строке с любым другим режимом отображения. Можно получить возможность изменять высоту и ширину элемента по вашему желанию.

7. Цвета в CSS: в этих командах CSS цвета могут быть указаны в формуле RGB. Каждый параметр определяет интенсивность этих цветов и определяет новый цвет. Например, для отображения черного цвета все параметры цвета должны быть установлены в RGB (0, 0, 0).

8. Цвет фона: свойство background-color определяет цвет, который должен быть установлен для фона элемента. Цвет можно легко определить, задав имя цвета, добавив значение Hex или установив значение RGB.

9. Фоновое изображение: Фоновое изображение может быть установлено на любое конкретное изображение по вашему выбору. Как только изображение установлено, оно повторяется и охватывает весь элемент.

10. CSS Margins: CSS Command имеет различные свойства полей, которые могут помочь в создании пространства вокруг различных элементов, а также определяет эти внешние границы. CSS может иметь такие свойства, как margin-top, margin-right, margin-bottom и margin-left.

Промежуточные команды CSS

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

2. Псевдокласс: эти классы используются для указания конкретного состояния или отношения к данному селектору. Эти классы также могут принимать форму селектора: pseudo_class (property: value; ). Этот класс определяется простой передачей двоеточия между селектором и псевдоклассом.

3. Форматирование текста: добавляемые тексты можно настраивать и форматировать, используя свойства форматирования. Цвет можно изменить с помощью ключевого слова «цвет». Так может выравнивание текста. С помощью текстовых украшений можно устанавливать и удалять украшения. Преобразования могут быть сделаны относительно случаев.

4. Шрифты CSS. Шрифты в CSS имеют разные семейства, такие как родовое семейство и семейство шрифтов. Семейство шрифтов — это семейство текстов. Общий, имеющий группу семейств, имеющих похожий вид и шрифт, имеющий определенный шрифт.

5. Значки. Используя библиотеку значков и добавляя имя заданного значка, значки классов можно легко использовать в CSS.

6. Таблицы: CSS также может отображать таблицы и помогать в настройке с границами, их шириной и высотой. Используя ключевые слова, такие как «граница», «ширина» и высота, пользователь может легко иметь таблицы на веб-странице.

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

8. Переполнение: это свойство помогает управлять содержимым, которое слишком велико для области.

9. Float: свойство float позволяет элементу знать, как он должен плавать. Он указывает, какие элементы могут плавать рядом с очищенными элементами.

10. Непрозрачность: это свойство определяет непрозрачность или прозрачность любого элемента.

Расширенные команды CSS

1. CSS Rounded Corners: используя свойство ‘border-radius’, элемент может быть задан закругленными углами. Вы также можете указать конкретный угол из четырех углов и внести изменения в соответствии с вашим выбором.

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

Советы и рекомендации по использованию команд CSS:

• Используйте reset.css и сбросьте все основные стили.
• Используйте сокращенный CSS, чтобы иметь более короткий способ написания кодов Command CSS.
• Используйте инструменты отладки CSS, чтобы настраивать, понимать и отлаживать стили команд CSS.

Вывод

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

Рекомендуемые статьи

Это было руководство по командам CSS. Здесь мы обсудили основные, промежуточные и расширенные команды CSS. Вы также можете посмотреть следующую статью, чтобы узнать больше —

1. Лучшие команды MySQL
2. Команды PL / SQL
3. Как использовать команды SQL
4. Угловые команды

Глава 2 CSS

Как мы уже пояснили в предыдущей главе, элементы HTML позволяют сайтостроителям разметить документ в соответствии с его структурой. В спецификации HTML перечислены рекомендации по отображению браузерами этих элементов. К примеру, можно быть более-менее уверенным, что содержание контейнера strong будет отображено полужирным шрифтом. Вполне можно доверять и тому факту, что большинство браузеров отобразит содержимое контейнера h2 крупным шрифтом… по меньшей мере, крупнее, чем p, и крупнее, чем h3. Однако помимо веры и надежды на это, средств контроля за внешним видом текста у нас просто нет.

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

Правила и таблицы стилей

Для того, чтобы начать пользоваться CSS не нужно даже писать таблицы стилей. Шестнадцатая глава расскажет, как ссылаться на существующие в Сети таблицы.

Существуют два метода создания таблиц CSS. Можно либо воспользоваться обычным текстовым редактором и писать таблицы стилей «от руки», либо воспользоваться специальным инструментом, поддерживающим CSS, к примеру, приложением для веб-дизайна. Специальные инструменты позволяют создавать таблицы стилей без изучения синтаксиса CSS. Однако впоследствии дизайнеры во многих случаях предпочитают ручную отладку таблиц стилей, так что мы рекомендуем вам научиться писать и редактировать CSS от руки. Давайте приступим!

h2 { color: green }

То, что вы видите, это простое правило CSS, содержащее одно объявление. Правило это заявление стилистического параметра одного элемента или нескольких. Таблица стилей это набор из одного или более правил, прилагаемых к HTML-документу. Правило выше устанавливает цвет всех заголовков первого уровня (h2). Давайте посмотрим, какой визуальный эффект оно могло бы произвести:

Figure 2.1

Теперь давайте тщательно разберем правило.

Анатомия правила

Правило состоит из двух частей:

• Селектора — части перед левой фигурной скобкой
• Объявления — части внутри фигурных скобок

Селектор это звено, связующее HTML-документ и стиль. Оно устанавливает на какие элементы влияет объявление. Объявление это часть правила, которая определяет эффект. В примере выше селектор это тег h2, а объявление «color: green». Следовательно, объявление повлияет на все элементы h2, то есть, они позеленеют. (Свойство color влияет только на цвет текста; существуют другие свойства для фона, границ и т.д.)

Предыдущий селектор основан на типе элемента: он выбирает все элементы типа «h2». Этот вид селектора зовется селектором типа. Любой тип элемента HTML может быть использован в качестве селектора типа. Селекторы типа являются простейшим видом селекторов. Мы обсудим другие виды селекторов в See CSS selectors. , «CSS selectors.»

Анатомия объявления

Объявление имеет две части, разделенные двоеточием:

• Свойство — часть перед двоеточием
• Значение — часть после двоеточия

Свойство это качество либо характеристика, которыми нечто обладает. В предыдущем примере это color. CSS2 (см. separate box) определяет примерно 120 свойств и мы можем присвоить значения им всем.

Значение это точная спецификация свойства. В примере, это «green» «зеленый», но точно также цвет мог бы быть синим (blue), красным (red), желтым (yellow) или каким-нибудь еще.

Диаграмма ниже иллюстрирует все компоненты правила. Фигурные скобки ({ }) и двоеточие ( позволяют браузерам различать селектор, свойство и значение.

Рисунок 2.2 Диаграмма правила.

Группирование селекторов и правил

При создании CSS целью является сжатость. Мы отметили, что если уменьшить размер таблиц стилей, это позволит дизайнерам писать и редактировать их «от руки». К тому же короткие таблицы грузятся быстрее длинных. Поэтому в CSS есть несколько механизмов уменьшить размер таблиц стилей путем группировки селекторов и объявлений.

Для примера, рассмотрите эти три правила:

h2 { font-weight: bold }
h3 { font-weight: bold }
h4 { font-weight: bold }
     

У всех трех правил абсолютно одинаковое объявление они устанавливают шрифт полужирным. (Это делается с помощью свойства font-weight, которое мы обсудимв See Fonts. .) Поскольку все три объявления идентичны, можно сгруппировать селекторы в список, разделенный запятыми, и указать объявление лишь один раз, вот так:

h2, h3, h4 { font-style: bold }

Это правило производит такой же эффект, как и первые три..

Селектор может иметь больше одного объявления. К примеру, можно написать таблицу стилей с этими двумя правилами:

h2 { color: green }
h2 { text-align: center }

В этом случае, мы устанавливаем все элементы h2 зелеными и центрированными на листе. (Это делается с помощью свойства text-align, которое мы обсудим в главе 5.)

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

h2 {
  color: green;
  text-align: center;
}

Все объявления быть внутри фигурных скобок. Точка с запятой разделяет объявления и может, но не должна также появляться в конце последнего объявления. Кроме того, для повышения удобочитаемости вашего кода, предлагаем размещать каждое объявление в отдельной строчке, как мы сделали здесь. (Браузерам все равно, они просто проигнорируют все лишние пробелы и переводы строк.)

Теперь вы знаете основы создания правил CSS и таблиц стилей. Однако, мы еще не закончили. Чтобы таблица произвела какой-то эффект, ее придется «приклеить» к своему документу HTML.

«Приклеивание» таблиц стилей к документу

Чтобы заставить какую-либо таблицу стилей повлиять на документ HTML, ее нужно «приклеить» к нему. То есть, таблица и документ должны быть объединены, чтобы сработать вместе и представить документ. Это можно сделать любым из четырех способов:

1. Применить базовую, внутридокументную таблицу стилей, к документу, исп ользуя тег style .
2. Применить таблицу стилей к отдельному тегу, используя атрибут style.
3. Привязать внешнюю таблицу стилей к документу, используя элемент link.
4. Импортировать таблицу стилей, испольхуя запись CSS @import.

В следующем разделе, мы обсудим первый метод: с использованием тега style. Атрибут style мы обсудим в главе 4 , «Селекторы CSS», а использование элемента link element и записи @import в главе 16 , «Внешние таблицы стилей».

«Склеивание» с использованием тега STYLE

Можно склеить таблицу стилей и HTML документ, поместив таблицу стилей внутрь контейнера style вверху вашего документа. Тег style был введен в HTML в частности для того, чтобы позволить вставлять таблицы стилей внутрь HTML документов. Вот таблица стилей (полужирным шрифтом) прикрепленная к документу-образцу с использованием тега style. Результат показан в рисунке 2.3 .

<HTML>
  <TITLE>Bach's home page</TITLE>
  <STYLE>
    h2, h3 { color: green }
  </STYLE>
  <BODY>
    <h2>Bach's home page</h2>
    <P>Johann Sebastian Bach was a prolific
        composer. Among his works are:
    <UL>
      <LI>the Goldberg Variations
      <LI>the Brandenburg Concertos
      <LI>the Christmas Oratorio
    </UL>
    <h3>Historical perspective</h3>
    <P>Bach composed in what has been referred to as
      the Baroque period.
  </BODY>
</HTML>

Рисунок 2.3 Результат добавления к таблице стилей правила изменения цвета тегов h2 на зеленый и последующего прикрепления таблицы к документу с использованием контейнера style. (попробуйте)

Обратите внимание на то, что тег style размещен после тега title и перед тегом body. Заголовок документа «title» не появляется на самой странице, поэтому стили CSS не оказывают на него влияния.

Содержимое тега style это таблица стилей. Однако, в то время, как содержимое таких тегов, как h2, p и ul появляется на странице, содержимое тега style там не появляется. Точнее, на странице появляется эффект от содержимого контейнера style таблицы стилей. Поэтому вы не видите «{ color: green }», показанным на экране; вместо этого вы видите два тега h2 зеленого цвета. Правил, определяющих цвет прочих элементов, добавлено не было, так что все прочие элементы будут отображаться цветом по умолчанию.

Браузеры и CSS

Для обновляемого обзора доступных браузеров, просмотрите страницу обзоров W3C

Для того, чтобы CSS работала как написано в этой книге, необходимо использовать CSS-совместимый браузер, то есть, браузер, поддерживающий CSS. CSS-совместимый браузер узнает тег style как контейнер для таблицы стилей и отображает документ соответственно. Многие браузеры, распространенные сегодня, поддерживают CSS, например, Microsoft Internet Explorer 4 (IE4), Netscape Navigator 4 (NS4) и Opera 3.5 (O3.5). По скромным подсчетам более половины пользователей Сети используют CSS-расширенные браузеры, и их число постоянно растет. Велика вероятность того, что люди, с которыми вы общаетесь, имеют CSS-расширенные браузеры. Если нет, дайте им причину обновиться!

Лучший источник информации о том, как различные браузеры поддерживают CSS WebReview’s charts

Увы, не все реализации CSS совершенны. Когда вы начнете экспериментировать с таблицами стилей, вы вскоре заметите, что каждый браузер имеет ряд багов и ограничений. В целом, новые браузеры ведут себя лучше старых. IE4 и O3.5 среди лучших, а следующее предложение Netscape под кодовым именем Gecko также обещает более усовершенствованную поддержку для CSS.

Те, кто не пользуется CSS-расширенными браузерами, все же могут читать страницы, использующие таблицы стилей. CSS заботливо спроектировали так, чтобы всё содержимое оставалось видимым, даже если браузер ничего не знает о CSS. Некоторые браузеры, такие как вторая и третья версии Netscape Navigator, не поддерживают таблицы стилей, но они знают о теге style чтобы полностью его игнорировать. После поддержки таблиц стилей, это и есть правильное поведение.

Однако другие браузеры, которые не поддерживают тега style, такие как Netscape Navigator 1 и Microsoft Internet Explorer 2, проигнорируют теги style, но покажут содержимое контейнера style. Таким образом, пользователь получит таблицу стилей напечатанной вверху страницы. В настоящий момент, лишь небольшой процент пользователей Сети может столкнуться с этой проблемой. Чтобы предупредить это, можно поместить свою таблицу стилей внутрь HTML-комментария, что мы обсудим в главе 1. Поскольку комментарии не отображаются на экране, поместив таблицу стилей внутрь HTML-комментария, вы не дадите старейшим браузерам показать содержимое контейнера style. CSS-расширенные браузеры учитывают этот трюк и расценят содержимое контейнера style как табицу стилей.

Вспомните, что комментарии HTML начинаются с <!-- и заканчиваются на -->. Вот кусочек предыдущего примерного кода, показывающий, как писать таблицу стилей в комментарии HTML. Комментарий окружает только содержимое контейнера style:

<HTML>
  <TITLE>Bach's home page</TITLE>
  <STYLE>
    <!--
      h2 { color: green }
    -->
  </STYLE>
  <BODY>
    ..
  </BODY>
</HTML>

В CSS также есть собственные способы комментирования, которые можно использовать внутри таблицы стилей. Комментарий CSS начинается с «/*» и оканчивается на «*/.» (Те, кто знаком с языком программирования C, узнают его.) Правила CSS помещененные в комментарий CSS никак не повлияют на предсталение документа.

Браузеру необходимо сообщить, что вы работаете с таблицами стилей CSS. В настоящее время CSS единственный язык таблиц стилей, используемый с HTML-документами, и мы не думаем, что это скоро изменится. Для XML ситуация может быть и иной. Но точно так, как существует более одного формата изображений (сразу вспоминаются GIF, JPEG и PNG), может быть и больше одного языка таблиц стилей. Так что это хорошая привычка сообщать браузерам, что они работают с CSS. (К тому же, HTML этого требует.) Это делается с помощью атрибута type тега style. Значение type указывает, какой тип таблиц стилей используется. Для CSS значение будет «text/css». Нижеследующее отрывок из предыдущего документа-образца, показывающий, как лучше писать это (в сочетании с использованием комментариев HTML):

<HTML>
  <TITLE>Bach's home page</TITLE>
  <STYLE TYPE="text/css">
    <!--
      h2 { color: green }
    -->
  </STYLE>
  <BODY>
    ..
  </BODY>
</HTML> 

Когда браузер загружает документ, он проверяет, сможет ли он понять язык таблиц стилей. Если сможет, он пытается прочесть таблицу, иначе проигнорирует. Атрибут type (см. в главе 1 обсуждение HTML-атрибутов) в теге style это способ дать браузеру понять, какой язык стилей используется. Атрибут type должен быть включен.

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

Древовидные структуры и наследование

Вспомните из главы 1 обсуждение HTML, представляющего документ в виде древовидной структуры, и того, что элементы HTML имеют дочерние и родительские объекты. Есть много причин для создания древовидных документов. Для таблиц стилей есть одна очень хорошая причина: наследование. Как дети наследуют своих родителей, так и HTML-элементы. Только вместо наследования генов и денег, элементы HTML наследуют стилистические свойства.

Давайте начнем с того, что посмотрим на документ-образец.:

<HTML>
  <TITLE>Bach's home page</TITLE>
  <BODY>
    <h2>Bach's home page</h2>
    <P>Johann Sebastian Bach was a
      <STRONG>prolific</STRONG> composer. Among his
        works are:
    <UL>
      <LI>the Goldberg Variations
      <LI>the Brandenburg Concertos
      <LI>the Christmas Oratorio
    </UL>
  </BODY>
</HTML>

Древовидная структура этого документа выглядит так:

Посредством наследования, значения свойств CSS присвоенные одному элементу, передадуться вниз по дереву его потомкам. Например, в наших образцах зеленый цвет до сих пор присваивается тегам h2 и h3. Теперь, скажем, нам нужно присвоить этот цвет всем элементам документа. Можно сделать это, перечислив все типы элементов в селекторе.:

<STYLE TYPE="text/css">
  h2, h3, P, LI { color: green }
</STYLE>

Однако, большинство документов HTML сложнее нашего образца, и таблица стилей вскоре сильно удлинилась бы. Есть способ лучше — и короче. Вместо присвоения стиля каждому типу элемента, мы присваиваем его их общему предку: тегу body:

<STYLE TYPE="text/css">
  BODY { color: green }
</STYLE>

Поскольку прочие элементы наследуют свойства тега body, все они наследуют и зеленый цвет. (Рисунок 2.4 ).

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

Аннулирование наследования

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

<STYLE TYPE="text/css">
  BODY { color: green }
  h2 { color: navy }
</STYLE>

Раз тег h2 дочерний элемент тега body (и, следовательно, наследует body), эти два правила в таблице стилей выше несовместимы. Первое присваивает цвет содержимому тега body, а, значит, и цвет элементов h2 посредством наследования; в то время, как второе правило присваивает цвет исключительно тегу h2. Какое из них победит? Давайте узнаем:

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

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

<STYLE TYPE="text/css">
  h2 { color: navy }
  BODY { color: green }
</STYLE>

CSS разработали так, чтобы разрешать противоречия между таблицами стилей как в примере выше. Конкретность один из аспектов этого. Детали можно найти в главе 15 , «Каскадирование и наследование.»

Свойства, которые не наследуются

В общем случае, свойства в CSS наследуются от родительского элемнта к дочернему, как описано в предыдущих примерах. Некоторые свойства, однако, не наследуются, и в этом всегда есть веская причина. Используем свойство background (описано в главе 11) как пример свойства, которое не наследуется.

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

<HTML>
  <TITLE>Bach's home page</TITLE>
  <STYLE TYPE="text/css">
    BODY {
      background: url(texture.gif) white;
      color: black;
    }
  </STYLE>
  <BODY>
    <h2>Bach's <EM>home</EM> page</h2>
    <P>Johann Sebastian Bach was a prolific
      composer.
  </BODY>
</HTML>

Свойство background «фон» имеет URL («texture.gif»), указывающий фоновое изображение в качестве значения. Когда изображение загружено, страница выглядит так:

В примере выше есть несколько вещей, о которых стоит рассказать подробнее:

• Фоновое изображение перекрывает поверхность наподобие обоев фоны элементов h2 и p также были перекрыты. Это не из-за наследования, причина в том, что если не определено иначе, все фоны прозрачны. Так что, раз мы не определили как-либо фоны для содержимого тегов h2 или p, фон родительского элемента body будет просвечивать.
• Вдобавок к URL изображения, в качестве фона также приваивается цвет (по умолчанию белый). Если изображение не будет найдено, вы увидите вместо него цвет.
• Цвет содержимого body установлен черным. Чтобы гарантировать контраст между текстом и фоном, хорошей привычкой будет всегда устанавливать свойство color когда устанавливаете свойство background.

А почему, собственно, свойство background не наследуется? Визуально, эффект от прозрачности подобен наследованию: выглядит так, будто все элементы имеют один и тот же фон. Есть две причины: во-первых, прозрачные фоны отображаются скорее (нечего отображать!), чем прочие фоны. Во-вторых, поскольку фоновые изображения выравниваются относительно элементов, к которым принадлежат, т.е. в ином случае вы бы не всегда наблюдали гладкие стыковки фона.

Стандартные задачи в CSS

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

Частые задачи: шрифты

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

h2 { font: 36pt serif }

Это правило присваивает определенный шрифт элементам h2. Первая часть значения 36pt устанавливает шрифт размером 36 пунктов. «Пункт» старая типографская единица измерения, которая здравствует и в цифровом веке. В следующей главе мы расскажем, почему стоит использовать единицу «em» вместо «pt» но пока что заострим внимание на пунктах. Вторая часть значения serif сообщает браузеру, что нужно использовать шрифт с серифами (маленькими засечками на концах шрифтов, глава 5 расскажет вам о них подробнее). Более декоративные шрифты с засечками лучше подходят домашней страничке Баха, поскольку современные санс-серифные шрифты (шрифты без засечек) не использовались в его время. Вот результат:

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

h2 {
  font-size: 36pt;
  font-family: serif;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  line-height: normal;
}

Иногда нужно всего лишь установить лишь одно из них. Например, вам нужно наклонить текст в некоторых элементах. Вот пример.:

UL { font-style: italic }

Свойство font-style не изменит размера шрифта либо семейство шрифтов, оно просто наклонит существующий шрифт. Когда оно присвоено элементу ul, содержимое тегов li внутри этого контейнера станет наклоенным, поскольку свойство font-style наследуется. Вот результат применения к тестовой странице, которые вы уже знаете.:

Похожим образом, свойство font-weight используется для изменения плотности толщины букв. Можно еще больше выделить пункты списка, присвоив их предку значение bold:

UL {
  font-style: italic;
  font-weight: bold;
}
     

Что выводит:

Последние свойства font-variant и line-height до сих пор не слишком широко поддерживаются браузерами, а потому не используются широко.

Частые задачи: поля

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

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

<HTML>
  <TITLE>Fredrick the Great meets Bach</TITLE>
  <BODY>
    <P>One evening, just as Fredrick the Great was
      getting his flute ready, and his musicians
      were assembled, an officer brought him a
      list of the strangers who had arrived. With
      his flute in his hand he ran over the list,
      but immediately turned to the assembled
      musicians, and said, with a kind of
      agitation:
    <BLOCKQUOTE>"Gentlemen, old Bach is come."
    </BLOCKQUOTE>
    <P>The flute was now laid aside, and old Bach, who
      had alighted at his son's lodgings, was immediately
      summoned to the Palace.
  </BODY>
</HTML>

Скриншот внизу показывает, как типичный HTML-браузер отобразит этот документ:

Как можно видеть, браузер добавил пробелы со всех сторон цитируемого текста. В CSS эти пробелы называются «margins» «поля» и все элементы имеют поля со всех четырех сторон. Свойства называются: margin-top, margin-right, margin-bottom и margin-left. Можно изменить отображение содержимого контейнера blockquote, написав маленькую таблицу стилей:

BLOCKQUOTE {
  margin-top: 1em;
  margin-right: 0em;
  margin-bottom: 1em;
  margin-left: 0em;
  font-style: italic;
}

Единица «em» будет подробно рассмотрена в следующей главе, но уже сейчас можно раскрыть ее секрет: она масштабирует относительно размера шрифта. Таким образом, код в примере выше создаст вертикальные поля такой же высоты, как и шрифт (1em) элемента blockquote, и горизонтальные поля с нулевой шириной. Чтобы убедиться, что цитируемый текст все-таки будет отличаться, сделаем его курсивным. Результат таков:

Точно так же, как font укороченное свойство для установки нескольких шрифтовых свойств сразу, margin это укороченное свойство которое устанавливает все свойства полей. Поэтому пример вверху можно записать и как:

BLOCKQUOTE {
  margin: 1em 0em 1em 0em;
  font-style: italic;
}

Первая часть значения — 1em — присваивается верхнему полю (собственное свойство margin-top). Отсюда отсчитывается против часовой стрелки: 0em присваивается к margin-right (правое поле), 1em присваивается margin-bottom (нижнее поле), и 0em присваивается margin-left (левое поле).

Поскольку левое поле равно нулю, цитируемому тексту нужно больше стиля, чтобы отделить его от остального текста. Установка в font-style значения italic помогает, а добавление фонового цвета еще больше усиливает цитату:

BLOCKQUOTE {
  margin: 1em 0em 1em 0em;
  font-style: italic;
  background: #EDB;
}

Вот результат:

Как и ожидалось, фоновый цвет позади цитаты изменился. В отличие от предыдущих примеров, цвет определялся в частях красного-зеленого-синего (RGB от англ. red/green/blue) цветов. Цвета RGB детально описываются в главе 11 .

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

BLOCKQUOTE {
  margin: 1em 0em 1em 0em;
  font-style: italic;
  background: #EDB;
  padding: 0.5em;
}

Результат установки заполнения выразился в пробеле между текстом и треугольником, его окружающим:

Обратите внимание, что свойству padding дано лишь одно значение (0.5em). Как и свойство margin, padding может принимать 4 значения, которые могут быть приписаны к верхнему, правому, нижнему и левому заполнению соответственно. Однако, когда одно и то же значение приваивается всем сторонам, единичное его упоминание сработает. Это справедливо и для padding и для margin (также как и для некоторых других свойств границ, которы описаны См. Промежутки вокруг блоков. ).

Частые задачи: ссылки

Чтобы облегчить пользователям проглядывание гипертекстовых документов, ссылки должны иметь стиль, отличный от нормального текста. Браузеры HTML часто подчеркивают текст гиперссылок. Также применяются различные цветовые схемы, указывающие, переходил ли уже пользователь по этой ссылке или нет. Поскольку гиперссылки являются довольно значимой частью Сети, в CSS есть специальная поддержка для их стилизации. Вот простой пример:

A:link { text-decoration: underline }

Примерный код вверху указывает, что непосещенные ссылки должны быть подчеркнуты:

Ссылки подчеркнуты, как мы и указали, но они вдобавок синие, чего мы не указывали. Когда авторы не указывают все возможные стили, браузеры используют стили по умолчанию, чтобы заполнить пробелы. Взаимодействие между авторскими стилями, стилями по умолчанию и пользовательскими стилями (собственными предпочтениями пользователя) еще один пример противоречия между решающими правилами CSS. Это называется «каскадом»(«C» в «CSS»). Мы обсудим каскад ниже.

Селектор (A:link) заслуживает особого замечания. Вы, возможно, узнаете «A» как тег HTML, но последняя часть нова. «:link» это один из так называемых псевдо-классов CSS. Псевдо-классы используют, чтобы наделить стилем элементы, основанные на информации извне самого документа. К примеру, автор документа не может знать, перешли ли по определенной ссылке или нет. Детально псевдо-классы описываются в главе 4, а здесь мы лишь дадим еще несколько примеров:

A:visited { text-decoration: none }

Это правило присваивает стиль посещенным ссылкам, точно так, как A:link присваивает стиль непосещенным ссылкам. Вот пример посложнее:

A:link, A:visited { text-decoration: none }
A:hover { background: cyan }

Последнее правило знакомит нас с новым псевдо-классом :hover. При условии, что пользователь перемещает указующее устройство (вроде мыши), определенный стиль будет приложен к элементу, когда пользователь двигает курсор над («зависает» над) ссылкой. Вот как это выглядит:

У псевдо-класса :hover интересная история. Он появился в CSS2 после того, как соответствующий эффект стал популярен среди программистов JavaScript. Решение в JavaScript требует сложного кода по сравнению с псевдо-классами CSS, и это пример того, как CSS собирает эффекты, ставшие популярными среди Веб-дизайнеров.

Слово о каскадах

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

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

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

Мы углубимся в детали каскадирования в главе 15, «Каскадирование и наследование».

• пробельные символы: пробел, символы табуляции, символы перехода на новую строку.

Из символов алфавита формируются лексемы языка:

• идентификаторы;
• ключевые (зарезервированные) слова;
• знаки операций;
• константы;
• разделители (скобки, точка, запятая, пробельные символы).

Границы лексем определяются другими лексемами, такими, как разделители или знаки операций.

Идентификаторы

Идентификатор — это имя программного объекта. В идентификаторе могут использоваться латинские буквы, цифры и знак подчеркивания. Прописные и строчные буквы различаются, например, sysop, SySoP и SYSOP — три различных имени. Первым символом идентификатора может быть буква или знак подчеркивания, но не цифра. Пробелы внутри имен не допускаются.

СоветДля улучшения читаемости программы следует давать объектам осмысленные имена. Существует соглашение о правилах создания имен, называемое венгерской нотацией (поскольку предложил ее сотрудник компании Microsoft венгр по национальности), по которому каждое слово, составляющее идентификатор, начинается с прописной буквы, а вначале ставится префикс, соответствующий типу величины, например, iMaxLength, IpfnSetFirstDialog.
Другая традиция — разделять слова, составляющие имя, знаками подчеркивания: maxjength, number_of_galosh.

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

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

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

Ключевые слова — это зарезервированные идентификаторы, которые имеют специальное значение для компилятора. Их можно использовать только в том смысле, в котором они определены. Список ключевых слов C++ приведен в таблице ниже.

Знаки операций

Знак операции — это один или более символов, определяющих действие над операндами. Внутри знака операции пробелы не допускаются. Операции делятся на унарные, бинарные и тернарную по количеству участвующих в них операндов. Знаки операций приведены в отдельной заметке – Операции языка C++

Один и тот же знак может интерпретироваться по-разному в зависимости от контекста. Все знаки операций за исключением [ ], ( ) и ? : представляют собой отдельные лексемы.

Большинство стандартных операций может быть переопределено (перегружено).

Константы

Константами называют неизменяемые величины. Различаются целые, вещественные, символьные и строковые константы. Компилятор, выделив константу в качестве лексемы, относит ее к одному из типов по ее внешнему виду (формат константы можно указать самостоятельно).

Форматы констант, соответствующие каждому типу, приведены в таблице ниже.

Пример комментария CSS — Как закомментировать CSS

Комментарии используются в CSS для объяснения блока кода или для внесения временных изменений во время разработки. Закомментированный код не выполняется.

Как однострочные, так и многострочные комментарии в CSS начинаются с / * и заканчиваются * / , и вы можете добавить столько комментариев в свою таблицу стилей, сколько захотите. Например:

  / * Это однострочный комментарий * /
.group: after {
  содержание: "";
  дисплей: таблица;
  ясно: оба;
}

/ *
  Это
  многострочный
  комментарий
* /  

Вы также можете сделать свои комментарии более удобочитаемыми, стилизовав их:

  / *
***
* РАЗДЕЛ ДЛЯ СТИЛЯ h3
***
* Абзац с информацией
* что было бы полезно для кого-то
* кто не писал код.* Звездочки вокруг абзаца
* помочь сделать его более читабельным.
***
* /  

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

  / *
* СОДЕРЖАНИЕ CSS
*
* 1.0 - Сброс
* 2.0 - Шрифты
* 3.0 - Глобалы
* 4.0 - Цветовая палитра
* 5.0 - Заголовок
* 6.0 - Кузов
* 6.1 - Ползунки
* 6.2 - Изображения
* 7.0 - Нижний колонтитул
* /

/ *** 1.0 - Сброс *** /

/ *** 2.0 - Шрифты *** /

/ *** 3.0 - Глобальные *** /

/ *** 4.0 - Цветовая палитра *** /

/ *** 5.0 - Заголовок *** /

/ *** 6.0 - Кузов *** /
h3 {
  размер шрифта: 1.2em;
  семейство шрифтов: "Ubuntu", serif;
  текст-преобразование: прописные буквы;
}

/ *** 5.1 - Ползунки *** /

/ *** 5.2 - Изображения *** /

/ *** 7.0 - Нижний колонтитул *** /  

Еще немного о CSS:

Когда мы говорим о синтаксисе CSS, мы говорим о том, как все устроено.Существуют правила о том, что куда идет, и поэтому вы можете последовательно писать CSS, а программа (например, браузер) может интерпретировать его и правильно применить к странице.

Есть два основных способа написать CSS.

Особенности специфики CSS: Уловки CSS

Встроенный CSS применяет стили к отдельному элементу и его дочерним элементам, пока не встретится другой стиль, перекрывающий первый.

Чтобы применить встроенный CSS, добавьте атрибут style к элементу HTML, который вы хотите изменить.Внутри кавычек укажите разделенный точкой с запятой список пар ключ / значение (каждая, в свою очередь, разделенных двоеточием), указывающих стили для установки.

Вот пример встроенного CSS. Слова «Один» и «Два» будут иметь желтый цвет фона и красный цвет текста. Слово «Три» имеет новый стиль, который заменяет первый, и имеет зеленый цвет фона и голубой цвет текста. В этом примере мы применяем стили к тегам

  

  Один
  

    Два
  
  

    Три
  
  

  


  Один
  

    Два
  
  

    Три
  


  Четыре
  

 
 
 
 
 / * Установить белый цвет текста и оттенок бирюзового фона * / 
 
 п {
 
 цвет: белый; 
 
 цвет фона: # 2594A4; 
 
} 
 
 
  

 
 
 
 
 п {
 
 цвет: белый; / * Установить белый цвет текста * / 
 
 цвет фона: # 2594A4; / * Установить цвет фона на оттенок бирюзового * / 
 
} 
 
 
  

 
 
 
 
  
 Как комментировать в CSS 
  

 
 
 Этот абзац оформлен с помощью CSS.Оба свойства font-color и background-color были установлены так, что цвет шрифта - белый, а цвет фона - оттенок бирюзового. 
 

 
 
  

 
 
 
 
 п {
 
 цвет: белый; / * Установить белый цвет текста * / 
 
 цвет фона: # 2594A4; / * Установить цвет фона на оттенок бирюзового * / 
 
} 

  

 
 
 
 
 
 

 
  
 Комментирование в Boostrap CSS 
  

 
 
 Как и в примере выше, этот абзац оформлен с помощью CSS. Оба свойства font-color и background-color были установлены таким образом, чтобы цвет шрифта был белым, а цвет фона - оттенком бирюзового. 
 

 
 
 

 
 
  

 
 
 
 
 п {
 
 цвет: белый; 
 
 цвет фона: # 2594A4; 
 
} 

  

 
 
 
 
 п {
 
 / * цвет: белый; * / 
 
 цвет фона: # 2594A4; 
 
} 

  

 
 
 
 
  
 Как комментировать в CSS 
  

 
 
 Этот абзац оформлен с помощью CSS.В то время как свойство font-color было «закомментировано», свойство background-color - нет. Это означает, что цвет шрифта остается черным, но цвет фона меняется на приятный бирюзовый. 
 

 
 
  

 
 
 
 
 / * 
 
 п {
 
 цвет: белый; 
 
 цвет фона: # 2594A4; 
 
} 
 
 * / 

  

 
 
 
 
  
 Как комментировать в CSS 
  

 
 
 Этот абзац оформлен с использованием CSS, который был "закомментирован"."Фактически это означает, что CSS отменен, поэтому HTML выглядит без стиля. 
 

 
 
  

 
  
 / * Это однострочный комментарий * / 
  

 
  
 / * Это
это многострочный
комментарий * / 
  

 
  
 селектор {
  стоимость имущества;
} 
  

 
  
 h2 {
  цвет синий;
} 
  

 
  
 h2 {
  размер шрифта: 24 пикселя;
  font-weight: жирный;
  граница: сплошной черный 1px;
  цвет: розовый;
}
/ * Это сделает все заголовки  
 большими, жирными, розовыми и внутри тонкого черного прямоугольника! * / 
 
  

 
  
 #box {
  отступ: 10 пикселей;
} 
  

 
  
 #box {
  маржа: 10px 5px 10px 5px;
} 
  

 
  
 п {
  семейство шрифтов: Arial, Helvetica, sans-serif;
} 
  

 
  
 селектор {
  правила;
  правила;
  правила;
} 
  

 
  
 a.link {
  размер шрифта: 12 пикселей;
}

/ * HTML выбран: ,
 * / 
  

 
  
 .jumbo {
  размер текста: 1000 пикселей;
}

/ * Выбран HTML: ,
 * / 
  

 
  
 кузов {
  цвет фона: # 333;
} 
  

 
  
 h2 {
  цвет синий;
} 
  

 
  
 a {
  подчеркивание текста: нет;
} 
  

 
  
 #thatThingINeededToStyle {
  цвет синий;
  размер шрифта: 24 пикселя;
}

/ * HTML выбран:  * / 
  

 
  
 a # codecademy {
  цвет: фиолетовый;
}

/ * Выбран HTML:  * / 
  

 
  
 a [href = "http: // codecademy.com "] {
  цвет: фиолетовый;
}

/ * Выбран HTML:  * / 
  

 
  
 input [type = "text"] {
  ширина: 100 пикселей;
}

/ * Выбран HTML:  * / 
  

 
  
 ввод [обязательно] {
  граница: красное сплошное 1px;
}

/ * HTML выбран:  * / 
  

 
  
 ul> li {
  дисплей: встроенный блок
}

/ * Выбирает только элементы списка первого уровня во всех неупорядоченных списках в HTML * / 
  

 
  
 ул а {
  подчеркивание текста: нет;
}

/ * Выбирает все якоря, у которых есть неупорядоченный список их предков * / 
  

 
  
 ul + span {
  дисплей: встроенный;
}

/ * Выбирает только интервалы, которые следуют непосредственно за неупорядоченным списком * / 
  

 
  
 a ~ h2 {
  цвет синий;
}

/ * Выбирает все элементы h2, которые находятся в непосредственной близости от привязки * / 
  

 
  
 * {
  цвет фона: синий;
}

/ * Выбирает ВСЕ элементы HTML на странице * / 
  

 
  
 кузов * {
  красный цвет;
}

/ * Выбирает ВСЕХ потомков тела * / 
  

 
  
 div> * {
  красный цвет;
}

/ * Выбирает ВСЕХ потомков первого уровня всех div на странице * / 
  

 
  
 li: первенец {
  красный цвет;
}

/ *
    Это выбирает только элементы 
, перед которыми нет элементов.
    

      
 Выбрано; будет красным 
      
 Не выбран 
      
 Не выбран 
    
* /

li: last-child {
  красный цвет;
}

/ * Делается наоборот; только последний 
 будет красным. * / 
  

 
  
 a: hover {
  оформление текста: подчеркивание;
}

/ * Подчеркивает все ссылки, когда пользователь наводит на них указатель мыши * /

a: active {
  font-weight: жирный;
}

/ * Все ссылки будут выделены жирным шрифтом, пока пользователь нажимает на них.* / 
  

  {
  "способствует": {
    "languages": [
      {
        "id": "abc",
        "расширения": [".abc"]
      }
    ],
    "грамматики": [
      {
        "язык": "abc",
        "scopeName": "источник.abc ",
        "путь": "./syntaxes/abc.tmGrammar.json"
      }
    ]
  }
}  

  {
  "scopeName": "source.abc",
  "шаблоны": [{"включать": "# выражение"}],
  "репозиторий": {
    "выражение": {
      "шаблоны": [{"включать": "# букву"}, {"включать": "# парен-выражение"}]
    },
    "письмо": {
      "match": "a | b | c",
      "name": "keyword.letter"
    },
    "парен-выражение": {
      "начинать": "\\(",
      "конец": "\\)",
      "beginCaptures": {
        "0": {"name": "знаки препинания.paren.open "}
      },
      "endCaptures": {
        "0": {"name": "punctuation.paren.close"}
      },
      "name": "expression.group",
      "шаблоны": [{"включать": "# выражение"}]
    }
  }
}  

  а
(
    б
)
Икс
(
    (
        c
        xyz
    )
)
(
а
  

  ключевое слово.письмо, source.abc
(punctuation.paren.open, expression.group, source.abc
    b ключевое слово.letter, expression.group, source.abc
) punctuation.paren.close, expression.group, source.abc
x source.abc
(punctuation.paren.open, expression.group, source.abc
    (punctuation.paren.open, expression.group, expression.group, source.abc
        c keyword.letter, expression.group, expression.group, source.abc
        xyz expression.group, expression.group, source.abc
    ) punctuation.paren.close, expression.group, expression.group, source.abc
) punctuation.paren.close, expression.group, source.abc
(punctuation.paren.open, expression.group, source.abc
ключевое слово.letter, source.abc
  

  {
  "способствует": {
    "грамматики": [
      {
        "путь": "./syntaxes/abc.tmLanguage.json",
        "scopeName": "source.abc",
        "embeddedLanguages": {
          "мета.embedded.block.javascript ":" javascript "
        }
      }
    ]
  }
}  

  # Установите js-yaml как зависимость только для разработки в вашем расширении
$ npm установить js-yaml --save-dev

# Используйте инструмент командной строки для преобразования грамматики yaml в json
Синтаксисы $ npx js-yaml / abc.tmLanguage.yaml> синтаксисы / abc.tmLanguage.json  

  {
  "способствует": {
    "грамматики": [
      {
        "путь": "./syntaxes/injection.json",
        "scopeName": "todo-comment.injection",
        "injectTo": ["source.js"]
      }
    ]
  }
}  

  {
  "scopeName": "todo-comment.injection",
  "InjectionSelector": "L: comment.line.d double-slash",
  "шаблоны": [
    {
      "include": "# todo-keyword"
    }
  ],
  "репозиторий": {
    "todo-keyword": {
      "match": "TODO",
      "name": "ключевое слово.делать"
    }
  }
}  

  {
  "способствует": {
    "грамматики": [
      {
        "путь": "./syntaxes/injection.json",
        "scopeName": "sql-string.injection",
        "injectTo": ["источник.js "],
        "embeddedLanguages": {
          "meta.embedded.inline.sql": "sql"
        }
      }
    ]
  }
}  

  {
  "способствует": {
    "грамматики": [
      {
        "путь": "./syntaxes/injection.json",
        "scopeName": "sql-string.injection",
        "injectTo": ["source.js"],
        "embeddedLanguages": {
          "my.sql.template.string": "sql"
        },
        "tokenTypes": {
          "мой.sql.template.string ":" другое "
        }
      }
    ]
  }
}  

  {
  "ключ": "cmd + alt + shift + i",
  "команда": "редактор.action.inspectTMScopes "
}