Рамки css: Как сделать рамку? CSS-свойство border

CSS-рамка

CSS-рамка является неотъемлемым и очень важным визуальным компонентом как блоковых, так и инлайновых html-тегов. Рамка бывает 2-ух видов: border и outline. Каждая из них имеет свое стилистическое определение.

Согласно стилевому оформлению бордер характеризуется тремя величинами: толщиной, стилем и цветностью.

Навигация

• 1. Стиль рамки border-style
• 2. Цвет рамки border-color
• 3. Ширина рамки border-width
• 4. Рамка одной строкой
• 5. Внешний контур outline
• 5.1. Стиль внешнего контура outline-style
• 5.2. Цвет внешнего контура outline-color
• 5.3. Толщина внешнего контура outline-width

Вернуться к навигации

1. Стиль рамки border-style

Данное правило отвечает за стиль визуального отображения бордера некоторого html-элемента. Следует отметить, что, если не задать рассматриваемое правило, то граница не будет видна, поскольку в дефолтном состоянии оно равно none (переводится, как «нет»).

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

border-style
Значения:
none	Указание данного параметра приведет к выключению стилей бордера текущего элемента верстки. Является дефолтным значением.
hidden	Похоже на предыдущее. Но по смыслу означает визуальное скрытие свойства.
dotted	отображение границы, по периметру которой расположено множество точек.
dashed	Задав такой параметр, бордер примет очертание штриховой линии.
solid	На вид — это сплошная однотонная черта.
double	На вид — это две параллельные тонкие линии (двойная).
groove	В виде вогнутого жёлоба.
ridge	В виде выступающей лицом к пользователю линии.
inset	Слева и сверху — темный оттенок, а справа и снизу — светлый.
outset	Также, как предыдущее, но наоборот.
initial	Будет установлено в дефолтное значение.
inherit	Задав так, текущий объект унаследует данное свойство у своего родителя.

Формат записи

p
{
	border-style: double;
}

Для установки нужного стилистического определения у частей границ, расположенных сверху, справа, снизу или слева, нужно прописать css-правила border-top-style, border-right-style,

border-bottom-style, border-left-style (соответственно):

p
{
	border-left-style: solid;
}

Если для каждой из четырех частей бордера нужно присвоить каждой свой стиль, то следует прописать css-код так:

div
{
	border-style: solid double dotted dashed;
}

Вернуться к навигации

2.

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

Это цсс-правило дает возможность присвоить границе некоторого html-тэга нужный цвет c каждой из 4-х сторон: сверху, справа, снизу и слева. Есть возможность присвоить цвет какой-то конкретной части бордера — для этого применяются специальные подправила. Если данный параметр не установлен, то цветность границы будет равна цветности текста самого тэга. Является не наследуемым правилом.

