Код станицы. Как изменить код страницы в Google Chrome
Размер, цвет некоторых важных элементов блога — таких, как заголовок блога или поста, тег more и тому подобное. Нужный код искал вручную, экспериментируя с тестовым доменом, на основе чего позже писалась статья.
И вот недавно понадобилось изменить цвет ссылок. Перелопатив кучу литературы по этому вопросу, понял простую вещь: все приводят примеры из собственных шаблонов, но шаблоны-то у нас у всех разные и хорошо, если код из примера хоть чуть-чуть похож: не нытьем, так катаньем все равно найду — методом тыка.
С кодом ссылки номер не прошел. Все указывали совершенно разные пути. Задумался, нет ли простого и точного инструмента, как найти нужный код html на любом сайте.
Многие блоггеры даже с опытом испытывают трудности в незначительной доработке шаблона. В этом нет ничего страшного, ведь у каждого свои интересы и цели создания сайта.
Если вы хотите внести небольшие изменения в шаблон, например изменить любой заголовок, название статей и рубрик, цвет и размер шрифтов и ссылок,
обычно вполне достаточно научиться простому принципу, который рассмотрен в этой статье. Но бывают и сложные случаи, требуюущие либо более глубокого изучения html и css, либо помощи специалиста.
Однажды обратился знакомый с просьбой найти, где изменить цвет панели рубрик в его шаблоне. Закачал тему на тестовый поддомен. Настройки этого элемента хранились не в style.css, а в другом файле, поэтому человек не мог найти.
Как найти и изменить html и css код сайта
Если не любите длинные статьи, для вас в конце статьи
видеоурок, в котором рассказывается, как можно увидеть код html сайта с помощью Notepad++ и внести изменения в дизайн любого шаблона на примере, как поменять цвет шрифта. В видео найдутся и другие тонкости обращения с блогом. А для тех, кому ближе и понятнее текст, внизу подробный разбор темы со скриншотами.
httpv://youtu.be/uIlVvwCt2ho
Термины и понятия
Было бы точнее называть статью «Как найти код css
«, но я решил остановиться на «неправильном» названии, потому что в основном ответ на этот вопрос ищут в html. CSS и HTML — очень разные вещи, хоть и являются двумя частями одной системы. В интернете много технических статей, нам здесь достаточно будет понять, что:
- HTML
— отвечает за структуру сайта (что за чем следует, в каком порядке и т. д.). Это основа, на которой создан сайт. Если сравнить с домом, то это это его планировка, расположение комнат.
- CSS
— отвечает за дизайн (какие шрифты, размеры, цвета и подобное). Это общий стиль дома и стиль его отдельных комнат: какие обои будут, светильники, занавески, мебель. Поэтому документ, в котором прописываются коды css
, называется «таблица стилей»
И если вы задались вопросом, как изменить, например, цвет заголовка сайта, размер шрифта в текстах или цвет заголовков в сайдбаре, то искать все это нужно в таблице стилей CSS. Вот это единственное, что стоит понять для начала, чтобы вносить изменения в код самостоятельно.
Мне нравится превращать сложное в простое. Помню, давно, когда у меня была первая машина, очень старая, проводка гнилая, часто перегорали предохранители, и я тянул ее каждый раз на СТО на буксире. Представьте, сколько денег было выкинуто, при том что самостоятельная замена, как оказалось, стоит копейки.
Однажды я посмотрел, что именно делает мастер. До сих пор не знаю, как устроен предохранитель. Но знаю, где его менять). Мотор я чинить сам бы не стал, а уж предохранитель заменить не сложно. Так же и с сайтами.
Если вы не хотите стать программистом, то нет необходимости глубоко разбираться в программинге. Достаточно ясно понимать, что для чего предназначено, где это искать и как изменить. То, что можно, лучше изменить самим, а все остальное оставить специалистам. В статье о есть полезная ссылка на эту тему.
Нужно ли быть специалистом во всем
В seo-блогах часто ведутся дискуссии, нужно ли новичку глубоко разбираться в html, а еще лучше — научиться самим писать сайты, чтобы было все уникальное.. Ну, не знаю — каждому свое и тут уж кому что ближе. Мне интересно чуть больше, поэтому я сейчас дополнительно учусь у Владимира. В ноябре этого года Владимир открыл свой авторский блог. Его блог сделан на самом простом, бесплатном шаблоне, он его лишь чуть изменил под себя.
Через 10 дней существования блог занял 104-е место в рейтинге всех сайтов Рунета с посещаемостью около 1,5 тысяч человек в сутки. За 10 дней. Так в чем же дело? Владимир прекрасно разбирается в html, может заказать и купить себе уникальный шаблон. Вот и вы должны понять, что секрет кроется не в шаблонах, а в полезности информации.
Где прячется код html
Простите за отступление, вернемся к нашим кодам). Допустим, вы хотите изменить цвет шрифта заголовка блога. Будем рассматривать на примере моего тестового сайта.
- Открываем сайт в браузере Google Chrome
(если еще не пользуетесь им, установите — он хорошо заточен для работы с сайтами, в нем много встроенных инструментов).
- Наводим курсор мышки на элемент, который собираемся изменить
. В данном случае — на название блога. Щелкаем по нему «правой» мышкой и в появившемся окне выбираем ПРОСМОТР КОДА ЭЛЕМЕНТА.
ВАЖНО: не перепутайте с ПРОСМОТРОМ КОДА СТРАНИЦЫ! Вся страница нам сейчас не нужна, только отдельный элемент.
Щелкаем по нему — в нижней части браузера появляется окно просмотра кода:
Красным выделена строка кода, которую мы меняем.
А вот в области, выделенной синим, содержится то, что мы ищем. Именно здесь вы можете найти точную (а не приблизительную) строчку кода, отвечающую за шрифты, цвет, размер, выделение и прочее. Таким образом вы можете узнать ЛЮБОЙ код любого элемента любого шаблона.
Находим нужную строчку в блоке, выделенным синим. Справа там есть ползунок, можно пролистать и найти нужную строчку.
Общий принцип, где что ищется:
Название шрифта — в строке FONT FAMILY
Размер шрифта — в строке FONT SIZE
Цвет шрифта — в строке COLOR
Вот три основные строчки, в которых меняется название, размер и цвет шрифта любого элемента. Справа в строке style css дается позиция строчки в документе. Если вам нужно изменить какой-то другой элемент (например, нужно узнать, где находится строчка. в которой можно изменить цвет панели меню или цвет ссылок), все делается абсолютно так же.
ВНИМАНИЕ:
красным на рисунке выделена строчка, которую мы будем копировать,
чтобы потом найти ее в таблице стилей.
4. Копируем строчку
. Поскольку в этом примере мы хотим изменить цвет названия сайта, то копирую строчку, во второй картинке выделенную красным прямоугольником. В моем шаблоне она отвечает за изменение цвета названия сайта:
#header h1 a, #header h1 a:visited {
Находим нужную строчку в файле «таблица стилей (style.css)». Это делается уже в админке. Настоятельно прошу, пока нет уверенности и полного понимания, все эксперименты проводить на тестовом поддомене, чтобы исключить .
Итак, заходим в админпанель: КОНСОЛЬ — ВНЕШНИЙ ВИД — РЕДАКТОР. В правом сайдбаре находим файл ТАБЛИЦА СТИЛЕЙ (STYLE.CSS), открываем его.
Теперь открываем строку поиска клавишами CTRL + F: в верхнем окне появится пустая строчка-окошко. Вставляем в него ту строку, что скопировали в пункте 4.
И вы увидите, как в таблице стилей эта строчка выделится (на рисунке — оранжевым цветом):
Вносим изменение в элемент. В нашем случае мы меняем цвет шрифта, поэтому в строке COLOR подставляем другое значение — того цвета, который хотим. В примере черный цвет, его значение:
Выбрать цвет можно в любом сервисе палитр веб-цветов: наберите в поисковике «Палитра веб-цветов» и подберите тот, что хотите. Выбираем цвет, копируем его цифровое значение и аккуратно подставляем взамен старого. после чего нажимаем ОБНОВИТЬ ФАЙЛ и переходим смотреть, что получилось.
Если изменения не отобразились, за прошедший час и снова зайдите на страницу — на этот раз все должно отобразиться.
Описывается это долго, но на практике все делается быстро, особенно когда появляется начальный навык.
Более подробно, как изменить те или иные элементы:
На сегодня все, больше не буду мучить вас кодами. Надеюсь, что теперь вы сами сможете легко находить и менять любой элемент кода html, или, вернее, код css — да простят меня специалисты за упрощение. А если не разберетесь, посетите все же страницу . Не тратьте время на ерунду.
Предлагаю посмотреть видео Артема Абрамовича, как искать и находить в любой теме/шаблоне, для любого движка (wordpress, joomla и т.п.) любое слово или элемент и заменить на то, что вам надо:
Поделитесь пожалуйста, если понравилось:
Возможно вам будет интересно еще узнать:
Разработчики браузеров позаботились об удобстве тех, кто создает сайты, открываемые в этих самых браузерах, а именно – о вебмастерах. Они добавили в стандартные функции инструменты разработчика, с помощью которых можно легко открыть и посмотреть исходный код страницы сайта в браузере
: HTML, CSS, JavaScript (JS), получить различные полезные данные о структуре сайта, провести его технический анализ. В общем, увидеть много полезного.
Конечно же, данными инструментами пользуются не только создатели сайтов для работы, но и простые пользователи, которым исходный код позволяет посмотреть различные полезных данных.
Из этой стать вы узнаете, как в браузере посмотреть исходный код страницы сайта (как открыть HTML, CSS, JavaScript код сайта).
Как открыть исходный код страницы в браузере
Открыть исходный код веб страницы в браузере можно двумя способами:
- С помощью горячих клавиш;
- Открыть из контекстного меню.
Ctrl + U
– комбинация горячих клавиш для просмотра исходного кода всей страницы сайта в отдельном новом окне. Стандартные для всех браузеров: Google Chrome, Opera, Mozilla Firefox, Яндекс браузера, IE.
Также в инструменты разработчика можно войти следующим образом:
Для того чтобы быстро найти нужный код, слово или текст на странице можно использовать стандартное для всех браузеров сочетание горячих клавиш поиска: Ctrl + G.
Видео-инструкция:
Просмотр кода элемента | исследовать элемент | проинспектировать элемент
Если вдруг нужно просмотреть не весь исходный код, а вывести на экран лишь отдельную его часть, какой-то участок на странице, то предыдущий инструмент не подойдет. Для этого в инструментах разработчика есть другая функция, о которой пойдет речь ниже.
Как просмотреть код элемента на странице:
Кроме того, можно использовать комбинации клавиш на клавиатуре для быстрого доступа к инспектированию элемента.
Горячие клавиши (кнопки):
Google Chrome: Ctrl+Shift+I и Ctrl+Shift+C
Opera: Ctrl+Shift+I и Ctrl+Shift+C
Mozilla Firefox: Ctrl+Shift+I и Ctrl+Shift+C
Яндекс браузер: Ctrl+Shift+I и Ctrl+Shift+C
После проделанных действий, в этом же окне браузера откроется исходный код web страницы:
Весь HTML код будет в левой большой колонке. А CSS стили – в правой.
Преимуществом данного способа, безусловно, является и то, что у пользователя есть возможность изменить исходный код, править стили. То есть, можно редактировать стили на сайте и посмотреть, как он будет выглядеть с теми или иными стилями, без необходимости сразу вносить изменения в файлы, которые находятся на серверах хостинга. Чтобы изменить или добавить программный код, необходимо сделать двойной клик на нужном фрагменте или участке. Конечно же исправление кода в браузере не внесется на серверах хостинга. Поэтому в дальнейшем, в любом случае, придется копировать этот код и прописать в файлы.
В этой видео-инструкции подробно рассказано и показано, как работать с инструментами разработчика:
Вот так вот просто в режиме онлайн, прямо в браузере, можно посмотреть исходный код страницы сайта, получить основные данные о HTML и CSS коде, изменить и скопировать их, без необходимости скачивать файлы этого сайта на компьютер.
Кстати, неопытных интернет-пользователей, изменивших код страницы и ждущих, что он сохранится, ждет разочарование. Ведь после обновления страницы, все изменения на ней пропадут. Этого мало, чтобы взломать сайт 🙂
Как посмотреть исходный код на телефоне Android
Еще хотелось бы заметить, что инструменты разработчика доступны не только в десктопной версии браузеров, то есть, на компьютерах и ноутбуках. На телефонах и планшетах (Android, IOS) можно также посмотреть исходный код.
Для этого следует добавить к URL инспектируемой страницы приставку view-source:
Например:
view-source:https://сайт/turbo-rezhim-opera/
Если открыть любую веб-страницу, то она будет содержать в себе типичные элементы,
которые не меняются от вида и направленности сайта. В примере 4.1 показан
код простого документа, содержащего основные теги.
Пример 4.1. Исходный код веб-страницы
Пример веб-страницы
Заголовок
Первый абзац.
Второй абзац.
Скопируйте содержимое данного примера и сохраните его в папке c:\www\ под
именем example41.html. После этого запустите браузер и откройте файл через пункт меню Файл > Открыть
файл (Ctrl+O)
. В диалоговом окне выбора документа укажите файл example41.html. В браузере откроется веб-страница, показанная на рис. 4.1.
Рис. 4.1. Результат выполнения примера
Элемент
предназначен для указания типа текущего документа -
DTD (document type definition, описание типа документа). Это необходимо, чтобы
браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML
существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText
Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но
различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал,
согласно какому стандарту отображать веб-страницу и необходимо в первой строке
кода задавать
.
Существует несколько видов
, они различаются в зависимости
от версии HTML, на которую ориентированы. В табл. 4.1. приведены основные
типы документов с их описанием.
Табл. 4.1. Допустимые DTD
| DOCTYPE
|
Описание
|
|---|
| HTML 4.01
|
|
|
Строгий синтаксис HTML.
|
|
|
Переходный синтаксис HTML.
|
|
|
В HTML-документе применяются фреймы.
|
| HTML 5
|
|
|
В этой версии HTML только один доктайп.
|
| XHTML 1.0
|
|
|
Строгий синтаксис XHTML.
|
|
|
Переходный синтаксис XHTML.
|
|
|
Документ написан на XHTML и содержит фреймы.
|
| XHTML 1.1
|
|
|
Разработчики XHTML 1.1 предполагают,
что он постепенно вытеснит HTML. Как видите, никакого деления на виды
это определение не имеет, поскольку синтаксис один и подчиняется четким
правилам.
|
Разница между строгим и переходным описанием документа состоит в различном
подходе к написанию кода документа. Строгий HTML требует жесткого соблюдения
спецификации HTML и не прощает ошибок. Переходный HTML более «спокойно» относится
к некоторым огрехам кода, поэтому этот тип в определенных случаях использовать
предпочтительнее.
Например, в строгом HTML и XHTML непременно требуется наличие тега
,
а в переходном HTML его можно опустить и не указывать. При этом помним, что
браузер в любом случае покажет документ, независимо от того, соответствует
он синтаксису или нет. Подобная проверка осуществляется при помощи валидатора
и предназначена в первую очередь для разработчиков, чтобы отслеживать ошибки
в документе.</p>
<p>В дальнейшем будем применять преимущественно строгий <!DOCTYPE>
, кроме
случаев, когда это оговаривается особо. Это позволит нам избегать типичных
ошибок и приучит к написанию синтаксически правильного кода.</p>
<p>Часто можно встретить код HTML вообще без использования <!DOCTYPE>
,
веб-страница в подобном случае все равно будет показана. Тем не менее, может
получиться, что один и тот же документ отображается в браузере по-разному при
использовании <!DOCTYPE>
и без него. Кроме того,
браузеры могут по-своему показывать такие документы, в итоге страница «рассыплется»,
т.е. будет отображаться совсем не так, как это требуется разработчику. Чтобы
не произошло подобных ситуаций, всегда добавляйте <!DOCTYPE>
в начало документа.</p><p>Тег <html>
определяет начало HTML-файла, внутри него хранится заголовок
(<head>
) и тело документа (<body>
).</p><p>Заголовок документа, как еще называют блок <head>
, может содержать текст
и теги, но содержимое этого раздела не показывается напрямую на странице, за
исключением контейнера <title>
.</p><p>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</p><p>Тег <meta>
является универсальным и добавляет целый класс возможностей,
в частности, с помощью метатегов, как обобщенно называют этот тег, можно изменять
кодировку страницы, добавлять ключевые слова, описание документа и многое другое.
Чтобы браузер понимал, что имеет дело с кодировкой UTF-8 (Unicode transformation format, формат преобразования Юникод) и добавляется данная строка.</p><p>
<title>Пример веб-страницы
Тег
определяет заголовок веб-страницы, это один из важных элементов
предназначенный для решения множества задач. В операционной системе Windows
текст заголовка отображается в левом верхнем углу окна браузера (рис. 4.2).</p>
<p><img src='https://i1.wp.com/htmlbook.ru/files/images/samhtml/fig_1_04_02.png' height="37" width="194" loading=lazy></p>
<p>Рис. 4.2. Вид заголовка в браузере</p>
<p>Тег <title>
является обязательным и должен непременно присутствовать
в коде документа.</p><p>Обязательно следует добавлять закрывающий тег </head>
, чтобы показать,
что блок заголовка документа завершен.</p><p>Тело документа <body>
предназначено для размещения тегов и содержательной
части веб-страницы.</p><p>
<h1>Заголовок</h1>
</p><p>HTML предлагает шесть текстовых заголовков разного уровня, которые показывают
относительную важность секции, расположенной после заголовка. Так, тег <h1>
представляет
собой наиболее важный заголовок первого уровня, а тег <h6>
служит
для обозначения заголовка шестого уровня и является наименее значительным.
По умолчанию, заголовок первого уровня отображается самым крупным шрифтом
жирного начертания, заголовки последующего уровня по размеру меньше. Теги <h1>...<h6>
относятся
к блочным элементам, они всегда начинаются с новой строки, а после них другие
элементы отображаются на следующей строке. Кроме того, перед заголовком и
после него добавляется пустое пространство.</p><p>
<!-- Комментарий -->
</p><p>Некоторый текст можно спрятать от показа в браузере, сделав его комментарием.
Хотя такой текст пользователь не увидит, он все равно будет передаваться
в документе, так что, посмотрев исходный код, можно обнаружить скрытые заметки.</p>
<p>Просматривая бесчисленное множество сайтов в интернете, можно встретить такие, которые очень нам нравятся. Сразу же возникает ряд вопросов. Сайт сделан с помощью самописного кода или какой-нибудь CMS? Какие у него CSS стили? Какие у него мета-теги? И так далее.</p>
<p>Существует много инструментов, с помощью которых можно извлечь информацию о коде страницы сайта. Но под рукой у нас всегда есть правая кнопка мыши. Её-то мы и будем использовать, на примере моего сайта.</p>
<h2>Как просмотреть код страницы?</h2>
<p>Чтобы посмотреть исходный код страницы сайта, нужно навести курсор мыши на любую область веб-страницы (за исключением изображений и ссылок). После этого нажать на правую кнопку мыши. Перед нами откроется окно с несколькими опциями (в разных браузерах они могут немного отличаться). В браузере Google Chrome, например, это команды:</p>
<ul><li>назад;</li>
<li>вперёд;</li>
<li>перезагрузить;</li>
<li>сохранить как;</li>
<li>печать;</li>
<li>перевести на русский;</li>
<li><b>просмотр кода страницы
</b>;</li>
<li>просмотреть код.</li>
</ul><p>Нам нужно кликнуть на <b>просмотр кода страницы
</b>, и перед нами откроется html код страницы сайта.</p>
<h2>Просмотр кода страницы: на что обратить внимание?</h2>
<p>Итак, Html код страницы представляет собой пронумерованный список строк, каждая из которых несёт информацию о том, как сделан данный сайт. Чтобы быстрей научиться разбираться в этом огромном количестве знаков и специальных символов, нужно различать разные участки кода.</p>
<p>Например, строки кода, находящиеся в внутри тега head содержат информацию для поисковых машин и веб-мастеров. Они не выводятся на сайт. Здесь можно увидеть, по каким ключевым словам продвигается эта страница, как написаны её title и description. Также здесь можно встретить ссылку, перейдя по которой узнаем о семействе google шрифтов, используемых на сайте.</p>
<p>Если сайт сделан на CMS WordPress или Joomla, то это также будет видно здесь. Например, в этой области выводится информация о теме WordPress или шаблоне Joomla сайта. Увидеть её можно, прочитав содержание ссылок, выделенных синим цветом. В одной ссылке виден шаблон сайта.</p>
<p>Например:</p>
<p><i>//fonts.googleapis.com/css?family=Source+Sans+Pro%3A400%2C400italic%2C600&ver=4.5.3
</i></p>
<p>Мы увидим CSS стили шрифтов страницы. В данном случае используется шрифт. Это видно здесь – font-family: ‘Source Sans Pro’.</p>
<p>Данный сайт оптимизируется с помощью сео-плагина Yoast SEO. Это видно из этого закомментированного участка кода:</p>
<p><i>This site is optimized with the Yoast SEO plugin v3.4.2 — https://yoast.com/wordpress/plugins/seo/
</i></p>
<p>Вся информация, находящаяся внутри тега body, выводится браузером на экране монитора. Здесь мы видим html код страницы, а в самом низу находится код скрипта Яндекс метрики. Он облечён закомментированным тегом с текстом:</p>
<p><i>/Yandex.Metrika counter
</i></p>
<p><img src='https://i0.wp.com/vlad-tver.ru/wp-content/uploads/2016/08/metrika.jpg' width="100%" loading=lazy></p>
<h2>Подводим итоги</h2>
<p>Проведя довольно поверхностный анализ кода главной страницы сайта, можно сделать вывод о том, с помощью каких инструментов сделана эта страница. Мы увидели на ней:</p>
<ul><li>CMS WordPress;</li>
<li>Google шрифт Source Sans Pro;</li>
<li>тема WordPress – Sydney;</li>
<li>плагины Yoast;</li>
<li>счётчик Яндекс метрики.</li>
</ul><p>Теперь принцип анализа html кода страницы сайта вполне понятен. Совсем необязательно держать исследуемую страницу открытой в браузере. Сохранить код страницы себе на компьютер можно с помощью комбинаций клавиш ctrl+a, ctrl+c, ctrl+v. Вставьте её в любой текстовый редактор (лучше Notepad++) и сохраните с расширением html. Таким образом, вы в любое время сможете изучить её глубже и найти больше полезной для себя информации.</p>
<p>Итак, сегодня мы с Вами рассмотрим несколько полезных средств для Web мастера, которые облегчают жизнь при верстке сайта. Начнем с консоли для web мастера в Google Chrome. И пройдемся по вопросам, которые чаще всего возникают у web-мастера во время верстки сайта.
</p>
<p>Для того, чтобы попасть в консоль, откройте ваш сайт в Google Chrome, щелкните правой кнопкой мыши в любом месте web-страницы, и выберите «Просмотр кода страницы» в контекстном выпадающем меню, или же по конкретному элементу для исследования, выбрав «Просмотр кода элемента».</p>
<p>Вверху у вас будет перечислено несколько вкладок. Сегодня мы поговорим о вкладке «Elements»<b>,
</b> на которой представлены элементы web-страницы с подсветкой тегов, свойств, выделением вложенности элементов, представлением иерархии элемента в дереве DOM (подсказка внизу, от корневого родительского к текущему исследуемому), возможностью редактирования элементов, перечень их свойств, рассмотрим поиск по элементам, а также познакомимся с просмотром связанных с элементами стилей css и т.п..</p>
<h3>Как просмотреть все стили, которые связаны с определенным элементом? Какой из них применяется сейчас? В каких файлах они расположены?</h3>
<p>Итак, нет ничего проще! Открываем браузер Google Chrome, открываем наш сайт – источник вопросов, щелкаем по нужному элементу правой кнопкой мыши, если он виден в контексте страницы, и выбираем в контекстном меню пункт «Просмотр кода элемента».</p>
<p>Внизу у нас появляется консоль с выделенной вкладкой слева «Elements » и всеми, связанными с элементом стилями справа, где: <b>Computed Styles
</b> – это общие «сводные» стили, которые были назначены элементу из правил css и настроек браузера пользователя (его среды окружения), и при этом вкладка свернута.</p>
<p>Но нас интересует вкладка «Styles», развернутая под ней, в которой поочередно перечислены все стили, назначенные элементу, а также файлы, где данные правила указаны для этого элемента по его типу, id, классу, имени, свойству, атрибуту и т.п. При этом, если css правило перечеркнуто, значит оно было переопределено ранее/далее (что позволяет легко отследить, какое из css правил является приоритетным и применяется в данном случае к элементу).</p>
<p>Внизу под консолью расположена строка, которая показывает элемент в иерархии документа, легко позволяет просмотреть весь список родительских элементов от корневого до выбранного элемента. Что-то наподобие «хлебных крошек».</p>
<h3>Html тег не виден в контексте страницы? Или нужно найти все теги, например, по определенному классу, имени, свойству, типу?</h3>
<p>Открываем сайт в Google Chrome, щелкаем правой кнопкой мыши, вызываем контекстное меню, выбираем<b>«
</b>Просмотр кода страницы<b>»
</b>. Нажимаем сочетание клавиш «CTRL + F» одновременно, вводим нужную нам фразу (<b>например
</b><i>:
</i><i>class=»
</i><i>padding»
</i>) и перемещаемся по списку найденных результатов, попутно просматривая все стили, связанные с нужными элементами в правой части страницы.</p>
<h3>Как просмотреть код html элемента (элементов), подгружаемых динамически (например: по Ajax)</h3>
<p>Ждем загрузки страницы в Google Chrome. Выполняем нужные действия, чтобы сработал Ajax. Щелкаем правой кнопкой мыши по загруженным данным, выбираем в контекстном меню «Просмотр кода элемента», исследуем результат в консоли на вкладке «Elements » слева.</p>
<h3>Просмотр изменения css стилей в режиме реального времени</h3>
<p>Кстати, также удобно бывает наблюдать при необходимости: какие стили назначаются элементу налету, например, при прокрутке галереи и других событий по таймеру. Все назначенные через javascript стили в реальном времени будут отображены в свойстве <b>style
</b> выделенного элемента в окне на вкладке «Elements».</p>
<h3>Интерактивный просмотр влияния правил css на представление html тегов</h3>
<p>Google Chrome предоставляет интерактивную консоль для css стилей. А это значит, что Вы можете не только просмотреть, какие стили применяются к элементу, но, и подвести курсор мыши на определенное из свойств css, включить при помощи всплывающей галочки справа, или отключить его, сняв флаг, и просмотрев получившийся результат на странице.</p>
<h3>Изменяем структуру представления html элементов налету (прямо в браузере)</h3>
<p>Итак, исследовать структуру web-документа в Google Chrome мы уже научились, теперь рассмотрим вкратце редактирование элементов налету. Переходим в консоль любым удобным для нас способом. Находим нужный элемент во вкладке «Elements», щелкаем по нему правой кнопкой мыши, вызываем тем самым всплывающее контекстное меню:</p>
<ul><li><b>Add attribute
</b> – добавляет атрибут для указанного элемента. Как только станет активным курсор, начинаем задавать нужное свойство. <b>Например
</b>: напишем name=»itemImage», которое будет незамедлительно добавлено к нашему элементу.</li>
<li><b>Edit attribute
</b> – если щелкнуть по атрибуту элемента правой кнопкой мыши, становится доступным пункт <b>edit
</b><b>attribute
</b>. Щелкаем, редактируем.</li>
</ul><p><b>Пример использования:
</b>мы забыли пароль, сохраненный под звездочками в Google Chrome (если пароль был сохранен в этом браузере). Щелкаем правой кнопкой мыши по элементу с вводом пароля, щелкаем по «Просмотр Кода Элемента»<b>,
</b> в консоли слева на вкладке <b>Elements
</b>щелкаем по атрибуту type=»password» правой кнопкой мыши, левый щелчок мышью по <b>Edit
</b><b>attribute,
</b>меняем атрибут <i>type=»
</i><i>password»
</i> на <i>type=»
</i><i>text»
</i>, и вот у нас уже вместо звездочек отображается тот самый пароль в виде текста.</p>
<ul><li><b>Edit
</b><b>html
</b> – щелкаем правой кнопкой мыши по элементу в консоли <b>Elements
</b>, выбираем <b>Edit
</b><b>html,
</b>меняем код по своему вкусу.</li>
<li><b>Copy
</b><b>as
</b><b>HTML
</b> – копируем нужную нам порцию HTML для дальнейшего исследования, скажем, в блокноте, или для других целей, где нам нужно применить точно такую же верстку. Экономим время.</li>
<li><b>Copy
</b><b>XPATH
</b> – копирует XPATH представление структуры от корня родительского элемента до выделенного элемента.</li>
<li><b>Delete
</b><b>node
</b> – если нужно удалить текущий выделенный элемент и все его дочерние из контекста web страницы, и посмотреть результат.</li>
<li><b>Word
</b><b>wrap
</b> – сделает представление web страницы в контексте консоли <b>Elements
</b> более читаемым.</li>
</ul><p>В следующих статьях мы продолжим рассмотрение средств для web-мастера, и в частности познакомимся с остальными вкладками инструментов для web-мастера в <b>Google Chrome
</b>, а также рассмотрим отладку ошибок javascript средствами разных браузеров</p>
<script type="text/javascript">
<!--
var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})()
//-->
</script><br>
<br>
<script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+
";"+Math.random()+
"border='0' width='1' height='1' loading=lazy>");</script>
<div class="clear"></div>
<div class="afterpage author_rank">
<div class="social">
<div class="expert-title">Поделись статьей:</div>
<div style="float:left" class="yashare-auto-init" data-yashareL10n="ru" data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir,gplus" data-yasharetheme="counter" data-yasharetype="big"></div>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div class="clear"></div>
<div class="related_posts">
<div class="title">Похожие статьи<span></span></div>
<ul>
<div class='yarpp-related'>
<li>
<div>
<div class="top">
<div class="replace post_243">
<div class="img_border">
<span></span>
<img src="/uploads/4688902c02b3129432fd5ab3bcc0fe95.jpg" alt="Лучшие смартфоны Fly Аппаратная платформа: процессор, память, быстродействие" title="Лучшие смартфоны Fly Аппаратная платформа: процессор, память, быстродействие" loading=lazy> </div>
</div>
</div>
<div class="clear"></div>
<div class="info">
<div class="date">17 апреля 2015</div>
<a class="replace post_243" href="/cmartfony-fly---vse-modeli-ceny-i-foto-luchshie-smartfony-fly-apparatnaya.html">Лучшие смартфоны Fly Аппаратная платформа: процессор, память, быстродействие</a>
</div>
</div>
<div class="clear"></div>
</li>
<li>
<div>
<div class="top">
<div class="replace post_243">
<div class="img_border">
<span></span>
<img src="/uploads/28af35ae6ae5f4152e82d07e14d56027.jpg" alt="Соляная лампа «Каменный цветок" title="Соляная лампа «Каменный цветок" loading=lazy> </div>
</div>
</div>
<div class="clear"></div>
<div class="info">
<div class="date">17 апреля 2015</div>
<a class="replace post_243" href="/solyanaya-lampa-kamennyi-cvetok-solyanaya-lampa-kamennyi-cvetok-osnovnye.html">Соляная лампа «Каменный цветок</a>
</div>
</div>
<div class="clear"></div>
</li>
<li>
<div>
<div class="top">
<div class="replace post_243">
<div class="img_border">
<span></span>
<img src="/uploads/58df8305c13f615808e9c9354645c57e.jpg" alt="Продуктивные способы потратить время в интернете" title="Продуктивные способы потратить время в интернете" loading=lazy> </div>
</div>
</div>
<div class="clear"></div>
<div class="info">
<div class="date">17 апреля 2015</div>
<a class="replace post_243" href="/chto-mozhno-iskat-v-inete-produktivnye-sposoby-potratit-vremya-v.html">Продуктивные способы потратить время в интернете</a>
</div>
</div>
<div class="clear"></div>
</li>
<li>
<div>
<div class="top">
<div class="replace post_243">
<div class="img_border">
<span></span>
<img src="/uploads/2b139f01ae383b3326dfb17779cccef7.jpg" alt="Как установить приложение плей маркет на ноутбук" title="Как установить приложение плей маркет на ноутбук" loading=lazy> </div>
</div>
</div>
<div class="clear"></div>
<div class="info">
<div class="date">17 апреля 2015</div>
<a class="replace post_243" href="/prilozhenie-plei-market-ustanovit-na-noutbuk-kak-ustanovit.html">Как установить приложение плей маркет на ноутбук</a>
</div>
</div>
<div class="clear"></div>
</li>
</div>
</ul>
</div>
<div class="clear"></div>
<div class="clear"></div>
<div class="bread_wrap" xmlns:v="http://rdf.data-vocabulary.org/#">
</div>
<div class="clear"></div>
</div>
<div class="sidebar col-xs-12 col-md-3 col-lg-3">
<div class="aside nav podrubriki"><div class="first_title"></div><div class="subnavtitle">Типы<span></span></div><ul class="subnav">
<li><span class="asideli related-link" data-href="/category/routers/">Роутеры</span></li>
<li><span class="asideli related-link" data-href="/category/hard-drives/">Жесткие диски</span></li>
<li><span class="asideli related-link" data-href="/category/not-included/">Не включается</span></li>
<li><span class="asideli related-link" data-href="/category/printers/">Принтеры</span></li>
<li><span class="asideli related-link" data-href="/category/inhibits/">Тормозит</span></li>
<li><span class="asideli related-link" data-href="/category/hangs/">Зависает</span></li>
<li><span class="asideli related-link" data-href="/category/viruses/">Вирусы</span></li>
<li><span class="asideli related-link" data-href="/category/tablets/">Планшеты</span></li>
</div> <div class="clear"></div>
<div class="sidebar_pop_articles">
<div class="title">Популярные статьи<span></span></div>
<ul>
<li>
<div class="replace post_87">
<div class="top">
<div class="img_border">
<span></span>
<img src="https://i0.wp.com/coremission.net/wp-content/uploads/2017/10/rukovodstvo-2d-grafika-1.png" alt="Спрайты для игр - что это такое?" title="Спрайты для игр - что это такое?" loading=lazy>
</div>
</div>
<div class="info">
<a href="/tekstury-dlya-2d-igr-spraity-dlya-igr---chto-eto-takoe-chto-takoe-spraity.html" class="replace post_87">Спрайты для игр - что это такое?</a>
</div>
</div>
<div class="clear"></div>
</li>
<li>
<div class="replace post_87">
<div class="top">
<div class="img_border">
<span></span>
<img src="https://i2.wp.com/111999.ru/wp-content/uploads/2016/02/Bitcoin-618x355.jpg" alt="Виртуальные деньги - это реальные деньги" title="Виртуальные деньги - это реальные деньги" loading=lazy>
</div>
</div>
<div class="info">
<a href="/novye-dengi-virtualnye-kak-nazyvayutsya-virtualnye-dengi.html" class="replace post_87">Виртуальные деньги - это реальные деньги</a>
</div>
</div>
<div class="clear"></div>
</li>
<li>
<div class="replace post_87">
<div class="top">
<div class="img_border">
<span></span>
<img src="https://i1.wp.com/windwix.ru/wp-content/uploads/2017/02/perenos-win7-5.jpg" alt="Перенос Windows на другой пустой жёсткий диск программой AOMEI Partition Assistant Перестановка hdd с системой на другой компьютер" title="Перенос Windows на другой пустой жёсткий диск программой AOMEI Partition Assistant Перестановка hdd с системой на другой компьютер" loading=lazy>
</div>
</div>
<div class="info">
<a href="/pochemu-ne-zapuskaetsya-windows-pri-perenose-zhestkogo-diska-na-drugoi-kompyuter.html" class="replace post_87">Перенос Windows на другой пустой жёсткий диск программой AOMEI Partition Assistant Перестановка hdd с системой на другой компьютер</a>
</div>
</div>
<div class="clear"></div>
</li>
<li>
<div class="replace post_87">
<div class="top">
<div class="img_border">
<span></span>
<img src="https://i2.wp.com/alpinefile.ru/wp-content/uploads/itunes-12-300x206.png" alt="Скачать iTunes на Windows" title="Скачать iTunes на Windows" loading=lazy>
</div>
</div>
<div class="info">
<a href="/poslednyaya-versiya-aityuns-dlya-kompyutera-skachat-itunes-na-windows.html" class="replace post_87">Скачать iTunes на Windows</a>
</div>
</div>
<div class="clear"></div>
</li>
<li>
<div class="replace post_87">
<div class="top">
<div class="img_border">
<span></span>
<img src="https://i1.wp.com/ermakovandrey.ru/wp-content/uploads/2017/05/%D0%9F%D1%80%D0%B5%D0%B4%D0%B8%D1%81%D0%BB%D0%BE%D0%B2%D0%B8%D0%B5-%D0%BE%D0%B1%D1%80%D0%B5%D0%B7%D0%B0%D0%BB.png" alt="ShadowBan в Instagram – как выйти из тени (инструкция по выживанию) Скрытый бан аккаунта в instagram" title="ShadowBan в Instagram – как выйти из тени (инструкция по выживанию) Скрытый бан аккаунта в instagram" loading=lazy>
</div>
</div>
<div class="info">
<a href="/shadowban-kak-vyvesti-stranicu-iz-teni-v-instagram-shadowban-v-instagram-kak-vyiti-iz-teni.html" class="replace post_87">ShadowBan в Instagram – как выйти из тени (инструкция по выживанию) Скрытый бан аккаунта в instagram</a>
</div>
</div>
<div class="clear"></div>
</li>
<li>
<div class="replace post_87">
<div class="top">
<div class="img_border">
<span></span>
<img src="https://i1.wp.com/smartphonus.com/wp-content/uploads/2015/01/012815_1226_32.png" alt="GSM-модуль Starline — чем он хорош и как установить?" title="GSM-модуль Starline — чем он хорош и как установить?" loading=lazy>
</div>
</div>
<div class="info">
<a href="/kak-pravilno-otklyuchat-mobilnyi-modul-na-smartfone-gsm-modul-starline.html" class="replace post_87">GSM-модуль Starline — чем он хорош и как установить?</a>
</div>
</div>
<div class="clear"></div>
</li>
</ul>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div class="sidebar_new_articles">
<div class="title">Новые статьи<span></span></div>
<ul>
<li>
<a href="/kak-polnostyu-otklyuchit-dashboard-v-os-x-mavericks-vidzhety-v-dashboard-kak.html" class="replace post_1054">Виджеты в Dashboard Как закрыть dashboard</a>
<div class="clear"></div>
</li>
<li>
<a href="/tranzistor-kt815-parametry-cokol-vka-i-analogi-tranzistor-kt815-parametry.html" class="replace post_1054">Транзистор КТ815: параметры, цоколёвка и аналоги Кт 815 в каком режиме работает</a>
<div class="clear"></div>
</li>
<li>
<a href="/ne-obnaruzhen-klyuch-zashchity-programmy-7-7-problemy-s-klyuchami.html" class="replace post_1054">Не обнаружен ключ защиты программы 7</a>
<div class="clear"></div>
</li>
<li>
<a href="/1s-ogranichenie-dostupa-k-dannym-na-urovne-zapisei-rls-gibkaya-i-tonkaya-nastroika.html" class="replace post_1054">RLS – гибкая и тонкая настройка ограничений доступа к данным</a>
<div class="clear"></div>
</li>
<li>
<a href="/chto-takoe-hyper-threading-kak-vklyuchit-podderzhku-v-bios-hyper-v-v-windows.html" class="replace post_1054">Как включить поддержку в BIOS?</a>
<div class="clear"></div>
</li>
</ul>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div class="sidebar_question">
<div id="dirace1" style="height:300px;width:200px;" align="center"></div>
</div><p></p><div class="clear"></div></div>
</div>
<div class="clear"></div>
<div class="section morkovin-antireklama-sidebar Closure"><div id="smartrotator_ad_1610"></div></div>
</div>
<div class="clear"></div> <div class="clear"></div>
</div>
</div>
<div class="clear"></div>
<footer class="footer">
<div class="kartasajta"><a href="/sitemap.xml">Карта сайта</a></div>
<div class="top_footer">
<div class="inner">
<div class="footer_col col-xs-6 col-sm-4 col-md-4">
<span data-href="/" class="related-link logo">
<div class="logo_text1"><img src="/public/logo.png" loading=lazy></div>
</span>
<div class="clear"></div>
<p class="copyright">
© 2024 anyhost.ru - Сайт о компьютерах и комплектующих<br />
<span></span>
</p>
</div>
<div class="footer_col col-xs-12 col-sm-2 col-md-2">
<p class="foot_cat_title">Другое</p>
<ul class="categories">
<li><span class="related-link" data-href="">О сайте</span></li>
<li><span class="related-link" data-href="">Реклама</span></li>
<li><span class="related-link" data-href="/feedback.html">Контакты</span></li>
</ul>
</div>
<div class="footer_col col-xs-6 col-sm-2 col-md-2 rubric_col">
<p class="foot_cat_title">Рубрики</p>
<ul id="nav" class="categories">
<li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/routers/">Роутеры</a></li>
<li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/hard-drives/">Жесткие диски</a></li>
<li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/not-included/">Не включается</a></li>
<li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/printers/">Принтеры</a></li>
<li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/inhibits/">Тормозит</a></li>
<li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/hangs/">Зависает</a></li>
<li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/viruses/">Вирусы</a></li>
<li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/tablets/">Планшеты</a></li>
<li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/installation/">Установка устройств</a></li>
<li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/application/">Приложения</a></li>
</ul> </div>
<div class="clear"></div>
</div>
</div>
<div class="clear"></div>
</footer>
<div id="toTop"></div>
<script type="text/javascript" src="https://anyhost.ru/wp-content/plugins/service_binet/ajax.js"></script><button id="responsive-menu-button"
class="responsive-menu-button responsive-menu-boring
responsive-menu-accessible"
type="button"
aria-label="Menu">
<span class="responsive-menu-box">
<span class="responsive-menu-inner"></span>
</span>
</button><div id="responsive-menu-container" class="slide-left" style="padding:20px;">
<ul>
<li><a style="color:white;" href="/category/routers/">Роутеры</a></li>
<li><a style="color:white;" href="/category/hard-drives/">Жесткие диски</a></li>
<li><a style="color:white;" href="/category/not-included/">Не включается</a></li>
<li><a style="color:white;" href="/category/printers/">Принтеры</a></li>
<li><a style="color:white;" href="/category/inhibits/">Тормозит</a></li>
<li><a style="color:white;" href="/category/hangs/">Зависает</a></li>
<li><a style="color:white;" href="/category/viruses/">Вирусы</a></li>
<li><a style="color:white;" href="/category/tablets/">Планшеты</a></li>
<li><a style="color:white;" href="/category/installation/">Установка устройств</a></li>
<li><a style="color:white;" href="/category/application/">Приложения</a></li>
</ul>
</div>
<link rel='stylesheet' id='yarppRelatedCss-css' href='/wp-content/plugins/yet-another-related-posts-plugin/style/related.css?ver=4.9.1' type='text/css' media='all' />
<script type='text/javascript' src='https://anyhost.ru/wp-content/plugins/wp-postratings/js/postratings-js.js?ver=1.85'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var JQLBSettings = { "fitToScreen":"1","resizeSpeed":"400","displayDownloadLink":"0","navbarOnTop":"0","loopImages":"","resizeCenter":"","marginSize":"0","linkTarget":"","help":"","prevLinkTitle":"previous image","nextLinkTitle":"next image","prevLinkText":"\u00ab Previous","nextLinkText":"Next \u00bb","closeTitle":"close image gallery","image":"Image ","of":" of ","download":"Download","jqlb_overlay_opacity":"80","jqlb_overlay_color":"#000000","jqlb_overlay_close":"1","jqlb_border_width":"10","jqlb_border_color":"#ffffff","jqlb_border_radius":"0","jqlb_image_info_background_transparency":"100","jqlb_image_info_bg_color":"#ffffff","jqlb_image_info_text_color":"#000000","jqlb_image_info_text_fontsize":"10","jqlb_show_text_for_image":"1","jqlb_next_image_title":"next image","jqlb_previous_image_title":"previous image","jqlb_next_button_image":"http:\/\/anyhost.ru\/wp-content\/plugins\/wp-lightbox-2\/styles\/images\/ru_RU\/next.gif","jqlb_previous_button_image":"http:\/\/anyhost.ru\/wp-content\/plugins\/wp-lightbox-2\/styles\/images\/ru_RU\/prev.gif","jqlb_maximum_width":"","jqlb_maximum_height":"","jqlb_show_close_button":"1","jqlb_close_image_title":"close image gallery","jqlb_close_image_max_heght":"22","jqlb_image_for_close_lightbox":"http:\/\/anyhost.ru\/wp-content\/plugins\/wp-lightbox-2\/styles\/images\/ru_RU\/closelabel.gif","jqlb_keyboard_navigation":"1","jqlb_popup_size_fix":"0"} ;
/* ]]> */
</script>
<script type='text/javascript' src='https://anyhost.ru/wp-content/plugins/wp-lightbox-2/wp-lightbox-2.min.js?ver=1.3.4.1'></script>
<script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.9.1'></script>
<script async="async" type='text/javascript' src='https://anyhost.ru/wp-content/plugins/akismet/_inc/form.js?ver=4.0.1'></script>
</body>
<script src="https://anyhost.ru/wp-content/themes/avada/js/jquery.jshowoff.min.js"></script>
<script>
(function($){
$(window).scroll(function() {
if($(this).scrollTop() > 200) {
$('#toTop').fadeIn(100);
} else {
$('#toTop').fadeOut(100);
}
} );
$('#toTop').click(function() {
$('body,html').animate({ scrollTop:0} ,400);
} );
$('.navbar-toggle').click(function(e){
e.preventDefault();
$('#navbar').show(500);
$('.wrapper, footer, body, .mobile_search').addClass('righted');
$('.navbar-toggle').fadeOut(500);
} );
$('.mobile_close').click(function(e){
e.preventDefault();
$('#navbar').hide(500);
$('.wrapper, footer, body, .mobile_search').removeClass('righted');
$('.navbar-toggle').fadeIn(500);
} );
$('#features').jshowoff({ autoPlay: true, hoverPause: false, speed:3000, changeSpeed: 200, links: true, effect: 'fade', controls: false } );
} )(jQuery);
</script>
<script type="text/javascript" src="//yandex.st/share/share.js" charset="utf-8"></script>
</html>