5 Приклад застосування каскадних таблиць стилів
Як приклад, розглянемо головну сторінку сайту, який будується з використанням зовнішнього файлу стилів.
Рисунок 6.1 – Загальний вигляд сторінки в браузері
Далі наведено HTML-код сторінки:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Кафедра обчислювальної математики</title>
<style type="text/css">
<!--
@import url(style.css);
-->
</style>
</head>
<body>
<div id="carrier">
<div ><img src="gerb_zn.gif" style="top: 10px; left: 30px; float: left; width: 100px; height: 140px;
margin: 10px 40px"></div>
<h1 id="header">Кафедра обчислювальної математики</h1>
<div id="menucarrier">
<div id="menu">
<p><a href="index.html">Головна</a></p>
<p><a href="science.html">Наука</a></p>
<p><a href="metod.html">Методика</a></p>
<p><a href="publ.html">Публікації</a></p>
<p><a href="kont.html">Контакти</a></p>
</div>
</div>
<div id="text">
<h2>До уваги абітурієнтів! !</h2>
<p>З 2004 року на кафедрі відкрита нова спеціальність"Системний аналіз і управління" з напрямку "Прикладна математика". Майбутні фахівці будуть мати глибокі знання в галузі математики, фізики, інформаційних технологій, комп'ютерного моделювання технічних, економічних та соціальних процесів, а також будуть володіти сучасними методами керування і прогнозування.
<a href="buclet.html">Докладніше>>>... </a>
.</p>
<h2>Підприємствам і організаціям </h2>
<p>Запрошуємо до взаємовигідного співробітництва на контрактній основі по наступним напрямкам:
</p>
<ul>
<li>математичне моделювання технічних, економіко-соціальних, фізичних явищ і систем;
<li>розробка прикладного програмного забезпечення;
<li>розробка WEB представництв;
<li>розробка СУБД;
<li>Освітні послуги
</ul>
</div>
<div id="footer">
<p>© <a href="http://www.lomov.ru/">ЗНТУ, 2007<br />Пишите письма: <a href="mailto:vm@zntu.edu.ua">vm@zntu.edu.ua</a>.</p>
</div>
</div>
</body>
</html>
Наступний файл style.css містить стильове оформлення сторінки. Зверніть увагу на відмінність стилів для екранної версії сторінки, версій для КПК та для друку на принтері.
/* Правила для екранної версії подання даних */
@media screen {
/* Загальні установки для сторінки */
html, body {
margin: 0px;
padding: 0px;
border: 0px;
}
body {
color: #000;
background: #999 url(images/bg_page.gif) scroll;
font-family: Georgia, "Times New Roman", Times, serif;
}
/* "Підкладка" для всієї сторінки */
#carrier {
width: 100%;
background: #fff;
}
/* Шрифт для "шапки", меню навігації, заголовків другого рівня в основному тексті й "підвалу" */
#header, #menu, #text h2, #footer {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
}
/* Загальні правила оформлення "шапки" і "підвалу" */
#header, #footer p {
color: #fff;
background: #369;
padding: 10px 220px;
margin: 0px;
}
/* Настройки "шапки" */
#header {
font-size: 150%;
border-bottom: solid 5px #69c;
}
/* "Підкладка" для навігаційного меню. Ширина області навігації постійна у всіх браузерах і становить 200 пікселей */
#menucarrier
{
width: 200px;
margin-bottom: 20px;
float: left;
background: #fff0cc url(images/bg_menu.gif) center repeat-y scroll;
position: absolute;
top: 170px;
left: 0px;
}
/* Блок навігації */
#menu {
font-size: 18px;
text-align: center;
padding: 10px 20px;
border-style: none dotted dotted none;
border-width: 0px 2px 2px 0px;
border-color: #c00;
}
/* "Кнопки" навігаційного меню розташовані на відстані 20 пікселей одна від одної й від границь навігаційного блоку по вертикалі */
#menu p { padding: 10px 0px; margin: 0px; }
/* За допомогою властивості display ми перетворюємо гіперпосилання й контейнер <span>...</span>, розміщені в блоці навігації, з внутрірядкових елементів у блокові, що дає нам можливість указати ширину за допомогою властивості width */
#menu a, #menu span { display: block; width: 154px; margin: auto; }
/* Далі випливають правила подання "кнопок" навігаційного меню.
1) звичайні; 2) виділені за допомогою курсору
миші; 3) відповідні поточному розділу й
призначені для його внутрішніх сторінок - для таких "кнопок" призначено клас current; 4) відповідні поточній
сторінці й тому що не є посиланнями - цей вид "кнопок"
представлений елементами <span>...</span> */
#menu a { color: #000; text-decoration: none; }
#menu a:link, #menu a:visited { background: #fff0cc; border: solid 2px #fc9; }
#menu a:hover, #menu a:active, #menu a.current:link, #menu a.current:visited, #menu span { border-style: solid dotted; border-width: 2px; border-color: #c00; }
#menu a.current:link, #menu a.current:visited, #menu span {
background: #fff; }
#menu span { color: #999; }
#menu a.current:hover, #menu a.current:active { background: #fff0cc; }
/* Подальші правила визначають оформлення елементів області основного текстового змісту сторінки */
#text { margin-left: 200px; padding: 20px; }
#text h2 { font-size: 120%; font-weight: normal; text-transform: uppercase; color: #369; }
/* Псевдокласс first-child указує на перший вкладений
у блок #text заголовок <h2>...</h2>. Для таких заголовків
верхній вертикальний відступ установлюється рівним нулю.
Втім, Internet Explorer не розуміє цього псевдокласса,
так що в браузері від Microsoft перший заголовок області
основного тексту буде розташований помітно далі від
"шапки", ніж у браузерах, що ставляться до рекомендацій
W3C більш шанобливо */
#text h2:first-child { margin-top: 0px; }
/* Абзаци основного тексту */
#text p { text-align: justify; text-indent: 1.5em; margin: 0px; }
/* Клас, що дозволяє виділяти напівжирним накресленням
дати свіжих відновлень сайту */
.date {
font-weight: bold;
}
/* Подання нумерованих і маркірованих списків
в основному тексті */
#text ul, text ol {
margin-top: 0px;
margin-bottom: 0px;
}
#text ul { list-style-type: square; }
/* Оформлення посилань в основному тексті */
#text a { text-decoration: none; }
#text a:link { color: #f60; }
#text a:visited { color: #999; }
#text a:hover { text-decoration: underline; }
#text a:active { color: #f00; }
/* Правила, що визначають оформлення "підвалу" */
#footer { width: 100%; clear: both; }
#footer p {
font-size: 70%; border-top: solid 5px #69c; }
#footer a:link, #footer a:visited, #footer a:hover, #footer a:active
{ color: #fff; text-decoration: underline; }
}
/* Правила, що визначають версію подання даних для кишенькових комп'ютерів. */
@media handheld { html, body { margin: 0px; padding: 0px;
border: 0px; }
body { font: 12px Tahoma, Arial, Helvetica, sans-serif; color: #000; background: #fff; }
#header, #menucarrier, #text, #footer { padding: 5px; }
#header, #footer { background: #ccc; }
#header { font-size: 16px; margin: 0px; }
#menucarrier { background: #fff0cc; border-top: solid 1px #666; border-bottom: solid 1px #666; }
#footer { border-top: solid 1px #666; }
h2, p { margin: 5px 0px; }
#text h2 { font-size: 14px; }
ul { list-style: square inside; margin: 5px; padding: 0px; }
li { margin: 0px; padding: 0px; }
a:link { color: #00f; }
a:visited { color: #609; }
}
/* Правила для версії сторінки для друку.*/
@media print {
body { color: #000; font: 12pt "Times New Roman", Times, serif; }
#header, #menucarrier, #footer { display: none; }
#text h2 { font: 16pt Arial, Helvetica, sans-serif; }
#text a { color: #000; text-decoration: none; }}