border-color
Значения:
transparent	Переводится, как «прозрачный» или «невидимый». То есть по сути граница есть, но она бесцветная. Является дефолтным значением.
цвет	Цвет бордера задается одним из кодов: HEX, RGB или RGBA. Например, у этого бордера такой: {border-color: #84cd1b;}
initial	Установив такой параметр, правило будет установлено в дефолтное значение.
inherit	При таком параметре рассматриваемое свойство у текущего html-блока наследуется от родителя.

Формат записи

div
{
	border-color: #84cd1b;
}

При необходимости управлять какой-то конкретной частью рамки хтмл-тэга (верхней, правой, нижней или левой), то для этого есть возможность указать правила (соответственно): border-top-color, border-right-color, border-bottom-color, border-left-color

:

div
{
	border-top-color: #84cd1b;
}

Если возникла необходимость задать свой цвет для каждой из частей бордера, то нужно записать css-правило следующим образом (соблюдая очередность границ: сверху, справа, снизу и слева):

div
{
	border-color: #84cd1b #1E824C #ff8073 #f1c40f;
}

Вернуться к навигации

3. Ширина рамки border-width

Рассматриваемое правило позволяет задать толщину границы хтмл-тэга. Необходимо отметить, что если стиль границы не будет задан, то она отображаться не будет.

border-width
Значения:
thin / medium / thick	Данные акронимы являются закрепленными мерами измерения ширины рамки в браузерах: thin — тонкая, medium — средняя, thick — толстая. Дефолтным значением является — medium
ширина	Помимо встроенных акронимов существует возможность задания толщины бордера с помощью единиц измерения: пикселей (px), процентов, относительных единиц (em) и так далее. Например, у этого тега «p» толщина бордера такая: {border-width: 3px;}
initial	Будет установлено в дефолтное значение.
inherit	При задании такого параметра будет происходить наследование правила от родителя.

Формат записи

p
{
	border-width: 6px;
}

Для установки нужной толщины у частей границы, расположенных сверху, справа, снизу или слева, нужно прописать css-правила: border-top-width, border-right-width, border-bottom-width, border-left-width:

p
{
	border-top-width: 6px;
}

Если нужно для каждой части границы задать свою толщину, то можно записать вот так:

p
{
	border-width: 6px 2px 1px 3px;
}

Вернуться к навигации

4.

 Рамка одной строкой

Помимо записи отдельных частей стилей бордера существует также возможность их записи в одну строчку, что позволит оптимизировать css-код. Однако, такое задание применяется сразу ко всем четырем сторонам границы. Также следует помнить про очередность записи: толщина (ширина), стиль границы и ее цвет.

div
{
	border: 3px solid #84cd1b;
}

Если один из параметров границы присвоен не будет, то он принимает дефолтное значение (смотрите таблицы значений выше).

По аналогии с записью стиля для конкретных частей границы их также можно описать одной строкой:

a
{
	border-bottom: 3px solid #84cd1b;
}

Вернуться к навигации

5. Внешний контур outline

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

Чаще всего применяется для обозначения активности или выделения фокуса на hml-блоке: ссылке (<a>), кнопке формы (<button>, <input>). Следует отметить, что на аутлайн не оказывает влияния свойство скругления углов border-radius, то есть она в любом случае будет иметь девяностоградусные углы.

Как и бордер, характеризуется тремя величинами: стилем, цветом и толщиной.

Вернуться к навигации

5.1. Стиль внешнего контура outline-style

Аналогично пункту 1 (выше) задает оформление внешнего аутлайна некоторого блокового или инлайнового элемента. Также, как и бордер, является не наследуемым.

outline-style
Значения:
none	Установка данного параметра приведет к выключению стилей границ (аутлайна) текущего html-блока. Является дефолтным значением.
hidden	Похоже на предыдущее. Но по смыслу означает визуальное скрытие свойства.
dotted	отображение внешней границы в виде точек.
dashed	Задав так, аутлайн будет представлять собой штриховую линию.
solid	В виде сплошной однотонной линии.
double	Аутлайн представляет из себя две параллельны тонкие линии.
groove	В виде вогнутого жёлоба.
ridge	В виде выступающей лицом к пользователю линии.
inset	Слева и сверху — темный оттенок, а справа и снизу — светлый.
outset	Также, как предыдущее, но наоборот.
initial	Будет установлено в дефолтное значение.
inherit	При таком значении рассматриваемое свойство будет унаследовано от родителя.

Формат записи

p
{
	outline-style: double;
}

Вернуться к навигации

5.2. Цвет внешнего контура outline-color

Данное правило упрвляет цветностью внешней рамки. Работает вкупе с предыдущим правилом.  Является не наследуемым.

outline-color
Значения:
invert	Переводится, как «инвертировать». Выделяет контур . Является дефолтным значением.
цвет	Цвет аутлайн задается одним из кодов: HEX, RGB или RGBA. Например, у этой рамки следующий: {outline-color: #84cd1b;}
initial	Установив такой параметр, правило будет установлено в дефолтное значение.
inherit	При таком параметре рассматриваемое свойство у текущего html-блока наследуется от родителя.

Формат записи

p
{
	outline-color: #84cd1b;
}

Вернуться к навигации

5.

3. Толщина внешнего контура outline-width

Позволяет задать толщину контура в разных единицах измерения. Также является не наследуемым правилом.

outline-width
Значения:
thin / medium / thick	Данные акронимы — это закрепленные меры измерения толщины рамки в браузерах: thin — утонченное начертание; medium — более крупное по сравнению с предыдущим, но меньше следующего; thick — толстая. Дефолтным значением является — medium
ширина	Помимо встроенных акронимов существует возможность указания толщины внешнего контура с помощью единиц измерения: пикселей (px), процентов, относительных единиц (em) и так далее. Например, у этого блока толщина контура следующая: {outline-width: 3px;}
initial	Будет установлено в дефолтное значение.
inherit	При таком значении рассматриваемое свойство будет унаследовано от родителя.

Формат записи

p
{
	outline-width: 4px;
}

Аналогично бордеру есть возможность задания данного правила одной строчкой. Формат написания будет точно таким же, за исключением названия самого свойства.

По результатом изучения этого материала станет более полное представление о возможностях линий границы и какое влияние они оказывают на позиционирование блока элемента относительно других на странице документа. Данная глава является очень важным «кусочком пазла» в общей «мозаике» фронтенд-разработки (верстки) сайтов.

Метки: Метки: CSS

Рамки в CSS и основы блочного моделирования

Последние:

Оглавление:

• Рамки в CSS
• БЛОЧНАЯ МОДЕЛЬ (ВАЖНО!)

Здравствуйте, уважаемые читатели сайта Uspei.com. На прошлом уроке мы успели поработать с текстом и декорировали его. Следующее свойство, которое нам дает CSS это рамки и блоки. Они очень часто используются при создании и редактировании сайтов, поэтому разберите это урок очень внимательно, и обязательно дополнительно потренируйтесь.

К оглавлению ↑

Рамки в CSS

Например, нам необходима рамка вокруг нашего заголовка Н1 с идентификатором id=”header”.

Рамка состоит из 3-х элементов: толщины, стиля и цвета. Давайте по порядку, для начала пропишем толщину:

#header{
 border-width: 2px;
 }

После чего нам нужно прописать стиль рамки, которые бывают следующими:

Давайте выберем сплошную рамку “solid” и пропишем ее в свойства.

#header{
 border-width: 2px;
 border-style: solid;
 }

