Электронный магазин на Java и XML
Пример таблицы стилей (catalog.css)
Листинг 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>
, как показано в следующем примере:
<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>
