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

Итак, мы убедились, что задавая стиль (класс, селектор) для каждого элемента Вы можете достаточно оперативно менять стиль (дизайн) своего сайта. Причем все эти стили, как Вы успели заметить, причем эти оформления заносятся в однин перечень, одну таблицу и позволяют съэкономить на объеме страницы, увеличивая скорость загрузки. Менять дизайн, настройки страницы можно, изменяя дизайн элементов этой самой таблицы.

Но остался еще один недостаток. Необходимо прописывать стили в теле <head> каждого HTML-документа. Этот недостаток легко устраняется прописывая все оформления стилей в отдельном файле. Это файл с расширением *.css. CSS (Cascading Style Sheets) - означает каскадная таблица стилей. К примеру Вы можете создать файл styles.css и поместить в него все то, что Вы помещали в тело тэга <head>, но только сам тэг <style (как открывающий, так и закрывающий) там уже указывать не требуется.

В любом текстовом редакторе создаетм файл styles.css или с любым другим названием (не забыв при этом, что расширение должно быть *.css) с первой же строки сразу можно записывать оформления для элементов по уже привычной для нас схеме:

имя_тега {параметр_тега1: значение; ... } имя_тега.класс {параметр_тега1: значение; ... } .класс {параметр_тега1: значение; ... }

А как же включить этот отдельный файл в Вашу HTML-страничку? Да очень просто. Для этого достаточно в теле тэга <head> поместить следующий код:

Этой единственной строчкой Вы подключите к своему HTML-документу энное количество стилей, классов и др. Причем все стили записаны в одном файле, а подключаться могут ко многим HTML-страницам. Таким образом, помимо экономии на объеме страниц, Вы создаете единый дизайн для всех страниц.

В случае же если Вы хотите для некоторых страниц применять несколько отличный дизайн, то Вы можете создать еще один *.css файл и подключить его. К одной и той же странице можно подключать несколько *.css файлов. Возможна и смешанная запись:

<head><LINK href="../styles.css" type=text/css rel=stylesheet><style type="text/css"> TD { text-align: center } TD.left { text-align: left } P { text-align: left; color: black} P.cursive { text-align: left; color: black; font-style: italic; } .myclass { text-align: left; color: red; font-style: bold; } #myid { position:relative; left:160px; top:10px; width:350px; height:100px;}</style> </head>

В заключении приведем наиболее часть употребимые элементы стилей:

text-align	Выравнивание текста по горизонтали
color	Цвет элемента текста
background-color	Цвет фона
font-family	Семейство шрифтов (Verdana, Geneva, Arial, Helvetica, sans-serif и др.)
font-size	Размер шрифта
margin	Отступ: (margin-bottom - снизу, margin-top - сверху, margin-left - слева, margin-right - справа)
border	Стиль рамки
padding	Заполняемость (применяется для получения эффекта, как в случае с заголовком этой страницы)

Имеется неплохой визуальный редактор стилей - TopStyle - продукт компании Bradsoft, информацию о котором можно получить по адресу http://www.bradsoft.com/topstyle
Источник:web-brodilka.ru