Свойство css border: -moz-border-bottom-colors | htmlbook.ru

Leave a Comment / Css / By /

border — Учебник CSS — Schoolsw3.com

schoolsw3.com

САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ

❮ Назад Далее ❯

CSS border

CSS свойства border позволяют задать стиль, ширину и цвет границ элемента.

У меня есть границы со всех сторон.

У меня есть красная нижняя граница.

У меня есть округлые границы.

У меня есть синяя левая граница.

CSS border-style

Свойство border-style указывает, какую границу отображать.

Допустимы следующие значения:

  • dotted — Определяет границу штрихом
  • dashed — Определяет границу пунктиром
  • solid — Определяет границу сплошной
  • double — Определяет границу двойной
  • groove — Определяет 3D границу желобом. Эффект зависит от значение border-color
  • ridge — Определяет 3D границу коньком. Эффект зависит от значение border-color
  • inset — Определяет 3D границу вставкой. Эффект зависит от значение border-color
  • outset — Определяет 3D границу начальной. Эффект зависит от значение border-color
  • none — Определяет без границ
  • hidden — Определяет скрытые границы

Свойство border-style может иметь от одного до четырех значений (для верхней границы, правой границы, нижней границы и левой границы).

Пример

Демонстрация различных стилей границ:

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

Результат:

Штрихованные границы.

Пунктирные границы.

Сплошные границы.

Двойные границы.

Границы желобом. Эффект зависит от значение border-color.

Границы коньком. Эффект зависит от значение border-color.

Границы вставкой. Эффект зависит от значение border-color.

Границы начальные. Эффект зависит от значение border-color.

Границ нет.

Границы скрыты.

Смешанные границы.

Попробуйте сами »

Примечание: Ни одно из свойств границ CSS описаны ниже (подробнее об этом вы узнаете в следующих главах) не будут иметь никакого эффекта, если не установлено свойство border-style!

❮ Назад Далее ❯

ВЫБОР ЦВЕТА
ТОП Учебники
HTML Учебник
CSS Учебник
JavaScript Учебник
КАК Учебник
SQL Учебник
Python Учебник
W3.CSS Учебник
Bootstrap Учебник
PHP Учебник
Java Учебник
C++ Учебник
jQuery Учебник
ТОП Справочники
HTML Справочник
CSS Справочник
JavaScript Справочник
SQL Справочник
Python Справочник
W3.
CSS Справочник
Bootstrap Справочник
PHP Справочник
HTML Цвета
Java Справочник
Angular Справочник
jQuery Справочник
ТОП Примеры
HTML Примеры
CSS Примеры
JavaScript Примеры
КАК Примеры
SQL Примеры
Python Примеры
W3.CSS Примеры
Bootstrap Примеры
PHP Примеры
Java Примеры
XML Примеры
jQuery Примеры

Форум | О SchoolsW3

SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.

Авторское право 1999- Все права защищены.
SchoolsW3 работает на площадке от SW3.CSS.

Основы работы с XHTML и CSS

Главная / Интернет-технологии / Основы работы с XHTML и CSS / Тест 8

Упражнение 1:

Номер 1

Для чего используется тэг <table>?

Ответ:

&nbsp(1) для создания таблиц&nbsp

&nbsp(2) определяет строки таблицы&nbsp

&nbsp(3) определяет ячейки таблицы&nbsp


Номер 2

Для чего используется тэг 
 
<tr>?

Ответ:

&nbsp(1) для создания таблиц&nbsp

&nbsp(2) определяет строки таблицы&nbsp

&nbsp(3) определяет ячейки таблицы&nbsp


Номер 3

Для чего используется тэг <td>?

Ответ:

&nbsp(1) для создания таблиц&nbsp

&nbsp(2) определяет строки таблицы&nbsp

&nbsp(3) определяет ячейки таблицы&nbsp


Упражнение 2:

Номер 1

Сколько тэгов <td> используется в таблице размером 3Х3?

Ответ:

&nbsp(1) 1&nbsp

&nbsp(2) 3&nbsp

&nbsp(3) 9&nbsp


Номер 2

Сколько тэгов <tr> используется в таблице размером 3Х3?

Ответ:

&nbsp(1) 1&nbsp

&nbsp(2) 3&nbsp

&nbsp(3) 9&nbsp


Номер 3

Сколько тэгов <table> используется в таблице размером 3Х3?

Ответ:

&nbsp(1) 1&nbsp

&nbsp(2) 3&nbsp

&nbsp(3) 9&nbsp


Упражнение 3:

Номер 1

Назовите количество возможных значений свойства CSS border-collapse

Ответ:

&nbsp(1) 2&nbsp

&nbsp(2) 3&nbsp

&nbsp(3) 4&nbsp


Номер 2

