faq of Ru.html.Chainik


правила · список вопросов · преамбула · обратная связь

3. Вопросы от незнания CSS

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

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

<link rel="stylesheet" type="text/css" href="URL" />

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

<style type="text/css"><!-- ... --></style>

Параметр type="text/css" является обязательным и служит для указания браузеру использовать CSS.

Указание на стиль ставится в самом элементе посредством аттрибута class (для нескольких элементов с одинаковым оформлением) или id (для уникального элемента).

И третий вариант, когда описание стиля располагается непосредственно внутри тега элемента, который вы описываете. Этот метод нежелателен, и понятно почему: он приводит к потере одного из основных преимуществ CSS - возможности отделения информации от описания оформления информации. Впрочем, если необходимо описать лишь один элемент, этот вариант расположения описания стилей также вполне применим. Синтаксис:

<%ELEMENT% style="<style>" ...>
3.2. Чтобы убрать или задать отступы содержимого странички от краев окна браузера?

Убрать:

body { margin:0;padding:0; }

Задать:

body { margin:Npx;padding:Npx; }

Для совместимости с NN4 нужно в <body> поместить параметры marginwidth (!) и marginheight (!) со значением, равным требуемому отступу в пикселах.

3.3. Чтобы был абзацный отступ?
p { text-indent:3em; }
3.4. Чтобы форматировать текст по ширине?
p { text-align:justify; }
3.5. Как сделать буквицу в начале абзаца без применения картинок?
p:first-letter { float:left;font-size:3em; }

IE5- и NN4 этого не понимают, см. пункт 5.2.

3.6. Как встроить свои шрифты в страничку?

Это делается разными методами в 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;
3.7. Как подавить подчеркивание ссылок в некоторых местах?
a.noneline, a.noneline:link, a.noneline:visited, a.noneline:active { text-decoration: none; }

После чего применяем этот стиль:

<a href="..." class="noneline">
3.8. Как сделать неподчеркнутые ссылки везде?
a, a:link, a:visited, a:active { text-decoration: none; }
3.9. Чтобы при наведении мышки на текст с ссылкой он поменял цвет или стал подчеркнутым?
a:hover { color:#RRGGBB;text-decoration:underline; }

Объявление a:hover нужно давать после a:link и a:visited

3.10. Чтобы фоновая картинка не размножалась по горизонтали (по вертикали) при увеличении разрешения экрана?
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 пикселов. «Вес» картинки при этом увеличится незначительно, поскольку монотонный фон хорошо сжимается.

3.11. Чтобы задать фоновую картинку для ячейки таблицы?

Параметр background для <td> не рекомендован стандартами HTML и не поддерживается в Opera. Пользуемся стилями:

<td style="background-image:URL('bg.gif');">

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

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

3.12. Чтобы фон странички оставался неподвижным при прокрутке?
body { background-attachment:fixed; }

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

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

3.13. Чтобы содержимое <div> или ячейки таблицы при увеличении объема не растягивало контейнер, а вызывало появление полос прокрутки?
<%ELEMENT% style="width:XXXpx;height:YYYpx;overflow:auto;">

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

3.14. Как сделать так, чтобы при наведении мышки какой-либо отличный от ссылки элемент (скажем, ячейка таблицы) поменял оформление (например, фоновый цвет)

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

<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 для подсветки ячеек определенного стиля или конкретной ячейки.

3.15. Как окружить табличку рамкой нужного цвета?
table { border:1px solid #RRGGBB; }

Hе работает в NN4 и старых браузерах, см. 5.3.

3.16. Как «разлиновать» табличку тонкими линиями нужного цвета?
table.lined { border-collapse:collapse; } table.lined td { border : 1px solid #RRGGBB; }

Hе работает в NN4 и старых браузерах, см. 5.4.


правила · список вопросов · преамбула · обратная связь · наверх

По материалам эхоконференции RU.HTML.CHAINIK (news://fido7.ru.html.chainik)