- главная : :
- CSS: вопросы и ответы :
- Мелочи в CSS
Разные разности в CSS
Это что-то типа мини-справочника тегов, не особенно часто используемых в CSS, и поэтому никак не запоминающихся. Или часто используемых, но все время забывающихся :)
Как расположить блок ровно посередине страницы
Способ работает только когда известны размеры блока (от pepelsbey на форуме www.webmascon.com)
#block {
position:absolute;
top:50%;
left:50%;
width:300px;
height:300px;
margin:-150px 0 0 -150px
}
Линк-обманка
В случае, когда нужно вставить на <a> событие OnClick, а переход по ссылке не нужен, писать так:<a href="javascript:" onClick="function_name()">Тыкаем сюда</a>
Стили для печати
Чтобы при печати из браузера пользователь получал действительно печатный вариант страницы, а не попытку изобразить страницу на бумаге (посмотреть попытку из браузера в меню File->Print Preview...), имеет смысл завести стили для печати.
Для этого нужно их объявить:
<head>
...
<link rel= "stylesheet" media= "print"href= "/include/print.css">
...
</head>
и в print.css указать все блоки, которые при печати показывать не надо (display: none), а также переопределить все стили, которые для печати Вас не устраивают. См. http://www.webmascon.com/topics/coding/33a.asp и http://www.webmascon.com/topics/coding/45a.asp.
Элемент Marquee
Используется с целью создания в документе бегущей строки (не одобряется стандартами W3C).
Атрибуты:
bgcolor- задает цвет фона бегущей строкиheightalign- выравнивание бегущей строки по верхнему краю top, по середине middle или по нижнему краю bottomdirection- направление движения бегущей строки: left, right, up, downbehavior- поведение бегущей строки, либо scroll - прокрутка, либо slide - прокрутка с остановкой, либо alternate - движение от края к краюhspace- смещение в пикселах вправо бегущей строкиvspace- пустое пространство выше и ниже бегущей строкиloop- количество проходов бегущей строкиscrollamount- скорость движения бегущей строки, если его значение равно 1, то она будет еле ползти, если его значение больше 10, то она будет двигаться очень быстроscrolldelay- временной интервал между шагами бегущей строки, с помощью него можно заставить строку двигаться рывками
Scrollbar
Цветовые характеристики скроллера (отсутствуют в спецификации CSS2, т.н. "расширение спецификации, введенное Microsoft").
scrollbar-face-colorотвечает за фоновый ("лицевой") цвет маленьких квадратиков вверху и внизу полосы прокруткиscrollbar-highlight-colorзадает "подсветку" (highlight), освещающую эти же квадратики. Подсветка видна с левого и с верхнего краев квадрата и справа от маленькой стрелочки внутри негоscrollbar-3dlight-color, как видно из названия, придает все тем же квадратикам объем (трехмерный свет). Очень часто для параметров highlight и 3dlight применяют одни и те же цветаscrollbar-shadow-color. Раз можно определять цвет для левой и верхней сторон, надо полагать, можно задать и для правой и нижней? Так оно и есть. То, что у нас было подсветкой, теперь заменено тенью scrollbar-shadow-color. Тень образуется, понятно, у правого и нижнего краев квадратиков. Так же сама стрелочка подстраивается под заданный вами цвет тени.scrollbar-darkshadow. "Тень тени", или теневая тень, управляется параметром scrollbar-darkshadow-color. Параметр аналогичен 3dlight, только влияет на противоположные тем стороныscrollbar-arrow-colorпереопределяет цвет стрелокscrollbar-track-color- цвет самого длинного элемента - трека лифта (track)- scrollbar-base-color
Подробнее, например здесь.
Мелочи
p:first-letter {font-size:200%; color: lime; float: left}
p:first-line {font-variant: small-caps}
{white-space: nowrap}
По этому примеру содержимое указанного тега не будет переносится на другую строку. То же, что и таг <NOBR>, то же, что и указание в теге noWrap.
Нормальное состояние: {white-space: normal}. Для IE6.0 есть еще {white-space: pre} .
layout-flow: vertical-ideographic
Это превращает текст в вертикальный
- Сочетание
overflow : hidden; text-overflow : clipпри указанной ширине блока обрезает текст, заключенный в блок.
Дляtext-overflow : ellipsisтекст не только обрезается, но и вставляется троеточие (...).
При этом текст должен быть заключен в теги<NOBR>или для блока указано свойствоnoWpap.
Только после IE 6.0.
Выравнивание текста
text-align-last- то же, что иtext-align, только для последней линии в блокеtext-justify- способ выравнивания для указанногоtext-align: justify:
- auto - по умолчанию. Каждый браузер сам решает, как отображать
- distribute - Handles spacing much like the newspaper value. This form of justification is optimized for documents in Asian languages, such as Thai.
- distribute-all-lines - Justifies lines of text in the same way as the distribute value, except that it also justifies the last line of the paragraph. This form of justification is intended for ideographic text.
- inter-cluster - Justifies lines of text that contain no inter-word spacing. This form of justification is optimized for documents in Asian languages.
- inter-ideograph - Justifies lines of ideographic text, and increases or decreases both inter-ideograph and inter-word spacing.
- inter-word - Aligns text by increasing the space between words. This value's spacing behavior is the fastest way to make all lines of text equal in length. Its justification behavior does not affect the last line of the paragraph.
- kashida - Justifies lines of text by elongating characters at chosen points. This form of justification is intended for Arabic script languages. Supported in Microsoft® Internet Explorer 5.5 and later.
- newspaper - Increases or decreases the spacing between letters and between words. It is the most sophisticated form of justification for Latin alphabets.
Page Break
Перенос строки до и после блока. Имеется page-break-after и page-break-before, которые принимают значения:
- always,left, right - всегда вставляется перенос
- auto - по умолчанию
- empty string - нет переноса
Обновлено: 04.02.2009


новости