Практические работы по HTML и CSS

Методические разработки практических работ по информатике по темам "Язык разметки HTML" и "Современные web-технологии" (для учащихся средних классов).

При проведении занятий с использованием данных методических разработок для создания html- и css-файлов рекомендуется использовать обычный текстовый редактор, поддерживающий подстветку синтаксиса языков HTML и CSS, а также желательно включающий возможность работы с несколькими файлами в многостраничном режиме.

Например, для Windows подойдет Notepad++ (notepad-plus-plus.org). В текстовом редакторе Notepad++ для того, чтобы выполнялся перенос длинных строк, надо в меню выбрать команду Вид -> Перенос строк. Также очень хорошим текстовым редактором является Notepad2 (flos-freeware.ch/notepad2.html). Однако он не поддерживает многостраничный режим работы. Установка переноса строк в нем выполняется с помощью команды View -> Word Wrap.

Прикрепленный файлРазмер
Практические работы по HTML 4 для средних и младших классов (pdf)154.59 кб
Практические работы по HTML 4 для средних и младших классов (html в rar)1.23 Мб
Черновой вариант практических работ по CSS (pdf)346.64 кб
Черновой вариант практических работ по CSS (html и css в rar)32.56 кб

0. Презентация "Ключевые слова языка HTML 4"

Перед практическими работами по языку HTML учищимся предлагается создать презентацию, содержащую ключевые слова языка с их переводом.

Предполагается, что это поспособствует более быстрому запоминанию слов в дальнейшем, а также пониманию смысла тегов. Это более актуально для учащихся 5-6 классов, т.к. они обычно очень слабо владеют английским языком.

На первом слайде презентации располагаются кнопки с буквами английского алфавита. Каждая кнопка позволяет перейти к слайду со списком слов на эту букву, встречающихся в HTML. Если на какую-либо букву слова отсутствует, то кнопка не активна (следовательно, слайд со списком слов отсутствует).

Align — выравнивать
Anchor — якорь
Area — область

Background — фон
Base — основа
Body — тело
Border — граница
Big — большой
Blank — чистый, пустой
Blink — мерцание
Block — блок
Bold — жирный шрифт
Break — обрыв

Cell — ячейка
Center — центр
Clear — очищать
Column — столбец
Color — цвет

Defenition — определение
Division — подразделение

Face — лицо
Font — шрифт
Frame - кадр
Head — заголовок
Height — высота

Image — изображение
Italic — курсив
Item — пункт

Justify — выравнивать

Left — левый
Link — ссылка
List — список

Margin — край
Map — карта
Name — имя

Padding — заполнение

Right — правый
Row — строка
Rule — правило

Scrolling — прокрутка
Set — установить
Shade — оттенок
Shape — форма
Size — размер
Small — малый
Space — пространство
Spacing — интервал
Span — диапазон
Sub — нижний индекс
Sup — верхний индекс

Table — таблица
Target — цель
Text — текст
Title — название
Top — вершина
Type — тип

Use — использование

Width - ширина

Прикрепленный файлРазмер
Раздаточный материал (в формате odt)52.61 кб
Пример презентации (в формате odp)18.72 кб

1. HTML–документ. Абзацы, разрывы строк, выравнивание

1 Структура HTML-документа

Исходный код HTML-документа состоит из тегов и содержания.

Содержание предназначено для отображения в окне браузера. Теги определяют его структуру (разметку): какие части являются заголовками, какие абзацами, а какие иными элементами.

У тегов могут быть различные атрибуты с заданными свойствами. В старых версиях языка HTML атрибуты использовались для оформления содержания: установки размера и цвета шрифта, выравнивания текста, установки отступов и другого. Сейчас содержимое HTML-документа принято оформлять с помощью языка CSS.

Любой HTML документ всегда включает контейнеры html, head и body, которые вложены друг в друга следующим образом:

<html>
<head>
…
</head>
<body>
…
</body>
</html>

Задание 1. Создайте файл и задайте ему структуру, которая приведена выше. Сохраните его.

В контейнере head обычно присутствует контейнер title, содержимое которого отображается в заголовке окна документа.

Задание 2. Добавьте в документ контейнер title:

<title>ЭВМ – электронно-вычислительная машина</title>

Сохраните файл и откройте в браузере. Найдите введенное вами содержание title.

