Как вставить стили в документ?
Первый вариант (наиболее предпочительный) - все стили вынесены в отдельный файл, который может быть применен на нескольких страничках и кэшируется у клиента. Синтаксис:
<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: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.
Чтобы содержимое <div>
<%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)