Определение и применение стиля
CSS стиль состоит из одного или нескольких объявлений, разделенных точкой с запятой. Каждое объявление состоит из свойства CSS и значения этого свойства, разделенных двоеточием. В листинге 4-1 показан простой стиль.
Листинг 4-1: Простой CSS стиль
background-color:grey; color:whiteНа рисунке 4-1 показаны объявления, свойства и значения в этом стиле.
Рисунок 4-1: Анатомия CSS стиля
В этом примере у стиля есть два объявления. Первое устанавливает значение grey для свойства background-color, а второе устанавливает значение white для свойства color.
Существует широкий диапазон доступных свойств CSS, и каждое из них управляет некоторыми аспектами внешнего вида элементов, к которым оно применяется. В главах с 19 по 24, я опишу свойства CSS и покажу результаты их использования.
CSS свойства, используемые в этой главе
Чтобы показать, как работает CSS, я должен использовать некоторые свойства CSS, которые будут описаны только в последующих главах. В таблице 4-2 перечислены эти свойства, дано очень краткое их описание, и показано, в каких главах содержится полная информация о них.
Таблица 4-2: Краткое описание CSS свойств
| Свойство | Описание | Глава |
background-color |
Устанавливает для элемента цвет заднего фона | 19 |
border |
Определяет рамку, которая окружает элемент | 19 |
color |
Устанавливает для элемента цвет переднего плана | 24 |
font-size |
Устанавливает размер шрифта для текста элемента | 22 |
height |
Устанавливает высоту элемента | 20 |
padding |
Определяет количество пространства (размер пустого места) между содержимым элемента и его рамкой | 20 |
text-decoration |
Определяет декор (украшение), применяемое к тексту элемента, включая подчеркивание, которое используется в этой главе | 22 |
width |
Устанавливает ширину элемента | 20 |
Применение внутреннего стиля
Недостаточно просто определить стиль, необходимо также применить его: по сути, сказать браузеру, на какие элементы должен влиять стиль. Самый прямой способ применить стиль к элементу – это использовать глобальный атрибут style (описанный в главе 3), как показано в листинге 4-2.
Листинг 4-2: Применение стиля при помощи глобального атрибута style<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<a href="http://apress.com" style="background-color: grey; color: white">
Visit the Apress website
</a>
<p>I like <span>apples</span> and oranges.</p>
<a href="http://w3c.org">Visit the W3C website</a>
</body>
</html>В этом HTML документе есть четыре контекстных элемента: две гиперссылки (созданные с помощью элемента a) и элемент р, содержащий элемент span. Я использовал глобальный атрибут style, чтобы применить стиль к первому элементу a, который ссылается на веб сайт Apress. (Вы можете узнать больше об элементах a, р, и span в главах 8 и 9. На данный момент нас интересует только применение стилей). Атрибут style влияет лишь на тот элемент, к которому он был применен, как вы можете видеть на рисунке 4-2.
Рисунок 4-2: Применение стиля напрямую к элементу
Влияние двух свойств CSS, используемых в данном примере, можно видеть на этом рисунке. Свойство background-color устанавливает цвет фона элемента, а свойство color устанавливает цвет переднего плана. На два других контекстных элемента в HTML документе стиль не влияет.
К вопросу о религии CSS
CSS – это тема, которая, кажется, привлекает фанатиков. Если вы начнете читать любые онлайн дискуссии о том, как достичь определенного эффекта при помощи CSS, вы скоро увидите аргументы, пропагандируемые как единственный правильный путь. У меня нет времени на людей, которые высказывают такие аргументы: единственным правильным путем для решения любой задачи является использование знаний и инструментов, которые вам доступны, чтобы оказывать поддержку столь многим из ваших пользователей, насколько это возможно. Глупо загонять себя в угол, чтобы достичь совершенства в CSS. Мой совет заключается в том, чтобы игнорировать эти аргументы, а вместо этого адаптировать и развивать приемы и методы, которые подходят вам, и которые вы считаете приятными и эффективными.
Создание встроенного стиля
Применение стилей к отдельным элементам может быть полезным техническим приемом, но это неэффективный подход для использования в сложных документах, которые могут требовать применения десятков различных стилей. Вам нужно не только использовать правильный стиль для каждого элемента, но также быть осторожными в том, чтобы правильно применять обновления, что является процессом, подверженном множеству ошибок. Таким образом, вы можете использовать элемент style (в отличие от атрибута style), чтобы определить встроенные стили и с помощью CSS селектора указать браузеру, какой стиль он должен применять. В листинге 4-3 показано, как можно использовать элемент style с простым CSS селектором.
Листинг 4-3: Использование элемента style<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
a {
background-color: grey;
color: white;
}
</style>
</head>
<body>
<a href="http://apress.com">Visit the Apress website</a>
<p>I like <span>apples</span> and oranges.</p>
<a href="http://w3c.org">Visit the W3C website</a>
</body>
</html>Я опишу элемент style и его атрибуты в главе 7. В этой же главе нам интересно то, как указать стиль внутри элемента style. Вы по-прежнему используете объявления стилей, но они окружены фигурными скобками (символами { и } ) и следуют за селектором, как показано на рисунке 4-3.
Рисунок 4-3: Строение стиля, объявленного внутри элемента style
Селектором в этом примере является a, который указывает браузеру, что нужно применить стиль к каждому a элементу в документе. Вы можете увидеть, как браузер это делает, на рисунке 4-4.
Рисунок 4-4: Результат использования a селектора
Вы можете определить несколько стилей в одном элементе style: вы просто повторяете процесс определения селектора и набора объявлений. В листинге 4-4 показан элемент style, у которого есть два стиля.
Листинг 4-4: Определение нескольких стилей в одном элементе style<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
a {
background-color: grey;
color: white;
}
span {
border: thin black solid;
padding: 10px;
}
</style>
</head>
<body>
<a href="http://apress.com">Visit the Apress website</a>
<p>I like <span>apples</span> and oranges.</p>
<a href="http://w3c.org">Visit the W3C website</a>
</body>
</html>У этого нового стиля есть селектор span (что обозначает, что браузер будет применять стиль для всех элементов span в документе и использовать свойства border и padding). Свойство border определяет рамку вокруг целевого элемента, а свойство padding создает некоторое пространство вокруг него. Вы можете увидеть результат на рисунке 4-5.Селекторы и свойства в этих примерах – это базовые селекторы и свойства. Я описываю полный спектр селекторов в главах 17 и 18 и свойств в главах 19 и 20.
Рисунок 4-5: Применение нескольких стилей
Использование внешней таблицы стилей
Вместо того чтобы определять один и тот же набор стилей для каждой из ваших HTML страниц, вы можете создать отдельную таблицу стилей. Это самостоятельный файл, обычно с расширением .css, в который вы помещаете ваш стиль. В листинге 4-5 показано содержимое файла styles.css, который вы можете найти при загрузке исходного кода, сопровождающего эту главу и который можно получить на apress.com.
Листинг 4-5: Файл styles.cssa {
background-color: grey;
color: white;
}
span {
border: thin black solid;
padding: 10px;
}Вам не нужно использовать элемент style в таблице стилей: вы просто используете селектор, за которым следуют объявления для каждого требуемого стиля. Можно использовать элемент link, чтобы присоединить стили к документу, как показано в листинге 4-6.
Листинг 4-6: Импорт внешней таблицы стилей
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<link rel="stylesheet" type="text/css" href="styles.css"></link>
</head>
<body>
<a href="http://apress.com">Visit the Apress website</a>
<p>I like <span>apples</span> and oranges.</p>
<a href="http://w3c.org">Visit the W3C website</a>
</body>
</html>Вы можете присоединить столько таблиц стилей, сколько вам нужно: по одной на элемент link. Я описываю элемент link в главе 7. Как и с элементом style, порядок, в котором вы импортируете стили, очень важен, если вы определяете два стиля с одинаковым селектором. Будет применяться тот, который загружается последним.
Импортирование другой таблицы стилей
Вы можете импортировать стили из одной таблицы стилей в другую с помощью оператора @import. Чтобы продемонстрировать эту особенность, я создал вторую таблицу стилей с именем combined.css, содержание которой показано в листинге 4-7.
Листинг 4-7: Файл combined.css@import "styles.css";
span {
border: medium black dashed;
padding: 10px;
}Вы можете импортировать столько стилей, сколько хотите, используя один оператор @import для каждой таблицы стилей. Оператор @import должен быть расположен в верхней части таблицы стилей, прежде чем определены любые новые стили. В таблице стилей combined.css ситуация выглядит следующим образом: сперва я импортировал styles.css, а затем определил новый стиль для элемента span. В листинге 4-8 показано, как HTML документ ссылается на combined.css.
Листинг 4-8: Ссылка на таблицу стилей, которая содержит импортируемые стили
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<link rel="stylesheet" type="text/css" href="combined.css" />
</head>
<body>
<a href="http://apress.com">Visit the Apress website</a>
<p>I like <span>apples</span> and oranges.</p>
<a href="http://w3c.org">Visit the W3C website</a>
</body>
</html>В результате применения оператора @import в combined.css импортируются оба стиля, определенные в таблице стилей styles.css, а затем переопределяется стиль, который будет применен к элементу span. Результат можно увидеть на рисунке 4-6.
Рисунок 4-6: Импортирование стилей из другой таблицы стилей
Оператор @import широко не используется. Это происходит отчасти потому, что об его существовании не известно широкой публике, но также потому, что браузеры, как правило, работают с оператором @import с более низкой производительностью, чем при использовании нескольких элементов link и опираясь на каскады стилей (которые я объясню в следующем разделе).
Указание кодировки символов в таблице стилей
Единственным, что может повстречаться перед оператором @import в таблице стилей CSS, является оператор @charset, который определяет кодировку используемого стиля. В листинге 4-9 показано, как задать кодировку UTF-8 (которая является наиболее распространенной).
Листинг 4-9: Определение типа кодировки символов в каскадной таблице стилей
@charset "UTF-8";
@import "styles.css";
span {
border: medium black dashed;
padding: 10px;
}Если вы не указали тип кодировки, браузер будет использовать кодировку, указанную в HTML документе, который загружает таблицу стилей. Если для HTML документа кодировка не указана, по умолчанию будет использоваться UTF-8.
