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

Форматирование в CSS


Данные параметры позволяют определить, как и в каком месте вывести элемент.

Примеры:

  1. В примере показано, как вывести элемент. <html> <head> <style type="text/css"> h1 {display: inline} pre {display: none} </style> </head>

    <body>

    <pre>Эта информация не будет отображена</pre> <h1>Между этими двумя элементами</h1> <h1>нет интервала</h1>

    </body> </html>

  2. Пример показывает, как создать смещение изображения в параграфе вправо. <html> <head> </head>

    <body> <p> <img style="float:right" src="image.gif" width="100" height="70" /> В параграфе изображение смещено вправо. В параграфе изображение смещено вправо.

    </p> </body>

    </html>

  3. Пример показывает, как создать смещение изображения в параграфе вправо и добавить к изображению границы и отступы. <html> <head> </head>

    <body> <p> <img style="float:right; border:1px solid blue; margin:0px 0px 15px 20px;" src="image.gif" width="100" height="70" /> Изображение смещено вправо, имеет границу из сплошной линии и отступы. </p> </body>

    </html>

  4. Пример показывает, как можно сместить изображение с заголовком вправо. <html> <head> </head>

    <body> <div style="float:right; border:2px dotted blue; text-align:center; padding:5px; margin:5 5 10px 10px; width:160px;"> <img src="image.gif" width="120" height="70" /><br /> Изучайте CSS! </div>

    <p> В данном примере элемент div имеет ширину 160 пикселей, содержит изображение, смещается вправо. Для дистанцирования текста от div, к последнему добавлены отступы, а для выделения картинки и заголовока - границы и поля. </p> </body>

    </html>

  5. Пример показывает, как можно сместить первую букву параграфа влево. <html> <head> <style type="text/css"> b { float:left; line-height:95%; font-size:500%; font-family:Comic Sans MS; width:1.2em; } </style> </head>




    <body> <p> <b>В</b> параграфе элемент b имеет ширину - 1. 2 размера текущего шрифта, размер шрифта - 500%, межстрочный интервал - 95%, шрифт буквы - Comic Sans MS. </p>

    </body> </html>
  6. Пример показывает, как создать горизонтальное меню. <html> <head> <style type="text/css"> ol { float:left; margin:5; padding:5; width:100%; list-style-type:none; } a { float:left; width:6em; text-decoration:none; color:blue; background-color:yellow; padding:0.4em 0.7em; border:2px solid gray; } a:hover {background-color:#0F0FFF; color:yellow} li {display:inline} </style> </head>

    <body> <ol> <li><a href="#">Ссылка 1</a></li> <li><a href="#">Ссылка 2</a></li> <li><a href="#">Ссылка 3</a></li> <li><a href="#">Ссылка 4</a></li> </ol>

    <p> В примере элементы ol и a смещены влево. У элементов li отсутствует разрыв строки перед или после элемента. </p>

    </body> </html>




</body> </html>
  • В примере показано, как позиционировать элемент относительно его обычного положения. <html> <head> <style type="text/css"> p.left_plus { position:relative; left:15px } p.left_minus { position:relative; left:-15px } p.right_plus { position:relative; right:35px } p.right_minus { position:relative; right:-35px } </style> </head>

    <body> <h2>Это заголовок в обычном положении</h2> <p class="left_plus">Параграф имеет смещение относитильно своего обычного положения</p> <p class="left_minus">Параграф имеет смещение относитильно своего обычного положения</p> <p class="right_plus">Параграф имеет смещение относитильно своего обычного положения</p> <p class="right_minus">Параграф имеет смещение относитильно своего обычного положения</p> </body>

    </html>
  • В примере показано, как позиционировать элемент с помощью абсолютного значения. <html> <head> <style type="text/css"> p.ab { position:absolute; left:50px; top:50px } </style> </head>

    <body> <p class="ab">Параграф позиционируется с абсолютным значением</p> <pre>С помощью абсолютного позиционирования элемент можно поместить в любом месте страницы. Параграф имеет смещение - на 50px от левого края страницы и на 50px от верхнего края страницы.</pre> </body>

    </html>
  • В примере показано, как сделать элемент невидимым. <html> <head> <style type="text/css"> p.off {visibility:hidden} p.on {visibility:visible} </style> </head>

    <body> <p class="on">Параграф виден</p> <p class="off">Параграф не виден</p> </body>

    </html>
  • В примере показано, как изменить курсор. <html> <head> </head>

    <body>

    <h4 style="color:blue">Курсоры:</h4>



    <div style="cursor:auto"> Auto</div> <div style="cursor:crosshair"> Crosshair</div> <div style="cursor:default"> Default</div> <div style="cursor:pointer"> Pointer</div> <div style="cursor:move"> Move</div> <div style="cursor:text"> text</div> <div style="cursor:wait"> wait</div> <div style="cursor:help"> help</div>

    <h4 style="color:blue"> Курсоры типа resize:</h4>

    <div style="cursor:e-resize"> e-resize</div> <div style="cursor:ne-resize"> ne-resize</div> <div style="cursor:nw-resize"> nw-resize</div> <div style="cursor:n-resize"> n-resize</div> <div style="cursor:se-resize"> se-resize</div> <div style="cursor:sw-resize"> sw-resize</div> <div style="cursor:s-resize"> s-resize</div> <div style="cursor:w-resize"> w-resize</div> </body>

    </html>


  • © 2003-2007 INTUIT.ru. Все права защищены.

    Содержание раздела