Форма отчетности: Защита лабораторной работы. Тема: Списки. Визуальное форматирование

Лабораторная работа №10

Тема: Списки. Визуальное форматирование. Таблицы.

Цель: Знакомство с возможностями языка CSS при создании HTML-документа со спискам, визуальным форматированием, таблицами..

Задача: Создание страницы HTML-документа c применением CSS при помощи редактора «Блокнот» и визуализация при помощи интернет-браузера.

Вопросы для подготовки к лабораторной работе:

1. При помощи какого свойства стиля CSS возможно создание графического маркера списка?
2. Какая возможность появилась с применением CSS для изменения местоположения маркера элемента списка?
3. Какие стандартные значения длины можно использовать при указании размеров блоков в документе HTML при использовании свойств CSS?
4. Какое свойство определяет для перекрываемых частей блоков вырезаемые области.? Назовите особенность применения.
5. Возможно ли изменить направление текста в текстовых блоках? Если да, то как?
6. Какое свойство определяет количество соединяемых столбцов?
7. Какое свойство определяет положение подписи таблицы по отношению к самой таблице?

Задание:

Создайте HTML-страницу со списком запланированных дел на год с маркерами в виде графического файла и расположением внутри элемента, установив размер блока списка в 55% от ширины экрана и таблицей с объединенными ячейками и скрытыми границами пустых ячеек..

Материал для подготовки к лабораторной работе:

Списки

С помощью этих свойств выполняется управление, как стилем элементов списков, так и установкой нумерации и маркировки.

list-style-type	Определяет стиль маркеров или номеров списка. Значение: disc - маркер в виде диска (по умолчанию). circle - маркер в виде окружности. square - маркер в виде квадрата. decimal - списки, нумерованные с помощью десятичных чисел, начиная с 1, decimal-leading-zero - списки, нумерованные с помощью десятичных чисел с ведущими нулями, например 01, 02, 03 и т.д. lower-roman - списки, нумерованные с помощью строчных римских цифр. upper-roman - списки, нумерованные с помощью прописных римских цифр hebrew - списки, нумерованные с помощью цифр иврита. georgian - списки, нумерованные с помощью грузинских цифр. armenian - списки, нумерованные с помощью армянских цифр. сjk-ideographic - списки, нумерованные с помощью идеограмм, lower-latin, lower-alpha - использование строчных ASCII-символов. upper-latin, upper-alpha - использование прописных ASCII-символов. lower-greek - использование строчных греческих букв. hiragana - использование букв японской азбуки хирагана. hiragdna-iroha - использование букв японской азбуки хирагана ироха, katakana-iroha - использование буке японской азбуки катакана ироха. none - нет ни маркеров ни номеров. inherit - принимается значение родительского элемента. ol {list-style: upper-alpha}
list-style-image	Определяет изображение, которое будет использовано в качестве маркера списка. Значение: none - изображение, предназначенное быть маркером, не установлено (по умолчанию). любой соответствующий стандарту URL - URL к изображению, предназначенному быть маркером. inherit - принимается значение родительского элемента. ul {list-style-image: url("bullet3.gif")}
marker-offset	Определяет расстояние между маркером и текстом в списке Значение: auto - пробел устанавливается браузером (по умолчанию). любая соответствующая стандартам длина - пробел между маркером и текстом. inherit - принимается значение родительского элемента. h1 {marker-offset: 12px}
list-style-position	Определяет местоположение маркера элемента списка. Значение: inside - маркер внутри элемента. outside - маркер вне элемента (по умолчанию). inherit - принимается значение родительского элемента. ul {list-style-position: inside}
list-style	Свойство для установки сразу всех параметров стиля списка. Если какие-либо параметры пропущены, то берутся их значения по умолчанию. Значение: list-style-type - вид маркера. list-style-position - положение маркера. list-style-image - изображение для маркера. inherit - принимается значение родительского элемента. ul {list-style: circle inside url("bullet4,gif")}
counter-increment	Увеличивает значение определенного счетчика. Значение: none - значение счетчика не возрастает (по умолчанию). имя счетчика и соответствующее стандартам число - - идентификация счетчика и прием целого значения, на которое счетчик будет каждый раз увеличиваться. Такими значениями могут быть и отрицательные целые числа. inherit - принимается значение родительского элемента. h1 {counter-increment: MyCounter 2}
counter-reset	Сброс значения определенного счетчика. Значение: none - значение счетчика не сбрасывается (по умолчанию). имя счетчика и соответствующее стандартам число - идентификация счетчика и прием целого значения, которое присваивается счетчику при сбросе. Такими значениями могут быть и отрицательные целые числа. inherit - принимается значение родительского элемента. h1 {counter-reset: MyCounter 2}

Визуальное форматирование

display	Определяет вид создаваемого элемента. Эти разные виды по-разному взаимодействуют друг с другом в зависимости от расположения на странице. Значение: inline - встроенный элемент (по умолчанию). block - блочный элемент. inline-block - генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу. Фактически такой элемент по своему действию похож на встраиваемые элементы (вроде тега <IMG>). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный. list-item - встроенный элемент пункта списка. marker - общее содержимое, которое появляется перед элементом или после него. Используется только с псевдо-элементами : before (перед) и safter (после), none - отсутствие элемента. Элемент в общей схеме не работает. run-in - элемент типа блочного, свойства которого зависят от его местоположения. compact - элемент типа встроенного, свойства которого зависят от его местоположения, table (таблица), inline-table (оперативная таблица), table-row-group (группа строк таблицы), table-column (столбец таблицы), table-column-group (группа столбцов таблицы), table-header-group (группа верхних заголовков таблицы), table-footer-group (группа нижних заголовков таблицы), table-row (строка таблицы), table-cell (ячейка таблицы), table-caption (подпись таблицы) - элемент таблицы, соответствующий имени свойства. inherit - принимается значение родительского элемента. p {display: block}
width	Определяет ширину элемента. Значение: auto - ширина элемента выбирается броузером (по умолчанию). любая соответствующая стандарту длина - число, представляющее ширину элемента. любое соответствующее стандарту процентное значение - отношение в процентах ширины элемента к ширине окна, inherit - принимается значение родительского элемента. p {width: 260px}
min-width	Определяет минимальную ширину элемента.
max-width	Определяет максимальную ширину элемента. Значение: любая соответствующая стандарту длина - число, представляющее минимальную или максимальную ширину элемента. любое соответствующее стандарту процентное значение - отношение в процентах минимальной или максимальной ширины элемента к ширине окна. none - ширина не ограничивается; такое значение применяется только к свойству max-width. inherit - принимается значение родительского элемента. p {min-width: 100pх; max-width: 400px}
height	Определяет высоту элемента. Значение: auto - высота элемента выбирается браузером (по умолчанию). любая соответствующая стандарту длина - число, представляющее высоту элемента. любое соответствующее стандарту процентное значение - отношение в процентах высоты элемента к высоте окна. inherit - принимается значение родительского элемента. p {height: 260px}
min-height	Определяет минимальную высоту элемента.
max-height	Определяет максимальную высоту элемента. Значение: любая соответствующая стандарту длина - число, представляющее высоту элемента. любое соответствующее стандарту процентное значение - отношение в процентах высоты элемента к высоте окна. inherit - принимается значение родительского элемента. p{min-height: 100pх; max-height: 400px}
line-height	Определяет интерлиньяж для текстового элемента. Интерлиньяж - это расстояние между базовыми линиями двух соседних строк. Значение: normal - значение выбирается браузером так, чтобы на странице поместились все элементы (по умолчанию). любая соответствующая стандарту длина - число, представляющее высоту элемента. любое соответствующее стандарту процентное значение - отношение е процентах высоты элемента к высоте окна. любое соответствующее стандарту число - число, равное количеству кеглей используемого шрифта. inherit - принимается значение родительского элемента. p {line-height: 2.2}
vertical-align	Определяет выравнивание текста по вертикали внутри элемента. Значение: baseline - выравнивание базовой линии элемента по базовой линии его родительского элемента (по умолчанию). middle - выравнивание средней линии элемента по базовой линии его родительского элемента top - выравнивание верхней части элемента по верхнему краю его текста. bottom - выравнивание нижней части элемента по базовой линии его родительского элемента. sub - выравнивание текста элемента, чтобы он стал подстрочным по отношению к базовой линии родительского элемента. super - выравнивание элемента, чтобы он стал надстрочным по отношению к базовой линии родительского элемента. text-top - выравнивание верхней части элемента по верхней части текста родительского элемента. text-bottom - выравнивание нижней части элемента по нижней части текста родительского элемента. любая соответствующая стандарту длина - число, показывающее, на сколько поднят уровень элемента. Отрицательные числа показывают, на сколько уровень элемента ниже. любое соответствующее стандарту процентное значение - отношение в процентах, показывающее, на сколько поднят уровень элемента. Отрицательные числа показывают, на сколько уровень элемента ниже. inherit - принимается значение родительского элемента. p{vertical-align: super}
float	Определяет обтекание элемента слева или справа. Значение: none - элемент не обтекается (по умолчанию). left - элемент передвинут влево, а остальные элементы обтекают его справа. right - элемент передвинут вправо, а остальные элементы обтекают его слева. inherit - принимается значение родительского элемента. img {float: right}
clear	Определяет, как данный элемент обтекается по сторонам другими элементами. Значение: none - обтекание доступно со всех сторон (по умолчанию). left - элементов не должно быть слева от данного элемента. right - элементов не должно быть справа от данного элемента. both - элементов не должно быть справа и слева от данного элемента. inherit - принимается значение родительского элемента. img {clear: both}
overflow	Определяет, как отображать элемент, когда он перекрывает другой элемент. Значение: visible - перекрываемый элемент виден полностью, и из него ничего не вырезано (по умолчанию). hidden - перекрываемая часть вырезается. scroll - перекрываемая часть вырезается, и становятся видимыми любые полосы прокрутки. auto - браузером определяется, надо ли вырезать перекрываемые области inherit - принимается значение родительского элемента. img {overflow: visible}
visibility	Определяет, является ли элемент видимым. Значение: visible - элемент видимый. hidden - элемент не видимый, но он все равно влияет на общую структуру страницы. collapse-если не применяется к таблицам, то получается тот же эффект, что и для hidden. inherit - (по умолчанию) принимается значение родительского элемента. img {visibility: visible}
clip	Определяет для перекрываемых частей вырезаемые области. Параметр clip работает только для абсолютно позиционированных элементов. Значение: auto - вырезаемая область должна иметь те же размеры и местоположение, что и перекрываемая часть (по умолчанию). rect (top, right, bottom, left)-вырезаемая область определяется значениями сдвига соответственно сверху, справа, снизу и слева. inherit - принимается значение родительского элемента. img {clip: rect(5px, 4рх, 2рх, 4рх)}
direction	Определяет направление текста в текстовых блоках. Значение: Itr - слева направо (по умолчанию). rtl - справа налево. inherit - принимается значение родительского элемента. body {direction: Itr; unicode-bidi: embed}
unicode-bidi	Позволяет менять направление текста. Значение: normal - менять направление письма не разрешено (по умолчанию). embed - можно устанавливать направление письма с помощью свойства direction. bidi-override - можно устанавливать направление письма с помощью свойства direction. Применяется к дополнительным текстовым блокам inherit - принимается значение родительского элемента. body {unicode-bidi: embed}
cursor	Определяет, как выглядит указатель мыши при прохождении по элементу. Значение: auto - внешний вид определяется браузером (по умолчанию). crosshair - принимает форму указателя "графическое выделение". default - внешний вид, как у указателя, установленного в системе пользователя по умолчанию. pointer - принимает форму указателя "выбор ссылки". move - принимает форму указателя "перемещение". e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s- resize, w-resize - принимает формы указателей изменения размеров. text - принимает форму указателя выделения текста. wait - принимает форму указателя "система недоступна". help - принимает форму указателя "выбор справки". любой соответствующий стандарту URL - URL файла указателя мыши. inherit - принимается значение родительского элемента. Свойство cursor в CSS3 cору - указывает на то, что что-то будет скопировано. Может изображаться как стрелка с небольшим знаком плюса рядом с ней. alias - представляет альтернативу или ярлык на что-либо. Часто изображается как стрелка с небольшой изогнутой стрелкой сразу, за ней. Поддерживается Firefox. context menu - этот курсор указывает на наличие контекстного меню, обычно открываемого щелчком на объекте правой кнопкой мыши. Чаете изображается в виде стрелки с небольшой картинкой меню сразу за ней. cell - указывает на то, что может быть выбрана ячейка или группа ячеек. Курсор должен выглядеть как жирный знак плюс. Поддерживается Firefox grab - указывает на то, что объект может быть ухвачен. Курсор должен выглядеть как разжатая кисть. grabbing - указывает на то, что объект был схвачен. Курсор должен выглядеть как сжатая в кулак кисть. spinning - свидетельствует о том, что программа выполняет задачу. Похоже на свойство wait, но пользователь может продолжать взаимодействовать с программой. Возможны различные изображения курсора, включая вращающийся мячик. count up - указывает на то, что программа осуществляет отсчет в прямом направлении. Курсор должен быть изображен в виде отсчитывающих пальцев. count down - указывает на то, что программа осуществляет отсчет в обратном направлении. Подобно отсчету в прямом направлении, курсор должен быть изображен в виде отсчитывающих пальцев. count up-down - указывает на то, что программа осуществляет отсчет сначала в прямом, а затем в обратном направлении. img {cursor: pointer}
zoom	Определяет масштаб элемента. Работает только в IE. Значение: число с плавающий точкой, где 1.0 нормальный размер. любое соответствующее стандарту процентное значение, где 100% нормальный размер. img {zoom: 2.0} /*Элемент увеличен в два раза*/ div {zoom: 300%} /*Элемент увеличен в три раза*/

Свойства полосы прокрутки

Данные свойства задают стиль полосы прокрутки. Их можно применять к таких элементов как: BODY, TEXTAREA, IFRAME и другим, которые имеют полосу прокрутки (корме SELECT).

scrollbar-3dlight-color	Устанавливает цвет верха и левой части ползунка и кнопок со стрелками на полосе прокрутки. Значение: любое соответствующее стандарту значение цвета. inherit - применяется значение родительского элемента. body {scrollbar-3dlight-color:green;}
scrollbar-arrow-color	Устанавливает цвет стрелок на кнопке со стрелками. Значение: любое соответствующее стандарту значение цвета. inherit - применяется значение родительского элемента. body {scrollbar-arrow-color: red;}
scrollbar-base-color	Устанавливает цвет основных элементов ползунка: ползунка, кнопок со стрелками, дорожки для ползунка, если не определены параметры в scrollbar-face-color. Значение: любое соответствующее стандарту значение цвета. inherit - применяется значение родительского элемента. body {scrollbar-base-color: green;}
scrollbar-darkshadow-color	Устанавливает цвет тени для ползунка и кнопок со стрелками. Значение: любое соответствующее стандарту значение цвета. inherit - применяется значение родительского элемента. body {scrollbar-darkshadow-color: red;}
scrollbar-face-color	Устанавливает цвет ползунка и кнопок со стрелками. Также, если вы не задали параметр SCROLLBAR-TRACK-COLOR, у вас изменится цвет дорожки. Значение: любое соответствующее стандарту значение цвета. inherit - применяется значение родительского элемента. body {scrollbar-face-color: green;}
scrollbar-highlight-color	Устанавливает цвет подсветки, создающий эффект объёмности. Это цвет, который окаймляет освещённую часть кнопочки. Когда кнопка не нажата, то цвет заливает левый верхний угол и стороны между ним, когда нажата - нижний правый угол. Значение: любое соответствующее стандарту значение цвета. inherit - применяется значение родительского элемента. body {scrollbar-highlight-color: green;}
scrollbar-shadow-color	Схоже с scrollbar-darkshadow-color. Значение: любое соответствующее стандарту значение цвета. inherit - применяется значение родительского элемента. body {scrollbar-shadow-color: green;}
scrollbar-track-color	Устанавливает цвет дорожки для ползунка. Значение: любое соответствующее стандарту значение цвета. inherit - применяется значение родительского элемента. body {scrollbar-track-color: aqua;}

Фильтры

Фильтры могут быть добавлены только к элементам HTML, которые рассматриваются как управляющие. Это любые элементы создающие прямоугольное место на WEB-странице. Такие как: BODY, DIV, MARQUEE, TD, IMG, SPAN, TR и т.д.

filter alpha	Фильтр alpha устанавливает уровень прозрачности filter: alpha(opacity, finishopacity, style, startX, startY, finishX, finishY) Значение: opacity - начальный уровень прозрачности. finishopacity - конечный уровень прозрачности; style - стиль градиента(0-равномерная прозрачность,1-линейный, 2-радиальный, 3-прямоугольный ). startX - начальные координаты градиента по горизонтали. startY - начальные координаты градиента по вертикали. finishX - конечные координаты градиента по горизонтали. finishY- конечные координаты градиента по вертикали. div{ filter: alpha(opacity=10, finishopacity=90, style=0,startX=10, startY=10, finishX=100, finishY=100)}
filter blur	Фильтр blur смазывает изображение. filter: blur(Add, direction, strength) Значение: add - объект (0 - результат работы фильтра, 1 - фильтр будет наложен на исходный образец). direction - направление смазывания объекта в градусах (0 - вверх и далее по часовой стрелке с шагом 45 градусов). strength - степень размытия. img{ filter: blur(Add=1, Direction=1, Strength=15)}
filter chroma	Фильтр chroma делает заданный цвет прозрачным. filter: chroma(color) Значение: color - цвет, который будет прозрачным img{ filter: chroma(color=#6c75d2)}
filter dropshadow	Фильтр dropshadow создает эффект подвешенности. filter: dropshadow(color, offx, offy, positive) Значение: color - цвет тени. offx - смещение тени относительно текста по оси X. offy - смещение тени относительно текста по оси Y. positive - характер освещения (0 или 1). div{filter: dropshadow(color=silver, offx=3, offy=3,positive=0) }
filter flipH	Фильтр fliph переворачивает объект горизонтально. css Фильтры filter css img{ filter: fliph }
filter flipV	Фильтр flipv переворачивает объект вертикально. img{ filter: flipv
filter glow	Фильтр glow добавляет свечение вдоль внешних границ объекта, создавая эффект "возгорания" границ объекта. filter: glow(strength, color) Значение: stregth - сила свечения в диапазоне 0-100. color - цвет свечения. div{ filter: glow(strength=5, color=red)}
filter gradient	Фильтр gradient позволяет заливать градиентом блочные элементы. filter:progid:DXImageTransform.Microsoft.Gradient(gradientType, startColorStr, endColorStr) Значение: gradientType – стиль градиента (0 - вертикальный; 1 - горизонтальный); startColorStr – цвет с которого начинается градиент; endColorStr – цвет которым заканчивается градиент. div{ width:300px; height:300px; filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=0, startColorStr=#ff0000, endColorStr=#0000ff); }
filter gray	Фильтр gray удаляет цветовую гамму объекта и отображает его в серых тонах. img{ filter: gray()}
filter invert	Фильтр invert меняет оттенок, насыщение и яркость объекта на противоположные. img{ filter: invert() }
filter mask	Фильтр mask отображает текст так, как будто он выделен мышью. filter: mask(Color) Значение: Color - цвет, окружающий текст. img{ filter: mask(color=red) }
filter shadow	Фильтр shadow создает эффект тени. filter: shadow(color, direction) Значение: color - цвет тени. direction - направление тени в градусах. div{ filter: shadow(color=green, direction=45) }
filter wave	Фильтр wave производит "синусоидальное" искажение объекта вдоль вертикальной оси. filter: wave(add, freq, lightStrength, phase, strength) Значение: add - значение, определяющее использование оригинала (0 или 1). По умолчанию 0 freq - количество волн lightStrength - величина подсветки phase - начальная фаза. По умолчанию - 0, изменяется от 0 до 100 strength - величина смещения div{ filter: wave(add=0, freq=2, lightstrength=10, phase=1, strength=3)}
filter xray	Фильтр xray отображает объект в черно-белом варианте, как на рентгеновском снимке img{ filter:xray()}

Таблицы

Элементы таблиц появились только в CSS2. Их свойства определяют стиль, промежутки и структуру таблиц

caption-side	Определяет положение подписи таблицы по отношению к самой таблице. Значение: top - подпись сверху таблицы (по умолчанию). right - подпись справа от таблицы. bottom - подпись снизу таблицы. left - подпись слева от таблицы. inherit - принимается значение родительского элемента. table {caption-side : top}
table-layout	Определяет общий вид таблицы. Значение: auto - общий вид таблицы определяется браузером (по умолчанию). fixed - устанавливается фиксированный общий вид таблицы. inherit - принимается значение родительского элемента. table {table-layout : fixed}
border-collapse	Определяет отображение табличных границ на экране. Значение: collapse - смежные границы табличных ячеек превращаются в одну общую границу (по умолчанию). separate - смежные границы ячеек таблицы остаются отдельными. inherit - принимается значение родительского элемента. table {border-collapse: separate}
border-spacing	Определяет интервалы между табличными границами. Если имеется только одно значение, то оно будет применено и к горизонтальному, и к вертикальному направлению. Значение: Первая длина, соответствующая стандартам, расстояние по горизонтали между границами табличных ячеек. Вторая длина, соответствующая стандартам, расстояние по вертикали между границами табличных ячеек. inherit - принимается значение родительского элемента. table {border-spacing: 4px}
empty-cells	Определяет, как выводить на экран границы пустых ячеек. Значение: show - границы пустых ячеек видны (по умолчанию). hide - границы пустых ячеек скрыты. inherit - принимается значение родительского элемента. table {empty-cells: show}
speak-header	Определяет, как программа чтения экрана (screen reader) произносит табличные заголовки. Значение: once - заголовок каждого столбца произносится только один раз (по умолчанию). always -заголовок столбца произносится каждый раз при работе ячеек этого столбца. inherit - принимается значение родительского элемента. table {speak-header: once}
column-span	Определяет количество соединяемых (span) столбцов. Значение: любое соответствующее стандартам число - количество соединяемых столбцов. По умолчанию это 1. inherit - принимается значение родительского элемента. td {column-span: 3}
row-span	Определяет количество соединяемых (span) строк. Значение: любое соответствующее стандартам число - количество соединяемых строк. По умолчанию это 1. inherit - принимается значение родительского элемента. td {row-span: 3}

Форма отчетности: Защита лабораторной работы