|
|
|
Практический пример структуризации и оптимизации. ( стр.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-Style.SU, Вы уверенно будете пользоваться всеми возможностями технологий каскадных таблиц стилей Cascading Style Shett
