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


Примеры


  1. Этот пример показывает, как задать левое поле элементов списка. <html> <head> <style type="text/css"> li {padding-left: 0.5cm} </style> </head>

    <body> <ol> <li>элемент списка</li> <li>элемент списка</li> <li>элемент списка</li> </ol> </body>

    </html>

  2. Этот пример показывает, как задать правое поле элементов списка. <html> <head> <style type="text/css"> li {padding-right: 3cm} </style> </head>

    <body> <ol> <li>элемент списка</li> <li>элемент списка</li> <li>элемент списка</li> </ol> </body>

    </html>

  3. Этот пример показывает, как задать верхнее поле элементов списка. <html> <head> <style type="text/css"> li {padding-top: 1cm} </style> </head>

    <body> <ol> <li>элемент списка</li> <li>элемент списка</li> <li>элемент списка</li> </ol> </body>

    </html>

  4. Этот пример показывает, как задать нижнее поле элементов списка. <html> <head> <style type="text/css"> li {padding-bottom: 2.5cm} </style> </head>

    <body> <ol> <li>элемент списка</li> <li>элемент списка</li> <li>элемент списка</li> </ol> </body>

    </html>

  5. Пример показывает, как с помощью параметра padding задать все поля в одном объявлении. Допускается определение от одного до четырех значений. <html> <head> <style type="text/css"> li.first {padding: 2.5cm} li.second {padding: 1cm 2cm} </style> </head>

    <body> <ol> <li class="first">элемент списка с одинаковыми полями со всех сторон</li> <li>элемент списка</li> <li class="second">элемент списка, который имеет верхнее и нижнее поле, равное 1 см, а левое и правое поля — равные 2 см</li> </ol> </body>

    </html>




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