Селекторы 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) задан красный цвет фона.

Язык CSS

Доброго времени суток!
Я расскажу о CSS. Надеюсь, эти информация Вам пригодится.

CSS (Cascading Style Sheets — каскадные таблицы стилей) – одна из базовых технологий в современном Интернете. Нечасто можно встретить сайт, свёрстанный без примененения CSS.

CSS-код – это список инструкций для браузера, – как и где отображать элементы веб-страницы, написанный особым образом. Под «элементами» обычно подразумеваются теги XHTML/HTML и их содержимое.

Основная идея CSS в том, чтобы отделить дизайн документа от его содержимого. CSS отвечает за оформление и внешний вид, а XHTML/HTML — за содержание и логическую структуру документа.

 В классическом HTML структура и дизайн были вперемешку: рядом с текстовым абзацем его цвет, размер шрифта, тип шрифта и т.п. Если Вы захотите изменить такой простой параметр, как размер шрифта на своем сайте - придется переписывать все странички. Посмотрим на фрагмент XHTML-документа:
<h1>Сказка</h1>
<p>В одной далёкой стране, на краю болота, под пеньком, жил ёжик. И вот однажды …</p>
Из служебной XHTML разметки мы видим только элемент заголовка h1 и абзаца p, и ни слова об оформлении — шрифтах, цвете текста, фоне, отступах и прочем дизайне. Всё это возложено на CSS:
/* оформляем заголовки: */
h1 {
color: red;
background-color: yellow;
font: Tahoma 2em;
}
/* оформляем абзацы текста: */
p {
color: grey;
line-height: 150%;
}

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