CSS: правильное использование - залог успеха

При верстке вам частенько придется вводить новые классы и как-то их называть. Естественным образом возникает желание, чтобы названия были короткими

CSS: правильное использование - залог успеха

Информация

Компьютеры, программирование

Другие материалы по предмету

Компьютеры, программирование

Сдать работу со 100% гаранией
> 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}

Объявление стилей на элемент <BODY> содержит четыре отступа, причем все они имеют значение 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%, что само по себе не так уж мало. К тому же она стала более логичной, так что теперь найти нужное объявление или селектор не составит труда. Это и есть цель данной главы - научиться создавать легкочитаемые и компактные таблицы стилей, а также оптимизировать старые, уже созданные ранее.

Надеюсь, вы возьмете на вооружение описанные здесь способы организации и оптимизации таблиц стилей, потому что в противном случае созданные вами таблицы будут выглядеть непрофессионально. Стремление к совершенству - хорошее качество. Эта глава является одной, пусть и маленькой, но все же ступенькой на пути к нему.

Список литературы

Для подготовки данной работы были использованы материалы с сайта http://www.webmascon.com/

Похожие работы

<< < 1 2 3