Видео версия скоро.

Здравствуйте! Это мой четвертый урок по движку для интернет магазинов HEEG.HTML и он будет полностью посвящен CSS стилям и всевозможным способам изменения внешнего вида нашего магазина. Когда мы создаем свой интернет магазин нам хочется сделать уникальным по наполнению и дизайну. Мы хотим поменять цвет и размер элементов меню, возможно поменять их поведение, изменить фон и базовый шрифт сайта все это возможно сделать изменяя CSS стили элементов на нашей странице. Но что такое CSS? Погуглив мы узнаем, что это язык описания внешнего вида документа или каскадные таблицы стилей. Именно этим языком описывается внешний вид любого сайта.

Чтобы не загружать вас лишней терминологией давайте сразу перейдем к практике. Давайте скачаем последний вариант движка и начнем наши эксперименты. В данный момент это версия 5.1. Скачиваем и распаковываем в новую папку.

Давайте создадим новую статью, напишем в ней код для простейшего блока страницы. Этот блок будет содержать обычный текст, внешний вид которого мы попробуем с вами поменять. Любой стандартный html блок должен начинаться определенным тегом и заканчиваться таким же тегом но со слешем. Тег это небольшое служебное слово в значках <>. Если говорить математическим языком, то теги это такие сложные скобки, которые открывают и закрывают наше выражение или наш блок. Принято, что для простого текста это тег <a> для абзаца <p> для элемента списка это тег <li> но на самом деле они могут быть совершенно любыми.

Мы создали свой первый блок <a>Привет ХИГ!</a> давайте добавим ему стиль и сделаем цвет текста красным <a style=”color:red;”>Привет ХИГ!</a> да действительно, второй привет стал красным. Но мы написали его на новой строчке, а у нас он в той же. Дело в том, что html код не учитывает новую строку или несколько пробелов подряд. Давайте добавим в наш текст пробелов и посмотрим , что это изменит. Ничего. Наши пробелы код не замелил. Но если нам в тексте нужно сделать несколько пробелов подряд нам нужно использовать символ неразрывного пробела вот он   попробуем его. Это спец символ. Их очень много разных для разных значков, тире и так далее и их код начинается со значка &. С пробелом разобрались. Чтобы начать текст с новой строки нужно вставить специальный тег <br> закрывать его не нужно. Текст стал с новой строчки. НО стоит помнить что Тиддливики понимает пустую строчку как новый абзац это один из элементов вики разметки, поэтому пустых строчек в html коде лучше не оставлять.

Теперь вернемся к нашему цвету. Мы его обозначили как red, но на самом деле цветов на много больше, а именно 256х256х256 в формате RGB то есть каждый цвет это сочетание красного зеленого и голубого. Указан цвет может быть в формате ргб тогда это выглядит так color:rgb(255, 0, 0); или в шестнадцатеричном формате HEX color:#ff0000; или в сокращенном hex color:#f00; это один и тот же цвет. Его можно делать полупрозрачным, использовать градиент и многое другое. В одном уроке все нюансы каждого свойства описать невозможно, поэтому по css есть специальные он-лайн справочники, где можно узнать как работает то или иное свойство.

Мы научились делать красным цвет текста в одном блоке. А что если у нас блоков <a> на странице 100 штук и мы не хотим для каждого указывать цвет. В этом случае мы можем вынести общий стиль в теги <style> попробуем. Ура теперь обе строчки красные. А как покрасить еще и блок b? Пишем блоки через запятую.

А теперь самое интересное. У нашего блока может быть много разных свойств а не только свойство style . у блока может быть свойство id class title и многие другие. Мы можем присваивать стили блока по любому свойсву. Но для этого есть специальная запись. Самое распространенное свойство блока это class. Давайте присвоим его одному нашему блоку и покрасим его фон в серый.

<style>

a, b {color:red;}

