Как сделать окантовку в html

Как добавить вокруг текста рамку определенного цвета?

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

, то для него надо установить следующий стиль.

Применение свойства border к текстовому абзацу продемонстрировано в примере 1.

Пример 1. Рамка вокруг абзаца

HTML5 CSS 2.1 IE Cr Op Sa Fx

     p 
Нет страшнее зверя в сибирских лесах, чем разъяренный заяц-мутант. Вы видели, какие у него зубы? О, даже медведь боится этих зубов! А, как известно, медведи больше ничего не боятся.
  

Результат данного примера показан на рис. 1.

Рис. 1. Вид рамки вокруг абзаца

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

Пример 2. Рамка вокруг слоя

HTML5 CSS 2.1 IE Cr Op Sa Fx

     .outline 
Перед тем как убить героя, антагонист обязательно рассказывает ему про все свои злодеяния, чтобы создать необходимую паузу. Разумеется, любой протагонист весьма умело использует данное время против самого злодея.
 
Из этого правила есть только одно исключение. Герой может не суетиться, тянуть время, и вообще ничего не делать, потому что на помощь придут его друзья.
 
  

Как сделать рамку для картинки в html

Чтобы создать рамку для картинки в HTML, можно использовать CSS свойство border .

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

 src="my-image.jpg" alt="My Image" style="border: 1px solid black;"> 

В этом примере мы используем элемент img для отображения картинки и задаем ему свойство style , чтобы установить рамку. Стиль задает тип рамки (например, solid для сплошной рамки), а цвет определяет цвет рамки (например, black для черного цвета).

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

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

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

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

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

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

На первом этапе необходимо уяснить то, что рамку можно сделать для каждого html элемента в независимости, что это за тег ,

, , и т.д.

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

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

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

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

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

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

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

Для реализации такой же рамки необходимо обратиться к тегу

и заключить между ним ниже опубликованный код.

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

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

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

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

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

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

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

свойство margin. Таким способом можно осуществить отступы элементов, которые находятся снаружи рамки.

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

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

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

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

Как добавить рамку к изображению

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

Можно создать обычную рамку вокруг изображения, используя CSS свойства border, padding и background.

1. Создайте HTML

• Сначала создайте элемент с названием класса «frame».
• Укажите элемент в .
• Задайте атрибут alt для изображения.

div img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature"> div>

2. Создайте CSS

• Задайте высоту и ширину рамки.
• Укажите стиль, ширину и цвет границы с помощью сокращенного свойства border .
• Задайте фоновый цвет.
• Установите свойство margin со значением «auto» и padding с двумя значениями. Первое значение указывает верхнюю и нижнюю сторону, а второе указывает правую и левую сторону.
• Задайте 100% для ширины и высоты изображения.

.frame < width: 450px; height: 350px; border: 3px solid #ccc; background: #eee; margin: auto; padding: 15px 25px; > img < width: 100%; height: 100%; >

Пример

html> html> head> title>Заголовок документа title> style> .frame < width: 450px; height: 350px; border: 3px solid #ccc; background: #eee; margin: auto; padding: 15px 25px; > img < width: 100%; height: 100%; > style> head> body> div class="frame"> img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature"> div> body> html>

Если хотите создать круглую рамку для изображения, задайте border-radius со значением 50% для всех сторон границы. Установите border-color, border-style, border-width, согласно вашим требованиям. Не забудьте задать overflow: hidden;, чтобы остальная часть изображения была невидимой.

Пример

html> html> head> title>Заголовок документа title> style> .circle < border-color: #666 #1c87c9; border-image: none; border-radius: 50% 50% 50% 50%; border-style: solid; border-width: 25px; height: 200px; width: 200px; overflow: hidden; > img < height: 100%; width: 100%; > style> head> body> div class="circle"> img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature"> div> body> html>

Можно получить разные эффекты, меняя свойства border-radius и border-color . Например, если хотите получить квадратную рамку, необходимо для всех сторон задать border-radius 0.

Пример

html> html> head> title>Заголовок документа title> style> .square< height: 200px; width: 200px; border-color: #666 #1c87c9; border-image: none; border-radius: 0 0 0 0; border-style: solid; border-width: 30px; > img < height: 100%; width: 100%; > style> head> body> div class="square"> img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature"> div> body> html>

Если хотите, чтобы указанные углы были скруглены, задайте border-radius со значением 50px для этих углов. В таком случае измените также width и height в соответствии с размером изображения.

Пример

html> html> head> title>Заголовок документа title> style> .rounded-borders < height: 200px; width: 300px; border-color: #666 #8ebf42; border-image: none; border-radius: 50px 0 50px 0; border-style: solid; border-width: 20px; > img < height: 100%; width: 100%; > style> head> body> div class="rounded-borders"> img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature"> div> body> html>

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

Возможно также добавить изображение в качестве границы. Для этого существует CSS свойство border-image , которое позволяет указать изображение, которое будет использовано как граница вокруг элемента.

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

• stretch — изображение растягивается таким образом, чтобы заполнить область (значение по умолчанию)
• repeat — изображение повторяется, чтобы заполнить область
• round— изображение повторяется, чтобы заполнить область (если оно не заполняет область целым числом частей, масштаб изображения меняется так, чтобы заполнить)
• space — изображение повторяется, чтобы заполнить область (если оно не заполняет область целым числом частей, дополнительное пространство распределяется между этими частями)

Пример

html> html> head> title>Заголовок документа title> style> div < width: 80%; height: 300px; margin-bottom: 20px; background: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg") no-repeat; background-size: cover; > img < width: 30%; height: 30%; > .border-one < border: 20px solid transparent; border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") 50 round; > .border-two < border: 20px solid transparent; border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") 35% round; > .border-three < border: 20px solid transparent; border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") 100% round; > .border-four < border: 20px solid transparent; border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") 20 stretch; > style> head> body> div class="border-one"> div> div class="border-two"> div> div class="border-three" > div> div class="border-four" > div> hr> p>Оригинальное изображение: p> img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" alt="Border"> body> html>