Подготовка к работе с таблицами CSS
Просмотр кода и таблиц CSS, связанных с элементом
Как изменять значения свойств?
В предыдущих двух главах вы ознакомились с теоретической частью построения таблиц CSS (глава 21, глава 22). Теперь самое время приступить к практической работе и начать оформлять внешний вид сайта.
Основной принцип работы с таблицами довольно прост:
- вы выбираете элемент, который необходимо изменить;
- открываете соответствующую таблицу, отвечающую за внешний вид данного элемента;
- вносите изменения;
- просматриваете, как эти изменения повлияли на внешний вид сайта.
Как это происходит на практике?
Подготовка к работе с таблицами CSS
1.В Яндекс.Браузере открываем несколько вкладок (рис. 195):
- административную панель сайта;
- страницу сайта, на которой находится нужный элемент;
- техническую страницу браузера "Очистить историю" (открывается при помощи сочетания клавиш Ctrl + Shift + Delete).
2. В отдельном окне открываем редактор кода Notepad++ (все файлы CSS по умолчанию должны быть настроены на открытие именно этим редактором!).
Начинаем работать
Итак, всё готово: открыты все вкладки и редактор кода, выбран элемент, который должен быть оформлен. Что же дальше? Есть два способа:
- Открыть нужный файл CSS, открыть файл index.php шаблона, а так же другие файлы, влияющие на код страницы и её оформление, внести изменения и затем просмотреть, что же получилось. Это очень неудобный и трудоёмкий способ, да ещё и требующий хорошего знания HTML, PHP, принципа построения страницы и много чего ещё!
- Воспользоваться инструментами разработчика, имеющимися в Яндекс.Браузере. Это намного проще и удобнее, поэтому именно этот способ и будет рассматриваться далее.
Инструменты разработчика
Что бы открыть эти инструменты удобнее всего воспользоваться комбинацией клавиш Ctrl + Shift + I, но можно пойти и более длинным способом и открыть через меню браузера: Значок меню > Дополнительно > Дополнительные инструменты > Инструменты разработчика. Откройте нужную страницу сайта и, воспользовавшись одним из этих вариантов, откройте Инструменты разработчика; при этом браузер разделит экран на две части: в левой будет находиться ваша страница, а в правой - панель с инструментами (рис.196):
Эта панель может выполнять большое количество различных функций, необходимых для разработки сайта, поэтому описывать их все прямо сейчас просто нет смысла; рассмотрим только то, что непосредственно касается работы с таблицами CSS.
Для начала ознакомимся с основными кнопками (рис.197):
- Кнопка 1 позволяет перейти в режим просмотра кода и таблиц CSS, связанных с выбранным элементом.
- Кнопка 2 предназначена для закрытия панели.
Просмотр кода и таблиц CSS, связанных с элементом
Для того, что бы просмотреть всё, что связано с элементом, необходимо нажать на кнопку 1 и навести курсор на элемент (2); при этом цвет изображения на кнопке изменится на синий (рис.198):
При наведении курсора на элемент будут показаны:
- в строке сверху - тег (на рисунке - а) и класс элемента (на рисунке - btn dropdown-toggle);
- размеры;
- отступы (жёлто-коричневый цвет);
- внутренние (вложенные) элементы;
- сам элемент.
Что бы просмотреть код и таблицы CSS, связанные с выбранным элементом, необходимо кликнуть на него левой кнопкой мыши. В результате в панели появится следующее (рис.199):
Вверху появиться HTML-код (1), внизу - список правил CSS, которые применяются для этого элемента (2). Помимо правила здесь указываются и адреса файлов .css, из которых взяты эти правила (3).
После того, как вы выберите элемент (кликните на него), работа панели измениться. Изображение на кнопке 1 (рис.198) снова станет тёмно-серым; строка HTML-кода, с которой непосредственно связан элемент будет выделена синим цветом; сам сайт будет работать как обычно (т.е., к примеру, если вы кликните на ту же кнопку, то она теперь сработает так же, как и работает при обычном просмотре).
Работа с HTML-кодом
В этом режиме вы можете просматривать не только сам HTML-код страницы, но и видеть отдельно каждый элемент, к которому относится та или иная строка кода. Для этого необходимо просто навести курсор на строку:
При этом строка будет подсвечена светло-голубым фоном, а на странице сайта будет выделен элемент, который связан с этой строкой (точно так же, как и на рис.198). При этом серым фоном останется выделен элемент, для которого в данный момент открыты правила CSS, т.е. наведя курсор на другую строку вы сможете только просмотреть этот элемент на странице, правила оформления при этом не открываются. Если же вы хотите просмотреть ещё и правила CSS для показанного элемента, то нужно кликнуть на эту строку; при этом строка будет подсвечена синим цветом (как на рис.200), а внизу откроются правила, применяемые для оформления.
Обратите внимание: если стрелка в начале строки смотрит вниз, это значит, что строка открыта, т.е. видно то, что вложено в эту строку; если стрелка смотрит вправо, это означает, что вложенное содержимое скрыто; что бы его просмотреть, необходимо кликнуть на стрелку.
Просмотр правил CSS
Для того, что бы просмотреть все правила, применяемые для выбранного элемента, нужно прокрутить полосу прокрутки вниз или вверх (рис.201):
Каждое правило отделено от другого тонкой серой чертой; для каждого правила указан адрес файла .css из которого оно взято. Адреса указаны в сокращённом виде; для просмотра полного адреса наведите на него курсор:
Если при этом кликнуть на адрес левой кнопкой мыши, то в панели откроется весь файл, но так как для редактирования этих файлов будет использоваться редактор Notepad++, то данная функция в общем-то, не нужна, намного удобнее работать с таблицами именно в этом редакторе, а не в панели инструментов.
Обратите внимание на то, что адрес заканчивается не стандартно: двоеточием и числом (на рисунке это :9). Данное число специально отделено от адреса и указывает номер строки, в которой находится (с которой начинается) данное правило.
Если в правиле зачёркнуты какие-либо строки, это значит, что данная строка не используется: она отменена другим правилом. Дело в том, что при создании страницы CMS подключает несколько различных файлов, влияющих на окончательный результат; при этом более высокий приоритет будут иметь файлы, находящиеся в шаблоне, т.е. если для элемента прописаны в разных файлах правила с одинаковыми свойствами, то будет принято к оформлению правило, прописанное в файлах шаблона.
Временное изменение правил
Это одна из самых важных и удобных функций в Инструментах. При помощи этой функции вы можете не только временно изменить значения свойств и сразу же увидеть результат, но и прописать новые правила или вписать в уже имеющиеся правила новые свойства и указать для них значения! Как только изменения будут внесены, вы сможете не перезагружая страницы увидеть как это повлияло на внешний вид элемента.
Внесённые изменения являются временными и не сохраняются в самих файлах. Для сброса к изначальному состоянию достаточно просто перезагрузить страницу.
Не сложно догадаться чем это так удобно: вы можете экспериментировать с оформлением элемента сколько угодно, и когда будет найден оптимальный вариант, достаточно просто открыть в редакторе нужный файл, внести в него уже известные вам параметры, сохранить и просто перезагрузить страницу! Именно поэтому при оформлении внешнего вида элементов сайта нужно одновременно использовать три открытые вкладки в браузере и открытый в отдельном окне редактор.
Как изменять значения свойств?
Вы можете изменить значение свойства или просто его отключить и посмотреть на то, как это повлияет на внешний вид элемента. Для отключения свойства достаточно просто навести курсор на нужное правило (рис.203) и снять "галочку" (чекбокс) с выбранного свойства; при этом свойство будет зачёркнуто:
Для изменения значения свойства необходимо кликнуть на это значение (при этом оно будет выделено синим цветом), и ввести новое (рис.204):
В любом случае вы сразу же увидите на странице сайта результат произведённых изменений. Если полученный результат вас не устроил, продолжайте экспериментировать дальше: вводите новое значение и смотрите, что получилось до тех пор, пока не получится то, что вы хотели.
Если вас устраивает полученный результат, перейдите в окно с редактором Notepad++, откройте в нём нужный файл CSS, найдите соответствующую строку (номер строки можно просмотреть в конце адреса файла с правилом после двоеточия), внесите те же самые изменения и сохраните (это можно сделать при помощи комбинации клавиш Ctrl + S ). Далее перезагрузите страницу; если всё сделано правильно, внесённые изменения соответствующим образом отразятся на оформлении элемента, т.е. элемент будет отображаться так же, каким вы его только что видели при работе с панелью инструментов.
То же самое можно сделать и с названием свойства. Если кликнуть на название свойства, его можно изменить, однако лучше прописать новое свойство в другой строке.
Как прописать новое свойство?
Для того, что бы прописать новое свойство в существующее правило, необходимо навести курсор на свободное место и кликнуть левой кнопкой мыши; при этом откроется небольшое окошко (на рис.205 отмечено зелёной стрелкой), в которое нужно ввести название свойства и нажать Enter. Далее откроется окошко, в которое нужно ввести значение для данного свойства:
Если вам необходимо создать новое правило, то всё тоже самое нужно сделать в самой верхней строке element.style { ... }.
В любом случае при достижении ожидаемого результата необходимо прописать эти данные в самом файле CSS при помощи редактора Notepad++.
Как всё это происходит на практике, вы узнаете из примеров в следующих двух главах, а пока ещё об одной удобной функции Инструментов.
Определение цвета
Иногда возникает необходимость точно определить цвет на каком либо участке (в какой-либо точке) страницы в стандартных единицах, например, в RGB. Как это сделать?
В нижней части Инструментов (с правилами CSS) найдите какое-либо свойство, влияющее на цвет, например, border-color. Около значения этого свойства вы увидите маленький квадратик, имеющий тот цвет, который указан в качестве значения. Обратите внимание на то, что если значение прописано как "RGB", т.е. заглавными буквами, данный квадратик не показывается; что бы квадратик был показан в строке, нужно поменять большие буквы на маленькие ("rgb"). Кликнув на этот квадратик, вы откроете специальное окошко, с помощью которого можно изменить цвет (рис.206):
Но самое главное, у этого окошка имеется ещё одна важная функция: определение цвета. Для этого достаточно просто навести курсор на нужное место на странице сайта, в результате чего в окошке появиться вся информация о выбранном цвете:
- 1 - расположение цвета в цветовой гамме;
- 2 - прозрачность;
- 3 - значение в выбранной кодировке (RGB(a), HEX, HSLA).
Вот и всё, что на данный момент необходимо знать о панели инструментов разработчика. В следующей главе будут рассмотрены примеры практической работы с уже имеющимися правилами.