Содержимое body отображается в окне браузера.

С помощью тега-контейнера p размечают абзацы. Одиночный тег br позволяет перейти на новую строку без создания нового абзаца, т.е. создает разрыв строки.

Задание 3. Добавьте в контейнер body следующее содержимое:

<p>Появление персональных компьютеров в начале семидесятых годов (параллельно с постепенной эволюцией крупных ЭВМ) сейчас расценивают как революционный переворот. Масштабы его влияния на человеческое общество сравнивают с последствиями от изобретения книгопечатания.</p>
<p>В мире уже сейчас имеются миллионы и миллиарды ЭВМ. <br/>Их число продолжает неуклонно расти!</p>

Сохраните. Обновите документ в браузере. Отметьте, сколько абзацев вы видите, где находится разрыв строки.

2 Выравнивание абзацев. Старый стиль

Выравнивание абзацев определяется значениями left (по левому краю), right (по правому), center (по центру) и justify (по ширине). Эти значения могут быть присвоены свойству align (выравнивание), которое допустимо для многих тегов.

Так, например, выравнивание абзаца по центру можно задать так:
<p align="center"> …

Задание 4. Для созданных ранее абзацев задайте выравнивание по ширине (для первого абзаца) и по правому краю (для второго).

3 Использование языка CSS

Абзацы правильнее выравнивать с помощью CSS (языка описания внешнего вида HTML-документа). Для этого в отдельном файле или контейнере head определяют стили оформления для различных элементов. Например, раздел head может содержать такой контейнер style:

<style type="text/css">	
	.rt {text-align:right;}
	.jtf {text-align:justify;}
</style>

Далее следует указать желаемые стили для абзацев. Точка говорит о том, что мы имеем дело с классом. Следовательно, в теге p должно быть записано, например, так:
<p class="rt">…

Задание 5. Удалите ранее добавленный атрибут align у абзацев. Выровняйте абзацы, используя язык CSS.

Результат практической работы

<html>
 
<head>
 
<title>ЭВМ – электронно-вычислительная машина</title>
 
<style type="text/css">
	.rt {text-align:right;}
	.jtf {text-align:justify;}
</style>
 
</head>
 
<body>
<p class="jtf">Появление персональных компьютеров в начале семидесятых годов (параллельно с постепенной эволюцией крупных ЭВМ) сейчас расценивают как революционный переворот. Масштабы его влияния на человеческое общество сравнивают с последствиями от изобретения книгопечатания.</p>
<p class="rt">В мире уже сейчас имеются миллионы и миллиарды ЭВМ. <br/>Их число продолжает неуклонно расти!</p>
</body>
 
<html>

2. Заголовки. Теги strong, em, span

Задание 1.

Создайте html-страницу с текстом представленным ниже. При этом для создания структуры документа используйте следующие теги разметки:
p – абзац;
h1 – заголовок 1-го уровня;
h2 – заголовок 2-го уровня.

Системы счисления

Системы счисления — это способ записи чисел. Обычно, числа записываются с помощью специальных знаков (цифр), но бывают исключения. Например, в арабской системе счисления используются цифры (0, 1, 2, 3, 4, 5, 6, 7, 8, 9), а в римской — некоторые латинские прописные буквы (I, V, X, L, C, D, M). Арабская и римская системы счисления имеют еще одно существенное отличие. Арабская система счисления является позиционной, а римская — непозиционной.

Сравнение позиционной и непозиционной систем счисления

В позиционных системах счисления количество, обозначаемое цифрой в числе, зависит от ее позиции, а в непозиционных системах счисления "вес" цифры не зависит от ее позиции. Например:

11 – здесь первая единица обозначает десять, а вторая – 1.
II – здесь обе единицы обозначают единицу.
345, 259, 521 – здесь цифра 5 в первом случае обозначает 5, во втором – 50, а в третьем – 500.
XXV, XVI, VII – здесь, где бы ни стояла цифра V, она везде обозначает пять единиц. Другими словами, величина, обозначаемая знаком V, не зависит от его позиции.

Задание 2.

Обрамите текст, выделенный жирным шрифтом на образце выше, контейнером strong, а выделенный курсивом — em. Посмотрите результат в браузере.

Задание 3.

Создайте в контейнере head следующую таблицу стилей:

