Приднестровская поддержка XOOPS
В предыдущих примерах создание альтернативной таблицы стилей происходило путем копирования правил из основной таблицы и изменения значений некоторых свойств. Действительно ли так необходимо использовать в альтернативной таблице стилей все эти правила или достаточно только тех, которые нужно изменить?
Решение
Чтобы ответить на этот вопрос, создадим несколько таблиц стилей. Первая из них будет содержать свойства, в изменении которых нет необходимости, вторая – свойства, значения которых будут меняться, а третья – измененные значения этих свойств:
<!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, можно выделить только те свойства, значение которых точно придется менять. Затем их нужно разместить в новом файле, который задаст цветовую схему страницы по умолчанию; таблица стилей для создания версии сайта повышенной контрастности
будет содержать те же свойства с измененными значениями. Таким образом можно избежать необходимости работы с несколькими версиями по сути одной таблицы стилей.
Отправитель | Нити |
---|
6 пользователь(ей) активно (6 пользователь(ей) просматривают Инструкции)
Участников: 0 Гостей: 6 далее... |