Каскадные таблицы стилей CSS

Дополнительные селекторы CSS

С помощью селекторов CSS, селекторов элемента, класса и id -селекторов можно реализовать многое, но это, конечно, не все возможные селекторы - существуют другие селекторы, которые позволяют выбирать элементы для стилевого оформления на основе более специфических критериев:

Универсальные селекторы

Универсальные селекторы выбирают каждый элемент на странице для применения к ним стилей оформления. Например, следующее правило определяет, что для каждого элемента на странице должна быть добавлена сплошная черная граница толщиной 1 пиксель:

* {
border: 1px solid #000000;
}

Селекторы атрибутов элементов

Селекторы атрибутов позволяют выбирать элементы на основе содержащихся в них атрибутов. Например, можно выбрать каждый элемент img с атрибутом alt с помощью следующего селектора:

img[alt] {
  border: 1px solid #000000;
}

Используя приведенный выше селектор, можно создать черную границу вокруг любого изображения, которое имеет атрибут alt, и оформить другие изображения ярко-красной.

Можно выбирать элементы также и по значению атрибута, а не только по названию атрибута. Следующее правило задает все изображения с атрибутом src со значением alert.gif:

img[src="alert.gif"] {
border: 1px solid #000000;
}

Значительно более полезной является возможность выбирать определенные части атрибутов, например, расширения файлов. CSS3 фактически вводит три новых типа селекторов атрибутов, которые могут выбирать на основе текстовой строки в значениях атрибутов (в начале, конце, или в любом месте в значении).

Селекторы потомков элементов

Можно использовать селектор потомка для выбора только определенных элементов, которые являются потомками других определенных элементов. Например, следующее правило задает цвет текста только тех strong элементов, которые являются потомками элементов h3, как green, но не для других элементов strong:

h3 > strong {
  color: green;
}

Селекторы потомков не поддерживаются в браузере IE 6 (и более младших версиях).

Селекторы нижележащих элементов

Селекторы нижележащих элементов очень похожи на селекторы потомков, за исключением того, что селекторы потомков выбирают только непосредственно нижележащих, а селекторы нижележащих выбирают подходящие элементы в любом месте иерархии элементов, а не только непосредственно нижележащих. Рассмотрим пример.

<div>
  <em>Привет</em>
  <p>и сразу же 
    <em>Пока</em>.
  </p>
</div>

В этом фрагменте элемент div является предком всех других элементов. Он имеет двух потомоков, em и p. Элемент p имеет один элемент потомок, еще один em.

Селекторы смежных одноуровневых элементов

Эти селекторы позволяют выбирать определенный элемент, который следует непосредственно после другого определенного элемента на том же уровне в иерархии элементов. Например, если вы хотите выбрать элементы p, которые следуют непосредственно после элементов h2, но никакие другие элементы p, можно воспользоваться следующим правилом:

h2 + p {
 ...
}

Селекторы смежных одноуровневых элементов не поддерживаются в браузере IE 6 (и более младших версиях).

Псевдо-классы

Псевдо-классы используются для обеспечения стилевого оформления не для элементов, а для различных состояний элементов. Наиболее обычным применением, которое можно встретить, является оформление состояний ссылок.

Список ниже представляет различные псевдо-классы и описание состояния ссылки, которое они выбирают:

Следующие правила CSS определяют что:

• по умолчанию ссылки будут синими.
• когда курсор мыши оказывается над ссылкой, используемое по умолчанию подчеркивание ссылки исчезает.
• когда ссылка будет посещена, она станет серой.
• когда ссылка активна, она становится жирной, как дополнительный признак, что что-то сейчас произойдет.

  a:link{
   color: blue;
  }
  
  a:hover{
   text-decoration: none;
  }
  
  a:visited{
   color: gray;
  }
  
  a:active{
   font-weight: bold;
  }

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

Можно выделить поле ввода, которое содержит активный мигающий курсор с помощью следующего правила:

input:focus {
 border: 2px solid black;
 background-color: lightgray;
}

Псевдо-элементы

Псевдо-элементы имеют два назначения. Прежде всего, можно использовать их для выбора первой буквы или первой строки текста в заданном элементе. Чтобы создать буквицу в начале каждого параграфа документа, можно использовать следующее правило:

p:first-letter {
  font-weight: bold;
  font-size: 250%
  background-color: red;
}

Чтобы сделать первую строку каждого параграфа жирной, можно использовать следующее правило:

p:first-line {
  font-weight: bold;
}

Вторым применением псевдо-элементов является генерация контента с помощью CSS, что является более сложной задачей. Можно использовать псевдо-элементы :before или :after для определения того, что содержимое должно быть вставлено перед или после элемента, который вы выбираете. Затем определяют то, что должно быть вставлено. В качестве простого примера можно использовать следующее правило для вставки декоративных изображений после каждой ссылки на страницу:

a:after{
  content: " " url(flower.gif);
}

Можно также использовать функцию attr() для вставки значений атрибутов элементов после элемента. Например, можно вставить цель каждой ссылки в документ в скобках с помощью следующего кода:

a:after{
  content: "(" attr(href) ")";
}

Такие правила прекрасно подходят для таблиц стилей печати, которые являются таблицами стилей, которые автоматически применяются, когда пользователь печатает страницу. Преимущество для пользователя состоит в том, что можно скрыть всю навигацию, которую невозможно использовать в печатном материале, и использовать описанную выше технику, чтобы читатель мог видеть адреса URL, на которые ссылается страница.

Эти селекторы не поддерживаются в IE 6 (и более младших версиях).

Сокращенная запись CSS

Можно объединить несколько связанных свойств CSS в одно свойство, чтобы сэкономить время и свои усилия.

Сравнение индивидуальных и сокращенных значений

Рассмотрим следующее правило для полей (сокращения для заполнения и границы работают таким же образом):

div.foo {
  margin-top: 1em;
  margin-right: 1.5em;
  margin-bottom: 2em;
  margin-left: 2.5em;
}

Это правило можно записать короче:

div.foo {
	margin: 1em 1.5em 2em 2.5em;
}

Задание менее четырех значений для сокращенного свойства

Сокращенное значение может иметь менее четырех значений, согласно приведенному ниже списку. Результаты упорядочены по числу предоставленных значений:

Справочник сокращений

border-left-width: 2px;
border-left-style: solid;
border-left-color: black;

font-size: 1.5em;
line-height: 200%;
font-weight: bold;
font-style: italic;
font-family: Georgia, "Times New Roman", serif

font: 1.5em/200% bold italic Georgia,"Times New Roman",serif;

background-color: #000;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;

background:#000 url(image.gif) no-repeat top left;

list-style-type: circle;
list-style-position: inside;
list-style-image: url(bullet.gif);

list-style: circle inside url(bullet.gif);