Меняем стиль HTML спискам с помощью CSS

24 ноября 2009 года, Размещено в категории: HTML / CSS

html-ol

По умолчанию  большинство браузеров отображают  упорядоченный список номеров в том же стиле, что и шрифт текста. С помощью CSS можно изменить  стиль списков на более приятный. Для осуществления нашего за дума мы будем использовать тег списка (ol) и тег параграфа (p) к которым мы будем применять стили.
Урок по CSS для начинающих

Начало урока

В общем, что нам необходимо сделать, это к тегу ol применить шрифт Georgia, а затем применить шрифт Arial к параграфу p (что вложений в тег ol).

стиль HTML спискам с помощью CSS

1. HTML код:
Пишем HTML код (каркас) нашего упорядочного списка, и не забываем наш текст поместить между тегом <p> (параграф).

  1. Список один

  2. Второй список

  3. Список номер три

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

стиль HTML спискам

2. Стиль тега ol:

ol {
font: italic 1em Georgia, Times, serif;
color: #999999;
}

Список будет выглядеть примерно так:

стиль HTML спискам

3. Стиль ol p:

ol p {
font: normal .8em Arial, Helvetica, sans-serif;
color: #000000;
}

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

стиль HTML спискам

Вот получился список немножко лучше стандартного, если похимичить поиграть с шрифтами размерами, тогда можно будет добиться лучших результатов, но для начала хватит освоить и этого, дальше будем химичить больше и изучать много нового 🙂

Мой блог находят по следующим фразам
html5 css3 примеры
как правильно писать css код
плееры для сайта
flash плеер для сайта
dicim.net
малолеткипорно






3 комментария

  • 8 лет назад Ответить

    Запись хорошо подойдет новичкам. Но так-то интересно! Спасибо

  • 8 лет назад Ответить

    Отличный сайт! Уже несколько уроков посмотрел про CSS. Thanks!

  • 7 лет назад Ответить

    Ваш блог действительно мне кое в в чём помог, спс

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Перед отправкой формы:

Метки: