Границы используются на HTML-страницах для разграничения и выделения содержимого. Если на странице много информации и вы хотите привлечь внимание пользователя к определенным частям, используйте границы вокруг этого контента. В этой статье о границах в CSS я рассмотрю следующие темы:
- Когда использовать границы
- Границы в CSS
- Атрибуты границы CSS
- Значения по умолчанию для атрибутов границы
- Сокращенное определение границ
- Что следует помнить при разработке границ в CSS
Когда использовать границы
Стандартной практикой является использование тегов границ CSS для определения границ на страницах HTML для:
- Вокруг важных заголовков
- Чтобы выделить постскриптум или важные заметки
- Приложить картинки, иллюстрации, цитаты людей, видео
- Чтобы привлечь внимание к ценам, срокам или другой важной информации
Возможно, вы захотите прочитать прежде чем приступить к изучению границ CSS.
Подробное руководство по CSS можно найти на сайте Edureka CSS Учебник для начинающих . Вы получите отличную информацию о том, как использовать CSS для улучшения веб-дизайна HTML.
Границы в CSS
CSS-границы могут быть назначены различным разделам HTML-страницы, будь то заголовки или абзацы. Начнем с примера. Здесь мы определяем границу вокруг заголовка и другую границу вокруг текста абзаца.
body {background-color: lightblue} h1 {text-align: center border-style: solid} p {font-family: verdana font-size: 20px border-style: dotted}Рамка вокруг абзаца тоже!
Атрибуты границы CSS
У границ CSS есть 3 основных атрибута.
Рекурсия Фибоначчи в C ++
- стиль:ВстильАтрибут определяет узор границы.
- цвет: Цвет может быть любым из набора цветов CSS.
- ширина: Ширина используется для изменения толщины границы, чтобы сделать ее более заметной.
В приведенном выше примере мы видели, что определен только один атрибут границы, а именно его стиль. Другие атрибуты, если они не определены, принимают значения по умолчанию. Есть еще один атрибут, называемый радиусом, который используется реже. Он используется для закругления краев границы.
- пограничный стиль атрибут
| Стиль | Описание |
| стиль границы: твердый | |
| стиль границы: двойной | |
| стиль границы: паз | |
| стиль границы: гребень | |
| стиль границы: вставка | |
| стиль границы: начало | |
| стиль границы: нет | |
| стиль границы: скрытый | |
| стиль границы: пунктирная | |
| стиль границы: пунктирная |
Вы могли бы заметить, что есть опции «без рамки» и «скрытая граница». Разработчик может просто избежать определения границы, зачем явно определять ее как «скрытую границу»? Это сделано для использования места и выравнивания с другими элементами на странице.
Стили границ также могут быть смешаны внутри элемента. Для этого можно отдельно определить 4 стороны границы с разными стилями. Это можно сделать 2 способами. Либо определите все 4 стороны в одном теге. В этом случае счет начинается с верхней строки и затем движется по часовой стрелке. В качестве альтернативы, каждая из 4 границ может быть определена в отдельных тегах. Оба случая показаны в следующем примере.
| Стиль | Описание |
| border-style: пунктирная сплошная сплошная двойная border-top-style: пунктирная border-right-style: пунктирная стиль нижнего края: сплошной граница-левый-стиль: двойной |
- цвет границы атрибут
Атрибут цвета для границы можно установить несколькими способами. Это похоже на установку цвета для других элементов. Цвета можно установить одним из следующих способов:
- имя - укажите название цвета, например «синий». Вы также можете попробовать несколько необычных цветов, например «BlanchedAlmond»!
- Шестигранник - укажите шестнадцатеричное значение, например «# ff0000»
- RGB - установить код RGB. Например, rgb (255,255,0) означает желтый.
- установка - например, «прозрачный» или «непрозрачный»
- ширина рамки атрибут:
Свойство width, как следует из названия, определяет толщину 4 сторон границы. Если определено одно значение, оно предназначено для всех сторон, в противном случае также могут быть установлены отдельные значения ширины.
это отношения Java
Ширина может быть указана в любых стандартных единицах измерения, таких как пиксели («px»), точки («pt») или сантиметры («cm»). Вы также можете указать ширину, используя предварительно определенные значения «толстый», «тонкий» и «средний».
| Стиль | Описание |
| ширина границы: 10 пикселей | |
| ширина границы: 0,1 см | |
| ширина границы: средняя |
- border-radius атрибут
Цель определения радиуса - получить закругленные углы границы. Коэффициент радиуса определяет степень округлости. Чем больше значение, тем более изогнутыми становятся углы. Как правило, значения радиуса составляют от 1 до 3 ширины границы.
Следующий код сгенерирует:
ширина границы: 10 пикселей
радиус границы: 30 пикселей
Значения по умолчанию для атрибутов границы
Единственный обязательный атрибут - это стиль . Если стиль отсутствует, граница не появится.
Если цвет не указан, в качестве значения по умолчанию принимается цвет нижележащего элемента. Например, если цвет текста абзаца определен как «синий», то цвет границы по умолчанию также будет синим. Если нет определения цвета даже для элемента, то цвет по умолчанию - «черный».
Значение ширины по умолчанию - «средний».
Сокращенное определение границ
Некоторые разработчики предпочитают определять атрибуты границы в кратком однострочном теге. Этот сокращенный формат помогает минимизировать количество строк кода, и опытные разработчики предпочитают этот формат. Использование сокращенного формата рекомендуется, когда определение границы простое и достаточно стандартизованное. Однако, если вам нужно выделить каждую сторону границы в другом стиле, вам нужно придерживаться формата определения отдельных тегов.
Используется следующий код:
стиль границы: пунктирная
цвет границы: зеленый
ширина границы: 5 пикселей
граница: пунктирная зеленая 5 пикселей
как использовать spyder python
Что следует помнить при разработке границ в CSS
Не используйте слишком много границ на странице, это может отвлекать пользователя и затруднять сосредоточение внимания.
Важно сохранять единообразие стиля и цветов границ. Элементы на одном уровне иерархии на странице должны иметь одинаковый стиль границы и ширину для единообразия. Например, если пункт определяется сплошной рамкой и шириной 5 пикселей, сохраняйте этот формат во всех остальных пункт элементы во время дизайна веб-сайта.
Придерживайтесь одного стиля определений тегов. Некоторым разработчикам удобны определения ярлыков, в которых все значения назначаются одному граница тег. Некоторые предпочитают явный список всех тегов для ширины, цвета и стиля. По соглашению, когда на странице требуется сложное оформление границ, отдельные теги указываются отдельно. Это помогает при отладке таких настраиваемых определений границ. В обычных случаях подойдет просто краткое определение.
Надеюсь, вы нашли информацию, которую искали, о границах CSS, и wНа этом мы подошли к концу статьи «Границы в CSS».
Ознакомьтесь с нашими который включает в себя живое обучение под руководством инструктора и реальный проектный опыт. Это обучение поможет вам овладеть навыками работы с серверными и интерфейсными веб-технологиями. Он включает обучение веб-разработке, jQuery, Angular, NodeJS, ExpressJS и MongoDB.
Есть вопрос к нам? Пожалуйста, укажите это в разделе комментариев блога «Граница в CSS», и мы свяжемся с вами.