| |
|
Пример создания внешней стилевой таблицы
Под внешней стилевой таблицей CSS я подразумеваю файл с каким-то именем
style.css, на который ставится
ссылка в Вашем html-файле (страничке). ссылка выглядет следующим образом:
<link rel="stylesheet"
href="style/style.css">
где style/style.css
- путь к Вашей стилевой таблице style.css,
расположенной в каталоге style.
Сама стилевая таблица style.css
(это только пример!) может выглядеть примерно так:
-----------------------------------------------------------
TD {font-family: Verdana, Arial, Tahoma, sans-serif; font-size: 12px;
color: #4F0000; font-weight: normal; font-decoration: none}
TD.other {font-family: Verdana, Arial, Tahoma, Helvetica, sans-serif;
font-size: 11px; color: #4F0000}
.mainmenu {font-family: Verdana, Arial, Helvetica, sans-serif; font-size:
12px; color: #4F0000; font-weight: bold}
.rightmenu {font-family: Verdana, Arial, Helvetica, sans-serif; font-size:
12px; color: #004232; font-weight: bold}
.block {font-family: Verdana, Arial, Helvetica, sans-serif; font-size:
12px; color: #266C6F; font-weight: bold}
.texttitle {font-family: Verdana, Arial, Helvetica, sans-serif; font-size:
12px; color: #505998; font-weight: bold}
.place {font-family: Verdana, Arial, Helvetica, sans-serif; font-size:
11px; color: #818B98}.alert {font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px; color: #cc3300; font-weight: bold}
.alert2 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size:
12px; color: #cc3300; font-weight: normal}
.ok {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;
color: #006666; font-weight: bold}
.copy {font-family: Verdana, Arial, Helvetica, sans-serif; font-size:
9px; color: #666666; font-weight: normal; text-decoration: none}
form {padding-bottom: 0 px; padding-top: 0px; margin-bottom: 0px; margin-top:
0px}
.leftimg {float: left}
A {color: #505998; font-weight:
normal; text-decoration: underline}
A:hover {color: #cc3300; font-weight: normal; text-decoration: underline}
A.menu {font-family:
Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #4F0000;
font-weight: bold; text-decoration: none}
A.menu:hover {font-family: Verdana, Arial, Helvetica, sans-serif; font-size:
12px; color: #cc3300; font-weight: bold; text-decoration: none}
-----------------------------------------------------------
Создание ссылки на разные стилевые таблицы для Netscape Navigator
и Microsoft Explorer при помощи Java Script
Как известно, ранние версии Netscape Navigator поддерживают ограниченный
набор стилевых классов. Поэтому различные визуальные эффекты, создаваемые
при помощи CSS-стилей и видимые в Microsoft Explorer, в Netscape Navigator
либо не отображаются вообще, либо приводят к ошибкам на странице. Но это
вовсе не значит, что Вам надо приводить Вашу стилевую таблицу к единому
знаменателю, делая ее универсальной как для одного, так и для второго
браузеров. При помощи Java Script можно производить проверку браузера
пользователя ( посетителя Вашего сайта) и в зависимости от этого загружать
ту или иную стилевую таблицу. Другими словами, если у посетителя Explorer
- подставляется ссылка <link
rel='stylesheet' href='styles/default.css' type='text/css'>,
где default.css
- с мозданный Вами стиль для браузера Microsoft Explorer. А если посетитель
пользуется Navigator'ом, подставляется ссылка <link
rel='stylesheet' href='styles/nn.css' type='text/css'>, т.е.
стили, корректно отображаемые в Netscape Navigator.
Сам скрипт Java Script выглядет примерно так:
<script language="JavaScript">
<!--
browserName = navigator.appName;
browserVersion = parseFloat(navigator.appVersion);
if (browserName == "Netscape" && browserVersion >
3.0)
{document.writeln("<link rel='stylesheet' href='styles/nn.css'
type='text/css'>");}
else
{document.writeln("<link rel='stylesheet' href='styles/default.css'
type='text/css'>");}
// -->
</script>
Помни об этом!
Ссылка на стилевую таблицу и сам Java Script в Вашем html-файле должны
находится внутри <head>этого
тега</head>
Максим Костюченко
|