Основы работы с CSS


Примеры - часть 2


  • Данный пример показывает, как разместить на странице фоновое изображение.

    <html> <head> <style type="text/css"> body { background-image: url(http://www.intuit.ru/departament/picture.jpg); background-repeat: repeat; background-position: bottom; } </style> </head>

    <body> </body> </html>

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

    <html> <head> <style type="text/css"> body { background-image: url(http://www.intuit.ru/departament/picture.jpg); background-repeat: no-repeat; background-attachment: fixed } </style> </head>

    <body> Определено фиксированное фоновое изображение<br> Определено фиксированное фоновое изображение<br> Определено фиксированное фоновое изображение<br> </body>

    </html>

  • Данный пример показывает, как задать прокручивающееся фоновое изображение, т.е. изображение, которое будет прокручиваться вместе с документом.

    <html> <head> <style type="text/css"> body { background-image: url(http://www.intuit.ru/departament/picture.jpg); background-repeat: no-repeat; background-attachment: scroll } </style> </head>

    <body> Определено прокручивающееся фоновое изображение<br> Определено прокручивающееся фоновое изображение<br> Определено прокручивающееся фоновое изображение<br> </body>

    </html>

  • Данный пример показывает, как использовать свойство сокращения записи для задания всех свойств фона в одном объявлении.

    <html> <head> <style type="text/css"> body { background: blue url(http://www.intuit.ru/departament/picture.jpg) repeat scroll center; } </style> </head>

    <body> Это документ, для которого свойства фона заданы в одном объявлении<br> Это документ, для которого свойства фона заданы в одном объявлении<br> Это документ, для которого свойства фона заданы в одном объявлении<br> </body>

    </html>

  • Итак, можно определить фоновый цвет элемента, а также в качестве фона — изображение, повторяющееся изображение, повторяющееся изображение (только вертикально или только горизонтально), фиксированное или прокручивающееся изображение. Кроме того, можно использовать свойство сокращения записи для задания всех свойств фона в одном объявлении.




    Начало  Назад  Вперед



    Книжный магазин