• Авторизация


Как вокруг текста сделать рамку в html 05-04-2019 12:37 к комментариям - к полной версии - понравилось!

Это цитата сообщения ЛЮДМИЛА_ГОРНАЯ Оригинальное сообщение

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

ВАШЕ ПРЕДЛОЖЕНИЕ.

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

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

рупор

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

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

 

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

 

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

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

Для изменения внешнего вида рамки достаточно изменить значение solid. Существуют следующие границы рамок:

- ridge – рельефная.

- dotted – точечная.

- double – двойная.

- dashed – пунктирная.

- solid – сплошная.

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

 

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

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

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

Подытожив, можно сказать, что для того, чтобы сделать рамку вокруг картинки или текста достаточно открыть отображение html кода статьи и прописать в нем между определенными тегами специальные свойства.
Источник: https://stimylrosta.com.ua/verstka-sajta/html-putevoditel-dlya-novichkov/62-kak-sdelat-ramku-v-html-vokrug-teksta

вверх^ к полной версии понравилось! в evernote


Вы сейчас не можете прокомментировать это сообщение.

Дневник Как вокруг текста сделать рамку в html | вера_шубина - Дневник вера_шубина | Лента друзей вера_шубина / Полная версия Добавить в друзья Страницы: раньше»