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

Лабораторная работа №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}

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

Наши рекомендации