Данные параметры позволяют определить, как и в каком месте вывести элемент.
Примеры:
В примере показано, как вывести элемент.
2. <html>3. <head>4. <style type="text/css">5. h1 {display: inline}6. pre {display: none}7. </style>8. </head>9. 10. <body>11. 12. <pre>Эта информация не будет отображена</pre>13. <h1>Между этими двумя элементами</h1>14. <h1>нет интервала</h1>15. 16. 17. </body></html>
Пример показывает, как создать смещение изображения в параграфе вправо.
19. <html>20. <head>21. </head>22. 23. <body>24. <p>25. <img style="float:right" src="image.gif" width="100" height="70" />26. В параграфе изображение смещено вправо. В параграфе изображение смещено вправо.27. 28. </p>29. </body>30. </html>
Пример показывает, как создать смещение изображения в параграфе вправо и добавить к изображению границы и отступы.
32. <html>33. <head>34. </head>35. 36. <body>37. <p>38. <img style="float:right; border:1px solid blue; margin:0px 0px 15px 20px;" 39. src="image.gif" width="100" height="70" />40. Изображение смещено вправо, имеет границу из сплошной линии и отступы.41. </p>42. </body>43. </html>
Пример показывает, как можно сместить изображение с заголовком вправо.
45. <html>46. <head>47. </head>48. 49. <body>50. <div style="float:right; border:2px dotted blue; text-align:center; 51. padding:5px; margin:5 5 10px 10px; width:160px;">52. <img src="image.gif" width="120" height="70" /><br />53. Изучайте CSS!54. </div>55. 56. <p>57. В данном примере элемент div имеет ширину 160 пикселей, содержит изображение, 58. смещается вправо.59. Для дистанцирования текста от div, к последнему добавлены отступы, 60. а для выделения картинки и заголовка - границы и поля.61. </p>62. </body>63. </html>
Пример показывает, как можно сместить первую букву параграфа влево.
65. <html>66. <head>67. <style type="text/css">68. b69. {70. float:left;71. line-height:95%;72. font-size:500%;73. font-family:Comic Sans MS;74. width:1.2em;75. }76. </style>77. </head>78. 79. <body>80. <p>81. <b>В</b> параграфе элемент b имеет ширину - 1.2 размера текущего шрифта,82. размер шрифта - 500%, межстрочный интервал - 95%, шрифт буквы - Comic Sans MS. 83. </p>84. 85. </body></html>
Пример показывает, как создать горизонтальное меню.
87. <html>88. <head>89. <style type="text/css">90. ol91. {92. float:left;93. margin:5;94. padding:5;95. width:100%;96. list-style-type:none;97. }98. a99. {100. float:left;101. width:6em;102. text-decoration:none;103. color:blue;104. background-color:yellow;105. padding:0.4em 0.7em;106. border:2px solid gray;107. }108. a:hover {background-color:#0F0FFF; color:yellow}109. li {display:inline}110. </style>111. </head>112. 113. <body>114. <ol>115. <li><a href="#">Ссылка 1</a></li>116. <li><a href="#">Ссылка 2</a></li>117. <li><a href="#">Ссылка 3</a></li>118. <li><a href="#">Ссылка 4</a></li>119. </ol>120. 121. <p>122. В примере элементы ol и a смещены влево. 123. У элементов li отсутствует разрыв строки перед или после элемента. 124. </p>125. 126. </body></html>
Пример показывает, как создать страницы без таблиц.
В примере показано, как позиционировать элемент относительно его обычного положения.
62. <html>63. <head>64. <style type="text/css">65. p.left_plus66. {67. position:relative;68. left:15px69. }70. p.left_minus71. {72. position:relative;73. left:-15px74. }75. p.right_plus76. {77. position:relative;78. right:35px79. }80. p.right_minus81. {82. position:relative;83. right:-35px84. }85. </style>86. </head>87. 88. <body>89. <h2>Это заголовок в обычном положении</h2>90. <p class="left_plus">Параграф имеет смещение относительно своего обычного положения</p>91. <p class="left_minus">Параграф имеет смещение относительно своего обычного положения</p>92. <p class="right_plus">Параграф имеет смещение относительно своего обычного положения</p>93. <p class="right_minus">Параграф имеет смещение относительно своего обычного положения</p>94. </body>95. </html>
В примере показано, как позиционировать элемент с помощью абсолютного значения.
97. <html>98. <head>99. <style type="text/css">100. p.ab101. {102. position:absolute;103. left:50px;104. top:50px105. }106. </style>107. </head>108. 109. <body>110. <p class="ab">Параграф позиционируется с абсолютным значением</p>111. <pre>С помощью абсолютного позиционирования элемент можно поместить в любом месте страницы.112. Параграф имеет смещение - на 50px от левого края страницы и 113. на 50px от верхнего края страницы.</pre>114. </body>115. </html>
В примере показано, как сделать элемент невидимым.
