|
Здравствуйте! Записался на ваш курс, но не понимаю как произвести оплату. Надо ли писать заявление и, если да, то куда отправлять? как я получу диплом о профессиональной переподготовке? |
Опубликован: 31.10.2006 | Доступ: свободный | Студентов: 12243 / 4805 | Оценка: 4.35 / 4.14 | Длительность: 08:43:00
Специальности: Программист, Разработчик интернет-проектов
Теги:
Лекция 10:
Размеры элементов в CSS
Форматирование в CSS
Данные параметры позволяют определить, как и в каком месте вывести элемент.
Примеры:
-
В примере показано, как вывести элемент.
<html> <head> <style type="text/css"> h1 {display: inline} pre {display: none} </style> </head> <body> <pre>Эта информация не будет отображена</pre> <h1>Между этими двумя элементами</h1> <h1>нет интервала</h1> </body> </html> - Пример показывает, как создать смещение изображения в параграфе вправо.
<html> <head> </head> <body> <p> <img style="float:right" src="image.gif" width="100" height="70" /> В параграфе изображение смещено вправо. В параграфе изображение смещено вправо. </p> </body> </html>
- Пример показывает, как создать смещение изображения в параграфе вправо и добавить к изображению границы и отступы.
<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>
- Пример показывает, как можно сместить изображение с заголовком вправо.
<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> - Пример показывает, как можно сместить первую букву параграфа влево.
<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> - Пример показывает, как создать горизонтальное меню.
<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>
