border-color | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Краткая информация
Версии CSS
Описание
Устанавливает цвет границы на разных сторонах элемента. Свойство позволяет задать цвет границы сразу для всех сторон элемента или только для указанных.
Синтаксис
border-color: [цвет | transparent] {1,4} | inherit
Значения
См. цвет
- transparent
- Устанавливает прозрачный цвет.
- inherit
- Наследует значение родителя.
Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Результат зависит от количества и указан в табл. 1.
| Число значений | Результат |
|---|---|
| 1 | Цвет границы будет установлен для всех сторон элемента. |
| 2 | Первое значение устанавливает цвет верхней и нижней границы, второе — левой и правой. |
| 3 | Первое значение задает цвет верхней границы, второе — одновременно левой и правой границы, а третье — нижней границы. |
| 4 | Поочередно устанавливается цвет верхней, правой, нижней и левой границы. |
Пример
HTML5CSS2.1CSS3IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>border-color</title>
<style>
h2 {
border-color: red white; /* Цвет границы */
border-style: solid; /* Стиль границы */
}
p {
border-color: #008a77; /* Цвет границы */
border-style: solid; /* Стиль границы */
padding: 5px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
</body>
</html>Результат данного примера показан на рис. 1.
Рис. 1. Использование свойства border-color
Объектная модель
[window.]document.getElementById(«elementID»).style.borderColor
Браузеры
Internet Explorer 6 не поддерживает значение transparent. Браузер Internet Explorer до версии 7.0 включительно не поддерживает inherit.
Цвет границы в разных браузерах может несколько различаться при использовании значений стиля groove, ridge, inset или outset.
|
|
|
Как сделать, чтобы элемент текстового поля менял цвет при получении фокуса?
В статье описан особый прием, с помощью которого можно настроить поле таким образом, чтобы при присвоении ему фокуса его граница меняла свой цвет.
Как уже упоминалось не единожды, граница для текстового поля устанавливается посредством свойства CSS border. Следовательно, работа нашего приема будет опираться на возможности этого свойства. За текстовое поле отвечает тег input. Теперь обратимся к сущности понятия фокуса. Его объект получает в том случае, если пользователь кликнул по нему мышью или активизировал каким-либо другим способом. В случае текстового элемента это будет означать перевод курсора к соответствующему полю, что позволяет вводить информацию в него.
Теперь осталось только связать работу свойства border с явлением присвоения фокуса. Это осуществляется с помощью псевдокласса :focus. Его достаточно присвоить соответствующему классу или объектам input или textarea.
Пример кода данного приема приведен ниже:
HTML
<form action=""> <p><input type="text" size="30" /></p> <p><input type="submit" value="Отправить" /></p> </form>
CSS
input.feildtext {
border: 1px solid #ccc;/*цвет рамки при нормальных условиях*/
}
input.feildtext:focus {
border: 1px solid #6733ae;/*цвет рамки при переходе фокуса*/
}Обращаю внимание на то, что данный псевдокласс требует обращения к селектору класса, чтобы изменение цвета границ не распространялось на кнопку отправки формы.
В результате в браузере получаем:
Следует сделать акцент на том, что всеми любимый Internet Explorer на ранних этапов своего становления не поддерживает рассматриваемый в статье псевдокласс. Для разрешения этой проблемы обратимся к скрипту. В этом случае нам помогут события onfocus (присваивающее фокус) и onblur (избавляющее от него). Смотрим пример применения:
HTML
<form action=""> <p><input type="text" size="30" onfocus="this.className='action'" onblur="this.className='text'" /></p> <p><input type="submit" value="Отправить" /></p> </form>
Результат в браузере будет идентичен прошлому случаю.
В каких браузерах работает?
| 8.0+ | 1.0+ | 7.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Оценок: 3 (средняя 5 из 5)
- 3010 просмотров
Понравилась статья? Расскажите о ней друзьям:
Курсы по CSS (в открытом доступе)
Уровень сложности:
Средний
Еще интересное
html — Изменение цвета серой «рамки» на входе [type = text]
Можно ли изменить цвет серой «рамки» вокруг ввода текста без изменения толщины границы с помощью CSS?
Сначала я подумал, что использование
Изображение увеличено на снимке экрана с фрагментом кода ниже, чтобы выделить видимое изменение толщины границы при изменении цвета.
* {
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: column;
}
input[type=text] {
flex: 1 1 0;
margin-bottom: 2px;
}
.different_color {
border-color: red;
}<div>
<input type="text">
<input type="text">
</div>Edit
Для пояснения, граница по умолчанию, которая согласно консоли разработчика имеет border-width 2px, представляется как только часть 2px, в то время как по-прежнему по существу добавляется содержимое с фиксированным 2px. Однако, когда я устанавливаю цвет на границе, он больше не рендерит только эту маленькую часть, а целые 2 пикселя. Изображение ниже показывает это с левой стороной изображения, являющейся границей по умолчанию, и с правой стороны изображения, являющейся границей с border-color установленным на красный.
5
Dan 1 Июн 2020 в 18:01
3 ответа
Лучший ответ
Изменение border-color не изменит border-width как таковое.
Но вы могли заметить, что элементы формы по умолчанию выглядят по-разному в MacOS и в Windows 10. Это происходит потому, что элементы без стилей визуализируются с использованием встроенного стиля платформы. Если вы просмотрите нестандартный <input> в Chrome или Firefox и просмотрите наборы правил, примененные браузером, вы увидите, что вход имеет -webkit-appearance: textfield или -moz-appearance: textfield соответственно. Это заставляет браузер применять эти специфичные для платформы стили, которые переопределяют даже настройки браузера по умолчанию.
(В Firefox вы можете поэкспериментировать со свойством appearance и сделать <div> визуализацией как элемент ввода с собственным стилем и сделать <span> похожим на кнопку, добавив appearance свойство, как показано в следующем фрагменте)
div {
display: block;
width: 100px;
height: 20px;
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
}
span {
display: block;
width: 100px;
height: 20px;
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
}<div></div>
<span></span>Когда вы начнете стилизовать элемент формы, произойдет следующее: appearance набор правил будет удален, и браузер применит вместо него настройки браузера по умолчанию. Что касается входного элемента, он имеет border-style: inset и border-width: 2px по умолчанию в Chrome. Это то, что вы видите. Вот почему ширина и стиль меняется, когда вы меняете цвет. И именно поэтому вы не можете просто изменить цвет границы.
Вам нужно будет вручную «оформить свой путь назад», чтобы имитировать собственный элемент формы платформы.
2
agrm 1 Июн 2020 в 21:10
Вы также должны указать стиль границы:
.specialborder{
border: 1px solid red;
}
0
VladS 1 Июн 2020 в 15:20
Как сказал @sergiu reznicencu ,
кажется, что установка цвета также сбрасывает ширину.
При установке цвета он сбрасывается до 2.
Различные браузеры также показывают разные значения ширины браузера. Некоторые говорят, что 1px, а некоторые 2px, в то время как граница на самом деле меньше 1px в ширину.
Значение по умолчанию, согласно W3schools и Разработчики Mozilla, начальное (значение по умолчанию) среднее. Если вы установите границу с border-width: medium, она будет толще, чем по умолчанию.
input {
width: 100%;
margin-bottom: 5px;
}
.custom-clr-only {
border-color: red;
}
.custom {
border: medium solid green;
}<input type="text">
<input type="text">
<input type="text">0
Community 20 Июн 2020 в 09:12
CSS-рамка
CSS-рамка элемента представляет собой одну или несколько линий, окружающих содержимое элемента и его поля padding. Рамка задаётся с помощью краткого свойства border. Стиль рамки задается с помощью трех свойств: стиль, цвет и ширина.
Оформление рамок HTML-элементов с помощью CSS-свойств
1. Стиль рамки border-style
По умолчанию рамки всегда отрисовываются поверх фона элемента, фон распространяется до внешнего края элемента. Стиль рамки определяет ее отображение, без этого свойства рамки не будут видны вообще. Для элемента можно задавать рамку для всех сторон одновременно с помощью свойства border-style или для каждой стороны отдельно с помощью уточняющих свойств border-top-style и т.д. Не наследуется.
| border-style (border-top-style, border-right-style, border-bottom-style, border-left-style) | |
|---|---|
| Значения: | |
| none | Значение по умолчанию, означает отсутствие рамки. Также убирает рамку элемента из группы элементов с установленным значением данного свойства. |
| hidden | Эквивалентно none. |
| dotted | dotted |
| dashed | dashed |
| solid | solid |
| double | double |
| groove | groove |
| ridge | ridge |
| inset | inset |
| outset | outset |
| {1,4} | Одновременное перечисление четырех разных стилей для рамок элемента, только для свойстваborder-style:{border-style: solid dotted none dotted;} |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
p {border-style: solid;}
p {border-top-style: solid;}2. Цвет рамки border-color
Свойство задаёт цвет рамок всех сторон одновременно. С помощью уточняющих свойств можно установить свой цвет для рамки каждой стороны элемента. Если для рамки цвет не задан, то он будет таким же, как и цвет текста элемента. Если в элементе нет текста, то цвет рамки будет таким же, как и цвет текста родительского элемента. Не наследуется.
| border-color (border-top-color, border-right-color, border-bottom-color, border-left-color) | |
|---|---|
| Значения: | |
| transparent | Устанавливает прозрачный цвет для рамки. При этом ширина рамки остается. Можно использовать для смены цвета рамки при наведении курсора мыши на элемент, чтобы избежать смещение элемента. |
| цвет | Цвет рамок задается при помощи значений свойства color.{border-color: #cacd58;} |
| {1,4} | Одновременное перечисление четырех разных цветов для рамок элемента, только для свойстваborder-color:{border-color: #cacd58 #5faf8a #b9cea5 #aab238;} |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
p {border-color: #cacd58;}3. Ширина рамки border-width
Ширина рамки задается с помощью единиц измерения длины или ключевых слов. Если для свойства border-style задано значение none, и для рамки элемента установлена какая-то ширина, то в данном случае ширина рамки приравнивается к нулю. Не наследуется.
| border-width (border-top-width, border-right-width, border-bottom-width, border-left-width) | |
|---|---|
| Значения: | |
| thin / medium / thick | Ключевые слова, устанавливают ширину рамки относительно друг друга. Первое значение уже, чем второе, второе — тоньше третьего. Значение по умолчанию — medium |
| width (px, em) | {border-width: 5px;} |
| {1,4} | Возможность одновременного задания четырех разных ширин для рамок элемента, только для свойстваborder-width:{border-width: 5px 10px 15px 3px;} |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
p {border-width: 2px;}4. Задание рамки одним свойством
Свойство border позволяет объединить в себе следующие свойства: border-width, border-style, border-color, например:
div {
width: 100px;
height: 100px;
border: 2px solid grey;
}При этом заданные свойства будут применяться ко всем границам элемента одновременно. Если какое-то из значений не указано, его место займет значение по умолчанию.
5. Задание рамки для одной границы элемента
В случае, когда необходимо задать разный стиль границ элемента, можно воспользоваться краткой записью для соответствующей границы.
Перечисленные ниже свойства объединяют в одно объявление следующие свойства: border-width, border-style и border-color. Перечень свойств указывается в заданном порядке, при этом одно или два значения могут быть пропущены, в этом случае их значения примут значения по умолчанию.
Стиль верхней границы задается с помощью свойства border-top, нижней — border-bottom, левой — border-left, правой — border-right.
Синтаксис
p {border-top: 2px solid grey;}Как изменить цвет со свойством border-collapse
От автора: быстрое решение проблемы, с которой многие из вас должны были сталкиваться: свойство border-collapse работает замечательно до тех пор, пока перекрытие не начинает мешать вам изменять цвет границы элемента. Свойство border-collapse отлично подходит даже для создания рамок вокруг ячеек таблиц table. Таблица смотрится чище, и мне это нравится.
Однако есть одна проблема, которая влияет на то, как браузер отрисовывает ячейки и их границы. Во время отрисовки каждая следующая ячейка расположена под предыдущей. То есть если границы в таблице разного цвета, то некоторые из граней будут спрятаны под другими.
Проблема
Наведите курсор мыши на ячейки в демо ниже, чтобы посмотреть, какие грани скрыты.
Так как свойство z-index не работает на ячейках таблицы table, нам придется работать с контентом этих ячеек.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееРешение
Шаг 1
Честное предупреждение: в решении будут применяться отрицательные margin’ы. Тем, кому не по душе отрицательные внешние отступы, предлагаю отвернуться.
Сперва, необходимо добавить блок-обертку для контента ячейки. Затем передвинуть рамку, padding и т.д. внутрь контента.
Наша проблема перевернулась с ног на голову: нижняя и правая границы теперь показываются сверху.
Шаг 2
Теперь необходимо добавить свойство z-index состоянию :hover, чтобы оно располагалось выше других элементов. Это сработает, так как мы применяем свойство z-index к контенту внутри ячеек таблицы, а не к самим ячейкам td.
Убедитесь, что свойство z-index не участвует в анимации со свойством transition, иначе предыдущая скрытая граница будет появляться резко, а не плавно.
Автор: Daniel Jauch
Источник: //css-tricks.com/
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееPSD to HTML
Верстка сайта на HTML5 и CSS3 с нуля
Смотретьдобавление, управление цветом, шириной и стилем
Рамка представляет собой обычную линию, которая отображается вокруг элемента. Но совсем не обязательно применять рамку, окружающую элемент со всех сторон. Можно добавить ее только с требуемой стороны элемента. Например, если добавить рамку только с нижней стороны блочного элемента, то она будет производить тот же эффект, что и HTML тег <hr>, выступая в качестве разделителя.
Каждая рамка имеет три параметра, которыми мы можем управлять с помощью CSS: ширина, стиль и цвет, рассмотрим с помощью каких свойств можно их задавать и изменять:
- border-width — задает ширину рамки. Для установки ширины можно использовать пиксели или ключевые слова:
thin,medium,thick. - border-style — определяет стиль рамки с помощью одного из восьми возможных значений:
solid,dotted,dashed,double,groove,ridge,insetиoutset. - border-color — указывает цвет рамки.
Вместо использования всех трех свойств, можно использовать всего одно — CSS свойство border, которое позволяет одновременно задать ширину, стиль и цвет для рамки в одном объявлении:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Название документа</title>
<style>
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
border-color: red;
}
p.three {
border: 3px dashed #ffffff;
background-color: #0000FF;
color: #ffffff;
}
</style>
</head>
<body>
<p>Первый абзац.</p>
<p>Второй абзац.</p>
<p>Третий абзац.</p>
</body>
</html>
Попробовать »Для управления рамкой отдельно с каждой стороны элемента, используются соответствующие свойства:
Эти свойства работают точно так же, как и CSS свойство border, с тем исключением, что позволяют управлять рамкой только с одной стороны стилизуемого элемента.
С этой темой смотрят:
border-color — CSS: Cascading Style Sheets
Это свойство является сокращением для следующих свойств CSS:
цвет границы: красный;
цвет границы: красный # f015ca;
цвет границы: красный rgb (240,30,50, 0,7) зеленый;
цвет границы: красный желтый зеленый синий;
цвет границы: наследовать;
цвет границы: начальный;
цвет границы: вернуться;
цвет границы: не задано;
Свойство border-color может быть указано с использованием одного, двух, трех или четырех значений.
- Когда указано одно значение , он применяет один и тот же цвет к всем четырем сторонам .
- Когда указаны два значения , первый цвет применяется к верхнему и нижнему , второй — к левому и правому .
- Когда указаны три значения , первый цвет применяется к верхнему , второй к левому и правому , третий к нижнему .
- Когда указаны четыре значения , цвета применяются к верхнему , правому , нижнему и левому в указанном порядке (по часовой стрелке).
Значения
-
<цвет> - Определяет цвет границы.
<цвет> {1,4} , где
<цвет> = | | | | <шестнадцатеричный цвет> | <имя-цвета> | текущий цвет | <цвет устаревшей системы>
, где
= rgb (<процент> {3} [/ ]?) | rgb (<число> {3} [/ <альфа-значение>]?) | rgb (<процент> # {3}, <альфа-значение>?) | rgb (<число> # {3}, <альфа-значение>?)
= rgba (<процент> {3} [/ <альфа-значение>]?) | rgba (<число> {3} [/ <альфа-значение>]?) | rgba (<процент> # {3}, <альфа-значение>?) | rgba (<число> # {3}, ?)
= hsl ( [/ ]?) | hsl (<оттенок>, <процент>, <процент>, <альфа-значение>?)
= hsla (<оттенок> <процент> <процент> [/ <альфа-значение>]?) | hsla (<оттенок>, <процент>, <процент>, <альфа-значение>?)
, где
<альфа-значение> = <число> | <процент>
<оттенок> = <число> |
Полное использование цвета границы
HTML
border-color: red; эквивалентен
-
border-top-color: красный;
-
border-right-color: красный;
-
border-bottom-color: красный;
-
border-left-color: красный;
border-color: золотисто-красный; эквивалентен
-
border-top-color: gold;
-
border-right-color: красный;
-
border-bottom-color: gold;
-
border-left-color: красный;
border-color: красный голубой золотой; эквивалентен
-
border-top-color: красный;
-
border-right-color: голубой;
-
border-bottom-color: gold;
-
border-left-color: голубой;
border-color: красный, голубой, черный, золотой; эквивалентен
-
border-top-color: красный;
-
border-right-color: голубой;
-
border-bottom-color: черный;
-
border-left-color: gold;
CSS
#justone {
цвет границы: красный;
}
#horzvert {
цвет границы: золотисто-красный;
}
#topvertbott {
цвет границы: красно-голубой золотой;
}
#trbl {
цвет границы: красный голубой черный золотой;
}
div {
граница: сплошная 0.3em;
ширина: авто;
маржа: 0,5em;
заполнение: 0.5em;
}
ul {
маржа: 0;
стиль списка: нет;
}
Результат
таблицы BCD загружаются только в браузере
- Свойства CSS, связанные с цветом границы:
border,border-top-color,border-right-color,border-bottom-color,border-left -цвет, - Другие свойства CSS, связанные с границами:
border-width,border-style - Тип данных
<цвет> - Другие свойства, связанные с цветом:
цвет,цвет фона,цвет контура,цвет украшения текста,цвет выделения текста,тень текста,цвет кареткииcolumn-rule-color - Применение цвета к элементам HTML с помощью CSS
Что делает атрибут HTML Bordercolor для ваших таблиц? [Подсказка: цвет!] »
Атрибут« Цвет границы таблицы »устарел.Для его исторического значения предоставляется следующая информация.Этот атрибут устарел и не должен использоваться. Поддержка этого атрибута браузером ограничена, и его использование может привести к неожиданным результатам. Вместо
bordercolor используйте CSS для стилизации таблиц.Атрибут
BORDERCOLOR В этом разделе мы рассмотрим настройку цветов границ таблицы. Сначала мы рассмотрим настройку границ одного цвета. Далее мы рассмотрим настройку светлых и темных оттенков границы.
Цвет границ таблицы в целом устанавливается с помощью атрибута Вот как это выглядит: Netscape и MSIE используют разные способы визуализации В предыдущем примере мы установили один цвет для всех границ стола. На этой странице мы рассмотрим настройку «светлых» и «темных» границ по отдельности.Обратите внимание, что в настоящее время только MSIE распознает разметку, необходимую для отдельной установки светлых и темных границ. Светлые и темные границы устанавливаем с помощью Вот как этот код отображается в браузере, но учтите, что это устаревший атрибут, и он может некорректно отображаться в современных браузерах. Netscape и MSIE распознают Например, этот код говорит, что общий цвет границы синий, но также указывает, что светлая часть является светло-синей, а темная часть — обычным синим: Вот как этот код отображается в браузере, но учтите, что это устаревший атрибут, и он может некорректно отображаться в современных браузерах. В этой статье вы узнаете, как применить условное форматирование к границам таблицы в Outlook. Я покажу вам, как изменить их цвет, ширину и стиль. Затем я научу вас вносить несколько изменений одновременно и раскрашивать таблицу Outlook разными способами. Прежде всего, я хотел бы сделать небольшую заметку для новичков в этом блоге. Поскольку сегодня мы поговорим об условном форматировании в шаблонах, я покажу вам, как правильно их настроить с помощью надстройки общих шаблонов электронной почты для Outlook. Этот инструмент может помочь вам вставить заранее сохраненные идеально отформатированные шаблоны в ваши электронные письма и сократить рутинную переписку до нескольких щелчков мышью. Если вы уже читали мое руководство по условному форматированию в таблицах Outlook, вы знаете, как изменить содержимое ячеек и цвет фона.Однако это еще не все, что вы можете сделать, чтобы сделать вашу таблицу в Outlook ярче. Сегодня я покажу вам способы условного раскрашивания границ таблицы и изменения их ширины и стиля. Более того, небольшой бонус ждет вас в последней главе, где я покажу вам, как применить несколько модификаций одновременно и сделать ваш стол таким же красочным и ярким, как фейерверк 4 -го июля;) Чтобы показать вам, как работает рисование границ, я воспользуюсь теми же образцами из урока прошлой недели.Дело в следующем: я вставляю шаблон и выбираю ставку скидки для заполнения таблицы. В зависимости от моего выбора границы ячейки будут окрашены в определенный цвет. Таблица, которую я раскрашу сегодня, будет следующей: Поскольку условное форматирование обрабатывается в HTML-коде шаблонов, давайте сначала откроем HTML-код этой таблицы: Если вам интересно узнать о цветах и их связи со ставками скидок, я дам вам подсказку 🙂 Dataset! Понятия не имею, что это такое? Затем сделайте небольшую паузу и сначала прочтите мое руководство по заполняемым шаблонам Outlook. Вот исходный набор данных, который я буду использовать в начале и немного улучшу в нескольких главах: Когда мне нужно получить необходимый цветовой код из этой таблицы, я использую следующий макрос: ~% WhatToEnter [{набор данных: ‘Набор данных со скидками’, столбец: ‘Цветовой код’}] Так как мы рассмотрели все основы, давайте начнем менять цвета 🙂 Чтобы раскрасить границы отдельной ячейки в таблице, давайте сначала найдем ее строку в HTML-коде шаблона и подробнее рассмотрим ее компоненты: Эта строка кода означает, что я увижу ячейку с серыми границами в 1 пиксель сплошного стиля. Если я заменю любой из этих параметров, это может испортить внешний вид таблицы в моем шаблоне, т.е. границы будут невидимы (хотя после вставки все будет выглядеть идеально). Мне бы хотелось, чтобы в шаблоне была стандартная таблица и чтобы она изменялась при вставке.Итак, я добавляю один новый атрибут с параметрами, которые заменят исходные при вставке: Давайте рассмотрим строку HTML выше: Следовательно, полный HTML-код с ячейкой будущего цвета будет выглядеть так: <тело> При вставке этого шаблона граница обновленной ячейки сразу будет окрашена в выбранный цвет: Теперь давайте закрасим границы всей строки в нашей таблице-образце и посмотрим, как это работает.Логика абсолютно такая же, как и в предыдущем абзаце, за исключением того, что вам нужно будет обновить все ячейки второй строки. После того, как те же изменения, которые я описал выше, применяются ко всей строке, она окрашивается в мгновение ока при вставке шаблона. Если вы хотите взглянуть на готовый HTML-код с раскраской второй строки, то вот он: <тело> Теперь попробуем обновить не только цвет границы, но и ее ширину.Еще раз взгляните на атрибут HTML, который заменяет исходный при вставке: data-set-style = «border: 1 пикселей сплошной; цвет границы: ~% WhatToEnter [{набор данных: ‘Набор данных со скидками’, столбец: ‘Цветовой код’}]»> ~% WhatToEnter [{набор данных: «Набор данных со скидками», столбец: «Скидка», заголовок: «Выберите скидку»}] скидка Видите параметр 1px ? Это ширина окрашиваемых границ. Вы можете вручную изменить его, скажем, на 2, и после вставки границы таблицы станут шире. Однако я сделаю это по-другому. Я обновлю свой набор данных и добавлю новый столбец с шириной границ. В этом случае, как только я выберу текущую скорость для вставки, и цвет, и ширина будут обновлены. Теперь давайте изменим второй атрибут каждой строки и заменим 1px следующим фрагментом текста: border-width: ~% WhatToEnter [{набор данных: ‘Набор данных со скидками’, столбец: ‘Ширина границы’}] Затем я повторяю это для всех трех ячеек второй строки и в результате получаю следующий HTML: <тело> После сохранения и вставки этого шаблона в электронном письме появятся расширенные синие границы: В этой главе я хочу обратить ваше внимание на еще один параметр — стиль.Этот будет обрабатывать внешний вид границ. Прежде чем я покажу вам, как правильно применить его, мне нужно будет вернуться к моему набору данных и изменить его в соответствии с моим текущим случаем. Я связал каждую ставку скидки со стилем границы и сохранил этот набор данных для будущего.Макрос для получения стиля для моего HTML будет следующим: ~% WhatToEnter [{набор данных: «Набор данных со скидками», столбец: «Стиль границы»}] Теперь мне нужно обновить атрибуты второй строки, заменив solid (стиль по умолчанию, который я использовал все время) на макрос выше, чтобы получить следующий фрагмент кода: data-set-style = «border: 1px #aeabab; border-style: ~% WhatToEnter [{набор данных: ‘Набор данных со скидками’, столбец: ‘Стиль границы’}] Вот окончательный HTML: <тело> Если вы скопируете этот HTML-код и вставите его в свои шаблоны, результат не заставит себя ждать: Мы подошли к самому интересному, и я собираюсь показать вам, как применять несколько модификаций одновременно.Во-первых, я обновлю набор данных, из которого буду получать данные. Поскольку я решил изменить выделение ячеек, цвет текста и ширину границ, все эти параметры необходимо указать. Следовательно, мой новый набор данных будет выглядеть так: Итак, если я выберу 10%, необходимый текст будет окрашен в синий цвет (# 00B0F0 ), фон выбранных ячеек будет заштрихован голубым тоном (# DEEBF6 ), а их границы будут расширены. дважды. Но как этот набор данных можно связать с таблицей Outlook, чтобы он был отформатирован? Я подготовил вас к этой задаче в двух статьях 🙂 Вот HTML, который обработает все необходимые изменения: Теперь посмотрим на все внесенные изменения: Я очень надеюсь, что мне удалось убедить вас, что таблица в Outlook — это не просто черные рамки с простым текстом.Есть много возможностей для совершенствования и творчества 🙂 Если вы решите провести несколько собственных экспериментов с рисованием, просто установите общие шаблоны электронной почты из Microsoft Store и наслаждайтесь! Если остались какие-то вопросы, вам нужна помощь с условным форматированием в таблицах Outlook, просто оставьте несколько слов в разделе комментариев, и мы разберемся;) В Html мы можем добавить границу двумя способами: Если мы хотим добавить границу в Html с помощью встроенного атрибута стиля, то мы должны выполнить шаги, указанные ниже.Используя эти шаги, любой пользователь может легко создать границу. Шаг 1: Во-первых, мы должны ввести код Html в любом текстовом редакторе или открыть существующий файл Html в текстовом редакторе, в котором мы хотим использовать встроенное свойство для добавления границы. <Голова> <Название> Добавьте границу, используя встроенное свойство <Тело> BORDERCOLOR тега .Например, этот код устанавливает границу красного цвета:
морковь
чеснок
сельдерей
лук
морковь чеснок сельдерей лук BORDERCOLOR .Netscape сохраняет трехмерный вид. MSIE отображает все границы одинакового цвета, делая границу плоской. MSIE также устанавливает цвет внутренних границ. Браузер Как это выглядит Internet Explorer Netscape Границы таблицы: светлые и темные
BORDERCOLORLIGHT и BORDERCOLORDARK . Так, например, этот код устанавливает светлые границы на желтый, а темные на синие:
бла-бла-бла
да да да
что угодно
Хорошо!
бла-бла-бла да да да все равно что угодно точно! Одновременное использование всех трех атрибутов
BORDERCOLOR BORDERCOLOR , но в настоящее время только MSIE распознает BORDERCOLORLIGHT и BORDERCOLORDARK . Однако вы можете использовать все три сразу, потому что MSIE игнорирует BORDERCOLOR , если находит BORDERCOLORLIGHT и BORDERCOLORDARK .Вы можете использовать эту функцию, чтобы получить немного больше контроля над цветами границ, чем если бы вы использовали только один или два из этих атрибутов.
бла-бла-бла
да да да
что угодно
Хорошо!
Адам — технический писатель, специализирующийся на документации и учебных пособиях для разработчиков. бла-бла-бла да да да все равно что угодно точно! Изменить цвет, ширину и стиль границы в таблице Outlook
Изменить цвет границ ячеек
Пример заголовка 1 Образец заголовка 2 Образец заголовка 3 ~% WhatToEnter [{набор данных: ‘Набор данных со скидками’, столбец: ‘Скидка’, заголовок: ‘Выберите скидку’}] скидка Скидка Код цвета 10% # 00B0F0 15% # 00B050 20% # FFC000 25% # 4630A0 Обновить цвет границы одной ячейки
~% WhatToEnter [{набор данных: ‘Набор данных со скидками’, столбец: ‘Скидка’, заголовок: ‘Выберите скидку’}] скидка ~% WhatToEnter [{набор данных: ‘ Набор данных со скидками », столбец:« Скидка », заголовок:« Выберите скидку »}] скидка Пример заголовка 1 Пример заголовка 2 Пример заголовка 3 ~% WhatToEnter [{набор данных: ‘ Набор данных со скидками », столбец:« Скидка », заголовок:« Выберите скидку »}] скидка & nbsp; & nbsp; Закрасьте границы всего ряда
Пример заголовка 1 Пример заголовка 2 Пример заголовка 3 ~% WhatToEnter [ {набор данных: «Набор данных со скидками», столбец: «Скидка», заголовок: «Выберите скидку»}] скидка & nbsp; & nbsp; Изменить ширину границы
Скидка Код цвета Ширина границы 10% # 00B0F0 2 15% # 00B050 2,5 20% # FFC000 3 25% # 4630A0 3.5 Пример заголовка 1 Пример заголовка 2 Пример заголовка 3 ~% WhatToEnter [{набор данных: ‘Набор данных со скидками’, столбец: ‘Скидка’, заголовок: ‘Выбрать скидку’}] скидка < / td> & nbsp; & nbsp; Изменить стиль границ в таблице
Скидка Бордюр 10% Штрих 15% двойной 20% Пунктирная 25% Ридж Пример заголовка 1 Пример заголовка 2 Пример заголовка 3 ~% WhatToEnter [{набор данных: ‘Набор данных со скидками’, столбец: ‘Скидка’, заголовок: ‘Выберите скидку’}] скидка & nbsp; & nbsp; Настройте условное форматирование для одновременного изменения выделения, цвета текста и ширины границ
Скидка Код цвета Справочный код Ширина границы 10% # 00B0F0 # DEEBF6 2 15% # 00B050 # E2EFD9 2.5 20% # FFC000 # FFF2CC 3 25% # 4630A0 # FBE5D5 3,5 Пример заголовка 1 < Образец заголовка 2 < / span> Пример заголовка 3 ~% WhatToEnter [{набор данных : «Набор данных со скидками», столбец: «Скидка», заголовок: «Выберите скидку»}] скидка & nbsp; & nbsp; Вас также может заинтересовать
Как добавить границу в Html
Использование атрибута встроенного стиля
Здравствуйте, пользователь
Вы находитесь на сайте JavaTpoint