Порядок выполнения работы. Раздел 1. Боксовая модель

2015-12-15

458

Обсуждений (0)

0.00 из 5.00 0 оценок

⇐ Предыдущая 13 14 15 16 17 18 192021 22 Следующая ⇒

Раздел 1. Боксовая модель

Боксовая модель в CSS описывает боксы, генерируемые для HTML-элементов. Боксовая модель также имеет детальные опции для определения полей, рамок, заполнения и содержимого каждого элемента. На диаграмме далее показано, как построена боксовая модель:

Боксовая модель в CSS

Поля и заполнение

У элемента есть четыре стороны: right, left, top и bottom. Поля margin это расстояние от каждой стороны с до соседних элементов (или краёв документа).

В качестве первого примера рассмотрим, как определить поля самогó документа, т. е. элемента <body>. На иллюстрации показано, какие поля нам нужны.

Задание 11.1

Default11_1.htm

<html>

<head>

<title>Лабораторная №6</title>

<link rel="stylesheet" type="text/css" href="style11_1.css" />

</head>

<body>

<h1>Моя первая таблица стилей</h1>

<p>……...сюда следует вставить произвольную страницу текста, с целью обеспечения появления полосы прокрутки, иначе эффект будет не виден!!!!!....

</p> </body></html>

Style11_1.css:

body {

margin-top: 100px;

margin-right: 40px;

margin-bottom: 10px;

margin-left: 70px;

}

Содержимое файла Style11_1.css можно представить следующим образом:

body {

margin: 100px 40px 10px 70px;

}

Вы можете установить поля примерно таким же образом почти для любого элемента. Например, мы можем определить поля для всех параграфов <p>:

Style11_1.css:

body {

margin: 100px 40px 10px 70px;

}

p {

margin: 5px 50px 5px 50px;

}

Примените данную таблицу стилей к файлу Default11_1.htm и посмотрите результат.

Заполнение элемента

Заполнение не влияет на расстояние элемента до других элементов, а лишь определяет внутреннее расстояние между рамкой и содержимым элемента.

Использование заполнения padding можно показать на простом примере, где все заголовки имеют цветной фон:

Задание 11.2

Можно воспользоваться файлом из предыдущего примера, сохранив его под другим именем и добавив в конце заголовок второго уровня.

Default11_2.htm:

<html>

<head>

<title>Лабораторная №6</title>

</head>

<body>

<h1>Моя первая таблица стилей</h1>

<p>……... сюда следует вставить произвольную страницу текста, с целью обеспечения появления полосы прокрутки, иначе эффект будет не виден!!!!!....

</p>

<h2> Заголовок2</h2>

</body></html>

Style11_2.css:

h1 {

background: yellow;

}

h2 {

background: orange;

}

Определяя заполнение для заголовков, установите величину поля вокруг текста каждого заголовка следующим образом:

Style11_2.css:

h1 {

background: yellow;

padding: 20px 20px 20px 80px;

}

h2 {

background: orange;

padding-left:120px;

}

Посмотрите результат.

Рамки

Рамки имеют многообразное применение, например, как декоративный элемент или для отделения двух объектов. CSS предоставляет бесчисленное множество вариантов использования рамок. Для определения рамок используются следующие свойства

border-width
border-color
border-style

Толщина рамки [border-width]

Толщина рамки определяется свойством border-width, которое может иметь значения thin, medium и thick, или числовое значение в пикселах. На рисунке показана эта система:

Цвет рамки [border-color]

Свойство border-color определяет цвет рамки. Значения - нормальные значения цвета, например: "#123456", "rgb(123,123,123)" или "yellow" .

Типы рамок [border-style]

Существуют различные типы рамок. Ниже показаны восемь типов рамки

Значения none или hidden могут использоваться, если вы не хотите отображать рамку.

Задание 11.3

Default11_3.htm:

<html>

<head>

<title> Лабораторная №6</title>

<link rel="stylesheet" type="text/css" href="style11_3.css" />

</head>

<body>

<h1>Моя первая таблица стилей</h1>

</p>

<h2> Заголовок2</h2>

</body></html>

<p>Кто рано ложится и рано встаёт,
тот будет здоровым, богатым и умным</p>

</body>

</html>

Style11_3.css:

h1 {

border-width: thick;

border-style: dotted;

border-color: gold;

}

h2 {

border-width: 20px;

border-style: outset;

border-color: red;

}

p {

border-width: 1px;

border-style: dashed;

border-color: blue;

}

Можно также установить специальные свойства для верхнего, нижнего, правого и левого края рамки. Вот как это делается:

h1 {

border-top-width: thick;

border-top-style: solid;

border-top-color: red;

border-bottom-width: thick;

border-bottom-style: solid;

border-bottom-color: blue;

border-right-width: thick;

border-right-style: solid;

border-right-color: green;

border-left-width: thick;

border-left-style: solid;

border-left-color: orange;

}

Измените содержание файла style11_3.css в отношении заголовка первого уровня и посмотрите результат.

Как и для многих других свойств, вы можете объединить несколько свойств в одно, используя слово border.

Пример:

p {

border-width: 1px;

border-style: solid;

border-color: blue;

}

можно объединить в:

p {

border: 1px solid blue;

}

1.2. Установка ширины блока[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;

}

1.3. Установка высоты блока[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>

<h2> Заголовок2</h2>

</body></html>

Style11_5.css:

div.box {

height: 500px;

width: 200px;

border: 1px solid black;

background: orange;

}

2015-12-15

458

Обсуждений (0)

0.00 из 5.00 0 оценок

⇐ Предыдущая 13 14 15 16 17 18 192021 22 Следующая ⇒

Обсуждение в статье: Порядок выполнения работы. Раздел 1. Боксовая модель

Обсуждений еще не было, будьте первым... ↓↓↓