Войти на сайт
Регистрация
Обратная связьНаш магазинБлог администрации
Российская школа CSS - Справочник CSS, уроки CSS, jQuery
Оптимизатор CSS Конструктор CSS
Российская школа CSS » Уроки CSS » Урок CSS 4. Создание нумерованных списков
Не нравится(-) 36 Нравится(+)
Урок CSS 4. Создание нумерованных списков

В этом, очень простом уроке, я расскажду Вам о том, как при помощи CSS создать красивый нумерованный список.
Итак, приступим...

1) Для удобства вынесем CSS в отдельный файл. Для этого откроем блокнот -> Сохранить как -> style.css.
2) Вставьте в этот файл следующий код (подробнее о нем читайте в конце урока):

ol {
  font: italic 1em Georgia;
  color: #999;
}

ol p {
  font: normal 0.8em Arial;
  color: #000;
}


3) Чтобы увидеть работу стилей, создадим в той же дирректории html файл и, например вставим туда такой код:

<html>
<head>
<link href="style.css" rel="stylesheet" type=text/css>
</head>
<body>
<ol>
  <li>
    <p>Пункт один</p>
  </li>
  <li>
    <p>Пункт два</p>
  </li>
  <li>
    <p>Пункт три</p>
  </li>
</ol>
</body>
</html>


4) Сохраняем и смотрим, что получилось.

Пояснения к коду:
font: normal 0.8em Arial; - задание типа, размера и названия шрифта.


---------------------------------------
Правила копирования материалов урока
Демо
Скачать (zip, 0.4 Kb)


Уважаемый посетитель Российской школы CSS! Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. Спасибо за внимание!



---------------------------------------
---------------------------------------

Похожие публикации

Публикацию посмотрели 13948 раз(а) и написали 12 комментариев.
Подписаться на канал RSS Добавить сайт в закладки

«    Август 2017    »
ПнВтСрЧтПтСбВс
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
© 2008-2017 Copyright, Российская школа CSS. CSS-School.RU. Все права защищены.
Designed by GZ Design, OniX © 2010 - 2017
Valid XHTML 1.0 Transitional Правильный CSS!