Установка ширины блока[width]
Свойством width вы можете определять ширину элемента.
В примере показан бокс для ввода текста:
Задание 11.4
Default11_4.htm:
<html>
<head>
<title>Лабораторная №6</title>
<link rel="stylesheet" type="text/css" href="style11_4.css" />
</head>
<body>
<h1>Моя первая таблица стилей</h1>
<div class=box>……Каскадные таблицы стилей или CSS (от английского Cascading Style Sheets) являются следствием дальнейшего развития HTML и дают нам возможность перейти на следующий уровень представления информации. Таблицы стилей позволяют разделить смысловое содержимое странички и его оформление.
</p>
<h2> Заголовок2</h2>
</body></html>
Style11_4.css:
div.box {
width: 200px;
border: 1px solid black;
background: orange;
}
Установка высоты блока[height]
Задание 11.5
Default11_5.htm:
<html>
<head>
<title>Лабораторная №6</title>
<link rel="stylesheet" type="text/css" href="style11_5.css" />
</head>
<body>
<h1>Моя первая таблица стилей</h1>
<div class=box>……Каскадные таблицы стилей или CSS (от английского Cascading Style Sheets) являются следствием дальнейшего развития HTML и дают нам возможность перейти на следующий уровень представления информации. Таблицы стилей позволяют разделить смысловое содержимое странички и его оформление.
</div>
<h2> Заголовок2</h2>
</body></html>
Style11_5.css:
div.box {
height: 500px;
width: 200px;
border: 1px solid black;
background: orange;
}
Размещение элементов на странице
Всплывающие элементы (поплавки)
Свойство float
Может иметь значения left, right или none.
Элемент может "всплывать" вправо или влево с помощью свойства float. То есть бокс с его содержимым может всплывать вправо или влево в окне документа (или содержащего бокса). Принципы показаны на рисунке:
Если мы, например, хотим, чтобы текст окружал рисунок, то результат должен быть таким:
Задание 11_6
Пример 11_6.htm:
<html>
<head>
<title>Пример11_6</title>
<link rel="stylesheet" type="text/css" href="style11_6.css" />
</head>
<body>
<h1>МГТУ — университет больших перспектив!</h1>
<div id="picture">
<img src="01-small.jpg" alt="МГТУ">
</div>
<p>
{сюда вставить первый абзац текста со страницы http://www.mstu.edu.ru/abit/big_perspectives.shtml}
</p>
<p>
{сюда вставить второй абзац текста со страницы http://www.mstu.edu.ru/abit/big_perspectives.shtml}
</p>
</body>
</html>
Чтобы рисунок всплывал влево, а текст окружал его, вы должны определить ширину бокса, окружающего рисунок, и установить в свойстве float значение left:
Style11_6.css:
#picture {
float:left;
width:200px;
}
Заполнение элемента Поплавки/Floats можно использовать для вывода колонок в документе. Для этого вы должны просто определить необходимые колонки в HTML-коде тэгами <div> таким образом:
Задание 11_7
Пример11_7.htm:
<html>
<head>
<title>Пример11_7</title>
<link rel="stylesheet" type="text/css" href="style11_7.css" />
</head>
<body>
<h1>МГТУ — университет больших перспектив!</h1>
<div id="column1">
<p>{сюда вставить первый абзац текста со страницы http://www.mstu.edu.ru/abit/big_perspectives.shtml}
</p>
</div>
<div id="column2">
<p>{сюда вставить второй абзац текста со страницы http://www.mstu.edu.ru/abit/big_perspectives.shtml}
</p>
</div>
<div id="column3">
<p>{сюда вставить третий абзац текста со страницы http://www.mstu.edu.ru/abit/big_perspectives.shtml}
</p>
</div>
</body>
</html>
Style11_7.css:
#column1 {
float:left;
width: 33%;
}
#column2 {
float:left;
width: 33%;
}
#column3 {
float:left;
width: 33%;
}