
- •Учебник html
- •Основы html
- •Что такое Internet
- •Что такое www
- •Что такое url
- •Что такое Web-браузер
- •Что такое гиперссылка
- •Что такое html
- •С помощью чего создаются Web-страницы
- •Обязательные тэги
- •Создание абзаца, символов пробела, заголовка
- •Создание заголовков
- •Добавление комментариев в html-код
- •Вставка спецсимволов
- •Предварительное форматирование текста
- •Выделение фрагментов текста
- •Выбор шрифта
- •Изменение размера шрифта
- •Выбор цвета шрифта
- •Изменение цвета фона
- •Поля страницы
- •Моноширинные шрифты
- •Блоки цитат
- •Нумерованный список
- •Маркированный список
- •Многоуровненвый список
- •Списки определений
- •Вставка изображения
- •Добавление фона
- •Обтекание графики текстом
- •Выравнивание текста
- •Пустая область вокруг изображения
- •Горизотнальная линейка
- •Списки с графическими маркерами
- •Преобразование формата изображения
- •Задание размеров изображения
- •Увеличение размеров изображения
- •Уменьшение изображения
- •Обрезка изображения
- •Уменьшение разрешения изображения
- •Уменьшение глубины цвета изображения
- •Прозрачность фона изображения
- •Чередующиеся изображения gif
- •Создание таблицы
- •Обрамление таблицы
- •Заголовок таблицы
- •Группирование столбцов
- •Группирование строк
- •Задание цвета элементов таблицы
- •Графический фон таблицы
- •Выравнивание данных в таблице
- •Изменение размеров таблицы
- •Слияние ячеек таблицы
- •Улучшение внешнего вида таблицы
- •Отображение границ таблицы
- •Перенос слов в ячейках таблицы
- •Вложенные таблицы
- •Обтекание таблицы текстом
- •Гиперссылка на другую страницу
- •Гиперссылка в пределах страницы
- •Почтовая гиперссылка
- •Открытие страниц в новом окне
- •Цвет текста гиперссылок
- •Порядок перехода по гиперссылкам
- •Создание фреймов
- •Достоинства и недостатки фреймов
- •Полосы прокрутки фреймов
- •Изменение границ фреймов
- •Плавающие фреймы
- •Что такое формы.
- •Создание бегущей строки
- •Размещение текста поверх изображения
- •Создание всплывающих подсказок
- •Создание водяного знака
- •Внешний лист стилей
- •Частное определение стилей
- •Атрибут id
- •Класс стилей
- •Форматирование произвольного фрагмента Вэб-страницы
- •Пустые области вокруг элементов Вэб-страницы
- •Обтекание текстом
- •Задание размеров
- •Способ воспроизведения элементов
- •Разрыв страницы
- •Относительное позиционирование
- •Абсолютное позиционирование
Задание размеров
Для задания высоты и ширины размеров любого элемента Вэб-страницы служат свойства height, width.
В качестве значений высоты и ширины можно задавать величины, выраженные в пунктах, пикселях, миллиметрах, сантиметрах, дюймах, пиках, а также единицах ex, em. При задании размера при помощи единиц ex, функцию единицы измерения выполняет высота строчной буквы "x" текущего шрифта. em - позволяет указать размер относительно высоты шрифта в целом.
Относительное и абсолютное позиционирование элементов
Способ воспроизведения элементов
Разрыв страницы
Относительное позиционирование
Абсолютное позиционирование
Способ воспроизведения элементов
Свойство display позволяет задать способ воспроизведения элемента Вэб-страницы.
Значение block заставляет отображать элементы в виде объектов уровня блока. Такие объекты отделяются от остальных элементов страницы пустыми строками. Этим значением пользуются в тех случаях, когда надо воспроизвести элементы (графика, гиперссылки) на отдельных строках страницы.
Значение inline трактует элементы как встроенные объекты. Такие объекты размещаются на тех же строках страницы, что и соседние. Этим значением пользуются тогда, когда надо принудительно разместить элементы уровня блока (заголовки, например) в общем потоке данных.
Значение list-item служит для придания объекту статуса элемента списка. Такие объекты воспроизводятся как элементы списка, снабженные маркерами.
Значение none скрывает все элементы страницы, описанные с помощью определенного дескриптора. В этом случае соседние элементы сдвигаются, занимая место скрытых.
Разрыв страницы
Для указания места разрыва страницы при печати документа используются свойства page-break-before, page-break-after со значениями always, avoid.
Свойство page-break-before со значением always указывает браузеру располагать символы разрыва страницы перед каждым элементом, описанным с помощью конкретного дескриптора. Так, например, при использовании этого свойства в определении стиля для тэга Н3 браузер будет печатать разделы документа, начинающиеся с заголовка Н3 на новой странице.
Свойство page-break-after со значением always указывает браузеру располагать символы разрыва страницы после элемента.
Для предотвращения вставки браузером символов разрыва страницы перед или после определенных элементов, надо использовать те же свойства, но со значением avoid.
Относительное позиционирование
Для относительного позиционирования элементов Вэб-страницы служит свойство position со значением relative. При этом браузер не влияет на положение других элементов Вэб-страницы.
Для указания направления смещения служат свойства top, bottom, left, right.
Величину смещения можно задавать в пунктах, пикселях, миллиметрах, сантиметрах, дюймах, пиках, а также единицах ex, em. При задании смещения при помощи единиц ex, функцию единицы измерения выполняет высота строчной буквы "x" текущего шрифта. em - позволяет указать размер относительно высоты шрифта в целом.
Пример:
HTML-код:
<style> p.rel{position:relative;bottom:27px;left:1px;color:red} </style> ... <p>Пример относительного позиционирования</p> <p class="rel">Пример относительного позиционирования</p> |
Отображение в браузере:
Пример относительного позиционирования Пример относительного позиционирования |