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


4 - часть 2


</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>




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