- •Самарский институт (филиал) российского государственного торгово-экономического университета
- •Самара – 2003
- •Оглавление
- •Введение
- •1. Интернет – новая среда делового общения
- •Первые шаги по созданию Web-сайта
- •Пример 1.1.
- •Фирма «Гепард»
- •Прайс-лист
- •Задание 1.1
- •2. Основы языка html
- •Формирование основных разделов html-документа
- •Пример 2.1.
- •Теги форматирования текста
- •Пример 2.2.
- •Задание 2.1
- •Создание таблиц
- •Пример 2.3.
- •Задание 2.2
- •Вставка графических изображений
- •Пример 2.4.
- •Задание 2.3
- •Организация гиперссылок
- •Задание 2.4
- •Создание списков
- •Пример 2.5.
- •Пример 2.6.
- •Пример 2.7.
- •Задание 2.5
- •3. Каскадные таблицы стилей
- •Селекторы элементов
- •Селекторы классов
- •Селекторы идентификаторов
- •Пример 3.1
- •Единицы измерения, принятые в каскадных таблицах стилей
- •Пример 3.2
- •Задание 3.1
- •Внешние каскадные таблицы стилей
- •Позиционирование элементов страницы с помощью css.
- •Пример 3.3
- •Пример 3.4
- •Задание 3.2
- •Задание цвета в css
- •Задание 3.3
- •4. Формы html
- •Элементы управления формы html
- •Пример 4.1
- •Пример 4.2
- •Пример 4.3
- •Пример 4.4
- •Заголовки и названия
- •Параграфы и строки
- •Стили текста
Селекторы элементов
Селекторы элементов называются так же, как и теги HTML, например H2 – для заголовков второго уровня, TD – для ячейки таблицы и т.д. Применение правила к селектору элементов приводит к тому, что автоматически изменяются свойства всех элементов страницы, управляемые соответствующим тегом HTML. Рассмотрим следующий пример:
H1, H2 {font-family: Arial; text-align: center; }
Если поместить это правило в заголовочную часть документа, то далее в документе можно использовать теги <H1> и <H2> без атрибутов. При этом помещенный между ними текст будет выведен в окно обозревателя с использованием шрифта Arial и центрирован.
В рассматриваемом примере между названиями селекторов стоит запятая. Это значит, что правило будет применено к обоим селекторам независимо. Отсутствие запятой между названиями селекторов означает, что правило будет применяться только в тех ситуациях, когда фрагмент текста попадает под действие обоих селекторов. Пример, представленный ниже, иллюстрирует рассмотренный случай.
H1 B {color: green; }
Это правило будет применяться только к заголовкам первого уровня, выделенным полужирным.
Селекторы классов
Правила, описанные с использованием селекторов классов, не применяются автоматически к каким-либо элементам страницы. Для того чтобы они заработали, требуется явно указать, к каким элементам страницы их нужно применить.
Имя для селектора класса выбирается произвольно и начинается с точки. Далее за именем в фигурных скобках задаются стилевые свойства и их значения. Рассмотрим пример.
.abc {background-color: darkgreen; color: yellow;}
<DIV CLASS=”abc”> Этот текст будет желтым на темно-зеленом фоне </DIV>
Первое выражение этого примера создает класс, связывая с именем abc, определенный набор стилевых свойств. Второе выражение применяет заданный стиль к тегу <DIV>.
Селекторы идентификаторов
Селекторы идентификаторов по своему действию очень похожи на селекторы классов. Но в отличие от последних, они применяются к элементам только с одним определенным идентификатором.
У каждого тега может быть атрибут ID, значение которого определяет уникальное имя этого элемента (идентификатор). Тогда, если связать с идентификатором элемента набор стилевых свойств, например
#abcd {background-color: darkgreen; color: yellow;},
то элемент с именем abcd при его использовании в HTML-документе будет наделен указанными свойствами.
<DIV ID=”abcd”> Этот текст будет желтым на темно-зеленом фоне </DIV>.
Пример 3.1
В HTML-документе примера 2.7 для форматирования содержимого ячеек таблицы были использованы следующие атрибуты тегов <TD>:
<TD WIDTH=20% BGCOLOR="#DDDDDD">
<TD WIDTH=60% BGCOLOR="#EEEEEE">
<TD BGCOLOR="#DDDDDD">
Если использовать CSS, поместив в раздел <HEAD> HTML-документа следующее описание:
<STYLE>
.part1-3 {background-color: #DDDDDD;}
.part2 {background-color: #EEEEEE;}
</STYLE>
то использование следующих выражений
<TD CLASS="part1-3" WIDTH=20% >
<TD CLASS="part2" WIDTH=60% >
<TD CLASS="part1-3">
вместо указанных в данном примере первых трех, приведут к тем же самым результатам.
Единицы измерения, принятые в каскадных таблицах стилей
Атрибуты, задаваемые с помощью CSS (толщина рамки таблицы, высота символов и т.п.) используют различные единицы измерения. Величины указываются в следующем формате: вначале идет число, а за ним без пробела единица измерения. Ниже в таблице представлены единицы измерения, принятые в CSS.
Обозначение |
Наименование |
Описание |
Абсолютные единицы измерения |
||
mm |
миллиметр |
|
cm |
сантиметр |
|
in |
дюйм |
дюйм равен 24,5 мм |
pt |
точка |
72 точки равны 1 дюйму |
pc |
цицеро |
6 цицеро равны 1 дюйму |
Относительные единицы измерения |
||
% |
процент |
Степень увеличения или уменьшения относительно нормального размера |
em |
|
1 em означает размер в точках текущего шрифта |
Зависимые от аппаратных устройств единицы измерения |
||
px |
пиксел |
1 пиксел – наименьшая единица разрешения данного дисплея |