Читать реферат по информатике, вычислительной технике, телекоммуникациям: "CSS: правильное использование - залог успеха" Страница 5

(Назад) (Cкачать работу)

BODY, TD {

color: #000;

font: 14px Tahoma, Verdana, sans-serif}

P {

color: #000;

font: 14px Tahoma, Verdana, sans-serif;

text-indent: 2em}

Кроме того, если вы захотите, скажем, добавить в таблицу стилей фон страницы, то придется разбить группу селекторов BODY и TD, потому что стили к ним уже не будут совершенно одинаковыми. Вот нам, к примеру, понадобилось добавить фоновый цвет на элемент . Тогда придется разбить группу, и таблица стилей будет выглядеть так:

BODY {

color: #000;

background-color: #CCC;

font: 14px Tahoma, Verdana, sans-serif}

TD {

color: #000;

font: 14px Tahoma, Verdana, sans-serif}

P {

color: #000;

font: 14px Tahoma, Verdana, sans-serif;

text-indent: 2em}

Строчные и прописные

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

Вот практически все основные правила написания компактных и корректных таблиц стилей. Давайте сейчас оптимизируем отдельно взятую таблицу стилей, чтобы окончательно на практике закрепить полученные знания.

Оптимизация на практике

Исходная таблица у нас страшно неорганизованная и запутанная:

A:link {font-weight: bold; COLOR: black}

A:visited {font-weight: bold; COLOR: #555555}

A:active {font-weight: bold; COLOR: #FF0000}

A:hover {font-weight: bold; COLOR: #FF0000}

#lnk A:link {color: #666666}

#lnk A:visited {color: #666666}

#lnk A:active {color: #ff9900}

#lnk a:hover {color: #ff9900}

BODY {MARGIN: 0px; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px} .imgnews {margin-right: 12px}

CODE {color: #00C; font-family: courier new}

em {font-weight: bold; font-style: normal; color: black}

.norm {color: #555; FONT: 12px verdana, helvetica, Sans-serif}

p {text-align: justify; color: #555; FONT: 12px verdana, sans-serif}

input {border: 1px solid black; margin: 1px 2px}

TEXTAREA {border: 1px solid black; margin-top: 1px; margin-left: 2px; margin-bottom: 1px; margin-letf: 2px}

.EXAMPLE {background-color: #eeeeee; padding: 20px; BORDER: 1px dotted black}

Разобраться в ней непросто. Как видите, здесь нарушены все правила, описанные в этой главе. Начнем все исправлять и упорядочивать. Прежде всего разобьем таблицу стилей на три блока по селекторам: элементы, классы, ID, а в каждом блоке расположим селекторы в алфавитном порядке. Цифры обозначают порядковый номер строки и к самой таблице стилей не относятся. Получится так:

1. A:link {font-weight: bold; COLOR: black}

2. A:visited {font-weight: bold; COLOR: #555555}

3. A:active {font-weight: bold; COLOR: #FF0000}

4. A:hover {font-weight: bold; COLOR: #FF0000}

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}

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}

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}

14. #lnk A:link {color: #666666}

15. #lnk A:visited {color: #666666}

16. #lnk A:active {color: #ff9900}

17. #lnk a:hover {color: #ff9900}

Пойдем дальше. Для начала займемся правилами для ссылок, которые находятся в строках 1-4. Заранее договоримся, что в объявлениях стилей сначала будет идти цвет и фон, затем шрифт, затем поля и отступы. Итак:

перенесем в начало объявления цвета;

свойство COLOR запишем

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