правила · список вопросов · преамбула · обратная связь
Первый вариант (наиболее предпочительный) - все стили вынесены в отдельный файл, который может быть применен на нескольких страничках и кэшируется у клиента. Синтаксис:
<link rel="stylesheet" type="text/css" href="URL" />
Второй вариант, при котором описание стилей располагается в коде страницы
внутри тега <head>. В этом случае вы можете использовать стили для элементов в
пределах странички. Синтаксис:
<style type="text/css"><!--
...
--></style>
Параметр type="text/css" является обязательным и служит для указания браузеру
использовать CSS.
Указание на стиль ставится в самом элементе посредством аттрибута class (для
нескольких элементов с одинаковым оформлением) или id (для уникального
элемента).
И третий вариант, когда описание стиля располагается непосредственно внутри тега элемента, который вы описываете. Этот метод нежелателен, и понятно почему: он приводит к потере одного из основных преимуществ CSS - возможности отделения информации от описания оформления информации. Впрочем, если необходимо описать лишь один элемент, этот вариант расположения описания стилей также вполне применим. Синтаксис:
<%ELEMENT% style="<style>" ...>
Убрать:
body { margin:0;padding:0; }
Задать:
body { margin:Npx;padding:Npx; }
Для совместимости с NN4 нужно в <body> поместить параметры
marginwidth (!) и marginheight (!) со значением,
равным требуемому отступу в пикселах.
p { text-indent:3em; }
p { text-align:justify; }
p:first-letter { float:left;font-size:3em; }
IE5- и NN4 этого не понимают, см. пункт 5.2.
Это делается разными методами в IE и NN и может вызвать большие проблемы в разных операционных системах и разных кодировках.
Рекомендуется вместо этого использовать стандартные font-family: serif (шрифт
с засечками типа Times), sans-serif (рубленый, типа Arial) и
monospace (моноширинный шрифт типа Courier).
Не рекомендуется использовать fantasy и
cursive - в IE это также может вызвать проблемы с кодировками, а в NN просто
игнорируется.
Для небольших кусочков текста (заголовки, кнопки, спецсимволы) можно
воспользоваться картинками, разумеется, с указанием параметра alt.
Иногда в IE под Windows 95/98/ME стили sans-serif или serif отображаются в
виде сильно разреженных буковок совершенно неподходящего шрифта. Под NT/2000/XP
такого явления, к счастью, не наблюдается. Чтобы побороть это, пишем:
font-family:'Times New Roman Cyr',serif;
font-family:'Arial Cyr',sans-serif;
font-family:'Courier New Cyr',monospace;
a.noneline, a.noneline:link, a.noneline:visited, a.noneline:active { text-decoration: none; }
После чего применяем этот стиль:
<a href="..." class="noneline">
a, a:link, a:visited, a:active { text-decoration: none; }
a:hover { color:#RRGGBB;text-decoration:underline; }
Объявление a:hover нужно давать после a:link и a:visited
body { background-image:url('...URL картинки...'); background-repeat:...параметр...; }
Допустимые значения параметра:
no-repeat - подавляет размножение
repeat-x - размножение только по горизонтали
repeat-y - размножение только по вертикали
repeat - размножение по обоим направлениям.
Следует отметить, что если вы решили прописать background-image во внешнем CSS,
то NN4 будет отсчитывать путь к файлу картинки не от местоположения файла
стилей, а от местоположения текущего документа. Поэтому, если CSS и HTML лежат
в разных каталогах, путь к картинке в URL пишем всегда от корня сервера.
Для совместимости со старыми версиями браузеров рекомендуется
пририсовать к фоновой картинке справа и/или снизу прозрачным (для GIF)
или совпадающим со значением bgcolor в <body> монотонным (для JPG) фоном
полосы, доведя разрешение картинки в нужном направлении как минимум до
2048 пикселов. «Вес» картинки при этом увеличится незначительно,
поскольку монотонный фон хорошо сжимается.
Параметр background для <td> не рекомендован стандартами HTML и не
поддерживается в Opera. Пользуемся стилями:
<td style="background-image:URL('bg.gif');">
Если мы хотим, чтобы фон не «размножался» по вертикали и/или горизонтали, то
добавляем в style параметр background-repeat, как описано в ответе на
предыдущий вопрос. Увеличивать размер картинки для совместимости со старыми
браузерами не нужно - они вообще не покажут ее, поскольку не понимают стили.
Если внутри ячейки c фоном мы собираемся использовать таблицы, то в
соответствующих тегах <table> и <td>
нужно указывать background="" (!)
для совместимости с NN4.
body { background-attachment:fixed; }
Это делать не рекомендуется, поскольку прокрутка с неподвижным фоном выполняется медленнее.
В NN4 этот параметр не работает, см. пункт. 5.8.
<%ELEMENT% style="width:XXXpx;height:YYYpx;overflow:auto;">
Не работает в NN4.
Категорически не рекомендуется пользоваться скриптами типа
<td onmouseover="...">
В CSS2 псевдокласс :hover может быть применен не только к ссылке, но и
к любому другому элементу. Hо, к сожалению, IE не поддерживает эту
возможность. Поэтому поступаем так - пишем в стилях:
td {...styles...;behavior:url('td.htc');} /* работает в IE4+ */
td:hover {background-color:#RRGGBB;} /* стандарт CSS2, работает в NN6/Mozilla */
И создаем файл «td.htc», в котором пишем:
<public:attach event="onmouseover" onevent="color()" />
<public:attach event="onmouseout" onevent="restore()" />
<script language="JavaScript" type="text/javascript"><!--
function color() {
runtimeStyle.backgroundColor='#RRGGBB';
}
function restore() {
runtimeStyle.backgroundColor='';
}
//--></script>
Теперь все ячейки таблиц при наведении мышки будут подсвечиваться.
Разумеется, можно использовать td.className:hover и td#idName:hover
для подсветки ячеек определенного стиля или конкретной ячейки.
table { border:1px solid #RRGGBB; }
Hе работает в NN4 и старых браузерах, см. 5.3.
table.lined { border-collapse:collapse; }
table.lined td { border : 1px solid #RRGGBB; }
Hе работает в NN4 и старых браузерах, см. 5.4.
правила · список вопросов · преамбула · обратная связь · наверх
По материалам эхоконференции RU.HTML.CHAINIK (news://fido7.ru.html.chainik)