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



         

Примеры:


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

    <body> <p>Параграф</p> <p class="left">Параграф смещен влево относительно обычного положения </p> <p class="right">Параграф смещен вправо относительно обычного положения</p> </body>

    </html>

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

    <body> <p class="ab">Параграф имеет абсолютное местоположение и смещен на 100px от левого края страницы и на 150px от верха страницы</p> <p>Параграф</p> </body>

    </html>

  3. В примере показано, как задать форму элемента, по которой он обрезается и выводится. <html> <head> <style type="text/css"> p { position:absolute; clip:rect(2px 250px 250px 0px) } </style> </head>

    <body> <p>Обрезается параграф параграф параграф:</p> <p></p> </body>

    </html>

  4. В примере показано, как использовать параметр overflow для определения действий, когда содержимое элемента не помещается в указанной области. <html> <head> <style type="text/css"> div { background-color:yellow; width:175px; height:70px; overflow: auto } </style> </head>

    <body> <p>Если содержимое элемента превышает заданные значения ширины и высоты необходимо использовать параметр overflow который определдяет, что делать в этой ситуации.</p> <div> В данном случае переполняется бокс элемента и overflow определяет, что делать - установлено значение auto. </div>

    </body>

    </html>

  5. В примере показано, как выравнять в тексте изображение по вертикали. <html> <head> <style type="text/css"> img.first {vertical-align:text-bottom} img.second {vertical-align:text-top} </style> </head>




    Содержание    Вперед