Разработка программ, создание сайтов, интернет реклама

Новосибирские программисты - ООО Промсофт


Разные разности в 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 - задает цвет фона бегущей строки
  • height
  • align -  выравнивание бегущей строки по верхнему краю top, по середине middle или по нижнему краю bottom
  • direction - направление движения бегущей строки: left, right, up, down
  • behavior - поведение бегущей строки, либо 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:
  1. auto - по умолчанию. Каждый браузер сам решает, как отображать
  2. distribute - Handles spacing much like the newspaper value. This form of justification is optimized for documents in Asian languages, such as Thai.
  3. 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.
  4. inter-cluster - Justifies lines of text that contain no inter-word spacing. This form of justification is optimized for documents in Asian languages.
  5. inter-ideograph - Justifies lines of ideographic text, and increases or decreases both inter-ideograph and inter-word spacing.
  6. 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.
  7. 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.
  8. 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


8 (383) 335-99-11

info@promsoft.ru
© 2002-2011

ООО Промсофт, Зеленая Горка - 1, тел. 8 (383) 335-99-11