Селекторы CSS

Рассмотрим таблицы стилей CSS, их селекторы.

Пример №1.
ul.nice-menu {  list-style: none;  margin-top: 30px;  width: 300px; border: none;}
В данном случае селектором является маркированный список (ul).Универсальный символ list-style задает в сокращенном виде тип списка (list-style-type), расположение маркеров (list-style-position) и их изображение (list-style-image). Его значение none означает, что данный пункт списка не маркируется. Свойство margin-top устанавливает величину отступа от верхнего края элемента (значение задается в пикселях). Свойство width определяет ширину области вокруг элемента (значение тоже задается в пикселях).Свойство border позволяет одновременно установить цвет, стиль и толщину границы (рамки) вокруг элемента. Значение none означает отсутствие рамки.

Пример №2.
@-moz-keyframes expand {    0% {    width: 5px;    padding-left: 0px;  }
Селектором здесь является вставленная в меню анимация (@-moz-keyframes).О свойстве width сказано в первом примере, оно определяет ширину области вокруг элемента (в данном случает ширина — 5 пикселей).С помощью свойства padding-left устанавливается ширина пространства между содержимым элемента и его левым краем (в данном случае ширина равна 0 пикселей).

Пример №3.
ul.nice-menu.tight li { margin-top: 0 !important; }
В данном случае селектор - маркированный список ul. Свойство margin-top устанавливает свободное пространство от верхнего края элемента в пикселях (в данном случае 0 пикселей).  Тег !important позволяет повысить приоритет стиля.

Пример №4.
ul.nice-menu a {  width: 200px;  text-decoration: none;  font-size: 14px;  color: black;  text-shadow: 0px 0px 3px #333;  font-weight: bold;  position: absolute;  padding: 5px 0px;  padding-left: 20px;}
Селектор здесь — маркированный список (ul).
Свойство text-decoration добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания (в данном случае значение none отменяет все приемы).Свойство font-size задает размер шрифта элемента.Свойство color устанавливает цвет текста элемента, например, чёрный (black).Свойство text-shadow добавляет тень к тексту, а также устанавливает её параметры: цвет тени, смещение относительно надписи и радиус размытия (чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее). В данном примере тень не смещена относительно текста, радиус ее размытия равен 3 пикселям, ее цвет — антрацитовый (#333).Свойство font-weight задает толщину (насыщенность) шрифта. Значение  bold устанавливает полужирное начертание.Свойство position определяет порядок, в соответствии с которым элемент отображается на веб-странице. По умолчанию элементы отображаются последовательно один за другим в том порядке, в котором они определены в документе. Значение absolute определяет смещение относительно родительского элемента вверх, вниз, вправо или влево (зависит от того, какой атрибут применен: top, bottom, right или left соответственно). 

Пример №5.
ul.nice-menu li.red {  background: rgb(178,59,30);}
В этом примере селектором является элемент маркированного списка (li).Свойство background позволяет установить одновременно до пяти характеристик фона.С помощью свойства background и его значения rgb(178,59,30) задан красный цвет фона.