Мегаобучалка Главная | О нас | Обратная связь  


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




Раздел 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>

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

</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>……...сюда следует вставить произвольную страницу текста, с целью обеспечения появления полосы прокрутки, иначе эффект будет не виден!!!!!....

</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 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;

}




Читайте также:
Личность ребенка как объект и субъект в образовательной технологии: В настоящее время в России идет становление новой системы образования, ориентированного на вхождение...
Почему люди поддаются рекламе?: Только не надо искать ответы в качестве или количестве рекламы...
Как распознать напряжение: Говоря о мышечном напряжении, мы в первую очередь имеем в виду мускулы, прикрепленные к костям ...



©2015-2020 megaobuchalka.ru Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. (401)

Почему 1285321 студент выбрали МегаОбучалку...

Система поиска информации

Мобильная версия сайта

Удобная навигация

Нет шокирующей рекламы



(0.005 сек.)