- •Введение
- •Глава 1. Основы
- •1.1. Браузеры
- •Преодоление различий браузеров
- •1.2. Программирование
- •1.3. Дизайн при неизвестном разрешении монитора
- •Гибкая раскладка
- •Дизайн с фиксированной шириной
- •1.4. Знакомство с серверами
- •Корневая директория для Web
- •Java-сервлеты и jsp
- •Абсолютная и относительная адресация
- •Соглашения об именах файлов
- •Выбор кодировки
- •Глава 2. Html и xhtml
- •2.1. Роль html
- •2.2. Отделение представления от структуры документа
- •2.3. Атрибуты
- •Вложенные элементы
- •Информация, которую браузеры игнорируют
- •2.4. Введение в xhtml
- •Три разновидности html 4.01 и xhtml 1.0
- •Хорошо сформированный xhtml
- •Атрибуты id и name
- •2.5. Элементарная структура документа
- •2.6. Тело документа
- •2.7. Текстовые элементы
- •Блочные элементы
- •Внутристрочные элементы логического форматирования
- •Перенос строки
- •Горизонтальные линейки
- •Стилевые элементы
- •Практика
- •Как сделать хороший html – документ
- •2.8. Создание гиперссылок
- •Организация ссылок на область документа
- •Практика
- •2.9. Таблицы
- •Описательные элементы
- •Группы строк
- •Столбцы и группы столбцов
- •2.10. Фреймы
- •Преимущества использования фреймов
- •Недостатки
- •Базовая структура набора фреймов
- •Нестандартные атрибуты
- •Нестандартные атрибуты
- •Создание строк и столбцов
- •2.11. Формы
- •Элементы форм
- •Поле для ввода текста
- •Поле для ввода пароля
- •Переключатель
- •Выбор файла
- •Многострочные текстовые поля
- •Создание меню при помощи элементов select
- •Группы вариантов
- •Надписи
- •Атрибуты accesskey и tabindex
- •Практика
- •Глава 3. Стили css
- •3.1. Преимущества css
- •Определение – задают свойства селектора.
- •3.2. Способы добавления таблиц стилей на Web-страницы
- •Href – позволяет задать url-адрес таблицы стилей.
- •Наследование
- •3.3. Конфликтующие правила стилей: каскад
- •3.4. Контекстные селекторы
- •3.5. Использование классов
- •3.6. Группировка
- •3.7. Псевдоселекторы
- •3.8. Другие псевдоклассы css 2.1
- •Псевдоэлементы
- •3.9. Единицы измерения, используемые в каскадных таблицах стилей
- •3.10. Свойства css для управления цветом
- •Практика Задание 1
- •Задание 2
- •Задание 3
- •3.11. Оформление таблиц с помощью css
- •Заголовки таблиц
- •Порядок наложения элементов
- •Границы
- •Расчет размеров таблицы (ширина, высота)
- •Алгоритм с фиксированной шириной
- •Алгоритм с автоматически определяемой шириной
- •3.12. Оформление таблиц
- •Практика
- •3.13. Блочные и внутристрочные элементы
- •3.14. Введение в блоковую модель
- •3.15. Нормальный поток
- •Свободное размещение
- •3.16. Пропуск размещаемых элементов
- •3.17. Позиционирование: основы
- •3.18. Охватывающий блок
- •3.19. Задание положения
- •3.20. Обработка переполнения
- •3.21. Расчет позиции элемента
- •3.22. Фиксированное позиционирование
- •3.23. Относительное позиционирование
- •Практика
- •3.24. Css свойства
- •3.25. Методики css
- •Центрирование страницы
- •Раскладка в 2 столбца
- •Раскладка в 3 столбца
- •Раскладка в 3 столбца c абсолютным позиционированием
- •Позиционирование трех столбцов
- •Центрирование с рамками и полями
- •Ложные столбцы
- •Заключение
- •Список литературы
- •Оглавление
- •Глава 1. Основы 4
- •Глава 2. Html и xhtml 15
- •Глава 3. Стили css 56
Определение – задают свойства селектора.
Внешний вид списка стиля:
Селектор {свойство: значение;
свойство: значение;}
Селектор – это часть стилевого правила, в котором определяется элемент (или элементы), к которому применяются инструкции представления. Например, если вы хотите, чтобы все заголовки h1 в документе отображались зеленым цветом, напишите стилевое правило, указав h1 в качестве селектора. В CSS существуют следующие типы селекторов, обеспечивающие гибкость и эффективность при создании таблиц стилей:
селекторы типов (элементов);
контекстные селекторы (потомки, дочерние элементы и элементы-братья);
селекторы классов и селекторы идентификаторов (ID);
селекторы атрибутов;
псевдоклассы;
псевдоэлементы.
Не все эти селекторы, созданные в расчете на будущее, поддерживаются современными браузерами.
Cелектор типа, который ссылается на элемент по имени. В следующем примере определяются стили заголовков первого и второго уровней путем использования тега STYLE:
<HTML> <HEAD>
<STYLE>
H1 {Font-size: 48pt:Color:RED}
H2 {Font-size: 20pt:Color:BLUE}
</STYLE>
</HEAD>
<BODY>
<H1>Это стиль H1. Цвет – красный</H1>
<H2>Это стиль H2. Цвет – синий</H2>
<P> Это – обычный стиль по умолчанию </P>
</BODY>
</HTML>
Мы изменили стили H1 и H2, принятые по умолчанию: назначили размеры (48 и 30 точек) и цвета (красный и синий) для всех текстов, которые окажутся внутри этих тегов.
Обратите внимание на то, что внутри тега <STYLE> указываются определения стилей тегов, которые записываются без угловых скобок.
В CSS 2 появился универсальный селектор элементов (*), который соответствует любому элементу. Стилевое правило * {color: gray} делает все элементы документа серыми. Универсальный селектор приводит к проблемам с элементами управления форм в некоторых браузерах. Если ваша страница содержит поля ввода на форме, то безопаснее будет не использовать универсальный селектор.
3.2. Способы добавления таблиц стилей на Web-страницы
1. Встраивание стилей (внутрь тега)
<p style = “color: red”>
<p style = “color: red; font-size=60pt”>
2. Включение стилей (заголовочные стили).
В область заголовка добавить стиль STYLE
<head>
<style type=”text/CSS”>
p{color: blue;
background-color: yellow}
</ style>
</ head >
Элемент style необходимо помещать в теги head документа. В настоящее время каскадные таблицы стилей являются единственным широко поддерживаемым языком стилей, но консорциум W3C подготовился к возможному появлению новых языков, добавив атрибут type в элемент style. Пока единственным работоспособным типом является text/ess. Атрибут type является обязательным как для HTML, так и для XHTML. Если этот атрибут опущен, некоторые браузеры могут игнорировать всю таблицу стилей.
3. Связывание. Таблицу стилей создают в виде отдельного текстового файла с расширением .css. Документ таблицы стилей – это текстовый документ, который содержит как минимум одно стилевое правило. Он не может содержать тегов HTML.
Этот стиль можно применить к нескольким документам.
Пример. В файле C1.CSS пишем следующий текст:
p{color: green;
font-size: 30 pt}
body {background-color: pink}
в документе: <head>
<link rel = “stylesheet” type = “text/css” href = “c1.css”>
… </head>
Тег LINK позволяет определить, на какой внешний документ мы будем ссылаться.
REL определяет тип связи между текущей страницей и той, на которую указывает ссылка. Если REL = stylesheet – мы связываемся с таблицей стилей.
TYPE – определяет тип того документа, с которым связываемся.