Каскадные таблицы стилей

Краткие теоретические сведения

Кроме собственно языка HTML существует еще большое количество дополнений, которые призваны облегчить жизнь веб-мастеру и немного навести порядок на сайте. Есть среди них полезные, есть и вредные, но есть два дополнения, которые нужно использовать обязательно, даже если сейчас вы не видите, как они могут вам пригодится. Эти два дополнения - SSI (Server Side Inclusions) и CSS (Cascade Stile Sheets), оба они довольно простые, хоть и обладают огромными возможностями.

С помощью SSI вы можете включать в свою страницу любые необходимые вам фрагменты (тексты, картинки, счетчики, результаты работы программы и пр.) непосредственно на сервере. Это дает вам возможность загружать в заданное место страницы повторяющиеся элементы по всему сайту из одного источника. Хороший пример - оглавление - оно обычно повторяется на всех страницах узла и всегда одинаковое. Поставив директиву SSI, вы сможете хранить оглавление в отдельном текстовом (или HTML) файле, который сервер будет вставлять на каждой странице в указанное вами место. Такой файл гораздо легче исправить, если возникает такая необходимость. Представьте, что у вас 200 файлов, в каждом надо исправить оглавление и положить на сервер, а тут - поменял текст в одном файле и положил на сервер за несколько секунд. Кроме того, при большом объеме сайта можно значительно выиграть в дисковом пространстве, которое вам потребуется, и вам, например, потребуется меньше времени на "заливку" файлов на сервер.

Второе важное дополнение - это каскадные таблицы стилей - CSS. Они позволяют определять и переопределять стили оформления текста, а также других элементов на странице. На самом деле, возможности CSS очень велики: используя эту систему вы можете задать оформление всего сайта, описав его параметры в одном единственном файле, а потом несколькими движениями мыши переделать все оформление, просто поставив другие параметры в файле-описании. Более того, существуют системы на основе CSS, позволяющие то же самое проделывать не только издателю, но и посетителям. Это немножко похоже на фокус. Если вы когда-нибудь игрались с Desktop Themes (штука такая в Control panel, меняющая оформление Microsoft Windows) или загружали себе на компьютер шкурки (skins), то здесь нечто похожее: поменял один файл-описание на другой, и на тебе: совершенно другой сайт.

В отличие от SSI, CSS - это инструкции для браузера, а не для сервера, причем, далеко не все браузеры в состоянии грамотно отобразить их, а, следовательно, не стоит удивляться тому, что не все пользователи смогут увидеть все красоты вашего сайта. Самая распространенная схема использования CSS - это переопределение стандартного ряда стилей H1-H6 и одновременное создание нескольких дополнительных стилей с собственными названиями. В результате, вы используете при верстке страниц стандартные стили, которые при открывании страницы пользователем выглядят в соответствии с заданными вами директивами. Если же браузер пользователя не в состоянии грамотно интерпретировать CSS инструкции, то человек увидит просто стандартные стили. Таким образом, сайт пострадает не катастрофично и все равно будет вполне читаемым, конечно, если вы использовали стили по назначению: H1 - самый крупный заголовок, H2 - немного помельче и т.д.

При желании, если вы определяете большое количество стилей, вы можете снести все записи в отдельный файл (обычно default.css), который браузер будет автоматически забирать при заходе на сайт. Это, кстати, реально увеличивает скорость загрузки, при длительном нахождении на сайте, поскольку файл описания стилей загружается один раз и только в самом начале сессии, а вот подставляется оно во все страницы, следовательно, при указывании стилей в заголовке каждой страницы, вы каждый раз увеличиваете объем файла на лишний 1-2 килобайта.

Теперь вы можете менять стилистику всего файла, редактируя один текстовый файл. Кроме того, вы автоматически применяете один и тот же стиль оформления по всему сайту, пользуясь при этом привычными тегами. Использование CSS тем более желательно, что при оформлении заранее заданными тегами гораздо сложнее ошибиться и поставить кегль, например, на единицу меньше. Таким образом, используя CSS, вы можете не задумываться, какой именно тег здесь поставить, поскольку все шрифты и размеры у вас уже определены в таблице стилей и расписаны в макете.

Вышеупомянутые мною системы SSI и CSS крайне желательны к применению на сайте. Даже если они сейчас вам не нужны, то при разрастании узла вы, со временем, придете к положению, когда они понадобятся, и тогда придется переделывать несколько десятков или сотен страниц. Очень удобно, в частности, то, что эти системы позволяют вам не держать в голове все страницы, поскольку все их ключевые элементы определяются либо таблицей стилей, либо подгружаются по заданному шаблону.

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



Виды таблиц стилей

Существует три вида таблиц стилей: внутренние таблицы стилей, глобальные таблицы стилей и связанные таблицы стилей.

