CASCADE

Сегодня мы рассмотрим что такое CASCADE и с чем его едят, также рассмотрим как редактировать CSS свойства у класса вручную.

CASCADE — Создает дерево для потомков и задаем им CSS стили, это как формирование дерева, от базового класса к потомкам.

Рассмотрим пример, здесь тегу LI присоединяется псевдокласс :hover, к нему прикрепляются теги (P и SPAN) а к ним уже задаются стили.

В итоге на выходе мы получим вот такой вот код:

li:hover{...}
li:hover p{...}
li:hover span{...}

li div{...}
li div:hover:not(p){...}

Создание CASCADE

Переходим во вкладку CASCADE и жмем на блок с плюсиком, после чего задаем имя и нажимаем ок.

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

Добавляем классы

В CASCADE помимо класса можно добавить свое правило, например (> div *)

Жмем правую кнопку мыши, после чего появится меню, рассмотрим что в этом меню.

Создать

  1. Style Sheet — CSS стили
  2. Extend — Унаследует стили от других классов
  3. Join — Продлить соединение
  4. Join Reverse — Продлить соединение в обратную сторону

Селекторы

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

Задаем свои правила

В появившемся меню мы можем вписать свои правила, например давайте впишем (a:hover > span:first-child)

Теперь как в Blueprint, тянем линию от потомка и отпускам в любом месте, в появившемся меню выберем Style Sheet.

Кликаем по Style Sheet и мы увидим что рабочий класс стал
(a:hover > span:first-child) для него теперь будут задаваться стили.

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

Подключение классов из VTC

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

Также можно протянуть линию прямо из рабочего класса.

Редактирование CSS свойств

Делается это тоже очень просто, переходим во кладку CSS, и ниже мы видим код.

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

Если удалить медиа блоки, то свойства перейдут для медиа (Все устройства)

После внесения изменений нажмите на кнопку (Сохранить изменения) изменения сразу же вступят в силу.

Все!