Основы 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;
}

Вы можете не считать, что это очень полезно, но опять же это может быть полезно для целей отладки. Значительно более полезной является возможность выбирать определенные части атрибутов, например, расширения файлов. И такая возможность на подходе — CSS 3 фактически вводит три новых типа селекторов атрибутов, которые могут выбирать на основе текстовой строки в значениях атрибутов (в начале, конце, или в любом месте в значении). Прочтите статью Кристофера Шмитта о селекторах атрибутов в CSS 3 (http://dev.opera.com/articles/view/css-3-attribute-selectors/).

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

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

h3 > strong {
  color: blue;
}

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

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

<div>
  <em>hello</em>
  <p>In this paragraph I will say 
    <em>goodbye</em>.
  </p>
</div>

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

Можно использовать селектор потомоков для выбора только em непосредственно внутри div следующим образом:

div > em {
 ...
}

Если вместо этого использовать селектор нижележащих следующим образом:

div em {
 ...
}

будут выбраны оба элемента em.

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

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

h2 + p {
 ...
}

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

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

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

• :link - обычное состояние ссылок по умолчанию, когда вы впервые их находите.
• :visited - ссылки, которые вы уже посетили в используемом в данный момент браузере.
• :focus - ссылка (или поле формы, или что-то еще), в которой в данный момент находится курсор клавиатуры.
• :hover - ссылка, на которой в данный момент находится указатель мыши.
• :active - ссылка, на которой в данный момент происходит щелчок.

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

a:link{
 color: blue;
}
a:visited{
 color: gray;
}

a:hover{
 text-decoration: none;
}

a:active{
 font-weight: bold;
}

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

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

Затем я должен взглянуть на :first-child - этот псевдо-класс выбирает все экземпляры элемента, который является первым элементом-потомком своего предка, поэтому, например, следующее правило выбирает первый объект списка (маркированного или нумерованного) в любом списке и делает его текст жирным:

li:first-child {
 font-weight: bold;
}

И последнее, я кратко упомяну псевдо-класс :lang, который выбирает элементы, язык которых был задан как определенный язык с помощью атрибута lang. Например, следующий элемент:

<p lang="en-US">A paragraph of American text, gee whiz!<p>

можно было бы выбрать с помощью кода:

p:lang(en-US) {
 ...
}

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

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

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

Первая буква каждого параграфа будет теперь жирной и на 300% больше остального параграфа, и будет иметь красный фон.

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

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

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

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

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

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

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

Можно также вставить увеличивающиеся цифровые значения после повторяющихся элементов (таких как маркеры списка или параграфы), используя функцию counter() — это объясняется более подробно в статье на сайте http://dev.opera.com article по счетчикам CSS (http://dev.opera.com/articles/view/automatic-numbering-with-css-counters/).

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

Еще одной вещью, с чем вы будете регулярно cталкиваться в этом курсе, является сокращенная запись 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;
}

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

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

1. Одно значение применяется ко всем четырем сторонам, например, margin: 2px ;.
2. Первое значение применяется к верху и низу, второе к левому и правому краю, например, margin: 2px 5px;.
3. Первое и третье значения применяются к верху и низу соответственно, второе значение применяется к левому и правому краю, например, margin: 2px 5px 1px;.
4. Значения применяются к верху, правому краю, низу, и левому краю в соответствии с порядком исходного кода CSS, как показано выше.

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

Выбор между одиночным свойством и сокращенным значением

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

• Необходимо задать только одно поле. В ситуации, когда требуется задать только одно свойство, одновременное задание несколькоих свойств обычно нарушает Принцип KISS (Будь проще, дурачок!), объясняемый в Глоссарии.
• Селектор, к которому применяются свойства, зависит от множества предельных случаев. Когда это происходит - что произойдет, рано или поздно - неизбежная путаница сокращенных значений может создавать трудности, когда потребуется исправить или изменить компоновку.
• Создаваемая таблица стилей будет поддерживаться людьми, чьи навыки (или возможности пространственного мышления) ограничены. Если вы можете рассчитывать, что они прочитают эту лекцию, то можно, наверное, не беспокоиться о таком сценарии, но лучше не делать никаких предположений.
• Вам потребуется заменить значение, чтобы учесть предельный случай. Хотя это требование часто является сигналом плохо спроектированного документа или таблицы стилей … в любом случае об этом едва ли будет известно.

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

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

   border-left-width: 2px;
   border-left-style: solid;
   border-left-color: black;
2. Сокращения для некоторых свойств полей ( margin ), заполнения ( padding ) и границы ( border ): Все это действует таким же образом как было показано выше в разделе "Выбор между одиночным свойством и сокращенным значением".
3. Сокращения для шрифта: С помощью одной строки сокращения можно определить размер шрифта, толщину, стиль, семейство и высоту строки. Например, рассмотрим следующий CSS:

   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;
4. Сокращение для фона: С помощью одной строки CSS можно определить цвет фона, фоновое изображение, повторение изображения и позицию изображения. Возьмем следующий код:

   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;
5. Сокращения для списков: В данном случае аналогичная история со свойствами списков позволяет задать на одной строке значения свойств для типа маркера списка, позиции и изображения. Возьмем следующий CSS:

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

   Это эквивалентно следующему:

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