14. #lnk A:link, #lnk A:visited {
color: #666}
15. #lnk A:active, #lnk A:hover {
color: #F90}
Вся обновленная таблица стилей будет выглядеть следующим образом:
1. A:link {
color: #000;
font-weight: bold}
2. A:visited {
color: #555;
font-weight: bold}
3. A:active, A:hover {
color: #F00;
font-weight: bold}
5. BODY {
margin: 0px;
padding: 0px}
6. CODE {
color: #00C;
font-family: "Courier new", monospace}
7. EM {
color: #000;
font-weight: bold;
font-style: normal}
8. INPUT, TEXTAREA {
border: 1px solid #000;
margin: 1px 2px}
9. P {
color: #555;
font: 12px Verdana, sans-serif;
text-align: justify}
11. .example {
background-color: #EEE;
border: 1px dotted #000;
padding: 20px}
12. .imgnews {
margin-right: 12px}
13. .norm {
color: #555;
font: 12px Verdana, Helvetica, sans-serif}
14. #lnk A:link, #lnk A:visited {
color: #666}
15. #lnk A:active, #lnk A:hover {
color: #F90}
Как видите, таблица стилей стала значительно более структурированной и читаемой. Кроме того, первоначальная таблица весила 877 байт, а оптимизированная таблица весит 677 байт (если убрать переводы строк и лишние пробелы перед каждым объявлением). Мы смогли уменьшить вес таблицы стилей на 23%, что само по себе не так уж мало. К тому же она стала более логичной, так что теперь найти нужное объявление или селектор не составит труда. Это и есть цель данной главы - научиться создавать легкочитаемые и компактные таблицы стилей, а также оптимизировать старые, уже созданные ранее.
Надеюсь, вы возьмете на вооружение описанные здесь способы организации и оптимизации таблиц стилей, потому что в противном случае созданные вами таблицы будут выглядеть непрофессионально. Стремление к совершенству - хорошее качество. Эта глава является одной, пусть и маленькой, но все же ступенькой на пути к нему.