Назовите возможные значения свойства CSS border-collapse

Ответ:

&nbsp(1) separate&nbsp

&nbsp(2) normal&nbsp

&nbsp(3) collapse&nbsp


Номер 3

Назовите значения, которых не может быть у свойства CSS border-collapse

Ответ:

&nbsp(1) separate&nbsp

&nbsp(2) normal&nbsp

&nbsp(3) collapse&nbsp


Упражнение 4:

Номер 1

Для чего используется свойство CSS border-collapse?

Ответ:

&nbsp(1) для управления удвоенными границами&nbsp

&nbsp(2) для управления цветом границ&nbsp

&nbsp(3) для управления стилем линий границ&nbsp


Номер 2

Для управления удвоенными границами используется свойство CSS. ..

Ответ:

&nbsp(1) border-style&nbsp

&nbsp(2) border-width&nbsp

&nbsp(3) border-collapse&nbsp


Номер 3

Какие утверждения верны?

Ответ:

&nbsp(1) для управления удвоенными границами используется свойство CSS

border-style&nbsp

&nbsp(2) для управления удвоенными границами используется свойство CSS border-collapse&nbsp

&nbsp(3) для управления удвоенными границами используется свойство CSS border-width&nbsp


Упражнение 5:

Номер 1

Для чего используется свойство CSS border-collapse:separate?

Ответ:

&nbsp(1) для создания удвоенных границ между смежными ячейками таблицы&nbsp

&nbsp(2) для создания одиночных границ между смежными ячейками таблицы&nbsp

&nbsp(3) для управления стилем линий границ между смежными ячейками таблицы&nbsp


Номер 2

Для создания удвоенных границ между смежными ячейками таблицы используется свойство CSS. ..

Ответ:

&nbsp(1) border-collapse:separate&nbsp

&nbsp(2) border-collapse:collapse&nbsp

&nbsp(3) border-collapse:double&nbsp


Номер 3

Какие утверждения верны?

Ответ:

&nbsp(1) для создания удвоенных границ между смежными ячейками таблицы используется свойство CSS border-collapse:separate&nbsp

&nbsp(2) для создания удвоенных границ между смежными ячейками таблицы используется свойство CSS border-collapse:collapse&nbsp

&nbsp(3) для создания удвоенных границ между смежными ячейками таблицы используется свойство CSS border-collapse:double&nbsp


Упражнение 6:

Номер 1

Для чего используется свойство CSS border-collapse:collapse?

Ответ:

&nbsp(1) для создания удвоенных границ между смежными ячейками таблицы&nbsp

&nbsp(2) для создания одиночных границ между смежными ячейками таблицы&nbsp

&nbsp(3) для управления стилем линий границ между смежными ячейками таблицы&nbsp


Номер 2

Для создания одиночных границ между смежными ячейками таблицы используется свойство CSS. ..

Ответ:

&nbsp(1) border-collapse:separate&nbsp

&nbsp(2) border-collapse:collapse&nbsp

&nbsp(3) border-collapse:double&nbsp


Номер 3

Какие утверждения верны?

Ответ:

&nbsp(1) для создания одиночных границ между смежными ячейками таблицы используется свойство CSS border-collapse:separate&nbsp

&nbsp(2) для создания одиночных границ между смежными ячейками таблицы используется свойство CSS border-collapse:collapse&nbsp

&nbsp(3) для создания одиночных границ между смежными ячейками таблицы используется свойство CSS border-collapse:double&nbsp


Упражнение 7:

Номер 1

Назовите значение по умолчанию свойства CSS border-collapse

Ответ:

&nbsp(1) separate&nbsp

&nbsp(2) collapse&nbsp

&nbsp(3) double&nbsp


Номер 2

Для чего используется тэг <th>?

Ответ:

&nbsp(1) для создания таблиц&nbsp

&nbsp(2) определяет заголовки столбцов таблицы&nbsp

&nbsp(3) определяет ячейки таблицы&nbsp


Номер 3

Определяет заголовки столбцов таблицы тэг. ..

Ответ:

&nbsp(1) <table>&nbsp

&nbsp(2) <tr>&nbsp

&nbsp(3) <th>&nbsp


Упражнение 8:

Номер 1

Какие утверждения верны?

Ответ:

&nbsp(1) определяет заголовок таблицы тэг <caption>&nbsp

&nbsp(2) определяет заголовок таблицы тэг <table>&nbsp

&nbsp(3) определяет заголовок таблицы тэг <tr>&nbsp


Номер 2

Для чего используется тэг <caption>?

Ответ:

&nbsp(1) определяет заголовок таблицы&nbsp

&nbsp(2) определяет заголовки столбцов таблицы&nbsp

&nbsp(3) определяет ячейки таблицы&nbsp


