CSS: правильное использование - залог успеха
Информация - Компьютеры, программирование
Другие материалы по предмету Компьютеры, программирование
?явления цвета;
свойство COLOR запишем строчными буквами;
вместо обозначения черного цвета словом black запишем #000;
остальные значения сократим так: #555555 поменяем на #555, #FF0000 поменяем на #F00.
Получится вот что:
1. A:link {
color: #000;
font-weight: bold}
2. A:visited {
color: #555;
font-weight: bold}
3. A:active {
color: #F00;
font-weight: bold}
4. A:hover {
color: #F00;
font-weight: bold}
Заметьте, что последние два селектора имеют совершенно одинаковые объявления, так что можно смело их сгруппировать:
1. A:link {
color: #000;
font-weight: bold}
2. A:visite {
color: #555;
font-weight: bold}
3. A:active, A:hover {
color: #F00;
font-weight: bold}
Займемся строками 5-7:
5. BODY {MARGIN: 0px; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px}
6. CODE {color: #00C; font-family: courier new}
7. em {font-weight: bold; font-style: normal; color: black}
Объявление стилей на элемент содержит четыре отступа, причем все они имеют значение 0, так что можно смело вместо всех четырех отступов использовать сокращенную форму записи, кроме того, надо переписать все свойства строчными буквами:
5. BODY {
margin: 0px;
padding: 0px}
В шестой строке на первый взгляд все правильно, однако в свойстве font-family указан только один шрифт. Укажем кроме него еще и шрифтовое семейство, в данном случае это monospace. Кроме того, названия шрифтов из двух и более слов рекомендуется заключать в кавычки:
6. CODE {
color: #00C;
font-family: "Сourier new", monospace}
В седьмой строке запишем название селектора em большими буквами, переместим в начало свойство color и заменим значение black на #000.
7. EM {
color: #000;
font-weight: bold;
font-style: normal}
Теперь рассмотрим строки 8-10:
8. input {border: 1px solid black; margin: 1px 2px}
9. p {text-align: justify; color: #555; FONT: 12px verdana, sans-serif}
10. TEXTAREA {border: 1px solid black; margin-top: 1px; margin-right: 2px; margin-bottom: 1px; margin-letf: 2px}
Восьмая строка практически правильная, надо только переписать селектор input заглавными буквами. В строке 9 надо:
селектор p заменить на P;
перенести в конец правила свойство text-align;
переписать свойство FONT строчными буквами.
Получится так:
9. P {
color: #555;
font: 12px Verdana, sans-serif;
text-align: justify}
В десятой строке можно кое-что сократить. Заметьте, что верхнее и нижнее поля имеют значение 1 пиксел, а левое и правое - 2 пиксела. Это можно записать сокращенно с помощью объявления margin: 1px 2px. Кроме того, надо в объявлении рамок поменять значение цвета black на #000. Тогда десятая строка будет такой:
10. TEXTAREA {
border: 1px solid #000;
margin: 1px 2px}
А сейчас сравните исправленные строки 8 и 10. Они совершенно одинаковые, т. е. можно сгруппировать селекторы INPUT и TEXTAREA:
8. INPUT, TEXTAREA {
border: 1px solid #000;
margin: 1px 2px}
С блоком селекторов по элементам мы разобрались, так что перейдем к классам:
11. .EXAMPLE {background-color: #eeeeee; padding: 20px; BORDER: 1px dotted black}
12. .imgnews {margin-right: 12px}
13. .norm {color: #555; FONT: 12px verdana, helvetica, Sans-serif}
Здесь надо в строке 11 переписать название класса EXAMPLE и свойство BORDER строчными буквами, а также написать значение цвета в сокращенной форме. Строка 12 теперь полностью корректна. А в строке 13 надо переписать свойство FONT строчными буквами:
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 {color: #666666}
15. #lnk A:visited {color: #666666}
16. #lnk A:active {color: #ff9900}
17. #lnk a:hover {color: #ff9900}
Здесь надо только записать цвета в сокращенной форме и сгруппировать селекторы 14 и 15, а также 16 и 17:
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%, что само по себе не так уж мало. К тому же она стала более логичной, так что теперь найти нужное объявление или селектор не составит труда. Это и есть цель данной главы - научиться создавать легкочитаемые и компактные таблицы стилей, а также оптимизировать старые, уже созданные ранее.
Надеюсь, вы возьмете на вооружение описанные здесь способы организации и оптимизации таблиц стилей, потому что в противном случае созданные вами таблицы будут выглядеть непрофессионально. Стремление к совершенству - хорошее качество. Эта глава является одной, пусть и маленькой, но все же ступенькой на пути к нему.
Список литературы
Для подготовки данной работы были использованы материалы с сайта