<style type="text/css">
	span {font-family: Arial;}
	span.blue {color: #00008b;}
	span.red {color: #b22222;}
</style>

Заключите в соответствующие контейнеры span текст, выделенный красным и синим цветом на образце (при этом не забудьте указывать классы — см. предыдущее занятие). Посмотрите результат в браузере.

Задание 4.

Добавьте в код стиль для заголовков:

h1, h2 {
	background-color: #003399;
	color: white;
}

Посмотрите результат.

Результат практической работы

<html>
<head>
<title>Системы счисления</title>
<style type="text/css">
	span {font-family: Arial;}
	span.blue {color: #00008b;}
	span.red {color: #b22222;}
	h1, h2 {
		background-color: #003399;
		color: white;
	}
</style>
</head>
<body>
<h1>Системы счисления</h1>
<p><em>Системы счисления</em> — это способ записи чисел. Обычно, числа записываются с помощью специальных знаков (цифр), но бывают исключения. Например, в арабской системе счисления используются цифры (0, 1, 2, 3, 4, 5, 6, 7, 8, 9), а в римской — некоторые латинские прописные буквы (I, V, X, L, C, D, M). Арабская и римская системы счисления имеют еще одно существенное отличие. Арабская система счисления является позиционной, а римская — непозиционной.</p>
<h2>Сравнение позиционной и непозиционной систем счисления</h2>
<p>В <em>позиционных системах счисления</em> количество, обозначаемое цифрой в числе, зависит от ее позиции, а в <em>непозиционных системах счисления</em> "вес" цифры не зависит от ее позиции. Например:</p>
<p><span class="red">11</span> – здесь первая единица обозначает десять, а вторая – 1.</p>
<p><span class="blue">II</span> – здесь обе единицы обозначают единицу.</p>
<p><span class="red">345, 259, 521</span> – здесь цифра 5 в первом случае обозначает 5, во втором – 50, а в третьем – 500.</p>
<p><span class="blue">XXV, XVI, VII</span> – здесь, где бы ни стояла цифра V, она везде обозначает пять единиц. Другими словами, величина, обозначаемая знаком V, не зависит от его позиции.</p>
</body>
<html>

3. Подключение внешней таблицы стилей. Отступы и обтекание

После каждого задания следует смотреть результат в браузере и объяснять причину изменений.

1. Создайте html-файл с приведенным ниже текстом, разметьте в нем заголовок первого уровня и абзацы.

Операционные системы

Операционная система — это особенная программа, которая позволяет компьютеру работать так, как мы это представляем. Без нее для обычного пользователя компьютер представлял бы всего лишь груду железа. Все другие программы, которые мы обычно используем в повседневной жизни (текстовые и графические редакторы, игры, интернет-браузеры и др.), могут работать, только если на компьютере установлена операционная система.

Первые операционные системы появились давно и не были похожи на современные. Они представляли собой наборы небольших программ для программистов. Позже количество функций, возлагаемых на операционную систему, увеличивалось, и на данный момент они представляют собой достаточно сложные программные комплексы.

В мире существует огромное количество операционных систем, но лишь некоторые из них нашли широкое распространение.

На сегодняшний день наиболее популярными являются операционные системы семейства Windows, которые являются проприетарным (коммерческим) продуктом корпорации Microsoft. Преимуществом Windows считается дружественный для пользователя интерфейс. Из недостатков отмечают ненадежность системы.

Linux представляет собой множество Unix-подобных операционных систем (дистрибутивов), которые чаще всего являются свободно распространяемыми. Одной из уникальных особенностей систем GNU/Linux является отсутствие единого географического центра разработки. Linux и программы для нее пишутся миллионами программистов, рассредоточенных по всему миру.

2. Создайте файл prac3.css, подключите его к html-документу. Для этого в контейнере head пропишите строку:

<link rel="stylesheet" href="prac3.css" />

3. Задайте для абзацев и заголовка отступы справа и слева по 15% от размера рабочей области окна браузера:

p, h1 {
	margin-left: 15%;
	margin-right: 15%;
}

4. В файле html для предпоследнего абзаца пропишите его принадлежность к классу left (<p class="left">), а для последнего к классу right. В таблице стилей для обоих классов задайте рамки вокруг абзацев и установите ширину для них не более 400 пикселей. Например:

p.left, p.right {
	border: 6px;
	border-style: groove;
	border-color: silver;
	padding: 15px;
	font-size: 0.9em;
	width:350px;
}

5. Отдельно для каждого класса укажите отличающие их свойства:

p.left {
	float:left;
	margin-right: 0%;
	color: navy;
}
p.right {
	float:right;
	margin-left: 0%;
	color: green;
}

6. Отдельно оформите первую букву обоих абзацев (буквицу):

p.left:first-letter, p.right:first-letter{
	font-size: 1.8em;
}

Результат практической работы должен выглядеть примерно так:

Вид html-документа

4. Тег Div. Вставка в html-документ изображений, их свойства и оформление

После каждого задания следует смотреть результат в браузере и объяснять причину изменений.
Изображения для практической работы:

1. Откройте на редактирование html-файл, созданный на прошлом занятии. Добавьте в него теги <img>. Первое изображение вставьте перед первым абзацем (вне абзаца), второе и третье изображения в конце соответственно предпоследнего и последнего абзацев (перед закрывающим тегом </p>).

...
<img src="structure_os.png" width=400 height=299 alt="Операционная система в структуре ЭВМ">
...
<img src="win_s.gif" title="Операционная система Windows XP">
... 
<img src="linux_s.png" title="Операционная система AltLinux">
...

2. Опишите общие стилевые свойства тега img в файле *.css (который был создан на прошлом уроке).

img {
	display: block;
	margin: auto;
	padding-top: 10px;
}

3. Создайте класс image:

.image {
	float: right;
	margin: 10 0 10 10px; /* top right bottom left*/
	padding: 10 10 10 10px;
	border: 1px dotted gray;
	text-align: center;
	width: 420px;
	font-size: smaller;
	font-family: "Courier";	
}

В html-документе обрамите в контейнер <div class="image">...</div> первое изображение и абзац, который является подписью к этом изображению.

<div class="image">
<img src="structure_os.png" width=400 height=299 alt="Операционная система в структуре ЭВМ">
<p>Схема, иллюстрирующая место операционной системы в многоуровневой структуре компьютера</p>
</div>

4. Определите для тела документа серый цвет фона.

body {
	background-color: silver;
}

5. Удалите описание стиля для обычного абзаца и заголовка. Вместо него вставьте описание для идентификатора all.

#all {
	width: 900px;
	margin: auto;
	padding: 0 30 0 30px; /* top right bottom left*/
	border-left: 4px groove white;
	border-right: 4px groove white;
	font-size: 1.2em;
	background-color: white;
} 

6. Обрамите в контейнер <div id="all">...</div> все содержимое тела html-документа.

5. Создание и оформление гипертекстовых ссылок

  1. Создайте шесть файлов HTML (structure.html, tehnologies.html, history.html, reference.html, hyperlink.html, philosophers.html), поместите их вместе в один каталог. Содержимое файлов и его оформление смотрите в образце.
  2. В том же каталоге создайте файл index.html, со списком ссылок на ранее созданные файлы. Озаглавьте список заголовком третьего уровня. В браузере проверьте работоспособность ссылок.
  3. Подключите к документу index.html файл style.css, описав в нем стили для списка (присвойте списку определенных класс) и ссылок, таким образом, чтобы меню (группа ссылок) выглядело как ряд вертикальных кнопок.

Примерный результат практической работы

Файл index.html:

<html>
<head><title>Web и гиперссылки</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h3>Web и гиперссылки</h3>
<ul class="menu">
<li><a href="structure.html">Структура Web</a></li>
<li><a href="tehnologies.html">Технологии Web</a></li>
<li><a href="history.html">История Web</a></li>
<li><a href="reference.html">Что такое ссылка</a></li>
<li><a href="hyperlink.html">Гиперссылки</a></li>
<li><a href="philosophers.html">Философы</a></li>
</ul>
</body>
</html>

Файл style.css:

ul.menu{
  list-style:none;
  width: 180px;	
}
ul.menu li {
  padding:10px;
  border:3px outset #E6E6FA;
  margin-bottom: 5px;		
}
a {
  color: #23594C;
  text-decoration: none;	
}
ul.menu li:hover {
  background-color:#bfbfbf;
}

6. Создание шаблона сайта

1. Откройте файл index.html, созданный на прошлом занятии. В теле документа создайте контейнеры div в указанной ниже последовательности. Список ссылок поместите в <div id="left"> … </div>, а заголовок третьего уровня исправьте на заголовок первого уровня и поместите в контейнер <div id="header"> … </div>.

<div id="all">
  <div id="header">
 
  </div>
  <div id="left">
 
  </div>
  <div id="content">
 
  </div>
</div>

2. Скопируйте содержимое тела файла structure.html в контейнер <div id="content"> … </div>. После этого удалите файл structure.html и измените адрес в ссылке, которая указывала на данную страницу:
<a href="index.html">Структура Web</a>

3. Посмотрите результат, открыв в браузере файл index.html.

4. Откройте style.css на редактирование и пропишите в нем следующие таблицы стилей для тегов div. Посмотрите на результат в браузере. Объясните произошедшие изменения.

#all{
	width: 1000px;
	margin: auto;
	background-color: #fff; 
}
#header{
	height: 100px;
	border: #E6E6FA dashed 1px;  
}
#left{
	width: 250px;
	float: left;
	margin-top: 20px;
}
#content {
	width: 708px;
	border: #E6E6FA dashed 1px;
	margin-top: 20px;
	padding: 0 20 0 20px;
}