И последним пропишем цвет (произвольный):

#header{
 border-width: 2px;
 border-style: solid;
 border-color: #faa21a;
 }

Обновляем браузер и вуаля!

И теперь, как мы помним, можно сократить нашу запись и сделать ее немного красивее. Мы убираем виды свойства width, style и color, после чего указываем в таком же порядке в строчку значения всех свойств для общего “border”.

#header{
 border: 2px solid #faa21a;
 }

К оглавлению ↑

БЛОЧНАЯ МОДЕЛЬ (ВАЖНО!)

Обратите внимание, что рамка у нас очерчивает не только сам текст, но занимает все свободное пространство, что дает ей браузер. В высоту наша рамка занимает пространство, равное высоте текста. На самом деле для браузера каждый элемент это своего рода блок, который занимает ВСЮ ширину строки. Вот как отражает браузер несколько элементов, если им также задать рамки.

То есть браузер разбивает все на блоки, которые имеют свою структуру:

В центре блока находится содержимое (текст, картинка, таблица и т.д.) далее идет внутренний отступ “padding”, затем сама рамка “border”, потом внешний отступ или поле “margin”. Величину “padding” и “margin” браузер изначально задает по умолчанию и она зависит от вида браузера (обычно несколько пикселей) и их значения можно менять как в большую сторону так и в меньшую. Обратите внимание, что текст в данном уроке не вплотную прилипает к краю, а имеется некоторый зазор – это расстояние сформировано за счет внутреннего и внешнего отступов “padding” и “margin” текста и самого блока.

Например, давайте зададим величину внутреннего отступа “padding” нашему заголовку h2 с id=”header” в 40 px.

#header{
 border: 2px solid #faa21a;
 padding: 40px;
 }

Мы видим, что внутренний отступ (фиолетовая часть) увеличился на 40px со всех сторон. Внешний отступ (желтая часть) мы пока не изменяли, поэтому он стоит по умолчанию установленному браузером. Теперь давайте уберем внешний отступ (а можно и увеличить – попробуйте!)

#header{
 border: 2px solid #faa21a;
 padding: 40px;
 margin: 0;
 }

Но на этом еще не все. Внешний и внутренний отступ можно задавать как сразу, например, для всего “padding”, так и для верха, низа, слева и справа. Аналогично и для “margin”. Напомню: top это верх, bottom это низ, left – лево, right – право. Например:

#header{
 border: 2px solid #faa21a;
 padding-left: 40px;
 margin: 0;
 }

#header{
 border: 2px solid #faa21a;
 padding-top: 40px;
 margin: 0;
 }

Таким образом можно менять внутренние и внешние отступы сверху снизу справа и слева, что ОЧЕНЬ часто используется в CSS.

Свидетельство о регистрации СМИ в РКН: ЭЛ № ФС77-83818 от 29.08.2022

— РЕКЛАМА —

— РЕКЛАМА —

Сейчас:

— РЕКЛАМА —

— РЕКЛАМА —

фреймов CSS | 456 Berea Street

Background

Одним из аргументов в пользу использования фреймов всегда было то, что они позволяют вам постоянно держать части макета на экране. Это можно эмулировать с помощью CSS, как описано здесь. Это приводит к гораздо лучшему удобству использования, чем обычные фреймы, но все еще есть некоторые потенциальные проблемы, о которых вам нужно знать. Для более подробного обсуждения фреймов и удобства использования прочитайте мою статью «Кто создал сеть: фреймы и удобство использования».

Обновление (2006-09)-05): Существует обновленная версия этой техники, описанная в CSS Frames v2, полная высота.

Как это работает?

Документ состоит из трех основных блоков: headerwrap, middlewrap и footerwrap. headerwrap и footerwrap имеют фиксированные позиции; headerwrap вверху и footerwrap внизу области просмотра. middlewrap имеет padding-top и padding-bottom , чтобы соответствовать высоте headerwrap и footerwrap.

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

Просмотр исходного кода на этой странице для просмотра HTML и CSS.

Вот и все. Нааа, шучу. Конечно, необходимо учитывать некоторые ошибки и странности браузера. Самая большая проблема заключается в том, что IE/Win не поддерживает position:fixed. Чтобы обойти это, я использую условные комментарии для загрузки дополнительной таблицы стилей, если используется браузер IE6:

 html {
    переполнение: скрыто;
}
тело {
    высота:100%;
    переполнение:авто;
} 

Из того, что мне удалось найти, это не будет работать в старых версиях IE. Есть хаки JavaScript, которые можно использовать, но я думаю, что лучше держать код в чистоте.

В браузерах, не поддерживающих position:fixed будет прокручиваться вся страница, что для меня вполне приемлемо. Для этого сначала задайте для заголовка и нижнего колонтитула значение position:absolute, а затем используйте дочерний селектор для отправки position:fixed только тем браузерам, которые могут его обработать.

Я проверил этот метод и обнаружил, что он работает в следующих браузерах:

• Mozilla 1. 4+/Mac OS X
• Mozilla Firebird 0.61/Win
• Safari 1.0/Mac OS X
• IE6/Win
• IE5.2/Mac OS X
• OmniWeb 4.5/Mac OS X
• Опера 7.11/Win

В браузерах Netscape 4 и IE5/Win прокручивается вся страница, а не только ее средняя часть.

Этот пример вдохновлен фиксированными боковыми панелями Саймона Джесси и position:fixed Эрика Беднарца; исправлено для IE5(+)/win.

---

Донец содалес конструктор нунк. Энейский nec augue. Curabitur commodo, felis at tristique venenatis, nunc pede luctus risus, quis eleifend tellus Маурис Эу Нисл. Vivamus varius dictum Tellus. Нам орнаре сем орнаре просто Praesent eget magna ut Erat ullamcorper adipiscing. Приостановить потенции Донец лорем. Сед в велит. Maecenas molestie pharetra lacus. Донец в велите. In metus tortor, elementum in, porta vitae, posuere eu, гной. Quisque quis est. Nunc odio nibh, aliquam eget, ultrices quis, dignissim сидеть амет, augue. Mauris vitae turpis eget ligula porttitor немумия. Etiam pulvinar bibendum Tellus. Nam nulla nisl, elementum nec, posuere eget, dignissim vel, dolor.

