Sem05: Cascade Style Sheets

Документ взят из кэша поисковой машины. Адрес оригинального документа : http://www.astro.spbu.ru/staff/afk/Teaching/Seminars/XimFak/Sem05.htm
Дата изменения: Fri Nov 19 16:06:14 2010
Дата индексирования: Tue Oct 2 04:46:55 2012
Кодировка: Windows-1251
Поисковые слова: п р п р п р п р п р п р п р п р п р п р п р п

			Изменение размера шрифта
Тема 5 практических занятий: Каскадные таблицы стилей. Часть 1.	Справочные материалы: Основы языка HTML и введение в CSS и JavaScript		+	-

Замечание 1: Каскадными таблицами стилей (Cascade Style Sheets) - называются шаблоны, управляющие форматированием тэгов языка HTML в WWW-документах.

Замечание 2: Создать в личной папке каталог (папку) bg и заполнить его фоновыми рисунками из папки bg соответственно. Сами рисунки можно посмотреть по Ссылке на фоновые рисунки.

Замечание 3: Создать в личной папке каталог (папку) CSS и заполнить этот каталог файлами с расширением .css из папки CSS.

Замечание 4: Сохранить в личной папке файлы Index.htm, Links.htm, Logo.htm, Main.htm и Menu.htm.

Подтема 1: Встраивание стилей в тэги на странице HTML

1. Откройте страницу Test1.htm. Перейдите в браузере к редактированию текста.
Примечание: В браузере Mozilla используйте пункт File/Edit Page/<HTML>Source

2. Вставьте в тэг <H1> (перед знаком >) после пробела строчку STYLE="color: red" и сохранить файл с внесенными изменениями.

3. Посмотреть на изменения в документе (нажать на кнопку обновить (Reload) в Браузере).

4. Вставьте в тэг <H2> (перед знаком >) строчку style="text-transform: uppercase" и протестируйте изменения в HTML документе.

5. Вставьте в тэг <H3> (перед знаком >) строчку STYLE=" text-align: right; background-color: azure".

6. Вставьте в тэг <P> (первый) строку STYLE="color :hotpink; text-transform: lowercase"

7. Вставьте в тэг <P> (второй) строку STYLE="font-family: arial; font-size:200%"

8. Вставьте в тэг <P> (третий) строку STYLE="font-family: courier; font-weight:900; color: darkred" и проследите за изменениями в документе. Сохраните документ Test1.htm (в программе блокнот).

Тема 2: Внедрение таблицы стилей в документ

1. Откройте страницу Test2.htm и перейдите в браузере к пункту File/Edit Page/<HTML>Source

2. Вставьте в область заголовка (между тэгами </title> и </head>) стилевую таблицу (обязательно сохранив пустую строку):
  <STYLE TYPE="text/css">
  
  </STYLE>
Здесь знаки  ограничивают текст, который не выводится браузером на экран.

3. Вставьте между знаками  (на месте пустой строки) строчку
H1 {color: #8020e0;text-align:center}.
Примечание: Данная строчка состоит из селектора (любого тэга HTML) и определения. Определение состоит из двух частей: свойства и его значения, разделенных двоеточием. Определений может быть несколько. Различные определения разделяются точкой с запятой.

4. Посмотрите на изменения на странице (после ее обновления).

5. Вставьте строчку P {color: #e02068;font-size:24pt;FONT-FAMILY:ARIAL} сразу после только что вставленной вам строчки определения элемента H1 на новой строке и протестируйте изменения на странице.

6. Вставьте строчку BODY{color: darkgreen; font-size:36px; font-family:"Times New Roman"}
после уже вставленных строчек. Посмотрите какие элементы страницы остались неизменными, а какие унаследовали свойства определения элемента <body>

7. Поменяйте цвета и размеры шрифтов в определениях тэгов <P>, <H1> и <body>. Проследите за изменениями на странице. Сохраните документ под именем Test3.htm.
Примечание: сохранять документ надо в режиме редактирования, а не с помощью браузера Internet Explorer или Mozilla.

Подтема 3. Связывание документа HTML с таблицей стилей

1. Откройте сохраненный вами документ Test3.htm и перейдите к его правке c помощью браузера

2. Удалите в буфер обмена строчки с определениями элементов H1, P и BODY между знаками комментариев <! - и -->.

3. Создайте текстовый документSimple.css в той же папке, где находится документ Test3.htm и вставьте в него из буфера обмена скопированные вами строчки. Сохраните текстовый документ Simple.css
примечание: проверьте при сохранении документа, чтобы документ сохранился под именем Simple.css, а не под именем simple.css.txt

4. Измените в стилевом файле Simple.css в параметрах тегов H1, P и BODY размер шрифта на 10pt.
Примечание: можно использовать для создания и правки документов с расширением .css встроенный редактор Менеджера файлов (File Manager).

5. В режиме правки документа Test3.htm (просмотр в виде HTML кода в браузере Internet Explorer) удалите вставленные вами ранее строчки
<STYLE TYPE="text/css">

</STYLE>
Вставьте в файл перед тегом </HEAD> строчку
<LINK REL="stylesheet" TYPE=TEXT/CSS HREF="Simple.css">
, устанавливающую связь HTML документа со стилевым файлом Simple.css.

5. Сохраните измененный документ и протестируйте изменения на странице.

6. Сохраните стилевой файл Lnk.css в папке CSS. Откройте документ Lnk.htm и перейдите в режим правки документа.

7. Вставьте в этот документ перед тегом </HEAD> строчку
<LINK REL="stylesheet" TYPE=TEXT/CSS HREF="CSS/Lnk.css">
и посмотрите на изменения на странице.

8. Добавьте в документ Lnk.css строку BODY {background: url(bg/Gold.jpg)},
сохраните документ и обновите страницу Lnk.htm в Браузере.

9. Проверьте, правильно ли сохранены все документы, в которые вы внесли правку.

Подтема 4. Оформление фреймов с помощью стилевых файлов

1. Откройте страницу Main.htm, сохраненную вами ранее и перейдите к правке документа. Исправите текст на данной странице, заменив фамилию Михайлова и сведения о нем на ваши.

2. Вставьте в документ строчку <LINK REL="stylesheet" TYPE=TEXT/CSS HREF="CSS/Frame.css">

3. Повторить данную операцию со страницами Logo.htm, Links.htm и Menu.htm.

4. Собрать фрейм с помощью файла Index.htm. Вставить в файле Index.htm в первую строчку, начинающуюся с тега
<frame name="", название (name) фрейма logo и его источник (src)- logo.htm. В результате эта строчка должна выглядеть так:
<frame name="logo" src="logo.htm">

5. Повторить эту операцию с оставшимися фреймами: Links, main, menu (файлы Links.htm, Main.htm и Menu.htm) и сохранить файл Index.htm. Посмотреть, как выглядит вся страница с фреймами Index.htm.