5. В качестве фона тела документа установите изображение:

body {
	background-image: url(<a href="http://www.png" title="www.png">www.png</a>);
}

6. Нарисуйте изображение на тему «Всемирная паутина» высотой не более 80 пикселей, а шириной не более 200 пикселей; сохраните его в формате PNG. Пропишите тег img с адресом этого изображения перед заголовком в контейнере <div id="header"> … </div>.
<img id="logo" src="logo.png">

7. Опишите специальный стиль для логотипа:

img#logo {
	float: left;
	margin: 10px;
}

8. Вставьте в другие html-страницы теги div и ссылку на таблицу стилей аналогично содержимому файла index.hml.

7. Оформление таблиц с помощью CSS

Задание 1. Создайте файлы table1.html и связанный с ним style1.css. В первом на языке HTML опишите таблицу представленную ниже, а во втором - ее внешний вид.

Оформление таблиц на языках HTML и CSS

Задание 2. Создайте файлы table2.html и связанный с ним style2.css. В первом на языке HTML опишите таблицу представленную ниже, а во втором - ее внешний вид.

Возможности CSS для оформления таблиц

Ответ к заданиям

Задание 1.

Файл table1.html

<html>
<head>
<title>Таблицы</title>
<link rel="stylesheet" href="style1.css" />
</head>
<body>
<table>
<tr>
<th rowspan=2>HDD</th>
<td>WD Caviar 3.1 Gb</td>
<td> 50$</td>
</tr>
<tr>
<td>Quantum FB ST 6.4Gb</td>
<td> 90$</td>
</tr>
<tr>
<th rowspan=2>Video</th>
<td>Matrox G400</td>
<td>115$</td>
</tr>
<tr>
<td>Voodoo III</td>
<td> 120.50$</td>
</tr>
</table>
 
