Уменьшение продолжительности загрузки web-страницы с использованием CSS
Невзирая на все большее увеличение скорости интернет каналов проблемы продолжительности загрузки web-страниц еще актуальны. Они связаны не только со скоростью каналов, но и с характером подключения (большое количество «промежуточных» элементов), и со скоростью работы серверов. Использование CSS может помочь преодолеть (или уменьшить) эти трудности. При этом не только увеличится скорость доступа, но и уменьшится объем передаваемых данных.
Постарайтесь не применять таблицы для задания оформления страницы
Список причин, по которым для оформления web-страниц целесообразнее применять CSS, а не таблицы:
- Как правило, таблицы разбираются web-браузерами два раза: в начале для определения структуры, а второй раз – для выявления набора данных таблицы.
- В большинстве случаев таблицы изображаются на странице целиком, а не частично по степени загрузки содержимого.
- Иногда в колонках таблиц приходится использовать прозрачные картинки для задания их минимальной ширины.
- CSS файлы меньше по размеру, чем таблицы для форматирования.
- Сами CSS настройки могут находиться в отдельном файле. Такие файлы будут храниться в кэше и загружаться только один раз.
Создание кнопок без использования картинок
Почти все заголовки и кнопки можно создать используя только текст и оформить используя CSS.
Вот пример настроек оформления кнопки:
a.btn {
color:#fff;
background:#ace;
font-size:19;
text-decoration:none;
padding:10px;
border:4px #ccc outset;
}
a:hover.btn {
border:4px #ccc inset;
}
А это пример создания кнопки с приведенным оформлением:
<a href="ButtonPage.htm" class="btn">Button</a>
В примерах приведено оформление кнопки, которая при наведении изменяет вид своей рамки. Аналогично можно создавать и более сложное оформление.
Загрузка рисунков оформления через CSS параметры
Многие картинки фона лучше загружать через настройки стилей.
Пример HTML кода:
<div class="my_image"></div>
И пример CSS кода:
. my_image {
background: url(filename.gif);
width: 210px;
height: 160px;
}
В таком случае web-браузер будет загружать рисунок после отображения всего текста страницы. Подобный вариант оформления лучше всего подходит для фоновых, декоративных картинок. Но для рисунков содержимого страницы все равно надо применять теги IMG.
Применение контекстных стилей
Такой вариант кода не очень эффективен:
Пример CSS:
.text1 {
color: #23c;
font-size: 14;
}
Пример HTML:
<p class="text1">Первая строка</p> <p class="text1">Вторая строка</p> <p class="text1">Третья строка</p> <p class="text1">Четвертая строка</p>
Можно не задавать класс каждому абзацу, а сгруппировать их и поместить в один тег DIV:
Пример CSS:
.text1 p {
color: #23c;
font-size:14;
}
Пример HTML:
<div class="text1"> <p>Первая строка</p> <p>Вторая строка</p> <p>Третья строка</p> <p>Четвертая строка</p> </div>
Такой вариант указывает web-браузеру, что к каждому параграфу внутри тега с классом «text1» будет применяться особое оформление (цвет и размер шрифта).
Используйте комплексные CSS параметры
В CSS есть целый набор универсальных свойств, которые позволяют задать одновременно сразу несколько характеристик:
Фон. Используйте background вместо набора: background-attachment, background-color, background-image, background-position, background-repeat.
Границы. Используйте border вместо набора: border-width, border-style, border-color. Используйте border-bottom вместо набора: border-width, border-style, border-color. Используйте border-left вместо набора: border-width, border-style, border-color. Используйте border-right вместо набора: border-width, border-style, border-color. Используйте border-top вместо набора: border-width, border-style, border-color.
Шрифт. Используйте font вместо набора: font-style, font-variant, font-weight, font-size, line-height, font-family.
Маркеры списков. Используйте list-style вместо набора: list-style-type, list-style-position, list-style-image.
Внешние отступы. Используйте margin вместо набора: margin-top, margin-right, margin-bottom, margin-left.
Внутренние поля. Используйте padding вместо набора: padding-top, padding-right, padding-bottom, padding-left.
