Рамки 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 шаблоны на русском

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  13. Я говорит:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  25. starik говорит:

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

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

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

  27. starik говорит:

    I wish you success.

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

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