Question

Помогите разобраться с кодом CSS начинающему профессионалу!

#catmenu li.item-parent {position:relative;}
#catmenu li a {position:relative;display:block;float:left;font-size:15px;text-align:center;}
#catmenu li a span {display:inline-block;padding:0 0 0 20px;line-height:120%;vertical-align:middle;}
#catmenu li a:hover {text-decoration:none;}

Например, вот такой кусок. Я не могу понять, в чем заключается смысл добавления после #catmenu надписей вроде li, a, span. Буду очень признателен, если вы подробно обясните, на что они влияют, где изменится шрифт, если, скажем, я изменю фонт-сайз во второй строке.

Answer 1

Здравствуйте!

Сначала отвечу, что произойдет при изменении font-size:15px; во второй строке.

Изменится размер шрифта текста ссылки, т.е. тот текст который будет обнесен тегом <a></a> пример: <a href="ссылка">Тут текст который будет изменен</a>

Ну а теперь по теме, ну вот в id с именем catmenu (#catmenu) есть дочерние элементы, дочерние это те которые лежат внутри  id="catmenu" к ним и прописываются стили, что бы корректно отображалось например меню или еще что-то...

Это так сказать уточнение стилей к чему обращаться...
Ну например вы живете в России, но мы не знаем какой город, какой дом, улица и т.д.

А теперь уточняем, вы живете

с.Россия ---> г.Москва ---> ул.Ленина ---> Дом 77 ---> кв 5

вот видите тепрь более понятно где выживете, так же и стили прописываются...

Можно сделать например, что бы текст менялся при наведении или нажатии нужно просто дописать псевдокласс, пример

#catmenu li a:hover {color:red;}

а можно например что бы при наведении на данную ссылку менялся цвет другого текста, пример:
#catmenu li a:hover .text {color:red;}

теперь поменяется цвет не той ссылки на которую вы навели, а цвет ссылки или текста который имеет класс text (class="text")

ну вообщем как-то так, кажись подробно описал)

Answer 2

Идентификатор #catmenu идущие за ним тэги означают что span это последний дочерний элемент к которому будут применяться стили, проще говоря от родителя к дочери.

Почитайте http://htmlbook.ru/samcss/kaskadirovanie