Опубликован: 19.07.2010 | Доступ: свободный | Студентов: 1663 / 146 | Оценка: 4.07 / 3.43 | Длительность: 20:59:00
Лекция 3:

Каскадные таблицы стилей 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 (и более младших версиях).

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

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

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

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

Следующие правила 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;
}
Задание менее четырех значений для сокращенного свойства

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

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

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

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

С помощью одной строки сокращения можно определить размер шрифта, толщину, стиль, семейство и высоту строки. Например, рассмотрим следующий код:

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;
Сокращение для фона

С помощью одной строки 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;
Сокращения для списков

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

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

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

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