- •Лабораторна робота №1 Створення найпростіших Web-Сторінок. Форматування тексту засобами мови html
- •3.1 Практичні завдання:
- •Лабораторна робота №3 Каскадні таблиці стилів
- •Способи застосування css
- •Чому каскадні?
- •Спадкування
- •Синтаксис css
- •Псевдокласи
- •Коментарі
- •Параметри css
- •Одиниці виміру в css
- •Завдання кольору в css
- •Лабораторна робота №4 Розмітка сторінок за допомогою блоків (div) і css. Позиціонування
- •Теоретичні відомості
- •Як це робиться
- •Практичні завдання
- •Лабораторна робота №5 Форми
- •Теоретичні відомості:
- •Елементи керування форми
- •Списки вибору.
- •Практична частина
- •Лабораторна робота №6 Фрейми. Карти зображень
- •Теоретичні відомості: Фрейми
- •Карти зображень
- •Практична частина
- •Лабораторна робота №7 Динамічний html. Введення в Javascript
- •Теоретичні відомості:
- •Синтаксис мови програмування Javascript
- •Функції
- •Вбудовані об'єкти мови програмування Javascript
- •Вивід даних в Javascript
- •Практична частина
- •Лабораторна робота №8 Динамічний html. Об'єкти JavaScript
- •Теоретичні відомості: Елементи керування
- •Властивості об'єкта Document
- •Методи об'єкта Document
- •Практична частина
- •Лабораторна робота №9 Встановлення, налаштування Denwer. Мова програмування рнр.
- •Теоретичні відомості:
- •Створення власного домену на локальному комп'ютері
- •Принципи обробки сценаріїв php
- •Включення фрагментів рнр у html-код
- •Стандартні дескриптори
- •Короткі дескриптори
- •Дескриптори в стилі asp
- •Практична частина
- •Лабораторна робота №10 Мова програмування рнр. Змінні, типи даних, операції, керуючи оператори.
- •Теоретичні відомості
- •Типи даних
- •Строковий тип
- •Операції
- •Керуючі оператори
- •Практична частина
- •Лабораторна робота №11 Мова програмування рнр. Цикли. Структура вибору. Масиви. Функції.
- •Теоретичні відомості:
- •Використання функцій
- •Передача параметрів у функції
- •Практична частина
- •Лабораторна робота №12 Серверні додатки. Бібліотечні функції php
- •Теоретичні відомості
- •Функції обробки рядків
- •Практична частина
- •Лабораторна робота №13 Робота з базами даних. Утиліта РhpMyAdmin.
- •Теоретичні відомості
- •Термінологічний словник
- •Практична частина
- •Лабораторна робота №14 Доступ до бази даних MySql з використанням мови рнр.
- •Теоретичні відомості
- •Доступ до бази даних MySql з використанням мови рнр
- •MySql і проблеми безпеки
- •Екранування спецсимволів
- •Шаблони запитів і placeholders
- •Практична частина
- •Лабораторна робота №15 Виконання запитів до бази даних.
- •Теоретичні відомості
- •Вибір за шаблоном.
- •Функції
- •Практична частина
- •Додаток 1. Основні теги html
Спадкування
Деякі значення успадковуються дочірніми елементами (тегами). Припустимо, що є елемент H1, у якім розташований елемент виділення EM:
<H1>Даний заголовок <EM>дуже</EM> важливий!</H1>
Якщо для елемента EM не заданий колір, то слово "дуже" унаслідує колір батьківського елемента. Таким чином, якщо для H1 визначений синій колір, те й елемент EM буде представлений, синім кольором.
Визначення властивостей стилю, який використовується в документі за замовчуванням, можна здійснити в кореневому елементі дерева даного документа. Наприклад, у мові HTML цю можливість можна реалізувати за допомогою елементів HTML або BODY.
Наприклад, властивість 'color' є наслідуваним, тому всі нащадки елемента BODY унаслідують колір 'black':
BODY { color: black; }
Значення, задані у відсотках, не спадковуються, а значення, що обчислюються, унаслідуються.
Нехай задана наступна таблиця стилю:
BODY { font-size: 10pt }
H1 { font-size: 120% }
і фрагмент документа:
<BODY>
<H1>Деякий <EM>великий</EM> заголовок</H1>
</BODY>
Властивість 'font-size' елемента H1 буде мати обчислене значення '12pt' (120% від 10pt властивості, що є значенням, батьківського елемента). Тому що значення, що обчислюється, властивості 'font-size' є наслідуваним, то елемент EM також буде мати обчислене значення '12pt'.
Синтаксис css
Всі оголошення CSS ("селектори") записуються у фігурних дужках:
ТЕГ:псевдокласс.клас { характеристика1: значення1; характеристика2: значення2}
Опис кожного класу робиться за допомогою конструкції, подібної цієї:
.small { font-size: 9pt; }
Спочатку вказується ім'я класу - воно може бути довільним, але бажано давати осмислену назву. Далі, в фігурних дужках {} перелічуються всі необхідні параметри для даного класу. Параметри відділяються один від іншого точка з комою.
.small { font-size: 9pt; color: #eeeeee; text-align: center; }
Універсальний клас - може бути застосований до будь-якого тегу, ім'я класу починається із точки.
Приклад:
<p class=small>Накладаємо стиль на цей текст</p>
<td class=small>Накладаємо стиль на цей текст</td>
Тегові класи - можуть бути застосовані до конкретного тегу, ім'я класу починається із вказівки тегу, після крапки записується ім'я класу.
Приклад:
p.small { font-size: 9pt; }
Клас, певний чином, спрацює тільки в тому тегу, для якого він призначений, а для всіх інших буде ігнорований:
<p class=small>Цей текст буде виведений стилем small</p>
<td class=small>А цей залишиться незмінним</td>
Ми можемо визначати параметри не тільки для одного тегу, але відразу для декількох. Для цього у визначенні стилю досить перелічити їх через кому:
P, TD, LI { font-size: 9pt; color:green;}
У випадку перевизначення існуючих тегів, в описі стилю можна вказувати не всі параметри, а лише ті з них, які ми прагнемо змінити. Всі інші параметри приймуть значення за замовчуванням, які для різних тегів різні.
Псевдокласи
В CSS є таке поняття як псевдоклас. На відміну від звичайного класу, дія псевдокласа поширюється не на весь текст, до якого застосований даний стиль, а лише на його частину і можливо лише в певному стані. Щоб було зрозуміліше, давайте розберемо ефект, при якім посилання підкреслюються лише при наведенні на них курсору. Ефект досить розповсюджений, і його можна спостерігати в тому числі і на цьому сайті. От фрагмент таблиці стилів, який дозволяє досягати вищеописаного ефекту:
a { text-decoration: none; }
a:hover { text-decoration: underline; }
Верхній рядок - це перевизначення стандартного тегу <a>, яке забороняє підкреслювати посилання, а от нижня - це визначення стилю для псевдокласса hover, який описує стиль посилання в момент, коли курсор перебуває над посиланням.
Інший приклад псевдокласса - визначення буквици спочатку абзацу:
p:first-letter { font-size: 200%; font-weight: bold; }
Помітьте, що і в тому, і в іншому випадку дія стилю поширюється або на певний стан (користувач збирається клацнути по посиланню), або на фрагмент тексту (змінюється тільки перша буква абзацу). В цьому і полягає зміст псевдокласів.