Основы работы с 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>




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