В случае объединения или использования нескольких таблиц стилей могут возникнуть ситуации, когда некоторые свойства заданы для одного и того же селектора в разных таблицах стилей; тогда будут использованы значения из более конкретной таблицы стилей.
Например, внешняя таблица стилей имеет следующие свойства для селектора p:
p {font-family: "sans serif";margin-left: 10pt;font-style: italic;font-weight: bold}
А внутренняя таблица стилей имеет для селектора p следующие свойства:
Таким образом, тип шрифта будет наследоваться из внешней таблицы стилей, а его стиль, вес и внешний отступ параграфа определяются внутренней таблицей стилей.
Лекция 3. Параметры CSS для фона
Параметры CSS для фона определяют фоновые эффекты элемента.
Примеры
Данный пример показывает, как задать фоновый цвет элемента.
2. <html>3. <head>4. 5. <style type="text/css">6. ul {background-color: rgb(200,10,200)}7. ol {background-color: #00FFFF}8. li {background-color: transparent}9. p {background-color: blue}10. </style>11. </head>12. 13. <body>14. 15. <ul>16. <li>this is ul</li>17. </ul>18. <ol>19. <li>this is ol</li>20. </ol>21. <p>This is a paragraph</p>22. 23. 24. </body></html>
Данный пример показывает, как задать в качестве фона изображение.
26. <html>27. <head>28. 29. <style type="text/css">30. body 31. {32. background-image:33. url(http://www.intuit.ru/departament/picture.jpg)34. }35. </style>36. 37. </head>38. 39. <body>40. В документе в качестве фона использовано изображение41. </body>42. </html>
Данный пример показывает, как использовать повторяющееся фоновое изображение.
44. <html>45. <head>46. 47. <style type="text/css">48. body49. { 50. background-image: 51. url(http://www.intuit.ru/departament/picture.jpg);52. background-repeat: repeat53. }54. </style>55. 56. </head>57. 58. <body>59. В документе в качестве фона использовано повторяющееся изображение60. </body></html>
Данный пример показывает, как использовать повторяющееся только по вертикали фоновое изображение.
62. <html>63. <head>64. 65. <style type="text/css">66. body67. { 68. background-image: 69. url(http://www.intuit.ru/departament/picture.jpg);70. background-repeat: repeat-y71. }72. </style>73. 74. </head>75. 76. <body>77. В документе в качестве фона использовано повторяющееся изображение, 78. которое размножается только вертикально79. </body></html>
Данный пример показывает, как использовать повторяющееся только по горизонтали фоновое изображение.
81. <html>82. <head>83. 84. <style type="text/css">85. body86. { 87. background-image: 88. url(http://www.intuit.ru/departament/picture.jpg);89. background-repeat: repeat-x90. }91. </style>92. 93. </head>94. 95. <body>96. В документе в качестве фона использовано повторяющееся изображение, 97. которое размножается только горизонтально.98. </body></html>
Данный пример показывает, как разместить на странице фоновое изображение.
Данный пример показывает, как задать фиксированное фоновое изображение, т.е. изображение, которое не будет перемещаться вместе со всей остальной страницей.
Данный пример показывает, как использовать свойство сокращения записи для задания всех свойств фона в одном объявлении.
162. <html>163. <head>164. <style type="text/css">165. body166. { 167. background: blue url(http://www.intuit.ru/departament/picture.jpg) repeat scroll center; 168. }169. </style>170. </head>171. 172. <body>173. Это документ, для которого свойства фона заданы в одном объявлении<br>174. Это документ, для которого свойства фона заданы в одном объявлении<br>175. Это документ, для которого свойства фона заданы в одном объявлении<br>176. </body>177. </html>
Итак, можно определить фоновый цвет элемента, а также в качестве фона — изображение, повторяющееся изображение, повторяющееся изображение (только вертикально или только горизонтально), фиксированное или прокручивающееся изображение. Кроме того, можно использовать свойство сокращения записи для задания всех свойств фона в одном объявлении.
