Гибкость стилей
Самым очевидным инструментом для достижения гибкости в применении различных стилей к документу являются каскадные таблицы стилей. С помощью 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>