Номер 3

Определяет заголовок таблицы тэг. ..

Ответ:

&nbsp(1) <table>&nbsp

&nbsp(2) <caption>&nbsp

&nbsp(3) <th>&nbsp


Упражнение 9:

Номер 1

Для чего используется атрибут rules тэга <table>?

Ответ:

&nbsp(1) задает вывод внутренних границ, окружающих ячейки&nbsp

&nbsp(2) задает вид внешней границы таблицы&nbsp

&nbsp(3) задает цвет внешней границы таблицы&nbsp


Номер 2

Для чего используется атрибут frame тэга <table>?

Ответ:

&nbsp(1) задает вывод внутренних границ, окружающих ячейки&nbsp

&nbsp(2) задает вид внешней границы таблицы&nbsp

&nbsp(3) задает цвет внешней границы таблицы&nbsp


Номер 3

Задает вид внешней границы таблицы атрибут тэга <table>. ..

Ответ:

&nbsp(1) cellspacing&nbsp

&nbsp(2) rules&nbsp

&nbsp(3) frame&nbsp


Упражнение 10:

Номер 1

Назовите количество возможных значений атрибут rules тэга <table>

Ответ:

&nbsp(1) 3&nbsp

&nbsp(2) 4&nbsp

&nbsp(3) 5&nbsp


Номер 2

Назовите количество возможных значений атрибут frame тэга <table>

Ответ:

&nbsp(1) 6&nbsp

&nbsp(2) 7&nbsp

&nbsp(3) 8&nbsp


Номер 3

Назовите значение по умолчанию атрибута frame тэга <table>

Ответ:

&nbsp(1) above&nbsp

&nbsp(2) void&nbsp

&nbsp(3) box|border&nbsp


Упражнение 11:

Номер 1

Назовите значение по умолчанию атрибута rules тэга <table>

Ответ:

&nbsp(1) groups&nbsp

&nbsp(2) none&nbsp

&nbsp(3) all&nbsp


Номер 2

Укажите возможное значение атрибута rules тэга <table>

Ответ:

&nbsp(1) above&nbsp

&nbsp(2) void&nbsp

&nbsp(3) all&nbsp


Номер 3

Назовите возможные значения атрибута frame тэга <table>

Ответ:

&nbsp(1) cols&nbsp

&nbsp(2) void&nbsp

&nbsp(3) all&nbsp


Упражнение 12:

Номер 1

Назовите значения, которых не может быть у атрибута frame тэга <table>

Ответ:

&nbsp(1) hsides&nbsp

&nbsp(2) vsides&nbsp

&nbsp(3) bottom&nbsp


Номер 2

Назовите значения, которых не может быть у атрибута rules тэга <table>

Ответ:

&nbsp(1) above&nbsp

&nbsp(2) void&nbsp

&nbsp(3) all&nbsp


Номер 3

Назовите значения, которых не может быть у атрибута frame тэга <table>

Ответ:

&nbsp(1) cols&nbsp

&nbsp(2) void&nbsp

&nbsp(3) all&nbsp


Главная / Интернет-технологии / Основы работы с XHTML и CSS / Тест 8

Свойство границ CSS

Для разработки веб-страниц и размещения элементов с надлежащим внешним видом иногда требуется использование границ соответствующего цвета и размера. Таким образом, CSS позволяет указать границы, чтобы реализация HTML-элементов выглядела корректно. В этой главе вы узнаете о свойствах границ, поддерживаемых CSS.

Свойства границ CSS позволяют пользователям указывать стиль, цвет и ширину границы любого элемента HTML, для которого они указаны. Существует три свойства, в зависимости от которых можно изменить свойства границы:

Свойство CSS Border Описание
border-color border-color используется для указания цвета границы вашего элемента.
стиль границы стиль границы используется, чтобы указать, должна ли граница вашего элемента быть сплошной, линией, пунктиром, двойной линией или любым другим возможным значением.
ширина границы Ширина границы используется для назначения значения ширины границы.

Давайте теперь посмотрим, как их можно реализовать в программе.

Цвет границы

Цвет границы может быть реализован в программе.

Пример:

 .имя_класса {
    граница: сплошная 2px;
    цвет нижней границы: красный;
    цвет верхней границы: #009900; /* Зеленый */
    цвет левой границы: #0000CC; /* Синий */
    цвет границы справа: оранжевый
}

Стиль границы

Свойство стиля (реализованное с использованием стиля границы) определяет, какой стиль будет отображаться на вашей границе. Этому свойству могут быть присвоены следующие значения:

