Стили 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>
Если разместить стили в отдельном файле, что наиболее удобно и позволяет браузеру ускорить загрузку страницы, то код должен выглядеть следующим образом:
<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 на данной странице будут применены свойства, описанные выше. Далее мы изучим, что такое классы, научимся их применять в наших страницах.