Меняем стиль HTML спискам с помощью CSS
24 ноября 2009 года, Размещено в категории: HTML / CSS
По умолчанию большинство браузеров отображают упорядоченный список номеров в том же стиле, что и шрифт текста. С помощью CSS можно изменить стиль списков на более приятный. Для осуществления нашего за дума мы будем использовать тег списка (ol) и тег параграфа (p) к которым мы будем применять стили.
Урок по CSS для начинающих
Начало урока
В общем, что нам необходимо сделать, это к тегу ol применить шрифт Georgia, а затем применить шрифт Arial к параграфу p (что вложений в тег ol).
1. HTML код:
Пишем HTML код (каркас) нашего упорядочного списка, и не забываем наш текст поместить между тегом <p> (параграф).
Список один
Второй список
Список номер три
Вот как по умолчанию упорядоченный список будет отображать браузер:
2. Стиль тега ol:
ol { font: italic 1em Georgia, Times, serif; color: #999999; }
Список будет выглядеть примерно так:
3. Стиль ol p:
ol p { font: normal .8em Arial, Helvetica, sans-serif; color: #000000; }
Окончательный список будет выглядеть следующим образом:
Вот получился список немножко лучше стандартного, если похимичить поиграть с шрифтами размерами, тогда можно будет добиться лучших результатов, но для начала хватит освоить и этого, дальше будем химичить больше и изучать много нового 🙂
Мой блог находят по следующим фразам
• html5 css3 примеры
• как правильно писать css код
• плееры для сайта
• flash плеер для сайта
• dicim.net
• малолеткипорно
11 лет назад
Запись хорошо подойдет новичкам. Но так-то интересно! Спасибо
Стас
11 лет назад
Отличный сайт! Уже несколько уроков посмотрел про CSS. Thanks!
10 лет назад
Ваш блог действительно мне кое в в чём помог, спс