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

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

 

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

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

Практический пример структуризации и оптимизации. ( стр.1)

 

 

Структура таблиц стилей ||  Оптимизация таблиц ||  Практический пример структуризации и оптимизации


Рассмотрим таблицу стилей.

BODY {font-FAMILY: Arial, sans-serif; margin-left: 0px; margin-right: 0px}
H1 {text-align: center; text-decoration: none; letter-spacing: normal }
P{COLOR: blue; text-indent: 2em;}
P.green{COLOR: green;}
P EM {font-style: italic; COLOR: orange; letter-spacing: 0.2em;}
Hl#first {COLOR:navy;}
#comment {background: url("images/bg.gif") repeat-y; PADDING-TOP: 0.4em; text-align:right; PADDING-LEFT: 1em; vertical-align: top;}
#comment {text-indent: none, font-size: 0.8em}
A:link { color: blue; padding-right: 3px; line-height: 100%; text-decoration: none; background: yellow;}
a:active { COLOR: blue; padding-right: 3px; line-height: 100%; text-decoration: none; background: yellow;}
a:visited {COLOR: blue; padding-right: 3px; line-height: 100%; text-decoration: none; background: yellow; }
A:hover { text-decoration:underline}
a.classic {text-decoration: underline;}
H2{text-align: center;}

Как мы видим, у приведенной таблицы стилей нет единого образца, по которому написаны правила, поэтому она имеет ряд недостатков.

  • Правила не разбиты по типу селекторов, а располагаются вперемешку.
  • Между открывающейся фигурной скобкой и первым CSS-свойством в правиле имеются лишние пробелы.
  • Названия селекторов написаны то заглавными, то строчными буквами, это же относится и к названиям свойств.
  • В некоторых правилах задаются стили по умолчанию, которые можно безболезненно опустить.
  • Кое-где в правилах запись можно сократить за счет использования стенографических свойств.
Приступим к исправлению отмеченных недостатков. Сначала удалим лишние пробелы между селекторами и открывающейся фигурной скобкой, скобкой и именем свойства, между свойством и его значением и т.д. Названия селекторов перепишем ЗАГЛАВНЫМИ буквами, а названия свойств строчными. Также можно удалить символы точка с запятой в конце последнего свойства в правиле, они там ни к чему.

После всех преобразований получим такую таблицу стилей:

BODY{font-family:Arial, sans-serif; margin-left:0px; margin-right:0px}
H1{text-align:center; text-decoration:none; letter-spacing:normal}
P{color:blue; text-indent:2em}
P.green{color:green}
P EM {font-style:italic; color:orange; letter-spacing:0.2em;}
Hl#first{color:navy}
#comment{background:url("images/bg.gif") repeat-y; padding-top:0.4em; text-align:right; padding-left:1em; vertical-align:top}
#comment{text-indent:none, font-size:0.8em}
A:link{color:blue; padding-right:3px; line-height:100%; text-decoration:none; background:yellow}
A:active{color:blue; padding-right:3px; line-height:100%; text-decoration:none; background:yellow}
A:visited{color:blue; padding-right:3px; line-height:100%; text-decoration:none; background:yellow}
A:hover{text-decoration:underline}
A.classic{text-decoration:underline}
H2{text-align:center}

Тем самым мы сэкономили 61 байт, что составляет 6,8% от исходного размера таблицы стилей. Это не так уж и много, но приятно.

Теперь разобьем все селекторы на три группы по способу выделения: по элементу, по классу и по идентификатору. Иначе говоря, посмотрим, как будет выглядеть таблица, если упорядочить ее по первому правилу структуризации.

A:link{color:blue; padding-right:3px; line-height:100%; text-decoration:none; background:yellow}
A:active{color:blue; padding-right:3px; line-height:100%; text-decoration:none; background:yellow}
A:visited{color:blue; padding-right:3px; line-height:100%; text-decoration:none; background:yellow}
A:hover{text-decoration:underline} BODY{font-family:Arial, sans-serif; margin-left:0px; margin-right:0px}
H1{text-align:center; text-decoration:none; letter-spacing:normal}
H2{text-align:center}
P{color:blue; text-indent:2em}
P EM{font-style:italic; color:orange; letter-spacing:0.2em}
A.classic{text-decoration: underline}
P.green{color:green}
H1#first {color: navy}

#comment{background:url("images/bg.gif") repeat-y; padding-top:0.4em; text-align:right; padding-left:1em; vertical-align:top}
#comment P{text-indent:none; font-size:0.8em}

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

A:link{color:blue; padding-right:3рх; line-height:100%; text-decoration:none; background:yellow}
A:active{color:blue; padding-right:3рх; line-height:100%; text-decoration:none; background:yellow}
A:visited{color:blue; padding-right:3px; line-height:100%; text-decoration:none; background:yellow}
A:hover{text-decoration:underline}
A.classic{text-decoration:underline}
BODY{font-family:Arial, sans-serif; margin-left:0px; margin-right:0px}
H1{text-align:center; text-decoration:none; letter-spacing:normal}
H1#first{color:navy}
H2{text-align:center}
P{color:blue; text-indent:2em}
P EM{font-style:italic; color:orange; letter-spacing:0.2em;}
P.green{color: green}

#comment{background:url("images/bg.gif") repeat-y; padding-top:0.4em; text-align:right; padding-left:1em; vertical-align:top}
#comment P{text-indent:none; font-size:0.8em}

 

Страница: - 1 - | - 2 -

 

Структура таблиц стилей ||  Оптимизация таблиц ||  Практический пример структуризации и оптимизации

 

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

 

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