Оглавление

Создание альтернативных таблиц стилей без копирования кода из основной таблицы

В предыдущих примерах создание альтернативной таблицы стилей происходило путем копирования правил из основной таблицы и изменения значений некоторых свойств. Действительно ли так необходимо использовать в альтернативной таблице стилей все эти правила или достаточно только тех, которые нужно изменить?

 

Решение
Чтобы ответить на этот вопрос, создадим несколько таблиц стилей. Первая из них будет содержать свойства, в изменении которых нет необходимости, вторая – свойства, значения которых будут меняться, а третья – измененные значения этих свойств:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>Альтернативная таблица стилей</title>
<meta http-equiv="content-type"
    content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="main.css"  /> 
<link rel="stylesheet" type="text/css" href="defaultcolors.css" title="Default" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
<link rel="alternate stylesheet" type="text/css" href="highcontrast2.css" 
               title="High Contrast" />

</head>
<body>
<div id="banner"></div>
<div id="content">
  <h1>Что такое XOOPS?</h1>
  <p>XOOPS - это динамический OO (Объектно-Ориентированный) основанный на открытом 
  исходном коде скрипт портала, написанный на PHP. XOOPS поддерживает различные 
  базы данных, XOOPS - это идеальный инструмент для создания небольших высоко-динамичных 
  сообществ вэб-сайтов, внутренних порталов компании, корпоративных порталов, 
  web-публикаторов и многого другого.</p>
  <h2>Технические требования:</h2>
  <ul>
    <li>WWW сервер (Apache, IIS, Roxen, etc)</li>
    <li>PHP 5.2 или выше</li>
    <li>База данных MySQL 5.0 (или выше)</li>
  </ul>
  <a href="#">Скачать XOOPS</a>
</div>  
</body>
</html>

 

main2.css

body, html {
  margin: 0;
  padding: 0;
}
#navigation {
  font: 90% Arial, Helvetica, sans-serif;
  position: absolute;
  left: 0;
  top: 41px;
}
#navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: none;
}
#navigation li {
  border-bottom: 1px solid #ED9F9F;
  margin: 0;
}
#navigation li a:link, #navigation li a:visited {
  display: block;
  padding: 5px 5px 5px 0.5em;
  border-left: 12px solid #711515;
  border-right: 1px solid #711515;
  background-color: #B51032;
  color: #FFFFFF;
  text-decoration: none;
}
#navigation li a:hover {
  background-color: #711515;
  color: #FFFFFF;
}
#banner {
  background-color: #711515;
  border-bottom: 1px solid #ED9F9F;
  text-align: right;
  padding-right: 20px;
  margin-top: 0;
}
#banner ul {
  margin: 0;
}
#banner li {
  display: inline;
}
#banner a:link, #banner a:visited {
  font: 80% Arial, Helvetica, sans-serif; 
  color: #FFFFFF
  background-color: transparent;
}
#content p, #content li {
  font: 80%/1.6em Arial, Helvetica, sans-serif;
}
#content p {
  margin-left: 1.5em;
}
#content h1, #content h2 {
  font: 140% Georgia, "Times New Roman", Times, serif;
  color: #B51032;
  background-color: transparent;
}
#content h2 {
  font: 120% Georgia, "Times New Roman", Times, serif;
  padding-bottom: 3px;
  border-bottom: 1px dotted #ED9F9F;
}

 

defaultcolors.css

body, html {
  background-color: #FFFFFF;
  color: #000000;
}

#content h1, #content h2 {
  color: #B51032;
  background-color: transparent;
}

#content h2 {
  border-bottom: 1px dotted #ED9F9F;
}

 

highcontrast2.css

body, html {
  background-color: #000000;
  color: #FFFFFF;
}

#content h1, #content h2 {
  color: #FFFFFF;
  background-color: transparent;
}

#content h2 {
  border-bottom: 1px dotted #CCCCCC;
}


Обсуждение
Для создания файла highcontrast.css, с которым мы работали в разделе «Добавление на сайт альтернативных таблиц стилей», я изменила всего несколько свойств исходной таблицы стилей. Поменялись значения цвета фона и шрифта:

 

main.css

body, html {
margin: 0;
padding: 0;
background-color: #FFFFFF;
color: #000000;
}

 

highcontrast.css

body, html {
margin: 0;
padding: 0;
background-color: #000000;
color: #FFFFFF;
}

 

Кроме того, я изменила цвет заголовков первого и второго уровня:


#content h1, #content h2 {
font: 140% Georgia, "Times New Roman", Times, serif;
color: #B51032;
background-color: transparent;
}
#content h2 {
font: 120% Georgia, "Times New Roman", Times, serif;
padding-bottom: 3px;
border-bottom: 1px dotted #ED9F9F;
}



#content h1, #content h2 {
font: 140% Georgia, "Times New Roman", Times, serif;
color: #FFFFFF;
background-color: transparent;
}
#content h2 {
font: 120% Georgia, "Times New Roman", Times, serif;
padding-bottom: 3px;
border-bottom: 1px dotted #CCCCCC;
}


Чтобы не копировать все содержимое таблицы стилей для создания файла highcontrast.css, можно выделить только те свойства, значение которых точно придется менять. Затем их нужно разместить в новом файле, который задаст цветовую схему страницы по умолчанию; таблица стилей для создания версии сайта повышенной контрастности
будет содержать те же свойства с измененными значениями. Таким образом можно избежать необходимости работы с несколькими версиями по сути одной таблицы стилей.

<< Меню >>  
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити