Рамка — самый популярный и легко создаваемый элемент оформления контента с большим потенциалом преображения дизайна. В этом уроке будем использовать только HTML.
Рамку можно создать для любого html элемента, будь то <p>, <h1>, <img>, <span>, <blockquote>, <marquee> и так далее.
Разница между рамками блочных и встраиваемых элементов состоит в том, что у блочных рамка образуется на всю ширину блока, но её можно ограничивать.
Рамка же встроенного создаётся непосредственно вокруг элемента, заключённого в тег.
Для создания рамки применяется стилевое свойство border которому задаются три значения по порядку
Толщина Вид Цвет.
Так как руководство это практическое, то перейдём непосредственно к примерам.
Толщина и размер рамки
Для примера возьмём тег <p> и создадим ему простую рамку толщиной 3 px
<p style="border:3px #00B344 solid;">
текст текст текст текст</p>Результат
текст текст текст текст
Как видите — рамка заняла всё пространство, которое занимает тег.
Так ведёт себя рамка созданная для блочных элементов, таких как <p>, <div> и т.д.
Чтоб рамка была только вокруг текста, в значение вводится ширина, которую можно задать в любых доступных в веб единицах размеров.
<p style="border:3px #00B344 solid; width:175px;">
текст текст текст текст</p>текст текст текст текст
Если задать меньшую ширину, то слова в рамке будут размещаться в несколько строк, то есть автоматически будет увеличиваться высота.
<p style="border:3px #00B344 solid; width:100px;">
текст текст текст текст</p>текст текст текст текст
Рамка для встроенных или строчных элементов, таких как <img>, <span>, <hr> и т.п., располагается непосредственно вокруг элемента.
Бла-бла-бла Бла-бла-бла <span style="border:3px #00B344 solid; width:100px;">текст текст текст текст</span> Бла-бла-бла Бла-бла-бла Бла-бла-бла Бла-бла-бла текст текст текст текст Бла-бла-бла Бла-бла-бла
Вид рамки
Можно изменить вид рамки, для этого в значении меняется её название.
Названия:
solid — сплошная
<span style="border:3px #00B344 solid; width:175px;">текст текст текст текст</span>текст текст текст текст
dotted — точечная
<p style="border:3px #00B344 dotted; width:175px;">
текст текст текст текст</p>текст текст текст текст
dashed — пунктирная
<p style="border:3px #00B344 dashed; width:175px;">
текст текст текст текст</p>текст текст текст текст
double — двойная
<p style="border:3px #00B344 double; width:175px;">
текст текст текст текст</p>текст текст текст текст
ridge — рельефная
<p style="border:5px #00B344 ridge; width:175px;">
текст текст текст текст</p>текст текст текст текст
Для рельефной рамки нужно задавать толщину побольше, иначе она будет смотреться как сплошная.
Не полная рамка
Для создания неполной рамки в код вместо свойства border вводятся свойства border-top, border-right, border-bottom, border-left, по отдельности или в различных комбинациях, в зависимости от того, какая граница вам нужна.
<p style="border-left:3px #00B344 double; border-bottom:3px #00B344 double; width: 200px; padding: 5px 0 5px 15px; margin:50px 0 50px 150px;" > текст текст текст текст</p>текст текст текст текст
Выравнивание и отступы рамки
Текст внутри рамки можно выровнять по центру или правому краю, добавив в код свойство text-align, которое принимает значения
left — выравнивание по левому краю (по умолчанию)
center — выравнивание по центру
right — выравнивание по правому краю
<p style="border:3px #00B344 ridge; width: 175px; text-align:center;" > текст текст текст текст</p>текст текст текст текст
Можно задать для рамки отступы от текста.
Для этого в код рамки вводится свойство padding, которое принимает 4 цифровых значения:
первая цифра — отступ сверху;
вторая цифра — отступ справа;
третья цифра — отступ снизу;
четвёртая цифра — отступ слева.
Отступы задаются в любых доступных в веб единицах размеров.
Если в свойстве padding указать одно значение, то отступы со всех сторон будут одинаковыми.
Если указать два значения, то первая цифра укажет отступы сверху и снизу, а вторая — справа и слева.
<p style="border:3px #00B344 solid; width: 200px; padding: 5px 0 5px 15px;" > текст текст текст текст</p>текст текст текст текст
Можно задать отступ от предметов находящихся снаружи рамки.
Для этого в код рамки добавляется свойство margin, которое так же как и padding может принимать 4 цифровых значения.
Сделаем отступы слева, сверху и снизу
<p style="border:3px #00B344 ridge; width: 200px; padding: 5px 0 5px 15px; margin:50px 0 50px 150px;" > текст текст текст текст</p>текст текст текст текст
Дизайн рамки
Можно внутри рамки сделать фоновый цвет.
Для этого в код рамки вводится свойство background, в значении которого указывается код цвета.
<p style="background: #F4FC03; border:3px #00B344 ridge; width: 200px; padding: 10px 0 10px 15px; margin:20px;" > текст текст текст текст</p>текст текст текст текст
Можно вместе с текстом в рамку вставить картинку. В примере .gif картинка.
<p style="background-color: #F4FC03; border:3px #00B344 ridge;
width: 240px; height:100px; padding: 5px 0 5px 15px; margin:20px 0 0 20px;">
<img src="images/i6.jpg"><br>Текст текст текст текст текст</p>
Текст текст текст
А если задать ширину рамки ridge пикселей в 15-20, то есть в свойстве border вместо 3px задать 15px, то получится багет.
Текст текст текст
Так же в дизайне рамки можно использовать стилевые свойства border-radius — закругление и box-shadow — тень.
<p style="border:2px solid #555; border-radius:5px; width: 200px; text-align:center; margin:20px; padding:20px;" > текст текст текст текст</p>Текст текст текст
<p style="border:2px solid #555; box-shadow:3px 3px 5px #999; width: 200px; text-align:center; margin:20px; padding:20px;" > текст текст текст текст</p>Текст текст текст
Как оформляются рамки в CSS и как делается тень, читайте в статьях Рамки CSS и Как сделать тень для блока.
Желаю творческих успехов.
Перемена
\
Вовочка папе: — Папа, а тебя била когда нибудь твоя мама ?
— Нет, только твоя…
Прямая линия HTML < < < В раздел > > > Кнопка HTML.
Поместите список внутрь в любой блочный тег (div, p) и задайте рамку этому тегу.
Здравствуйте, скажите пожалуйста, можно ли вписать в рамку маркированный список, к сожалению я не программист и HTML владею поверхностно, но по работе требуется на нем работать и создать рамку в которой будет предложение , а под ним маркированный список, все перепробовала, но список в рамку не встает. получается в рамке только первое предложение, а сам список под рамкой, подскажите пожалуйста как исправить, очень нужно.
Добавьте в атрибут style значение font-size:20px;. Цифра будет определять размер текста.
а как сделать размер текста больше?
padding — это отступ внутри блока, а рамка — это граница блока. Текст от неё и отступает на 50 px. Чтоб блок подвинулся вместе с рамкой используйте наружный отступ margin
Подскажите пожалуйста, у меня один из абзацев смещён вправо (padding-left: 50px;), а рамка у него остаётся по всей ширине колонки. Как сделать, чтобы она была вместе с текстом, вплотную?
как делать что и текста и целого екрана взял внутри себя етот рамка?
А что Вы предполагаете под словом скилет?
Здравствуйте! нашла оригинальную рамку https://www.liveinternet.ru/users/svetlanat/post202971587/ с уголками…Хочу сама сделать своими рисунками. Подскажите скилет такой рамочки… вставляла свои картинки- не получается и хочется с фоном. Спасибо!
Посмотрите в web-инспекторе (F12) в каком теге у вас заключён контент страницы и задайте ему свойство border.
как сделать рамку не вокруг одного элемента, а одну большую рамку на странице, внутри которой будут остальные теги?
Подскажите, пожалуйста, как сделать так , чтобы блоки с текстом в рамке стояли рядом друг с другом на расстоянии пробела, а не переходили на новый абзац? Мне нужно разместить в них ссылки, чтобы получился блок со ссылками. Заранее благодарю за ответ!
Что напишете, то и получите. Откуда мне знать, что вы там написали? Или вы думаете я экстрасенс и могу увидеть ваш код на расстоянии?
Здравствуйте. Почему при добавлении заголовка через h1 исчезают границы рамки и цвет фона внутри рамки? Почему формы вплотную прилегают к рамке?
Спасибо, очень помогло!
Какой код вы копируете? Там много вариантов.
Копирую код рамки вставляю в редактор на странице сайта рамка с текстом становится вертикально а не горизонтально мне нужно чтобы она лежала горизонтально
как переместить закрашенную рамку в сторону ?
Я не совсем понял, конечно, занят чертовски, но попробуйте увеличить font-size у h2. Похоже что фиксированная ширина блока не пускает дополнительный абзац.
Есть ещё один вопрос. Если я хочу написать ещё одну строку в рамке, как обычно я открываю «p»…. «/p» а тут так не получается (. Как поступить?
Еще раз спасибо! получилось))
Код не отобразился. Скорее всего вы написали его как есть, с угловыми скобками, и WordPress увидел его именно как код а не текст. На будущее, если вставляете код в комменты, то вместо угловых скобок Нужно писать спецсимволы Открывающая скобка — < закрывающая — >
Ну ладно. Вам нужно в код кнопки добавить style="margin-top:10px;. Возможно после этого придётся увеличить высоту рамки. Ну это надо будет посмотреть.
Здравствуйте. Спасибо за вашу статью! Очень помогло мне сделать на своем сайте рамку вокруг текста. Но столкнулся с проблемой, вставив кнопку во внутрь рамки (после текста) и не могу сделать отступ от текста ((. Есть ли какой-нибудь способ решить эту проблему? Заранее спасибо!
Вот код:
Скидка 10% заказавшему ремонт квартиры «под ключ» Сделать заказ
Спасибо! То что искал!
Да возможно. Для этого применяется свойство css анимации transform: skew. Вот тут почитайте и посмотрите https://starper55plys.ru/css/css-peremeshhenie-vrashhenie-3d/.
Там все примеры сделаны при наведении курсора, вам же нужно будет просто добавить это свойство с нужным значением в селектор блока вокруг которого создаётся рамка.
Добрый день! а возможно сделать боковые стороны рамки диагональными?
Добавил пояснение в пост. Но если в вашем браузере вообще кода не видно — сообщите, скину на майл.
добавьте html-код примера.
ПОЖАЛУЙСТА.пришлите html-код нижней рамки. Хочу её на свой сайт добавить. Большое СПАСИБО Вам.
— неразрывный пробел.
А как сделать, чтобы слово было в рамочке, а следующий за рамочкой текст не переносился на новую строку?
Вот тут и код и описание https://starper55plys.ru/css/position-absolute/
Подскажите кто нибудь как сделать чтобы при на видении на ссылку показывалась картинка. Очень надо!
Хорошая статья, спасибо! Долго искал и вот нашел наконец-то, сделал рамку за 2 минуты!
Привет! Про рамочку — эт к тому, кто эту мобильную версию делал. А так, если перебирать все возможные причины, так их больше чем блох на барбоске.
Здравствуйте! В мобильной версии сайта рамочка с текстом вообще не отображается. Как быть? Спасибо за статью.
Спасибо большое за подробную полезную статью! Супер!
Конечно можно. Только в таком случае рамка делается немного подругому. Об этом в конце вот этой статьи, и вот в этой разные варианты закруглений.
Все понятно и работает. Но хочется закруглить углы рамки? Это возможно сделать?
А что вы не поняли и что вам сделать
Я все равно не поняла как мне сделать
Этот блок показан в статье Как сделать блок с полосой прокрутки. Если у Вас сайт на CMS WordPres, или типа того, в общем если Вы вводите текст в текстовом редакторе CMS, то можно использовать атрибут style, прописать стили в него, и вставить код прямо в редакторе. Только цвет в border поставьте такой какой Вам нужен.
<p style=»border: 2px solid #ffff00; padding: 10px; width: 400px; height:150px; overflow: auto;»>Текст</p>
Здравствуйте, а не подскажите, как вот такую рамку сделать. Чтобы там текст внутри был. Спасибо.
Пожалуйста. Заходите ещё.
Хотелось взять текст содержания в рамочку. Полдня искал в сети внятное объяснение по этой проблеме, нашел только у вас. По вашим подсказкам все оформил за 5 минут. Спасибо большое.
Здравствуйте. Для увеличения размера текста, в атрибут style вводится свойство font-size: 16px;. Увеличивая или уменьшая базовый размер 16px, Вы измените размер шрифта.
Пример:
<p style=" font-size:16px; background-color: #F4FC03; border:3px #00B344 ridge; width: 140px; padding: 5px 0 5px 15px; margin:20px 0 0 20px;"> текст текст текст текст<p>
Вообще то, все свойства вписанные в атрибут style — это уже свойства CSS. Так что Вы уже начали изучать эту технологию. Продолжайте, будет ещё интереснее.
Добрый вечер
учусь по вашим урокам, прочитал всю теорию «Сайт на чистом HTML» теперь практикую полученные знания. И вот у меня вопрос: как увеличить размер текста в рамке с фоном, например в коде что у вас описан как пример
текст текст текст текст
Спасибо. И Вам того же. А про скважины меня интересует абсолютно всё. Как говориться: «от а до я».
Мне понравилась Ваша речь. В СССР занимался, в частности, численным моделированием, 17 лет бурю скважины на воду в Подмосковье. Последний год работы мало, и решил помочь товарищам искать заказчиков в Сети. Барахтаюсь месяц. Сделаю — покажу. Расплачусь. Здоровья!