Quisque sit amet nisl в Велит Порта Темпус. Приостановить потенциал. Пеллентский обитатель Морби tristique senectus и др. netus и др. malesuada fames ac turpis egestas. Урна автора Quisque Feugiat. Vivamus tincidunt pede eu tortor dictum сагиттис. Nullam porta ultricies sapien. Proin eleifend, lacus eu ultricies bibendum, Tellus Mauris Lobortis Purus, quis tincidunt dolor lacus eu ante. Duis vulputate dictum lacus. В эрос. Проин диам одио, sollicitudin nec, laoreet non, facilisis ut, arcu. Эт изречение. Фазелл lectus elit, convallis ac, gravida sed, vehicula aliquam, sem. Подвеска элит. В ферментуме. Энейский fermentum iaculis velit. В других странах Расскажи нам. Fusce nec lacus ut turpis tempor semper. Этиам маттис вененатис Лео. Class aptent taciti sociosqu ad litora momentnt per conubia nostra, per inceptos hymenaeos.

Ut in magna. Лорем ипсум dolor sit amet, consectetuer adipiscing elit. Сед адиписсинг. Лорем ipsum dolor sit amet, consectetuer adipiscing elit. Вестибюль Эрат диаметр, gravida ut, aliquam non, interdum faucibus, диам. киск лациния nunc nec neque venenatis cursus. Donec pretium porta ligula. В нибх nibh, sollicitudin quis, euismod at, hendrerit eu, magna. вестибюль molestie enim vitae massa. Integer vel massa ac eros vestibulum venenatis. Фазеллус авгу.

Vestibulum vitae orci. Suspendisse et nisl. Ut consequat suscipit libero. Идентификатор вестибюля либеро. Integer ut enim in sem porta hendrerit. Sed a turpis sed neque бландит моллис. Quisque нон анте. Donec arcu lacus, accumsan ac, идентификатор порта, commodo eget, odio. Curabitur sed nulla id sem mattis пеллентеск. Nullam sucipit accumsan nibh. Вестибулум анте ипсум primis in faucibus orci luctus et ultrices posuere cubilia Curae; Сед велит. Сед элит.

Donec sodales consectetuer nunc. Энейский нек. авгу. Curabitur commodo, felis at tristique venenatis, nunc pede luctus risus, quis eleifend tellus mauris eu nisl. Вивамус вариус изречение теллус. Nam ornare sem ornare justo. Praesent eget magna ut erat ullamcorper adipiscing. Приостановить потенциал. Донец лорем. Сед в велит. Maecenas molestie pharetra lacus. Донец в велите. В Метус Тортор, elementum in, porta vitae, posuere eu, purus. Quisque quis est. Nunc odio nibh, aliquam eget, ultrices quis, dignissim sit amet, augue. Mauris vitae turpis eget ligula porttitor nonummy. Этиам пульвинар бибендум теллус. Nam nulla nisl, elementum nec, posuere eget, dignissim вел, ​​долор.

HTML | Тег — GeeksforGeeks

Улучшить статью

Сохранить статью

• Уровень сложности: Базовый
• Последнее обновление: 17 мар, 2022

Читать

Обсудить

Улучшить статью

Сохранить статью

HTML-фреймы используются для разделения окна веб-браузера на несколько разделов, каждый из которых может быть загружен отдельно. Тег набора фреймов представляет собой набор фреймов в окне браузера.

Создание фреймов: Вместо использования тега body используйте тег frameset в HTML, чтобы использовать фреймы в веб-браузере. Но этот тег устарел в HTML 5. Тег frameset используется для определения того, как разделить браузер. Каждый фрейм обозначается тегом фрейма, и он в основном определяет, какой HTML-документ должен открываться в фрейме. Для определения горизонтальных фреймов используйте атрибут row тега frame в документе HTML, а для определения вертикальных фреймов используйте атрибут col тега frame в документе HTML.

Example:

< html >      < head >          < title >Пример фреймов HTML с использованием атрибута строки title >      head >                  < frameset rows = "20%, 60%, 20%" >          < frame name = "top" src =           "C:/Users/dharam/Desktop/attr1. png" />          < рамки Название = "Main" SRC = "C: /SUSERS/DHAM/DESKTOPPHTOPGTOPGTOPGTOPGTOPGTOPGTOPGTOPGTOPGTOPM. < Кадра Имя = «Внизу» SRC = "C: /SUSERS/DHARAM13 " C: /SUSERS/DHARAM13 ".0014 < NOFRAMES > < BODY > Борузер, который вы работаете, не работает 9005 3 . без фреймов0014 > HTML >

Выход: Пример выше. Тег noframe используется для тех браузеров, которые не поддерживают noframe.

