Параметр 'padding'
Данный параметр предназначен для задания всех полей в одном объявлении. Не позволяет задавать отрицательные значения.
Наследование : нет.
Может принимать следующие значения :
Значение
Описание
padding-top
Устанавливает поля. Значения задаются в % (определяет поле в % от ширины ближайшего элемента) и длиной (определяет фиксированное поле)
padding-right
padding-bottom
padding-left
Примеры :
p {padding: 2px} для всех четырех сторон будет задано поле 2px.
p {padding: 5% 2px} верхнее и нижнее поле будет 5%, левое и правое поле будет составлять 2px от ширины ближайшего элемента.
p {padding: 2px 7px 5%} верхнее поле будет 2px, левое и правое поле будет составлять 7px от ширины ближайшего элемента, нижнее поле будет 5%.
p {padding: 2px 5% 7px 5px} верхнее поле будет 2px, правое поле будет 5% от ширины ближайшего элемента, нижнее поле будет 7px, левое поле будет 5px.
Параметр 'padding-bottom'
Этот параметр задает нижнее поле элемента. Не позволяет задавать отрицательные значения.
Наследование : нет.
Может принимать следующие значения :
Значение
Описание
Length
Определяет фиксированное нижнее поле
%
Определяет нижнее поле в % от высоты ближайшего элемента
Пример :
li{ padding-bottom: 5%} Параметр 'padding-left'
Данный параметр задает левое поле элемента. Не позволяет задавать отрицательные значения.
Наследование : нет.
Может принимать следующие значения :
Значение
Описание
Length
Определяет фиксированное левое поле
%
Определяет левое поле в % от высоты ближайшего элемента
Пример :
li{ padding-left: 2px} li{ padding-left: 5%} Параметр 'padding-right'
Данный параметр задает правое поле элемента. Не позволяет задавать отрицательные значения.
Наследование : нет.
Может принимать следующие значения :
Значение
Описание
Length
Определяет фиксированное правое поле
%
Определяет правое поле в % от высоты ближайшего элемента
Пример :
li{ padding-right: 2px} Параметр 'padding-top'
Параметр padding-top задает верхнее поле элемента. Не позволяет задавать отрицательные значения.
Наследование : нет.
Может принимать следующие значения :
Значение
Описание
Length
Определяет фиксированное верхнее поле
%
Определяет верхнее поле в % от высоты ближайшего элемента
Пример :
li{ padding-top: 2px} Лекция 9. Списки в CSS
Параметры списков в CSS позволяют разместить и изменять маркеры элементов списка, задавать изображение в качестве маркера элемента списка.
Примеры:
Этот пример показывает, как задать различные маркеры элементов списка. 2. <html>3. <head>4. <style type="text/css">5. ol.no {list-style-type: none}6. ul.ds {list-style-type: disc}7. ol.sqr {list-style-type: square}8. ul.crl {list-style-type: circle}9. </style>10. </head>11. 12. <body>13. <ol class="no">14. <li>Первый элемент</li>15. <li>Второй элемент</li>16. <li>Третий элемент</li>17. </ol>18. 19. <ul class="ds">20. <li>Первый элемент</li>21. <li>Второй элемент</li>22. <li>Третий элемент</li>23. </ul>24. 25. <ol class="sqr">26. <li>Первый элемент</li>27. <li>Второй элемент</li>28. <li>Третий элемент</li>29. </ol>30. 31. <ul class="crl">32. <li>Первый элемент</li>33. <li>Второй элемент</li>34. <li>Третий элемент</li>35. </ul>36. 37. </body>38. </html> Этот пример показывает, как задать различные маркеры элементов списка. 40. <html>41. <head>42. <style type="text/css">43. ul.dec {list-style-type: decimal}44. ol.lwrm {list-style-type: lower-roman}45. ul.uprm {list-style-type: upper-roman}46. ol.lwalph {list-style-type: lower-alpha}47. ul.upalph {list-style-type: upper-alpha}48. </style>49. </head>50. 51. <body>52. 53. <ol class="lwalph">54. <li>Первый элемент</li>55. <li>Второй элемент</li>56. <li>Третий элемент</li>57. </ol>58. 59. <ul class="upalph">60. <li>Первый элемент</li>61. <li>Чай</li>62. <li>Третий элемент</li>63. </ul>64. 65. <ol class="lwrm">66. <li>Первый элемент</li>67. <li>Второй элемент</li>68. <li>Третий элемент</li>69. </ol>70. 71. <ul class="uprm">72. <li>Первый элемент</li>73. <li>Второй элемент</li>74. <li>Третий элемент</li>75. </ul>76. 77. <ul class="dec">78. <li>Первый элемент</li>79. <li>Второй элемент</li>80. <li>Третий элемент</li>81. </ul>82. 83. </body>84. </html> Этот пример показывает, как задать изображение в качестве маркера элемента списка. 86. <html>87. <head>88. <style type="text/css">89. ol 90. {91. list-style-image: url("http://www.intuit.ru/ssi/html5/img/logo.png")92. }93. </style>94. </head>95. 96. <body>97. <ol>98. <li>Первый элемент</li>99. <li>Второй элемент</li>100. </ol>101. </body>102. </html> Этот пример показывает, как можно задать расположение маркера элемента списка. 104. <html>105. <head>106. <style type="text/css">107. ol.in108. {109. list-style-position: inside110. }111. 112. ul.out113. {114. list-style-position: outside115. }116. </style>117. </head>118. 119. <body>120. <ol class="in">121. <li>Это первый элемент списка</li>122. <li>Это второй элемент списка</li>123. <li>Это третий элемент списка</li>124. <pre>Cписок имеет <i><u>list-style-position</u></i> = "<b>inside</b>"</pre>125. </ol>126. 127. <ul class="out">128. <li>Это первый элемент списка</li>129. <li>Это второй элемент списка</li>130. <li>Это третий элемент списка</li>131. </ul>132. <pre>Список имеет <i><u>list-style-position</u></i> = "<b>outside</b>"</pre>133. </body></html> Пример показывает, как задать все параметры списка в одном объявлении. 135. <html>136. <head>137. <style type="text/css">138. ol 139. {140. list-style: disc outside url("http://www.intuit.ru/departament/speciality/image.gif")141. }142. </style>143. </head>144. 145. <body>146. <ol>147. <li>Первый элемент списка</li>148. <li>Второй элемент списка</li>149. <li>Третий элемент списка</li>150. </ol>151. </body>152. </html> 