Рамки html свойство border
Рамка — самый популярный и легко создаваемый элемент оформления контента с большим потенциалом преображения дизайна. В этом уроке будем использовать только HTML.
Рамку можно создать для любого html элемента, будь то
, , , , , и так далее.
Разница между рамками блочных и встраиваемых элементов состоит в том, что у блочных рамка образуется на всю ширину блока, но её можно ограничивать.
Рамка же встроенного создаётся непосредственно вокруг элемента, заключённого в тег.
Для создания рамки применяется стилевое свойство border которому задаются три значения по порядку
Толщина Вид Цвет.
Так как руководство это практическое, то перейдём непосредственно к примерам.
Толщина и размер рамки
Для примера возьмём тег
и создадим ему простую рамку толщиной 3 px
< p style color: #008080;">border:3px #00B344 solid; «>
текст текст текст текст < /p >
текст текст текст текст
Как видите — рамка заняла всё пространство, которое занимает тег.
Так ведёт себя рамка созданная для блочных элементов, таких как
, и т.д.
Чтоб рамка была только вокруг текста, в значение вводится ширина, которую можно задать в любых доступных в веб единицах размеров.
< p style color: #008080;">border:3px #00B344 solid; width:175px; «>
текст текст текст текст < /p >
текст текст текст текст
Если задать меньшую ширину, то слова в рамке будут размещаться в несколько строк, то есть автоматически будет увеличиваться высота.
< p style color: #008080;">border:3px #00B344 solid; width:100px; «>
текст текст текст текст < /p >
текст текст текст текст
Рамка для встроенных или строчных элементов, таких как , ,
и т.п., располагается непосредственно вокруг элемента.
Бла-бла-бла Бла-бла-бла < span style color: #008080;">border:3px #00B344 solid; width:100px; «>текст текст текст текст < /span >Бла-бла-бла Бла-бла-бла
Бла-бла-бла Бла-бла-бла текст текст текст текст Бла-бла-бла Бла-бла-бла
Можно изменить вид рамки, для этого в значении меняется её название.
< span style color: #008080;">border:3px #00B344 solid; width:175px; «>текст текст текст текст < /span >
текст текст текст текст
< p style color: #008080;">border:3px #00B344 dotted; width:175px; «>
текст текст текст текст < /p >
текст текст текст текст
< p style color: #008080;">border:3px #00B344 dashed; width:175px; «>
текст текст текст текст < /p >
текст текст текст текст
< p style color: #008080;">border:3px #00B344 double; width:175px; «>
текст текст текст текст < /p >
текст текст текст текст
< p style color: #008080;">border:5px #00B344 ridge; width:175px; «>
текст текст текст текст < /p >
текст текст текст текст
Для рельефной рамки нужно задавать толщину побольше, иначе она будет смотреться как сплошная.
Не полная рамка
Для создания неполной рамки в код вместо свойства border вводятся свойства border-top , border-right , border-bottom , border-left , по отдельности или в различных комбинациях, в зависимости от того, какая граница вам нужна.
< p style color: #008080;">border-left:3px #00B344 double; border-bottom:3px #00B344 double; width: 200px; padding: 5px 0 5px 15px; margin:50px 0 50px 150px; » > текст текст текст текст < /p >
текст текст текст текст
Выравнивание и отступы рамки
Текст внутри рамки можно выровнять по центру или правому краю, добавив в код свойство text-align , которое принимает значения
left — выравнивание по левому краю (по умолчанию)
center — выравнивание по центру
right — выравнивание по правому краю
< p style color: #008080;">border:3px #00B344 ridge; width: 175px; text-align:center; » > текст текст текст текст < /p >
текст текст текст текст
Можно задать для рамки отступы от текста.
Для этого в код рамки вводится свойство padding , которое принимает 4 цифровых значения:
первая цифра — отступ сверху;
вторая цифра — отступ справа;
третья цифра — отступ снизу;
четвёртая цифра — отступ слева.
Отступы задаются в любых доступных в веб единицах размеров.
Если в свойстве padding указать одно значение, то отступы со всех сторон будут одинаковыми.
Если указать два значения, то первая цифра укажет отступы сверху и снизу, а вторая — справа и слева.
< p style color: #008080;">border:3px #00B344 solid; width: 200px; padding: 5px 0 5px 15px; » > текст текст текст текст < /p >
текст текст текст текст
Можно задать отступ от предметов находящихся снаружи рамки.
Для этого в код рамки добавляется свойство margin , которое так же как и padding может принимать 4 цифровых значения.
Сделаем отступы слева, сверху и снизу
< p style color: #008080;">border:3px #00B344 ridge; width: 200px; padding: 5px 0 5px 15px; margin:50px 0 50px 150px; » > текст текст текст текст < /p >
текст текст текст текст
Можно внутри рамки сделать фоновый цвет.
Для этого в код рамки вводится свойство background , в значении которого указывается код цвета.
< p style color: #008080;">background: #F4FC03; border:3px #00B344 ridge; width: 200px; padding: 10px 0 10px 15px; margin:20px; » > текст текст текст текст < /p >
текст текст текст текст
Можно вместе с текстом в рамку вставить картинку. В примере .gif картинка.
< p style color: #008080;">background-color: #F4FC03; border:3px #00B344 ridge;
width: 240px; height:100px; padding: 5px 0 5px 15px; margin:20px 0 0 20px ;»>
< img src color: #008080;">images/i6.jpg «>< br >Текст текст текст текст текст < /p >
Текст текст текст
А если задать ширину рамки ridge пикселей в 15-20, то есть в свойстве border вместо 3px задать 15px, то получится багет.
Текст текст текст
Так же в дизайне рамки можно использовать стилевые свойства border-radius — закругление и box-shadow — тень.
< p style color: #008080;">border:2px solid #555; border-radius:5px; width: 200px; text-align:center; margin:20px; padding:20px; » > текст текст текст текст < /p >
Текст текст текст
< p style color: #008080;">border:2px solid #555; box-shadow:3px 3px 5px #999; width: 200px; text-align:center; margin:20px; padding:20px; » > текст текст текст текст < /p >
Текст текст текст
Как оформляются рамки в CSS и как делается тень, читайте в статьях Рамки CSS и Как сделать тень для блока.
Желаю творческих успехов.
Неужели не осталось вопросов? Спросить
Перемена
\
Вовочка папе: — Папа, а тебя била когда нибудь твоя мама ?
— Нет, только твоя…
Рамки и линии CSS/HTML
Рамки и линии всегда присутствуют практически на любом сайте, они помогают визуально разделить контент, подчеркнуть или обратить внимание пользователя на нужные элементы, и придать дизайну уникальность.
Рамка для блока CSS
Простая рамка для блока CSS может пригодится для галереи, для того, чтобы выделить изображение. Также можно воспользоваться генератором рамки для блока, и там настроить все параметры нужной рамки,а затем скопировать результат.
Пример
HTML
CSS
.block-border < width: 100px; height: 100px; border: 2px solid #f66d52; /* Параметры рамки */ background: #ccc; /* Цвет фона */ >
Рамка внутри блока или картинки при наведении
Чтобы рамка появлялась внутри блока или картинки можно использовать свойство outline-offset. С помощью него можно задать расстояние от края элемента до рамки. Отрицательное значение отображает рамку внутри элемента, положительное — вокруг элемента.
Пример
HTML
CSS
img:hover < outline: 2px dashed #3d1f15; /* Ширина, вид и цвет рамки */ outline-offset: -10px; /* Выводим рамку внутри элемента */ >
Рамка к изображению при наведении
Такая рамка может пригодиться в галерее, а так же если нужно выделить то или иное изображение при наведении. Рамка вокруг изображений делается с помощью свойства border, которое добавляется к селектору img. Чтобы рамка появлялась только при наведении курсора мыши на картинку, следует воспользоваться псевдоклассом :hover.
Пример
HTML
CSS
img:hover < border: 3px solid #413f3f; /* Ширина, вид и цвет рамки */ >
Как добавить вертикальную линию к тексту
Чтобы добавить линию к тексту необходимо задать элементу класс. Такое оформление может пригодиться для цитат, сообщений, предупреждений или передачи какой-то важной информации. Цвет линии и фона можно менять по своему усмотрению. Чтобы линия и фон не прилегали плотно к тексту, расстояние от края до текста регулируется с помощью свойства padding.
CSS: Рамки
Для создания границы у элемента используется свойство border , которое является сокращением от нескольких свойств:
- border-width — ширина границы
- border-style — стиль границы
- border-color — цвет границы
Можно указывать несколько свойств, а можно всё объединить в рамках свойства border . Такой вариант встречается чаще всего и выглядит он так:
.element
- 1px — ширина границы
- solid — стиль границы
- #ccc — цвет границы
Со значениями в пикселях и hex-цветом мы уже сталкивались в рамках курса, а вот стилей границ в CSS восемь:
и есть значение none , которое «удалит» границу, так как при значении border-style: none браузеры игнорируют другие свойства и удаляют границу
Примеры границ
solid (сплошная)
dotted (пунктирная)
dashed (штриховая)
.border-dotted
Задание
Добавьте в редактор с классом border-bold и установите сплошную границу толщиной 5 пикселей. Цвет рамки #2196F3 . Стили запишите в теге
Упражнение не проходит проверку — что делать? ��
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
- Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет ��
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Мой код отличается от решения учителя ��
Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Прочитал урок — ничего не понятно ��
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.
Полезное
- Попробуйте разные стили границ в редакторе
Как добавить рамку вокруг кнопки?
Кнопки в форме создаются с помощью тега или , к этим селекторам и добавляется свойство border, оно одновременно устанавливает толщину рамки, её стиль и цвет. Кнопки могут по разному отображаться в браузерах, но добавление цвета фона или рамки отменяет исходный стиль кнопки и превращают её в прямоугольный «брусок». Далее к нему уже можно применить градиент, скругление углов и другие оформительские вещи. В примере 1 показано создание кнопки, у которой задан цвет фона и рамка.
Пример 1. Цветная кнопка
Кнопка
Вид ссылок показан на рис. 1.
Рис. 1. Вид кнопки в браузере
Предыдущая запись