|
Документ взят из кэша поисковой машины. Адрес
оригинального документа
: 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. Откройте страницу 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 (в программе блокнот).
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.
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. Проверьте, правильно ли сохранены все документы, в которые вы внесли правку.
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.