2015-05-10
191
Первый вариант - подключение стилей непосредственно в оответствующие теги гипертекстового документа
1. Откройте редактор Блокнот (ПУСК - ПРОГРАММЫ - СТАНДАРТНЫЕ - БЛОКНОТ)
2. Сохраните пустой документ в рабочей папке присвойте ему имя 1.html.
3. В созданный документ внесите обязательные теги гипертекстового документа. Внесите необходимые Мета инструкции. Запишите в теле документа (между <BODY></BODY>)
<P>Абзац №1</P>
<P>Абзац №2</P>
<P>Абзац №3</P>
<UL>
<LI>Пункт №1</LI>
<LI>Пункт №2</LI>
<LI>Пункт №3</LI>
</UL>
Вместо слов "Абзац №1" вставьте текст задания. При выполнении Ваших вариантов задания создайте данный абзац в начале документа с копией Вашего задания.
Добавьте в соответствующие теги стили (<P style="..."> или <UL style="...">):
· Абзац №1 - style="border-left-width: 5px; border-left-style: solid; border-left-color: #FFFF00" Сопоставьте по таблице стилей как формируется данный стиль
· Абзац №2 - style="color: green"
· Абзац №3 - style="background-image: url(../pictures/title.jpg)" (картинка title.jpg должна находиться в текущей папке /pictures/)
|
|
|
4. Ненумерованный список - style="list-style-image: url(point.jpg)" (картинка point.jpg должна находиться в текущей папке /pictures/)
5. Сохраните изменения в файле 1.html
Второй вариант - определение стилей в заголовке гипертекстового документа
1. Откройте редактор Блокнот (ПУСК - ПРОГРАММЫ - СТАНДАРТНЫЕ - БЛОКНОТ)
2. Сохраните пустой документ в рабочей папке присвойте ему имя 2.html.
3. В созданный документ внесите обязательные теги гипертекстового документа. Внесите необходимые Мета инструкции. Запишите в теле документа (между <BODY></BODY>)
<P>Абзац №1</P>
<P>Абзац №2</P>
<P>Абзац №3</P>
<UL>
<LI>Пункт №1</LI>
<LI>Пункт №2</LI>
<LI>Пункт №3</LI>
</UL>
Вместо слов "Абзац №1" вставьте текст задания. При выполнении Ваших вариантов задания создайте данный абзац в начале документа с копией Вашего задания.
4. Добавьте необходимые стили в заголовок гипертекстового документа (между <HEAD>...</HEAD>)
<STYLE TYPE="text/css">
<!--
P.a1{border-left-width: 5px; border-left-style: solid; border-left-color: #FFFF00;}
P.a2{color: green;}
P.a3{background-image: url(../pictures/title.jpg);}
UL{list-style-image: url(../pictures/point.jpg);}
-->
</STYLE>
5. После добавления приведенных выше стилей в заголовок тег <UL> переопределен по новому стилю, а для тега <P> определено три новых класса стилей, которые подключаются в соответствующие теги с помощью атрибута CLASS="..." (<P CLASS="...">)
· Абзац №1 - CLASS="a1"
· Абзац №2 - CLASS="a2"
· Абзац №3 - CLASS="a3"
6. Сохраните изменения в файле 2.html
Третий вариант - определение стилей в отдельном файле.
1. Выполните все действия 1-3 пунктов второго варианта решения задачи, создавая файл 3.html
|
|
|
2. С помощью редактора БЛОКНОТ создайте файл 1.css, в который необходимо внести следующие стили:
P.a1{border-left-width: 5px; border-left-style: solid; border-left-color: #FFFF00";}
P.a2{color: green;}
P.a3{background-image: url(../pictures/6/title.jpg);}
UL{list-style-image: url(../pictures/6/point.jpg);}
3. Подключить созданный файл со стилями к документу 3.html необходимо с помощью следующего тега: <LINK REL=STYLESHEET TYPE="text/css" HREF="1.css">. Данный тег необходимо добавить в заголовок гипертекстового документа (обычно перед закрывающимся тегом <HEAD>)
4. Подключение стилей из файла выполняется аналогично подключению стилей, которые описаны в заголовке гипертекстового документа. Таким образом необходимо внести следующие изменения в тело гипертекстового документа 3.html
· Абзац №1 - CLASS="a1"
· Абзац №2 - CLASS="a2"
· Абзац №3 - CLASS="a3"
5. Сохраните изменения в файле 3.html
