Как сделать рамку в html вокруг текста

как сделать рамку html вокруг текстаВ процессе оформления сайта многие начинающие сайтостроители задаются вопросом, как изменить шрифт, размер и цвет заголовков. Да, это действительно отличный вариант, с помощью которого можно внести некоторую свежесть оформления сайта. Но существует еще один не менее интригующий вопрос, как сделать рамку html.

Для чего нужна рамка html

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

Особенности создания рамки вокруг текста

Конечно же, вариаций оформления рамки средствами CSS значительно больше, но это совсем другая история. К тому же данный способ подойдет более продвинутым сайтостроителям. Я думаю, у нас с вами и с помощью правки html кода получится не менее красивая рамка html.

На первом этапе необходимо уяснить то, что рамку можно сделать для каждого html элемента в независимости, что это за тег <h1>, <p>, <img>, <span> и т.д.

В свою очередь существует разница между рамками встраиваемых и блочных элементов.

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

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

Конечно же для того чтобы сделать текст в рамке html нам придется обратиться к встроенным стилям. Данный способ станет наиболее приемлемым для выделения некоторых отдельно взятых фраз, абзацев в тексте и картинок. Если же вам необходимо выделить какую-то определенную часть шаблона, отображающуюся на всех страницах сайта, разумно обратиться к правке файла style.css шаблона.

Как вокруг текста сделать рамку в html

Думаю теории предостаточно. Пришло время попрактиковаться. В качестве примера я заключу в яркую салатовую рамку с серым фоном одно из важных предложений этой статьи.

рупор

Важный момент! Встроенные стили отменно работают и не вредят HTML валидности сайта.

Для реализации такой же рамки необходимо обратиться к тегу <p> и заключить между ним ниже опубликованный код.

<p style="border: 3px solid #C1FF0A; background-color: #d5d5d1; padding: 10px;">ВАШЕ ПРЕДЛОЖЕНИЕ.</p>

Так как в данном примере использовались встроенные css стили, считаю не менее важным ознакомить вас с каждым из них.

border — свойство, отвечающее за отображение рамки. Для упрощения поставленной задачи я не стал по отдельности прописывать каждое свойство border-width (толщина границ рамки), border-color (цвет рамки html). А вместо этого немного сократил html код и указал все свойства после двоеточия.

Для изменения внешнего вида рамки достаточно изменить значение solid.

Существуют следующие границы рамок:

  • ridge — рельефная.
  • dotted — точечная.
  • double — двойная.
  • dashed — пунктирная.
  • solid — сплошная.

padding — свойство, отвечающее за расстояние между рамкой и объектом, заключенным в нее.

При желании можно еще немного побаловаться со стилями добавив к числу команд заключенных между открывающимся и закрывающимся тегом <p> свойство margin. Таким способом можно осуществить отступы элементов, которые находятся снаружи рамки.

Чтобы изменить задний фон достаточно прописать свойство background-color, указав после двоеточия код желанного цвета.

Рамка вокруг картинки html делается тем же самым способом, поэтому у вас с этим не должно возникнуть проблем. Единственное что нужно знать новичку, это то, что для ее отображения свойства необходимо прописать в одиночном теге <img>.

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

сообщить об ошибке

Обнаружили в тексте грамматическую ошибку? Пожалуйста, сообщите об этом администратору: выделите текст и нажмите сочетание горячих клавиш Ctrl+Enter

 

Понравилась статья? Угостите админа шаурмой и кофе.
PayPal logo

Комментарии  
Николай
0 Николай 03.04.2017 13:31
Спасибо, мне пригодилось!
Ответить | Ответить с цитатой | Цитировать
Александр (StimylRosta)
0 Александр (StimylRosta) 03.04.2017 15:54
Николай, всегда пожалуйста. Рад был помочь.
Ответить | Ответить с цитатой | Цитировать
Николай
0 Николай 03.04.2017 16:12
А не подскажете как можно сделать чтобы при наведении на ссылку всплывало изображение.
Ответить | Ответить с цитатой | Цитировать
Александр (StimylRosta)
0 Александр (StimylRosta) 03.04.2017 16:26
К сожалению, вкратце объяснить не получится. Это тема отдельной статьи. Думаю в скором я напишу и об этом.
Ответить | Ответить с цитатой | Цитировать
Николай
0 Николай 03.04.2017 16:47
Спасибо! просто очень надо!
Ответить | Ответить с цитатой | Цитировать
Александр (StimylRosta)
0 Александр (StimylRosta) 03.04.2017 16:50
Постараюсь завтра вечером опубликовать. Заходите!
Ответить | Ответить с цитатой | Цитировать
Николай
0 Николай 03.04.2017 16:54
обязательно!
Ответить | Ответить с цитатой | Цитировать
Soven-Aka
0 Soven-Aka 08.07.2019 12:32
Классная статья коротко и ясно Рамка на страницу легла как родная без всяких заморочек с ЧСС
Ответить | Ответить с цитатой | Цитировать
Сеошник ПРО. Админис
0 Сеошник ПРО. Админис 14.06.2020 18:22
Норм получилось!
Ответить | Ответить с цитатой | Цитировать
Александр (StimylRosta)
0 Александр (StimylRosta) 15.06.2020 12:37
Здравствуйте! Приятно это слышать :-)
Ответить | Ответить с цитатой | Цитировать
YOUTUBE_MEYSON
0 YOUTUBE_MEYSON 19.09.2020 06:05
А можно сделать что бы она была не на все страницу? (я про рамку)
Ответить | Ответить с цитатой | Цитировать
Александр (StimylRosta)
0 Александр (StimylRosta) 21.09.2020 06:40
Здравствуйте! Чтобы задать ширину, используйте свойство width. Например, width: 300px;
Ответить | Ответить с цитатой | Цитировать
Добавить комментарий