Уникальная подборка вопросов и их решений по работе с CSS, расширит ваши знания по внешнему оформлению HTML документов
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>" ...>
2. Чтобы убрать или задать отступы содержимого странички от краев окна >браузера?
Убрать: body { margin: 0; padding: 0; }
Задать: body { margin: Npx; padding: Npx; }
Для совместимости с NN4 нужно в <body> поместить параметры marginwidth (!) и marginheight (!) со значением, равным требуемому отступу в пикселах.
Чтобы был абзацный отступ?
p { text-indent: 3em; }
4. Чтобы форматировать текст по ширине?
p { text-align: justify; }
5. Как сделать буквицу в начале абзаца без применения картинок?
p:first-letter {float: left; font-size: 3em; }
IE5- и NN4 этого не понимают, см. пункт 5.2.
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;
7. Как подавить подчеркивание ссылок в некоторых местах?
a.noneline,a.noneline:link,a.noneline:visited,a.noneline:active { text-decoration: none; }
После чего применяем этот стиль:
<a href="..." class="noneline">
8. Как сделать неподчеркнутые ссылки везде?
a,a:link, a:visited, a:active { text-decoration: none; }
9. Чтобы при наведении мышки на текст с ссылкой он поменял цвет или стал >подчеркнутым?
a:hover { color: #RRGGBB; text-decoration: underline; }
Объявление a:hover нужно давать после a:link и a:visited
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 пикселов. "Вес" картинки при этом увеличится незначительно, оскольку монотонный фон хорошо сжимается.
11. Чтобы задать фоновую картинку для ячейки таблицы?
Параметр background для <td> не рекомендован стандартами HTML и не оддерживается в Opera. Пользуемся стилями: <td style="background-image:URL('bg.gif');">
Если мы хотим, чтобы фон не "размножался" по вертикали и/или горизонтали, то добавляем в style параметр background-repeat, как описано в ответе на едыдущий вопрос. Увеличивать размер картинки для совместимости со старыми браузерами не нужно - они вообще не покажут ее, поскольку не понимают стили.
Если внутри ячейки c фоном мы собираемся использовать таблицы, то в оответствующих тегах <table> и <td> нужно указывать background="" (!) для совместимости с NN4.
12. Чтобы фон странички оставался неподвижным при прокрутке?
body { background-attachment: fixed; }
Это делать не рекомендуется, поскольку прокрутка с неподвижным фоном выполняется медленнее.
В NN4 этот параметр не работает, см. пункт. 5.8.
13. Чтобы содержимое <div> или ячейки таблицы при увеличении объема не >растягивало контейнер, а вызывало появление полос прокрутки?
<%ELEMENT% style="width:XXXpx;height:YYYpx;overflow:auto;">
Не работает в NN4.
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 для подсветки ячеек определенного стиля или конкретной ячейки.
15. Как окружить табличку рамкой нужного цвета?
table { border: 1px solid #RRGGBB; }
Hе работает в NN4 и старых браузерах, см. 5.
16. Как "разлиновать" табличку тонкими линиями нужного цвета?
table.lined { border-collapse: collapse; }
table.lined, td {border: 1px solid #RRGGBB; }
Hе работает в NN4 и старых браузерах, см. 5.4.
По теме:
|