</body>
</html>

Файл style1.css

table {
	margin: auto;
	width: 400px;
	border: #2f4f4f inset 5px;
	padding: 5px;
}
td,th {
	border: groove 1px;
	padding: 5 10 5 10px;
}

Задание 2.

Файл table2.html

<html>
<head>
<title>Буки и бяки</title>
<link rel="stylesheet" href="style2.css" />
</head>
<body>
<table cellpadding="10">
<tr>
<td class="w200">
С каждым днем в Интернете появляется все больше бяк и бук. Это особенные существа, роль которых в развитии современного общества не понятна, но тем не менее само их присутствие заметно.  Буки и бяки требуют особого обращения к себе, если обращаться к ним как к  нормальным человеческим особям, то вы поняты не будете.</td>
<td class="w5"></td>
<td class="w200">Вот таблица, которая показывает сколько бук, бяк и других обитает в Интернете:<br><br>
	<table class="white" cellspacing="3">
	<tr>
	<td  class="w50">буки</td>
	<td>65% населения</td>
	</tr>
	<tr>
	<td>бяки</td>
	<td>20% населения</td>
	</tr>
	<tr>
	<td>другие</td>
	<td>15% населения</td>
	</tr>
	</table>
<br><br>
Данные статистического штаба
</td>
</tr>
</table>
</body>
</html>

Файл style2.css

