ПРИМЕР:
<html>
<head>
<title> Пример CSS </title>
</head>
<style>
.blue {color:blue; font-style:italic}
#boldunderline {text-decoration:underline; font-weight:bold}
</style>
<body>
<p class="blue"> Здравствуйте, это моя домашняя страница. </p>
<p class="blue" id="boldunderline"> Пока еще в стадии разработки ... </p>
<p id="boldunderline">... Но скоро откроется </p>
</body>
</html>
Как видно из примера, атрибут ID может быть использован без указания класса (последний параграф примера. Тогда параграф будет обладать только свойствами ID "boldunderline" (в примере - жирный, подчеркнутый текст).
Контекстуальные селекторы (Contextual Selectors):
Контекстные селекторы - это сочетания нескольких обыкновенных селекторов. Стиль задается только элементам в заданной последовательности в зависимости от каскадного порядка.
ПРИМЕР:
P EM {color:silver;}
В данном примере все элементы EM внутри элементов P будут иметь заданный стиль.
Придание нескольким элементам одинаковых свойств:
Скажем Вам нужно придать нескольким элементам Вашей веб страницы одинаковых свойств. В этом случае при определении селекторы перечисляются через запятую перед блоком свойств.
ПРИМЕР:
h1,h2,h3,p,strong {color:green; font-style:italic;}
Все элементы h1, h2, h3, p и strong будут зелеными.
Псевдоклассы и псевдоэлементы :
Синтаксис:
селектор:псевдокласс { свойства }
селектор.класс:псевдокласс { свойства }
селектор:псевдоэлемент { свойства }
селектор.класс:псевдоэлемент { свойства }
Псевдоклассы и псевдоэлементы - это особые классы и элементы, присущие CSS и автоматически определяемые поддерживеющими CSS браузерами. Псевдоклассы различают разные типы одного элемента, создавая при определении собственные стили для каждого из них. Псевдоэлементы являются частями других элементов, задавая этим частям отличный от элемента в целом стиль.
Список псевдоклассов и псевдоэлементов :
Anchor Pseudo Classes - эти псевдоклассы элемента <a href=" ">, обозначающего ссылку. Псевдоклассы этого элемента: (ссылка), active (активная ссылка), visited (посещенный ранее URL), hover (псевдокласс, возникающий при поднесении курсора к ссылке, не работает в Нетскейпе).
First Line Pseudo-element - first-line. Этот псевдоэлемент может быть использован с block-level элементами (p, h1 и т.д.). Он изменяет стиль первой строки этих элементов.
First Letter Pseudo-element - first-letter. Похож на first-line, но влияет не на всю строку, а только на первый символ.
ПРИМЕР :
a:link,a:visited {color:blue}
a:active {color:red}
a:hover {text-decoration:none}
В данном примере все элементы Anchor (ссылки) будут синими. При нажатии (в активном состоянии) поменяют цвет на красный. И при подведении курсора мышки исчезнет подчеркивание.
Примечание : описания нескольких свойств для одного селектора, контекстуального селектора, класса, индивидуально именованного стиля или группы объединенных селекторов отделяются друг от друга точкой с запятой ";".
Внутренние Таблицы Стилей
Как уже говорилось, использование Внутренних стилей мало чем отличается от использования обычных HTML тегов. Они задают стиль только одному элементу документа при помощи атрибута STYLE в HTML теге.
ПРИМЕР HTML:
<font color="blue" size="3" face="Arial"> Вперед в будущее </font>
ПРИМЕР INLINE STYLE SHEET:
<font style="color:blue; font-size:12pt; font-family:Arial"> Вперед в будущее </font>
Как можно заметить, код Inline Style Sheet получился больше чем HTML. Поэтому ISS следует использовать только если необходимо задать определенному элементу свой индивидуальный стиль, существующий в классификации CSS и нереализованный в HTML. Или же при необходимости абсолютно позиционировть данный элемент.
Глобальные Таблицы Стилей
Глобальные стили задают вид элементов всего документа. Для этого используется тег <STYLE type="text/css">. Он размещается в заголовке документа.
ПРИМЕР:
<html>
<head> <title> Пример Глобальных Таблиц Стилей </title>
</head>
<STYLE type="text/css">
h1{color:red; font-style:italic; font-size:32px}
.blue{color:blue}
#bold{font-weight:bold}
</STYLE>
<body>
<h1> Этот заголовок написан крупным красным курсивом </h1>
Вот <font class="blue"> это </font> слово - синие, a <font id="bold"> это</font> - жирное.
</body>
</html>
В данном примере все элементы H1 будут написаны крупным красным курсивом, все элементы с указанным классом BLUE будут синими , а все элементы с идентификатором ID="Bold" станут жирными. Для простоты вместо <STYLE type="text/css"> можно использовать просто тег <STYLE>, что менее грамотно.
Связанные Таблицы Стилей
Связанные таблицы стилей используются для придания нескольким документам одного стиля и xранятся в отдельном файле. Это очень привлекательно, когда нужно выдержать сайт в одном стиле, не утруждая себя составлением таблиц для каждого документа.
ПРИМЕР:
Файл styles.css
<STYLE type="text/css">
body {background:black; font-size:9pt; color:red; font-family:Arial Black}
.base{color:blue; font-style:italic}
h1 {color:white}
#bold {font-weight:bold}
</STYLE>
В самих же HTML документах делается ссылка на этот файл при помощи тега <LINK>. Выглядит это так: <LINK rel="STYLESHEET" TYPE="text/css" HREF="путь до файла">
ПРИМЕР:
Файл Index.html
<html>
<head>
<title> Просто еще один пример </title>
</head>
<LINK rel="stylesheet" type="text/css" href="styles.css">
<body>
Содержание Документа
</body>
</html>
SSI расшифровывается как Server Side Include. SSI - это набор команд, позволяющий включить в страницу информацию, недоступную средствами HTML, такую как вывод программ, значения переменных окружения и статистику по файлам (размер, дата создания и др.). Все это и более позволяют делать CGI-скрипты, но зачем писать целый скрипт для получения размера файла, если можно воспользоваться SSI?
SSI работает очень просто: при получении запроса на документ, содержащий SSI-директивы, http-сервер обрабатывает документ, выполняет все SSI-директивы, а получившийся в результате документ возвращает клиенту. Http-сервер не проверяет автоматически все документы на наличие SSI-директив, а только те, которые относятся к типу, указанному в настройках сервера.
Для указания http-серверу, какие документы считать содержащими SSI-директивы, в srm.conf, находящемся в /etc/httpd/conf надо раскомментировать следующие строки:
AddType text/html .shtml
AddHandler server-parsed .shtml
После этого все документы с расширением .shtml будут проверяться на SSI-директивы. Но удобнее будет определить чтобы все .html-файлы могли содержать SSI. Это делается добавление в srm.conf следующих строчек:
AddType text/html .html # не обязательно, т.к. он и так описан.
AddHandler server-parsed .html
Теперь надо разрешить выполнение SSI в каталоге, в котором лежат твои файла. Найди в access.conf описание каталога, в котором лежат твои html'ы и добавь в его Options директиву Includes:
#было так
Options Indexes
#стало так
Options Indexes Includes
Если твой каталог не прописан, его надо прописать. Почитай доку по Apache, чтоб узнать как это делается. А если у тебя нет возможности изменять srm.conf или access.conf, т.е. ты не root, тогда за пивом, а потом к админу.
SSI-директивы включаются в html-код в виде комментариев, но определенного формата:
<!--#SSI_директива="параметры" -->
Использовать можно следующие SSI-директивы:
echo var
Используется для вывода значения переменной окружения.
Твой IP - <!--#echo var="REMOTE_ADDR"--> <BR>
Твой браузер - <!--#echo var="HTTP_USER_AGENT"--> <BR>
Мой сервер - <!--#echo var="SERVER_NAME"--> <BR>
Ты пришел со страницы - <!--#echo var="HTTP_REFERER"--> <BR>
А вот вывод:
Твой IP - 193.125.78.114
Твой браузер - Mozilla/4.0 (compatible; MSIE 5.01; Windows NT 5.0)
Мой сервер - www.citforum.ru
Ты пришел со страницы - (none)
include file
include virtual
Включает в html-файл в месте, где идет вызов SSI, содержимое указанного файла. Отличие include file от include virtual в том, что в первом случает используется файл, находящийся в том же каталоге, что и html-файл, во втором случает указывается путь к файлу относительно текущего каталога. Если с помощью include file или include virtual включается cgi-скрипт, то в содержимое страницы попадет вывод cgi-скрипта, а не его содержание.
fsize file
Вставляет размер указанного файла.
Размер файла этой страницы:
<!--#fsize file="ssi.shtml"--> <BR>
Вывод:
Размер файла этой страницы: 12k
flastmod file
Вставляет время последней модификации указанного файла.
Время последней модификации файла этой страницы:
<!--#flastmod file="ssi.shtml"--> <BR>
Вывод:
Время последней модификации файла этой страницы: Wednesday, 21-Jun-2000 16:31:33 MSD
exec cmd
exec cgi
Запускает внешнюю программу (exec cmd) или cgi-скрипт (exec cgi) и вставляет в содержимое страницы вывод.
config errmsg
config sizefmt
config timefmt
Изменяет различный параметры конфигурации SSI. config errmsg изменяет стандартное сообщение об ошибке на введенное пользователем. Сообщение об ошибке возникает при неправильном выполнении SSI-директивы, например при отсутствии cgi-скрипта, который ты пытаешься запустить.
Это стандартная ошибка при запуске скрипта, которого нет: <BR>
<!--#exec cgi="/cgi-bin/nonexistence.pl"--> <BR>
А теперь заменим сообщение об ошибке и повторим: <BR>
<!--#config errmsg="Ошибка, пишите <a href=mailto:dh@null.ru>автору ошибки</a>"-->
<!--#exec cgi="/cgi-bin/nonexistence.pl"--> <BR>
Вывод:
Это стандартная ошибка, возникающая при запуске скрипта, которого нет:
[an error occurred while processing this directive]
А теперь заменим сообщение об ошибке и повторим:
Ошибка, пишите автору ошибки
Директива config sizefmt изменяет формат вывода размера файла.
Размер файла этой страницы в килобайтах:
<!--#config sizefmt="abbrev"-->
<!--#fsize file="ssi.shtml"--> <BR>
Размер файла этой страницы в байтах:
<!--#config sizefmt="bytes"-->