- •Введение
- •1. Основные понятия html
- •Глава 1 – содержание элемента html
- •2. Структура html-документа
- •2.1. Раздел документа head
- •Название документа title
- •2.2. Раздел документа body
- •2.2.1. Спецификация элемента body
- •2.2.2. Советы по использованию атрибутов тега body
- •3.2. Символьная нотация
- •3.3. Соответствие формата rgb и символьной нотации
- •4. Вывод текстовой информации
- •4.1. Абзацы
- •4.2. Управление переводом строки
- •4.3. Заголовки
- •4.4. Списки
- •4.4.1. Маркированный список
- •4.4.2. Нумерованный список
- •4.4.3. Список определений
- •4.5. Форматирование текста
- •4.5.2. Контейнер div
- •4.5.3. Отступы
- •5. Гиперссылки
- •5.1. Универсальный идентификатор ресурсов url
- •5.2. Правила записи ссылок
- •5.3. Внутренние ссылки
- •5.4. Ссылки на документы различных типов
- •5.5. Ссылки на ресурсы Интернета
- •6. Графические элементы
- •6.1. Горизонтальные линии
- •6.2. Таблицы
- •6.3. Рисунки
- •7.1 Понятие фреймов
- •7.2 Расположение фреймов
- •2.3 Вложенные наборы фреймов
- •Элемент frame
- •2.4 Определение цели фрейма
- •2.5 Альтернативное содержимое
- •2.6 Встроенные фреймы: элемент iframe
- •8. Формы
- •Каскадные таблицы стилей: назначение и возможности
- •1. Назначение каскадных таблиц стилей
- •2. Типы каскадных таблиц стилей
- •2.1 Встроенный стиль (inline css)
- •2.2. Внутренняя или внедренная таблица стилей(Internal css)
- •2.3. Внешняя или связанная таблица стилей (External css)
- •2.4. Создание файла сss
- •2.5. Импортированная таблица стилей
- •3. Свойства цвета и фона
- •4. Свойства форматирования текста
- •5. Свойства стиля оформления полей
- •6. Стратегии оформления
4. Свойства форматирования текста
обозначение |
описание |
возможные значения |
font-family |
гарнитура шрифта |
|
font-style |
начертание шрифта |
обычный: normal курсивный: italic наклонный: oblique |
font-weight |
толщина шрифта |
100, 200, ... 900 (возможно девять значений) |
font-size |
размер шрифта |
|
text-align |
выравнивание текста относительно элемента в котором он находится |
по левому краю: left по правому краю: right по центру: center по ширине: justify |
vertical-align |
положение элемента по вертикали относительно родительского элемента |
|
5. Свойства стиля оформления полей
Существуют свойства, которые определяют величину свободного пространства между внешними границами элемента и любым окружающим содержимым. Например, при использовании в теге<body> они задают величину свободного пространства вокруг выводимого содержимого страницы.
margin-top margin-right margin-bottom margin-left
Например, задает нулевое расстояние от верхней границы до тела документа: body {margin-top: 0em} Стили полей применимы для многих тегов XHTML, а не только для тега<body>.
Задание №5 Определить свойства тегов <h1>,< p> так чтобы получился следующий результат: см.результат |
6. Стратегии оформления
Используйте встроенную таблицу стилей как основной метод оформления. Это позволит объединить стили в одном разделе страницы, облегчая поиск и изменение стилей, а также преобразование встроенных стилей во внешние таблицы стилей для приложений уровня сайта.
Во встроенной таблице стилей используйте простые селекторные теги для применения общего оформления уровня страницы ко всем тегам одного типа.
Определите классы стилей, чтобы выполнять оформление через теги общего назначения, - например, теги <span> и<div>. Используйте также классы стилей, когда два или несколько тегов требуют форматирования, отличающегося или дополняющего то, что задано их простыми селекторами тегов.
Для единичных тегов, требующих уникального оформления, присвойте тегу значение id и задавайте его оформление с помощью селектора ID во встроенной таблице стилей.
Используйте линейные таблицы стилей там, где требуется одноразовое оформление и удобно переопределить оформление с помощью таблицы стилей, закодированной внутри тега. Слишком большое количество линейных таблиц стилей трудно отслеживать в случае изменений; к тому же, одинаковые линейные стили необходимо изменять в нескольких местах, что ведет к возможным пропускам и ошибкам.