css свойства в javascript (сама таблица) например, для изменения стиля другого объекта средством js HTML: <script language="javascript"> function underline(eto) { eval('document.all.'+eto+'.style.textDecoration = "underline"'); eval('document.getElementById("' + eto + '").style.textDecoration = "underline"'); } function nounderline(eto) { eval('document.all.'+eto+'.style.textDecoration = "none"'); eval('document.getElementById("' + eto + '").style.textDecoration = "none"'); } </script> <a onMouseOver="underline('eto')" onMouseOut="nounderline('eto')">Подчеркнуть</a> <div id="eto">это</div>
Взаимодействие JavaScript с CSS Взаимодействие JavaScript с CSS background Доступ: Чтение/Изменение Атрибут элемента CSS background . Обозначенное свойство состоит из строки разграниченных пространством значений для свойств backgroundAttachment, backgroundColor, backgroundImage, backgroundPosition, и backgroundRepeat . Может быть одно или более значение background , и значения могут идти в любом порядке. Пример: HTML: document.all.tags("DIV").style.background = "url(logo.gif) repeat-y" Возвращаемое значение: Строка разграниченных пространством значений, соответствующих одному или более отдельным свойствам стиля background. Значение по умолчанию: Ничего. backgroundAttachment Доступ: Чтение/Изменение Устанавливает, как изображение "сопоставлено" с элементом. Изображение может или оставаться неподвижным в пределах просматриваемой области (области просмотра) или может прокручиваться с элементом, если документ большой. Пример: HTML: document.all.tags("DIV").style.backgroundAttachment = "fixed" Возвращаемое значение: Строка из допустимого значения: fixed | scroll. Значение по умолчанию: scroll backgroundColor Доступ: Чтение/Изменение Цвет фона элемента. Если Вы также устанавливаете backgroundImage, изображение будет поверх цвета. Прозрачные пикселы изображения позволяют цвету проглядываться через него. Пример: HTML: document.all.highlighted.style.backgroundColor = "yellow" Возвращаемое значение: Любая действующая спецификация цвета. Значение по умолчанию: Ничего. backgroundImage Доступ: Чтение/Изменение URL фонового изображения элемента. Если Вы также устанавливаете backgroundColor, изображение будет поверх цвета.Прозрачные пикселы изображения позволяют цвету проглядываться через него. Пример: HTML: document.all.navbar.style.backgroundImage = "images/navVisited.jpg" Возвращаемое значение: Любой полный или локальный URL к файлу изображения. Значение по умолчанию: Ничего. backgroundPosition Доступ: Чтение/Изменение Местоположение фонового изображения относительно области элемента (плюс дополнение). Это свойство должным образом не реализовано в Internet Explorer 4 для Macintosh. Пример: HTML: document.all.div3.style.backgroundPosition = "20 50" Возвращаемое значение: Вы должны быть способны определить один или два процента от ширины поля блока и высоты (соответственно), в какой точке изображения начинаются повторные изображения. Установка значений в процентах, однако, не всегда работает в IE 4 для Windows (и не работает на Mac вообще), даже при том, что они установлены как значения по умолчанию. Вам будет безопаснее всего использовать значения в пикселах (как разграниченные пробелом значения внутри одной строки). Ни одна из позволенных констант, кроме TOP и LEFT, не признана. Значение по умолчанию: 0% 0% backgroundPositionX, backgroundPositionY Доступ: Чтение/Изменение Top и left местоположения фонового изображения относительно области элемента (плюс дополнение). Эти свойства не реализованы должным образом в Internet Explorer 4 для Macintosh. Пример: HTML: document.all.div3.style.backgroundPositionX = "20" document.all.table2.style.backgroundPositionY = "10" Возвращаемое значение: Вы должны быть способны определить один или два процента от ширины поля блока и высоты (соответственно), в какой точке изображения начинаются повторные изображения. Установка значений в процентах, однако, не всегда работает в IE 4 для Windows (и не работает на Mac вообще), даже при том, что они установлены как значения по умолчанию. Вам будет безопаснее всего использовать значения в пикселах (как разграниченные пробелом значения внутри одной строки). Ни одна из позволенных констант, кроме TOP и LEFT, не признана. Значение по умолчанию: 0 backgroundRepeat Доступ: Чтение/Изменение Должно ли фоновое изображение (указанное свойством backgroundImage ) повторяться и, если так,то по какой оси. Вы можете использовать повторяющиеся фоновые изображения, чтобы создать горизонтальные и вертикальные полосы с некоторыми параметрами настройки. Пример: HTML: document.all.div3.style.backgroundRepeat = "repeat-y" Возвращаемое значение: С установкой no-repeat, один образец изображения появится в пределах элемента, установленного свойством backgroundPosition (значение по умолчанию - верхний левый угол). Обычно повторения выполнены по обеим осям, но Вы можете назначить повторение изображения вниз единственным столбцом (repeat-y) или вправо единственной строкой (repeat-x). Значение по умолчанию: repeat border Доступ: Чтение/Изменение Свойство для получения или установки свойств borderColor, borderStyle и/или borderWidth изо всех четырех границ вокруг элемента в одной инструкции. Вы должны определить стиль границы (см. borderStyle) для изменения этого свойства, чтобы затронуть границы элемента. Другие свойства позволяют Вам устанавливать ширину, стиль и цвет границ или их групп, если Вы не хотите, чтобы все четыре границы были одинаковыми. Только параметры настройки, явно указанные в атрибутах тэга, отражены в свойстве, но Вы можете назначать компоненты не как часть первоначального тэга. Пример: HTML: document.all.announce.style.border = "inset red 4px" Возвращаемое значение: Для составляющих значений borderStyle и borderWidth см. соответствующие свойства в этой главе. Значение по умолчанию: Ничего. borderRight, borderTop Доступ: Чтение/Изменение Свойство для получения или установки свойств borderColor, borderStyle и/или borderWidth для отдельного края элемента в одной инструкции. Вы должны определить стиль границы (см. borderStyle) для изменения этого свойства, чтобы затронуть границы элемента. Если Вы хотите, чтобы все четыре грани были одинаковыми, см. атрибут границы. Только параметры настройки, явно указанные в атрибутах тэга, отражены в свойстве, но Вы можете назначать компоненты не как часть первоначального тэга. Пример: HTML: document.all.announce.style.borderBottom = "inset red 4px" document.all.announce.style.borderLeft = "solid #20ff00 2px" document.all.announce.style.borderRight = "double 3px" document.all.announce.style.borderTop = "outset red 8px" Возвращаемое значение: Для составляющих значений см. соответствующие свойства borderEdgeStyle и borderEdgeWidth. Значение по умолчанию: Ничего. borderBottomColor, borderLeftColor, borderRightColor, borderTopColor Доступ: Чтение/Изменение Цвет одного края границы элемента. Пример: HTML: document.all.announce.style.borderBottomColor = "red" document.all.announce.style.borderLeftColor = "#20ff00" document.all.announce.style.borderRightColor = "rgb(100, 75, 0)" document.all.announce.style.borderTopColor = "rgb(90%, 0%, 25%)" Значение по умолчанию: Ничего. borderBottomStyle, borderLeftStyle, borderRightStyle, borderTopStyle Доступ: Чтение/Изменение Тип линии одного края границы элемента. Пример: HTML: document.all.announce.style.borderBottomStyle = "groove" document.all.announce.style.borderLeftStyle = "double" document.all.announce.style.borderRightStyle = "solid" document.all.announce.style.borderTopStyle = "inset" Возвращаемое значение: Значения Стиля - константы без учета регистра, которые связаны со специфичными методами показа линий обрамления. CSS константы стиля: dashed, dotted, double, groove, hidden, inset, none, outset, ridge & solid. Не все броузеры признают все эти значения в CSS рекомендации. Значение по умолчанию: Ничего. borderBottomWidth, borderLeftWidth, borderRightWidth, borderTopWidth Доступ: Чтение/Изменение Ширина одного края границы элемента. См. также свойство borderWidth. Пример: HTML: document.all.announce.style.borderBottomWidth= "thin" document.all.announce.style.borderLeftWidth = "thick" document.all.announce.style.borderRightWidth = "2px" document.all.announce.style.borderTopWidth = "0.5em" Возвращаемое значение: Три константы без учета регистра--thin | medium | thick--Позволите броузеру определять точно, сколько пикселов используются, чтобы показать границу. Для большей точности Вы можете также назначать значение длины. Значение по умолчанию: medium borderColor Доступ: Чтение/Изменение Цвет края границы Пример: HTML: document.all.announce.style.borderColor = "red" document.all.announce.style.borderColor = "red green" document.all.announce.style.borderColor = "black rgb(100, 75, 0) #c0c0c0" document.all.announce.style.borderColor = "yellow green blue red" Возвращаемое значение: В Internet Explorer это свойство принимает один, два, три, или четыре значения цвета, в зависимости от того, сколько и какие границы Вы хотите установить с определенными цветами. Значение по умолчанию: Цвет объекта (если установлен). borderStyle Доступ: Чтение/Изменение Свойство которое позволяет Вам устанавливать один или несколько стилей границы. Для Internet Explorer Вы можете установить до 4 значений стиля (через пробел). Число значений определяет какие стороны получают назначенные цвета. Пример: HTML: document.all.announce.style.borderStyle = "solid" document.all.announce.style.borderStyle = "solid double" document.all.announce.style.borderStyle = "double groove groove double" Возвращаемое значение: Значения стиля - константы без учета регистра, связанные с определенными способами рендеринга линий обрамления. CSS константы стиля: dashed, dotted, double, groove, hidden, inset, none, outset, ridge и solid. Не все броузеры признают все значения CSS спецификации. В Internet Explorer, это свойство принимает один, два, три, или четыре значения, в зависимости от того, сколько и какие границы Вы хотите установить с определенными стилями. Значение по умолчанию: Ничего borderWidth Доступ: Чтение/Изменение Shortcut-свойство , которое позволяет Вам устанавливать ширину границы. Для Internet Explorer Вы можете установить 4 значения ширины через пробел (Навигатор 4 - свойство только для чтения). Число значений определяет, какие из сторон получат назначенные размеры. Пример: HTML: document.all.founderQuote.style.borderWidth = "3px 5px" Возвращаемое значение: Три константы без учета регистра--thin | medium | thick--позволяют броузеру определить точно, сколько пикселов используются для показа границы. Для большей точности Вы можете также назначать length. В Internet Explorer это свойство принимает одно, два, три, или четыре значения ширины в зависимости от того, сколько и какие границы Вы хотите установить с определенными размерами. Значение по умолчанию: medium clear Доступ: Чтение/Изменение Определяет, позволяет ли себе элемент быть отображенным в той же самой горизонтальной полосе как float элемент. Обычно рядом другой элемент имеет атрибут стиля float, установленный на left или right. Чтобы предотвратить перекрытие элементов, установите явно это свойство на ту же самую сторону (left или right). Если Вы не уверены, где могло бы происходить перекрытие, установите свойство явно на оба элемента. Элемент, чьё свойство явно установлено на значение, отличное от 0, представлен в начале строки ниже плавающего элемента. Пример: HTML: document.all.myDiv.style.clear = "both" Возвращаемое значение: Любая из следующих строковых констант (без учета регистра): both | left | Ничего | right. Значение по умолчанию: Ничего clip Доступ: Чтение/Изменение Определяет область отсечения элемента. Область отсечения - область слоя элемента, в которой он видим. Отсечение может не работать должным образом в Internet Explorer 4 для Macintosh. Пример: HTML: document.all.art2.style.clip = "rect(5px 100px 40px 0)" Возвращаемое значение: Строковой параметр без учета регистра или CSS clip атрибут, который определяет форму (rect) и позицию четырех граней относительно верхнего левого угла первоначального элемента. При определении длин для каждой стороны прямоугольника , соблюдайте по часовой стрелке порядок значений: top, right, bottom, left. Значение по умолчанию: Ничего. color Доступ: Чтение/Изменение Устанавливает приоритетный CSS атрибут цвета (текста).Можно устанавливать атрибут и для графических элементов, но все браузеры будут реализовывать это по разному. Пример: HTML: document.all.specialDiv.style.color = "green" Возвращаемое значение: Спецификация цвета CSS без учета регистра. Значение по умолчанию: black cssText Доступ: Только чтение Возвращает строку полного правила CSS , приложенного к элементу. Если правило включало параметры настройки атрибута стиля shorthand (типа border), компоненты для каждой из этих четырех сторон записаны по буквами. Например, если Вы устанавливаете атрибут элемента STYLE как STYLE = " border: groove red 3px", cssText возвратит: BORDER-TOP: 3px groove red; BORDER-RIGHT: 3px groove red; BORDER-BOTTOM: 3px groove red; BORDER-LEFT: 3px groove red Однако Вы можете назначить свойство на значение shorthand. Пример: HTML: document.all.block3.style.cssText = "margin: 2px; font-size: 14pt" Возвращаемое значение: Строковое значение атрибутов стиля, разграниченное точкой с запятой. Значение по умолчанию: Ничего. cursor Доступ: Чтение/Изменение Форма курсора, когда он над элементом. Точный вид курсоров зависит от операционной системы.Свойство затрагивает курсор, только когда он над текущим элементом. Пример: HTML: if (event.altKey) { event.sourceElement.style.cursor = "help" } Возвращаемое значение: Одна из "курсорных" строковых констант: auto | crosshair | default | e-resize | help | move | n-resize | ne-resize | nw-resize | pointer | s-resize | se-resize | sw-resize | text | wait. Значение по умолчанию: auto display Доступ: Чтение/Изменение Должен ли элемент быть представлен в документе. Когда установлено none, элемент скрыт, и окружающее содержание заполняет пространство; когда установлено на "" (или любое другое значение), элемент отображен. Пример: HTML: document.all.instructionDiv.style.display = "" Возвращаемое значение: Или none, или пустая строка(""). Значение по умолчанию: Ничего. filter Доступ: Чтение/Изменение Устанавливает визуальный фильтр. Визуальный фильтр может применяться к элементу, чтобы произвести эффекты типа зеркального отражения , жара, тени, и многих другие. Показанный фильтр применяется к элементу, когда его видимость изменяется. Это включает эффекты типа wipes, blinds и barn doors. Свойство filter доступно в Internet Explorer 4, но не работает в версии Macintosh. Пример: HTML: document.all.fancy.style.filter= "dropshadow( )" Возвращаемое значение: Каждое свойство filter может иметь больше одного типа фильтра (разграничивается пробелом). Каждый тип фильтра сопровождается парой круглых скобок (), которые могут передавать параметры о поведении фильтра для текущего элемента. Параметр состоит из пары "имя/значение" Значение по умолчанию: Ничего. font Доступ: Чтение/Изменение Свойство shorthand, которое позволяет Вам устанавливать одно или более связанное с шрифтом свойство (fontFamily, fontSize, fontVariant, и fontWeight) с одним оператором присваивания "=". Список разграниченных пробелом значений (в любой последовательности) применяется к определенным свойствам шрифта, для которых значение является имеющим силу типом. Пример: HTML: document.all.subhead.style.font = "bolder small-caps 16pt" Возвращаемое значение: См. соответствующие свойства Значение по умолчанию: Ничего. fontFamily Доступ: Чтение/Изменение Расположенный по приоритетам список используемых шрифтов. Пример: HTML: document.all.subhead.style.fontFamily = "'Century Schoolbook' Times serif" Возвращаемое значение: Любое число имен шрифтов, разграниченных пробелом. Названия(имена) семейства ёмкостью в несколько слов должны быть в кавычках. Признаются универсальные названия семейств: serif | sans-serif | cursive | fantasy | monospace. Значение по умолчанию: По умолчанию для броузера. fontSize Доступ: Чтение/Изменение Размер шрифта элемента. Размер шрифта может быть установлен несколькими способами. Коллекция констант (xx-small, x-small, small, medium, large, x-large, xx-large) определяет то, что известно как абсолютные размеры. Другие коллекции констант (larger, smaller) известны как относительные размеры. Наконец, Вы можете устанавливать fontSize в процентах, которые основаны на размере размера шрифта родительского элемента. Пример: HTML: document.all.teeny.style.fontSize = "x-small" Возвращаемое значение: Значения любой из следующих категорий без учета регистра . Для абсолютного размера, одна из следующих констант : xx-small | x-small | small | medium | large | x-large | xx-large. Для относительного размера одна из следующих констант : larger | smaller. Значение по умолчанию: Размер шрифта родительского элемента. fontSizeAdjust Доступ: Чтение/Изменение Контролирует значение длины вторичного семейства шрифтов так, чтобы его символы имели ту же высоту, что и символы основного семейства шрифтов. Пример: HTML: document.all.teeny.style.fontSizeAdjust = "1.05" Возвращаемое значение: Любое число или none Значение по умолчанию: none fontStretch Доступ: Чтение/Изменение Контролирует ширину симвлов шрифта при отображении Пример: HTML: document.all.teeny.style.fontStretch = "expanded" Возвращаемое значение: Любое число или none Значение по умолчанию: none fontStyle Доступ: Чтение/Изменение Представлен ли элемент как normal, italic или oblique. Если fontFamily включает типы шрифта, помеченные как Italic и/или Oblique, установка атрибута fontStyle вызывает эти специфические типы шрифта.Но если специализированные типы шрифта не доступны в системе, normal тип шрифта обычно изначально выглядит курсивным. Страница, посланная на печать с такими параметрами настройки шрифта полагается на хорошую согласованность между клиентским компьютером и принтером, чтобы выполнить на аппаратном уровне сгенерированное курсивное начертание шрифта. Пример: HTML: document.all.emphasis.style.fontStyle= "italic" Возвращаемое значение: Internet Explorer 4 признает следующие строковые значения: normal | italic | oblique, но брабатывает и italic, и oblique как italic. Значение по умолчанию: Ничего.
fontVariant Доступ: Чтение/Изменение Преобразует текст как нормальный/ нижний регистр Пример: HTML: document.all.emphasis.style.fontVariant = "small-caps" Возвращаемое значение: Любое из следующих констант (как строки): normal | small-caps. Значение по умолчанию: normal fontWeight Доступ: Чтение/Изменение Устанавливает жирность шрифта элемента. CSS обеспечивает(предусматривает) схему оценки жирности, которая является более градуированной, чем большинство броузеров показывает на экране, но точно настроенные жирности могут входить как параметры, когда содержание послано принтеру. Масштаб - числовая оценка от 100 до 900 в приращениях с модулем 100. Поэтому fontWeight 100 был бы наименее полужирный, который будет отображен, в то время как 900 был бы наиболее полужирный. Установка нормали (задана по умолчанию для любого шрифта) эквивалентна значению fontWeight 400; стандартная полужирная установка эквивалентна 700. Другие параметры настройки (bolder и lighter) позволяют Вам установить жирность относительно жирности родительского элемента. Пример: HTML: document.all.hotStuff.style.fontWeight = "bold" Возвращаемое значение: Любое из следующих постоянных значений: bold | bolder | lighter | normal | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900. Значение по умолчанию: normal height, width Доступ: Чтение/Изменение Высота и ширина (и их модули) элемента. Поскольку значения - строки, содержащие постоянные значения, Вы не можете использовать эти свойства для вычисления. См. pixelHeight, pixelWidth, posHeight, и posWidth . Пример: HTML: document.all.viewArea.style.height = "450px" Возвращаемое значение: Строка, состоящая из числового значения длины + "px" (когда в пикселях), или "%" (когда в процентах). Значение по умолчанию: Ничего. left Доступ: Чтение/Изменение Для отображаемых элементов, определяет позицию левого края элемента. Для вычислений на этом значении, восстановите pixelLeft или posLeft свойства, которые возвращают подлинные числовые значения. Пример: HTML: document.all.blockD2.style.left = "45px" Возвращаемое значение: Строка, состоящая из числового значения длины, процента, или auto. Значение по умолчанию: auto letterSpacing Доступ: Чтение/Изменение Интервал между символами в пределах элемента. Пример: HTML: document.body.style.letterSpacing = "1.1em" Возвращаемое значение: Строка значения длины (с модулем меры) или normal. Значение по умолчанию: normal lineBreak Доступ: Чтение/Изменение Контролирует правило разрыва для текстового содержимого на японском языке. Пример: HTML: document.body.style.lineBreak = "strict" Возвращаемое значение: Константа normal|strict Значение по умолчанию: normal lineHeight Доступ: Чтение/Изменение Высота встроенного поля (поле, содержащее одну строку). Пример: HTML: document.all.tight.style.lineHeight = "1.1em" Возвращаемое значение: Строка значения длины (с модулем меры) или normal. Значение по умолчанию: normal listStyle Доступ: Чтение/Изменение Свойство shorthand для установки 3 свойств списка в одном операторе присваивания. Атрибуты, которые Вы явно не устанавливаете с этим атрибутом, принимают значения по умолчанию. Эти свойства определяют характеристики вида маркеров, автоматически закреплённых за пунктами списка внутри OL и UL элементов. Пример: HTML: document.all.itemList.style.listStyle = "square outside none" Возвращаемое значение: См. индивидуальные атрибуты listStyleType, listStylePosition, и listStyleImage. Вы можете включить один, два, или все три значения в любом порядке. Значение по умолчанию: Ничего. listStyleImage Доступ: Чтение/Изменение URL для изображения, которое должно использоваться как маркер перед пунктом списка. Поскольку этот атрибут может быть унаследован, установка (включая none) за 1 пунктом списка может отменить тот же самый атрибут или установку свойства в ее родителе. Пример: HTML: document.all.itemList.style.listStyleImage = "images/3DBullet.gif" Возвращаемое значение: Используйте none (как строку) чтобы отменить изображение, назначенное на родительский элемент. Иначе, снабдите любым имеющим силу полным или относительным URL к загрузочному модулю, чей тип MIME читаем броузером. Значение по умолчанию: Ничего listStylePosition Доступ: Чтение/Изменение Находится ли маркер внутри или вне (outdented) поля, содержащего пункта списка. Когда listStylePosition установлен на inside, и содержание - текст, маркер оказывается частью текстового блока. В этом случае, отступ пункта списка - как normal, но без outdented маркера. Пример: HTML: document.all.itemList.style.listStylePosition = "inside" Возвращаемое значение: Любое из постояных значений (как строка): inside | outside. Значение по умолчанию: outside listStyleType Доступ: Чтение/Изменение Тип маркера пункта, который будет отображен с каждым пунктом. Этот атрибут применяется, только если listStyleImage - none (или не указанный). Константы, доступные для этого атрибута, разделены на две категории. Один набор используется с UL элементами, чтобы представить заполненный круг, пустой круг или квадрат (пустой на Macintosh, заполненый на Windows); другой набор - для элементов OL, чьи пункты списка могут быть отмечены в последовательностях арабских цифр, римских цифр (верхний регистр или нижний регистр), или символов алфавита (верхний регистр или нижний регистр). Пример: HTML: document.all.itemList.style.listStyleType = "circle" Возвращаемое значение: Одно постоянное значение как строка, которая согласуется с типом контейнера списка. Для UL: circle | disc | square. Для OL: decimal | lower-alpha | lower-roman | upper-alpha | upper-roman. Последовательности элемента OL обработаны следующим образом: Тип Пример decimal 1, 2, 3, ... lower-alpha a, b, c, ... lower-roman i, ii, iii, ... upper-alpha A, B, C, ... upper-roman I, II, III, ... Значение по умолчанию: disc (для UL); decimal (для OL). margin Доступ: Чтение/Изменение Свойство shortcut, которое может устанавливать размеры краёв 4 граней элемента одной инструкцией. Margin - пространство, которое простирается вне границы элемента. Чтобы обеспечить дополнительное пространство, margin освобождает пространство между смежными или вложенными элементами, (особенно теми, которые имеют набор атрибутов border). Вы можете установить 4 значения, разграниченных пробелом. Число значений определяет, какие стороны получают назначенные установки. Пример: HTML: document.all.logoWrapper.style.margin = "5px 8px" Возвращаемое значение: Это свойство принимает одно, два, три или четыре значения, разграниченные пробелом внутри одной строки, в зависимости от сколько и какие края Вы хотите изменить. Значения для краев могут быть: длины, проценты или auto. Значение по умолчанию: 0 marginRight, marginTop Доступ: Чтение/Изменение Все четыре свойства устанавливают ширину отдельного края края элемента. Край - пространство, который простирается вне границы элемента и не рассчитывается как часть ширины элемента или высоты. Пример: HTML: document.all.logoWrapper.style.marginTop = "5px" document.all.navPanel.style.marginLeft = "10%" Возвращаемое значение: Значения для размеров края могут быть: значения длины, проценты от следующего наиболее близкого элемента или auto. Значение по умолчанию: 0 overflow Доступ: Чтение/Изменение Как элемент должен обработать содержание, в соответствии с правилами CSS. Пример: HTML: document.all.myDiv.style.overflow = "scroll" Возвращаемое значение: Любая из следующих констант (как строка): auto | hidden | scroll | visible. Значение по умолчанию: visible padding Доступ: Чтение/Изменение Свойство shortcut, которое может устанавливать дополнительные размеры до четырех граней элемента с одной инструкцией.Padding - пространство , которое простирается вокруг элемента, но не включает границу, которая может быть определена для элемента. Padding подбирает фоновое изображение или цвет его элемента. Поскольку Вы добавляете дополнение к элементу, Вы увеличиваете размер видимого прямоугольника элемента без воздействия на размер блока padding. Вы можете установить 1 из 4 разграниченное пробелом, значения padding. Пример: HTML: document.all.logoWrapper.style.padding = "3px 5px" Возвращаемое значение: Это свойство принимает один, два, три, или четыре значения, разграниченных пробелом, внутри одной строки, в зависимости от сколько и какие границы Вы хотите, дополнить. Значения для дополнительных размеров могут быть: длины, проценты от наиболее близкого размера элемента или константа auto. Значение по умолчанию: 0 paddingRight, paddingTop Доступ: Чтение/Изменение Все четыре свойства устанавливают ширину единственного(отдельного) дополнительного края элемента. - пространство Padding, который простирается между границей элемента и полем содержания. Пример: HTML: document.all.logoWrapper.style.paddingTop = "3px" document.all.navPanel.style.paddingLeft = "10%" Возвращаемое значение: Значения для дополнительных размеров могут быть: длины, проценты от наиболее близкого размера элемента или константа auto. Значение по умолчанию: 0 pageBreakAfter, pageBreakBefore Доступ: Чтение/Изменение Определяет, как должен обработаться разрыв страниц вокруг элемента, когда документ послан на принтер. Разрывы страниц не представлены в броузере, поскольку они могут быть в программах обработки текстов. Пример: HTML: document.all.hardBR.style.pageBreakAfter = "always" document.all.navPanel.style.paddingLeft = "10%" Возвращаемое значение: Internet Explorer 4 признает четыре постоянных значения (как строки): always | auto | left | right. Значение по умолчанию: auto pixelHeight, pixelWidth Доступ: Чтение/Изменение Высота и ширина элемента в пикселах. Используйте эти свойства для вычисления (вместо свойств типа высоты и ширины, которые возвращают строки, включая модули). Пример: HTML: var midWidth = document.all.myDIV.style.pixelWidth/2 Возвращаемое значение: Целое число Значение по умолчанию: Ничего. pixelLeft, pixelTop Доступ: Чтение/Изменение Для отображаемых элементов, определяет позицию left и top граней элемента (content plus left padding, border, and/or margin) относительно left и top граней следующего наиболее близкого элемента. Пример: HTML: document.all.myDIV.style.pixelLeft++ Возвращаемое значение: Целое число. Значение по умолчанию: Ничего. posHeight, posWidth Доступ: Чтение/Изменение Числовая высота и ширина элемента. Пример: HTML: document.all.myDIV.style.posWidth = 10.5 Возвращаемое значение: Число с плавающей запятой. Значение по умолчанию: Ничего. position Доступ: Только чтение For positionable elements, returns the value assigned to the style sheet position attribute. Пример: HTML: var posType = document.all.myDIV.style.position Возвращаемое значение: Число с плавающей запятой. Значение по умолчанию: Ничего. posLeft, posTop Доступ: Чтение/Изменение For positionable elements, define the position of the left and top edges of an element's box (content plus left padding, border, and/or margin) relative to the left and top edges of the next outermost block content container. When the element is relative-positioned, the measure is based on the left edge of the inline location of where the element would normally appear in the content. Most importantly, these properties' values are numeric and in the unit of measure set in the CSS attribute. Use these properties for calculation (including path animation) instead of the left and top properties, which store their values as strings with the unit names. All math is in the specified units. Also contrast these properties with the pixelLeft and pixelTop properties, which are integer values for pixel measures only. Пример: HTML: document.all.myDIV.style.posLeft = document.all.myDIV.style.posLeft + 1.5 Возвращаемое значение: Число с плавающей запятой. Значение по умолчанию: Ничего. quotes Доступ: Чтение/Изменение Устанавливает символы, использующиеся в качестве кавычек. Пример: HTML: document.all.myText.style.quotes = "« »" Возвращаемое значение: Разделённые пробелом символы открытых и закрытых кавычек или константа none/inherit Значение по умолчанию: inherit. rubyAlign Доступ: Чтение/Изменение Устанавливает выравнивание "рубинового" текста элемента RUBY Пример: HTML: document.all.myText.style.rubyAlign = "distribute-letter" Возвращаемое значение: Константа auto|left|center|right|distribute-letter|distribute-space|line-edge Значение по умолчанию: inherit. rubyOverhang Доступ: Чтение/Изменение Устанавливает отступ "рубинового" текста элемента RUBY Пример: HTML: document.all.myText.style.rubyOverhang = "whitespace" Возвращаемое значение: Константа auto|whitespace|none Значение по умолчанию: none. rubyPosition Доступ: Чтение/Изменение Устанавливает расположение "рубинового" текста элемента RUBY относительно основного текста. Пример: HTML: document.all.myText.style.rubyPosition = "inline" Возвращаемое значение: Константа above|inline Значение по умолчанию: above styleFloat Доступ: Чтение/Изменение С какой стороны элемент обтекается текстом. Пример: HTML: document.all.myDIV.style.styleFloat = "right" Возвращаемое значение: одна из следующих констант (как строка): none | left | right. Значение по умолчанию: Ничего. textAlign Доступ: Чтение/Изменение Определяет горизонтальное выравнивание текста в пределах элемента./ Пример: HTML: document.all.myDIV.style.textAlign = "right" Возвращаемое значение: 1 из 3 констант (как строка): center | left | right. Значение по умолчанию: left textAlignLast Доступ: Чтение/Изменение Определяет горизонтальное выравнивание последней строки каждого абзаца. Пример: HTML: document.all.myText.style.textAlign = "right" Возвращаемое значение: 1 из 4 констант (как строка): center | justify | left | right. Значение по умолчанию: left textAutospace Доступ: Чтение/Изменение Определяет дополнительные пробелы между идеографическими и не идеографическими символами. Пример: HTML: document.all.myText.style.textAutospace = "ideograph-alpha" Возвращаемое значение: Константа none|ideograph-alpha|ideograph-numeric|ideograph-parenthesis|ideograph-space Значение по умолчанию: none textDecoration Доступ: Чтение/Изменение Определяет добавления к текстовому содержанию элемента в форме подчеркиваний, перечёркиваний, надчёркиваний, и (в Навигаторе и CSS) мигание. Вы можете определить больше чем один стиль художественного оформления, поставляя значения в списке через пробел. В то время как Internet Explorer 4 поддерживает blink значение, это не мигающий текст. Текстовое художественное оформление имеет необычные родительские-дочерние отношения. Значения не наследуются, но эффект художественного оформления передается ко вложенным элементам. Поэтому, если иначе не переопределено, подчеркнутый P элемент подчеркивает вложенный B элемент. Internet Explorer также включает свойства для каждого типа художественного оформления. Пример: HTML: document.all.emphasis.style.textDecoration = "underline" Возвращаемое значение: В дополнение к none, любая из следующих 4 констант (как строка): blink | line-through | overline | underline. Множественные значения могут быть включены в строку как список, разграниченный пробелом. Значение по умолчанию: Ничего. textDecoration, textDecorationBlink, textDecorationLineThrough, textDecorationNone, textDecorationOverline, textDecorationUnderline Доступ: Чтение/Изменение Определено ли всё вышеперечисленное для указанного текстового элемента. Пример: HTML: document.all.emphasis.style.textDecorationLineThrough = "true" Возвращаемое значение: Булево значение: true | false. Значение по умолчанию: false textIndent Доступ: Чтение/Изменение Размер выравнивания первой строки блока встроенного текста (типа P элемента). Только на первую строку воздействует эта установка. Пример: HTML: document.all.firstGraph.style.textIndent = "0.5em" Возвращаемое значение: Строковое значение, состоящее из номера и меры. Значение по умолчанию: Ничего textJustify Доступ: Чтение/Изменение Контролирует дополнительные отступы для элемента, свойство textAlign которого равно Justify Пример: HTML: document.all.firstGraph.style.textJustify = "distribute" Возвращаемое значение: Одна из констант: Auto|distribute|distribute-all-lines| distribute-center-last|inter-cluster|inter-ideograph|inter-word|kashida|newspaper Значение по умолчанию: Ничего textJustifyTrim Доступ: Чтение/Изменение Для использования в будущем textKashidaSpace Доступ: Чтение/Изменение Контролирует соотношение расширения протяжки и расширения пробелов для арабских систем письма Пример: HTML: ссылка_на_элемент.style.textKashidaSpace = "90%" Возвращаемое значение: Процентное соотношение Значение по умолчанию: Ничего.
textShadow Доступ: Чтение/Изменение Контролирует отображение тени вокруг элементов текста. Атрибут стиля для этого свойства не поддерживается в IE5/Mac и NN6, однако данное свойство присуще объекту style. Возвращаемое значение: Каждая спецификация тени состоит из цвета по выбору и 3 разделённых пробелами значений длины (горизонтальное смещение тени, вертикальное смещение тени, радиус тени). Множественные значения разделяются запятыми. Значение по умолчанию: Ничего. textTransform Доступ: Чтение/Изменение Управляет преобразованием букв текста элемента в прописные. Пример: HTML: document.all.heading.style.textTransform = "capitalize" Возвращаемое значение: Значение none позволяет регистру исходного текста быть представленным как есть. Другие доступные постоянные значения (как строки): capitalize | lowercase | uppercase. Значение по умолчанию: Ничего. textUnderlinePosition Доступ: Чтение/Изменение Расположение линии в подчёркнутом начертании - над текстом или под текстом Пример: HTML: ссылка_на_элемент.style.textUnderlinePosition = "above" Возвращаемое значение: Константа above|below Значение по умолчанию: Ничего. top Доступ: Чтение/Изменение Для отображаемых элементов, определяет позицию высшего края поля элемента (содержание плюс top padding, border, и/или margin) относительно высшего края следующего наиболее близкого элемента. Для вычислений на этом значении, отыщите pixelTop или posTop свойства, которые возвращают подлинные числовые значения. Пример: HTML: document.all.blockD2.style.top = "40px" Возвращаемое значение: Строка, состоящая из числового значения и меры длины, процента, или auto. Значение по умолчанию: auto unicodeBidi Доступ: Чтение/Изменение В двунаправленом тексте - насколько блок текста, направленный в противоположную сторону, вложен во внешний элемент. Пример: HTML: ссылка_на_элемент.style.unicodeBidi = "normal" Возвращаемое значение: Константа normal|embed|bidi-override Значение по умолчанию: normal. verticalAlign Доступ: Чтение/Изменение Характеристика вертикального выравнивания элемента. Пример: HTML: document.all.myDIV.style.verticalAlign = "text-top" Возвращаемое значение: Строковое значение абсолютной меры (с модулями), процент (относительно следующего внешнего элемента поля), или одно из следующих постоянных значений: bottom | top | baseline | middle | sub | super | text-bottom | text-top. Значение по умолчанию: baseline visibility Доступ: Чтение/Изменение Видимость элемента. Окружение содержания не закрывает левый пробел элемента, чьё свойство видимости установлено в hidden. Пример: HTML: document.all.myDIV.style.visibility = "hidden" Возвращаемое значение: Одно из постоянных значений (как строка): hidden | inherit | visible. Значение по умолчанию: inherit whiteSpace Доступ: Чтение/Изменение Контролирует интерпретацию символов пробела в коде источника элемента Пример: HTML: ссылка_на_элемент.style.whiteSpace = "nowrap" Возвращаемое значение: Константа normal|nowrap|pre Значение по умолчанию: normal wordBreak Доступ: Чтение/Изменение Контролирует характеристики разрыва слова, содержащего как латинские, так и азиатские символы Пример: HTML: ссылка_на_элемент.style.wordBreak = "normal" Возвращаемое значение: Константа normal|break-all|keep-all Значение по умолчанию: normal wordSpacing Доступ: Чтение/Изменение Контролирует расстояние между словами Пример: HTML: ссылка_на_элемент.style.wordSpacing = "normal" Возвращаемое значение: Константа normal или длина в единицах em Значение по умолчанию: normal wordWrap Доступ: Чтение/Изменение Контролирует характеристики перехода слова на новую строку в ьлоковом элементе текста, элементе с внутренне определёнными размерами или позиционируемом элементе Пример: HTML: ссылка_на_элемент.style.wordWrap = "normal" Возвращаемое значение: Константа normal|break-word Значение по умолчанию: normal writingMode Доступ: Чтение/Изменение Контролирует направление потока содержимого web-страницы (слева-направо/сверху-вниз или сверху-вниз/справа-налево, как в некоторых азиатских языках) Пример: HTML: ссылка_на_элемент.style.writingMode = "tb-rl" Возвращаемое значение: Константа lr-tb|tb-rl Значение по умолчанию: lr-tb zIndex Доступ: Чтение/Изменение Положение в списке относительно других элементов в пределах того же самого родительского контейнера. Пример: HTML: document.all.myDIV.style.zIndex = 3 Возвращаемое значение: Целое число. Значение по умолчанию: 0
--:[ Название : Socks5 изучение продолжается:BIND ]:-- --:[ Автор : Jinn, ZaeB.uS, _http://zaeb.us ]:-- o--:[ 1 | Введение ]:--o Вот решил написать еще одну статью на тему соксов, некоторые личности скажут:"Вот понаписал статей, мог бы все в одной изложить!", объясню мою точку зрения на данную проблему: я считаю, что если бы весь этот материал(с первой статьи по текущую) содержался в одной статье, то статья бы получилась довольно большой и сложной для понимания! В этот раз рассмотрим метод не connect как в прошлых статьях, а bind. Если вы первый раз читаете про соксы и не знакомы с этим протоколом, то желательно прочитать мои статьи:"Организация работы php скрипта через socks5 сервер","PHP + socks5(авторизация по методу username/password)", либо RFC. Как и в прошлые разы перечислю на чем я все это гонял,ничего не изменилось=): * Win XP SP2 * Opera 8.52 * Денвер * 3proxy-0.5.3i(ЗАРАЗА) o--:[ 2 | Общие принципы ]:--o Для тех кто не знаком что это такое отправлю в гугл и коротко обьясню=) Bind используется для открытия порта, а по теме этой статьи видно что мы рассматриваем сокс => открывать порт будем на стороне socks5-сервера. А для чего это нужно? Это может использоваться в соединениях, которые требуют открытия порта на стороне клиента(мы ведь прячемся за сокс, т.е для удаленного сервера клиентом является сокс), хорошим примером требующим открытия порта на стороне клиента является ftp. Я думаю многие видели вопросы на форумах типа: "Ftp клиент не работает с http проксей", после долгой дискуссии выяснялось, что хлопчик пытается подключиться к фтп серверу через http проксю в активном режиме. И соответствующий ответ: "Юзай пассивный режим!". А что же это такое активный и пассивный режим? Если кто изучал ftp протокол те знаю, что в нем используется 2 вида соединения: клиент--->сервер по которому идут команды клиента и сервер--->клиент:альтернативный порт, который используется для передачи результата команды клиента(ls,get,put). Но вот проблема: с htpps проксями же такое не пройдет... Мы ведь не можем открыть порт на стороне https прокси, а для передачи данных его открыть нужно. Именно поэтому при использовании прокси сервера и активного режима вы не получите листинг директории,etc. Тогда приходиться юзать пассивный режим, там все открытия порта происходят на стороне ftp-сервера, а клиент из-за прокси просто к ним подключается и получает ответы на команды =) Но в соксах все по другому, тут есть механизм открытия порта на стороне сокс сервера и называется он bind. Т.е при использовании сокса не нужно переходить в пассивный режим(хотя возможно , но нужно тоже постараться чтобы открыть порт на соксе, а именно изучить данную небольшую статью =) o--:[ 3 | Реализуем BIND ]:--o Для чего это нужно разобрались, перейдем к практике и попробуем написать работающие приложение По RFC предполагается, что bind будет использован только как вторичное соединение, после первого первичного установленного с помощью метода CONNECT, но мы в наших экспериментах нарушим предписания RFC. Пакеты для бинда порта мы должны слать такие же как и для коннекта, но метод должен быть не connect(01) а bind(02)=). Снова показывать структуру пакета я не буду, если ты ее не знаешь читай статьи [1],[2]. На connect сокс сервером возвращается один ответ, в котором указан статус(ok/error) подключения, с bind'ом все сложнее, соксом предоставляется 2 ответа: первый приходит сразу же после запроса, в нем так же указан статус успешности открытия порта для входящего соединения,а также ip и порт выделенные соксом для входящего соединения, эта информация, в случае надобности, может быть предоставлена серверу-приложению через первичное соединение как адрес для взаимодействия. Возможно что ip будет отличаться от ip сокс сервера, т.к иногда подобные сервера имеют несколько адресов. Второй пакет приходит после внешнего подключения к забинденому порту, там содержится ip и порт подключившегося хоста и статус подключения(коды те же, 0-ok,etc). Эти данные могут быть использованы для решения о дальнейшем взаимодействии(напрмиер ip подключившегося хоста содержится в черных списках, тогда соединение может быть разорвано....но это все на ваше усмотрение) В принципе никакой сложности это вызывать не должно, после того как мы забиндим порт и получим первый ответ сокса, перед получением данных от подключившегося клиента мы должны будем получить второй пакет и проверять его статус, далее же, если все в порядке, мы сможем получать, отправлять данные как и прежде методами php(fread,fgets,fwrite,feof). Теперь собственно обсудим что мы будем кодить. Мы не будем работать с ftp и вот почему: в php существуют ф-ции ftp_connect, ftp_put, etc. Но при подключении сначала к соксу а потом попытке передачи через данный сокет файла данными методами определенными для работы с ftp компилятор php верещит, что сокет не подходит => воспользоваться встроенными ф-циями работы с ftp сервером нам не удастся и придется изучать и писать свой класс для работы по протоколу ftp, а это не так то просто и не входит в мои планы....пока=) Но ведь наша цель просто открыть на соксе порт, и получить оттуда отправленные сервером данные, поэтому мы поступим вот как: Code: -- забиндим порт на соксе -- получим ответ сокса, со статусом открытия порта, ip и порт выделенный для входящих подключений [ Мы за сервер ] -- теперь поработает за сервер и откроем подлючение не используя сокса(хм..хотя никто вам не мешает это сделать) с помощью fsockopen и выделенным адресом для входящего подключения -- отправим туда произвольные данные -- закроем подключение [ сервер накрылся медным тазом ] -- теперь мы получим пакет от сокса, в котором указаны ip и порт подключившегося хоста(т.е нашего) -- опять получим данные, уже отправленные сервером(опять нами;-) -- закроем подлючение к соксу -- выведем все это пользователю Этим примером мы проверим правильность понимания нами протокола, как мне кажется, данный пример полностью показывает все стороны bind'а, как клиентской стороны так и серверной Обсудим особенности нашего сегодняшнего кода. Обычно сокс сервер формирует ответ с типом адреса 01, т.е ip адрес, а не так как мы 03 - доменное имя. Для перевода ip в привычный нам строковый вид, т.е с точками мы будем использовать функцию пхп long2ip, специального для этого предназначенную, но перед этим мы должны будем перевести адрес из hex'а в dec. Кстати существует функция ip2long, которая могла бы пригодиться нам в том случае если бы мы передавали соксу IPv4,но это просто на заметку Код изначально взят из моей статьи [2] и заточен именно для bind'а... PHP: <? error_reporting(0); $socks_ip = "127.0.0.1"; // адрес scoks 5 прокси $socks_port = 1080; // порт сокса $socks_login = "jinn"; // логин для доступа к соксу $socks_pass = "jinn2"; // пароль $bind_host = "127.0.0.1"; $bind_port = 3232; $socks_server=fsockopen($socks_ip,$socks_port); // соединяемся с соксом if($socks_server) { echo'<meta http-equiv="Content-Language" content="ru"><meta http-equiv=Content-Type content="text/html; charset=windows-1251">'; $h=pack("H*",'05020002'); // привествие =) fwrite($socks_server,$h); $result=bin2hex(fread($socks_server,4)); // переводим в hex для дальнейшего сравнения if($result == '0500') // авторизация отсутствует { $auth_ok=1; } elseif($result == '0502') // метод username/password { $len_login = chr(strlen($socks_login)); //получаем спец символ соответсвующий ascii коду $len_pass = chr(strlen($socks_pass)); // получаем спец символ соответсвующий ascii коду $h=pack("H*","01").$len_login.$socks_login.$len_pass.$socks_pass; // формируем пакет с помощью pack() fwrite($socks_server,$h); $result=bin2hex(fread($socks_server,4)); // переводим из бинарного режима в hex // далее сверяем если код ответа 0, то авторизация успешна,выставляем об этом переменую,в ином случа выводим сообщение об ошибке if($result{3}!=0) { echo "<center><font color=red>Ошибка:аутентификация не прошла!</font></center>"; fclose($socks_server); } else { $auth_ok=1; } } else { echo "<center><font color=red>Ошибка:возможно это не socks5 или он не поддерживает данные(00,02) методы аутентификации!</font></center>"; } $list=""; // проверяем если авторизация успешна , то начинаем взаимодействие с соксом if($auth_ok==1) { $len_h=chr(strlen($bind_host)); $h=pack("H*","05020003").$len_h.$bind_host.pack("n",$bind_port); //формируем запрос fwrite($socks_server,$h); $result = bin2hex(fread($socks_server,1024)); $ver = substr($result,0,2); $status = substr($result,2,2); $in_ip = long2ip(hexdec(substr($result,8,8))); $in_port = hexdec(substr($result,16,4)); echo "Адрес для подключения:".$in_ip.":".$in_port."<br>"; // проверяем успешность подключения,выводи ошибки if($status == '00') { $head = "<br><br><center><font color='blue' size=4>HI!coded by ZaeB.uS</font></center>"; $in_socket=fsockopen($in_ip,$in_port); fwrite($in_socket,$head); fclose($in_socket); $result = bin2hex(fread($socks_server,1024)); $ver = substr($result,0,2); $status = substr($result,2,2); // тут статус входящего подключения $con_ip = long2ip(hexdec(substr($result,8,8))); // а кто это к нам подключился?ип подключившегося хоста $con_port = hexdec(substr($result,16,4)); // порт негодяя echo "Подключившийся хост:".$con_ip.":".$con_port."<br>"; echo "Полученные данные<br><br>"; // получаем данные while(!feof($socks_server)) { echo fread($socks_server,1024); } } // определяем ошибку! данные коды ответа взяты из RFC elseif ($status == 1) {echo "<center><font color=red>Ошибка: вина SOCKS-сервера</font></center>";} elseif ($status == 2) {echo "<center><font color=red>Ошибка: соединение запрещено набором правил</font></center>";} elseif ($status == 3) {echo "<center><font color=red>Ошибка: сеть недоступна</font></center>";} elseif ($status == 4) {echo "<center><font color=red>Ошибка: хост недоступен</font></center>";} elseif ($status == 5) {echo "<center><font color=red>Ошибка: отказ в соединении</font></center>";} elseif ($status == 6) {echo "<center><font color=red>Ошибка: истечение TTL</font></center>";} elseif ($status == 7) {echo "<center><font color=red>Ошибка: команда не поддерживается</font></center>";} elseif ($status == 8) {echo "<center><font color=red>Ошибка: тип адреса не поддерживается</font></center>";} else {echo "<center><font color=red>Ошибка: не определено!RFC в панике! :-)</font></center>";} } fclose($socks_server); } else { echo "<center><font color=red>SOCKS сервер недоступен!</font></center>"; } echo '<br><br><table border="0" cellspacing="1" width="100%" align="center" style="background-color:#000000;"><tr><td width="100%" align="center" style="background-color:#E8E8E8;"><font size=1 color="#292929" face="verdana">[ c0ded by <b>Jinn</b> | 304227033 | http://zaeb.us ] </font></td></tr></table>'; ?> o--:[ 4 | End ]:--o Да, статья получилась не слишком большой, и возможно вы не узнали из нее ничего нового, но все же я думаю что знать данную инфу нужно, ведь понимание сетевых протоколов является основным=) По прежнему, если возникли предложения или вопросы стучи мне в асю или пиши на мыло, постараюсь дать ответ... o--:[ 5 | Материалы ]:--o 1.... Организация работы php скрипта через socks5 сервер, Jinn, ZaeB.uS, _http://zaeb.us 2.... PHP + socks5(авторизация по методу username/password), Jinn, ZaeB.uS, _http://zaeb.us o--:[ Jinn | ZaeB.uS | _http://zaeb.us ]:--o
Несколько статей о создании закругленных углов на сайтах Здесь представлен обзор 38 статей, разбитых на 4 категории по способам реализации. Простой, семантически правильный CSS блок с чистым кодом Создает блок и добавляет возможность создания заголовка блока. Тянется по ширине и высоте. Несмотря на тень на примере, реализации полупрозрачной тени не предусмотрено. Code: <div class="sidebox"> <div class="boxhead"><h2>Test Headline</h2></div> <div class="boxbody"> <p>This is a short sample paragraph.</p> <p>And another one.</p> </div> </div> The CSS: /* Show only to IE PC \*/ * html .boxhead h2 {height: 1%;} /* For IE 5 PC */ .sidebox { margin: 0 auto; /* center for now */ width: 17em; /* ems so it will grow */ background: url(sbbody-r.gif) no-repeat bottom right; font-size: 100%; } .boxhead { background: url(sbhead-r.gif) no-repeat top right; margin: 0; padding: 0; text-align: center; } .boxhead h2 { background: url(sbhead-l.gif) no-repeat top left; margin: 0; padding: 22px 30px 5px; color: white; font-weight: bold; font-size: 1.2em; line-height: 1em; text-shadow: rgba(0,0,0,.4) 0px 2px 5px; /* Safari-only, but cool */ } .boxbody { background: url(sbbody-l.gif) no-repeat bottom left; margin: 0; padding: 5px 30px 31px; } Круглые углы в CSS Очень приятный внешний вид, простая реализация, малое количество HTML-элементов. К минусам, пожалуй, можно отнести только наличие 4 картинок для каждого из углов. Но увы не работает в IE. Используемые изображения: Верхние левые и верхние правые углы созданы, используя следующее правило CSS: Code: .rounded:before { background: transparent url(top-right.png) scroll no-repeat top right; margin-bottom: -20px; height: 30px; display: block; border: none; content: url(top-left.png); padding: 0; line-height: 0.1; font-size: 1px; } Нижние левые, и нижние правые углы созданы с подобным правилом, только используя :after псевдо элемент: Code: .rounded:after { display: block; line-height: 0.1; font-size: 1px; content: url(bottom-left.png); margin: 0 0 -1px 0; height: 30px; background: white; background: transparent url(bottom-right.png) scroll no-repeat bottom right ; padding: 0; } CSS тизер-блок Предусмотрена реализация как одно- так и двух-картиночного метода. Малое количество HTML-элементов. Очень удобно для создания тизеров. Code: .teaser { width:430px; padding:0 0 14px 0; margin:10px auto; background:url("tsr.gif") bottom left no-repeat; } tsr.gif Ссылки на последние новости Очень интересное решение на основе неупорядоченного списка. Плюсом будет простая реализация и малое количество HTML-элементов. Приятное оформление с функцией изменения цвета при наведении мышкой (но эта приятность не работает в IE). Code: <style type="text/css" media="screen,print"> html,body { margin:0; padding:0; color:#000; background:#fff; } body { padding:10px; font:76%/140% "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif; } #labfooter { text-align:center; clear:both; } #news { margin:1em auto; padding:0; width:150px; font-size:0.94em; list-style:none; } #news li { background:url("box.gif") 0 100% no-repeat; padding:0 0 4px 0; margin:8px 0 0 0; display:block; } #news li p { background:#eaeaea; padding:1px 4px 0 7px; margin:0; border-left:14px solid #939393; } #news li.arr p { background:#eaeaea url("edge.gif") 0 50% repeat-y; padding-left:21px; border:0; } #news h4 { font-size:1em; line-height:1em; font-weight:bold; background:url("box.gif") 0 0 no-repeat; margin:0; padding:6px 4px 3px 21px; } #news li:hover { background-position:-150px 100%; } #news li:hover p { border-color:#2793ff; } #news li.arr:hover p { background-image:url("edge-h.gif"); } #news li:hover h4 { background-position:-150px 0; } #news a:link { text-decoration:none; color:#000; } #news a:visited { text-decoration:none; color:#606; } #news a:hover { text-decoration:underline; } #news .more { line-height:1em; display:block; text-align:right; padding:0 18px 2px 21px; margin-top:4px; background:url("arrow.gif") 135px 50% no-repeat; } </style> <ul id="news"> <li> <h4><a href="#">News Item 1</a></h4> <p>Nulla dictum. Praesent turpis libero, pretium in, pretium ac, malesuada sed, ligula.</p> <a href="#" class="more" title="Continue reading News Item 1">Read more</a> </li> <li> <h4><a href="#">News Item 2</a></h4> <p>Nullam adipiscing dui blandit ipsum.</p> <a href="#" class="more" title="Continue reading News Item 2">Read more</a> </li> <li class="arr"> <h4><a href="#">News Item 3</a></h4> <p>Vivamus convallis tempus ante.</p> <a href="#" class="more" title="Continue reading News Item 3">Read more</a> </li> <li class="arr"> <h4><a href="#">News Item 4</a></h4> <p>Vivamus convallis tempus ante. Nullam adipiscing dui blandit ipsum.</p> <a href="#" class="more" title="Continue reading News Item 4">Read more</a> </li> </ul> box.gif edge.gif edge-h.gif CSS и круглые углы: Границы с дугами Неоспоримым минусом является наличие 8 дивов для реализации. Так же в статье есть описание другого метода, в котором используется в 2 раза меньше дивов, но блок залит цветом. Code: <style type="text/css"> .b {background: url(dot.gif) 0 100% repeat-x} .l {background: url(dot.gif) 0 0 repeat-y} .r {background: url(dot.gif) 100% 0 repeat-y} </style> <div class="t"><div class="b"><div class="l"><div class="r"><div class="bl"><div class="br"><div class="tl"><div class="tr"> Lorem ipsum dolor sit amet consectetur adipisicing elit </div></div></div></div></div></div></div></div> Создание скругленного блока или дизайн с CSS и XHTML Как и в предыдущем способе все реализовано на основе списка определений. В статье рассмотрено два способа реализации. Так же появилась возможность тянущейся ширины. css Code: dl { /* block position that can be changed at will */ position: absolute; left: 50px; top: 20px; width: 275px; /* width of block according to your background image */ } dl, dt, dd { /* suppression of all margins and paddings */ margin: 0; padding: 0; } dl { /* by default background on the entire block */ background: url(bas.gif) bottom left no-repeat; padding-bottom: 40px; /* so that text will not appear on the bottom rounded edge */ } dt { /* bloc title definition */ height: 40px; background: url(haut.gif) top left no-repeat; font-size: 1.3em; font-weight: bold; text-align: center; } dd { padding: 0 20px 0 10px; /* internal block spaces administration */ text-align: justify; background: url(milieu.gif) top left repeat-y; /* internal background */ } html Code: <body> <dl> <dt>My beautiful space</dt> <dd>Lorem ipsum dolor sit amet, bla bla bla bla...</dd> </dl> </body> «Пуленепробиваемые» круглые углы Очень подробная статья с большим количеством примеров. Но достаточно сложная реализация. К тому же используется 4 картинки. HTML: Code: <div class="contentWrapper"> <div class="content"> <img class="borderTL" src="/images/borderTL.gif" alt="" width="14" height="14" /> <img class="borderTR" src="/images/borderTR.gif" alt="" width="14" height="14" /> <h1>Here be content!</h1> <!-- IE5/win puts the margin-bottom of the content div's final element OUTSIDE the containing box (div.content), instead of putting it inside the containing box's edge. So it needs this spacer. --> <div class="roundedCornerSpacer"> </div> </div><!-- end of div.content --> <div class="bottomCorners"> <img class="borderBL" src="/images/borderBL.gif" alt="" width="14" height="14" /> <img class="borderBR" src="/images/borderBR.gif" alt="" width="14" height="14" /> </div> </div><!-- end of div.contentWrapper --> CSS: Code: .roundedCornerSpacer { margin: 0px; padding: 0px; border: 0px; clear: both; font-size: 1px; line-height: 1px; } /* In the CSS below, the numbers used are the following: 1px: the width of the border 3px: a fudge factor needed for IE5/win (see below) 4px: the width of the border (1px) plus the 3px IE5/win fudge factor 14px: the width or height of the border image */ .borderTL, .borderTR, .borderBL, .borderBR { width: 14px; height: 14px; padding: 0px; border: 0px; z-index: 99; } .borderTL, .borderBL { float: left; clear: both; } .borderTR, .borderBR { float: right; clear: right; } .borderTL { margin: -1px 0px 0px -1px; } .borderTR { margin: -1px -1px 0px 0px; } .borderBL { margin: -14px 0px 0px 0px; } .borderBR { margin: -14px 0px 0px 0px; } /* IE5-5.5/win needs the border scooted to the left or right by an additional 3px! Why? */ .borderTL { margin-left: -4px; ma\rgin-left: -1px; } html>body .borderTL { margin-left: -1px; } .borderTR { margin-right: -4px; ma\rgin-right: -1px; } html>body .borderTR { margin-right: -1px; } .borderBL { margin-left: -3px; ma\rgin-left: 0px; } html>body .borderBL { margin-left: 0px; } .borderBR { margin-right: -3px; ma\rgin-right: 0px; } html>body .borderBR { margin-right: 0px; } /* To get around a known bug in IE5/win, apply the border (no margin, padding or positioning) to the content class and apply whatever positioning you want to the contentWrapper class. */ .content { margin: 0px; padding: 0px; border: 1px solid #000000; } .contentWrapper { /* position this div however you want, but keep its padding and border at zero */ padding: 0px; border: 0px; } Рисование теней и рамок элементов оформления Статья Владимира Токмакова. Весьма сложная реализация, но к плюсам, конечно, относится возможность создания полупрозрачных теней. Статья на русском. Code: <style type="text/css"> .framed, .framed .f_r, .framed .f_b, .framed .f_l, .framed .f_c { float: left; position: relative; z-index: 1; width: auto; height: auto; margin: 0; padding: 0; } .framed .f_tt, .framed .f_rr, .framed .f_bb, .framed .f_ll { display: none; } .framed { margin: 0 30px 15px 0; background: url('hint-t.png') no-repeat left top; //background: none; } .framed .f_r { left: 30px; background: url('hint-r.png') no-repeat right top; //background: none; } .framed .f_b { top: 30px; background: url('hint-b.png') no-repeat right bottom; //background: none; } .framed .f_c { float: none; position: relative; left: 30px; top: -15px; padding: 1px 0; margin: 0 30px 0 0; background: #fffcb8; } .framed .f_l { left: -30px; padding: 15px 0; background: url('hint-l.png') no-repeat left bottom; //background: none; } * html .framed .f_r, * html .framed .f_b, * html .framed .f_l { height: 0; } * html .framed .f_tt, * html .framed .f_rr, * html .framed .f_bb, * html .framed .f_bb *, * html .framed .f_ll, * html .framed .f_ll * { display: block; position: absolute; left: 0; top: 0; } * html .framed .f_tt { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=hint-t.png,sizingMethod=crop); } * html .framed .f_rr { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=hint-r.png,sizingMethod=crop); } * html .framed .f_tt, * html .framed .f_bb { width: expression( parentNode.offsetWidth ); height: 30px; } * html .framed .f_rr, * html .framed .f_ll { width: 30px; height: expression( parentNode.offsetHeight ); } * html .framed .f_bb, * html .framed .f_ll { overflow: hidden; } * html .framed .f_bb * { width: 3000px; height: 30px; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=hint-b.png,sizingMethod=crop); } * html .framed .f_ll * { width: 30px; height: 3000px; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=hint-l.png,sizingMethod=crop); } /* Исправляем неправильный расчет позиции при "нечетной ширине" */ * html .framed .f_rr, * html .framed .f_bb * { right: expression( this.parentNode.offsetWidth % 2 ? -1 : 0 ); left: auto; } * html .framed .f_ll, * html .framed .f_ll *, * html .framed .f_bb, * html .framed .f_bb * { bottom: expression( this.parentNode.offsetHeight % 2 ? -1 : 0 ); top: auto; } </style> <div style="position: relative; height: 7em;"> <p>Любой текст, поверх которого показывается элемент.</p> <div class="framed" style="position: absolute; left: 6em; top: 0.5em;"> <div class="f_tt"></div> <div class="f_r"><div class="f_rr"></div> <div class="f_b"><div class="f_bb"><div></div></div> <div class="f_l"><div class="f_ll"><div></div></div> <div class="f_c"> Сообщение или форма ввода данных. </div> </div> </div> </div> </div> </div>
Безтабличная вёрстка! Верстаем без таблиц! Вот пример, работающий во всех броузерах, в том числе и в IE5 Стандартная страничка с хидером, меню, контентом и футером (футер всегда внизу ): HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Верстаем без таблиц</title> <meta http-equiv="content-type" content="text/html; charset=windows-1251"> <style type="text/css"> * {padding: 0; margin: 0; font: normal 100.1% 'Times New Roman'} body {min-height: 100%; height: 100%; color: #000; background: url('bg.gif') 30% 0 repeat-y} html {height: 100%} body, html, #root {min-width: 600px} H3 {font: bold 25px Arial; color: #888} #nav H3, #content H3 {margin: 0 0 5px 0} #root {height: auto; width: 100%; min-height: 100%} #head {background: #e4e4e4; height: 68px} #nav {float: left; width: 30%} #nav P A {background: #e9e9e9; color: #444; border: 1px solid #333; font: bold 90% Georgia; text-decoration: none; display: block; width: 100%; margin: 1px auto} #content {float: right; width: 70%} #footer, #wrapper {clear: both; height: 50px} #footer {background: #e4e4e4; z-index: 9999; margin: -50px 0 0 0} </style> <!--[if lt IE 7]> <style type='text/css'> #root {height: 100%} #nav {margin-right: -100%} #content {margin-left: 30%; display: inline} #nav, #content {z-index: 1; padding: 0 0 50px 0} </style> <![endif]--> </head> <body> <div id='root'> <div id='head'> <h3>Header</h3> </div> <div id='content'> <h3>Content</h3> </div> <div id='nav'> <h3>Navigation</h3> </div> <div id='wrapper'> </div> </div> <div id='footer'> <h3>Footer</h3> </div> </body> </html> Дерзайте!
PHP: Сокеты для новчиков[/b][SIZE="4"][B]Введение[/B][/SIZE] Приветствую, и сразу начнём ;). В этой статье мы напишем простенький [U][I]демон на php[/I][/U], но для начала нам надо ознакомиться с сокетами и базовыми знаниями IP-протокола. Итак что же представляет собой сокет? [U]Сокет - это программный интерфейс, предназначенный для передачи данных между приложениями на сетевом уровне.[/U] В PHP есть функции работающие с сокетами на уровне IP-протокола. Это гораздо более низкий уровень по сранению с уровнем, на котором работают функция fsockopen и потоки. В этой статье я научу тех, кто пока ещё не умеет работать с этими функциями. Работать будем в режиме [U]CLI (command-line interface)[/U] т.е в коммандной строке, а не через браузер. [SIZE="4"][B]Что для этого нам понадобиться:[/B][/SIZE] [COLOR="Red"]PHP интерпретатор[/COLOR] - ну куда ж без него :). Кстати вебсервер apache или какой другой нам не понадобиться! [COLOR="Red"]php_sockets.dll [/COLOR]- библиотека (должна быть именно под вашу версию PHP) [SIZE="4"][B]Подключение модуля sockets[/B][/SIZE] Для начала нам нужно проверить подключена ли у нас либа php_sockets.dll. Смотрим в php.ini (eg. %WINDIR%\php.ini) и смотрим в раздел "Dynamic Extensions". Там должна быть раскоментирована строчка "extension=php_sockets.dll". Далее смотрим директиву "extension_dir" она должна указывать на путь где лежат все динамически подключаемые модули. Лезем туда и смотрим присутсвует ли библиотека там. Если да то читаем дальше, если нет то скачайте модуль под вашу версию php и положите в эту директорию. Теперь проверим работает ли она. Существует несколько способов проверить это. [COLOR="DarkOrange"][LIST][*]Из командной строки запустить php.exe с ключом -m. (php.exe -m); [*]Скрипт запустить и посмотреть существует ли раздел "sockets"; [*]На хостинге (где у вас нету доступа к php.ini и ssh) можно проверить скриптом: [/LIST][/COLOR] [PHP]<?php print "php_sockets.dll - "; if(extension_loaded('sockets')) { print "loaded"; } else { print "not loaded"; } ?> Если у вас не подключена php_sockets.dll то смысла читать ниже - нету. Пишем простой демон Итак напишем простой демон который будет при подключении выводить какую нибудь рандомную надпись из файла. Принцип сервера-скрипта будет простой: Создаём TCP сокет; Привязываем сокет к определённому адресу и порту; Слушаем сокет; Клиент конектится, выводим рандомную фразу. Ждём до того пока не он не пошлёт комманду "bye". Приступим к кодингу, думаю вопросов лишний не возникнет так-как код хорошо комментирован. PHP: <?php // Файл содержащий рандомные фразы разделённых "\r\n" (каждая фраза на новой строке) $FileName = "file.txt"; $FHandle = file($FileName); // Работаем вечно (выдаёт ошибку при safe_mode=1, @ для подавления) @set_time_limit(0); // Создание сокета TCP: resource socket_create(1, 2, 3); // 1) AF_INET - семейство протокола или домен. Для соединений // осуществляемых через интернет используется AF_INET, // для UNIX используется AF_Unix (но об этом позже) // 2) SOCK_STREAM - обычно используется для TCP (SOCK_DGRAM - UDP) // 3) Протокол для TCP - SOL_TCP, UDP - SOL_UDP // возвращает дескриптор сокета if(($socket = socket_create(AF_INET, SOCK_STREAM, SOL_TCP)) < 0) { print("Невозможно создать сокет: " . socket_strerror(socket_last_error()) . "\n"); } // Биндим сокет на определённый адрес и порт: boolean socket_bind(1, 2, 3); // 1) Дескриптор сокета // 2) IP адрес, или путь до сокета в Unix // 3) Порт (в нашем случае порт = 666) if(($error = socket_bind($socket, "127.0.0.1", 666)) < 0) { print("Невозможно привязать сокет :" . socket_strerror(socket_last_error()). "\n"); } // Прослушиваем сокет: boolean socket_listen(1, 2); // 1) дескриптор сокета // backlog размер очереди запрросов ожидающих соединения if(($error = socket_listen($socket, 5)) < 0) { print("Невозможно прослушать сокет: " . socket_strerror(socket_last_error()) . "\n"); } // Слушаем вечно ;) while(TRUE) { // ожидаем соединение // socket_accept(дескрипток сокета) - принимает входящие соединение и делает на скрипт сервером. if(($accept = socket_accept($socket)) < 0) { print("Ошибка при чтении: " . socket_strerror($message) . "\n"); break; } // выводим рандомную строку из файла socket_write($accept, getRandMessage($FHandle)); print(date("Y-m-d H:i:s", time())." STATUS: client connected.\n"); ob_flush(); while(TRUE) { // Считываем заданное количество байт из указанного сокета if(FALSE === ($line = @socket_read($accept, 2048))) { print("Невозможно прослушать сокет: " . socket_strerror(socket_last_error()) . "\n"); break 2; } switch(strtolower(trim($line))) { case "bye" : print(date("Y-m-d H:i:s", time())." STATUS: client close connection.\n"); break 2; break; case "more" : // записываем данные из буфера в сокет if(!@socket_write($accept, getRandMessage($FHandle)."\r\n")) { print(date("Y-m-d H:i:s", time())." STATUS: client close connection.\n"); break 2; } break; default : // записываем данные из буфера в сокет if(!@socket_write($accept, "Unknown command, 'bye' to exit.\r\n")) { print(date("Y-m-d H:i:s", time())." STATUS: client close connection.\n"); break 2; } break; } print(date("Y-m-d H:i:s", time()). " READ: ".$line."\n"); ob_flush(); } // закрываем соединение socket_close($accept); } // Закрываем сокет socket_close($socket); function getRandMessage(&$Array) { return ($Array[rand(0, count($Array)-1)]); } ?> Думаю многое понятно. Назовём его например socket.php. Теперь запускаем наш скрипт-сервер командой: php socket.php в командной строке. Тестируем приложение Для начала выведем все активные TCP соединения C:\Documents and Settings\t3rr4n>netstat -o -a -p TCP Активные подключения Имя Локальный адрес Внешний адрес Состояние PID TCP work-012f823131:http work-012f823131:0 LISTENING 2112 TCP work-012f823131:epmap work-012f823131:0 LISTENING 1188 TCP work-012f823131:microsoft-ds work-012f823131:0 LISTENING 4 TCP work-012f823131:doom work-012f823131:0 LISTENING 1552 <-- это мы висим TCP work-012f823131:1029 work-012f823131:0 LISTENING 884 TCP work-012f823131:1048 work-012f823131:0 LISTENING 2032 TCP work-012f823131:3306 work-012f823131:0 LISTENING 2444 TCP work-012f823131:1046 205.188.8.253:https ESTABLISHED 2032 TCP work-012f823131:netbios-ssn work-012f823131:0 LISTENING 4 DOOM это ассоциация с портом "666" (в игре "DooM" используется именно этот порт ). Т.е наше приложение ожидает подключение. Проверим что это за приложение запущено по PID 1552: C:\Documents and Settings\t3rr4n>tasklist | find "1552" php.exe 1552 Console 0 4а064 КБ C:\Documents and Settings\t3rr4n>tasklist | find "php.exe" php.exe 2716 Console 0 812 КБ php.exe 1552 Console 0 4а064 КБ Теперь попробуем подключиться и посылать комманды (на рис. всё понятно). Я использовал известную программу NetCat, вы можете Telnet но лучше NC: C:\Documents and Settings\t3rr4n>nc 127.0.0.1 666 Хай! Ну на этом всё. Теперь вы можете тоже попробовать написать какой-нибудь демон, может быть бота или ещё что-то более интересное, ведь большинство приложений в сети используют именно сокеты, так что это основа основ. Кстати в большинстве языков программирования поддерживаются сокеты и принцип работы с ними везде одинаковый. Который я описал выше.
очень небольшая статья по PHP некоторое время назад понадобилось из PHP-CLI скрипта вызвать внешнюю программу, не дожидаясь её выполнения в операционной системе windows вопрос возник потому, что стандартные пхп функции system, exec и т.д. приостанавливают работу скрипта до тех пор, пока заданный в них параметр не выполнится. спрашивал на форуме - сказали что винда г, юзать nix и запускать команду в фоновом режиме амперсандом, но надо было в винде. и вот сегодня почитав мануал по win оболочке дошел до команды START, которая как раз делает то, что нужно =) синтаксис можно посмотреть так: start /? и, наконец, применение в пэхэпэ скрипте: PHP: system("start php.exe c:\\file.php"); - вызывает на исполнение файл c:/file.php интерпретатором пхп ПАРАЛЛЕЛЬНО с текущим скриптом (т.е. родительский скрипт продолжает выполняться потому что команда start после запуска указанной программы завершается и следовательно функция system завершается ) ну конечно при условии что win знает где лежит php.exe т.к. я раньше не знал этого и думал что это невозможно (как впрочем мне и сказали тогда на форуме) решил выложить в помощь людям, которые ещё не знают этого и которым это может понадобиться
Парсинг страниц с защитой на JavaScript [INTRO] Многие начинающие и не очень начинающие кодеры при написании парсеров/грабберов сталкиваются с проблемой, что вывод данных на страницу производится яваскриптом, да ещё и с динамическими именами переменных, массивов и т.д. Собственно решил написать эту статейку. [Способ решения] Вот так недавно наткнулся на один код. На странице выводилась прокся (IP : Port). Но выводилось при помощи JS. Наша задача - получить адрес и порт прокси при помощи PHP, не прибегая к каким-либо выполнениям на стороне клиента. Код страницы выглядел примерно вот так: Code: <HTML><BODY> <script> lXaLNu = new Array(742,62,948,760,41,960,48); auAQmk = parseInt((((500+lXaLNu[0])*lXaLNu[1]+lXaLNu[2]+lXaLNu[3])*lXaLNu[4]-lXaLNu[5]-lXaLNu[6])*10)/10-3226178; jmJZrOkTxr = new Array(351,30,25,715,874); JACwFMTS = parseInt((((109+jmJZrOkTxr[0])*jmJZrOkTxr[1])*jmJZrOkTxr[2]+jmJZrOkTxr[3]+jmJZrOkTxr[4])*10)/10-346439; pYSHW = new Array(425,482,67,716,370,432); nlM = parseInt(((843+pYSHW[0]+pYSHW[1])*pYSHW[2]+pYSHW[3]-pYSHW[4]+pYSHW[5])*10)/10-105771; CIjU = new Array(374,514,208); NCfWOOCO = parseInt((424+CIjU[0]+CIjU[1]-CIjU[2])*10)/10-894; ZuIGvQrzIMTS = new Array(112,185,735,61,91); myiDrcfCi = parseInt(((287+ZuIGvQrzIMTS[0]-ZuIGvQrzIMTS[1]-ZuIGvQrzIMTS[2])*ZuIGvQrzIMTS[3]+ZuIGvQrzIMTS[4])*10)/10+31828; TMUuMPjfRhm = parseInt(NCfWOOCO)+'.'+parseInt(auAQmk)+'.'+parseInt(myiDrcfCi)+'.'+parseInt(JACwFMTS)+':'+parseInt(nlM); </script> Proxy IP:PORT : <script>document.write(TMUuMPjfRhm);</script> Имена переменных, массивов были динамическими, последовательности и величины математических операций так же были различными при каждой перезагружке страницы. Казалось бы сложно, на самом деле нет Рассмотрим код: Каждая переменная формирует кусок ip прокси, а одна из них содержит порт. Этот алгоритм не меняется. Далее переменная TMUuMPjfRhm содержит конечный результат (адрес разделённый точками и через двоеточие порт). Следовательно нам нужно получить результат этой переменной. В принципе есть множество способов решения данной проблемы, в целом всё зависит от воображения программиста. Сейчас мы рассмотрим один из способов - преобразование JS кода в PHP и выполнение. И так пошагово: Отпарсить кусок нужного JavaScript Заменить JS переменные и массивы на PHP Заменить JS функции на эквивалентные PHP Выполнить полученный код через eval() и создать переменную, содержащую конечный результат Всё, что для этого нужно это знание регулярных выражений, ну и синтаксиса PHP (как бы банально это не звучало), иначе eval() код с ошибками кушать не будет [Поехали] 1. Парсим код. Всё, что нам нужно для счастья это код между <script></script>. PHP: preg_match('#<script>(.+)</script>#Uis', $source, $out); В $out[1] теперь содержится нужный нам код. 2. Парсим имена массивов и переменных PHP: preg_match_all('#([a-z]+)\s=\snew#i', $out[1], $arrs); preg_match_all('#([a-z]+)\s=\sparse#i', $out[1], $vars); Получаем Code: Переменные Array ( [0] => auAQmk [1] => JACwFMTS [2] => nlM [3] => NCfWOOCO [4] => myiDrcfCi [5] => TMUuMPjfRhm ) Массивы Array ( [0] => lXaLNu [1] => jmJZrOkTxr [2] => pYSHW [3] => CIjU [4] => ZuIGvQrzIMTS ) Теперь преобразуем все переменные в PHP путём добавления знака доллара. Для этого напишем небольшую функцию обратного вызова, чтобы применить её ко всем элементам массивов $arrs[1] и $vars[1]. PHP: function add_dollar($elem) { return '$' . $elem; } Применяем: PHP: $php_arrs = array_map('add_dollar', $arrs[1]); $php_vars = array_map('add_dollar', $vars[1]); Далее заменяем преобразованные имена в нашем коде PHP: $out[1] = str_replace($arrs[1], $php_arrs, $out[1]); $out[1] = str_replace($vars[1], $php_vars, $out[1]); Заменили, едем дальше. 3. Меняем JS функции на эквивалентные PHP Здесь используется всего-лишь одна функция parseInt. Эквиватент ей в PHP - intval() или в данном примере даже подойдёт abs(). Заменим на intval(): PHP: $out[1] = str_replace('parseInt', 'intval', $out[1]); Далее смотрим на массивы, видим new Array(). Но так как в PHP массив не является объектом, а простой функцией array() заменим это дело, просто убрав new: PHP: $out[1] = str_replace('new ', '', $out[1]); В последней переменной, которая формирует результат мы видим JS-конкатенацию (знак плюса). Заменяем ёё на PHP-конкатенацию (точка) PHP: $out[1] = str_replace( array("'+", "+'"), array("' . ", " . '"), $out[1]); Хитрый финт ушами и у нас уже готовый PHP-код: PHP: $lXaLNu = Array(742,62,948,760,41,960,48); $auAQmk = intval((((500+$lXaLNu[0])*$lXaLNu[1]+$lXaLNu[2]+$lXaLNu[3])*$lXaLNu[4]-$lXaLNu[5]-$lXaLNu[6])*10)/10-3226178; $jmJZrOkTxr = Array(351,30,25,715,874); $JACwFMTS = intval((((109+$jmJZrOkTxr[0])*$jmJZrOkTxr[1])*$jmJZrOkTxr[2]+$jmJZrOkTxr[3]+$jmJZrOkTxr[4])*10)/10-346439; $pYSHW = Array(425,482,67,716,370,432); $nlM = intval(((843+$pYSHW[0]+$pYSHW[1])*$pYSHW[2]+$pYSHW[3]-$pYSHW[4]+$pYSHW[5])*10)/10-105771; $CIjU = Array(374,514,208); $NCfWOOCO = intval((424+$CIjU[0]+$CIjU[1]-$CIjU[2])*10)/10-894; $ZuIGvQrzIMTS = Array(112,185,735,61,91); $myiDrcfCi = intval(((287+$ZuIGvQrzIMTS[0]-$ZuIGvQrzIMTS[1]-$ZuIGvQrzIMTS[2])*$ZuIGvQrzIMTS[3]+$ZuIGvQrzIMTS[4])*10)/10+31828; $TMUuMPjfRhm = intval($NCfWOOCO) . '.' . intval($auAQmk) . '.' . intval($myiDrcfCi) . '.' . intval($JACwFMTS) . ':' . intval($nlM); 4. Выполняем полученный код Для начала создадим переменную, которая будет содержать результат. Ведь к переменной $TMUuMPjfRhm мы не можем обращаться постоянно, так как имя её меняется. Поэтому, чтоб код был постоянно рабочим при любых изменениях переменных достанем имя последней переменной из массива (того, когда парсили) имена переменных. И создадим независимую переменную, содержащую результат. PHP: $out[1] .= '$proxy = ' . array_pop($php_vars) . ';'; Осталось лишь выполнить наш PHP-код через eval() PHP: eval($out[1]); Теперь адрес проксика будет в переменной $proxy PHP: echo $proxy; [Вывод] Как все знают, идеальной защиты не существует и JS тому не исключение Был продемонстрирован всего один из тысячи способов получения контента страницы с казалось бы такой крутой защитой. В общем удачных кодесов В аттаче весь код этой статьи с комментариями
Кэширование Web-страниц Кэширование Web-страниц Эта статья ориентирована не на спецов, так что определения некоторых понятий точностью ни изобилуют, главное чтобы было понятно.. Прошу сильно не ругать, так как пишу подобное впервые - за здоровую критику буду благодарен.. Недавно при написании сайта я столкнулся с проблемой кэширования. Долго искал информацию на эту тему, то что нарыл укладывается в один стандартный алгоритм. Примерная его суть: Получаем URL страницы Преобразуем в имя файла Тут варианты: либо все куда то записать(по-типу БД) либо же сохраняем в папку так Как только обращаются к странице проверяем ее на срок истечения действительности кэша и выводим Очевидные проблемы: Скрипт регистрации к примеру выдает специфичные данные для каждого человека(хотя строка может быть и одинаковой), так что кэшировать надо бы выборочно... Наклевывается вопрос: а если POST или например COOKIE? Тогда URL может быть одинаковым для разных страниц! Из-за всего этого пришлось изобретать свой велосипед(хотя на новаторство идеи не претендую, вряд-ли кто-то до этого не догадывался): Используем Базу Данных Будем хранить к примеру такую таблицу(для простого случая подходит): По сути кажется что таблица будет весить неимоверно много, но вот тут-то и надо встряхнуть тем серым веществом, которое мы по наивности называем мозгом. Для большинства страниц в базе данных cache_time окажется одинаковым, исключениями будут страницы регистрации, новостные ленты(и то не факт) и.т.п... Зачем хранить там все страницы? В самом скрипте заведем константу, и будем всегда пользоваться ее значением, но перед этим желательно проверять, а нету ли чего-нибудь особенного для этой страницы в базе данных. В итоге 90% страниц будут использовать значение константы, а для 10% можно и пожертвовать драгоценным местом в БД. Выборочное кэширование Первый вопрос: у вас на сайте есть что-то наподобие этого? Если нет - кэшируйте все на здоровье, а если да, то что? А ответ прост, нужно всего лишь не кэшировать ту информацию, которая изменятся от пользователя к пользователю. Т.е. вместо всей страницы, мы сохраним в кэш только контент, а генерация остального, очень часто, не столь долгое дело, и заморачиваться со вставкой данных в кэш будет накладней, чем просто генерировать эти элементы страницы каждый раз. Вывод: Иногда удобней кэшировать только часть страницы. POST и COOKIE По сути бесполезность той схемы которую я описал вначале я впервые ощутил столкнувшись с HTTP POST, мое решение не будет изобиловать оригинальностью, но.. По-моему проще всего завести функцию для генерации имени файла в зависимости от уникальных параметров переданных этой функции. Т.е. не будем опираться только на URL, лучше возьмем за основу путь к скрипту и его уникальные параметры. Вот наверно и все что я хотел написать.. Успехов в ваших разработках! mixk0rshun P.S.: Кэширование вряд ли будет иметь много смысла для мелкого сайта, но для крупных разработок оно сильно экономит процессорное время, для маленьких проектов - скорее только затормозит... И напоследок некоторый совет: проще всего использовать в папке кэша каталоги, т.е: Страница: http://example.com/forum/index.php?id=3 Кэш: cache/forum/index.php/id=3
Закешированные страницы в БД, это тоже самое, что юзать железные шаблона html Да и занимать будет целую торбу места. Так что это не оптимально. Если контент тяжёлый (флешка, видос), то используются предзагрузка. В общем я не видел ниодного обычного сайта с кешированием. Если где-то используется - приведи сайт (кроме гугла, ну и темболее он кешурет не для отображения своих страниц ).
А при чём тут cookie? Проблемы возникают из-за того, что это "клиентский" подход к кешированию. Примерно такое уже реализовано в браузере, остается лишь посылать правильные заголовки. Метод post же не является ни безопасным, ни идемпотентным. Кеширование на сервере должно происходить на другом уровне, чтобы сохранять результаты работы шаблонизатора, статистику, частые выборки из бд, и т.д. Напротив, кеширование используется почти везде, поскольку это простой и удобный способ повысить производительность.
Производительность в основном страдает у динамических данных, а не у статических, поэтому кеширование тут не сильо помогает