• strict warning: Non-static method view::load() should not be called statically in /home/s/serka1/devlib.ru/public_html/modules/views/views.module on line 879.
  • strict warning: Declaration of views_handler_filter::options_validate() should be compatible with views_handler::options_validate($form, &$form_state) in /home/s/serka1/devlib.ru/public_html/modules/views/handlers/views_handler_filter.inc on line 0.
  • strict warning: Declaration of views_handler_filter::options_submit() should be compatible with views_handler::options_submit($form, &$form_state) in /home/s/serka1/devlib.ru/public_html/modules/views/handlers/views_handler_filter.inc on line 0.
  • strict warning: Declaration of views_plugin_row::options_validate() should be compatible with views_plugin::options_validate(&$form, &$form_state) in /home/s/serka1/devlib.ru/public_html/modules/views/plugins/views_plugin_row.inc on line 0.
  • strict warning: Declaration of views_plugin_row::options_submit() should be compatible with views_plugin::options_submit(&$form, &$form_state) in /home/s/serka1/devlib.ru/public_html/modules/views/plugins/views_plugin_row.inc on line 0.

Стили CSS

Cтили css

Назначение CSS.

Теги HTML дают слабую возможность для оформления страниц. Для того чтобы мы могли раскрыть все свои таланты дизайнера, добавим в тег атрибут "style", который указывает на некоторые свойства объекта и устанавливает значение данного свойства.

У любого тега может быть несколько атрибутов "style", а каждый атрибут "style" может указывать на несколько свойств, которые заключены в кавычки и разделенные точкой с запятой. Например, два разных по написанию, но одинаковых по смыслу тега:

<P style='color: yellow' style='font-size:12px;'>
<P style='color: yellow; font-size:12px;'>

Для уменьшения размера страницы, вместо повторения одного и того же оформления каждому тегу, разумнее указать стили для DIV блоков или даже, всему BODY. Но, если в коде у нас много повторяющихся элементов, их определение желательно выделить в отдельный блок.

Размещение.

Тег, определяющий стили документа помещается либо внутри элемента <HEAD>, либо в отдельный файл с расширением .css. Если мы размещаем между тегами <HEAD>, то блок определения стилей объявляется и заканчивается тегом <STYLE>:

<STYLE>
<!--
-->
</STYLE>

Если разместить стили в отдельном файле, что наиболее удобно и позволяет браузеру ускорить загрузку страницы, то код должен выглядеть следующим образом:

 <link rel="stylesheet" href="style.css" type="text/css">

Конечно, Вам выбирать каким способом Вы будете определять свои стили css, однако приведем пару советов. Если у Вас только одна страничка, с небольшим количеством тегов и информации в целом, то целесообразнее разместить стили внутри тега <HEAD>. Однако, если сайт состоит более чем из двух страниц, и содержит большое количество информации, желательно вынести все стили в отдельный файл, поскольку тогда мы сможем менять стили в одном файле, а результат будет отображаться во всем сайте.

Структура определения стилей CSS.

Давайте теперь рассмотрим все на конкретных примерах. Зададим стиль для параграфа. Свойства атрибута style разделяются точкой с запятой. А значение свойства задается при помощи двоеточия:

<P style='color: blue; font-size:12px;'>

Определение стилей в файле css и в заголовке страницы между тегами <HEAD> определяется примерно точно также:

P {color: blue; font-size:12px;}

Располагать свойства CSS можно и в столбик:

P {
color: blue;
font-size:12px;
}

Обычно, это делается для улучшения визуального восприятия стилей. Так же для удобства можно использовать комментарии, заключенные между:

/* комментарий с CSS стилях */

Если несколько тегов имеют одинаковые значения, то чтобы не повторять их дважды, можно написать их следующим образом, отделив друг от друга запятой:

SPAN, DIV {border: 1px solid #000;}

Напоследок рассмотрим пример создания CSS стилей:


<HEAD>

<STYLE type="text/css">
<!--
A:link  {color: #F30;}
A:hover {background: #FFA}
P {
margin-top: 12px;
margin-bottom: 6px;
}
DIV {border: 1px solid #000;}
-->
</STYLE>

</HEAD>

В этом примере приведены теги A:link и A:hover обозначают непосещенную гиперссылку и гиперссылку, над которой находится указатель мыши. Для всех тегов A, P, DIV на данной странице будут применены свойства, описанные выше. Далее мы изучим, что такое классы, научимся их применять в наших страницах.