Для создания рамки вокруг текста используйте стилевое свойство border, добавляя его к соответствующему селектору. Например, если для текста применяется тег <p>, то для него надо установить следующий стиль.
P { border: 1px solid red; /* Толщина рамки в пикселах, тип границы (в данном случае сплошная линия) и цвет линии */ padding: 5px; /* Расстояние от текста до рамки */ }Применение свойства border к текстовому абзацу продемонстрировано в примере 1.
Пример 1. Рамка вокруг абзаца
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Рамка вокруг текста</title> <style> p { border: 1px solid red; padding: 10px; } </style> </head> <body> <p>Нет страшнее зверя в сибирских лесах, чем разъяренный заяц-мутант. Вы видели, какие у него зубы? О, даже медведь боится этих зубов! А, как известно, медведи больше ничего не боятся.</p> </body> </html>
Результат данного примера показан на рис. 1.
Рис. 1. Вид рамки вокруг абзаца
Следует учитывать, что в тексте может быть несколько абзацев и вокруг каждого тогда возникнет рамка. В подобных случаях лучше воспользоваться тегом <div>, для которого и требуется установить стиль. А текст добавить уже внутрь этого контейнера (пример 2).
Пример 2. Рамка вокруг слоя
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Рамка вокруг текста</title> <style> .outline { border: 1px solid red; padding: 0 10px; } </style> </head> <body> <div class="outline"> <p>Перед тем как убить героя, антагонист обязательно рассказывает ему про все свои злодеяния, чтобы создать необходимую паузу. Разумеется, любой протагонист весьма умело использует данное время против самого злодея.</p> <p>Из этого правила есть только одно исключение. Герой может не суетиться, тянуть время, и вообще ничего не делать, потому что на помощь придут его друзья.</p> </div> </body> </html>htmlbook.ru
shpargalkablog.ru
Рамка текста CSS
Вот пример использования свойства border
для создания рамки шириной в один пиксел и чёрного цвета:
.example-1 { width: 90%; padding: 10px; margin: 0 auto; border: 1px solid black; } Этому абзацу присвоен класс example-1.
В этом примере мы также использовали свойство CSS padding, или внутренний отступ. Это свойство задаёт размер отступа от текста до обводки (границы элемента).
Давайте рассмотрим ещё один несложный пример, просто чтобы усвоить материал. Создадим рамку шириной три пиксела красного цвета и без внутреннего отступа (свойство CSS padding).
.example-2 { width: 90%; margin: 0 auto; border: 3px solid red; } Этому абзацу присвоен класс example-2.
Как мы видим, без внутреннего отступа padding рамка текста выглядит рогато.
Как сделать рамку картинки в CSS
Рамки для картинок задаются аналогично при помощи свойства border
. Давайте сделаем рамку зелёного цвета толщиной 4 пикселя для картинки.
.example-img { border: 4px solid green; } Вот как сработает этот код:
Как закруглить углы рамки в CSS
Округление углов рамки в CSS делается при помощи свойства border-radius. Это свойство появилось в CSS3, и работает во всех современных браузерах.
Свойство border-radius может иметь от одного до четырёх значений. Если значение одно, то оно устанавливает степень закругления для всех углов. Давайте приведём пример, как будет работать это свойство с одним значением.
.example-3 { border: 1px solid black; border-radius: 15px; padding: 10px; } Вот как он работает:
Свойство border-radius: 15px.
Если у блока нет рамки, то есть граница border-width: 0;, то закруглена будет область залитая фоновым цветом (свойство background-color). Вот пример:
.example-4 { border-width: 0; // хотя это значение равно 0 по умолчанию background-color: #DDD; border-radius: 15px; padding: 10px; } Вот как работает этот пример:
Свойство border-radius: 15px.
Как я писал ранее, для свойства border-radius можно устанавливать от одного до четырёх значений. В таблице ниже описано как будут работать все комбинации значений.
| Число значений | Результат |
|---|---|
| 1 | Округление указывается для всех углов рамки блока. |
| 2 | Первое значение задает округление верхнего левого и нижнего правого угла, второе значение — для двух оставшихся углов. |
| 3 | Первое значение задает округление для верхнего левого угла, второе — устанавливает округление верхнего правого и нижнего левого углов одновременно, а третье — округление для нижнего правого уголка. |
| 4 | По очереди устанавливает округление углов по часовой стрелке: сначала верхнего левого, потом верхнего правого, нижнего правого и нижнего левого углов. |
Для свойсва border-radius значения можно указывать в процентах.
Давайте нарисуем круг на CSS. Для этого возьмём кватратный блок 100 на 100 пикселей и округлим углы CSS правилом border-radius: 50%.
.example-5 { width: 100px; height: 100px; background-color: #F00; border-radius: 50%; }
Вот как работает этот пример:
На этом тема «рамки в CSS» раскрыта полностью. Успехов в изучении CSS!
komotoz.ru
Для чего нужна рамка html
На самом деле, никакой особенной функции данный элемент не несет. Но все же текст, заключенный в привлекательно оформленную рамку вызывает определенный интерес у читателей. Поэтому рамку вокруг текста смело можно назвать одним из способов подчеркивания важности обрамленного текста.
Особенности создания рамки вокруг текста
Конечно же, вариаций оформления рамки средствами CSS значительно больше, но это совсем другая история. К тому же данный способ подойдет более продвинутым сайтостроителям.
Я думаю, у нас с вами и с помощью правки html кода получится не менее красивая рамка html.
На первом этапе необходимо уяснить то, что рамку можно сделать для каждого html элемента в независимости, что это за тег <h1>, <p>, <img>, <span> и т.д.
В свою очередь существует разница между рамками встраиваемых и блочных элементов.
Рамка встроенного типа находится внутри тегов, правильнее сказать, отвечающий за ее отображение html код заключенный между определенных тегов.
выходе у нас получается html рамка вокруг текста, для которой необходимо прописать определенные команды с целью задания внутренних отступов.
Блочные рамки формируются во всю ширину блока, что провоцирует потребность задания команд связанных с ограничением ширины.
Конечно же для того чтобы сделать текст в рамке html нам придется обратиться к встроенным стилям. Данный способ станет наиболее приемлемым для выделения некоторых отдельно взятых фраз, абзацев в тексте и картинок. Если же вам необходимо выделить какую-то определенную часть шаблона, отображающуюся на всех страницах сайта, разумно обратиться к правке файла style.css шаблона.
Как вокруг текста сделать рамку в html
Думаю теории предостаточно. Пришло время попрактиковаться.
Для примера возьмём тег <p> и создадим ему простую рамку.
<p style="border:3px #00B344 solid; width:160px;"> текст текст текст текст </p>
текст текст текст текст
ВАШЕ ПРЕДЛОЖЕНИЕ.
Двойная рамка
ВАШЕ ПРЕДЛОЖЕНИЕ.
КОД
Так как в данном примере использовались встроенные css стили, считаю не менее важным ознакомить вас с каждым из них.
1. border – свойство, отвечающее за отображение рамки.
Для упрощения поставленной задачи я не стал по отдельности прописывать каждое свойство — border-width (толщина границ рамки), border-color (цвет рамки html). А вместо этого немного сократил html код, прописав все свойства после двоеточия.
Для изменения внешнего вида рамки достаточно изменить значение solid. Существуют следующие границы рамок:
— ridge – рельефная.
текст текст текст текст
— dotted – точечная.
текст текст текст текст
— double – двойная.
текст текст текст текст
— dashed – пунктирная.
текст текст текст текст
— solid – сплошная.
текст текст текст текст
ширина рамки меняется изменением цифр в свойстве «width», а текст внутри можно подравнять добавив свойство «padding»
2. padding – свойство, отвечающее за расстояние между рамкой и объектом, заключенным в нее.
При желании можно еще немного побаловаться со стилями добавив к числу команд заключенных между открывающимся и закрывающимся тегом <p> свойство margin. Таким способом можно осуществить отступы элементов, которые находятся снаружи рамки.
Чтобы изменить задний фон достаточно прописать свойство background-color, указав после двоеточия код желанного цвета.
<p style="background-color: #F4FC03; border:3px #00B344 ridge; width: 140px;
padding: 5px 0 5px 15px; margin:20px 0 0 20px;" > текст текст текст текст</p>
Рамка вокруг картинки делается тем же самым способом, поэтому у вас с этим не должно возникнуть проблем. Единственное что нужно знать новичку, это то, что для ее отображения свойства необходимо прописать в одиночном теге <img>.
<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, то получится багет.
Текст текст текст текст текст
Подытожив можно сказать, что для того чтобы сделать рамку вокруг картинки или текста достаточно открыть отображение html кода статьи и прописать в нем между определенными тегами специальные свойства.
Спасибо за внимание.
www.liveinternet.ru
Для добавления вокруг изображения цветной рамки применяется стилевое свойство border. В стилях добавляем это свойство к селектору img и указываем толщину рамки, её цвет и стиль. Тогда рамка добавится для всех изображений на странице. Для выбранных рисунков можно ввести собственный класс и писать его только для выбранных элементов <img> (пример 1).
Пример 1. Добавление рамки
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Изображения</title> <style> .border { border: 3px solid #00af64; } </style> </head> <body> <img src="image/thumb1.jpg" alt="" class="border"> <img src="image/thumb2.jpg" alt="" class="border"> <img src="image/thumb3.jpg" alt=""> </body> </html>В данном примере к двум изображениям добавляется класс border, через который устанавливается зелёная рамка (рис. 1).
Рис. 1. Рамка вокруг фотографий
Рамку можно добавлять и при наведении курсора на изображение через псевдокласс :hover. Но это ожидаемо приведёт к сдвигу картинки, поскольку свойство border влияет на общую ширину и высоту элемента. Чтобы избежать такого поведения к селектору img предварительно добавляется невидимая рамка, как показано в примере 2.
Пример 2. Рамка вокруг изображений
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Изображения</title> <style> img { border: 3px solid transparent; /* Прозрачная рамка */ } img:hover { border: 3px solid #00af64; /* Цветная рамка */ } </style> </head> <body> <img src="image/thumb1.jpg" alt=""> <img src="image/thumb2.jpg" alt=""> <img src="image/thumb3.jpg" alt=""> </body> </html>Другой способ добавления рамки — использование свойства outline. Оно, в отличие от border, не влияет на размеры элемента, поэтому прозрачная рамка уже не нужна.
img:hover { outline: 3px solid #00af64; /* Цветная рамка */ }Несмотря на схожесть этих свойств, у них есть небольшие различия:
- outline выводится вокруг элемента (border внутри);
- outline не влияет на размеры элемента (border добавляется к ширине и высоте элемента);
- outline можно установить только вокруг элемента целиком, но никак не на отдельных сторонах (border можно использовать для любой стороны или всех сразу);
- на outline не действует радиус скругления, заданный свойством border-radius (на border действует).
Ещё один способ создания рамки заключается в добавлении фона к <img>. Сам фон сразу не виден, поэтому надо установить ещё свойство padding, его значением выступает толщина рамки (пример 3).
Пример 3. Использование background и padding
img { padding: 10px; /* Толщина рамки */ background: #6dcff6; /* Цвет рамки */ }Сюда же можно включить свойство border и получить новый вид рамки. Вообще, комбинируя padding, border, outline и background можно сделать множество самых разнообразных рамок.
webref.ru
Здравствуйте уважаемые начинающие веб мастера.
Рамка является одним из самых популярных вариантов оформления контента, и в этой статье мы подробно рассмотрим, как они создаются средствами html.
Рамку можно создать для любого html элемента, будь то <p>, <h1>, <img>, <span>, <blockquote>, <marquee> и так далее.
Разница между рамками блочных и встраиваемых элементов состоит в том, что у блочных рамка образуется на всю ширину блока, но её можно ограничивать.
Рамка же встроенного создаётся непосредственно вокруг элемента, заключённого в тег.
Для создания рамки применяется стилевое свойство border которому задаются три значения по порядку
Толщина Вид Цвет.
Так как руководство это практическое, то перейдём непосредственно к примерам.
Толщина и размер рамки
Для примера возьмём тег <p> и создадим ему простую рамку толщиной 3 px
Результат
текст текст текст текст
Как видите — рамка заняла всё пространство, которое занимает тег.
Так ведёт себя рамка созданная для блочных элементов, таких как <p>, <div> и т.д.
Чтоб рамка была только вокруг текста, в значение вводится ширина, которую можно задать в любых доступных в веб единицах размеров.
текст текст текст текст
Если задать меньшую ширину, то слова в рамке будут размещаться в несколько строк, то есть автоматически будет увеличиваться высота.
текст текст текст текст
Рамка для встроенных или строчных элементов, таких как <img>, <span>, <hr> и т.п., располагается непосредственно вокруг элемента.
Бла-бла-бла Бла-бла-бла текст текст текст текст Бла-бла-бла Бла-бла-бла
Вид рамки
Можно изменить вид рамки, для этого в значении меняется её название.
Названия:
solid — сплошная
текст текст текст текст
dotted — точечная
текст текст текст текст
dashed — пунктирная
текст текст текст текст
double — двойная
текст текст текст текст
ridge — рельефная
текст текст текст текст
Для рельефной рамки нужно задавать толщину побольше, иначе она будет смотреться как сплошная.
Не полная рамка
Для создания неполной рамки в код вместо свойства border вводятся свойства border-top, border-right, border-bottom, border-left, по отдельности или в различных комбинациях, в зависимости от того, какая граница вам нужна.
текст текст текст текст
Выравнивание и отступы рамки
Текст внутри рамки можно выровнять по центру или правому краю, добавив в код свойство text-align, которое принимает значения
left — выравнивание по левому краю (по умолчанию)
center — выравнивание по центру
right — выравнивание по правому краю
текст текст текст текст
Можно задать для рамки отступы от текста.
Для этого в код рамки вводится свойство padding, которое принимает 4 цифровых значения:
первая цифра — отступ сверху;
вторая цифра — отступ справа;
третья цифра — отступ снизу;
четвёртая цифра — отступ слева.
Отступы задаются в любых доступных в веб единицах размеров.
Если в свойстве padding указать одно значение, то отступы со всех сторон будут одинаковыми.
Если указать два значения, то первая цифра укажет отступы сверху и снизу, а вторая — справа и слева.
текст текст текст текст
Можно задать отступ от предметов находящихся снаружи рамки.
Для этого в код рамки добавляется свойство margin, которое так же как и padding может принимать 4 цифровых значения.
Сделаем отступы слева, сверху и снизу
текст текст текст текст
Дизайн рамки
Можно внутри рамки сделать фоновый цвет.
Для этого в код рамки вводится свойство background, в значении которого указывается код цвета.
текст текст текст текст
Можно вместе с текстом в рамку вставить картинку. В примере .gif картинка.
Текст текст текст
А если задать ширину рамки ridge пикселей в 15-20, то есть в свойстве border вместо 3px задать 15px, то получится багет.
Текст текст текст
Так же в дизайне рамки можно использовать стилевые свойства border-radius — закругление и box-shadow — тень.
Текст текст текст
Текст текст текст
Как пишутся рамки в CSS и как делается тень, читайте в статьях Рамки CSS и Как сделать тень для блока.
Желаю творческих успехов.
«>
Перемена
Вовочка папе: — Папа, а тебя била когда нибудь твоя мама ?
— Нет, только твоя…
Прямая линия HTML < < < В раздел > > > Кнопка HTML.
starper55plys.ru
html рамка с помощью html таблицы
Пожалуй, самым простым способом сделать рамку вокруг текста или картинки, в html, является размещение нужного контента в ячейке таблицы.
То есть, в процессе написания статьи, мы добавляем таблицу, состоящую из одной ячейки и в эту таблицу добавляем блок текста, к которому нужно привлечь внимание посетителя.
HTML код в данном случае может выглядеть вот так:
<table border=»1″ bordercolor=»red» width=»350″ bgcolor=»white» cellspacing=»0″ cellpadding=»10″>
<tr>
<td>Текст в рамке. Толщина и цвет рамки зависят от значения параметров таблицы</td>
</tr>
</table>
Вот какую рамку формирует выше приведенный код, если его открыть в окне браузера
Как видно из приведенного выше html кода, мы можем изменять толщину рамки, ее цвет, а так же, ширину рамки и фон ячейки.
Получается, что внешний вид рамки может быть задан путем изменения значений параметров:
border=»1″ толщина рамки
bordercolor=»red» цвет рамки
width=»350″ ширина блока с рамкой
bgcolor=»white» цвет фона ячейки
cellspacing=»0″ расстояние между ячейками
cellpadding=»10″ отступ от рамки до текста
В данном случае, количество параметров для редактирования рамки, достаточно большое и это позволяет оформить рамку и ее содержимое на любой вкус.
То есть обилие параметров, которые мы имеем здесь в своем распоряжении, позволяют нам оформить текстовые блоки в рамке таким образом, что на них, наверняка обратит внимание читатель сайта. Но нужно помнить, что все должно быть оформлено красиво и гармонично!
html рамка с помощью стиля style
Если Вы не хотите использовать таблицу для создании рамки вокруг текста, тогда можно воспользоваться стилем border. Применение стилей в html, возможно в блочных элементах, таких как параграф <p></p> или <div></div>.
Так и сделаем, вот пример html кода, выводящего вокруг текста рамку с использованием стилей:
<p align=»center» style=’border: 1px solid red; padding: 5px;’>Есть ли возможность сделать рамку вокруг текста средствами html?</p>
Обрабатывая данный html код, браузер выведет в окно текст в рамке. Внешний вид рамки будет определятся значением параметров стиля style, следующим образом:
border: 1px solid red; — Толщина и цвет рамки
padding: 5px; — Отступ рамки от текста
В некоторых случаях, использование стилей при создании html рамки, будет более предпочтительным, чем использование ячейки таблицы.
Ну что же, мы с Вами рассмотрели два способа, с помощью которых можно сделать рамку вокруг текста или картинки.
В первом способе рамка была создана с помощью html тега <table>, то есть с помощью таблицы, а во втором способе, рамка вокруг текста была создана с использованием стиля style.
Автор: Виктор Милованов
sozdavaite-sait.ru
Как самому сделать рамки html?
Все до банальности просто!
По скольку это у нас с вами практическое занятие, то давайте и перейдем сразу к изготовлению рамки html. Рамку можно создать для любого из перечисленных далее html элементов: <p>, <h1>, <img>, <span>, <blockquote>, <marquee> и так далее.
Давайте на пример создадим рамку для тега <p>:
Ваш любой текст
Чтобы у Вас получилась такая же рамка, вам нужен вот этот код:
<p style="border: 3px solid #ffa500; width: 160px; text-align: center;">Ваш любой текст</p>
Теперь давайте сделаем несколько видоизменений нашей рамки. И для этого нам с вами нужно всего лишь изменить одно значение «solid». А изменения будут такими:
«dotted» — точечная рамка
<p style="border: 3px dotted #ffa500; width: 160px; text-align: center;">Ваш любой текст</p>
Ваш любой текст
«dashed» — пунктирная рамка
<p style="border: 3px dashed #ffa500; width: 160px; text-align: center;">Ваш любой текст</p>
Ваш любой текст
«solid» — сплошная рамка
<p style="border: 3px solid #ffa500; width: 160px; text-align: center;">Ваш любой текст</p>
Ваш любой текст
«double» — двойная рамка
<p style="border: 3px double #ffa500; width: 160px; text-align: center;">Ваш любой текст</p>
Ваш любой текст
«ridge» — рельефная рамка
<p style="border: 3px ridge #ffa500; width: 160px; text-align: center;">Ваш любой текст</p>
Ваш любой текст
Ширина нашей рамки задается значением «width», просто измените цифирные значения подобрав их под свои нужды. А значением «padding» можно равнять текст:
<p style="border:3px #ffa500 ridge; width: 160px; padding: 5px 0 5px 15px;" > Ваш любой текст</p>
Ваш любой текст
А если добавить значение «margin», то можно выравнять саму рамку по наружним краям от окружающих ее «предметов», где первая цифра — отступ сверху, вторая — отступ справа, третья — отступ снизу, четвёртая — отступ слева:
<p style="border:3px #ffa500 ridge; width: 160px; padding: 5px 0 5px 15px; margin:20px 0 0 20px;" > Ваш любой текст</p>
Ваш любой текст
Еще можно создавать более красивые рамки css, но это будет в другом моем материале, который Вы не должны пропустить!
Вот здесь появился материал про рамки css. Смотрите и делайте сами!
Если вам понравился материал пожалуйста сделайте следующее…
- Поставьте «лайк».
- Сделайте ретвит.
- Поделитесь этим постом с друзьями в социальных сетях.
- И конечно же, оставьте свой комментарий ниже
Спасибо за внимание!
Всегда ваш Валерий Бородин
pribylwm.ru
Предлагайте, а я подумаю как реализовать.
Эту статью хочу переписать.
кая вам больше нравится?
пример http://jsfiddle.net/NMitra/4hackgor/
статья http://shpargalkablog.ru/2011/06/css-box-shadow.html