- •История развития Web-технологий
- •К лассификация Web технологий
- •Статические Web технологии. Основы технологии html
- •Статические Web технологии. Таблицы html
- •Статические Web технологии. Фреймы html
- •Статические Web технологии. Формы html
- •Статические Web технологии. Основы технологии css
- •Внутренние стили. Определяются атрибутом непосредственно в элементе. Мало отличается от традиционного html. Внешний вид документа трудно изменить.
- •Статические Web технологии. Css свойства текста
- •Статические Web технологии. Css свойства шрифта
- •Статические Web технологии. Css свойства границ элементов
- •Статические Web технологии. Css свойства таблиц
- •Динамические Web технологии. Основы технологии Java Script
- •Динамические Web технологии. Java Script, глобальные и локальные переменные, типы данных.
- •Динамические Web технологии. Java Script, операции над числовыми и строковыми типами данных.
- •Динамические Web технологии. Java Script, массивы
- •Динамические Web технологии. Java Script, операторы условного перехода
- •Динамические Web технологии. Java Script, циклы
- •Динамические Web технологии. Java Script, объектная модель
- •Динамические Web технологии. Java Script, обработка событий
Статические Web технологии. Основы технологии css
Таблицы стилей (style sheets) представляют собой абстракцию, в которой стиль документа определяется отдельно от его содержания. Основная цель каскадных таблиц стилей - разделить содержимое веб-страницы (написанной, например, на HTML) и форматирование (представление) документа (CSS). Т.е., в коде html-страницы находится информация, которую видит пользователь, загрузив эту страницу в свой браузер. А вот то, в каком виде он видит эту информацию на своем экране - за это "отвечает" файл каскадной таблицы стилей.
Все CSS-правила состоят из селектора и блока объявлений (заключённого в фигурные скобки). Внутри блока объявлений (внутри фигурных скобок, проще говоря) может находиться одно или несколько объявлений, разделённых точкой с запятой. Объявление – это строка, составленная из css-свойства и его значения. Каждое правило начинается с селектора (по-русски – указателя), указывающего на те html-элементы, к которым мы собираемся применить css-правило. В блоке объявлениймы устанавливаем правила оформления выбранных нами элементов, переопределяя их свойства – размеры, цвет, бордюры, поля, положение на экране и т.д.
Три основных вида селекторов:
HTML селекторы- в качестве селектора мы используем имя того html-элемента, который хотим изменить. Например, для тега <strong> селектором будет strong. Соответственно, для тега <h1> селектором будет h1, и так далее strong {font-weight: normal; color: red;}
Селекторы класса - Удобство таких селекторов в том, что можно присвоить одно имя класса множеству html-тегов в документе и затем управлять их внешним видом, обращаясь к ним по имени класса: .myClass { font: bold 10pt verdana; } (меняем шрифт для всех тегов с классом myClass)
ID селекторы (или идентификаторы)– это некое имя, которое вы, так же, как и в случае с классами, можете применить к любому HTML-тегу. Основное отличие – ID должен быть уникален в рамках html-документа: #myObj { margin: 1em; } ( изменяем поля для элемента, у которого id=”myObj” ); span#today { margin: 1em; } ( изменяем поля для элемента span, у которого id=”today” )
Внутренние стили. Определяются атрибутом непосредственно в элементе. Мало отличается от традиционного html. Внешний вид документа трудно изменить.
Глобальные стили. Определяются тэгом STYLE с атрибутом TYPE="text/css" в контейнере <HEAD>...</HEAD>, являются универсальным средством, позволяющим не только оперативно изменять внешний вид страницы, но и и бороться с перегруженностью документа оформительскими тэгами.
Связанные стили. Определяются во внешнем файле. Позволяют всем страницам, принадлежащим одному серверу выглядеть единообразно. Для связи с файлом, на котором описана таблица стилей, используется тэг<LINK> с атрибутом REL="stylesheet".
Другие атрибуты:
• TITLE. Задает заголовок страницы, на которой с помощью тэга <STYLE>, определена таблица стилей.
• HREF. Ссылка на страницу с таблицей стилей или имя файла.
• TYPE. Тип файла, с которым нужно установить связь.
Пример
<LINK TITLE="mystyle" REL="stylesheet" HREF="style.htm" TYPE="text/css">
Наиболее популярные свойства стилей:
• BACKGROUND. Фон элемента.
• BORDER. Рамка вокруг элемента. Возможные значения: solid 0.5mm (есть рамка шириной 0.5 миллиметра), none (нет рамки).
• BORDER-COLOR. Цвет рамки. Возможные значения: blue, #993300.
• COLOR. Цвет элемента.