- •Введение
- •1. Элементы языка html
- •Теги форматирования текста
- •Гиперссылки
- •Встраивание графических изображений
- •Создание таблиц
- •2. Каскадные таблицы стилей
- •Селекторы элементов
- •Селекторы классов
- •Селекторы идентификаторов
- •Единицы измерения, принятые в каскадных таблицах стилей
- •Внешние каскадные таблицы стилей
- •Задание цвета в каскадных таблицах стилей
- •3. Формы
- •Элементы управления формы
- •4. Разработка Web-сайта электронного магазина Планирование сайта
- •Задачи и информационное содержание сайта
- •Макеты страниц
- •Макет страницы можно выполнить с помощью обычного текстового редактора. На рис. 4.4 представлен результат такой работы.
- •Логическая структура сайта
- •Обозреватель преобразует данный html-код к следующему виду:
- •Для формирования стиля заголовка страницы воспользуемся селектором класса:
- •Для формирования стиля нижней части страницы воспользуемся селектором класса:
- •Заключение
- •Список литературы
Селекторы классов
Правила, описанные с использованием селекторов классов, не применяются автоматически к каким-либо элементам страницы. Для того чтобы они заработали, требуется явно указать, к каким элементам страницы их нужно применить.
Имя для селектора класса выбирается произвольно и начинается с точки. Далее за именем в фигурных скобках задаются стилевые свойства и их значения. Рассмотрим пример.
.abc {background-color: darkgreen; color: yellow;}
<div class=”abc”> Этот текст будет желтым на темно-зеленом фоне </div>
Первое выражение этого примера создает класс, связывая с именем abc определенный набор стилевых свойств. Второе выражение применяет заданный стиль к тегу <div>.
Селекторы идентификаторов
В рассмотренном выше примере свойства класса abc были применены к тегу <div>. Однако и другие элементы HTML могут использовать свойства данного класса, например, вместо тега <div> использовать тег <p>.
<p class=”abc”> Этот текст будет желтым на темно-зеленом фоне </p>
Селекторы идентификаторов могут быть применены к элементам только с определенным идентификатором. У каждого тега может быть атрибут ID, значение которого определяет уникальное имя этого элемента (идентификатор).
Если связать с идентификатором элемента набор стилевых свойств, например,
#abcd {background-color: darkgreen; color: yellow;},
то элемент с именем abcd при его использовании в HTML-документе будет наделен указанными свойствами.
Единицы измерения, принятые в каскадных таблицах стилей
Атрибуты, задаваемые с помощью CSS (толщина рамки таблицы, высота символов и т.п.) используют различные единицы измерения. Величины указываются в следующем формате: вначале идет число, а за ним без пробела единица измерения. Ниже в таблице представлены единицы измерения, принятые в CSS.
Таблица 2.1.
Обозначение |
Наименование |
Описание |
Абсолютные единицы измерения |
||
mm |
миллиметр |
|
cm |
сантиметр |
|
in |
дюйм |
дюйм равен 24,5 мм |
pt |
точка |
72 точки равны 1 дюйму |
pc |
цицеро |
6 цицеро равны 1 дюйму |
Относительные единицы измерения |
||
% |
процент |
Степень увеличения или уменьшения относительно нормального размера |
em |
|
1 em означает размер в точках текущего шрифта |
Зависимые от аппаратных устройств единицы измерения |
||
px |
пиксель |
1 пиксель – наименьшая единица разрешения данного дисплея |
Внешние каскадные таблицы стилей
CSS обладает свойством, позволяющим совместно использовать один и тот же набор стилей для разных групп Web-страниц. Первое, что нужно сделать для этого, это написать таблицу стилей без тегов <style> . . . </style> в отдельном файле с расширением .css, например, в файле my.css, а затем использовать один из двух способов подключения таблицы стилей к HTML-документу.
Первый способ заключается в помещении ссылки на файл таблицы стилей:
<link rel=”stylesheet” href=”my.css” type=”text/css”>.
При этом тег размещается на новой строке непосредственно после тега <head>.
Второй способ заключается в использовании команды @import в таблице стилей непосредственно HTML-документа, как дополнение к уже существующему набору стилей, например:
<style>
@import “my.css “
.part2 {background-color: #EEEEEE; padding-left: 10pt;}
</style>