Редактор CSS в вашем браузере

Для описания средства разработки, которые встроены в браузер, рассмотрим задачу. Допустим, что нам надо подобрать цвет текста ссылки, то есть задать свойства "color" тегу <a>. Мы хотим выбрать подходящий цвет, но постоянно изменять CSS файл, сохранять его и пере запускать страницу - это муторно. Есть другой способ - можно в режиме реального времени изменять цвет текста без перезагрузки страницы. Причём выбор цвета происходит через интерфейс палитры, поэтому угадывать числа rgb или hex нет необходимости - можно подобрать цвет прямо "на глаз".

Как открыть средства разработки?

Если вы работаете через браузер FireFox или Chrome, то откройте страницу сайта, которую хотите отредактировать, и кликните на клавишу F12 на клавиатуре. Откроется панель разработчика.
В большинстве браузеров средства разработки называются более-менее одинаково и имеют очень схожий функционал. Далее в статье будет рассматриваться браузер FireFox.
Теперь необходимо выбрать элемент, у которого мы хотим изменить CSS свойства. Выбор можно сделать с помощью курсора мыши в появившемся окне, в закладке "Инспектор": В инспекторе нужно найти интересующий тег и кликнуть по нему. Но искать так долго, поэтому для упрощения поиска можно воспользоваться функцией выбора элемента прямо из дизайна сайта. Для этого найдите с левом верхнем углу иконку выбора элемента курсором: или нажмите комбинацию клавиш Ctrl + Shift + C . Теперь можно выбрать курсором любой элемент на странице сайта и кликнуть на него: Тогда в окне инспектора будет автоматически найден этот элемент, а в закладке "Правил" будут отображены все CSS свойства, которые применены к выбранному элементу. Некоторые свойства перезаписывают другие, поэтому будут зачёркнуты: Чем выше свойство стоит в этом списке, тем оно важнее и именно его значение будет применено.

Как менять CSS свойства?

В окне "Правил" можно изменять значения свойств, а так же временно отключать их. Для временного отключения свойства снимите галочку в начале строки перед ним: после чего строка станет перечёркнутой значение свойства не будет применяться.

Вернёмся к нашей задаче: нам надо изменить цвет ссылки. Поэтому выбираем ссылку и задаем ей свойство "color". Для этого в окне правил, на самой верхней строке, кликаем на строчку между фигурных скобок { }. Откроется поле для ввода названия свойства: Можно выбрать свойство из выпадающего списка, а можно написать вручную. После окончания ввода названия нажимте двоеточие ":", и произойдёт переход к заполнению значения свойства. После указания значения нажмите Enter на клавиатуре. В значении свойства color можно написать rgb, hex или название цвета. Проще всего написать название или первые попавшиеся 6 цифр. После чего можно нажать на раскрашенный этим цветом кружок и появится палитра: В этой палитре можно кликнуть на любой цвет и он станет значением свойства. Одновременно с изменением значения в "Правилах", изменится цвет ссылки в дизайне сайта. Для этого не надо перезагружать страницу.
Обратите внимание, что никакие изменения, сделанные таким способом, не сохранятся в css страницы. Это означает, что если вы нечаянно перезагрузите страницу, то потеряете все сделанные изменения. Поэтому описанный в этой статье способ подходит только для подбора значения свойств. Но сохранять их надо вручную, в файлы страницы.
MouseDC.ru - хостинг, виртуальный хостинг, покупка доменов, проверка доменов, WHOIS, курсы создания сайтов, вебинары по созданию, курсы разработки сайтов, доработка сайтов, сопровождение сайтов, разработка сайтов, техподдержка сайтов
Была ли эта статья полезна? Есть вопрос?
Cмотрите другие статьи: