Как сделать текст на рамке, в качестве заголовка?
Примерно так выглядит в результате.
Отслеживать
9,644 4 4 золотых знака 35 35 серебряных знаков 72 72 бронзовых знака
задан 29 дек 2016 в 20:41
Romuald Shmidtelson Romuald Shmidtelson
322 2 2 серебряных знака 13 13 бронзовых знаков
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Для таких групп есть HTML-тэг fieldset , а надпись устанавливается с помощью вложенного тэга legend .
fieldset < border: 1px solid #339dc7; /* Чтобы подстраивался под контент */ display: inline-block; >legend
Отслеживать
ответ дан 29 дек 2016 в 20:47
Vadim Ovchinnikov Vadim Ovchinnikov
9,644 4 4 золотых знака 35 35 серебряных знаков 72 72 бронзовых знака
- html
- css
- вёрстка
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Оформляем текст в рамку с помощью HTML тегов
Речь пойдет об оформлении текста опубликованного в Интернет. Для этого мы будем использовать теги HTML, применяемые при форматировании текста.
Если вам необходимо обрамить в рамку текст (абзац, строку или выборочную часть), можно воспользоваться несколькими способами.
Использование свойств
Нам необходимо заключить выбранный кусок текста в любой подходящий тег. Самый простой вариант — использовать тег абзаца:
Абзац
Теперь нужно назначить для него соответствующий стиль. Напоминаем, за рамку в HTML отвечает свойство » border «. Для него необходимо указывать 3 параметра:
- Толщину рамку в пикселях
- Форму границы (сплошная, точечная и тд.)
- Цвет рамки
Допустим, нам нужно оформить наш абзац красной сплошной рамкой, толщиной в 1 пиксель. Вот такой код мы должны прописать в атрибуте » style » для тега » p «.
Привет. Этот текст оформлен красной рамкой
Вы получите вот такой результат.
В нашем примере текст в данном абзаце будет оформлен красной рамкой
Как правильно указывать параметры:
- Толщина указывается числом с дополнением » px «
- Доступны следующие варианты оформления рамки: dotted (точечная), dashed (прерывистая линия), solid (сплошная), double (двойная). Дополнительные варианты оформления делают рамку для текста с визуальными эффектами.
- Цвет рамки можно указывать английским словом, соответствующим выбранному цвету, или же указывая код цвета (например, синий #0000FF )
Такие же свойства вы можете применить к тегам » div » и » span «, заключив в них нужный текст.
как сделать текст на рамке
Как сделать на рамке такую картинку
Как можно на border повесить картинку в определенном месте? Что бы весь border был полосой, а.
как сделать пункт текста в рамке?
<html> <head> <p style="color:black;background-color: FF0C79; text-decoration:; text-transform.
Как сделать внутреннюю тень в рамке?
Подскажите пожалуйста, как сделать тень внутри прямоугольной рамки сверху
Как сделать размер картинки равным рамке?
Не могу понять как задать размер картинки и сделать чтобы при нажатии они не накладывались друг на.
Богатый духовно
455 / 262 / 145
Регистрация: 10.03.2015
Сообщений: 1,057
Тэг fieldset
Или задать блоку с текстом абсолютное позиционирование и top/left/right, маргинами подогнать туда куда надо.
2964 / 2597 / 1068
Регистрация: 15.12.2012
Сообщений: 9,855
Записей в блоге: 11
Сообщение было отмечено DenisKrut как решение
Решение
DenisKrut, как вариант:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
html> head> meta charset="utf-8"> title>Название страницы/title> link rel="stylesheet" href="style.css"> style> div p /style> /head> body> div> p>Объявления/p> /div> /body> /html>
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь
Текст в рамке
Здравствуйте! У кого-нибудь есть хорошая идея, как можно в рамку GridPane или BorderPane написать.
Выровнять текст в рамке
Здравствуйте уважаемые эксперты! Есть немного некрасивого кода, то есть футер сделан в виде рамки с.
Текст с картинкой в рамке
Скажите как сделать так, как на этом изображении. Дело в том, чтоб именно вот так текст был.
Текст и картинка в одной рамке
задачка на начинающем уровне (делаю себе простой хом-пейдж). Мне нужна рамка в которой будет текст.
Методы создания рамок при помощи HTML и CSS
У создателей сайтов часто возникают вопросы по улучшению его внешнего вида (интерфейса). Всевозможные картинки, иконки, рамки, линии, выделения цветом – незаменимые атрибуты профессионального контента. Разберем простые, но популярные методы оформления сайта, которыми пользуются топовые вебмастера.
Как сделать вертикальную линию HTML
Выделить блок и сделать его более удобным помогают вертикальные линии. Существует множество способов, но не все способствуют правильному отображению в различных браузерах. Воспользуемся универсальным способом, работающим во всех браузерах. Добавим вертикаль с помощью HTML кода. Код прописываем в текстовом редакторе.
Добро пожаловать на сайт ИнетВинегрет
Добро пожаловать на сайт ИнетВинегрет
Характеристики можно менять по своему усмотрению. Например, сплошную линию, solid, можно заменить на пунктирную (dotted), двойную (double), прерывистую (dashed), объемную вдавленную (inset), объемную выпуклую (outset), объемную рифленую выпуклую (ridge), объемную рифленую вдавленную (groove). М ожно изменить толщину линии, размер отступа и цвет границы, используя палитру цветов RGB.
Border—left можно заменить на границу справа — border—right, border—top – сверху, border—bottom – снизу, border – рамка вокруг текста. В этот код можно вставить изображение и отделить его рамкой или линиями.
Как создать вертикальную линию при помощи CSS
Если привычнее работать с CSS стилями, то для создания вертикальной линии присваивается класс для блока, а его свойства прописываются в CSS-файле.
HTML
Добро пожаловать на сайт ИнетВинегрет
CSS
.block-vert-line border-left:3px solid blue; padding-left:15px; >
Добро пожаловать на сайт ИнетВинегрет
Варианты оформления рамок в HTML и CSS
Возможно воспользоваться встроенными стилями и получить рамку с фоном вокруг текста.
Добро пожаловать на сайт ИнетВинегрет
Добро пожаловать на сайт ИнетВинегрет
В стили добавили цвет фона background—color. Если нужно отрегулировать отступ самой рамки от других объектов, то необходимо вставить margin между тегами . Для выравнивания текста по центру рамки добавляется свойство text-align: center. В зависимости от того, с какой стороны нужно отступать, к свойствам margin и padding добавятся направления отступов:
- top–сверху;
- right–справа;
- bottom–снизу;
- left–слева.
Следующая рамка будет состоять из пунктирной линии (dashed).
Добро пожаловать на сайт ИнетВинегрет
Добро пожаловать на сайт ИнетВинегрет
Далее только заменяем dashed на dotted, double, groove, ridge.
Добро пожаловать на сайт ИнетВинегрет
Добро пожаловать на сайт ИнетВинегрет
Добро пожаловать на сайт ИнетВинегрет
Добро пожаловать на сайт ИнетВинегрет
Если хочется закругленную рамку, то вместо border, добавим border-radius и box-shadow.
Добро пожаловать на сайт ИнетВинегрет
Добро пожаловать на сайт ИнетВинегрет
Чтобы размыть границу рамки, нужно увеличить третью цифру box-shadow с 0 до 6px.
При желании сделать разноцветную рамку, следует добавить в box-shadow дополнительные значения с разными цветами.
Добро пожаловать на сайт ИнетВинегрет
Добро пожаловать на сайт ИнетВинегрет
Рамку можно сделать и в виде окружности.
Добро пожаловать на сайт ИнетВинегрет
Добро пожаловать на сайт ИнетВинегрет
Значения в border-radius можно менять. Первое число указывает на угол по вертикали, второе – по горизонтали.
Популярна рамка с цветом, меняющимся при наведении на нее курсором. Здесь используется свойство hover.
.border_hover border: 3px solid blue; padding: 15px; width: 500px; height: 30px; > .border_hover:hover border: 3px solid #F0F; padding: 15px; > Добро пожаловать в Инетвинегрет