Как уже говорилось, использование внутренних стилей мало, чем отличается от использования обычных HTML тегов. Они задают стиль только одному элементу документа при помощи атрибута style в HTML теге.

Пример 1:

код HTMLв окне браузера
<font color="blue" size="3" face="Arial">Привет</font> Привет
<font style="color:blue; font-size:12pt; font-family:Arial">Привет</font> Привет

Как можно заметить, код при использовании внутренних стилей получился больше чем в виде HTML. Поэтому иногда разумнее использовать обычные HTML теги.


Глобальные стили задают вид элементов всего документа. Для этого используется тег <STYLE>. Он размещается в заголовке документа.

Пример 2:

<style>
  h1 {color:red; font-style:italic; font-size:32px}
  .blue {color:blue}
  #bold {font-weight:bold}
</style>

Связанные таблицы стилей используются для придания нескольким документам одного стиля. Хранятся они в отдельном файле, наример (файл default.css)

Это очень похоже на глобальные стили. Так оно и есть. Все что относилось к глобальным стилям справедливо и здесь. В самих же документах делается ссылка на этот файл при помощи тега <link>. Выглядит это так:

Пример 3:

<LINK rel="STYLESHEET" type="text/css" href="URL_файла">


Значение параметров

Значения параметров длины или размера.

ОбозначениеЕдиницы длиныKоментарий
em - ems,высота используемого шрифта
ex - x-height,ширина буквы "x" используемого шрифта
px - pixels,пиксели
in - inches,дюймы
cm - centimeters,сантиметры
mm - millimeters,миллиметры
pt - points,точка (1pt = 1/72in)
pc - picas,(1pc = 12pt)

Пример 4:

-566pt

Значение параметра в процентах.

Пример 5:

-566%

Значение параметра цвета (color)

Пример 6:

magenta

Значением цвета может быть его название (red, coral и т.д.) или RGB значение.

Способы выразить цвет в RGB (red green blue)

ОбозначениеПример
#rrggbb - например, #00cc00
rgb(x,x,x) - где "х" число от 0 до 255 (например, rgb(0,204,0))
#rgb - например, #0c0
rgb (x%,x%,x%) - где "х%" число от 0.0 до 100.0 (например, rgb(0%,80%,0%))

Все примеры отображают один и тот же цвет -       

Значение параметра URL

Синтаксис: "URL" , потом в скобках приводится ссылка. Ссылку также можно, помимо скобок, заключить в одинарные или двойные кавычки (без пропусков)

Пример 7:

URL(‘cool.gif’)

Параметры

Параметры шрифта

ОбозначениеКоментарий
font-family - Определяет используемый элементом шрифт
font-style - Стиль элемента. Курсивный или обычный
font-variant - Заменяет все буквы заглавными
font-weight - Толщина шрифта
font-size - Задает размер шрифта
font - Обобщает все вышеперечисленные свойства

Параметры текста

ОбозначениеКоментарий
word-spacing - Регулирует расстояние между cловами
text-decoration - "Украшение" текста
letter-spacing - Расстояние между буквамии
vertical-align - Позиционирование элементов по отношению к другим
text-transform - Изменение текста
text-align - Выравнивание текста
text-indent - Отступ
line-height - Отступ сверху

Параметры цвета и фона

ОбозначениеКоментарий
color - Цвет
background-color - Цвет фона элемента
letter-spacing - Расстояние между буквамии
background-image - Фоновое изображение
background-repeat - Повторения фонового изображения
background-attachment - Возможность прокрутки фонового изображения
background-position - Положение фонового изображения
background - Обобщает все вышеперечисленные свойства

Параметры классификаций (списков)

ОбозначениеКоментарий
display - Определяет как будет отображаться элемент
white-space - Определяет как будут отображаться пробелы между элементами
list-style-type - Определяет вид list-item маркера
list-style-image - Задает вид list-item маркера в виде картинки
list-style-position - Определяет положение маркера в зависимости от list item элемента

Параметры отступа, границ и размеров

ОбозначениеКоментарий
margin-top - Определяет отступ сверху
margin-right - Определяет отступ справа
margin-bottom - Определяет отступ снизу
margin-left - Определяет отступ слева
margin - Обобщает все вышеперечисленные свойства
padding-top - Отступ от верхней границы.
padding-right - Отступ от правой границы
padding-left - Отступ от левой границы
padding-bottom - Отступ от нижней границы
padding - Обобщает все вышеперечисленные свойства
border-top-width - Толщина верхней границы
border-right-width - Толщина правой границы
border-bottom-width - Толщина нижней границы
border-left-width - толщина левой границы
border-color - Цвет границы
width - Ширина элемента
height - Высота элемента
float - «Обтекание» элемента
clear - Расположение других элементов вокруг данного



Для создания и раскрутки сайта рекомендуем обратиться в ООО "Бастион дизайн".