Куракбаев Ж.С., Мекемов А.М.
Южно-Казахстанский государственный университет
им.М.Ауезова, Шымкентский университет, Казахстан
Об одном подходе использования технологии CSS
Введение. CSS (Cascadе Style Sheets) каскадные таблицы стилей – это
совокупность правил, которые описывают стиль оформления Web-документов. Их используют в тех случаях, когда необходимо
установить единый стиль оформления для Web-проектов, сайтов или
нескольких гипертекстов. Технология CSS позволяет сделать HTML-код компактнее и уменьшить время
загрузки Web-документа [1].
Для добавления стилей в 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/
3. Құрақбаев
Ж.С., Ибрагимов О.М. «HTML+JavaScript» пәніне
арналған әдістемелік оқу құралы. –Шымкент: ОҚМУ,
2011. – 68 бет.