Основы CSS

Введение

В предыдущих руководствах этого курса мы говорили о контенте Web-сайтов и о том, как структурировать этот контент с помощью HTML. Это очень важно, так как означает, что мы задаем для документов значение и структуру, позволяющие легко объединяться с другими технологиями. Наиболее важной обсуждаемой далее технологией Web является CSS (Каскадные таблицы стилей), которая используется для оформления HTML и размещения его на Web-странице. В этой лекции мы познакомимся с CSS — что это такое, как применяется к HTML, и как выглядит базовый синтаксис CSS. Лекция имеет следующую структуру:

Что такое CSS?

В то время как HTML структурирует документ и говорит браузеру, какую функцию имеет определенный элемент (будет ли это ссылка на другую страницу или заголовок), CSS выдает браузеру инструкции о том, как вывести определенный элемент — оформление, размещение пробелов и позиционирование. Если HTML является балками и кирпичами, которые составляют структуру дома, CSS является штукатуркой и покраской для его отделки.

Это реализуется с помощью системы правил, о точном синтаксисе которых вы узнаете немного позже. Эти правила определяют, какие элементы HTML должны быть дополнительно оформлены, и в каждом правиле перечислятся свойства (например, цвет, размер, шрифт и т.д.) этих элементов HTML, которыми они будут манипулировать, и какие значения будут для них заданы. Например, правило CSS может говорить: "я хочу найти все элементы h2 и сделать их зелеными", или "я хочу найти все параграфы с именем класса author-name, сделать их фон красным, увеличить размер шрифта в них в два раза по сравнению с обычным текстом параграфа, и создать пробел в 10 пикселей вокруг каждого".

CSS не является языком программирования, таким как JavaScript, и не является языком разметки, таким как HTML — в действительности нет ничего, с чем его можно было бы сравнить. Технологии, которые определяли интерфейсы до развития Web, всегда смешивали представление и структуру. Это не слишком разумно делать в такой изменчивой среде, какой является Web, именно поэтому и был придуман CSS.

Определение правил стилей

Без дальнейших рассуждений давайте посмотрим на пример кода CSS, а затем проанализируем его:

селектор {
  свойство1:значение;
  свойство2:значение;
  свойство3:значение;
}

В данном случае можно видеть следующие детали:

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

Теперь давайте посмотрим на конкретный пример:

p {
  margin:5px;
  font-family:arial;
  color:blue;
}

Это правило выбирает элемент HTML p — для каждого элемента p в документах HTML, которые используют этот код CSS, будет применяться это правило, если только не будут существовать применяемые к ним более конкретные правила, в этом случае более конкретные правила будут переопределять это правило. Это правило влияет на свойства, которые определяют поля вокруг параграфа ( margin ), шрифт текста в параграфе ( font-family ), и цвет этого текста ( color ). Поля задаются размером в 5 пикселей, шрифт задается как Arial, а цвет текста задается как blue.

Мы вернемся ко всем этим конкретным вопросам позже — основная цель этого руководства представить основы CSS, а не мельчайшие подробности.

Все множество этих правил совместно формируют таблицу стилей (оформления). Это самый общий имеющийся синтаксис CSS. Существуют другие, но немного — возможно, самым ценным свойством CSS является его простота.

Комментарии CSS

Прежде всего необходимо узнать, как создавать в CSS комментарии. Комментарии добавляют, помещая их между символами /* и */. Комментарии могут охватывать несколько строк, и браузер будет игнорировать эти строки:

/* Это базовые селекторы элементов */

селектор {
  свойство1:значение;
  свойство2:значение;
  свойство3:значение;
}

Комментарии можно добавлять либо между правилами, либо внутри блока свойств — например, в следующем коде CSS второе и третье свойства помещены между ограничителями комментария, так что они будут игнорироваться браузером. Это будет полезно, когда вы проверяете, как влияют определенные части вашего CSS на Web-страницу; просто закомментируйте их, сохраните код CSS, и перезагрузите страницу HTML.

селектор {
  свойство1:значение;
/*
  свойство2:значение;
  свойство3:значение;
*/
}

В отличие от других языков, CSS имеет только комментарии блочного уровня — однострочные комментарии не существуют.

Можно, конечно, при желании ограничить комментарий одной строкой, но все равно потребуется использовать открывающий и закрывающий ограничители комментария ( /* и */ ).

Селекторы объединения в группу

Можно также объеднить в группу различные селекторы. Предположим, что вы хотите применить одинаковое оформление к h1 и p, тогда можно было бы написать следующий CSS:

h1 {color:red}
p {color:red}

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

h1, p {color:red}

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

p {}: селектор элемента

.example{}: селектор класса

#example{}: селектор id

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Selectors Example</title>
  <link rel="stylesheet" href="selectors.css" type="text/css" media="screen">
</head>
<body>
  <h1>CSS Basics Example</h1>

  <ul id="menu">
    <li>Item</li>
    <li class="warning">Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>

  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p class="warning">Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>

  <ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li id="extra">Item</li>
    <li>Item</li>
  </ul>
</body>
</html>

#menu{
  border-style:solid;
  border-color:rgb(0,0,0);
  border-width:1px;
}
.warning{
  background:red;
  color:white;
}
li{
  font-family:arial,sans-serif;
}

Можно соединять несколько селекторов, чтобы определить еще более конкретные правила:

p.warning{}

div#example{}

p.info, li.highlight{}

В следующем примере это используется для различия между разными стилями предупреждений:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 1//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Specific Selectors Example</title>
  <link rel="stylesheet" href="specificselectors.css" type="text/css" media="screen">
</head>
<body>
  <h1>CSS Basics Example</h1>

  <ul id="menu">
    <li>Item</li>
    <li class="warning">Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>

  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p class="warning">Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>

  <ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li id="extra">Item</li>
    <li>Item</li>
  </ul>
</body>
</html>

#menu{
  border-style:solid;
  border-color:rgb(0,0,0);
  border-width:1px;
}
.warning{
  background:red;
  color:white;
}
p.warning{
  background:#fcc;
  color:red;
}
li{
  font-family:arial,sans-serif;
}
li#extra{
  padding:10px;
}

Дополнительные селекторы 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 {
 ...
}

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

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

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

Следующие правила 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, на которые ссылается страница.

Можно также вставить увеличивающиеся цифровые значения после повторяющихся элементов (таких как маркеры списка или параграфы), используя функцию 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;
}

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

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

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

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

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

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

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);

Применение CSS к HTML

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

Строковые стили

Можно применить таблицу стилей к элементу, используя атрибут style следующим образом:

<p style="background:blue; color:white; padding:5px;">Paragraph</p>

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 1//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Inline Styles Example</title>
</head>
<body>
  <h1>CSS Basics Example</h1>

  <ul id="menu">
    <li>Item</li>
    <li class="warning">Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>

  <p>Paragraph</p>
  <p style="background:blue;color:white;padding:5px;">Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p class="warning">Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>

  <ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li id="extra">Item</li>
    <li>Item</li>
  </ul>
</body>
</html>

Если открыть этот пример в браузере, то можно видеть, что параграф с атрибутом style будет синим с белым текстом и будет иметь другой размер по сравнению с другими, как показано на рисунке 27.1.

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

Большая проблема строковых стилей состоит в том, что они делают обслуживание значительно труднее, чем это должно быть. Использование CSS предназначено для разделения представления документа и его структуры, но строковые стили делают именно обратное — рассеивают правила представления по документу.

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

Вложенные стили

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

<style type="text/css" media="screen">
  p {
    color:white; 
    background:blue; 
    padding:5px;
  }
</style>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 1//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Embedded Styles Example</title>

  <style type="text/css" media="screen">
    p{
      color:white;
      background:blue;
      padding:5px;
    }

  </style>
</head>
<body>
  <h1>CSS Basics Example</h1>

  <ul id="menu">
    <li>Item</li>
    <li class="warning">Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>

  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p class="warning">Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>

  <ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li id="extra">Item</li>
    <li>Item</li>
  </ul>
</body>
</html>

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

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

Внешние таблицы стилей

Внешние таблицы стилей означают размещение всех определений CSS в отдельном файле, сохраняя его с расширением файла CSS, и затем применение его к документам HTML, используя элемент link в заголовке документа.

Рассмотрите исходный код примера страницы:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 1//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>External Styles Example</title>
  <link rel="stylesheet" href="styles.css" type="text/css" media="screen">
</head>
<body>
  <h1>CSS Basics Example</h1>

  <ul id="menu">
    <li>Item</li>
    <li class="warning">Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>

  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p class="warning">Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>

  <ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li id="extra">Item</li>
    <li>Item</li>
  </ul>
</body>
</html>

и обратите внимание, что заголовок содержит элемент link, который ссылается на этот внешний файл CSS,

h1{
  background:gray;
  padding:1em;
}
p{
  color:green;
  padding:.5em;
}

и проверьте, что стили оформления, определенные во внешнем файле CSS, применены к коду HTML. Давайте внимательнее посмотрим на элемент link:

<link rel="stylesheet" href="styles.css" type="text/css" media="screen">

Мы говорили об элементе link раньше в курсе. Напомним, что атрибут href указывает на файл CSS, атрибут media определяет какой носитель информации должен использовать эти стили оформления (в данном случае это будет screen (экран), так как мы не собираемся выводить документ на печать в таком виде), а атрибут type определяет, чем является присоединенный ресурс (расширения файла будет для определения этого недостаточно).

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

Импорт таблиц стилей

Существует в действительности другой способ импорта внешних таблиц стилей в файлы HTML — оператор @import. Он вставляется во вложенную таблицу стилей, таким же образом, как показанный выше вложенный код CSS. Синтаксис выглядит следующим образом:

<style type="text/css" media="screen">
  @import url("styles.css");

  ...другие операторы импорта или стили CSS могут находиться здесь ...
   
</style>

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

<style type="text/css">
  @import url("styles.css") screen;

  ...другие операторы импорта или стили CSS могут находиться здесь ...
 
</style>

Первый вопрос, который вы зададите, будет следующим: "зачем мне нужен другой способ применения внешних таблиц стилей к документам HTML?" На самом деле, это не требуется — информация об @import включена здесь скорее для полноты. Существуют небольшие незначительные достоинства/недостатки использования @import или элементов link, но они очень небольшие, поэтому вы можете выбрать, какой способ вам больше нравится. Хотя элементы link считаются сегодня лучшим способом.

Заключение

В этом руководстве мы познакомились с применением CSS к документам HTML, либо как строковых стилей с помощью атрибута style, либо как вложенных стилей в элементе style в заголовке документа, либо как внешних файлов. Вы узнали также, что последний способ — соединение внешней таблицы стилей с помощью элемента link — имеет наибольший смысл, как с точки зрения обслуживания, так и кеширования. Затем мы обсудили базовый синтаксис CSS, а также комментарии, различные типы селекторов, и объединения селекторов в группу.

В следующем руководстве мы углубимся в детали CSS, рассматривая каскадирование и более подробно особенности селекторов.

Контрольные вопросы

Об авторе