HTML и CSS на примерах

02 Авг 2011

 

На практических примерах раскрываются HTML и CSS в плане решения различных аспектов создания Приведены возможности и средства по оформлению текста и его вида. Описаны основные графические форматы, которые используются на Освещены вопросы с рисунками, ссылками, списками, линиями и рамками. Раскрыты возможности видом таблицы, ускорения табличных данных, использования шаблонов. Рассмотрены элементы их параметры и примеры оформления с помощью цвета, и рамок. Приведены способы выравнивания рисунков, слоев и текста, использования отступов и полей и другие приемы оформления Даются подробные сведения об особенностях популярных браузеров и о как они работают с тегами и стилями. Объясняется, как учитывать различия браузерами и создавать универсальные документы, которые корректно в них отображаться. Детальные примеры и пошаговое описание действий приведенные рекомендации на практике.

Содержание:

Введение

Для кого предназначена книга

Как организована книга

Соглашения, используемые в книге

Поддержка

Глава 1. Текст

Аз и буки науки

Шрифты

Шрифты с засечками

Шрифты без засечек

Моноширинный шрифт

Декоративные шрифты

Размер текста

Насыщенность

Наклон текста

Начертание

Работа со шрифтами

Установка шрифта

Цвет текста

Размер символов

Изменение насыщенности

Курсивный текст

Верхний и нижний индекс

Капитель

Прописные и строчные буквы

Работа с текстом

Подчеркивание текста

Использование тега HR

Применение таблиц

Использование стилей

Создание буквицы

Буквица в тексте

Буквица на поле

Выступающий инициал

Отступ первой строки

Пробелы словами

Выравнивание текста

Отбивка строк

Интерлиньяж (межстрочное расстояние)

Межбуквенный интервал

Глава 2. Изображения

Добавление

Форматы графических файлов

GIF

JPEG

PNG-8

PNG-24

Рамка вокруг изображения

Выравнивание

Создание паспарту

Использование таблиц

Применение стилей

Подрисуночная подпись

Обтекание изображения текстом

Использование параметра align тега IMG

Применение таблиц

Использование стилей

Альтернативный текст

Добавление фонового рисунка на веб-страницу

Использование фонового рисунка

Фоновый рисунок

Создание тени

Панель на изображении в Internet Explorer

Карты-изображения

Глава 3. Ссылки

Создание ссылок

Виды ссылок

Ссылки без подчеркивания

Подчеркивание ссылок при наведении на них курсора мыши

Изменение цвета ссылки

Изменение цвета подчеркивания ссылки

Декоративное подчеркивание ссылок

Ссылки разных цветов

Альтернативные способы выделения ссылок

Использование фонового цвета

Рамка вокруг ссылки

Добавление волнистой линии под ссылкой

Рисунки возле внешних ссылок

Ссылки на новое окно

Ссылки во фреймах

Глава 4. Списки

Создание списка

Маркированные списки

Изменение вертикальных отступов в списке

Отступы от маркера до текста

Вид маркера

Список с рисованными маркерами

Маркеры разного цвета

Положение текста и маркера

Нумерованные списки

Нумерация списка

Многоуровневые списки

Глава 5. Линии и рамки

Создание линий

Горизонтальные линии

Использование тега HR

Применение рисунков

Использование таблиц

Применение стилей

Линия с рисунком

Вертикальные линии

Создание вертикальных линий таблицы

Создание вертикальных линий с помощью стилей

Создание рамок

Использование параметра таблицы border

Использование параметра таблицы cellspacing и bgcolor

Вложенные таблицы

Заливка ячеек таблицы цветом

Декоративная рамка

Использование стилей для создания рамки

Рамки и плавающие фреймы

Рамки с тенью

Создание тени с помощью border

Применение слоев

Использование таблицы

Рамки и заголовки

Простая Стеновая панель

Панель с фиксированным заголовком

Панель с графическим заголовком

Глава 6. Таблицы

Создание таблиц

Особенности таблиц

Заголовок таблицы

Выравнивание таблиц

Таблицы и рамки

Таблицы с фиксированным заголовком

Ускорение таблиц

Выделение ячеек таблицы курсором мыши

Шаблоны таблиц

Простая таблица

Простая таблица с заголовком

Таблица с цветным заголовком

Таблица с чередующимися строками

Таблица с выделенными колонками

Глава 7. Формы

Добавление формы

Элементы форм

Текстовое поле

Однострочное текстовое поле

Поле для ввода пароля

Многострочное текстовое поле

Рисунки в текстовом поле

Кнопки

Кнопка SUBMIT

Кнопка RESET

Цветные кнопки

Переключатели

Флажки

Поле со списком

Скрытое поле

Поле с изображением

Отправка файла

Группирование элементов формы

Глава 8. Выравнивание элементов

Выравнивание рисунков по горизонтали

Центрирование по вертикали

Выравнивание слоя по центру

Использование отступов

Применение параметра text-align

Параметр align тега DIV

Абсолютное позиционирование слоя

Манипуляции с текстом

Выравнивание текста внутри слоя

Выравнивание по верхнему краю

Выравнивание по центру слоя

Выравнивание по нижнему краю

Глава 9. Отступы и поля

Создание отступов

Отступы на веб-странице

Отступы в форме

Создание полей

Поля у блочных элементов

Использование отступов и полей

Поля вокруг текста

Отступы в тексте

Создание двух колонок

Глава 10. Элементы оформления

Полосы прокрутки

Полосы прокрутки во фреймах

Новые окна

Изменение цвета полос прокрутки

Вид курсора мыши

Ссылка на иконку сайта

Создание тени

Использование фильтров

Применение слоев

Использование спецсимволов

Глава 11. Создание меню

Горизонтальное меню

Создание меню с помощью таблиц

Применение слоев

Текстовые вкладки

Графические вкладки

Создание вкладок

Предварительная загрузка

Объединение в одно

Вертикальное меню

Простое меню с рамкой

Меню с подсветкой

Меню и подменю

Ниспадающее меню

Плавающее меню

Приложение. Свойства CSS

Пояснения

Параметр background

Параметр background-attachment.

Параметр background-color.

Параметр background-image

Параметр background-position

Параметр background-repeat

Параметр border

Параметр border-bottom

Параметр border-bottom-color

Параметр border-bottom-style

Параметр border-bottom-width

Параметр border-collapse

Параметр border-color

Параметр border-style

Параметр border-width

Параметр bottom

Параметр clear

Параметр clip

Параметр color

Параметр cursor

Параметр display

Параметр float

Параметр font

Параметр font-family

Параметр font-size

Параметр font-style

Параметр font-variant

Параметр font-weight

Параметр height

Параметр left

Параметр letter-spacing

Параметр line-height

Параметр list-style

Параметр list-style-image

Параметр list-style-position

Параметр list-style-type

Параметр margin

Параметр margin-bottom

Параметр overflow

Параметр padding

Параметр padding-bottom

Параметр position

Параметр right

Параметр text-align

Параметр table-layout

Параметр text-indent

Параметр text-decoration

Параметр text-transform

Параметр top 429

Параметр vertical-align

Параметр visibility

Параметр white-space

Параметр width

Параметр word-spacing

Параметр z-index

Предметный указатель

Скачать: