КАТЕГОРИИ:
АстрономияБиологияГеографияДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРиторикаСоциологияСпортСтроительствоТехнологияФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника
|
Значения. Left - Выравнивает элемент по левому краю, а все остальные элементы, вроде текста, обтекают его по правой стороне.Left - Выравнивает элемент по левому краю, а все остальные элементы, вроде текста, обтекают его по правой стороне. Right - Выравнивает элемент по правому краю, а все остальные элементы обтекают его по левой стороне. None - Обтекание элемента не задается. Inherit - Наследует значение родителя. Пример. <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>float</title> <style> .layer1 { float: left; /* Обтекание по правому краю */ background: #fd0; /* Цвет фона */ border: 1px solid black; /* Параметры рамки */ padding: 10px; /* Поля вокруг текста */ margin-right: 20px; /* Отступ справа */ width: 40%; /* Ширина блока */ } </style> </head> <body> <div class="layer1"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. </div> <div> Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi. </div> </body></html>
31) Таблица – это способ представления информации в виде распределенных по строкам и столбцам данных. На пересечении строки и столбца находится ячейка.
Создавать таблицы в HTML совсем несложно, однако это занятие требует некоторого предварительного планирования. В кодах HTML все таблицы начинаются тегом <table> и оканчиваются тегом </table>. Этот тег обозначает начало и окончание таблицы. Все содержание таблицы должно заключаться внутри этих тегов. Между этими двумя тегами могут присутствовать в разных сочетаниях три других тега:
<tr> – который определяет горизонтальную строку
Не забывайте о том, что браузеры игнорируют любые добавляемые в документ HTML пробелы, символы табуляции и пустые строки. Таким образом, вы можете смело использовать это для более удобного распределения тегов таблицы внутри документа. Так, в коде, представленном ниже, благодаря использованию дополнительных пробелов в кодах HTML документа легко обнаружить значения, отображаемые в ячейках таблицы (этот же прием поможет вам проследить за наличием всех необходимых тегов).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru"> <head> <title>Простая таблица</title> <style type="text/css"> </style> </head>
<body> <table> <tr><th>Столбец 1</th><th>Столбец 2</th></tr> <tr><td>Строка 2</td><td>Строка 2</td></tr> <tr><td>Строка 3</td><td>Строка 3</td></tr> </table> </body> </html>
Форматирование таблиц
align – Выравнивание содержимого ячейки по горизонтали; возможные значения: left (по умолчанию), right, center и char. Применяется ко всем тегам.
Ниже представлен HTML код таблицы, к которой применяется форматирование.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru"> <head> <title>Моя новая HTML таблица</title> <style type="text/css"> th { background-color:lightblue; color:red; font-family:Arial } td { color:blue; font-family:Times New Roman } </style> </head>
<body> <table width="50%" border="1" rules="all"> <tr><th>Столбец 1</th><th>Столбец 2</th></tr> <tr><td align="center">Строка 2</td><td align="center">Строка 2</td></tr> <tr><td align="center">Строка 3</td><td align="center">Строка 3</td></tr> </table> </body> </html>
Более сложные таблицы
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru"> <head> <title>Моя новая HTML таблица</title> <style type="text/css"> th { background-color:lightblue; color:red; font-family:Arial } td { color:blue; font-family:Times New Roman } </style> </head>
<body> <table width="100%" border="1" rules="all"> <tr><th colspan="2">Столбец 1 и Столбец 2 объединены</th></tr> <tr><td align="center">Строка 2</td> <td rowspan="2">Строка 2 и 3 объединены</td></tr> <tr><td align="center">Строка 3</td></tr> </table> </body> </html>
32) При создании сложной формы не обойтись без визуального отделения одного логического блока от другого. Этого можно добиться, используя внутри тега<FORM> сочетания тегов и стилей. Например, элементы формы можно выделить, если использовать для них фоновый цвет или рамку, задавая их через CSS. Кроме того, существует и другой подход, который состоит в применении тега <FIELDSET>. Этот контейнер группирует элементы формы, отображая вокруг них рамку (пример 16.1). Пример 16.1. Использование тега <FIELDSET> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Fieldset</title> </head> <body> <form action="handler.php"> <fieldset> <legend>Работа со временем</legend> <input type="checkbox" value="t1"> Создание пунктуальности (никогда не будете никуда опаздывать).<br> <input type="checkbox" value="t2"> Излечение от пунктуальности (никогда никуда не будете торопиться).<br> <input type="checkbox" value="t3"> Изменение восприятия времени. </fieldset> </form> </body> </html> Результат выполнения данного примера показан ниже. Начало формы Работа со временем Создание пунктуальности (никогда не будете никуда опаздывать). Конец формы Чтобы добавить к рамке специальный заголовок применяется контейнер<LEGEND>, который должен располагаться в теге <FIELDSET>. Внутри тега<LEGEND> допустимо использовать текст и теги форматирования, вроде <B>,<I>, <SUP>, <SUB>, а также стили (пример 16.2). Пример 16.2. Использование тега <LEGEND> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Legend</title> </head> <body> <form action="handler.php"> <fieldset> <legend style="font-weight: bold">Изменение убеждений</legend> <input type="checkbox" value="t1"> Изменение религиозной веры (на выбор: буддизм, конфуцианство, индуизм).<br> <input type="checkbox" value="t2"> Изменение веры в непогрешимость любимой партии.<br> <input type="checkbox" value="t3"> Убеждение в том, что инопланетяне существуют.<br> <input type="checkbox" value="t4"> Выбор политического строя, как самого лучшего в своем роде (на выбор: феодализм, социализм, коммунизм, капитализм).<br> <input type="checkbox" value="t5"> Повышение веры в собственные способности.<br> </fieldset> </form> </body> </html> Любые пробелы в теге <LEGEND> будут проигнорированы, если вы желаете их непременно добавить, используйте символ неразделяемого пробела .
33) Плавающими будем называть такие элементы, которые обтекаются по контуру другими объектами веб-страницы, например, текстом. Следует понимать, что никто и нигде не плавает, поэтому правильнее говорить «обтекаемые элементы», но с другой стороны термин «плавающий элемент» давно уже прижился, так что его и будем использовать в дальнейшем. Плавающие элементы достаточно активно применяются при верстке и в основном служат для воплощения следующих задач.
Все это выполняет одно стилевое свойство float, а помогают ему в этом другие свойства. Хотя первоначально float не планировался на столь универсальную роль, но жизненные реалии расставили все по своим местам. Обтекание картинок текстом Есть разные способы, как объединять воедино текст и рисунки к нему. Обычно картинка выравнивается по левому или правому краю, а текст обтекает ее по контуру (рис. 1). Рис. 1. Обтекание фотографий текстом Для подобного форматирования используется атрибут align тега <img> со значением left илиright. Чтобы создать промежуток между символами и краем изображения к тегу <img> также добавляется атрибут hspace для горизонтального отступа и vspace для вертикального (пример 1).
|