Учебни записки

4. CSS

4.1. Инспектиране и експериментиране с HTML елементите

Браузърите могат да покажат какви CSS декларации и правилата са приложени на всеки елемент, който те изобразяват. За целта върху даден елемент от уебстраница трябва да се щракне десния бутон на мишката и да се избере команда Inspect Element.

Показва се прозорецът с инструменти за разработка на сайтове, който се състои от три части.

В лявата част се показва HTML кода на страницата, като тагът на щракнатия елемент е оцветен (селектиран).

В средната част се показват CSS правилата, приложени върху селектирания елемент.

В дясната част се показват стойностите на различни свойства на елемента, установили се в следствие на прилагането на правилата.

При преминаване на курсора на мишката над таговете на даден елемент в лавата част, в прозореца със страницата, около елемента се визуализират трите рамки на кутиения модел. Показват се също и размерите в пиксели.

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

И в трите части на прозореца с инструменти за разработка може да се редактира, като направените промени се виждат веднага в страницата.

Използването на тези възможности са удобен начин за експериментиране и достигане до решение какви промени в HTML кода и CSS правилата да се направят, за да се постигне, желан нов външен вид на страницата.