body {
	background-color: #000066; 
}
table {
	margin: auto;
	border: ridge 5px white;
}
td.w200 {
	width: 200px;
	vertical-align: top;
	background-color: #99ccff;
}
td.w50 {
	width: 50px;
}
td.w5 {
	width: 5px;
	background-color: #ffffff;
}
table.white {
	border-width: 1px;
}
table.white tr {
	background-color: #ffffff;
}

8. Упражнение на использование верхнего и нижнего регистров

Создайте html-файл со следующим содержимым. Запомните теги, отвечающие за перевод символов в верхний и нижний регистры.

<html>
<head>
<title>Верхний и нижний индекс</title>
</head>
<body>
<p>Тег  <strong>sup</strong> отображает текст со сдвигом вверх (верхний индекс) и уменьшанием размера текущего шрифта на единицу. Например:</p>
<ul>
<li>Microsoft <sup>TM</sup></li>
<li>x<sup>4</sup> = x<sup>2</sup> * x<sup>2</sup></li>
</ul>
 
<p>Тег  <strong>sub</strong> отображает текст со сдвигом вниз (нижний индекс) и уменьшанием размера текущего шрифта на единицу. Например:</p>
<ul>
<li>C<sub>i</sub> = A<sub>i</sub> + B<sub>i</sub></li>
<li>2H<sub>2</sub> + O<sub>2</sub> = 2H<sub>2</sub>O</li>
</ul>
</body>
</html>

9. Списки

Создайте html-страницу, содержащую представленные ниже списки. Тип маркеров для классов задайте в связанном с ней файле lists.css.

Примеры оформления списков на HTML и CSS

Свойство, определяющее тип маркера, - list-style-type. Используемые в примере значения:

Заполненная окружность и арабские цифры используются для маркированных и нумерованных списков по умолчанию.

При создании многоуровневых списков вложенный список помещается внутрь соответствующего тега li внешнего списка.

Пример результата практической работы

Файл lists.html

<html>
<head>
<title>Списки</title>
<link rel="stylesheet" href="lists.css" />
</head>
<body>
<h2>Списки</h2>
<h3>Неупорядоченные списки</h3>
<ul>
<li>Газета</li>
<li>Журнал</li>
<li>Книга</li>
<li>Комикс</li>
</ul>
 
<ul class="circle">
<li>Комедия</li>
<li>Трагедия</li>
<li>Драма</li>
</ul>
 
<ul class="square">
<li>Водород</li>
<li>Кислород</li>
<li>Углерод</li>
<li>Азот</li>
</ul>
 
<h3>Упорядоченные списки</h3>
<ol>
<li>Утро</li>
<li>День</li>
<li>Вечер</li>
<li>Ночь</li>
</ol>
 
<ol class="l_l">
<li>Нарисовать</li>
<li>Сгруппировать</li>
<li>Задать действие</li>
</ol>
 
<ol class="u_l">
<li>Взять чашку</li>
<li>Взять ложку</li>
<li>Положить кофе</li>
<li>Положить сахар</li>
<li>Залить кипятком</li>
<li>Размешать</li>
</ol>
 
<ol class="l_r">
<li>Младшие классы (1-4)</li>
<li>Средние классы (1-8)</li>
<li>Старшие классы (9-11)</li>
</ol>
 
<ol class="u_r">
<li>Включить</li>
<li>Пропылесосить</li>
<li>Выключить</li>
</ol>
 
<h3>Многоуровневый список</h3>
<ul class="circle">
<li> Глава 1
	<ul>
	<li>Пункт 1.1</li>
	<li>Пункт 1.2</li>
	</ul>
</li>
<li> Глава 2
	<ul>
	<li>Пункт 2.1</li>
	<li>Пункт 2.2</li>
	</ul>
</li>
<li> Глава 3
	<ul>
	<li>Пункт 3.1</li>
	<li>Пункт 3.2</li>
	</ul>
</li>
</ul>
</body>
</html>

Файл lists.css

ul.circle {
	list-style-type: circle;
}
 
ul.square {
	list-style-type: square;
}
 
ol.l_l {
	list-style-type: lower-latin;
}
 
ol.u_l {
	list-style-type: upper-latin;
}
 
ol.l_r {
	list-style-type: lower-roman;
}
 
ol.u_r {
	list-style-type: upper-roman;
}
 
li ul {
	list-style-type: square;
}