... главная страницаКарта сайтаКонтакты

Главная
Синтаксис CSS
Свойства CSS
Форматирование блоков
Списки
Пример применения стилей
Оптимизация стилей
Оформление текстов
Использование блоков
Позиционирование
Слои в CSS
Готовые решения
Дополнительные возможности CSS
Программа TopStyle
Таблица цветов

 

Все свойства CSS

 
Яндекс.Метрика
 
 

Практический пример применения стилей. Анализ результатов

 

 

Заголовок ||  Первая таблица ||  Вторая таблица ||  Навигационное меню ||  Анализ результатов


Анализ результатов

Теперь подведем итог и посмотрим, какая таблица стилей у нас получилась, а затем прокомментируем каждое правило.

<STYLE type="text/сss">
BODY { /* Задание параметров для страницы в целом */
/* Гарнитура Arial для всего текста страницы */
font-family: Arial, sans-serif;
/* Нулевые отступы для страницы */
margin: 0рх; }

Н1 { /* Стиль заголовка первого уровня */
/* Выравнивание по центру */
text-align: center }

#content { /* Блок основного содержимого страницы */
/* Отступы вокруг основного текста страницы */
padding :10рх 5рх 10рх 15рх }

# footer { /* Блок внизу страницы */
/* Фоновое изображение, повтор */
background:urI("images/bg_bottom.gif") repeat-x; }

#line { /* Блок с вертикальной декоративной линией */
/* Фоновое изображение, повтор */
background: url("images/bg_line.gif") repeat-у; }

#main { /* Средний, главный блок */
/* Белый цвет фона для основного содержимого страницы */
background: #FFF; }

#menu { /* Блок меню */
/* Фоновое изображение, повтор */
background: url("images/bg_menu.gi f") repeat-y; }
/* Отступ сверху для меню */
padding-top: 0.4em;
/* Выравнивание текста по правому краю блока */
text-align:right;
/* Вертикальное выравнивание по верхнему краю */
vertical-align: top; }

/* Ссылки в блоке меню */
#menu A:link, #menu A:active, #menu A:visited { /* Синий цвет текста */
color: blue;
/* Параметры шрифта */
font: bold 12px Arial, sans-serif;
/* Высота строки */
line-height : 130%;
/* Отступ слева */
padding-right:Зрх;
/* Оформление текста*/
text-decoration:none }

#menu A:hover { /* Ссылки в момент наведения указателя мыши */
/* Оформление текста */
text-decoration:underline }
#top { /* Верхний блок */
/* Цвет фона, фоновое изображение, повтор */
background:#FFFF69 url("images/top_bg.gif") repeat-x; }
</STYLE>

Естественно, в самом документе комментарии в таблице стилей отсутствуют. Здесь они приведены лишь для того, чтобы легче было ориентироваться в таблице, поскольку мы еще очень мало работали со стилями.

При использовании CSS нам все же удалось добиться некоторого сокращения кода. Размер исходного документа был 3342 байт, а документ, переписанный при помощи CSS, имеет размер 3244 байт. При этом мы значительно улучшили внешний вид документа, более того, теперь отличия для различных браузеров стали минимальны. По большому счету, незначительно отличается только размер абзацных отступов. Хотя нам удалось уменьшить код лишь на 98 байт, что относительно немного, следует учесть еще и тот факт, что написанная нами таблица стилей может быть помещена в отдельный файл и подключаться к самому документу при помощи элемента link. Размер файла таблицы стилей 682 байт. Таблицы стилей во внешних файлах кэшируются браузерами и повторно не загружаются. Так как написанная нами таблица стилей может (и должна!) применяться для всех страниц сайта, то помещение ее в отдельный файл поможет более существенно сократить время загрузки. Правда, это преимущество проявится только при повторной загрузке страницы или при загрузке второй и всех последующих страниц сайта, использующих эту же таблицу стилей. В этом случае экономия составит около 23%. Согласитесь, это уже довольно существенно.

 

Заголовок ||  Первая таблица ||  Вторая таблица ||  Навигационное меню ||  Анализ результатов

 

Наверх страницы

 

Уроки CSS © 2007 - 2018 г. Все права защищены