- •Часть 2 Язык гипертекстовой разметки html. Расширенные возможности
- •Определение типа документа
- •Стилевое оформление сайтов
- •Создание таблицы стилей
- •Атрибут style
- •Создание специальных классов
- •Связывание и внедрение таблиц стилей
- •Свойства и стили
- •Создание сайтов с помощью фреймов Понятие фрейма
- •Добавление фреймов
- •Имена и целевые объекты фреймов
- •Вложенные фреймы
- •Использование мультимедийных элементов и jaVa-приложений Понятие мультимедиа
- •Причины использования мультимедиа
- •Типы файлов
- •Связывание или внедрение
- •Мультимедийные элементы на страницах Добавление гипермедиассылок
- •Внедрение мультимедийных элементов
- •Внедрение QuickTime
- •Формат Windows Media
- •Работа с Java
- •Java-апплеты
- •Стили сайтов: разработка, доступность и глобализация Стили сайтов
- •Базовый сайт
- •Глобализация
- •Публикация веб-сайтов
- •Поставщики услуг Интернета
- •Бесплатные серверы
- •Доступ к дисковому пространству сервера
- •Библиографический список
- •Содержание
- •Часть 2 Язык гипертекстовой разметки html. Расширенные возможности
- •620002, Екатеринбург, ул.Мира, 19
- •620002, Екатеринбург, ул.Мира, 19
Связывание и внедрение таблиц стилей
Напоминаем, что существует два различных метода определения таблиц стилей. Первый: внедрение контейнера <style> в заголовок документа. Этот метод используется, когда таблица стилей распространяет свое действие на ту страницу, в которую она включена.
Второй метод: оформить таблицу стилей в виде отдельного файла и связать его с нужными веб-документами. Файл с таблицей должен сохраняться с расширением .css.
Пример. Файл с таблицей стилей (сохранен с именем mystyle.css в том же каталоге, что и главная страница сайта).
<!-- Описание правил -->
h1 {
font-family: Arial;
font-size: 24 pt;
word-spacing: 2 pt;
}
Для подключения файла к документу используется элемент <link/>, который помещается в заголовок.
<head>
<title> Главная страница </title>
<link rel="stylesheet" href="mystyle.css"/>
</head>
Следующий пример представляет собой страницу, показанную на рис. 1, с использованием файла с таблицей стилей.
Пример. Файл с таблицей стилей и веб-страница, использующая таблицу.
<!-- файл tabl1.css (сохранен с именем tabl1.css в одной папке с главной страницей) -->
h1 {color:black}
h2 {color: red}
p.kr {color:blue}
.my {color:green}
<!-- веб-страница -->
<!DOCTYPE html
PUBLIC "\/W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xlmns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="tabl1.css"/>
</head>
<body>
<h1> Обычный заголовок </h1>
<h2> Красивый заголовок</h2>
<p class="kr"> Прекрасный текст</p>
<p class="my"> Прекраснейший текст</p>
</body>
</html>
Свойства и стили
Таблица 1
Текстовые стили
Свойство |
Значение |
Пример |
Комментарий |
word-spacing |
Число и единицы измерения |
1pt, 4mm, 1in |
Промежуток между словами |
letter-spacing |
-------//-------- |
3pt, +1 |
Промежуток между буквами |
line-height |
-------//-------- |
4pt |
Высота строки |
text-decoration |
Значение |
underline, line-trough, box, blink, none |
Оформление шрифта |
text-transform |
-------//-------- |
capitalize, lowercase, uppercase, none
|
Преобразование текста |
text-indent |
Число и единицы измерения или проценты |
1in, 5% |
Абзац |
vertical-align |
Значение или проценты |
baseline, sub, sup, top, midlle, 5% |
Выравнивание по вертикали |
text-align |
Значение |
left, right, center, justify |
Выравнивание по горизонтали |
Таблица 2
Свойства шрифтов
Свойство |
Значение |
Примеры |
font-family |
Название шрифта |
Arial, Serif |
font-size |
Число/процент |
12pt, 120% |
font-weight |
Число/значение |
normal, bold, bolder 100…900 |
font-style |
Название стиля |
italic, normal |
font-variant |
-------//-------- |
normal, small-caps |
font |
Комбинация |
12ptSerif |
color |
Слово/число |
red, rbg(100, 15, 36) |
Таблица 3
Фон и цвет
Свойство |
Значение |
Примеры |
background-color |
Название или значение |
white, rgb(100,100,45) |
background-image |
url ( ) |
url (image.gif) |
background-repeat |
Название режима |
repeat, repeat-x, repeat-y, no-repeat |
background-attachment |
-----//----- |
scroll, fixed |
background-position |
Направление или % |
top, left, center, 20% |
background |
Комбинация значений |
white, url(image.gif) |
Таблица 4
Расположение и вид блоков
Свойство |
Значение |
Примеры |
margin (поля) |
Длина или проценты |
1in, 5%, 12pt |
padding (поля) |
-------//-------- |
1in, 10%, 14pt |
border (граница) |
Ширина/стиль/цвет |
medium dashed red |
width (ширина) |
Длина или % |
10%, 0.5 in |
height (высота) |
-------//--------- |
12 pt |
float (плавающее положение) |
Направление |
left, right, none |
clear (обтекание) |
--------//-------- |
left, right, none, both |
Свойства margin и padding определяют поля. Различие в том, что margin задают дополнительные пробелы за границами блока, а padding – включают их между границами и текстом.
Свойство border задает ширину, стиль и цвет блокового элемента. Ширина задается словами: thin, medium, thick или числовым значением. Стили бывают: none, dotted, dashed, solid, double, groove, ridge, inset, outset.
Свойство float – инструмент для создания «плавающих» блоков, обтекаемых текстом.
Свойство Clear определяет, можно ли другим элементам обтекать данный элемент с какой-то конкретной стороны.