Редактор 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, покупка SSL сертификатов, доработка сайтов, сопровождение сайтов, разработка сайтов, техподдержка сайтов
Была ли эта статья полезна? Есть вопрос?
Cмотрите другие статьи: