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

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

вместо обозначения черного цвета словом 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

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