Ибрагимов У.М., Нахипов Р.И.
Южно-Казахстанский государственный
университет им.М.Ауезова, Шымкент, Казахстан
использование технологии CSS
в динамических Web-проектах
Введение. Технологию
CSS (Cascade Style
Sheets) используют в тех случаях, когда необходимо установить единый стиль
оформления для нескольких Web-документов одного Web-проекта. Технологии CSS позволяет сделать HTML-код компактнее и уменьшает время загрузки Web-проекта на
браузере.
Для добавления стилей в
Web-документ существует несколько методов, которые различаются своими
возможностями и назначением. Ниже мы рассмотрим один
подход к использованию метода «связанные стили», которые хранятся в отдельном файле.
Единое стилевое оформление множества Web-документов. Web-проект
– это набор логически
связанных между собой нескольких Web-документов. Применение единообразного
оформления заголовков, таблиц, текста, списков и других элементов создает преемственность между документами
и облегчает
пользователям работу с Web-проектом.
При хранении стилей в отдельном
файле, стиль
кэшируется и при повторном обращении к нему извлекается из кэша браузера. За
счет кэширования снижается время загрузки HTML-кода. А при следующем обращении браузера
к Web-проекту эти стили уже не скачиваются по сети, а
берутся с локального диска пользователя. Такой подход позволяет
существенно повысить скорость загрузки Web-проекта.
Описание подхода. При использовании стилей описание
располагается в отдельном файле с
расширением «.css». В этом
файле стилевые правила записываются в своем формате, отличном от HTML. Общий
способ записи имеет следующий вид [2]:
Селектор {
свойство1: значение;
свойство2: значение;
}
Основным понятием выступает селектор – некоторое имя стиля, для которого добавляются параметры
форматирования. В качестве селектора выступают теги, классы и идентификаторы. В
нашем примере содержимое
файла «style.css» имеет вид
[3]:
.fon1 {
background-image:
url("files/fon1.gif");
background-color:"#e0e0e0";
font-family: "Times
New Roman", shadow;
font-size: 12 pt;
font-weight : normal;
font-style: normal;
color:
"#000080";
}
h1 {
font-family: "Times
New Roman", shadow;
font-size: 14 pt;
color:
"#000080";
font-weight : bold;
font-style: normal;
}
h2 {
font-family: "Times
New Roman", shadow;
font-size: 12 pt;
font-weight : normal;
color:
"#000080";
font-style: normal;
}
В данном примере описание селектора «fon1» дает следующие указания
браузеру на форматирование текста: сделать фон документа изображением из файла
"files/fon1.gif"; свойство background-color пригодится в случае, если фоновая
картинка по каким-либо причинам не загрузилась; цвет фона «#e0e0e0» всегда располагается под фоновым
изображением; выбрать шрифт «Times New Roman», гарнитуру «shadow»; установить
высоту символов 12 пикселей (font-size: 12 pt;); толщина символа стандартная (font-weight : normal;); использовать
обычный прямой шрифт
без наклона (font-style: normal;); цвет текста - темно-синий (color:
"#000080").
Как видно из данного
примера, стилевый файл не хранит никаких данных, кроме синтаксиса CSS. Для связывания Web-документа с этим файлом применяется
тэг <link>. Тэг
<link> должень располагаться в заголовке каждого Web-документа [3]:
<link type="text/css" rel="stylesheet"
href="style.css">
Например, содержимое файла «index.html» имеет вид:
<html>
<head>
<meta
http-equiv="Content-Language" content="en-us">
<meta
http-equiv="Content-Type" content="text/html;
charset=windows-1251">
<link
type="text/css" rel="stylesheet"
href="style.css">
<title
class="fon1"> HTML & CSS </title>
</head>
<frameset
frameborder="0" framespacing="0"
cols="80%">
<frameset
rows="20%,*">
<frame
src="logo.html" name="frame1"
marginwidth="0"
scrolling="no">
<frameset
cols="30%,*">
<frame
src="info1.html" name="frame2" marginwidth ="1"
scrolling="no">
<frame
src="info2.html" name="frame3" marginwidth ="50"
scrolling="1">
</frameset>
</frameset>
</frameset>
</html>
Использование
описанного подхода использования технологии CSS позволяет эффективно создавать Web-проекты.
Результат применения
стилей показан на рисунке в виде офф-лайнового справочника «HTML
& CSS технологиясы», разработанного авторами (рисунок 1).
Рисунок 1 – Главное окно офф-лайнового справочника «HTML & CSS».
Выводы. При
использовании описанного подхода стили хранятся в одном стилевом файле, а ссылка к файлу указывается во всех документах Web-проекта. Благодаря этому удобно править
стиль в одном файле, при этом оформление автоматически меняется на всех документах, которые связаны с указанным файлом.
Вместо того, чтобы модифицировать десятки Web-документов, достаточно отредактировать один
стилевый файл и
оформление нужных Web-документов сразу же поменяется.
Литература
1.
http://www.w3.org
2.
http://css.manual.ru/properties/
- Ибрагимов
О.М. Web-бағдарламалауға
кіріспе Оқу құралы. -Шымкент:
ОҚМУ, 2012. -128 б. .