.grey{background-color:#555;}

</style>

<a class="grey">Привет ХИГ!</a>

<b >Привет&nbsp;&nbsp;&nbsp;&nbsp;ХИГ!</b>

Всё получилось.

Структура нашей веб страницы может быть очень сложной. Блоки могут содержать в себе другие блоки, те в свою очередь другие и так далее. Весь хтмл документ представляет из себя довольно сложную матрешку или DOM дерево. Самый верхний элемент в этой матрешке это <html> затем идет тег <body> который открывает тело нашего документа. в этом дереве мы можем обратиться к любому элементу и назначить ему любые свойства. Можно обращаться к блоку не только по его свойству или названию, а просто ориентируясь на его положение в дереве. Например применить свойство к первому потомку или к каждому второму потомку или к блоку, если он следует после определенного блока. Свойсва CSS описываю не только внешний вид, но и поведение этих блоков. Блоки могут растягиваться, прижиматься к левому краю, перескакивать вниз, если не умещаются по ширине, появляться при клике или наведении на другой блок. Поведение блоков может меняться в зависимости он ширины экрана. Для маленьких экранов мы можем превращать текст в значек или просто скрывать некоторые элементы и показывать другие.

Мы научились добавлять стили в конкретном блоке в конкретной статье, но стили обыно записывают в отдельной статье и тогда они действуют на весь магазин. В движке heeg.html таких статей со стилями несколько. Самая базовая статья это стили tiddlywiki $:/themes/tiddlywiki/vanilla/base затем идет базовая статья стилей интернет магазина $:/_aa.giff/StyleSheetTopic есть отдельные статьи со стилями верхнего и левого меню, стили раздичных слайдеров с картинками, стиль логотипа и плашки с корзиной. Их общие черты это наличие StyleSheet в название и специальная метка статьи $:/tags/Stylesheet если такой метки нет, то стили работать не будут. Такой подход разделения стилей на несколько статей позволяет нам делать интересные вещи. Например мы можем зайти в другой магазин heeg.html и перетащить в свой стили верхнего меню или плашки с корзиной. Давайте попробуем перенести статью со стилями $:/_aa.giff/StyleSheetTopicRibbon из других магазинов и посмотрим как изменится значок корзинки.

CSS стили используются на всех сайтах и в интернете очень много справочной информации по ним. В тиддливики они абсолютно такие же, но в тиддливики внутри статей со стилями можно использовать макросы и это очень удобно. Как вы помните макрос начинается со значков '<<>>' самый распространенный макрос в стилях это макрос colour . этим макросом мы можем связаться с нашей палитрой и тогда если мы будем менять цвет в одном месте , он будет меняться сразу у нескольких стилей. Например зайдем в текущую палитру цветов найдем пункт sidebar-foreground и поменяем цвет. Как видим поменялся цвет верхнего меню и бокового. Теперь найдем наш sidebar-foreground в нашей статье со стилями $:/_aa.giff/StyleSheetTopic как мы видим здесь он указан в качестве цвета фона через макрос colour . Еще один макрос это if через него можно добавлять некоторые условия при котором включается некоторый блок со стилями. В тиддли вики можно использовать в стилях фильтры и любые другие плагины или макросы, это значительно расширяет возможности стилей.

Ну что же. Мы уже так много знаем про стили, но как нам все-таки например поменять ширину левого меню или хотя бы уменьшить шрифт, если названия не влезают? Впервую очередь нам нужно узнать КАКОЙ СТИЛЬ НАМ НУЖНО МЕНЯТЬ. Для этого в браузерах есть так называемые инструменты разработчика. Панель вызывается ф12. Чтобы увидеть стили нашего левого меню нужно кликнуть по нему ПРАВОЙ клавишей мыши и выбрать "посмотреть код". Тогда мы увидим наше дерево блоков, перемещаясь по которому, мы можем просматривать стили привязанные к этим элементам. Как мы видим сначала идет блок текста с ссылкой, он лежит внутри блока списка поднимаемся еще на одну ступеньку вверх у найдем стиль class="tw-table-of-contents" и поменяем ему ширину. Как мы видим шиина меню увеличилась, НО это не значит, что мы внесли изменения на сайт. Пока мы просто провели маленький эксперимент, а теперь мы должны найти этот стиль в своих статьях стилях. Как мы помним для левого меню есть отдельная статья со стилями, но дополнительные стили левого меню будут встречаться и в основной статье со стилями магазина. Давайте введем в поиск наш стиль tw-table-of-contents и посмотрим где он встречается.

Заходим в поиск системных статей и вводим наш стиль tw-table-of-contents.