Таблицы стилей.

Существует несколько возможностей использования каскадной таблицей стилей.

Первый вид - использование встроенных стилей, этот вид был использован нами ранее и все стили устанавливаются по умолчанию.

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

Третий вид - использование внешней таблицы стилей. В этом случае таблица стилей будет находиться во внешнем файле с именем style.css. Этот вид необходим, когда имеется несколько видов стилей или сайт содержит много страниц. Чтобы не хранить на каждой странице свой стиль и чтобы можно было быстро изменить стиль, необходимо иметь стиль в отдельном файле, на который будут ссылаться страницы сайта.

Для того, чтобы начать пользоваться вторым видом, нажмем на кнопку CSS на передней панели.

На экране появится окно данного режима.

Нажмем на треугольник слева от значка палитры и в появившемся панно выберем режим новая ссылка

Для того, чтобы создать внутреннюю таблицу стилей, дадим ей Заголовок и нажмем на кнопку ОК.

В появившемся окне дадим название нашей таблице в поле Заголовок и нажмем на кнопку Создать таблицу стилей.

Нажмем на кнопку ОК. В окне имеется клавиша Экспортировать таблицу стилей и переключиться на нее, смысл которой ясен из ее названия.

Теперь рассмотрим как создать внешнюю таблица стилей (3 вид). Сначала создадим пустой файл в папке, в которой будет находиться страница. Для этого откроем программу WordPad и воспользуемся режимом Файл – Сохранить как, в поле Имя файла укажем - style.css, а поле Тип файла – текстовый документ.

Нажмем на кнопку CSS и в появившемся панно щелкнем по треугольнику справа от палитры. В появившемся панно нажмем на режим Новая таблица.

В появившемся окне дадим название нашей таблице в поле Заголовок и нажмем на кнопку Создать таблицу стилей.

Нажмем на кнопку Выбрать файл и в появившемся окне выберем только что созданный файл, укажем Заголовок, например, проба и нажмем на кнопку Создать таблицу стилей.

Данная таблица появится слева в окне под названием файла (style.css).

Теперь начнем создавать таблицу. Отметим, что если установлен цвет фона ячейки, таблицы и страницы, то в ячейке сначала выбирается цвет фона ячейки. Если он не определен, то выбирается цвет фона таблицы. Если этот цвет не определен, то цвет страницы.

Щелкнем по кнопке CSS и в появившемся окне выберем надпись style.css, чтобы изменять стиль во внешний файл. Далее щелкнем по палитре.

Появится список из четырех возможностей.

Нажмем на стрелочку вниз и в появившемся списке выберем название, стиль которого будем корректировать, например, Заголовок1.

Нажмем на кнопку Создать правило стиля. В левой части появится указанный нами формат – h1.

Справа имеются вкладки, на которых можно менять стиль.

Во вкладке Текст имеются параметры текста, которые шире, чем возможности, нами рассмотренные ранее. Например, можно сделать текст мигающим.

Во вкладке Фон можно не только указать цвет фона, но и указать рисунок на локальном компьютере, который можно вымостить по горизонтали и по вертикали.

Можно устанавливать рамку вокруг текста, указав вид линии, например, пунктирное, ширину линии и ее цвет.

На вкладке Бокс указывается формат заголовка в виде текста, например, что текст будет восприниматься как таблица (Table), которая справа от себя будет иметь обтекающий текст (справа), ширина текста 2.2 см, высота 5.8 см, расстояние от рамки то текста 0.5 см (Поля), расстояние внутри блока от текста до границы (Отступы) 1 см сверху и так далее.

Теперь перейдем к рассмотрению другого вида классов. Щелкнем по значку палитры.

В появившемся окне выберем переключатель именованный стиль (введите имя класса ниже).

Ниже слева от точки наберем название класса (аа). Отметим, что если мы создаем класс внутри документа, то слева должна быть выделена строчка внутренняя таблица стилей. Так как планируем, чтобы новый класс был во внешнем файле, то выделим строчку style.css. Нажмем на кнопку Создать правило стиля и название аа появится ниже строчки style.css.

Далее установим параметры для данного стиля во вкладках Текст, Фон, Обрамление и прочие, например, фон желтого цвета. Закроем окно CSS.

В основном окне выделим текст, к которому нужно применить данный класс и нажмем на кнопку видов классов, в котором выберем класс аа.

Текст изменит свой фон.

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

Два другие вида классов используются профессионалами и нами рассматриваться не будут.

О↙О↘О↙О↘О↙О↘О↙О↘О↙О↘О↙О↘О↙О↘О↙О↘О