White cat - Справочник по CSS
Пример:
st:first-line {text-decoration: underline;}
По умолчанию в IE первые строки абзацев никак не выделяются.
Поддерживается IE начиная с 5.0
Правила
Правила используются в таблицах стилей для особых нужд.
charset
Задает текстовую кодировку для внешней таблицы стилей.
@charset {Кодировка};
Пример:
@charset "windows-1251";
Может использоваться только во внешних таблицах стилей; должна быть первой строкой в файле.
Поддерживается IE начиная с 4.0
font-face
Задает файл загружаемого шрифта для использования на Web-странице.
@font-face {Определение загружаемого шрифта};
Определение загружаемого шрифта имеет следующий формат:
font-family: {Имя шрифта}
src: url({Интернет-адрес файла шрифта}) }
Пример:
@font-face {font-family: comic;src: url(http://www.youodmain.ru/comic_font_file.eot); }
Поддерживается IE начиная с 4.0
import
Импортирует внешную таблицу стилей.
@import url("{Интернет-адрес файла таблицы стилей}");
Пример:
@import url("http://www.spravkaweb.ru/style_file.css");
Поддерживается IE начиная с 4.0
page
Используется при задании размеров, ориентаций и полей печатной страницы в таблице стилей.
@page {Селектор страницы} {Правила}
Селектор страницы может принимать одно из трех значений:
Пример:
@page :first {margin-top: 2cm; margin-bottom: 2cm;}
Здесь мы задали для первой печатной страницы поля по два сантиметра сверху и снизу.
Поддерживается IE начиная с 5.5
important
Используется для задания неперекрываемых установок стиля.
{Установки слиля}!important
Пример:
<STYLE>P { color: red !important} </STYLE> <P style="color: green">Этот текст останется красным.</P>
Здесь установки, сделанные для текстового абзаца <P>, не будут перекрыты в дальнейшем.
Поддерживается IE начиная с 4.0
Фильтры в Internet Explorer
Пару вводных слов
Надо отметить, что фильтры отображаются только в браузерах Internet Explorer не ниже 4-ой версии.
Синтаксис:
"filter:имя_фильтра(параметр1=значение, параметр2=значение,...)"
Некоторые фильтры могут быть без параметров.
Фильтры деляться на статические и динамические. Статические фильтры меняют вид объекта, а сам он остается неподвижным. Динамические фильтры позволяют менять объект с задаваемой скоростью переключения кадров.
Далее будут мною описаны 18 статических и 19 динамических фильтра.
Фильтры применяют через параметр STYLE:
Возьмём картинку (img.gif) и применим к ней фильтр прозрачности:
<IMG SRC=img.gif STYLE="filter:alpha(opacity=50)">
- имеем ту же картинку, но полупрозрачную.
Фильтры поддерживаются языками сценариев. Доступ к фильтрам организуется через объектное свойство filters и атрибут ID графического элемента.
JavaScript:
<SCRIPT language="JavaScript">function Blur(inc){Pic.filters.blur.strength+=inc;}</script>...<IMG ID=Pic SRC=img.gifSTYLE="filter:blur(strength=10)"OnMouseOver="javascript:Blur(20)"OnMouseOut="javascript:Blur(-20)">
Здесь функция Blur() обращается к фильтру blur объекта Pic и изменяет его параметр strength при наведении курсора мышки.
VBScript:
<SCRIPT language="VBScript"> Pic.style.filter = "flipv" </script> ... <IMG ID=Pic SRC=img.gif>
Здесь используется фильтр flip, который переворачивает изображение вокруг вертикальной оси.
Статические фильтры
Alpha
Задает уровень прозрачности элемента страницы.
При настройке этого фильтра можно использовать следующие параметры:
AlphaImageLoaded
Отображает графическое изображение внутри элемента страницы между его фоном и содержимым.
При настройке этого фильтра можно использовать следующие параметры:
BasicImage
Делает элемент страницы черно-белым, как бы просвеченным рентгеновскими лучами, вращает его.
Отдельно можно задавать угол поворота, стерень "просвеченности".
При настройке этого фильтра можно использовать следующие параметры:
Blur
Делает элемент страницы размытым.
При настройке этого фильтра можно использовать следующие параметры:
Chroma
Делает прозрачным отдельный цвет элемента.
При настройке этого фильтра можно использовать следующие параметры:
Compositor
Объеденяет два цвета элемента страницы и выводит что получилось.
При настройке этого фильтра можно использовать следующие параметры:
DropShadow
Отбрасывает тень у элемента страницы, которая отображается отдельно от самого элемента.
При настройке этого фильтра можно использовать следующие параметры:
Emboss
Делает элемент страницы выпуклым.
При настройке этого фильтра можно использовать следующие параметры:
Engrave
Делает элемент страницы вдавленным.
При настройке этого фильтра можно использовать следующие параметры:
Glow
Создает эффект "тления" элемента страницы.
При настройке этого фильтра можно использовать следующие параметры:
Gradient
Эффект градиентной закраски элемента страницы.
При настройке этого фильтра можно использовать следующие параметры:
Light
Создет эффект освещенности элемента страницы.
Методы, применяемые к этому фильтру:
MaskFilter
Отображает прозрачный цвет элемента страницы заданным цветом.
При настройке этого фильтра можно использовать следующие параметры:
Matrix
Изменяет элемент страницы путем изменения размеров, поворотов или инвертируя его при помощи матричных преобразований.
При настройке этого фильтра можно использовать следующие параметры:
"bilinear" (по умолчанию)
MotiobBlur
Создает эффект быстрого движения (размытости).
При настройке этого фильтра можно использовать следующие параметры:
Pixelate
Отображает элемент страницы отдельными пикселами.
При настройке этого фильтра можно использовать следующие параметры:
Shadow
Создает эффект отбрасывания тени у элемента страницы.
При настройке этого фильтра можно использовать следующие параметры:
Wave
Создает волнистое искажение элемента страницы.
При настройке этого фильтра можно использовать следующие параметры:
Динамические фильтры
Barn()
Создает эффект "открывающейся и закрывающейся двери".
Здесь sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.
Атрибуты
Свойства
Задает или возвращает признак разрешения применения фильтра.
Задает или возвращает направление движения: от центра к границам или наоборот.
Задает или возвращает направление преобразования: по вертикали или по горизонтали.
Задает процент выполнения преобразования.
Возвращает состояние выполнения преобразования.
Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.
Пример 1:
<SCRIPT>var bToggle = 0;function fnToggle() { oDiv.filters[0].Apply(); // После того, как применяется метод Apply к выбранному объекту// фильтр не запустится пока не будет вызван метод Play if (bToggle) { bToggle = 0; oDiv.style.backgroundColor="gold"; } else { bToggle = 1; oDiv.style.backgroundColor="blue";} oDiv.filters[0].Play();}</SCRIPT>
<BUTTON onclick="fnToggle()">Toggle Transition</BUTTON>
<BR>
<BR>
<DIV ID="oDiv" STYLE="height:250px; width:250px; background-color: gold; filter:progid:DXImageTransform.Microsoft.Barn( duration=2, motion=out, orientation=vertical);"></DIV>
Пример 2:
<!-- К этому элементу применяется фильтр. -->
<DIV ID="oTransContainer" STYLE="position:absolute; top: 0px; left: 0px; width: 300px; height:300px; filter:progid:DXImageTransform.Microsoft.Barn(orientation=horizontal, motion=out) ">
<!-- Это первое содержимое, которое будет показано. -->
<DIV ID="oDIV1" STYLE="position:absolute; top:50px; left:10px; width:240px; height:160px; background:gold"> This is DIV #1 </DIV>
<!-- Это содержимое, которое будет показано после применения фильтра. -->
<DIV ID="oDIV2" STYLE="visibility:hidden; position:absolute; top:50px; left:10px; width:240px; height:160px; background: yellowgreen; ">
<BR> This is DIV #2 </DIV> </DIV>
<BUTTON onclick="fnToggle()">Toggle Transition</BUTTON>
<SCRIPT>var bTranState = 0;function fnToggle() { oTransContainer.filters[0].Apply(); if (bTranState=="0") { bTranState = 1; oDIV2.style.visibility="visible"; oDIV1.style.visibility="hidden"; } else { bTranState = 0; oDIV2.style.visibility="hidden"; oDIV1.style.visibility="visible";} oTransContainer.filters[0].Play();}</SCRIPT>
