|
Читайте также: |
Далее я хотел бы показать одну хитрость дающую нам понимание того, что же такое блочный элемент.
Блочным элементом обычно считаются теги <div> и <p>. Остальные по умолчанию отображаются несколько по другому.
Для того чтобы перевести любой элемент в блочный вид достаточно прописать ему свойство «display:block;». Также любой блочный элемент можно вписать в текст задав ему свойство «display:inline;».
30. Позиционирование элементов: суть, свойства для позиционирования. Абсолютное позиционирование: позиционирование блоков и позиционирование текста. Теги. Примеры.
Позиционированием называется положение элемента в системе координат. Различают четыре типа позиционирования: нормальное, абсолютное, фиксированное и относительное. В зависимости от типа, который устанавливается через свойствоposition, изменяется и система координат.
Благодаря комбинации свойств position, left, top, right и bottom элемент можно накладывать один на другой, выводить в точке с определёнными координатами, фиксировать в указанном месте, определить положение одного элемента относительно другого и др. Подобно другим свойствам CSS управление позиционированием доступно через скрипты. Таким образом, можно динамически изменять положение элементов без перезагрузки страницы, создавая анимацию и различные эффекты.
При абсолютном позиционировании элемент не существует в потоке документа и его положение задаётся относительно краёв браузера. Задать этот тип можно через значение absolute свойства position. Координаты указываются относительно краёв окна браузера, называемого «видимой областью» (рис. 3.42).
Для режима характерны следующие особенности.
· Ширина слоя, если она не задана явно, равна ширине контента плюс значения полей, границ и отступов.
· Слой не меняет своё исходное положение, если у него нет свойств right, left, top и bottom.
· Свойства left и top имеют более высокий приоритет по сравнению с right и bottom. Если left и right противоречат друг другу, то значение right игнорируется. То же самое касается и bottom.
· Если left задать отрицательное значение, то слой уйдёт за левый край браузера, полосы прокрутки при этом не возникнет. Это один из способов спрятать элемент от просмотра. То же относится и к свойству top, только слой уйдёт за верхний край.
· Если left задать значение больше ширины видимой области или указать right с отрицательным значением, появится горизонтальная полоса прокрутки. Подобное правило работает и с top, только речь пойдёт о вертикальной полосе прокрутки.
· Одновременно указанные свойства left и right формируют ширину слоя, но только если width не указано. Стоит добавить свойство width и значение right будет проигнорировано. Аналогично произойдёт и с высотой слоя, только уже участвуют свойства top, bottom и height.
· Элемент с абсолютным позиционированием перемещается вместе с документом при его прокрутке.
Свойство position со значением absolute можно использовать для создания эффекта фреймов. Кроме абсолютного позиционирования для элементов необходимо назначить свойство overflow со значением auto. Тогда при превышении контентом высоты видимой области появится полоса прокрутки. Высота и ширина «фреймов» формируется автоматически путём одновременного использования свойств left, right для ширины и top, bottom для высоты (пример 3.31).
31. Относительное позиционирование: позиционирование блоков и позиционирование текста. Теги. Примеры.
Если задать значение relative свойства position, то положение элемента устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения. Положительное значение left определяет сдвиг вправо от левой границы элемента, отрицательное — сдвиг влево. Положительное значение top задаёт сдвиг элемента вниз (рис. 3.46), отрицательное — сдвиг вверх.
Свойства bottom и right производят обратный эффект. При положительном значении right сдвигает элемент влево от его правого края, при отрицательном — сдвигает вправо (рис. 3.47). При положительном значении bottom элемент поднимается вверх, при отрицательном опускается вниз.
Для относительного позиционирования характерны следующие особенности.
· Этот тип позиционирования не применим к элементам таблицы вроде ячеек, строк, колонок и др.
· При смещении элемента относительно исходного положения, место, которое занимал элемент, остаётся пустым и не заполняется ниже или вышележащими элементами.
32. Фиксированные блоки. Статистическое позиционирование: свойства. Пример одного и двух плавающих блоков.
Фиксированное положение слоя задаётся значением fixed свойства position и по своему действию похоже на абсолютное позиционирование. Но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы. Ещё одна разница от absolute заключается в том, что при выходе фиксированного слоя за пределы видимой области справа или снизу от неё, не возникает полос прокрутки.
Применяется такой тип позиционирования для создания меню, вкладок, заголовков, в общем, любых элементов, которые должны быть закреплены на странице и всегда видны посетителю.
Плавающие блоки чаще всего используются при блочной верстке сайта. Большинство современных сайтов как раз и используют данный тип верстки. Для задания положения плавающего блока в CSS используется свойство float
Свойство float
Это свойство определяет по какой стороне будет выровнен блок и будет ли он плавающим. Оно имеет следующие значения:
· right - выравнивает блок по правому краю, а остальные элементы будут обтекать его с левой стороны, начиная с самого верха;
· left - выравнивает блок по левому краю, а остальные элементы будут обтекать его с правой стороны, начиная с самого верха;
· none - это значение стоит по умолчанию, блок остаётся на месте;
· inherit - наследует значение у родительского блока.
Говоря о плавающих блоках следует затронуть такое свойство, как clear
Свойство clear
Это свойство устанавливает с какой стороны будет запрещено обтекание блока другими элементами. Очень часто это свойство используется для задания подвала страницы. Вот основные значения, которые может принимать данное свойство:
· right - отменяет обтекание структурного блока с правой стороны;
· left - вотменяет обтекание структурного блока с левой стороны;
· both - отменяет обтекание блока с двух сторон;
· none - отменяет действие данного свойства;
· inherit - наследует значение у родителя.
33. Фильтры: определение, назначение, формат. Статические фильтры (синтаксис, названия фильтра: Alpha, Blur, Chroma, DropShadow, FlipH, FlipV, Glow, Invert, Gray, Light, Mask, Shadow, Xray, Wave, BasicImage). Назначение. Примеры.
Устанавливает фильтр (визуальный эффект) или их сочетание для элемента. К фильтрам относится изменение прозрачности, добавление тени, трансформация и др.
Синтаксис
filter: progid:DXImageTransform.Microsoft.Фильтр(свойства)Фильтры
Alpha Настраивает прозрачность объекта.
Blur Размывает содержимое.
BasicImage Устанавливает параметры цвета, поворота изображения или прозрачности.
Chroma Показывает определенные цвета прозрачными.
DropShadow Отображает тень.
flipH Фильтр fliph переворачивает объект горизонтально.
flipv Фильтр flipv переворачивает объект вертикально.
Glow Добавляет свечение вокруг краев.
gray Фильтр gray удаляет цветовую гамму объекта и отображает его в серых тонах.
invert Фильтр invert меняет оттенок, насыщение и яркость объекта на противоположные.
Light Создает эффект лучей света.
mask Фильтр mask отображает текст так, как будто он выделен мышью.
Shadow Добавляет тень.
xray Фильтр xray отображает объект в черно-белом варианте, как на рентгеновском снимке
Wave Вносит волнообразные искажения.
34. Фильтры: определение, назначение. Динамические фильтры (для преобразования изображений фильтры: revealtrns и blendtrans). Синтаксис, параметры, типы переходов и номера превращений. Примеры.
С созданием Internet Explorer 4.0, наряду с использованием обычных, традиционных свойств HTML, появилась возможность редактирования изображения с помощью графических фильтров.
Непосредственно графический фильтр - это программа или алгоритм, выполняющий какое-то преобразование изображения. Делается это только с использованием принципов кодирования самой картинки, а не того, что на ней нарисовано, например некоторый фильтр просто берет и меняет цвета всех пикселей изображения на противоположные, либо переворачивает его по вертикали и так далее.
Графические фильтры бывают двух видов: статические и динамические. Любой статический графический фильтр выполняет мгновенное преобразование элемента Web -страницы, к которому применяется. Динамические фильтры, позволяют отображать не какое-то преобразование, а целый процесс, создавая эффект анимации. Такие фильтры иногда называют переходами.
Фильтры применяются только к тем элементам, которые могут определить прямоугольный блок при отображении в окне браузера и не являются окнами. В следующей таблице перечислены элементы, к которым можно применить фильтры.
| Таблица 1. Элементы, к которым применяются фильтры | |
| Элемент | Фильтр применяется… |
| BODY | … всегда. |
| BUTTON | … всегда. |
| DIV | … если заданы ширина (width), высота (height) или элемент абсолютно позиционирован. |
| IMG | … всегда. |
| INPUT | … всегда. |
| MARQUEE | … всегда. |
| SPAN | … если заданы ширина (width), высота (height) или элемент абсолютно позиционирован. |
| TABLE | … всегда. |
| TD | … всегда. |
| TEXTAREA | … всегда. |
| TH | … всегда. |
Чтобы применить фильтр к элементу достаточно задать значения свойства filter.
filter: имя_фильтра([параметры]);
Некоторые фильтры требуют задания несколько параметров, а у некоторых они вообще отсутствуют, но круглые скобки должны присутствовать обязательно. Несколько фильтров, примененных к одному элементу, задаются в виде списка с пробелом в качестве разделителя:
<IMG SRC="1.gif" STYLE="filter: blur(strength=50) fliph()">
Динамические фильтры или переходы используют в Web для создания эффекта анимации. По сути, это обычное трансформирование одного изображения в другое различными способами.
Прежде чем рассматривать конкретные переходы, перечислим некоторые свойства-параметры, которые присущи всем динамическим фильтрам:
· Duration - определяет интервал времени, за который совершается переход. Его значением является действительное число с плавающей точкой в формате секунды.миллисекунды. В сценариях его можно изменять, если только не началось выполнение перехода;
· Status - доступно только из сценария и возвращает состояние выполнения преобразования: 0 - если преобразование было остановлено; 1 - если оно было применено; 2 - если преобразование выполняется;
· Enabled - разрешение применения фильтра. true (по умолчанию) - разрешает применить фильтр; false - не разрешает;
· Percent - задает процент выполнения преобразования. Может принимать значения от 0 (преобразование еще не началось) до 100 (преобразование закончено).
Ко всем переходам можно также применять следующие методы:
· Apply() - замораживает элемент страницы, после чего вы можете изменять параметры элемента. Для того чтобы запустить преобразование, используйте метод Play();
· Play(<продолжительность>) - запускает преобразование. Необязательный параметр продолжительность определяет время в секундах, в течение которого выполняется этот метод;
· Stop() - немедленно останавливает преобразование.
Фильтр blendTrans задает постепенное исчезновение или появление изображения, увеличивая или уменьшая степень его прозрачности. Следующий пример демонстрирует постепенное исчезновение одной картинки и появления другой.
· <HTML>
· <HEAD>
· <TITLE>Фильтр blendTrans</TITLE>
· <SCRIPT LANGUAGE="JavaScript">
· <!--
· function f()
· {
· img.filters.blendTrans.Apply();
· img.src="ris.bmp";
· img.filters.blendTrans.Play();
· }
· //-->
· </SCRIPT>
· </HEAD>
· <BODY>
· <IMG ID="img" SRC="handshak.bmp" STYLE="filter:blendTrans(Duration=8);"
· ONCLICK="f()">
· </BODY>
· </HTML>
· Приведенный пример в действии можно увидеть на рисунке 1.
по рисунку)
В этом примере к изображению img применяется переход blendTrans, который постепенно в течение 8 секунд делает прозрачным изображение файла handshak.bmp, а вместо него отображается содержимое файла ris.bmp. Инициализация перехода осуществляется щелчком мыши на изображении.
В процедуре обработки щелчка мыши вызывается метод Apply(), после которого можно устанавливать новые значения параметров объекта img. В примере задается новый файл изображения.
Еще раз напомним, что три метода переходов предназначены для управления выполнением перехода из сценария. Метод Apply() "замораживает" видимое в данный момент изображение элемента и позволяет изменить значения параметров перехода и самого элемента, не требуя немедленного применения перехода. Чтобы выполнить переход после переустановки значений необходимых параметров, следует использовать метод Play(). Остановить выполнение перехода для элемента в любой момент времени можно методом Stop().
Фильтр revealTrans позволяет, в отличие от перехода blendTrans, выполнить переходы из одного видимого состояния в другое разнообразными способами. Его свойство Transition может иметь целое значение, которое определяет тип перехода. Допустимые значения представлены в таблице 1.
| Таблица 1. Значения свойства Transition | |
| Переход | Отображение объекта |
| Сжимающийся прямоугольник | |
| Расширяющийся прямоугольник | |
| Сжимающийся круг | |
| Расширяющийся круг | |
| Разворачивание снизу вверх | |
| Разворачивание сверху вниз | |
| Разворачивание слева направо | |
| Разворачивание справа налево | |
| Вертикальные жалюзи | |
| Горизонтальные жалюзи | |
| В шахматном порядке поперек | |
| В шахматном порядке вниз | |
| Пиксели отображаются в случайном порядке | |
| Одновременно слева и справа к центру | |
| Одновременно от центра налево и направо | |
| Одновременно снизу и сверху к центру | |
| Одновременно от центра вверх и вниз | |
| От правого верхнего угла к левому нижнему | |
| От правого нижнего угла к левому верхнему | |
| От левого верхнего угла к правому нижнему | |
| От левого нижнего угла к правому верхнему | |
| Случайными горизонтальными линиями | |
| Случайными вертикальными линиями | |
| Отображение пикселей случайным образом |
На рисунке 1 показан результат применения перехода revealTrans со значением параметра Transition=1 вместо перехода blendTrans в примере предыдущего шага. В этом случае новый рисунок прорисовывается в течение 8 секунд расширяющимся из центра прямоугольником.
35. Создания динамических эффектов с элементами языка JavaScript для обработки различных событий: изменение фона таблицы. Пример.
Чтобы плавно сменить каждому элементу фон или цвет напишим небольшой скрипт:
| <script type="text/javascript"> | |
| //для текста |
| var fef_text=new fade(); | |
| fef_text.ini('#0000ff','#ff0000',25,30,'text','color'); |
| //для блока с фоном | |
| var fef_block=new fade(); |
| fef_block.ini('#ff0000','#00ff00',25,30,'block','backgroundColor'); | |
| </script> |
Посмотреть пример
Теперь давайте разберемся что мы вообще делаем и какие параметры передаем в функцию ini()
Сразу скажу что передать параметров этой функции можно больше, но об этом позднее
И так пишу общий вид функции
| ini('начальный цвет','конечный цвет',число переходов,время таймера,'id элемента','css параметр',функция по завершению работы скрипта); |
'#ff0000' - начальный цвет
'#00ff00'-конечный цвет
25 - число переходов или кадров, это число не должно быть большим и по любому должно быть меньше 100
30 - время таймера
'block' - id элемента
'backgroundColor' - свойство стиля элемента которому будет присваиваться значение цвета
36. Создания динамических эффектов с элементами языка JavaScript для обработки различных событий: изменение стиля текста. Пример.
Динамические гиперссылки в CSS с помощью псевдоклассов ссылок. Пример.
Псевдоклассы - позволяют определить класс, которого в действительности нет в исходном коде документа, но в зависимости от действий пользователя и состояния элемента может появиться.
Например, элемент а (гиперсылка) может быть непосещенной, посещенной и активной (в момент наведения на неё указателя мыши). Для каждого из состояний этой гиперссылки CSS определяет свой псевдокласс.
Псевдоклассы выглядят следующим образом:
:link
Начинаются с двоеточия, за которым следует имя псевдокласса.
Псевдоклассы гиперссылок.
Псевдокласс:link.
В переводе с анл. - "ссылка" - обозначает еще не посещенную пользователем гиперссылку.
a:link{ color:blue; }
Псевдокласс:visited.
В переводе с англ. - "посетил" – обозначает уже посещенную ранее гиперссылку.
a:visited{ color:purple; }
Динамические псевдоклассы.
Этот тип псевдоклассов образуется в результате каких либо действий пользователя.
Псевдокласс:hover.
С помощью псевдокласса :hover (в переводе с англ. - "зависать"), можно обратиться к любому элементу, над которым размещен указатель некоторого устройства.
Например элемент a, на который пользователь навел указатель мыши, но еще не активировал (не кликнул на нем).
a:hover{ color:blue; font-size:1.6em; }
* Псевдокласс :hover применим к любым элементам. Но IE6 поддерживает его только для гиперссылок (элементов а).
Псевдокласс:active.
В переводе с англ. - "активный" – определяет любой элемент в момент его активации. Например, гиперссылка по которой щелкнул пользователь (в момент удержания кнопки мыши нажатой).
a:active{ color:red; }
Синтаксис
<style type="text/css">.pseudo-classes a:link{color:blue;}.pseudo-classes a:visited{color:purple;}.pseudo-classes a:hover{color:blue; background:yellow;}.pseudo-classes a:active{color:red; background:yellow;<div class="pseudo-classes"><a href="/index.php/spravochnik-css/psevdoklassy-111.html#link">
38. Создание динамических эффектов: изменение цвета полосы прокрутки, изменение стиля курсора. Пример.
Оформление полосы прокрутки у них значительно отличается от классической схемы, т.е. от традиционного серого цвета. Цвет полосы меняется в соответствии с общей цветовой гаммой сайта. Рассмотрим свойства, позволяющие изменить вид полосы прокрутки (рисунок), — каждое из них отвечает за цвет отдельного элемента.
§ scrollbar-3d-light-color - цвет блика ползунка, который располагается на левой и верхней сторонах бегунка и стрелок (по умолчанию белый).
§ scrollbar-arrow-color - цвет стрелок прокрутки (по умолчанию черный).
§ scrollbar-base-color - основной цвет самой полосы (по умолчанию серый).
§ scrollbar-dark-shadow-color - цвет для тени, которая располагается на правой и нижней сторонах бегунка и стрелок (по умолчанию черный).
§ scrollbar-face-color - основной цвет для стрелок и бегунка (по умолчанию серый).
§ scrollbar-highlight-color - цвет блика на полосе прокрутки.
§ scrollbar-shadow-color - цвет тени на полосе прокрутки.
§ scrollbar-track-color - цвет фона полосы прокрутки.
Все указанные свойства не относятся к официальной спецификации CSS, поэтому не поддерживаются никакими другими браузерами, которые их просто игнорируют. Однако это не мешает их использовать, - просто в остальных браузерах полоса прокрутки будет выглядеть обычно.
Попробуйте задать такие цвета или придумайте свои собственные. Можно попробовать для начала задать очень яркие цвета, чтобы сразу увидеть изменения, а затем уже подобрать более подходящие к вашему документу оттенки. В дальнейших разделах рассмотрим еще несколько хитростей CSS, которые могут пригодиться в работе.
CSS2 позволяет изменять значок курсора, что намного упрощает создание веб-приложений, функциональность которых аналогична настольным приложениям операционной системы. Например, над ссылкой на файлы справки курсор мог бы превратиться в значок «справка», например в вопросительный знак. Это делается с помощью свойства cursor.
Если установлено значение по умолчанию, auto, то агент пользователя должен сам определить значок курсора, наиболее подходящий для текущего содержимого. Это не то же самое, что значение default, выбирающее системный курсор, применяемый по умолчанию. Стандартный курсор – это, как правило, стрелка, но не обязательно, все зависит от текущих настроек рабочей среды.
39. Создание динамических эффектов: создание ссылок-кнопок, подсветка кнопок и текста. Пример.
С помощью таблиц стилей можно превратить обычные ссылки в кнопки, т.е. они будут простыми текстовыми ссылками, а отображаться в браузере будут как кнопки.
Весь фокус заключается в том, что для ссылок в обычном состоянии задается стиль, имитирующий выпуклую кнопку. Определяются фон, рамка и цвет текста. Эффект " выпуклости " достигается подбором цвета границ. Когда кнопка выпуклая, ее верхняя и левая границы должны быть светлее по тону, чем нижняя и правая, когда кнопка выбирается (на нее наводится курсор), цвета границ меняются и кажется, что происходит "нажатие" кнопки. Для цвета границ лучше всего оттенки серого, они по тону подходят к любому цвету, какой бы вы ни указали для кнопки. При этом ссылка остается ссылкой, а не кнопкой.
Проиллюстрируем сказанное на примере. Запишем стиль для ссылки в обычном состоянии:
| A { background:#0099FF; border-top: 1px solid #D5D5D5; border-left: 1px solid #D5D5D5; border-bottom: 1px solid #4E4E4E; border-right: 1px solid #4E4E4E; color:#FFFF99; font: 0.8em Tahoma, sans-serif; text-decoration:none; padding: 2px 5px; } |
А теперь для ссылки во время наведения на нее курсора мыши меняем местами цвета границ:
| A: hover { border-top: 1px solid #4E4E4E; border-left: 1px solid #4E4E4E; border-bottom: 1px solid #D5D5D5; border-right: 1px solid #D5D5D5; } |
Запишем код нескольких ссылок, чтобы посмотреть на результат:
| <A HREF="#">Главная</А> <A HREF="#">0 компании</А> <A HREF="#">Продукция</А> <A HREF="#">Галерея</А> |
40. Анимация с помощью CSS: синтаксис, свойства и их описание. Пример.
С приходом поддержки в современных браузерах css 3-й версии, у веб мастеров появилось мощное средство реализации простейшей анимации на страницах.
К такой анимации можно отнести: Плавное изменение цвета, размера, положения и прозрачности элементов. И всё это возможно благодаря свойству transition.
Описание
Универсальное свойство, которое позволяет одновременно задать значения transition-property, transition-duration,transition-timing-function и transition-delay. Устанавливает эффект перехода между двумя состояниями элемента, они могут быть определены с помощью псевдоэлемента:hover или:active, а также динамически через JavaScript.
Синтаксис
transition: <переход> [, <переход> ]*
Здесь:
<переход> = [ none | <transition-property> ] || <transition-duration> ||
<transition-timing-function> || <transition-delay>
Значения
none
Отменяет эффект перехода.
<transition-duration>
Описание
Задаёт время в секундах или миллисекундах, сколько должна длиться анимация перехода до её завершения. По умолчанию значение равно 0s, это означает, что никакой анимации нет, переход происходит мгновенно.
Можно указать несколько значений, перечисляя их через запятую. Каждое значение применяется к свойствам, заданным через transition-property.
Синтаксис
transition-duration: <время> [,<время>]*
<transition-timing-function>
Описание
Устанавливает, насколько быстро должно изменяться значение стилевого свойство для которого применяется эффект перехода.
transition-timing-function представляет собой математическую функцию, показывающую, как быстро по времени меняется указанное через transition-property значение свойства. Начальная точка имеет координаты 0.0, 0.0, конечная — 1.0, 1.0, при этом функция по оси ординат может превышать эти значения в большую или меньшую сторону (рис. 1).
<transition-delay>
Описание
Свойство transition-delay устанавливает время ожидания перед запуском эффекта перехода. Значение 0s или 0ms запускает анимацию сразу же. Отрицательное значение также включает анимацию без задержек, но может привести к изменению вида начала анимации.
Допустимо указывать несколько значений, перечисляя их через запятую. Каждое значение будет применяться к свойству, заданному в параметрах transition-property.
Синтаксис
transition-delay: <время> [,<время>]*
Перечень типовых задач третьего вопроса экзаменационного вопроса:
1) Создание WEB-страницы с помощью языка HTML (форматирование документа, создание таблицы, списков, гиперссылок, бегущей строки, вставка изображения, аудиофайла, видеофайла).
2) Создание WEB-страницы с помощью языка HTML и CSS.
Дата добавления: 2015-10-26; просмотров: 120 | Нарушение авторских прав
| <== предыдущая страница | | | следующая страница ==> |
| Пример 3.5. Сочетание разных методов | | | Оценка результатов |