Пример 3.2
В HTML-документе примера 2.7 для задания величины отступа от границ ячеек был использован атрибут CELLPADDING.
<TABLE BORDER=0 CELLPADDING=10>
Поставим задачу обеспечить отступ текста от левой границы каждой из ячеек на 10 точек, используя CSS. Для этого исправим описание стиля, приведенного в примере 3.1, дополнив стилевые свойства каждого из двух классов свойством padding-left: 10pt;
<STYLE>
.part1-3 {background-color: #DDDDDD; padding-left: 10pt;}
.part2 {background-color: #EEEEEE; padding-left: 10pt;}
</STYLE>
Теперь данные стилевые правила можно использовать при оформлении таблицы.
Задание 3.1
Создать в вашем каталоге подкаталог с названием CSS1.
Скопировать в данный каталог созданные страницы.
Исправить тексты ранее созданных страниц сайта, используя каскадные таблицы стилей.
Внешние каскадные таблицы стилей
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>
Позиционирование элементов страницы с помощью css.
Каскадные таблицы стилей обеспечивают три вида позиционирования элементов Web-страницы. Способ, принятый по умолчанию, называется статическим. Проиллюстрируем этот способ следующим примером:
Пример 3.3
<HTML>
<HEAD>
<TITLE> ООО "Гепард" </TITLE >
<IMG SRC="logotip.bmp"> Фирма "Гепард"
Характеристики металлических дверей:<BR>
<OL>
<LI> Толщина металла.</LI>
<UL>
<LI> 3 мм. </LI>
<LI> 4 мм. </LI>
</UL>
</OL>
</HEAD>
</HTML>
Страница, соответствующая этому коду показана на рис. 3.1.
Рис. 3.1. Пример статического позиционирования элементов
При абсолютном позиционировании элемента используются его координаты. Точкой отсчета для команд CSS является верхний левый угол Web-страницы.
Пример 3.4
Поставим задачу расположить на странице заголовок, отступив от левого края страницы на 250 пикселов и от верхнего края – на 30 пикселов. Для оставшегося фрагмента текста координаты его верхнего левого угла выберем такими: расстояние от левого края страницы – 180 пикселов, расстояние от верхнего края страницы – 80 пикселов. Сформируем для этого стилевые правила, используя селекторы классов. Значением стилевого свойства position в данном случае следует использовать – absolute.
<HTML>
<HEAD>
<STYLE>
.hd {
position: absolute;
left: 250px;
top: 30px;
}
.txt2 {
position: absolute;
left: 180px;
top: 80px;
}
</STYLE>
<TITLE> ООО "Гепард" </TITLE >
<IMG SRC="logotip.bmp">
<DIV CLASS=hd>
Фирма "Гепард"
</DIV>
<DIV CLASS=txt2>
Характеристики металлических дверей:<BR>
<OL>
<LI> Толщина металла.</LI>
<UL>
<LI> 3 мм. </LI>
<LI> 4 мм. </LI>
</UL>
</OL>
</DIV>
</HEAD>
</HTML>
Страница, соответствующая этому коду показана на рис. 3.2.
Рис. 3.2 Пример абсолютного позиционирования элементов
К третьему виду относится относительное позиционирование. При таком способе позиционирования расположение элемента указывается в виде расстояния от его нормального расположения, т.е. расположения, обеспечивающегося статическим позиционированием. В качестве значения стилевого свойства position в этом случае следует использовать – relative.