Пример таблицы стилей (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>
, как показано в следующем примере:

<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>

price ea = $12.99

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

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


price ea = $12.99

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