Пример: Этот пример иллюстрирует атрибут col тега frameset.

< html >          < head >          < title >Example of HTML Frames Использование атрибута col title >      head >     13  0014        < frameset cols = "30%, 40%, 30%" >          < frame name = " top" src =           "C:/Users/dharam/Desktop/attr1. png" />          < frame name = "main" src =           "C:/Users/dharam/Desktop/gradient3.png" />          < frame name = "bottom" src =           "C:/Users/dharam/Desktop/col_last.png" />                  < NOFRAMES > < Body > Браузер, который вы работаете. / без фреймов >      набор фреймов > html >

Вывод: Приведенный выше пример в основном используется для создания трех вертикальных фреймов с использованием атрибута frameset col.

Атрибуты тега Frameset:

• cols: Атрибут cols используется для создания вертикальных фреймов в веб-браузере. Этот атрибут в основном используется для определения количества столбцов и их размера внутри тега набора фреймов.
  Размер или ширина столбца устанавливается в наборе фреймов следующими способами:
  • Использовать абсолютное значение в пикселях
    Пример:

  • Использовать процентное значение
    Пример:

  • Использовать подстановочные знаки:
    Пример:

    В приведенном выше примере * возьмет оставшийся процент для создания вертикальной рамки.

• строк: Атрибут строк используется для создания горизонтальных фреймов в веб-браузере. Этот атрибут используется для определения количества строк и их размера внутри тега набора фреймов.
  Размер строк или высоту каждой строки можно использовать следующими способами:
  • Использовать абсолютное значение в пикселях
    Пример:

  • Использовать процентное значение
    Пример:

  • Использовать подстановочные знаки
    Пример:

    В приведенном выше примере * возьмет оставшийся процент для создания горизонтальной рамки.

• граница: Этот атрибут тега frameset определяет ширину границы каждого кадра в пикселях. Нулевое значение используется для отсутствия границы.
  Пример:

• frameborder: Этот атрибут тега frameset используется, чтобы указать, должна ли отображаться трехмерная граница между кадрами или нет, для этого используйте два значения 0 и 1, где 0 означает отсутствие границы, а значение 1 означает, что граница будет.
• промежутки между кадрами: Этот атрибут тега набора кадров используется для указания величины интервала между кадрами в наборе кадров. Это может принимать любое целочисленное значение в качестве параметра, который в основном обозначает значение в пикселях.
  Пример:

   
  Это означает, что между кадрами будет расстояние в 20 пикселей.
   

Атрибуты тега фрейма:

• имя: Этот атрибут используется для присвоения имени фрейму. Он отличает один кадр от другого. Он также используется для указания того, в какой фрейм должен загружаться документ.
  Пример:

  Здесь мы используем три кадра с именами как левый центр и правый.

• src: Этот атрибут в теге фрейма в основном используется для определения исходного файла, который должен быть загружен во фрейм. Значение src может быть любым URL-адресом.
  Пример:

   <имя фрейма = "left" src = "/html/left.htm" /> 

  В приведенном выше примере имя фрейма оставлено, и исходный файл будет загружен из «/html/left.htm " в кадре.

• ширина поля: Этот атрибут в теге кадра используется для указания ширины промежутков в пикселях между границей и содержимым левого и правого фрейма.
  Пример:

  <рамочная ширина = "20">
   

• marginheight: Этот атрибут в теге фрейма используется для указания высоты пробелов в пикселях между границей и содержимым верхнего и нижнего фрейма.
  Пример:

• полоса прокрутки: Для управления отображением полосы прокрутки в кадре используйте атрибут полосы прокрутки в теге кадра. Это в основном используется для управления внешним видом полосы прокрутки. Значение этого атрибута может быть да, нет, авто. Если значение no означает, что полоса прокрутки отображаться не будет.
  Пример:

  <кадр полосы прокрутки = "нет">
   

Преимущества:

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

Недостатки: Из-за некоторых недостатков редко используется в веб-браузере.

• Фреймы могут усложнить создание веб-сайта.
• Пользователь не может добавить в закладки ни одну из веб-страниц, просматриваемых в кадре.
• Кнопка «Назад» в браузере может работать не так, как надеется пользователь.
• Использование слишком большого количества кадров может привести к высокой нагрузке на сервер.