Новая версия сайта находится по адресу
wa.artel.by
Материал взят c сайта http://www.richinstyle.com c нарушением всех авторских прав. Перевод by FireFalcon.
Фишка 4 - Полнота каскадных таблиц стилей.
Таблица стилей должна содержать все нижеприведенные объявления (т.е. каждый блоковый элемент должен иметь объявления для margin, padding и line height, а CODE, BODY, PRE должны содержать font-size и family). Жизненно важно реализовать все это, потому что в противном случае у многих пользователей могут возникнуть проблемы. Если вы начинаете разрабатывать таблицу стилей с нуля, то можно воспользоваться заготовкой, приведенной ниже (все значения можно менять).
/* Элементы */
/* Fonts - измените 'sans-serif' на ваш шрифт */
ADDRESS, BLOCKQUOTE, BODY, CAPTION, CENTER, DD, DIR, DIV, DL, DT, FORM, H1, H2, H3, H4, H5, H6, MENU, OL, P, TD, TH, UL {font-size: 1em;
font-family: sans-serif}
/* Реальные стили */
A {cursor: auto}
A:link {color: blue;
background: transparent;
text-decoration: none}
A:visited {color: red;
background: transparent;
text-decoration: none}
A:active {color: green;
background: transparent;
text-decoration: none}
A:hover {text-decoration: underline}
ADDRESS {margin: 0em 0% 0em 0%;
font: italic 1em/1 sans-serif}
BIG {font-size: 1em}
BLOCKQUOTE {margin: 0em 0% 0em 0%;
line-height: 1}
BODY {margin: 0em 0% 0em 0%;
font: 1em/1 sans-serif;
background: white;
cursor: default}
BUTTON {cursor: auto}
CAPTION {margin: 0em 0% 0em 0%;
line-height: 1}
CODE {font-size: 1em;
font-family: monospace} /* Для того, чтобы избежать перекрытия boldness/italicity при использовании шрифтов */
DIV {margin: 0em 0% 0em 0%;
line-height: 1}
DD {margin: 0em 0% 0em 0%;
line-height: 1}
DL {margin: 0em 0% 0em 0%}
DT {margin: 0em 0% 0em 0%;
line-height: 1}
H1 {margin: 0em 0% 0em 0%;
font: 1em/1 serif}
H2 {margin: 0em 0% 0em 0%;
font: 1em/1 serif}
H3 {margin: 0em 0% 0em 0%;
font: 1em/1 serif}
H4 {margin: 0em 0% 0em 0%;
font: 1em/1 serif}
H5 {margin: 0em 0% 0em 0%;
font: 1em/1 serif}
H6 {margin: 0em 0% 0em 0%;
font: 1em/1 serif}
HR {margin: 0em 0% 0em 0%}
HTML {margin: 0;
background: white}
INPUT {cursor: auto}
KBD {font: 1em monospace}
LI {margin: 0em 0% 0em 0%;
line-height: 1}
OL {margin: 0em 0% 0em 5%;
list-style: decimal}
UL UL OL OL, UL OL UL OL, OL UL OL OL, OL OL UL OL, OL UL OL, OL OL {list-style: lower-alpha}
OL UL OL OL, OL OL UL OL, UL OL OL OL, OL OL OL {list-style: lower-roman}
OL OL OL OL {list-style: decimal}
P {margin: 0em 0% 0em 0%;
line-height: 1}
PRE {margin: 0em 0% 0em 0%;
font: 1em/1 monospace}
SAMP {font: 1em monospace}
SMALL {font-size: 1em}
SUB {font-size: 1em}
SUP {font-size: 1em}
TD {line-height: 1}
TEXTAREA {cursor: text}
TH {font: bold 1em/1 sans-serif}
TT {font: 1em monospace}
UL {margin: 0em 0% 0em 5%;
list-style: disc}
UL UL, OL OL UL UL, OL UL OL UL, UL OL OL UL, OL UL UL, UL OL UL {list-style: circle}
OL UL UL UL, UL OL UL UL, UL UL OL UL, UL UL UL {list-style: square}
UL UL UL UL {list-style: disc}
А теперь прикрутите эту таблицу к своей странице и посмотрите в IE 5 или Opera 5 (Netscape 4 лучше не использовать, так как он слишком глючный; Internet Explorer 4 получше, но он имеет проблемы с margin %).
Вы спросите, зачем столько всего, когда можно ограничиться и более краткой таблицей стилей. Просто в одном браузере она будет выглядеть корректно, а в другом - нет. Для универсальности и совместимости надо писать именно так.
Например, я часто видел страницы, где отступы(margins) установлены только для BODY, и не установлены для H1-6. В моей собственной таблице стилей (Opera 5 позволяет пользователям устанавливать свои CSS для просмотра страниц) отступы установлены для BODY, и отрицательные отступы для H1-6 (чтобы компенсировать большие отступы для BODY). Для BODY мои отступы переписываются теми значениями, которые установил создатель страницы (обычно эти значения меньше, чем установленные мной), но значения для H1-6 остаются теми, которые установил я. Вследствие чего часть заголовков просто не видна, так как мои отрицательные отступы для H1-6 с лихвой перекрывают те небольшие отступы, которые установил создатель страницы. (Я надеюсь, все поняли суть проблемы? ;)
Поэтому не надо выбрасывать объявления из вышеприведенной заготовки, можно лишь изменять их. Причем даже если вы не используете, скажем, элемент DT, все равно надо оставить его в таблице стилей, потому что в будущем (если вы все же захотите его применить) будет намного сложнее написать для него стили без ошибок.
Окончание следует...
