КАТЕГОРИИ:
Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)
Замечание. Цвет (border-color) и стиль (border-style) линий можно задавать аналогично ширине границы блока — раздельно для каждой из них
Цвет (border-color) и стиль (border-style) линий можно задавать аналогично ширине границы блока — раздельно для каждой из них.
Покажем применение данных свойств (листинг 6.32).
Листинг 6.32. Работа со стилевыми блоками
<BODY>
<Р style="FONT-WEIGHT: 400; FONT-SIZE: xx-large; TEXT-ALIGN: center;
FONT-VARIANT: small-caps">
Страницы стилей — это мощный инструмент
</Р>
<Р style="MARGIN-TOP: -50px; FONT-WEIGHT: 400; FONT-SIZE: 60pt; COLOR:
gray; TEXT-ALIGN: center; FONT-VARIANT: small-caps">Yes!!!</P>
</BODY>
В браузере данный пример будет выглядеть следующим образом (рис. 6.17).
Рис. 6.17. Абсолютное позиционирование с помощью стилей
Этот пример демонстрирует не только задание обычных характеристик текста, но и его позиционирование (наложение элементов), чего невозможно добиться без использования каскадных таблиц стилей.
Несколько замечаний по поводу практической реализации стилей и наследования
Прежде всего необходимо отметить, что таблицы стилей не являются элементами языка HTML. Ранее они вообще не использовались для форматирования Web-страниц. Хотя, разумеется, возможности языка HTML в чистом виде намного более скудны, чем с использованием таблиц стилей. С выходом спецификации HTML 4.0 можно уловить явную тенденцию к снижению роли элементов и атрибутов языка в плане разметки текста и изображений. С другой стороны, те конструкции, которые объявлены устаревшими, рекомендуется реализовывать с использованием таблиц стилей. Вообще, если оглянуться на структуру изложенного материала, то можно заметить, что стилевые характеристики очень органично вписываются в концепцию языка HTML. Так что же такое каскадные таблицы стилей (Cascading Style Sheets — CSS)? Это язык, который создан для улучшения дизайнерских возможностей языка HTML, и, как видим, плавно заменяет многие его конструкции. Поскольку CSS — это отличный от HTML язык, его поддержка определяется типом используемого браузера (стоит отметить, что самые популярные из них, его поддерживают).
Элементы DIVw SPAN— контейнеры стиля
Для того чтобы описать с определенными стилевыми характеристиками произвольное число элементов, а также сгруппировать их по этим признакам, используется элемент DIV. Он позволяет создавать что-то вроде нового слоя, применяя к нему абсолютное позиционирование. Следует отметить, что он, как никакой другой элемент, позволяет реализовывать дизайнерские изыски.
В случае, когда нужно отобразить один элемент на базе новых стилевых характеристик, используется элемент SPAN.
Пример использования контейнера стилей приведен в листинге 6.33.
Листинг 6.33. Возможное использование контейнера стиля DIV
<DIV style="cTnneBbie параметры ">
...любое HTML-содержимое...
</DIV>
Наследование свойств
Обратите внимание, что когда мы изменяли некоторые стилевые параметры элементов, то остальные, оставаясь без изменения, имели либо значения по умолчанию (например, цвет шрифта — черный), либо установленные прежде. Поэтому эти стилевые таблицы называют каскадными — установка свойств может происходить поэтапно, переопределяя атрибуты нужных элементов, не изменяя глобальных свойств стиля (разумеется, что это тоже допустимо). Пример наследования стилевых харектеристик приведен в листинге 6.34.
Листинг 6.34. Пример наследования стиля
<STYLE type="text/css">
.name (color:black; font-style:italic; font-weight:bold; font-size:12pt;}
.new {color:red; font-weight:bold; font-size:25pt;}
.old {color:black; font-style:italic; font-size:12pt;}
H1.new {color: blue; background-color: gray;}
</STYLE>
Здесь, для элементов класса new определен цвет шрифта красный, полужирное начертание, и размер в 25 точек. При этом для заголовков дополнительно определен цвет фона и переопределен цвет шрифта. Это и есть классический пример наследования свойств класса (в рассматриваемом примере на^ следуются размер и начертание шрифта, а также установки браузера для текста по умолчанию).
Практическая реализация стилей
В рассмотренных выше примерах, как правило, использовались стилевые блоки внутри страниц. Для определения стилевого блока применяется элемент STYLE в формате, приведенном ниже.
Кроме этого способа для реализации стиля может использоваться атрибут style HTML-элементов, как показано, например, в листинге 6.35.
Листинг 6.35. Пример использования атрибута style
<IMG style="border-width: 0 рх" src="foto.gif">
В результате такого применения атрибута style, картинка из файла foto.gif не будет иметь рамки.
И последний вариант реализации стиля заключается в вынесении стилевых установок в отдельный файл. Это должен быть простой текстовый файл с разширением css, в котором и собирается информация о стиле. Такой вариант удобен, когда несколько страниц имеют общие параметры. Рассмотрим стилевой файл global.css (листинг 6.36).
Листинг 6.36. Пример стилевого файла
body { background: white; color: black;}
A: link {color: black;}
A: visited {color: gray;}
A: active {color: red;}
A: hover {color: Yellow;}
HI {color: red;}
IMG { border-width: 0 px}
Как видим, синтаксис в файле точно такой же, как и внутри тегов <STYLE>. Если приведенный выше листинг записать в файл global.css, который затем поместить в каталог с Web-страницами, то для использования указанных стилевых свойств страницей, в нее нужно поместить следующую ссылку на стилевой файл:
<LINK rel="stylesheet" type="text/css" href="global.css">
Любая страничка сервера, содержащая эту ссылку, наследует свойства шрифта, ссылок, отсутствие рамок вокруг изображений и т. д.
Разумеется, при необходимости, свойства можно переопределить уже внутри странички, используя элемент или атрибут STYLE.
И последнее, многие свойства CSS работают лишь при их указании в качестве значения атрибута style.
ГЛАВА 7
|
|
Дата добавления: 2014-12-29; Просмотров: 370; Нарушение авторских прав?; Мы поможем в написании вашей работы!