Электронный магазин на Java и XML

Гибкость стилей


Самым очевидным инструментом для достижения гибкости в применении различных стилей к документу являются каскадные таблицы стилей. С помощью CSS задаются параметры стиля различных компонентов web-страницы. В настоящее время CSS является наиболее широко поддерживаемым стандартом и входит в официальную часть спецификации HTML 4.

Помещая информацию о стиле в отдельный файл — так называемую таблицу стилей (style sheet), мы значительно уменьшаем объем текста, который приходится генерировать сервлету. Если для всех страниц на вашем сайте используется одна и та же таблица стилей, то web-браузер пользователя может кэшировать ее и таким образом уменьшить время ожидания ответа от сервера для всего сайта.

В листинге 3.10 приводится простая таблица стилей, задающая стиль тегов HTML <body>, <hl>, <h2> и <р> — четыре именованных стиля, которые мы будем использовать в следующем примере.

СОВЕТ

 Превосходное пособие по применению таблиц стилей вы найдете на сайте www.htlmhepl.com/reference/ess.

Листинг 3.10. Пример таблицы стилей (catalog.css)

body{font-family:Arial font-size:10.0pt}

h1{font-size:30pt; font-family:Arial; color:red ;}

h2{font-size:20pt; font-family:Arial; color:navy; }

p {font-size:10pt; font-family:Arial, Helvetica; background-color:#fef6df ;}

.ch1{font-size:30pt; font-family:Arial; color:red ;}



.ch2{font-size:20pt; font-family:Arial; color:navy ;}

.ch3{font-size:15pt; font-family:Arial; color:purple ;}

.ch4{font-size:10pt; font-family:Arial; color:black ;}

Таблицу стилей можно присоединить к HTML-странице с помощью тега link, помещенного внутрь тега <head>, как показано в следующем примере:

<head><title>Catalog Test Servlet Output</title>

<link rel="stylesheet" href="http://localhost/XmlEcommBook/catalog.css"

type="text/css" media="screen" >

</head>

Присоединив к странице такую таблицу стилей, можно очень легко задавать стиль любого элемента. Для этого нужно просто добавить к тегу атрибут, например style = "ch2". Указанный таким образом стиль замещает стиль, задаваемый браузером по умолчанию для этого элемента.

Чтобы понять, насколько использование таблиц стилей эффективнее, можно сравнить два фрагмента кода HTML, выполняющих одну и ту же функцию.

Пример использования таблицы стилей:

<а class="ch3" href= "http://localhost/servlet/cattest?action=showproduct">

Guide to Plants </a>

<span class="ch4">price ea = $12.99 </span>

Пример непосредственного задания стилей:

<font face="Anal" SIZE="15pt" color="purple" >

<a class="ch3" href= "http://localhost/servlet/cattest?action=showproduct">

Guide to Plants

</a>

</font>

<font face="Anal" SIZE="10pt" color="black" > price ea = $12.99 </font>



Содержание раздела