- •Лабораторный практикум
- •Лабораторная работа №1 Основы разметки гипертекста html
- •Введение
- •Заголовки
- •Оформление текста
- •Создание списков
- •Гиперссылки
- •Изображения в html-документе
- •Задание 1.
- •Задание2.
- •Задание 3
- •Лабораторная работа №2 Создание таблиц в html-документах
- •Создание таблицы
- •Задание
- •Контрольные вопросы.
- •Лабораторная работа №3 Каскадные таблицы стилей
- •Введение
- •Внутренние таблицы стилей.
- •Встроенные таблицы стилей.
- •Структура правила.
- •Селекторы классов.
- •Универсальные селекторы.
- •Комментарии css.
- •Объединение css и html.
- •Элемент style.
- •Директива @import.
- •Задание 1.
- •Задание 2.
- •Задание 3.
- •Стандартные имена для фреймов
- •Специальные эффекты, получаемые с помощью атрибута target
- •Задание
- •Контрольные вопросы
- •Лабораторная работа №5 Формы
- •Введение
- •Элементы ввода данных
- •Многострочный текст, атрибуты текстовых элементов
- •Альтернативная кнопка, перегрузка атрибутов формы
- •Выбор из списка
- •Генерирование открытого и секретного ключей
- •Другие элементы форм
- •Атрибуты элементов ввода
- •Задание.
- •Контрольные вопросы.
- •Лабораторная работа №6 Объектно Ориентированное Программирование в JavaScript.
- •Основные понятия:
- •Объект.Метод("параметры метода")
- •Значение по умолчанию
- •Применяется к тегам
- •Событие onchange
- •Событие onclick
- •Событие ondblclick
- •Задание №1
- •Размещение JavaScript на html-странице
- •Типы данных
- •Объявления переменных
- •Переменные
- •Типы переменных
- •Массивы
- •Объекты JavaScript
- •Объект Array
- •Оператор цикла
- •Условные операторы
- •Объектная модель JavaScript
- •Объекты и Свойства
- •Функции и Методы
- •Определение Методов
- •Создание Новых Объектов
- •Использование this для Ссылок Объекта
- •Объектная модель браузера
- •Объект window
- •Лабораторная работа № 8 Изучение языка php
- •Общие правила построения php-программы
- •Задание
- •1. Вывод на экран и переменные в рнр.
- •2. Передача параметров по ссылке, передача параметров из формы (get и post -- запросы).
- •3. Динамическое формирование страницы.
- •4. Работа с файлами.
- •Лабораторная работа № 10 Работа вебсайта
- •Как еще можно прописать сайт в Денвере?
- •Лабораторная работа № 11 Файловый ввод/вывод
- •1) Классическая модель веб-приложения
- •2) Модель ajax
- •Лабораторная работа №12 Внедрение рисунков
- •1. Основные положения
- •Рисование прямоугольников
- •Рисование составных фигур Составные фигуры состоят из нескольких соединенных простых объектов (таких как линии, круги и т.Д.)
- •Структура программы выглядит следующим образом
- •С помощью свойства lineCap можно оформлять кончики линии
- •Можно создавать более сложные градиенты, которые изменяют цвет в нескольких точках.
- •Папоротник
- •Гипно-спираль
- •Вставка изображений
- •4. Вложение изображения с помощью data: url
- •Рисование изображений
- •Пример 1 использования изображения
- •Масштабирование
- •Пример 2 использования изображения
- •Разрезание изображений
- •Пример 3 использования изображения
- •Пример галереи
- •Javascript графика: Объект Image.
- •Javascript графика: src и lowsrc.
- •Изменение картинки.
- •Мультипликация в JavaScript. Мультипликация.
- •Запуск мультипликации
- •Запуск и остановка мультипликации
Структура правила.
Каждое правило имеет две основные части: Селектор (selector) и блок объявлений (declaration block). Блок объявлений состоит из одного или более объявлений, а каждое объявление представляет собой сочетание свойства (property) и значения (value). Части правила показаны на рис.1.
Рис. 1. Структура правила CSS
Обратите внимание на описание стиля. Запись производится в фигуных скобках, вместо знака присваивания используется двоеточие, а вместо разделителя точка с запятой.
Селектор, расположенный в левой части правила, определяет на какие части документа распространяется правило. В правой части находится блок объявлений, образованный одним или несколькими объявлениями. Каждое объявление представляет собой сочетание свойства CSS и значение этого свойства.
На представленном выше рисунке, в качестве селектора выбраны элементы h1, а блок объявлений содержит два объявления. Первое объявление определяет, что согласно правилу цвет (color) указанных элементов документа будет красным (red), а второе – что фон (background) этих элементов будет желтым (yellow). Таким образом, все элементы h1 этого документа будут выводится красным цветом на желтом фоне.
Группировка селекторов.
Передоложим, необходимо чтобы текст элементов h2 и абзацев был серого цвета. Для этого в левой части правила, располагаются селекторы (h2 и p), которые разделены запятой, а в правой части определяется объявление, согласно которому определяется соответствующий стиль:
h2, p {color:gray;}
При это нет никаких ограничений на количество объединяемых
в группу селекторов:
body, table, th, td, h1, h2, h3, h4, p {color:gray;}
Группировка объявлений.
Селекторы возможно группировать в одно правило, а следовательно, также можно группировать и объявления. Предположим, необходимо, чтобы текст всех элементов h1 был представлен шрифтом Helvetica фиолетового цвета высотой в 18 пикселов на фоне цвета морской волны. Данные стили возможно написать следующим образом:
h1 {font: 18px Helvetica;}
h1 {color: purple;}
h1 {background: aqua;}
Представленный выше способ не совсем эффективен, если подобный список создается для элемента, у которого будет 10 или 15 стилей. В таком случае объявления можно сгруппировать следующим образом:
h1 {
font: 18px Helvetica;
color: purple;
background: aqua;
}
Селекторы классов.
Самый распространенный способ применения стилей без учета элементов состоит в том, чтобы обратиться к селекторам классов (class selectors), позволяющих назначать стили независимо от элементов документа. Однако сначала придется описать класс. Для этого необходимо в тегах <style> </style> объявить класс. Обратите внимание, что имя класса начинается с точки. Далее в фигурных скобках описывается стиль класса.
Чтобы связать стили селектора класса с элементом, необходимо присвоить соответствующее значение атрибуту class данного элемента. В представленном ниже примере, значение warning было присвоено двум элементам: первому абзацу и элементу span во втором абзаце.
<html>
<head>
<title></title>
<style type="text/css">
.warning {font-weight: bold;}
</style>
</head>
<body>
<p class="warning"> CSS (Cascading Style Sheets)</p>
<p>Технология описания внешнего вида документа, написанного языком разметки. Преимущественно используется как средство оформления веб-страниц в форматах: <span class="warning">HTML, XHTML, XML.
</span>CSS используется создателями веб-страниц для задания цветов, шрифтов, расположения и других аспектов представления документа… </p>
</body>
</html>
В сочетании с показанным примером разметки, применение данного правила приводит к результату, показанном на рис. 2. Стиль font-weight будет применен ко всем элементам, атрибут класс которых имеет значение warning.
Рис. 2. Пример применения селекторов класса
Теперь селектор выбирает только элементы р, у которых значение атрибута class равно warning, и игнорирует все другие элементы независимо от их класса.