Использование каскадных таблиц стилей

 

Каскадные таблицы стилей (Cascade Style Sheets, CSS) могут применяться к стилю HTML-документа тремя способами:

1. использование встроенных стилей;

2. использование внутренней таблицы стилей;

3. использование внешней таблицы стилей.

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

Для создания стиля редактируемого HTML-документа в меню "Инструменты", выберите пункт "Редактор CSS". Редактор имеет два режима работы:

1. Режим новичка: этот режим позволяет создавать правила, связанные с именем класса или с элементом указанного типа.

2. Режим эксперта: этот режим позволяет создавать правила без всяких ограничений.

В случае если нет никакой таблицы стилей, новый стиль будет создан автоматически.

Создание таблиц стилей в Nvu

 

Используя CaScadeS можно создавать внутренние или внешние таблицы стилей. Для создания внутренней таблицы стилей:

1. Нажмите на кнопку "Новая таблица".

o Дополнительно: заполните поля "Типы носителей" и "Заголовок" для таблицы стилей.

2. Нажмите "Создать таблицу стилей".

Чтобы создать внешнюю таблицу стилей:

1. Нажмите на кнопку "Новая ссылка".

2. Заполните поле "URL" в панели справа. Новый файл будет создан на локальном компьютере, если он еще не существует.

o Дополнительно: заполните поля "Типы носителей" и "Заголовок" для таблицы стилей.

3. Установите флажок "выберите для создания альтернативной таблицы стилей", если это требуется дополнительно.

Подсказка: Всегда сохраняйте HTML-документ перед применением локальной таблицы стилей. Также сохраняйте документ непосредственно до закрытия редактора CSS.

Подсказка: Используйте кнопку "Обновить" в левой панели, если таблица стилей сразу не загружается.

Создание правил для таблиц стилей

 

После создания одной или нескольких таблиц стилей для HTML-документа, могут быть созданы свои правила для каждой таблицы стилей индивидуально. Чтобы использовать определенную таблицу стилей для создания или изменения правил выделите таблицу стилей в левой панели щелчком по левой кнопки мыши. В правой панели на вкладке "Основное" отображается информация о таблице стилей. Для создания новых правил:

1. Нажмите на кнопку "Новое правило".

2. В правой панели отображаются опции относительно создания нового правила. Выберите один из пунктов:

o именованный стиль (введите имя класса ниже);

o стиль, применяемый ко всем элементам этого типа (введите тип ниже);

o стиль, применяемый ко всем элементам следующего селектора.

3. Напишите имя правила.

4. Нажмите на кнопку "Создать правило стиля".

Правила могут быть определены с помощью стилевых вкладок (Текст, Фон, Обрамление, Бокс, Звук) в правой панели окна. Чтобы увидеть все установки стилевого правила, выделите правило в левой панели и щелкните по вкладке "Основное" в правой панели. Вкладка "Основное" отображает все установки применительно к текущему правилу.

3.4. Работа с таблицами

Вставка таблицы

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

1. Поместите текстовый курсор в то место, куда вы хотите вставить таблицу.

2. Нажмите кнопку "Таблица" на панели инструментов Nvu. Откроется диалоговое окно "Вставка таблицы".

3. Введите количество строк и столбцов для создаваемой таблицы.

o Введите ширину таблицы (необязательный параметр) и укажите единицы измерения для нее - пикселы или проценты от ширины окна.

4. Введите ширину границы таблицы в пикселах. Укажите 0, если вы хотите, чтобы таблица не имела границы.

Примечание: Для таблицы с границей нулевой ширины Nvu показывает условную границу красной пунктирной линией. Эта линия не отображается при просмотре таблицы в браузере.

5. Чтобы задать дополнительные атрибуты таблицы или связать с ней сценарии JavaScript, нажмите кнопку "Дополнительно". Откроется диалоговое окно редактора дополнительных свойств.

6. Нажмте кнопку "OK", чтобы подтвердить заданные параметры и просмотреть таблицу в окне Nvu

О настройке дополнительных параметров таблицы рассказано в разделе Изменение свойств таблицы.

Подсказка: Чтобы создать таблицу внутри ячейки существующей таблицы, используйте пункт "Таблица" меню "Вставка".

Изменение свойств таблицы

В этом разделе рассказано, как изменить параметры таблицы в целом, а также отдельных строк, столбцов и ячеек. Для этого:

1. Выделите таблицу или щелкните в любом месте внутри нее.

2. Нажмите кнопку "Таблица" на панели инструментов Nvu или откройте меню "Таблица" и выберите пункт "Свойства таблицы". Откроется диалоговое окно "Свойства таблицы", которое содержит две вкладки: "Таблица" и "Ячейки".

3. Выберите вкладку "Таблица", чтобы установить следующие параметры:

o Размер: В этой группе настроек вы можете задать количество строк и столбцов таблицы. Введите ширину таблицы и укажите единицы измерения для нее - пикселы или проценты от ширины окна. Если вы зададите ширину таблицы в процентах, она будет изменяться при каждом изменении ширины окна браузера или Nvu.

o Границы и поля: В этой группе вы можете задать ширину границы таблицы, расстояние между ячейками, а также размер полей внутри ячеек (расстояние между границей ячейки и ее содержимым).

Примечание: Для таблицы с границей нулевой ширины Nvu показывает условную границу красной пунктирной линией. Эта линия не отображается при просмотре таблицы в браузере.

o Выравнивание таблицы: Выберите из раскрывающегося списка тип выравнивания таблицы по горизонтали.

o Заголовок: Выберите из раскрывающегося списка положение заголовка таблицы.

o Цвет фона: Нажмите на кнопку, чтобы выбрать из палитры цвет фона таблицы или оставьте фон прозрачным, в этом случае будет виден фон страницы.

4. Чтобы задать дополнительные атрибуты таблицы или связать с ней сценарии JavaScript, нажмите кнопку "Дополнительно". Откроется диалоговое окно редактора дополнительных свойств.

5. Нажмите кнопку "Применить", чтобы применить сделанные изменения, не закрывая диалогового окна, или нажмите кнопку "ОК", чтобы подтвердить сделанные изменения.

Чтобы просмотреть или изменить параметры одной или нескольких ячеек:

1. Выделите строку, столбец, ячейку или группу ячеек. Откройте меню "Таблица" и выберите пункт "Свойства таблицы". Откроется диалоговое окно "Свойства таблицы".

2. Выберите вкладку "Ячейки", чтобы установить следующие параметры:

o Выделение: Из раскрывающегося списка выберите тип выделенной области - ячейку, строку или столбец. Используйте кнопки "Предыдущая" и "Следующая", чтобы выделить другие ячейки, строки или столбцы.

o Размер: Введите высоту и ширину для выделенных элементов, а также задайте единицы измерения - пикселы или проценты от размера таблицы.

o Выравнивание содержимого: Выберите тип выравнивания по вертикали и горизонтали для содержимого выделенных ячеек.

o Стиль ячеек: Из раскрывающегося списка выберите "Заголовок" для ячеек, образующих заголовки столбцов или строк (по умолчанию текст таких ячеек отображается полужирным шрифтом и выравнивается по центру). Для остальных ячеек выберите или оставьте "Обычный" (значение по умолчанию).

o Разбивка на строки: Выберите из раскрывающегося списка "Не разбивать на строки", чтобы запретить разбивку на строки текста в ячейке (за исключением явно указанного разрыва строки или начала нового абзаца). Выберите "Разбить на строки", чтобы разрешить разбивку текста на строки.

o Цвет фона: Нажмите на кнопку, чтобы выбрать из палитры цвет фона ячейки или оставьте фон прозрачным.

Примечание: Чтобы задать дополнительные атрибуты таблицы или связать с ней сценарии JavaScript, нажмите кнопку "Дополнительно". Откроется диалоговое окно редактора дополнительных свойств.

3. Нажмите кнопку "Применить", чтобы применить сделанные изменения, не закрывая диалогового окна, или нажмите кнопку "ОК", чтобы подтвердить сделанные изменения.

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

Подсказка: Чтобы применить к ячейке цвет фона, который применялся в последний раз, выделите нужную ячейку и, удерживая клавишу Shift, щелкните по значку "Выбор фонового цвета" на Панели форматирования. Эта функция полезна в том случае, когда вы хотите присвоить один и тот же цвет отдельным ячейкам.