Пыльца сосны Россия
Инструкция
Все нюансы сборки, переработки, заготовки и применения.
-- Купить пыльцу высшего качества --

Рамки html свойство border

Рамка — самый популярный и легко создаваемый элемент оформления контента с большим потенциалом преображения дизайна. В этом уроке будем использовать только 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.

Запись опубликована в рубрике HTML основы. Добавьте в закладки постоянную ссылку.
А так же:

49 комментариев на «Рамки html свойство border»

  1. stariс говорит:

    Поместите список внутрь в любой блочный тег (div, p) и задайте рамку этому тегу.

  2. Юля говорит:

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

  3. stariс говорит:

    Добавьте в атрибут style значение font-size:20px;. Цифра будет определять размер текста.

  4. артём говорит:

    а как сделать размер текста больше?

  5. stariс говорит:

    padding — это отступ внутри блока, а рамка — это граница блока. Текст от неё и отступает на 50 px. Чтоб блок подвинулся вместе с рамкой используйте наружный отступ margin

  6. Groand говорит:

    Подскажите пожалуйста, у меня один из абзацев смещён вправо (padding-left: 50px;), а рамка у него остаётся по всей ширине колонки. Как сделать, чтобы она была вместе с текстом, вплотную?

  7. Edgar говорит:

    как делать что и текста и целого екрана взял внутри себя етот рамка?

  8. stariс говорит:

    А что Вы предполагаете под словом скилет?

  9. Зоя Крайсик говорит:

    Здравствуйте! нашла оригинальную рамку https://www.liveinternet.ru/users/svetlanat/post202971587/ с уголками…Хочу сама сделать своими рисунками. Подскажите скилет такой рамочки… вставляла свои картинки- не получается и хочется с фоном. Спасибо!

  10. stariс говорит:

    Посмотрите в web-инспекторе (F12) в каком теге у вас заключён контент страницы и задайте ему свойство border.

  11. Рустем говорит:

    как сделать рамку не вокруг одного элемента, а одну большую рамку на странице, внутри которой будут остальные теги?

  12. Natali говорит:

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

  13. stariс говорит:

    Что напишете, то и получите. Откуда мне знать, что вы там написали? Или вы думаете я экстрасенс и могу увидеть ваш код на расстоянии?

  14. Dusya говорит:

    Здравствуйте. Почему при добавлении заголовка через h1 исчезают границы рамки и цвет фона внутри рамки? Почему формы вплотную прилегают к рамке?

  15. Никола говорит:

    Спасибо, очень помогло!

  16. stariс говорит:

    Какой код вы копируете? Там много вариантов.

  17. Гавриил говорит:

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

  18. Фёдор говорит:

    как переместить закрашенную рамку в сторону ?

  19. stariс говорит:

    Я не совсем понял, конечно, занят чертовски, но попробуйте увеличить font-size у h2. Похоже что фиксированная ширина блока не пускает дополнительный абзац.

  20. Александр говорит:

    Есть ещё один вопрос. Если я хочу написать ещё одну строку в рамке, как обычно я открываю «p»…. «/p» а тут так не получается (. Как поступить?

  21. Александр говорит:

    Еще раз спасибо! получилось))

  22. stariс говорит:

    Код не отобразился. Скорее всего вы написали его как есть, с угловыми скобками, и WordPress увидел его именно как код а не текст. На будущее, если вставляете код в комменты, то вместо угловых скобок Нужно писать спецсимволы Открывающая скобка — < закрывающая — >

    Ну ладно. Вам нужно в код кнопки добавить style="margin-top:10px;. Возможно после этого придётся увеличить высоту рамки. Ну это надо будет посмотреть.

  23. Александр говорит:

    Здравствуйте. Спасибо за вашу статью! Очень помогло мне сделать на своем сайте рамку вокруг текста. Но столкнулся с проблемой, вставив кнопку во внутрь рамки (после текста) и не могу сделать отступ от текста ((. Есть ли какой-нибудь способ решить эту проблему? Заранее спасибо!
    Вот код:
    Скидка 10% заказавшему ремонт квартиры «под ключ» Сделать заказ

  24. Дмитрий говорит:

    Спасибо! То что искал!

  25. stariс говорит:

    Да возможно. Для этого применяется свойство css анимации transform: skew. Вот тут почитайте и посмотрите https://starper55plys.ru/css/css-peremeshhenie-vrashhenie-3d/.

    Там все примеры сделаны при наведении курсора, вам же нужно будет просто добавить это свойство с нужным значением в селектор блока вокруг которого создаётся рамка.

  26. Инга говорит:

    Добрый день! а возможно сделать боковые стороны рамки диагональными?

  27. stariс говорит:

    Добавил пояснение в пост. Но если в вашем браузере вообще кода не видно — сообщите, скину на майл.

  28. Виталий Владимирович говорит:

    добавьте html-код примера.

  29. ВиталийВладимирович говорит:

    ПОЖАЛУЙСТА.пришлите html-код нижней рамки. Хочу её на свой сайт добавить. Большое СПАСИБО Вам.

  30. stariс говорит:

    &nbsp; — неразрывный пробел.

  31. Саша говорит:

    А как сделать, чтобы слово было в рамочке, а следующий за рамочкой текст не переносился на новую строку?

  32. stariс говорит:

    Вот тут и код и описание https://starper55plys.ru/css/position-absolute/

  33. Николай говорит:

    Подскажите кто нибудь как сделать чтобы при на видении на ссылку показывалась картинка. Очень надо!

  34. Валерий говорит:

    Хорошая статья, спасибо! Долго искал и вот нашел наконец-то, сделал рамку за 2 минуты!

  35. stariс говорит:

    Привет! Про рамочку — эт к тому, кто эту мобильную версию делал. А так, если перебирать все возможные причины, так их больше чем блох на барбоске.

  36. Я говорит:

    Здравствуйте! В мобильной версии сайта рамочка с текстом вообще не отображается. Как быть? Спасибо за статью.

  37. Юля говорит:

    Спасибо большое за подробную полезную статью! Супер!

  38. stariс говорит:

    Конечно можно. Только в таком случае рамка делается немного подругому. Об этом в конце вот этой статьи, и вот в этой разные варианты закруглений.

  39. Оксана говорит:

    Все понятно и работает. Но хочется закруглить углы рамки? Это возможно сделать?

  40. stariс говорит:

    А что вы не поняли и что вам сделать

  41. Екатерина говорит:

    Я все равно не поняла как мне сделать

  42. stariс говорит:

    Этот блок показан в статье Как сделать блок с полосой прокрутки. Если у Вас сайт на CMS WordPres, или типа того, в общем если Вы вводите текст в текстовом редакторе CMS, то можно использовать атрибут style, прописать стили в него, и вставить код прямо в редакторе. Только цвет в border поставьте такой какой Вам нужен.
    <p style=»border: 2px solid #ffff00; padding: 10px; width: 400px; height:150px; overflow: auto;»>Текст</p>

  43. Александр говорит:

    Здравствуйте, а не подскажите, как вот такую рамку сделать. Чтобы там текст внутри был. Спасибо.

  44. stariс говорит:

    Пожалуйста. Заходите ещё.

  45. Баяс говорит:

    Хотелось взять текст содержания в рамочку. Полдня искал в сети внятное объяснение по этой проблеме, нашел только у вас. По вашим подсказкам все оформил за 5 минут. Спасибо большое.

  46. starik говорит:

    Здравствуйте. Для увеличения размера текста, в атрибут 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. Так что Вы уже начали изучать эту технологию. Продолжайте, будет ещё интереснее.

  47. Сергей говорит:

    Добрый вечер
    учусь по вашим урокам, прочитал всю теорию «Сайт на чистом HTML» теперь практикую полученные знания. И вот у меня вопрос: как увеличить размер текста в рамке с фоном, например в коде что у вас описан как пример
    текст текст текст текст

  48. starik говорит:

    Спасибо. И Вам того же. А про скважины меня интересует абсолютно всё. Как говориться: «от а до я».

  49. Александр говорит:

    Мне понравилась Ваша речь. В СССР занимался, в частности, численным моделированием, 17 лет бурю скважины на воду в Подмосковье. Последний год работы мало, и решил помочь товарищам искать заказчиков в Сети. Барахтаюсь месяц. Сделаю — покажу. Расплачусь. Здоровья!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *