- •Учебник html
- •Основы html
- •Что такое Internet
- •Что такое www
- •Что такое url
- •Что такое Web-браузер
- •Что такое гиперссылка
- •Что такое html
- •С помощью чего создаются Web-страницы
- •Обязательные тэги
- •Создание абзаца, символов пробела, заголовка
- •Создание заголовков
- •Добавление комментариев в html-код
- •Вставка спецсимволов
- •Предварительное форматирование текста
- •Выделение фрагментов текста
- •Выбор шрифта
- •Изменение размера шрифта
- •Выбор цвета шрифта
- •Изменение цвета фона
- •Поля страницы
- •Моноширинные шрифты
- •Блоки цитат
- •Нумерованный список
- •Маркированный список
- •Многоуровненвый список
- •Списки определений
- •Вставка изображения
- •Добавление фона
- •Обтекание графики текстом
- •Выравнивание текста
- •Пустая область вокруг изображения
- •Горизотнальная линейка
- •Списки с графическими маркерами
- •Преобразование формата изображения
- •Задание размеров изображения
- •Увеличение размеров изображения
- •Уменьшение изображения
- •Обрезка изображения
- •Уменьшение разрешения изображения
- •Уменьшение глубины цвета изображения
- •Прозрачность фона изображения
- •Чередующиеся изображения gif
- •Создание таблицы
- •Обрамление таблицы
- •Заголовок таблицы
- •Группирование столбцов
- •Группирование строк
- •Задание цвета элементов таблицы
- •Графический фон таблицы
- •Выравнивание данных в таблице
- •Изменение размеров таблицы
- •Слияние ячеек таблицы
- •Улучшение внешнего вида таблицы
- •Отображение границ таблицы
- •Перенос слов в ячейках таблицы
- •Вложенные таблицы
- •Обтекание таблицы текстом
- •Гиперссылка на другую страницу
- •Гиперссылка в пределах страницы
- •Почтовая гиперссылка
- •Открытие страниц в новом окне
- •Цвет текста гиперссылок
- •Порядок перехода по гиперссылкам
- •Создание фреймов
- •Достоинства и недостатки фреймов
- •Полосы прокрутки фреймов
- •Изменение границ фреймов
- •Плавающие фреймы
- •Что такое формы.
- •Создание бегущей строки
- •Размещение текста поверх изображения
- •Создание всплывающих подсказок
- •Создание водяного знака
- •Внешний лист стилей
- •Частное определение стилей
- •Атрибут id
- •Класс стилей
- •Форматирование произвольного фрагмента Вэб-страницы
- •Пустые области вокруг элементов Вэб-страницы
- •Обтекание текстом
- •Задание размеров
- •Способ воспроизведения элементов
- •Разрыв страницы
- •Относительное позиционирование
- •Абсолютное позиционирование
Внешний лист стилей
Внешний лист стилей позволяет сконцентрировать информацию о форматировании сайта в одном файле. Для того, чтобы сослаться на внешний лист стилей надо в теле <HEAD> после заголовка <TITLE> </TITLE> прописать следующую строчку
<link rel="stylesheet" href="../style.css" type="text/css">
Атрибут href указывает путь к файлу внешнего листа стилей. Данную строку надо прописывать в тексте всех Вэб-страниц, где надо использовать внешний лист стилей.
Таким образом, изменения, вносимые в файл style.css, сразу отображаются на всех страницах, ссылающихся на этот файл.
Частное определение стилей
Если надо применить какой-либо стиль частным образом, по отношению к отдельному экземпляру дескриптора, то для этого надо воспользоваться атрибутом STYLE. Такой прием позволяет воспользоваться всеми преимуществами, предоставляемыми стилями, избегая обязанности создавать листы стилей. Частное использование стилей можно пользовать даже в том случае, если страница уже содержит внутренний или ссылку на внешний лист стилей, т.к. частный стиль имеет наивысший приоритет.
Пример:
HTML-код:
<p>Стандартный абзац</p> <p style="font-style:italic; color:red; text-align:right">Абзац с применением частного стиля</p> |
Отображение в браузере:
Стандартный абзац Абзац с применением частного стиля |
Атрибут id
Если надо применить стиль к отдельному элементу Вэб-страницы, то надо воспользоваться атрибутом ID.
Для этого надо нужному тэгу элемента страницы назначить идентификатор. После этого можно определить во внутреннем или внешнем листе стилей свойства данного элемента. Заданные признаки форматирования будут установлены только для элемента, отмеченного указанным идентификатором.
<STYLE>
P#ital{font-style:italic}
<STYLE>
Использование атрибута ID для задания стилей предпочтительней перед частным применением стилей, т.к. позволяет разместить описание стилей более компактно.
Пример:
HTML-код:
<p ID="ital">Абзац с применением атрибута ID</p> |
Отображение в браузере:
Абзац с применением атрибута ID |
Класс стилей
В случае, когда необходимо изменить стиль элементов страницы, описываемых определенным дескриптором, надо создать класс для этого дескриптора. Например, некоторые абзацы мы хотим выделять курсивом. Тогда надо сделать соответствующий класс (скажем P.ital) и пользоваться им в нужном месте.
Чтобы создать класс, надо указать требуемый дескриптор и задать имя класса в тексте внутреннего или внешнего листа стилей.
<STYLE>
P.ital{font-style:italic}
<STYLE>
В тексте Вэб-страницы, где надо использовать нужный стиль, надо сделать ссылку на созданный класс. Элементы, относящиеся к классу, унаследуют как свойства, заданные в определении класса, так и признаки форматирования, указанные в листе стилей.
Пример:
HTML-код:
<p class="ital">Абзац с применением класса стиля</p> |
Отображение в браузере:
Абзац с применением класса стиля |
Можно создать базовый класс. Такой класс можно применять по отношению к нескольким дескрипторам. Определяя базовый класс, надо опустить наименование дескриптора и использовать только символ точки и имя класса.
<STYLE>
.ital{font-style:italic}
<STYLE>