- •Введение
- •1. Элементы языка html
- •Теги форматирования текста
- •Гиперссылки
- •Встраивание графических изображений
- •Создание таблиц
- •2. Каскадные таблицы стилей
- •Селекторы элементов
- •Селекторы классов
- •Селекторы идентификаторов
- •Единицы измерения, принятые в каскадных таблицах стилей
- •Внешние каскадные таблицы стилей
- •Задание цвета в каскадных таблицах стилей
- •3. Формы
- •Элементы управления формы
- •4. Разработка Web-сайта электронного магазина Планирование сайта
- •Задачи и информационное содержание сайта
- •Макеты страниц
- •Макет страницы можно выполнить с помощью обычного текстового редактора. На рис. 4.4 представлен результат такой работы.
- •Логическая структура сайта
- •Обозреватель преобразует данный html-код к следующему виду:
- •Для формирования стиля заголовка страницы воспользуемся селектором класса:
- •Для формирования стиля нижней части страницы воспользуемся селектором класса:
- •Заключение
- •Список литературы
2. Каскадные таблицы стилей
В настоящее время для создания Web-страниц используется новое мощное средство – каскадные таблицы стилей (Cascading Style Sheets – CSS), которые создают большие удобства при разработке Web-страниц, расширяют возможности разработчиков, сокращают объем HTML-документов и оптимизируют скорость их отображения.
Стиль CSS – это набор свойств текста, таких, например, как шрифт, его размер, цвет и т.п. Значения стилевым свойствам присваиваются с помощью специальных выражений, называемых правилами CSS.
Таблицы стилей состоят из одного или более правил, хранящихся либо в HTML-документе, либо в виде отдельного файла, связанного с документом. Правило состоит из двух основных элементов: селектора и объявления. Объявление, в свою очередь, содержит свойство и его значение.
Правила, хранящиеся в HTML-документе, размещаются различными способами:
1. Правило можно разместить непосредственно как атрибут style практически в любом теге (кроме, разве что, таких как <html> и <head>). Пусть, например, заголовок HTML-документа отформатирован следующим кодом:
<h2 align="center"><i>Магазин КНИГА</i></h2>.
При использовании специального атрибута style этот код примет такой вид:
<h2 style="text-align: center; font-style: italic;”> Магазин КНИГА</h2>.
Здесь значением атрибута style является список стилевых свойств text-align и font-style, которым присвоены значения соответственно center и italic.
2. Правило CSS можно разместить между парой тегов <style> . . . </style>, которые, в свою очередь, помещаются в разделе <head>. Например, если в текст HTML-документа поместить следующее правило:
<STYLE>
H2 {text-align: center; font-style: italic;}
</STYLE>
то к выражению
<h2> Магазин КНИГА </h2>,
записанному ниже в документе, это правило будет применено автоматически.
3. Правило CSS можно разместить в отдельном файле, на который будет ссылаться HTML-документ.
Селекторы бывают трех видов: селекторы элементов (модификаторы тегов), селекторы классов и селекторы идентификаторов.
Селекторы элементов
Селекторы элементов называются так же, как и теги HTML, например h2 – для заголовков второго уровня, td – для ячейки таблицы и т.д. Применение в правиле селектора элементов приводит к тому, что автоматически изменяются свойства всех элементов страницы, управляемых соответствующим тегом HTML. Рассмотрим следующий пример:
h1, h2 {font-family: Arial; text-align: center; }
Если поместить это правило в заголовочную часть документа, то далее в документе можно использовать только теги <h1> и <h2> без атрибутов. При этом соответствующий текст будет выведен в окно обозревателя с использованием шрифта Arial и центрирован.
В рассматриваемом примере между названиями селекторов стоит запятая. Это значит, что правило будет применено к обоим селекторам независимо. Отсутствие запятой между названиями селекторов означает, что правило будет применяться только в тех ситуациях, когда фрагмент текста попадает под действие обоих селекторов. Пример, представленный ниже, иллюстрирует рассмотренный случай.
h1 b {color: green; }
Это правило будет применяться только к заголовкам первого уровня, выделенным полужирным.