Лаб 1 (Лабораторный практикум), страница 5
Описание файла
Файл "Лаб 1" внутри архива находится в папке "Лабораторный практикум". PDF-файл из архива "Лабораторный практикум", который расположен в категории "". Всё это находится в предмете "языки интернет-программирования" из 5 семестр, которые можно найти в файловом архиве МГТУ им. Н.Э.Баумана. Не смотря на прямую связь этого архива с МГТУ им. Н.Э.Баумана, его также можно найти и в других разделах. Архив можно найти в разделе "лабораторные работы", в предмете "языки интернет-программирования" в общих файлах.
Просмотр PDF-файла онлайн
Текст 5 страницы из PDF
А также с использованиемсвойств 'margin-top', 'margin-right', 'margin-bottom', 'margin-left' для каждой изсторон в отдельности.body { margin: 2em }/* all margins set to 2em */body { margin: 1em 2em }/* top & bottom = 1em, right & left = 2em */body { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */body {margin-top: 1em;margin-right: 2em;}ПозиционированиеCSS поддерживает 4 вида позиционирования:31Статическое (static)Абсолютное (absolute)Относительное (relative)Фиксированное (fixed)Используются следующие термины: Нормальный поток – который означает обычное поведение браузера приотображении данных. Окно просмотра браузера – окно браузера, в котором отображаетсясодержимое документа.Элементы контейнеры могут быть размечены с использованиемпозиционирования.
В качестве элементов-контейнеров может быть любойэлемент, однако обычно используется специальный элемент div. Все элементы,включенные в элемент-контейнер, будут размещены в его границах.Статическое позиционирование назначается у всех элементов по умолчанию иозначает нормальное следование элементов. В явном виде спецификатор staticприменяется для перекрытия унаследованных стилей.Абсолютное позиционированиеАбсолютное позиционирование подразумевает указание расположенияотносительно его блока-контейнера или корневого элемента html.
При этом,как только появляется абсолютное позиционирование, элемент выпадает изнормального потока и всегда будет позиционироваться относительноконтейнера, независимо от остального содержимого страницы.Рассмотрим простейший пример позиционирования. В данном случае позициябудет совпадать с левым верхним отступом от окна отображения.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">#content {position: absolute;left: 200px;top: 100px;border: 1px solid green;}</style></head><body><div id="content"><p>Некоторый текст для проверки размещения элемента.</p></div></body></html>32Рассмотрим другой пример, включающий абсолютное позиционированиеотносительно другого блока.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">#main {position: absolute;left: 100px;top: 50px;border: 1px solid black;padding: 0 100px 100px 0}#content {position: absolute;left: 50px;top: 20px;border: 1px solid green;}</style></head><body><div id="main">Главное меню:<div id="content"><p>Некоторый текст для проверки размещенияэлемента.</p></div></div></body></html>В данном случае элемент с идентификатором content смещен относительноэлемента с идентификатором main.
Обратите внимание на то, что его смещениене зависит от текста, который непосредственно помещен в <div id="main">, азависит только от заданной позиции в стиле.Относительное позиционированиеНесмотря на то, что позиционирование контрастирует? в названии сабсолютным позиционированием, следует помнить, что смещение в этомслучае вычисляется не относительно соседних элементов, а относительнонормального потока.В следующем примере блок с идентификатором content смещен относительнонормального потока, но элемент, расположенный за ним, будет отображен так,как будто никаких изменений в потоке не было. Обратите внимание на то, чтоэтот блок будет менять положение при изменении размеров окна браузера.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">33#content {position: relative;left: 50px;top: 20px;border: 1px solid green;}</style></head><body><p>Проект Mozilla официально выпустил релиз web-браузера Firefox 15.
Крометого, выпущен корректирующий релиз ветки с длительным сроком поддержки - Firefox10.0.7, в котором отмечается только исправление уязвимостей и серьёзныхошибок.</p><div id="content"><p>В ближайшие дни на стадию бета-тестирования перейдётветка Firefox 16 и будет отделена aurora-ветка Firefox 17.</p></div><p>В соответствии с шестинедельным циклом разработки, релиз Firefox 16 намеченна 9 октября, а Firefox 17 на 20 ноября.</p></body></html>Представленный пример также позволяет легко понять различие во влиянии нанормальный поток абсолютного и относительного позиционирования.Замените здесь position на absolute.Часто применяется комбинирование абсолютного и относительногопозиционирования.
Следующий пример иллюстрирует относительноепозиционирование внутри блока с абсолютным позиционированием. Обратитевнимание на то, каким образом браузер отображает внешний блок приизменении размера окна.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">#main {position: absolute;left: 100px;top: 50px;border: 1px solid black;padding: 0 100px 100px 0}#content {position: relative;left: 20px;top: 10px;border: 1px solid green;}</style></head><body><div id="main">Главное меню:<div id="content"><p>Некоторый текст для проверки размещенияэлемента.</p></div></div></body></html>34Фиксированное позиционированиеВ отличие от абсолютного позиционирования, фиксированное позволяетзакрепить элемент относительно окна просмотра, а не элемента-контейнера.Это позволяет разместить элементы, которые не будут подвергаться прокрутке,например постоянно отображаемый блок меню.Плавающие элементыПлавающее размещение не является схемой позиционирования.
Оно быловведено как средство, позволяющее получить обтекание элементов, но не длясоздания макета страницы.Например следующие: стиль обеспечит отображение изображений в правойчасти страницы, а все остальные элементы будут размещать в свободномпространстве слева.img {float: right;padding: 15px;}Плавающее размещение иногда применяют к блокам, содержащим меню ипрочие средства навигации.Управление отображением элементаДля управления отображением элемента используется свойство display.Таблица 6 Некоторые значения свойства diplay.ЗначениеnoneblockinlineОписаниеЭлемент не будет отображенЭлемент отображается как блок (например как <p> или как <h..>).Блок имеет отступы над и под собой, а также отделяется отследующих за ним HTML элементов.Режим по умолчанию.
Встроенный элемент отображается как частьстроки (подобно span) и не разрывает строку перед и после себя.Отделяется от следующих за ним элементов.Элемент встраивается в строку, но ведёт себя как блок.Элемент является таблицей, встраиваемой в строку.Элемент отображается как список и получает соответствующуюlist-itemметку.tableЭлемент отображается как таблицаtable-captionЭлемент отображается как заголовок таблицыtable-cellЭлемент отображается как ячейка таблицыtable-columnЭлемент отображается как колонка таблицыtable-column-group Элемент отображается как группа колонок (как <colgroup>)table-rowЭлемент отображается как строка таблицыtable-row-groupЭлемент отображается как группа строкinheritЗначение будет унаследовано у родительского элементаinline-blockinline-table35Режимы отображения применяют в том числе для отображения блоков кактаблиц:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en-US"><head><title>table using divs</title><style type="text/css">.div-table{display:table; border:1px solid #003399;}.div-table-caption{display:table-caption; background:#009999;}.div-table-row{display:table-row;}.div-table-col{display:table-cell; padding: 5px; border: 1px solid #003399;}</style></head><body><div class="div-table"><div class="div-table-caption">This is a caption</div><div class="div-table-row"><div class="div-table-col">1st Column</div><div class="div-table-col">2nd Column</div></div></div><a href="http://linuxandfriends.com/2009/04/04/how-to-style-div-elements-astables/">See source...</a></body></html>При этом отметим, что формирование табличного представления блоковвозможно и средствами позиционирования без использования специальныхзначений свойства display.Макеты.
Размещение элементов по колонкам, замена фреймов и таблицС использованием CSS возможно размещение элементов в любом порядке, втом числе соответствующем табличному представлению, но без использованиятаблиц.Существуют генераторы HTML+CSS шаблонов, напримерhttp://csstemplater.com/.
Однако заметим, что аналогичную работу можнопроделать самостоятельно или с использованием собственных шаблонов. Нижеприводится пример генерации шаблона http://csstemplater.com/.* {margin: 0;padding: 0;}html {height: 100%;}body {font: 12px/18px Arial, Tahoma, Verdana, sans-serif;width: 100%;height: 100%;}a {color: blue;outline: none;text-decoration: underline;36}a:hover {text-decoration: none;}p {margin: 0 0 18px}img {border: none;}input {vertical-align: middle;}#wrapper {width: 1000px;margin: 0 auto;min-height: 100%;height: auto !important;height: 100%;}/* Header --------------------------------------------------------------------*/#header {height: 150px;background: #FFE680;}/* Middle --------------------------------------------------------------------*/#middle {width: 100%;padding: 0 0 100px;height: 1%;position: relative;}#middle:after {content: '.';display: block;clear: both;visibility: hidden;height: 0;}#container {width: 100%;float: left;overflow: hidden;}#content {padding: 0 520px 0 0;}/* Sidebar Left --------------------------------------------------------------*/#sideLeft {float: left;margin-left: -500px;width: 250px;position: relative;background: #B5E3FF;}37/* Sidebar Right -------------------------------------------------------------*/#sideRight {float: left;margin-left: -250px;margin-right: -3px;width: 250px;position: relative;background: #FFACAA;}/* Footer --------------------------------------------------------------------*/#footer {width: 1000px;margin: -100px auto 0;height: 100px;background: #BFF08E;}---------------<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title></title><meta name="title" content="" /><meta name="keywords" content="" /><meta name="description" content="" /><link rel="stylesheet" href="style.css" type="text/css" media="screen,projection" /></head><body><div id="wrapper"><div id="header"><strong>Header:</strong> Text.</div><!-- #header--><div id="middle"><div id="container"><div id="content"><strong>Content:</strong> Text</div><!-- #content--></div><!-- #container--><div class="sidebar" id="sideLeft"><strong>Left Sidebar:</strong> Text.</div><!-- .sidebar#sideLeft --><div class="sidebar" id="sideRight"><strong>Right Sidebar:</strong> Text.</div><!-- .sidebar#sideRight -->38</div><!-- #middle--></div><!-- #wrapper --><div id="footer"><strong>Footer:</strong> Text.</div><!-- #footer --></body></html>Результат представлен на рисунке 8.Рисунок 12 Пример отображения страницы с блокамиОтладка CSS в браузере FirefoxВсе современные браузеры предоставляют средства для просмотра разметкиHTML, CSS и визуальной отладки таблиц стилей.
