Как вставить стили в документ?

Первый вариант (наиболее предпочительный) - все стили вынесены в отдельный файл, который может быть применен на нескольких страничках и кэшируется у клиента. Синтаксис:

Второй вариант, при котором описание стилей располагается в коде страницы внутри тега <head>. В этом случае вы можете использовать стили для элементов в пределах странички. Синтаксис:

Параметр 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: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, 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. Пользуемся стилями:

Если мы хотим, чтобы фон не «размножался» по вертикали и/или горизонтали, то добавляем в style параметр background-repeat, как описано в ответе на предыдущий вопрос. Увеличивать размер картинки для совместимости со старыми браузерами не нужно - они вообще не покажут ее, поскольку не понимают стили.

Если внутри ячейки c фоном мы собираемся использовать таблицы, то в соответствующих тегах <table> и <td> нужно указывать background="" (!) для совместимости с NN4.

Чтобы фон странички оставался неподвижным при прокрутке?

body { background-attachment:fixed; }

Это делать не рекомендуется, поскольку прокрутка с неподвижным фоном выполняется медленнее.

В NN4 этот параметр не работает, см. пункт. 5.8.

Чтобы содержимое <div>

<%ELEMENT% style="width:XXXpx;height:YYYpx;overflow:auto;">

Не работает в NN4.

Как сделать так, чтобы при

Категорически не рекомендуется пользоваться скриптами типа

В 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"></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)