4. CSS

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

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

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

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

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

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

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

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

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

Използването на тези възможности са удобен начин за експериментиране и достигане до решение какви промени в HTML кода и CSS правилата да се направят, за да се постигне, желан нов външен вид на страницата. След тези експерименти в браузър, необходимите промени трябва да се направят и запазят в съответните файлове, за да станат те постоянни и да се видят при следващо зареждане в браузъра на файла (страницата). Браузърът не променя файловете, които е заредил, тези файлове трябва да промените с приложението редактор, което ползвате.