Создание эффективного стиля
Использование каскадных таблиц стилей уже само по себе повышает удобство
разработки сайта и его действенность. Активное применение стилей и управление с
помощью них видом элементов веб-страниц — современная парадигма создания сайтов.
Именно по этой причине следует уделить достаточно внимания написанию стилевого
кода. Учитывая некоторые особенности которые описаны ниже, можно создать
действительно эффективный и удобный документ, содержащий описание стиля и
ускоряющий загрузку веб-страниц.
Размещайте каскадные таблицы стилей в отдельном файле
Размещение
стилей в отдельном файле позволяет ускорить загрузку веб-страниц за счет
уменьшения кода, а также кэширования файла с описанием стиля. Также файл со
стилями позволяет, изменяя параметры в одном единственном месте, управлять видом
всех страниц, где указана на него ссылка.
Создавайте свои собственные селекторы
Селекторы Class удобно
использовать, когда нужно применить стиль к разным тегам веб-страницы: ячейкам
таблицы, ссылкам, параграфам и др. Для изменения отдельных слов или даже букв, а
также блоков, содержащих в себе разные элементы употребляются теги SPAN и DIV.
Тег SPAN предназначен для
изменения стиля выделенной части текста, такой как отдельный символ или их
набор, а DIV позволяет применять стиль сразу к целому
блоку. Перед этим тегом, в отличие от SPAN, автоматически
добавляется перенос строки и пустое пространство, аналогично действию
параграфа.
Несколько подряд идущих тегов, задающих форматирование, лучше
заменить одним тегом SPAN с заданным стилем.
Делайте стили удобными для редактирования
Пока происходит работа
над сайтом, файл со стилями приходится изменять по многу раз. Для повышения
удобства и понимания цели различных селекторов, используйте комментарий, который
помещается между символами /* и */. Комментарий повышает читабельность кода и
позволяет легко разобраться в нем даже по прошествии некоторого времени. Другим
способом создания удобного стиля является использование различных отступов и
пробелов. Лучше для этой цели подходит знак табуляции, он добавляет сразу
несколько пробелов, и при этом занимает минимум памяти. Сравните два способа
описания параметров (пример 1).
Пример 1. Написание файла со стилем
/* Данный стиль краткий, но неудобный для внесение изменений
*/
a {font-family: Arial, Helvetica, sans-serif; font-size: 80%; color:
#003366;}
a:visited {color: #660066;}
a:hover {color: #800000;}
.title
{font-size: 120%; font-family: Verdana, Arial, Helvetica, sans-serif; color:
#FFFFEE; text-align: center;}
/* Тот же самый стиль, но представлен более «красиво» и понятно */
a {
font-family: Arial, Helvetica, sans-serif;
font-size: 80%;
color: #003366;
}
a:visited {
color: #660066;
}
a:hover {
color: #800000;
}
.title {
font-size: 120%;
font-family: Verdana, Arial, Helvetica,
sans-serif;
color: #FFFFEE;
text-align: center; }
Несмотря на то, что объем нижнего примера больше, чем у верхнего, управлять
параметрами стилей удобней и наглядней.
Удаляйте неиспользуемые селекторы
Большое количество селекторов
создает путаницу в вопросе о том, кто из них за что отвечает, да и просто
увеличивает объем документа. Чтобы этого не произошло, удаляйте селекторы,
которые никак не применяются на сайте. К сожалению, определить точно, какой
элемент используется, а какой нет, довольно сложно, поэтому добавляйте
комментарий к своим собственным селекторам. Это поможет хотя бы не запутаться в
большом объеме текста.
Переопределяйте стиль тегов
«Идеальный» код HTML должен содержать
только теги и текст, а более ничего лишнего. Для достижения такого результата
или хотя бы приближения к нему, описание стилей тегов выносится в отдельный
файл, а сам тег пишется без всяких параметров (пример 2). В этом случае
происходит сокращение кода и ускорение загрузки веб-страниц.
Пример 2. Подключение таблицы связанных стилей
<html>
<head>
<link rel="stylesheet"
type="text/css" href="mysite.css">
или
<link rel="stylesheet"
type="text/css"
href="http://www.mysite.ru/main.css">
</head>
<body>
<h1>Hello,
world!</h1>
</body>
</html>
Применяйте группирование и контекстные селекторы
Достоинство и
удобство группирования состоит в описании одинаковых параметров селекторов в
определенном месте. Тем самым, значение параметра пишется только один раз, а не
повторяется многократно. Контекстные селекторы расширяют возможности языка
описания стилей, делая более гибким их степень применения на
веб-страницах.
|