- •Часть 2 Язык гипертекстовой разметки html. Расширенные возможности
- •Определение типа документа
- •Стилевое оформление сайтов
- •Создание таблицы стилей
- •Атрибут style
- •Создание специальных классов
- •Связывание и внедрение таблиц стилей
- •Свойства и стили
- •Создание сайтов с помощью фреймов Понятие фрейма
- •Добавление фреймов
- •Имена и целевые объекты фреймов
- •Вложенные фреймы
- •Использование мультимедийных элементов и jaVa-приложений Понятие мультимедиа
- •Причины использования мультимедиа
- •Типы файлов
- •Связывание или внедрение
- •Мультимедийные элементы на страницах Добавление гипермедиассылок
- •Внедрение мультимедийных элементов
- •Внедрение QuickTime
- •Формат Windows Media
- •Работа с Java
- •Java-апплеты
- •Стили сайтов: разработка, доступность и глобализация Стили сайтов
- •Базовый сайт
- •Глобализация
- •Публикация веб-сайтов
- •Поставщики услуг Интернета
- •Бесплатные серверы
- •Доступ к дисковому пространству сервера
- •Библиографический список
- •Содержание
- •Часть 2 Язык гипертекстовой разметки html. Расширенные возможности
- •620002, Екатеринбург, ул.Мира, 19
- •620002, Екатеринбург, ул.Мира, 19
Создание таблицы стилей
Имеются различные методы, использующиеся при реализации таблиц стилей.
Атрибут стилей. Применяя стилевые атрибуты различных элементов XHTML, можно присваивать им определенные характеристики.
Определение стиля элемента. С помощью таблиц стилей можно определять элементы (например, такие как <p>, <h1>, <blockquote> и т. д.). Это дает единообразие элементов по всему веб-документу.
Определение классов элементов. Можно создавать собственные классы элементов, указывая их состав. Например, определив один раз, что абзац будет отображать текст красным цветом, затем при создании страницы можно сослаться на определение этого класса.
Таблицы стилей можно реализовать двумя способами. Первый: включить информацию о стилях внутрь веб-страницы (определяя ее либо в секции <head>, либо внутри каждого конкретного элемента). Второй способ: связать веб-страницу с отдельным файлом, в котором содержатся исключительно определения стилей.
Атрибут style
С помощью атрибута style можно задать стиль любого элемента XHTML:
<p style="align: right">Мы рождены, чтоб сказку сделать былью…</p>
Для задания нескольких свойств одновременно их необходимо разделять точкой с запятой:
<p style="align: right; font-style: italic; background: yellow"> …</p>
Элемент <style>
Атрибут style используется для задания свойств отдельных элементов, расположенных в конкретном месте страницы. Для создания единообразного документа используется элемент style. Именно с его помощью в страницу включается таблица стилей. Элемент style должен размещаться в секции <head>:
<head>
<style type="text/css">
элемент {свойство: значение}
</style>
</head>
Пример:
<head>
<style type="text/css">
p {font-style: italic}
</style>
</head>
Описанный элемент (в данном примере – абзац) называется селектором; все, что располагается в фигурных скобках – определением. Все вместе называется правилом.
Элемент <style> может содержать несколько правил. Каждое из них заканчивается закрывающей скобкой.
Пример:
<head>
<style type=”text/css”>
p {font-style: italic}
h1 {color: blue}
ul {list-type: disc}
</style>
</head>
Каждое определение может содержать несколько свойств:
<style type="text/css">
p {font-style: italic;
background: yeloow;
align: center
}
</style>
Одно и то же определение можно применить сразу к нескольким элементам. Для этого надо написать несколько селекторов подряд, разделяя их запятыми.
Пример:
<style type="text/css">
p, h1, h2, h3 {font-style: italic}
</style>
Отметим еще один момент. Таблицы стилей обладают свойством, напоминающим наследование. Например, если какой-либо стиль присвоен элементу <table>, то входящие в него элементы (строки и ячейки) будут иметь этот стиль. То же самое правило касается элемента <body> и вообще всех элементов, внутри которых есть другие элементы. Действие стиля распространяется на них без ограничений до тех пор, пока не встретится другой стиль.
Пример:
<style type=”text/css”>
body {font-family: Arial; font-size: 12pt}
ul {font-family: Times New Roman}
</style>
В этом примере шрифт Arial будет использован для всех элементов тела страницы, кроме неупорядоченных (маркированных) списков.