Тема. Работа с графикой, звуком и видеоклипами.. 23
Лабораторная работа №6. 24
Тема. Ссылки.. 24
Лабораторная работа №7. 25
Тема. Изображения-карты.. 25
Лабораторная работа №8. 25
Тема. Формы.. 25
Список литературы.. 25
Приложение А. Цветовая модель RGB.. 27
Приложение B. Свойства таблиц стилей.. 28
СВОЙСТВА ШРИФТА.. 28
ЦВЕТ ЭЛЕМЕНТА И ЦВЕТ ФОНА.. 29
СВОЙСТВА ГРАНИЦ.. 30
СВОЙСТВА ТЕКСТА.. 31
СВОЙСТВА СПИСКОВ.. 31
СВОЙСТВА ТАБЛИЦ.. 31
СВОЙСТВА МУЛЬТИМЕДИА.. 32
СВОЙСТВА ИНТЕРФЕЙСА.. 32
ЕДИНИЦЫ ИЗМЕРЕНИЯ.. 32
Приложение А. Цветовая модель RGB
Любой цвет в модели RGB представляется как комбинация красного (Red), зеленого (Green) и синего (Blue) цветов, взятых в определенных пропорциях. Доля каждой цветовой составляющей определяется интенсивностью цвета и выражается двухразрядным шестнадцатеричным числом стоящим на определенном месте. В десятичном исчислении эти числа соответствуют диапазону от 0 до 255. Таким образом можно воспроизвести любой из 16 777 216 оттенков, это соответствует режиму монитора True Color (24 разрядное двоичное кодирование цвета).
# 00 00 FF
Пример задания цвета:
Color=”yellow”
Color=#0000ff
P {Color: rgb(255,40,40)}
Приложение B. Свойства таблиц стилей
СВОЙСТВА ШРИФТА
font-family
Используется для указания шрифта или шрифтового семейства, которым будет отображаться элемент.
Пример:
P {font-family: Times New Roman, sans-serif;}
font-weight
Определяет степень жирности шрифта. Значения:
normal – обычный (400);
lighter – менее жирный;
bolder – более жирный;
bold – полужирный (600 или 700);
также допускаются числовые значения от 100 до 900 с шагом 100.
Пример:
B {font-weight: bolder;}
B {font-weigth: 400;}
font-size
Устанавливает размер шрифта. Параметр может указываться как в относительной (проценты), так и абсолютной величине (пункты, пикселы, сантиметры) Пример:
H1 {font-size: 200%;} H2 {font-size: 150px;} H3 {font-size: 400pt;}
font-style
Определяет стиль шрифта. Значения:
normal – обычный;
italic, oblique – курсив.
Пример:
H1 {font-style: italic;}
font-variant
Задание стиля шрифта. Значения:
normal – обычный;
small-caps –малые прописные.
Пример:
H2, P { font-variant: small-caps}
font
Выбор определенного шрифта, применительно к конкретным задачам. Вид шрифта определяется настройками программы. В качестве значений могут использоваться величины свойств font-style, font-variant, font-weight, font-size, font-family, line-height. Другие значения:
caption – шрифт для элементов управления (полужирный);
icon– шрифт для пиктограмм; menu – шрифт для меня;
messagebox– шрифт для окон диалога;
smallcaption– шрифт для небольших элементов управления;
statusbar– шрифт для строки состояния
Пример:
P.ic {font: caption}
ЦВЕТ ЭЛЕМЕНТА И ЦВЕТ ФОНА
color
Определяет цвет элемента.
I {color: yellow;}
U {color: rgb(255,40,40)}
Существует возможность задания цвета элемента таким, каким обладает элемент окна или элемент управления. Значения:
activeborder – рамка активного окна;
activecaption – заголовок активного окна;
appworkspace – цвет фона документа;
background – фон рабочего стола;
buttonface – цвет кнопки;
buttonhighlight – светлый участок кнопки (боковая грань);
buttontext – текст кнопки;
captiontext – цвет текста в строке заголовка;
graytext – недоступный текст (команда);
highlight – выбранный элемент управления;
highlighttext– выделенный текст;
inactiveborder – рамка невыбранного окна;
inactivecaption – заголовок невыбранного окна;
inactivecaptiontext – текст в заголовке невыбранного окна;
infobackground – фон элемента управления;
infotext – текст элемента управления;
menu– фон меню;
menutext– текст меню;
scrollbar – полоса прокрутки;
threeddarkshodow – темная тень трехмерного элемента;
threedface – поверхность трехмерного элемента;
threedhighlight – выбранный трехмерный элемент;
threedhightshadow– светлая тень трехмерного элемента;
threedshadow – тень трехмерного элемента;
window – фон окна;
windowframe – рамка окна;
windowtext – текст окна.
Пример:
P {color: windowtext; background-color: window }
Свойство, определяющее повторение фонового рисунка для заполнения пространства элемента. Значения:
repeat – заполнять все пространство элемента;
repeat-x– заполнять только первый горизонтальный ряд;
repeat-y- заполнять только первый вертикальный столбец;
no- repeat – не заполнять.
background-attachment
Свойство, определяющее, будет ли фон прокручиваться вместе с содержимым документа. Значения:
scroll – прокрутка разрешена;
fixed – прокрутка запрещена.
background-position
Начальное положение фонового рисунка. Значениями свойства являются две величины в численном (или процентном) выражении, а также символьные коды. Значения:
0% 0% - значение по умолчанию;
top left или left top – значение 0% 0%;
top, top center или center top – значение 50% 0%;
right top или top right – значение 100% 0%;
left, left center или center left – значение 0% 50%;
center или center center – значение 50% 50%;
right, right center или center right – значение 100% 50%;
bottom left или left bottom – значение 0% 100%;
bottom, bottom center или center bottom – значение 50% 100%;
bottom right или right bottom – значение 100% 100%.
Если указана одна величина, она интерпретируется как значение отступа по горизонтали, а значение по вертикали принимается равным 50%.
Пример:
Body { background-image: url(ban.gif); background-position: top center }
background-color
Устанавливает цвет фона для элемента – именно для элемента, а не для странички. Обратите внимание, что броузеры отображают это свойство по-разному: Microsoft IE отводит под фон элемента всю доступную ширину страницы, а Netscape Navigator – лишь ширину, занимаемую этим элементом: <HEAD><STYLE type=”text/css”> H1 {font-size: 300%;}
H3 {background-color: #9AC159} </STYLE></HEAD><BODY> <H1 style=”background-color: teal; color: white;”>Style1</H1> <H1 style=”background-color: navy; color: yellow;”>Style2</H1> </BODY>
Значения:
transparent – прозрачный фон.
Существует возможность задания цвета элемента таким, каким обладает элемент окна или элемент управления. Значения аналогичны элементу color.
Пример:
P {color: windowtext; background-color: window }
background
Фон элемента. Одновременно можно задавать свойства: background-color, background-attachment, background-position.
Пример:
Table { background: url(metal.jpg) red 50% repeat scroll}
СВОЙСТВА ГРАНИЦ
width
Ширина объекта. Значения:
auto – определяется броузером;
числовое;
процентное.
height
Высота объекта. Значения:
auto – определяется броузером;
числовое;
процентное.
min-width,
max-width
Минимально возможная и максимально допустимая ширина объекта. Значения:
auto – определяется броузером;
числовое;
процентное
min-height,
max-height
Минимально возможная и максимально допустимая высота объекта. Значения:
auto – определяется броузером;
числовое;
процентное
position
Способ вычисления координат границ элемента. Значения:
normal – положение элемента определяется броузером;
relative – вначале вычисляется обычное положение элемента, затем рассчитывается смещение относительно этого положения;
absolute – координаты вычисляются относительно границ контейнера, содержащего элемент;
fixed – координаты вычисляются относительно границ контейнера, содержащего элемент, и запрещается прокрутка.
top,
bottom,
right,
left
Координаты верхней, нижней, правой и левой границ элемента. Значения:
auto – определяется броузером;
числовое;
процентное
Устанавливают значения отступов вокруг элемента. Значения:
auto – определяется броузером;
числовое;
процентное
Пример:
IMG { margin-right: 20pt}
P { margin-left: 2cm}
margin
Устанавливают значения отступов вокруг элемента.
Значения:
auto – определяется броузером;
числовое;
процентное
Пример:
P { margin: 15px 15px 15px 15px }
Величина отступа между указанной границей элемента и его содержимым. Значения:
auto – определяется броузером;
числовое;
процентное
padding
Величина отступа между границами элемента и его содержимым. Значения:
auto – определяется броузером;
числовое;
процентное
Пример:
Table { padding: 15px 10px 10px 15px }
Одновременное задание значений свойств border-left-width, border-left-style и border-left-color.
border
Одновременное задание значений свойств border-width, border-style и border-color.
overflow
Способ изменения размеров объекта, если его содержимое не может быть показано целиком. Значения:
auto – определяется броузером;
visible – размер границ будет увеличен так, чтобы содержимое было видимым;
hidden – нет зависимости размера границ изображения от его содержимого;
scroll – устанавливается режим прокрутки.
float
Способ обтекания элемента другими. Значения:
none – обтекания нет;
left – слева;
right – справа;
Пример:
IMG { float: right }
clear
Способ расположения элементов, следующих за объектом выровненному по левому ил правому краю. Значения:none, left, right, both.
clip
Определение видимой части объекта. Значения:
auto – определяется броузером;
прямоугольник – видима только часть объекта.
Способ перекрытия объектов другими. Объект, имеющий большее значение индекса, располагается выше. Значения:
auto – нижний «нулевой» уровень, задаваемый по умолчанию;
отрицательное число – объект располагается «ниже» нулевого уровня;
положительное число - объект располагается «выше» нулевого уровня.
СВОЙСТВА ТЕКСТА
text-decoration
Устанавливает эффекты оформления шрифта.
Значение:
none –без оформления;
underline –подчеркивание; overline –черта сверху;
line-through –перечеркивание;
blink –мигание (не поддерживается некоторыми броузерами).
Пример:
A {text-decoration: none;} .wrong {text-decoration: line-through;}
text-align
Определяет выравнивание элемента. Значения:
left – по левому краю;
right – по правому краю;
center – по центру;
justify – по ширине.
Пример:
P {text-align: justify}
text-indent
Устанавливает отступ первой строки текста. Чаще всего используется для создания параграфов с табулированной первой строкой.
Пример: P {text-indent: 50pt;}
text-shadow
Создание тени для букв. Некоторые броузеры не поддерживают данное свойство.
Пример:
P { text-shadow: 5px 5px } Создание тени справа и снизу от букв;
P { text-shadow: 5px 5px 3px blue } Создание тени синего цвета справа и снизу и задание радиуса размытия тени (3 пикселя).
letter-spacing
Задание межбуквенного интервала. Значения:
normal – определяется броузером;
auto – интервал изменяется так, чтобы текст уместился в одной строке. Не поддерживается некоторыми броузерами;
числовое значение.
Пример:
P { letter-spacing: 5pt }
line-height
Управляет интервалами между строками текста. Значения:
normal – определяется броузером (лежит в пределах 1.0-1.2);
абсолютное значение - числовое с указанием единиц измерения;
число– размер шрифта (значение свойства font-size) умножается на эту величину;
процентное– по отношению к значению свойства font-size.
Пример:
P {line-height: 50 %}
P {line-height: 1.2; font-size: 16pt }
word-spacing
Выбор расстояния между словами. Значения:
normal – определяется броузером;
числовое.
text-transform
Изменение вида букв. Значения:
none – без изменения;
capitalize – первая буква каждого слова прописная;
uppercase – все буквы прописные;
lowercase – все буквы строчные.
white-space
Определение вида пробелов. Значения:
normal – удаляются пробелы следующие друг за другом;
pre – текст остается без изменения (по аналогии с тегом PRE);
nowrap – запрет на автоматический разрыв строк.
direction
Направление текста. Значения:
ltr – слева направо;
rtl – справа налево.
СВОЙСТВА СПИСКОВ
list-style-type
Определяет вид маркеров в списке. Значения:
none –без маркеров;
disc –круги;
circle –окружности;
square –квадраты;
decimal –арабские цифры;
lower-roman –римские строчные цифры ( i, v, x );
upper-roman –римские прописные цифры ( I, V, X );
lower-alpha –строчные латинские буквы (a, b, c, d);
upper-alpha –прописные латинские буквы (A, B, C, D);
Пример:
LI { list-style-type: lower-alpha}
list-style-image
Определение рисунка, который будет использоваться в качестве маркера. Значения:
none – рисунок не используется;
url() – адрес графического файла.
Пример:
UL { list-style-image: url(mark.gif) }
list-style-position
Положение маркера относительно списка. Значения:
inside – маркер внутри списка;
outside – маркер вне списка.
list-style
Определяет вид маркеров. В качестве значений может использоваться несколько значений для свойств list-style-type, list-style-image, list-style-position перечисленных выше.
Пример:
UL { list-style: circle outside }
СВОЙСТВА ТАБЛИЦ
display
Создание таблиц и элементов таблиц. Значения:
table – таблица (аналог тега table);
table-caption – заголовок таблицы (аналог тега caption);
table-column – колонка (аналог тега col);
table-column-group – группа колонок (аналог тега colgroup);
table-row – строка (аналог тега tr);
table-row-group – группа строк (аналог тега tbody);
table-header-group – группа строк в начале таблицы (аналог тега thead);
table-footer-group – группа строк в конце таблицы (аналог тега tfoot);
table-cell - ячейка (аналог тега td).
row-span
Количество строк, которые должна занять ячейка.
column-span
Количество столбцов, которые должна занять ячейка.
Характеристика рамки. Значение свойства состоит из трех величин: толщина, тип, цвет. Значения:
noneили hidden –рамки нет;
dotted –точечная рамка;
dashed –пунктирная рамка;
solid –сплошная рамка;
double -двойная рамка;
groove –двугранная рамка;
ridge –такая же, как groove, но светлая и темная грани расположены иначе;
inset –одна грань, наклонена внутрь;
outset – такая же, как inset, но свет падает по-другому.
Пример:
TABLE { border: 3px solid red; }
<TD style=”border: dotted”>
vertical-align
Вертикальное выравнивание. Значения:
процентное;
top – по верхнему краю;
middle – по центру;
bottom – по нижнему краю;
baseline – по первой строке текста в ячейке.
table-layout
Алгоритм формирования таблицы. Значения:
auto – стандартный;
fixed – ускоренный.
СВОЙСТВА МУЛЬТИМЕДИА
volume
Громкость звука. Значения:
числовые – в пределах от 0 до 100;
проценты – в пределах от 0% до 100%;
silent – без звука;
x-soft – уровень звука 0 (минимальный);
soft – уровень звука 25;
medium – уровень звука 50;
loud – уровень звука 75;
x-loud – уровень звука 100 (максимальный).
speak
Режим синтеза речи. Значения:
none – не использовать;
normal – использовать правила произношения указанного языка;
spell-out – озвучивать побуквенно.
speech-rate
Темп речи при работе синтезатора речи. Значение задается как количество слов в минуту. Допускаются также значения:
x-slow, slow, medium, fast, x-fast, fast, faster, slower.
pause-before
Величина паузы перед воспроизведением элемента. Значения:
число – в секундах или миллисекундах
проценты – по отношению к темпу речи (свойство speech-rate)
pause-after
Величина паузы после воспроизведения элемента. Значения аналогичны свойству pause-before.
pause
Величина паузы до и после воспроизведения элемента.
Пример:
P.pause { pause: 20ms 10ms; }
cue-before
Воспроизведение звукового файла до использования элемента. Значения:
none - не задано;
url() – адрес файла.
Пример:
A.music {cue-before: url(mus1.wav); cue-after: url(mus2.wav) }
cue-after
Воспроизведение звукового файла после использования элемента. Значения аналогичны свойству cue-before.
cue
Воспроизведение звуковых файлов до и после использования элемента.
Пример:
A.music {cue: url(mus1.wav) url(mus2.wav) }
play-during
Задание звукового фона во время воспроизведения озвученного элемента. Значения:
none – фона нет;
auto – в качестве фона используется звук родительского элемента;
repeat – повторение фонового файла, если он оказался короче основного;
url() - адрес файла.
Пример:
P.fon { play-during: url(my.wav) repeat}
azimuth
Задание стереофонического эффекта, направление звука определяется в горизонтальной плоскости. Значения задаются в градусах (deg) от –360deg до 360deg или с помощью стандартных значений. Значения:
left-side – задание величины 270deg;
far-left – задание величины 240deg;
left – задание величины 320deg;
center-left – задание величины 340deg;
center – задание величины 0deg;
center-right – задание величины 20deg;
right – задание величины 140deg;
far-right – задание величины 60deg;
right-side – задание величины 90deg;
leftwards – сдвиг источника на 20 градусов влево;
rightwards – сдвиг источника на 20 градусов вправо;
behind – смещает источник звука назад (вычитание 180 градусов)
Пример:
P { azimuth: center-left }
elevation
Задание стереофонического эффекта, направление звука определяется в вертикальной плоскости. Значения задаются в градусах (deg) от –90deg до 90deg или с помощью стандартных значений. Значения:
below – аналогична заданию -90deg;
level – аналогична заданию 0deg;
above – аналогична заданию 90deg;
higher – плюс 10 градусов к текущему углу;
lower – минус 10 градусов от текущего угла.
СВОЙСТВА ИНТЕРФЕЙСА
cursor
Вид указателя мыши расположенного над текущим элементом. Значения:
auto –вид указателя определяется броузером;
default –вид указателя определяется операционной системой;
crosshair –крестик;
pointer –указующий перст;
move –четырехглавая стрелка (перемещение);
e-, ne-, nw-, n-, se-, sw-, s-, w-resize –стрелки для перемещения. Приставки обозначены по аналогии с частями света.
text – текстовый указатель;
wait –песочные часы;
help –указатель со знаком вопроса;
не стандартный указатель – (URL)
Пример:
A { cursor: pointer url(giper.cur) }