Граница Значение Описание
пунктирная Создает пунктирную границу.
с точками Создает пунктирную границу.
сплошная Создает сплошную границу.
нет Удаляет существующие границы элемента.
hidden Скрывает существующие границы элемента.
двойной Создает двойную границу.
ребро  Создает границу с трехмерной оснасткой. Его результат во многом зависит от значения цвета границы.
вставка Создает трехмерную границу вставки. Его результат во многом зависит от значения цвета границы.
канавка Создает границу с трехмерной канавкой. Результат во многом зависит от значения цвета границы.
начало Создает трехмерную границу начала.

Это фрагмент кода того, как они могут быть реализованы:

Пример:

 h3.solid { border-style: solid; }
h3.dotted { стиль границы: пунктирный; }
h3.dashed { стиль границы: пунктир; }
h3.none { стиль границы: нет; }
h3.hidden { стиль границы: скрытый; }
h3.double { стиль границы: двойной; }
h3.ridge { стиль границы: хребет; }
h3.groove { стиль границы: канавка; }
h3.inset { стиль границы: вставка; }
h3.outset { стиль границы: начало; }
h3.mix { стиль границы: пунктирная сплошная двойная точка; }

Ширина границы

Ширина границы (применяемая с помощью свойства border-width) определяется с использованием определенного размера (обычно измеряется в пикселях, em, pt, см и т. д.) или с помощью любого из 3 предварительно заданных параметров. определенные слова (тонкие, средние или толстые) в качестве значений. Это свойство может принимать одно из четырех значений, например (верхняя граница, правая граница, нижняя граница и левая граница).

Вот фрагмент кода CSS, показывающий, как их можно реализовать:

Пример:

 .classname {
    стиль границы: сплошной;
    ширина границы: 6px;
}
.classname1 {
    стиль границы: сплошной;
    ширина границы: средняя;
}

Сокращенное свойство границы

Для сокращения кода вы, вероятно, можете идентифицировать все отдельные свойства границы в одном свойстве. Вы должны использовать свойство border для реализации сокращенной записи для индивидуальной реализации свойств границ на всех границах: программа, показывающая реализацию для сокращения:

Пример:

Объявления
 .classname {
    граница: 4 пикселя цвета морской волны;
}

Закругленные границы

Свойство border-radius можно использовать для закругления границ любого HTML-элемента. Вот фрагмент кода CSS, как реализовать:

Пример:

 .classname {
    граница: 4 пикселя цвета морской волны;
    радиус границы: 6px;
}
сообщите об этом объявлении

CSS | Границы | Codecademy

Открыть значок

Изменить на GitHub

Граница — это линия, окружающая элемент, как рамка вокруг картины.

Границы могут иметь определенную ширину, стиль и цвет:

  • Ширина : Толщина границы. Толщину границы можно задать в пикселях или с помощью одного из следующих ключевых слов: тонкая , средняя или толстая .
  • стиль : Дизайн бордюра. Веб-браузеры могут отображать любой из 10 различных стилей. Некоторые из этих стилей включают: нет , точечный и сплошной .
  • цвет : Цвет границы. Веб-браузеры могут отображать цвета, используя несколько различных форматов, включая 140 встроенных ключевых слов цвета.
 
 
 p { 
 
 граница: сплошной коралл 3 пикселя; 
 
 }

В приведенном выше примере граница имеет ширину 3 пикселя, сплошной стиль и коралловый цвет. Все три свойства задаются одной строкой кода.

Граница по умолчанию средний нет цвет , где цвет — текущий цвет элемента. Если ширина , стиль или цвет не заданы в файле CSS, веб-браузер присваивает значение по умолчанию для этого свойства.

 
 
 p.content-header { 
 
 высота: 80 пикселей; 
 
 ширина: 240 пикселей; 
 
 бордюр: твердый коралл; 
 
 }

В этом примере стиль рамки установлен на сплошной , а цвет установлен на коралловый . Ширина не задана, поэтому по умолчанию средний .

Границы

граница
Сокращенное свойство, которое устанавливает различные свойства для границы элементов в одном объявлении.

border-bottom
Сокращенное свойство, определяющее ширину, цвет и стиль нижней границы элемента.

цвет границы
Устанавливает цвет границы. Значение по умолчанию — текущий цвет элемента.

border-left
Сокращенное свойство, определяющее ширину, цвет и стиль левой границы элемента.

border-radius
Скругляет углы элемента.

border-right
Сокращенное свойство, определяющее ширину, цвет и стиль правой границы элемента.

стиль границы
Устанавливает стиль границы. Значение по умолчанию — нет.

border-top
Сокращенное свойство, определяющее ширину, цвет и стиль верхней границы элемента.

border-width
Сокращенное свойство, задающее ширину всей границы элемента или каждой стороны в отдельности.

Авторы

Заинтересованы в помощи в создании Документов? Прочтите Руководство по вкладу или поделитесь своими мыслями в этой форме обратной связи.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *