Параметры фона в CSS: подробное рассмотрение

Как было показано ранее, параметры фона в CSS позволяют управлять цветом фона элемента, задавать в качестве фона изображение, повторять циклически фоновое изображение вертикально или горизонтально и позиционировать изображение на странице.

Данные свойства поддерживаются следующими браузерами (в скобках сокращенный вариант, который применяется далее в таблицах параметров и значений): Internet Explorer (IE), Firefox (F), Netscape(N).

Параметр	Описание	Значения	IE	F	N	W3C
background	Служит для задания всех параметров фона в одном объявлении	background-color background-image background-repeat background-attachment background-position				1*
background-attachment	Задает для изображения фиксированное расположение или перемещающееся вместе с остальной страницей	scroll fixed
background-color	Задает цвет фона элемента	color-rgb color-hex color-name transparent
background-image	Задает в качестве фона изображение	url none
background-position	Задает начальное положение фонового изображения	top left top center top right center left center center center right bottom left bottom center bottom right x-% y-% x-pos y-pos
background-repeat	Определяет, будет ли и каким образом повторяться фоновое изображение	repeat repeat-x repeat-y no-repeat

(* здесь и далее число в столбце "W3C" указывает в какой спецификации CSS определен параметр (CSS1 или CSS2)).

Параметр 'background'

Этот параметр предназначен для задания всех свойств фона в одном объявлении.

Наследование: нет.

Примеры:

body{ background: url(picture.gif)} body{ background: url(http://www.intuit.ru/speciality/image.gif) repeat scroll} body{ background: yellow url(http://www.intuit.ru/speciality/image.gif) repeat-x bottom}

Может принимать следующие значения:

Значение	Описание
background-color background-image background-repeat background-attachment background-position	В этом объявлении можно задать от одного до пяти свойств фона

Рассмотрим их подробнее.

Параметр 'background-attachment'

Этот параметр определяет, будет ли фоновое изображение зафиксировано в определенном месте или будет перемещаться вместе со всей страницей.

Наследование: нет.

Может принимать следующие значения:

Значение	Описание
Scroll	Фоновое изображение перемещается, когда перемещается страница
Fixed	Фоновое изображение не перемещается, когда перемещается страница

Пример:

body { background-attachment: fixed;background-repeat: repeat }

Параметр 'background-color'

Этот параметр задает фоновый цвет элемента.

Наследование: нет.

Может принимать следующие значения:

Значение	Описание
color	Значение color может быть названием цвета (red), значением rgb (rgb(255,0,0)) или шестнадцатеричным числом (#ff0000)
transparent	Фоновый цвет является прозрачным

Пример:

h1{ background-color: gray;font-family: arial}

Параметр 'background-image'

Данный параметр задает изображение в качестве фона.

Наследование: нет.

Может принимать следующие значения:

Значение	Описание
url	Путь доступа к изображению
none	Фонового изображения нет

Пример:

body{ background-image: url(http://www.intuit.ru/speciality/image.gif); background-repeat: repeat;background-attachment: fixed}

В тех случаях, когда изображение недоступно, необходимо задать цвет background-color, который будет использован.

Параметр 'background-position'

Этот параметр задает начальное положение фонового изображения.

Наследование: нет.

Может принимать следующие значения:

Значение	Описание
top left top centertop rightcenter leftcenter centercenter rightbottom leftbottom centerbottom right	Если определить только одно ключевое слово, то вторым значением подразумевается "center"
x-% y-%	Первое значение является горизонтальной координатой, второе значение — вертикальной. Верхний левый угол — 0% 0%. Правый нижний угол — 100% 100%. Если определено только одно значение, то вторым значением подразумевается 50%.
x-pos y-pos	Первое значение является горизонтальной координатой, второе значение — вертикальной. Верхний левый угол — 0 0. Единицами измерения могут быть пиксели (0px 0px) или любые другие единицы измерения CSS. Если определено только одно значение, то вторым значением подразумевается 50%. Можно смешивать % и эти координаты.

Пример:

body{ background-image: url(http://www.intuit.ru/speciality/image.gif);background-position: right top;background-attachment: fixed} body{ background-image: url(http://www.intuit.ru/speciality/image.gif);background-repeat: no-repeat;background-position: 100% 100%;background-attachment: fixed}

Параметр 'background-repeat'

Этот параметр определяет, каким образом будет повторяться фоновое изображение.

Наследование: нет.

Может принимать следующие значения:

Значение	Описание
repeat	Фоновое изображение будет повторяться по вертикали и по горизонтали
repeat-x	Фоновое изображение будет повторяться по горизонтали
repeat-y	Фоновое изображение будет повторяться по вертикали
no-repeat	Фоновое изображение будет выведено только один раз

Пример:

body{ background-image: url(http://www.intuit.ru/departament/image.gif);background-repeat: repeat;background-attachment: fixed}

Лекция 4. Параметры текста в CSS

Параметры текста CSS позволяют управлять внешним видом текста. Можно изменять цвет текста, увеличивать или уменьшать интервал между символами, выравнивать текст, оформлять текст, делать отступ для первой строки текста и т.д.

Поддержка браузеров: Internet Explorer, Firefox, Netscape.

Параметр	Описание	Значения	IE	F	N	W3C
color	Задает цвет текста	Color
direction	Задает направление текста	ltr
rtl
letter-spacing	Увеличивает или уменьшает интервал между символами	normal
length
text-align	Выравнивает текст в элементе	left
right
center
justify
text-decoration	Дополнительное оформление текста	none
underline
overline
line-through
blink
text-indent	Делает отступ для первой строки текста элемента	length
%
text-shadow		none
color
length
text-transform	Управляет символами элемента	none
capitalize
uppercase
lowercase
unicode-bidi		unicode-bidi
normal
embed
bidi-override
white-space	Задает способ обращения с пробелами внутри элемента	normal
pre
nowrap
word-spacing	Увеличивает или уменьшает пробел между словами	normal
length

Примеры

Этот пример показывает, как задать цвет текста.

2. <html>3. 4. <head>5. <style type="text/css">6. p {color: green}7. ul {color: #dda0dd}8. ol {color: rgb(0,0,255)}9. </style>10. </head>11. 12. <body>13. <ul>14. <li>список ul</li>15. </ul>16. <ol>17. <li>список ol</li>18. </ol>19. <p>это параграф</p>20. </body>21. </html>

Этот пример показывает, как задать фоновый цвет части текста.

23. <html>24. <head>25. <style type="text/css">26. span.back27. {28. background-color: gray29. }30. </style>31. </head>32. 33. <body>34. <p>35. Данный текст содержит определение, фон которого выделен. <span class="back">Это 36. определение.</span> 37. </p>38. </body></html>

Данный пример показывает, как увеличить или уменьшить интервал между символами.

40. <html>41. 42. <head>43. <style type="text/css">44. p {letter-spacing: 1cm}45. li {letter-spacing: 5px}46. </style>47. </head>48. 49. <body>50. <p>параграф</p>51. <ol>52. <li>элемент списка</li>53. </ol>54. </body>55. </html>

Данный пример показывает, как выравнивать текст.

57. <html>58. <head>59. <style type="text/css">60. ol {text-align: center}61. ul {text-align: left}62. dl {text-align: right}63. </style>64. </head>65. 66. <body>67. <ol>68. <li>список ol</li>69. <li> список ol</li>70. <li> список ol</li>71. </ol>72. <ul>73. <li> список ul</li>74. <li> список ul</li>75. <li> список ul</li>76. </ul>77. <dl>78. <dt> список <dd>dl dl dl</dd></dt>79. <dt> список <dd>dl dl dl</dd></dt>80. <dt> список <dd>dl dl dl</dd></dt>81. </dl>82. </body></html>

Этот пример показывает, как можно оформить текст.

84. <html>85. <head>86. <style type="text/css">87. a {text-decoration: underline}88. ul {text-decoration: overline}89. ol {text-decoration: line-through}90. </style>91. </head>92. 93. <body>94. <ol>95. <li>первое</li>96. <li>второе</li>97. <li>третье</li>98. </ol>99. <ul>100. <li>1</li>101. <li>2</li>102. <li>3</li>103. </ul>104. <p><a href="http://www.intuit.ru/">www.intuit.ru</a></p>105. </body>106. </html>

Этот пример показывает, как сделать отступ для первой строки параграфа.

108. <html>109. <head>110. </head>111. 112. <body>113. <p>114. параграф<br>115. <p style="text-indent: 2cm;">116. параграф<br>117. <p style="text-indent: 4cm;">118. параграф<br>119. </p>120. </body>121. </html>

Данный пример показывает, как управлять регистром символов в тексте.

123. <html>124. <head>125. </head>126. 127. <body>128. <pre style="text-transform: uppercase;">Верхний регистр</pre>129. 130. <p style="text-transform: lowercase;">Нижний регистр</p>131. 132. <pre style="text-transform: capitalize;">первые буквы в словах заглавные</pre>133. </body>134. </html>