White cat - Справочник по CSS
Скачивание начинается... Если скачивание не началось автоматически, пожалуйста нажмите на эту ссылку.
Жалоба
Напишите нам, и мы в срочном порядке примем меры.
Описание книги "Справочник по CSS"
Описание и краткое содержание "Справочник по CSS" читать бесплатно онлайн.
Вниманию читателей предлагается справочник по CSS.
Справочник предназначается для людей, уже освоивших азы работы с HTML и CSS.
Справочник создан на основе информации, предоставленной на сайте «Справочник Web-языков» www.spravkaweb.ru.
Пример:
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>
Подписывайтесь на наши страницы в социальных сетях.
Будьте в курсе последних книжных новинок, комментируйте, обсуждайте. Мы ждём Вас!
Похожие книги на "Справочник по CSS"
Книги похожие на "Справочник по CSS" читать онлайн или скачать бесплатно полные версии.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Отзывы о "White cat - Справочник по CSS"
Отзывы читателей о книге "Справочник по CSS", комментарии и мнения людей о произведении.