Проектирование и разработка веб-приложений на основе технологий Microsoft

Отладка CSS с помощью инструментов разработчика в IE8

Разбить на страницы
Показывать лекцию целиком

Пускай дан сайт следующего вида:

Вызовем средства разработки с помощью горячей клавиши F12 или вкладка меню "Сервис"-> "Средства разработчика":

Появится окно следующего содержания:

Во вкладке HTML можно просматривать разметку веб-страниц, выбирать отдельные элементы и просматривать значения их атрибутов, проверять, как изменение значения атрибута повлияет на визуализацию страницы, а также определять, как к отдельным элементам применяются правила CSS.

В качестве примера изменим свойства background-color для данного сайта и цвет и шрифт текста находящегося под заголовком "Heading 2", для это жмем Ctrl+B или значок который показан ниже:

И выберем для начала шапку сайта:

В левой колонке стал активным выбранный объект в данном случае " <div id="masthead"> ", а справа отобразились свойства стиля для данного объекта:

Теперь изменим цвет фона для данного объекта ( Background-Color ) на красный:

Цвет фона для шапки изменился на красный:

Аналогично поменяем цвет для "подвала"(нижний контейнер сайта) и свойства текста находящегося по центру, в итоге у Вас может получиться следующее:

При изменении шрифта находящегося в центре изменился шрифт на всем сайте, т.к атрибут font-family нахоидтся в теге <body></body>:

В то время как нужный для изменения текст находится в теге <p></p>:

Для того что бы менялся текст только в данном теге, перейдём во вкладку "Атрибуты", и добавим атрибут style, и font-family:

В итоге получаем результат:

Можно так же просматривать позиционирования элементов:

С помощью данной вкладки можно вывести следующие значения:

  • Значения смещений, то есть расстояния между выбранным элементом и его родительскими элементами. Смещения представлены свойствами offsetLeft и offsetTop.
  • Значения величин Margin, Border и Padding, которые соответствуют значениям, установленным на веб-странице. Если в исходном коде веб-страницы значения для этих величин не указаны, используются значения по умолчанию Windows Internet Explorer.
  • Глубже других внутри находятся высота и ширина элемента, которые определяются свойствами offsetHeight и offsetWidth.
  • Можно так же выполнить проверку, вашего или стороннего сайта, с помощью IE8:

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

    Страницы:

    Пускай дан сайт следующего вида:

    Вызовем средства разработки с помощью горячей клавиши F12 или вкладка меню "Сервис"-> "Средства разработчика":

    Появится окно следующего содержания:

    Во вкладке HTML можно просматривать разметку веб-страниц, выбирать отдельные элементы и просматривать значения их атрибутов, проверять, как изменение значения атрибута повлияет на визуализацию страницы, а также определять, как к отдельным элементам применяются правила CSS.

    В качестве примера изменим свойства background-color для данного сайта и цвет и шрифт текста находящегося под заголовком "Heading 2", для это жмем Ctrl+B или значок который показан ниже:

    И выберем для начала шапку сайта:

    В левой колонке стал активным выбранный объект в данном случае " <div id="masthead"> ", а справа отобразились свойства стиля для данного объекта:

    Теперь изменим цвет фона для данного объекта ( Background-Color ) на красный:

    Цвет фона для шапки изменился на красный:

    Аналогично поменяем цвет для "подвала"(нижний контейнер сайта) и свойства текста находящегося по центру, в итоге у Вас может получиться следующее:

    При изменении шрифта находящегося в центре изменился шрифт на всем сайте, т.к атрибут font-family нахоидтся в теге <body></body>:

    В то время как нужный для изменения текст находится в теге <p></p>:

    Для того что бы менялся текст только в данном теге, перейдём во вкладку "Атрибуты", и добавим атрибут style, и font-family:

    В итоге получаем результат:

    Можно так же просматривать позиционирования элементов:

    С помощью данной вкладки можно вывести следующие значения:

  • Значения смещений, то есть расстояния между выбранным элементом и его родительскими элементами. Смещения представлены свойствами offsetLeft и offsetTop.
  • Значения величин Margin, Border и Padding, которые соответствуют значениям, установленным на веб-странице. Если в исходном коде веб-страницы значения для этих величин не указаны, используются значения по умолчанию Windows Internet Explorer.
  • Глубже других внутри находятся высота и ширина элемента, которые определяются свойствами offsetHeight и offsetWidth.
  • Можно так же выполнить проверку, вашего или стороннего сайта, с помощью IE8:

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

    Вернуться к учебному плану