Понедельник, 09 Июля 2012 15:39

Как просмотреть html-код страницы и узнать css сайта

Written by 
Оцени эту запись
(14 Голоса)

Иногда заходя на чужой красивый или просто интересный сайт, хочется немножко узнать о том, как он сделан. Или же узнать как сделан отдельный элемент страницы - кнопка, иконка или еще какой-то элемент дизайна. Тогда полезно будет знать, как при помощи браузера получить нужную информацию. Почти в каждом браузере предусмотрены так называемые инструменты разработчика, которые вам в этом помогут. 

 

 

Для того, чтобы просмотреть исходный код html-страницы, нужно в своей браузере найти инструменты для разработчиков и выбрать "Исходный код страницы". В Google Chrome можно просто кликнуть правой кнопкой мышки по странице и выбрать из меню "Просмотр кода страницы". 

 

 

Для того, чтобы просмотреть код элемента, нужно его проинспектировать. Для этого нужно на элементе кликнуть правой кнопкой мышки и из меню выбрать просмотр его кода - в FF это "Исследовать элемент", в Хроме - "Просмотр кода элемента", в Опере - "Проинспектировать элемент". 

 

При этом внизу окна появится еще одно окошко, в котором вы увидите исходный код заданного элемента, а в правой части этого окошка - его текущие стили. 

 

Если же вам нужен весь файл со стилями, можно в исходном коде страницы или исходном коде элемента <head> найти ссылку на файл со стилями, а потом дописать этот путь к домену сайта. В Хроме путь к css-файлу в коде страницы отображает как ссылка, которую можно открыть в новой вкладке.

Путь к css-файлу выглядит так:

 

<link rel="stylesheet" href="/templates/kate/css/styles.css" type="text/css">

 

Слеш вначале пути означает, что там корневой каталог. Путь в стилям также может тянуться абсолютный:

 

<link rel="Stylesheet" href="http://css.yandex.ru/css/_yandex-global.css">

 

Тогда просто перейдя по этому пути, вы увидите css-файл.

 

Также может пригодиться информация о том, как достать с чужого сайта нужную картинку. Если он на странице вставлена картинкой, кликаете правой кнопкой по ней и выбираете "Открыть изображения" или "Открыть картинку в новой вкладке". Фраза зависит от браузера, но суть не меняется. Еще вариант - в коде странице вы можете увидеть путь к этой картинке и поступить с ним аналогично, как с путем к css-файлу.

 

 

 

Порой какие-то картинки, которые видны на сайте, вставлены не через тег <img>, а фоном блока.  

 

<div style="background: url(/images/img1.jpg)"></div>

 

Тогда добравшись до стилей нужного блока с нужным фоном, вы также увидете путь в картинке.

 

Аналогично со скриптами и подобными штуками.

 

 

Комментарии  

 
0 #6 kankusta duo Zutaten 13.04.2017 07:30
But whereas the GMO controversy rages on, a
brand new WikiLeaks doc shows what goes into figuring out the matters lined by the Dr.
Oz Show , reported Vox.
Цитировать
 
 
0 #5 kat-khmara 22.02.2016 17:47
Евгений, а какого вида блокировка?
Цитировать
 
 
0 #4 Евгений 13.02.2016 13:48
А как посмотреть если стоит блокировка?
Цитировать
 
 
-3 #3 Александр 03.11.2014 20:38
Да умник. а что делать когда стоит редирект и нужно посмотреть код? А, что скажешь ????
Цитировать
 
 
0 #2 kat-khmara 30.05.2014 09:06
Рада, что могу быть полезной!
Цитировать
 
 
0 #1 Макс 29.05.2014 12:06
Спасибо! Очень помогла статья
Цитировать
 

Добавить комментарий


Защитный код
Обновить

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов