Опубликован: 31.10.2006 | Уровень: для всех | Доступ: платный
Лекция 10:

Размеры элементов в CSS

< Лекция 9 || Лекция 10: 1234 || Лекция 11 >

Форматирование в 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>
< Лекция 9 || Лекция 10: 1234 || Лекция 11 >
Федор Антонов
Федор Антонов

Здравствуйте!

Записался на ваш курс, но не понимаю как произвести оплату.

Надо ли писать заявление и, если да, то куда отправлять?

как я получу диплом о профессиональной переподготовке?

Илья Ардов
Илья Ардов

Добрый день!

Я записан на программу. Куда высылать договор и диплом?

Елена Елаева
Елена Елаева
Россия
Владимир Лагодный
Владимир Лагодный
Россия