17. Для того, чтобы применить таблицу стилей(css) к html-документу, мы можем избрать один из трёх способов, либо комбинировать их:

• применить внешние стили (в виде отдельного текстового .css-файла) с помощью элемента link

• встроить стили непосредственно в HTML-документ (в виде блока css-текста) с помощью элемента style

• применить inline-стиль, то есть назначить стиль конкретному HTML-элементу непосредственно в документе, с помощью HTML-атрибута style

Разберём эти способы подробнее.

Внешние стили (external style sheets)

Применяются с помощью элемента link, который должен располагаться внутри элемента head и нигде более.

аблицы стилей документа (document style sheets)

Называются так потому, что располагаются непосредственно в HTML-документе и применяются только к нему. Иногда называются embedded style sheet (встроенный стиль).

CSS-стили и комментарии располагаются между открывающим и закрывающим тегами элемента style:

<style type=”text/css”> ... </style>

Стили, подставляемые в строку (inline styles)

Иногда нужно назначить стиль отдельному элементу на странице, не применяя внешних стилей и элемента style. Типичный случай — элемент встречается единожды в документе или на сайте, но требует особого оформления. Воспользуемся атрибутом style (именно атрибутом элементов, а не элементом!):

<p style=”color: red”>Я абзац, выделенный красным цветом, других таких на сайте нет</p>

19В HTML большинство элементов можно разделить на две группы: блочные (blok) и строчные (inline).К строчным элементам относятся теги: <a href="..."> </a>, <br>, <code>, <em>, <img>, <span>, <strong>, <sub>, <sup>....Строчные элементы в общем потоке располагаются один за другим, то есть на одной строке, а на другую переходят только когда доходят до конца строки, или когда что-то принудительно заставляет их перейти на новую строку.Строчные элементы также могут располагатся внутри блочных.Блочные элементыК блочным элементам относятся теги: <div>, <dl>, <h1>...<h6>, <hr>, <ol>, <p>, <table>, <ul>....

Блок представляет собой как бы отдельную структурную единицу, выделенную абзацем. Блочные элементы в общем потоке располагаются один под другим. Нельзя расположить два блочных элемента на одной строке. Каждый блок имеет содержимое (текстовая информация, изображения и т.д., называемое контентом) и границу (border).

Границе можно придать необходимый стиль линий. По умолчанию граница невидима. Граница является частью блока и поэтому ширина границы влияет на размер блока.

Между содержимым и границей существует внутреннее расстояние - отступы (padding). Ими необязательно пользоваться. То есть если их не будет, граница будет примыкать к содержимому.

А вокруг границы могут быть пустые, ничем не занятые области, называемые полями (margin) - это расстояние от границы блока, до ближайших элементов, или, если их нет, до краев окна браузера.

Для блока задается фиксированная ширина (width) и высота (height), но лишь для его содержимого. Отступы, граница и поля туда не входят. По умолчанию высота и ширина блока подстраиваются под область, занимаемую контентом.

20связать стилевое описание элемента непосредственно с самим элементом, каким либо HTML тегом можно тремя способами:1Написать стилевое описание непосредственно в самом элементе. Такой способ хорош лишь в том случае если таковой элемент один единственный в HTML документе который нуждается в отдельном стилевом описании. 2Написать стилевое описание для всех идентичных элементов HTML документа. Такой способ оправдывает себя, если стиль страницы принципиально отличается от общего дизайна сайта (группы взаимосвязанных страниц). 3Вынести стилевое описание элементов HTML в отдельный файл CSS. Это позволит управлять дизайном всего сайта целиком, каждой страницей сайта в которой указанно обращение к CSS файлу. Этот способ является наиболее эффективным использованием таблицы каскадных стилей.

Вопросы к экзамену:

1. Назначение и описание HTML

2. Теги форматирования текста — р, i, b, strong, u, sub, sup

3. Создание текстовых ссылок НТМL. Тег, атрибуты

4. Картинки в НТМL. Тег, атрибуты.

5. Структура НТМL документа. Назначение head, body.

6. Таблицы в НТМL. Объединение ячеек.

7. Списки в НТМL

8. Теги ввода информации НТМL — select, input, radio, checkbox

9. Назначение и описание Javascript

10. Типы данных Javascript

11. Функции в Javascript. Формат описания, вызов функции

12. Циклы for, while в Javascript

13. Массивы в Javascript, цикл foreach

14. Оператор условия в Javascript

15. Обработка событий в НТМL, Javascript

16. Назначение, описание, способы применения СSS

17. Способы указания стилей СSS элементов НТМL

18. Правила старшинства стилей СSS

19. Блочные и строчные элементы НТМL

20. Способы указания элементов НТМL в СSS

21. Библиотеки Javascript (JQuery, extJs, mootools.

21 Библиотека JavaScript — сборник классов и/или функций на языке JavaScript.Язык JavaScript, изначально разработанный Netscape (а затем развиваемый Mozilla), долгое время использовался в сети на многих сайтах, но широкую популярность получил с приходом Веб 2.0 — периода развития компьютерных систем, в котором JavaScript совместно с различными диалектами XML стал активно использоваться в разработке пользовательских интерфейсов как веб-приложений, так и настольных приложений. JavaScript в связке с CSS используется для создания динамических сайтов, более доступных, чем основанные на Flash альтернативы.С увеличением популярности JavaScript, простота создания динамических элементов пользовательского интерфейса стала играть ключевую роль в веб-разработке. Этим обусловлен лавинообразный характер появления различных библиотек JavaScript, таких как Ext и Dojo. С другой стороны, одним из последствий войны браузеров стала разница в реализации объектной модели документа^[1] и это обусловило необходимость затрачивать дополнительные усилия для реализации корректной работы различных браузеров. Данное обстоятельство обусловило появление библиотек JavaScript, предоставляющих кросс-браузерный интерфейс к методам DOM, таких как Prototype, script.aculo.us или jQuery.Удобство использования библиотек JavaScript привело к тому, что Microsoft, Yahoo! и другие крупные ИТ-компании разрабатывают свои собственные основанные на JavaScript библиотеки элементов пользовательского интерфейса, встраиваемые в веб-приложения, разрабатываемые этими компаниями.Более того, некоторые библиотеки JavaScript позволяют упростить взаимодействие JavaScript с другими языками, такими как CSS, PHP, Ruby и Java. Это позволяет упростить запуск приложений JavaScript с приложениями, написанными на других языках программирования.Список библиотек--Dojo, Ext (фреймворк) ,jQuery, MochiKit (англ.) ,MooTools ,Prototype ,Rico ,Yahoo! UI Library