Зачем нужен CSS?

CSS Cascading Style Sheets (Таблицы каскадных стилей) – это набор правил оформления и форматирования, который может быть применен к различным элементам страницы. В HTML для присвоения какому-либо элементу определенных свойств (таких, как цвет, размер, положение на странице и т. п.) приходиться каждый раз описывать эти свойства. Применяя CSS, Вы можете один раз описать свойства элементов и определить это описание как стиль, а в дальнейшем просто указывать, что элемент, который вы хотите оформить соответствующим образом, должен принять свойства стиля, описанного вами. 

Например, чтобы описать в HTML выравнивание содержимого параграфа по ширине и задания отступов слева и справа Вы должны были в каждом параграфе прописать, что то вроде этого:

 
<p align="justify" style="margin-left: 3; margin-right: 3"></p>

При использовании CSS можно один раз задать параметры для всех параграфов для всех страниц сайта. Например:

P {
FONT-SIZE: 8pt; COLOR: #000000; FONT-FAMILY: Arial, Helvetica, sans-serif; text-align: justify; padding-right: 3px;
}

Таким образом при использовании CSS мы можем получить следующее:
Добиться однообразия всех страниц сайта;
Существенно сократить размер сайта (так как не нужно будет писать кучу параметров к каждому тэгу);
Улучшить внешний вид сайта.

Встраивание CSS в документ

Существует четыре способа встраивания CSS в документ:
 
            Внедрение
            Связывание
            Импортирование
            Встраивание

При внедрении описание стилей находиться между тэгами <STYLE></STYLE> и размешаются между тегами <HEAD></HEAD>

Пример:

<STYLE>
<!--
P {
text-align : justify;
margin-right : 3pt;
margin-left : 3pt;
font-size : 10pt;
font-family : sans-serif;
}
-->
</STYLE>

В результате - мы задали выравнивание содержимого всех параграфов по ширине, отступы слева и справа, размер шрифта и отображение текста параграфа шрифтом Sans-serif.

При связывании Вы располагаете стили в отдельном файле. Тогда между тегами <HEAD></HEAD> каждого HTML документа нужно добавить ссылку на CSS файл:
 
<LINK REL=STYLESHEET TYPE="text/css" HREF="Example.css">

Example.css - это Ваш CSS файл, содержащий описание применяемых стилей. Если он находиться в другом каталоге, нужно указать к нему путь. Создается CSS файл в любом текстовом редакторе, например, в Блокноте, нужно будет только изменить расширение текстового файла на CSS. В CSS файле не должны указываться теги <STYLE></STYLE>.

Изменение файла таблицы стилей приводит к изменению отображения всех страниц сайта, что очень удобно для форматирования сайтов.

При импортировании, также как и при связывании встраивается внешняя таблица стилей, но с помощью свойства @import таблицы стилей:

@import: url (mystyles.css)

@import: url (mystyles.css) следует задавать в начале стилевого блока <STYLE> или связываемой таблицы стилей перед заданием остальных правил.

Встраивание в тэги - тэги HTML имеют параметр style, в котором можно задать стили. Например, в следующем примере задаётся форматирование заголовка втрого уровня, определяющее его отображение шрифтом красного цвета:
 
<H2 style="color: red">Пример встраивания</h2>

Все способы встраивания CSS свободно сочетаются в одном документе.

 


Автор: Д. Сапожников