Главная страница   /   4.1. Определение и применение стиля (Руководство по HTML5

Руководство по HTML5

Руководство по HTML5

Адам Фриман

4.1. Определение и применение стиля

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.css
a {
	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.