КАТЕГОРИИ:
Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)
Объектная модель документа. Интерфейсы Core DOM2
|
|
|
|
Каскадные таблицы стилей. Связные (внешние) таблицы стилей.
Каскадные таблицы стилей. Глобальные таблицы стилей.
Каскадные таблицы стилей. Локальные таблицы стилей.
Язык HTML. Таблицы. x 2
http://pyramidin.narod.ru/html401/tables.html
<TABLE border="1" summary="This table gives some statistics about fruit flies: average height and weight, and percentage with red eyes (for both males and females)."><CAPTION><EM>A test table with merged cells</EM></CAPTION><TR><TH rowspan="2"><TH colspan="2">Average <TH rowspan="2">Red<BR>eyes<TR><TH>height<TH>weight<TR><TH>Males<TD>1.9<TD>0.003<TD>40%<TR><TH>Females<TD>1.7<TD>0.002<TD>43%</TABLE>
Определения атрибутов
summary = text [CS]
Определяет общую информацию о назначении и структуре таблицы для пользовательского агента (ПА) с невизуальными носителями: речевых и по Брайлю.
align = left|center|right [CI]
Не рекомендуется. Этот атрибут определяет положение таблицы по отношению к документу. Допустимые значения:
· left: влево;.
· center: по центру документа;.
· right: справа.
width = length [CN]
Определяет необходимую ширину всей таблицы и предназначен для ПА. Если значение указано в процентах, оно является относительным к доступному в ПА горизонтальному пространству. При отсутствии спецификации ширины, ширина таблицы определяется ПА.
Ряды таблицы могут быть сгруппированы в "шапку", футер и один или более разделов тела документа с помощью элементов THEAD, TFOOT и TBODY соответственно. Это разделение делает возможным для ПА поддерживать прокрутку тела таблицы независимо от "шапки" и футера. Если распечатываются большие таблицы, информация "шапки" и футера может повторяться на каждой странице, содержащей данные таблицы.
<TABLE><THEAD> <TR> ...информация "шапки"... <TFOOT> <TR> ...информация футера... <TBODY> <TR> ...первый ряд данных блока 1... <TR> ...второй ряд данных блока 1... <TBODY> <TR> ...первый ряд данных блока 2... <TR> ...второй ряд данных блока 2... <TR> ...третий ряд данных блока 2... </TABLE>Разделы THEAD, TFOOT и TBODY должны содержать одинаковое количество столбцов.
|
|
|
http://htmlteacher.narod.ru/css.html
есть 3 метода добавления стилей в документ:
1.Внутренние или локальные стили inline style стиль определяется непосредственно в элементе
<h1 style=”font-size:120%”>
заголовок
</h1>
Представим себе три типа стилей: локальный (параметр STYLE), глобальный (описанный тегом STYLE в заголовке страницы) и внешний (тот, что в подключаемом файле). Это и есть три каскада. Дело в том, что эти три типа могут применяться одновременно. Каждый предыдущий стиль (в том порядке, в котором я их указал) может переопределять следующий.
http://htmlteacher.narod.ru/css.html
есть 3 метода добавления стилей в документ:
2.Таблицы глобальных стилей. Определяется в заголовочной секции HEAD с использованием тега STYLE.
<html>
<head>
<style type=text/css>
p{
font-size: 20%,
text-align:center
background: yellow
}
</style>
</head>
Для того, чтобы определить стиль для группы тегов, существуют классы. Эти вещи пишутся только во внешних и глобальных таблицах стилей.
Для того, чтобы определить класс, надо придумать ему имя. Оно может состоять только из англ. букв, цифр и знака подчерка (_). После этого пишете следующее:
P.data {color: green; font-famiy: verdana}
этот пример создает класс по имени data, который может использоваться только тегами P. Для того, чтобы применить класс к тегу - припишите к тегу CLASS="classname", наример:
<P CLASS="data">
Все, что находится посде этого тега, я имею в виду текст, будет зеленым и нарисовано шрифтом Verdana. Если вы припишете CLASS="data" тегу TD, ничего не произойдет, так как этот класс определен только для тегов P. Для того, чтобы определить класс для нескольких тегов надо перечислить их через запятую:
|
|
|
P,TD.data {color: green; font-famiy: verdana}
Если же мы хотим использовать класс для всех тегов, к которым он применим, просто не указываем имя тега:
.data {color: green; font-famiy: verdana}
Для того, чтобы не определять никаких классов, а просто изменить начертание одного или нескольких тегов пишем:
LI {color: green; font-famiy: verdana}
P,TD {color: green; font-famiy: verdana}
http://htmlteacher.narod.ru/css.html
есть 3 метода добавления стилей в документ:
3.Таблицы связных стилей. В этом случае стиль определяется в отдельном файле...
<LINK REL=STYLESHEET TYPE="text/css" HREF="style.css">
Есть 2 типа селектора простой и контекстуальный.
простой связывает на основе его типа или атрибутов независимо от контекста (местоположения) этого элемента относительно других элементов.
Контекстуальные селекторы могут связывать правила представления с контейнером определённого элемента.
Примеры простого селектора
h1{правило}
…
<h1>
.special {font-weight:bold}
...
<p class=special>
#zzz {color:red}
...
<p id='zzz'>
Контекстуальные селекторы определяют иерархию контейнеров.
div p {color:red>
…
<div>
<p>red
</div>
<p>auto color
.special cool{....}
<LI>
<p class=special>
<LI>
<p>
<LI class=special>
<p>
<LI class=special id=cool>////////
можно перекрыть область действия селектора следующим образом: правило для конкретного селектора откидывает правила для более конкретного селектора. Правила определённые ниже в исходной таблице стилей или документе имеют более высокий приоритет.
Псевдокласс — состоит из элементов одного типа, который удовлетворяет критерием одного типа. Пример — все просмотренные ссылки. visited{...}.visited.active link
Свойства
visibility=hidden, - прозрачно или не прозрачно
display=no|yes — показывать или не показывать.
Индивидуальные шрифты
font-face{font-family:название шрифта,... src=...}
http://www.arininav.ru/js/dhtml02.htm#ref422
DOM 2 Core представляет XML-документы в виде деревьев, состоящих из узлов, которые, в свою очередь, также являются объектами и реализуют более специализированные интерфейсы. Одни типы узлов могут иметь детей, т. е. сами являться поддеревьями, другие являются листьями, т. е. детей не имеют. В следующей таблице сведены все возможные типы узлов абстрактного документа; для каждого типа узлов перечислены те узлы, которые могут быть его детьми.
|
|
|
| Интерфейс | Описание | Дети |
| Document | Документ | Element (не более одного), ProcessingInstruction, Comment, DocumentType (не более одного) |
| DocumentFragment | Фрагмент документа | Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference |
| DocumentType | Тип документа | детей не имеет |
| EntityReference | Ссылка на раздел | Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference |
| Element | Элемент | Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference |
| Attr | Атрибут | Text, EntityReference |
| ProcessingInstruction | Директива XML | детей не имеет |
| Comment | Комментарий | детей не имеет |
| Text | Текст | детей не имеет |
| CDATASection | Секция CDATA | детей не имеет |
| Entity | Раздел | Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference |
| Notation | Нотация | детей не имеет |
Кроме того, DOM 2 Core содержит спецификацию интерфейсов NodeList (упорядоченные списки узлов, доступных по номеру в списке) и NamedNodeMap (неупорядоченные списки узлов, доступных по своему имени). Эти объекты являются живыми, т. е. любое изменение документа автоматически влечет изменение всех связанных с ним списков.
Интерфейсы Text, Comment и CDATASection являются потомками интерфейса CharacterData.
Следует подчеркнуть, что DOM 2 Core содержит два набора интерфейсов, каждый из которых обеспечивает полный доступ ко всем элементам документа. Первый набор представляет объектно-ориентированный подход со следующей иерархией наследования: документ — составляющие его элементы — их атрибуты и текстовое содержимое. При таком рассмотрении дерева документа мы говорим о иерархии объектов. Второй подход построен по принципу "все есть узлы (Nodes)". Здесь все составляющие документа рассматриваются как равноправные узлы его дерева, и мы можем говорить только о иерархии узлов. Таким образом, DOM 2 по своей сути является избыточной, но предоставляет нам возможность в зависимости от задачи рассматривать документ тем или иным способом.
Все интерфейсы DOM 2 Core подразделяются на основные (fundamental) и дополнительные (extended). Основными являются интерфейсы DOMException, DOMImplementation, DocumentFragment, Document, Node, NodeList, NamedNodeMap, CharacterData, Attr, Element, Text и Comment. Эти интерфейсы должны поддерживаться всеми реализациями DOM, как для XML-, так и для HTML-документов. Дополнительные интерфейсы ориентированы на XML-документы, поэтому реализации DOM для HTML могут их не поддерживать. К ним относятся CDATASection, DocumentType, Notation, Entity, EntityReference и ProcessingInstruction.
|
|
|
13. Объектная модель документа. Интерфейсы HTML.
http://www.arininav.ru/js/dhtml02.htm
http://www.arininav.ru/js/dhtml06.htm
Дерево элементов HTML-документа
Корнем этого дерева является элемент HTML, который имеет двух детей — HEAD и BODY. Элемент HEAD является отцом элемента TITLE, а элемент BODY — отцом элементов H1 и P (два последних элемента называются братьями, причем H1 является старшим братом, а P — младшим). Все элементы дерева являются потомками корня, а тот является их предком. При этом все элементы и тексты, образующие их содержимое, являются узлами дерева документа.
Каждый элемент данного дерева соответствует элементу HTML и, следовательно, имеет тег(и), содержимое и набор атрибутов. Для перехода к объектной модели документа остается сделать единственный шаг: назвать все элементы дерева объектами, а их атрибуты сделать доступными для чтения и для изменения из сценариев и аплетов. В результате дерево элементов HTML-документа становится динамически управляемым; более того, теперь мы можем легко добавлять к каждому элементу новые свойства, помимо стандартных атрибутов HTML.
Именно такой подход был положен в основу динамической модели HTML обозревателей Microsoft, а затем принят за основу стандартов W3C, получивших название объектная модель документа (Document Object Model или DOM). При этом W3C расширил понятие DOM на любые XML-документы, рассматривая HTML DOM как специализированный частный случай с дополнительными возможностями. Таким образом, DOM — это модель HTML- и XML-документов, независимая от платформы и языка программирования, которая определяет:
· интерфейсы и объекты, которые используются для представления документа и манипулирования им;
· семантику этих интерфейсов и объектов, включая их атрибуты и реакцию на события;
· взаимосвязи между этими интерфейсами и объектами.
Объектная модель HTML-документов в соответствии с DOM 2 HTML основана на следующих интерфейсах:
- интерфейс HTMLDocument, соответствующий HTML-документу и производный от интерфейса Document;
- интерфейс HTMLElement, соответствующий абстрактному HTML-элементу и производный от интерфейса Element;
- интерфейсы, соответствующие конкретным элементам языка HTML и производные от интерфейса HTMLElement;
- вспомогательные интерфейсы HTMLDOMImplementation и HTMLCollection.
Интерфейс HTMLDocument является корнем в иерархии HTML-элементов. Он наследует все свойства и методы интерфейса Document и, кроме того, содержит несколько дополнительных свойств и методов, призванных облегчить написание сценариев для управления динамическими страницами.
Интерфейс HTMLElement соответствует HTML-элементу общего вида. Он наследует все свойства и методы интерфейса Element и, кроме того, содержит несколько дополнительных свойств, соответствующих общим атрибутам элементов HTML.
Элементы HTML, имеющие только общие атрибуты, реализуются данным интерфейсом. Сюда относятся следующие элементы: ABBR, ACRONYM, ADDRESS, B, BDO, BIG, CENTER, CITE, CODE, DD, DFN, DT, EM, HEAD, I, KBD, NOFRAMES, NOSCRIPT, S, SAMP, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TT, U, VAR. Остальные HTML-элементы имеют собственные интерфейсы, которые являются наследниками интерфейса HTMLElement.
Интерфейс HTMLCollection обобщает интерфейс NodeList таким образом, что доступ к элементам списка узлов становится возможен как по их номеру в списке, так и по их имени. Под именем элемента здесь понимается значение его атрибута id или name. Коллекции являются живыми, т. е. любое изменение документа влечет автоматическое изменение всех связанных с ним коллекций.
Этот интерфейс имеет единственное свойство length, возвращающее количество узлов в списке, и два метода: item, возвращающий элемент списка с заданным номером (элементы списка узлов нумеруются, начиная с нуля) и namedItem, возвращающий элемент списка с заданным именем.
Интерфейс HTMLDOMImplementation является производным от интерфейса DOMImplementation. Он наследует все его свойства и методы, и имеет единственный дополнительный метод createHTMLDocument, позволяющий нам создавать объекты типа HTMLDocument.
14. Объектная модель документа. Интерфейсы для управления таблицами.
http://www.arininav.ru/js/dhtml07.htm#ref474
|
|
|
|
|
Дата добавления: 2015-01-03; Просмотров: 550; Нарушение авторских прав?; Мы поможем в написании вашей работы!