Форматирование в CSS - часть 2

<body> <p> <b>В</b> параграфе элемент b имеет ширину - 1.2 размера текущего шрифта, размер шрифта - 500%, межстрочный интервал - 95%, шрифт буквы - Comic Sans MS. </p>

</body> </html>

Пример показывает, как создать горизонтальное меню. <html> <head> <style type="text/css"> ol { float:left; margin:5; padding:5; width:100%; list-style-type:none; } a { float:left; width:6em; text-decoration:none; color:blue; background-color:yellow; padding:0.4em 0.7em; border:2px solid gray; } a:hover {background-color:#0F0FFF; color:yellow} li {display:inline} </style> </head>

<body> <ol> <li><a href="#">Ссылка 1</a></li> <li><a href="#">Ссылка 2</a></li> <li><a href="#">Ссылка 3</a></li> <li><a href="#">Ссылка 4</a></li> </ol>

<p> В примере элементы ol и a смещены влево. У элементов li отсутствует разрыв строки перед или после элемента. </p>

</body> </html>

Пример показывает, как создать страницы без таблиц. <html> <head> <style type="text/css"> div.block { width:100%; margin:0px; border:1px solid orange; line-height:150%; } div.top,div.bottom { padding:0.5em; color:white; background-color:orange; clear:left; } h1.top { padding:0; margin:0; } div.move { float:left; width:160px; margin:0; padding:1em; color: blue; } div.body { margin-left:190px; border-left:1px solid orange; padding:1em; } </style> </head> <body>

<div class="block"> <div class="top"><h1 class="top">www.Intuit.ru</h1></div> <div class="move"><p>"Сущности, необходимые для объяснения чего-либо, не следует умножать без необходимости." Уильям Оккам (1285-1349)</p></div> <div class="body"> <h2>Свободно доступные пособия по созданию Web</h2> <p>В Интернет можно найти все необходимые для создания Web пособия, начиная от основ HTML и XHTML и заканчивая XML, XSL, Multimedia и WAP.</p> <p>Intuit -- Сайт для разработчиков Web!</p></div> <div class="bottom">©Copyright</div> </div>

Содержание Назад Вперед