При использовании внешних таблиц стилей возможны два варианта:
1. Создание таблицы стилей одновременно при создании web-страницы.
2. Привязка таблицы стилей к уже существующей web-страницы.
Создание таблицы стилей одновременно при создании web-страницы
Предварительно необходимо сохранить web-страницу, к которой будет прикрепляться внешняя таблица стилей. Для прикрепления таблицы выполните следующую последовательность действий.
1. Откройте CSS редактор и в режиме эксперта нажмите на кнопку Новая ссылка. В правой части окна заполнить требуемые поля. В поле URL задайте произвольное имя файла внешней таблицы стилей используя латинские буквы, цифры и разрешенные символы, дав ему расширение .css.
2. Нажмите на кнопку Создать таблицу стилей (рис.).
Рис. Результат создания новой внешней таблицы стилей
В левой части окна в области Таблицы стилей и правила появится ваша таблица.
3. Выделите её и нажмите кнопку Обновить.
После создания таблицы стилей необходимо создать правила для неё. В правой панели на вкладке Основное отображается информация о таблице стилей. Создание новых правил выполняется, так же как и для внутренней таблицы стилей (кнопка Новое правило). Упражнение.
1. В папку images скопируйте файл, например, bullet.gif, который может быть маркером элемента списка.
2. В редакторе Nvu перейдите на новую вкладку.
3. Создайте таблицу стилей с именем st1.css.
4. Задайте для заголовка первого уровня (h1) выравнивание по центру, для абзаца (p) выравнивание – по ширине. Для тега ul на вкладке Списки задайте файл, который будет маркером элемента (рис.).
Рис. Окно создания внешней таблицы стилей, вкладка Списки
5. После выхода из редактора (кнопка Закрыть) сохраните текущую web-страницу.
6. Наберите в окне редактора текст:
| Списки Списком называется взаимосвязанный набор отдельных фраз или предложений, которые начинаются с маркера или цифры. Списки предоставляют возможность упорядочить и систематизировать разные данные и представить их в наглядном и удобном для пользователя виде. Маркированный список Нумерованный список Список определений |
7. Примените стили Заголовок1 к первому абзацу, стиль абзац – ко второму и маркированный список к перечислению списков. Код страницы должен выглядеть следующим образом
| <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html> <head> <meta content=”text/html; charset=Windows-1251″ http-equiv=”content-type”> <title>внешние таблицы стилей</title> <link title=”пример” rel=”stylesheet” href=”st1.css” type=”text/css”> </head> <body> <h1>Списки</h1> <p>Списком называется взаимосвязанный набор отдельных фраз или предложений, которые начинаются с маркера или цифры. Списки предоставляют возможность упорядочить и систематизировать разные данные и представить их в наглядном и удобном для пользователя виде. </p> <ul> <li>Маркированный список</li> <li>Нумерованный список </li> <li>Список определений </li> </ul> </body> </html> |
8. Просмотрите полученный результат в браузере. Пример применения внешней таблицы стилей приведен на рис.
Рис. Пример применения внешней таблицы стилей
Привязка таблицы стилей к уже существующей web-страницы
Для того, чтобы прикрепить внешнюю таблицу стилей к сохраненной ранее web-странице выполните следующие действия.
1. Откройте файл, к которому нужно прикрепить внешнюю таблицу стилей, например, файл pr_link.html, содержащий гиперссылки на ваши работы.
2. Запустите редактор CSS в режиме эксперта
3. Нажмите на кнопку Новая ссылка и с помощью кнопки Выбрать файл выбрать нужную внешнюю таблицу стилей.
4. Далее нажмите на кнопки Создать таблицу стилей и Обновить.
5. После выхода из редактора (кнопка Закрыть) смените нумерованный список на маркированный, что убедиться в правильности ваших действий. Сохраните текущую web-страницу и дайте команду Просмотр. У вас должен получиться следующий файл.
Рис. Результат прикрепления внешней таблицы стилей к сохраненной ранее web-странице
6. Затем перейдите в режим Код и проверьте в тэге <link> наличие относительной ссылки <link rel=”stylesheet” href=” st1.css” type=”text/css”>), для того чтобы можно было переносить web-сайт на другой компьютер или web-сервер.
Изменять стили объектов можно с помощью строки состояния, в которой отображаются тэги конкретного места web-страницы. Щелчок правой кнопки мыши на любой из тэгов открывает контекстное меню со списком команд (рис.).
Рис. Работа с тэгами с помощью строки состояния
Выбор любой команды, кроме последней, откроет соответствующую вкладку в Редакторе CSS, на которой можно определить стиль элемента. Пункт Извлечь и создать основной стиль позволяет извлекать информацию о стиле в стилевое правило и сохранять его во внешней или внутренней таблице стилей.
Задание 14. Создайте свою таблицу стилей для единого оформления всех ваших страниц, включающую выравнивание заголовков по центру, выравнивание абзацев по ширине, выравнивание рисунков по центру, задание фона страниц и определение списков.
