Стили
Основным понятием языка CSS является
стиль – то есть правила оформления и
форматирования различных элементов страницы.
В обычном HTML, при описании каких-либо свойств
элементов, Вам приходится каждый раз записывать одни и теже параметры
тегов независимо от того, сколько раз эти элементы встречаются на
странице.
С помощью языка CSS это описывается проще.
Для описания каких-либо свойств элементов, Вам необходимо один раз
описать эти свойства и опрелелить это описание как
стиль, а при повторном появлении элементов
(использующих эти свойства) на странице - просто указывать на его стиль
(описанный ранее).
И еще, описание стиля может находиться как
непосредственно в коде Вашей страницы, так и в отдельном файле
(в этом случае это описание можно применять и на других страницах).
Необходимо сразу отметить, что описание стилей
поддерживается не всеми серверами интернета, но, все же, большей их
частью. Так что, до использования языка CSS убедитесь, что сервер, на
котором будет размещен Ваш сайт, их поддерживает.
Итак. Как уже говорилось выше, информация о стилях
может располагаться либо в отдельном файле, либо непосредственно в коде
Вашей страницы. Остановимся на описании стилей в отдельном файле. Для
этого необходимо просто создать отдельный файл и записать туда все
используемые стили, разместить этот файл на сервере, а в коде
страниц, использующих эти стили, поставить ссылку (отформатированную
определенным образом) на него. Формат этой самой ссылки описывается с
помощью тега <LINK>. В коде страницы
он должен находиться между тегами
<HEAD>. Теперь осталось привести его
формат:
<LINK REL=STYLESHEET TYPE="text/css" HREF="имя файла.css">
где имя файла.css - путь/имя файла с описанием стилей
Также можно применять файл, находящийся и на
другом сервере.
Второй способ описания стилей - непосредственно в
коде странице, также между тегами <HEAD>.
В этом случае, описанные таким образом, стили могут быть использованны
только в пределах одной (текущей) страницы. Выглядит это так:
<HEAD>
<STYLE TYPE="text/css">
<!--
само описание стилей
-->
</STYLE>
</HEAD>
Комментарии внутри тега
<STYLE TYPE="text/css"> необходимы для
того, чтобы браузер, который не поддерживает стили, пропустил их
содержимое, не выводя их на экран.
Необходимо отметить, что в первом случае,
в файле со стилями, теги
<STYLE> и
<!--
не нужны. На то, что это стили указывают первые два параметра
в теге <LINK>.
Еще стиль можно описать и в каком-нибудь
конкретном месте страницы. В этом случае стиль описывается внутри
любого тега. Сделать этого можно следующим образом:
<BODY>
...
<H1 STYLE="само описание стиля">
текст
</H1>
...
</BODY>
Основные методы описания стилей Вы уже уловили.
Теперь переходим к описанию параметров присвоения элементам страницы
тех или иных стилей. Самый простой способ присвоения какому-либо
элементу определенного стиля выглядит так:
название_элемента
{свойство:значение;}
название_элемента -
это имя HTML-тега (A, TD, P), а параметры в фигурных скобках - это
свойство или список свойств (разделенных символом "точка с запятой"
(;)) элемента и присвоенных им значений. Их мы подробно распишем
познее, сейчас важным является сама форма написания. Например:
H1
{font-size:30px;
color:#FF0000;}
Из этого примера браузер поймет, что все
заголовки формата <H1> будут иметь
размер шрифта = 30 пикселам и цвет букв = красный.
Кроме того, стили можно задавать и с помощью
переменных:
.gfd
{font-size:30px;}
обратите внимание, что имя переменной должно ОБЯЗАТЕЛЬНО начинаться
с точки (.)
В таком случае вводится такой параметр, как
CLASS=, присваивающийся любому тегу
страницы. И код страницы, использующий описание стиля с помощью
переменной, будет выглядеть следующим образом:
<P CLASS="gfd">
текст параграфа
</P>
здесь имя переменной используется без точки
Этот пример говорит о том, что все элементы
данного класса в этом конкретном месте будут отображаться такими,
какими они описаны в переменной .gfd.
И наконец сами свойства. Для начала - единицы
измерения. Они могут быть:
px - пикселы
cm - сантиметры
mm - миллиметры
pt - пункты (типографские)
% - проценты
Теперь и сами свойства:
Свойства цвета
| свойство |
описание, значения и
пример |
| color |
цвет элемента
A{color:white;} |
| background-color |
устанавливает цвет фона для
элемента: IE - отводит под фон всю доступную ширину страницы; NC -
ширину, занимаемую элементом.
H1{background-color:yellow;} |
Свойства текста
| свойство |
описание, значения и
пример |
| text-decoration |
описывает подчеркивание и
зачеркивание
бывает: none, underline, line-through
A{text-decoration:none;} |
| text-indent |
устанавливает отступ (табуляцию)
H1{text-indent:20pt;} |
| text-align |
выравнивание текста
бывает: center, justify
H4{text-align:center;} |
| line-height |
устанавливает интервалы между
строками
P{line-height:30%;} |
Свойства шрифта
| свойство |
описание, значения и
пример |
| font-family |
указание типа шрифта
P{font-family:Arial, sans-serif;} |
| font-weight |
степень жирности
бывает: lighter, bold, bolder
H1{font-weight:bold;} |
| font-size |
размер
можно задавать в разных единицах
H3{font-size:150px;} |
Свойства границ как текста, так и графики
| свойство |
описание, значения и
пример |
| margin |
задает отступы со всех сторон
IMG{margin:5px;} |
| margin-left |
отступ слева
P{margin-left:5px;} |
| margin-right |
отступ справа
IMG{margin-right:5px;} |
| margin-top |
отступ сверху
P{margin-top:5px;} |
| margin-bottom |
отступ снизу
IMG{margin-bottom:5px;} |
Иногда бывает встает вопрос - как собрать
страницу из нескольких маленьких страниц. Решением этого вопроса
является тег
<!-- #include file="main.htm"-->
Браузер вместо этого тега (на этом же месте)
подставляет содержимое файла main.htm.
Еще язык CSS применяют для создания
слоев. При задании слоев получается, что
графика может находиться поверх таблицы или простой текст может идти
поверх графики. Это очень удобно при необычной компоновки страницы.
Как это все работает - необходимо просто описать каждый слой тегом
<DIV STYLE="свойство:значение;">
содержимое
...
слоя
</DIV>
Свойства слоя
| свойство |
описание, значения и
пример |
| position |
устанавливает слой относительно
левого верхнего края
бывает: absolute
без указания этого свойства (именно со значением absolute) Вы не
сможете установить позицию слоя с помощью свойств left и top (см. ниже).
position:absolute |
| left |
насколько влево отодвинуть
слой
left:50px; |
| top |
насколько вниз отодвинуть слой
top:150px; |
width
height |
насколько по ширине/высоте
растянуть слой
задаются только в пикселах
height в NC не поддерживается, если все же он необходим, то сделайте
внутри слоя таблицу |
| background-color |
цвет фона слоя
в NC также не поддерживается, выход - опять же таблица
background-color:цвет |
| background-image |
цвет фонового изображения слоя
NC, как ни странно, поддерживает
background-image:(путь)
в качестве пути можно писать как и полный URL, так и короткий
круглые скобки необходимы |
| z-index |
задает порядок расположения
слоев на странице: чем меньше значение, тем позднее выводится слой
z-index:число |
Пример:
<DIV STYLE="position:absolute;
left:150px;
top:50px;
width:300px;
height:500px;
background-color:#FF00FF;
background-image:url(www.mail.ru/images/inc.gif);
z-index:0;">
содержимое
...
слоя
</DIV>
Если Вам необходимо сделать слой, состоящий только
из одного объекта, то можно просто обойтись описанием в нужном теге параметра
STYLE=. Пример:
<IMG SRC="файл.gif"
STYLE="свойства слоя">
|
|
