- Создайте документ stili1_Фамилия.html со следующим текстом и просмотрите его в браузере.
<HTML>
<HEAD> <TITLE>Домашняя страница об И.С. Бахе</TITLE> </HEAD>
<BODY> <H1>Домашняя страница об И.С. Бахе </H1>
<P> Иоган Себастьян Бах написал много музыкальных произведений.
</BODY> </HTML>
- Скопируйте файл и измените его имя на stili2_Фамилия.html
- Добавьте в первый файл глобальную таблицу стилей для определения стилей во всем документе
<TITLE> Домашняя страница об И.С. Бахе </TITLE>
<STYLE type="text/css">
H1 { color: blue }
</STYLE>
</HEAD>
- Просмотрите документ в браузере, отметьте изменения.
- Добавьте в этот же файл внутреннюю таблицу стилей для слова «произведений»
<font style="color:blue; font-size:12pt; font-family:Arial"> произведений </font>
- Создайте файл связанной (внешней) таблицы стилей с расширением css, н-р, bach.css с текстом, приведенным ниже, который задаст стили для документа (BODY) и заголовка первого уровня (H1)
BODY { background: gray ;
color: red ;
font-family: "Gill Sans", sans-serif;
font-size: 12pt;
margin: 15pt }
H1 { color: blue;
text-align:center}
- Добавьте в файл stili2….html строку для подключения внешней таблицы стилей.
<TITLE> Домашняя страница об И.С. Бахе </TITLE>
<LINK rel="stylesheet" href="bach.css" type="text/css">
</HEAD>
- Просмотрите его в браузере, отметьте изменения.
- Откройте для редактирования документ bach.css и добавьте описания классов (black и white)
p.black { color:#000000; font-family:Arial; font-size:12pt; font-indent:10pt; text-align:justify }
p.white { color:#ffffff; font-family:Arial; font-size:12pt; font-indent:10pt; text-align:justify }
- Откройте для редактирования документ stili2….html и добавьте атрибуты class:
<P> Иоган Себастьян Бах написал много музыкальных произведений.
<p class="black"> Он широко известен во всем мире. </p>
<p class="white"> Его произведения любят все музыканты. </p>
- Просмотрите в браузере, отметьте изменения.
- Добавьте в файл стилей
.center { text-align:center }
- В stili2…..html добавьте ниже приведенный текст и просмотрите документ в браузере.
<p class="white"> Его произведения любят все музыканты. </p>
<p class=center> И.С.Бах писал: </p>
- Добавьте в файл стилей ссылку на графический файл маркера, например, bullet_p.gif
ul{ list-style-image:url(bullet_p.gif) }
- В stili2….html добавьте ниже приведенный текст и просмотрите документ в браузере:
<p class=center> И.С.Бах писал: </p>
<ul>
<li>Произведения для органов</li>
<li> Оркестровую и камерную музыку</li>
<li>Вокальные произведения</li>
и т.д. (кроме опер)
</ul>
