Создание границ. Создание двух окон с текстом и с цветным фоном.

Чтобы создать рамку вокруг какого -то элемента (например, заключить текстовый абзац в цветную рамку), можно использовать атрибуты style.

Свойства границ, задаваемые атрибутом style.

 

Свойство границ	Описание	Значение свойства
border-style	Задает стиль линии границ	Дополняется значениями none(нет границ), solid (узкая сплошная линия) и double (двойная линия).
border-color	Задает цвет границ элемента	Для значений используются названия цвета
border-width	Задает толщину линий границ элемента	Дополняется значениями undefined (произвольная) с указанием толщины в пикселях либо thin (тонкая) или thick(толстая).
border-top-width	Задает толщину верхней границы	Значение -medium (средняя) с указанием толщины в пикселях либо thin или thick.
border-bottom-width	Задает толщину нижней границы.	Значение -medium с указанием толщины в пикселях либо thin или thick.
border-left-width	Задает толщину левой границы	Medium с указанием толщины в пикселях либо thin или thick.
border-right-width	Задает толщину правой границы.	Medium с указанием толщины в пикселях либо thin или thick.
margin-top	Задает размер верхнего поля	Указывается величина в пикселях.
margin-bottom	Задает размер нижнего поля	Указывается величина в пикселях
margin-left	Задает размер левого поля	Указывается величина в пикселях
margin-right	Задает размер правого поля	Указывается величина в пикселях
padding-top	Задает величину пробела от верхнего края.	Указывается величина в пикселях
padding-bottom	Задает величину пробела от нижнего края.	Указывается величина в пикселях.
padding-left	Задает величину от левого края.	Указывается величина в пикселях.
padding-right	Задает величину от правого края.	Указывается величина в пикселях.

 

Под термином «границы полей» (margin) подразумевается отступ от границы рамки до края страницы либо до другого, внешнего элемента. Под термином «пробел или отступ» (padding)подразумевается пространство между границей рамки и внутренним элементом т.е. текстом.

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

<p style=»border-style:solid; border-color:purple; border-width:thick; width:300; height:100; float:left; margin-left:10; margin-right:10; margin-bottom:10; padding-top:10; padding-left:10; padding-right:10; background-color:blue; color: white»> <i> Прогноз       погоды   </i> </p>

<p style=»border-style:solid; border-color:olive; border-width:thick; width:800; height:100; float:right;  margin-top:10; margin-bottom:10; padding-left:10; font-weight; background-color:yellow; color: red»><i> Хотите всегда быть одетым по погоде?  Только у нас, самые точные сведения!</i> </p>    
 Вот что у нас получилось.

Прогноз погоды
Всегда правдивый!

Хотите всегда быть одетым по погоде?
Только у нас, самые точные сведения!

  
 
 

Фотосъёмка Свадеб Love-story

Ведение бухгалтерского учета Бухгалтерский учёт

Сайт о еде. Основы питания Основы здоровой пищи.

 

Сайт о еде. Основы питания Основы здоровой пищи.

Подготовим документы из судебного дела Ознакомление дел в суде

Ведение бухгалтерского учета Бухгалтерский учёт