- •Лабораторная робота № 12 Блоки в css
- •Теоретические сведения
- •1.1. Блоки.
- •1.2. Поля.
- •Свойство margin-top, margin-right, margin-bottom, margin-left
- •Свойство margin
- •1.3. Границы
- •Свойства border-top-width, border-right-width, border-bottom-width, border-left-width
- •Свойство border-width
- •Свойство border-color
- •Свойство border-style
- •Свойство border-top, border-right, border-bottom и border-left
- •Свойство border
- •Свойства padding-top, padding-right, padding-bottom, padding-left
- •Свойства padding
- •1.4. Отступы
- •1.5. Поля или отступы
- •Ход работы
- •3. Задание для самостоятельного выполнения
- •4. Содержание отчета
- •5. Задания и вопросы для аттестации
Свойство border-color
Это свойство стенографического типа задает цвет границы блока. Если требуется задать различные цвета для четырех составляющих границ, то можно пользоваться индивидуальными свойствами:
border-top-color - цвет верхнего сегмента границы;
border-right-color - цвет правого сегмента границы;
border-bottom-color - цвет нижнего сегмента границы;
border-left-color - цвет левого сегмента границы.
Значением индивидуальных свойств может быть значение цвета, указанное любым доступным в CSS способом:
ключевым словом (red, yellow, silver и т.д.);
шестнадцатеричным кодом цвета в полной форме (#00FFCC, #eeddaa) или сокращенно (#0FC, #EDA);
десятичным кодом в модели RGB (color: rgb(25, 205, 172)).
В качестве примера раскрасим сегменты границы блока в разные цвета:
P { border-top-color: red; border-right-color: #EDA; border-bottom-color: #41A41C; border-left-color: rgb(25, 205, 172) } |
Значение свойства border-color, которое является стенографическим, объединяет значения индивидуальных свойств. Единственное (но очень важное!) отличие в том, что вкачестве значения свойства border-color может использоваться ключевое слово transparent. При этом граница будет прозрачной, но все же будет иметь ширину. Данное значение не поддерживается браузерами фирмы Microsoft - в них граница будет иметь либо цвет по умолчанию (черный), если цвет ранее не задавался, либо цвет, унаследованный от родительского элемента.
Свойство border-style
Это свойство стенографического типа задает тип линий, которыми будут отображаться границы блока. Если требуется задать различные типы линий для четырех составляющих границ, то можно пользоваться индивидуальными свойствами:
border-top-style - тип линии верхней границы;
border-right-style - тип линии правой границы;
border-bottom-style - тип линии нижней границы;
border-left-style - тип линии левой границы.
Значением как индивидуальных свойств, так и стенографического может быть тип линии границы, определяемый одним из приведенных ниже ключевых слов.
none - граница отсутствует, в результате значение свойства border-width также равно нулю. Это значение используется по умолчанию.
hidden - подобно значению none, граница отсутствует, за исключением тех случаев, когда такое значение будет применено для таблиц. В этом случае будет использоваться принцип разрешения конфликтов границ; его мы рассмотрим позднее, когда будем изучать работу с таблицами в CSS.
dotted - граница отображается линией, составленной из точек.
dashed - граница отображается пунктирной линией.
solid - граница отображается сплошной линией.
double - граница отображается двойной сплошной линией. Сумма значений ширины двух линий и расстояния между ними должна быть равна значению свойства border-width. Самая распространенная ошибка при использовании этого значения - задать ширину линии 2 пикселя и стиль double. В этом случае невозможно отобразить двойную линию, так как минимальная возможная ширина линии на экране монитора - 1 пиксель, поэтому для отображения двойной линии и расстояния между ними необходимо минимум 3 пикселя. Соответственно, при ширине в 2 пикселя двойную линию отобразить невозможно. В результате получается обычная сплошная линия, но толщиной в 2 пикселя.
groove - граница отображается "вдавленной" линией с имитацией объема.
ridge - противоположно значению groove. Граница отображается "выпуклой" линией с имитацией объема.
inset - граница отображается так, что весь блок выглядит как бы вдавленным (похоже на нажатую кнопку).
outset - противоположно значению inset. Весь блок выглядит выпуклым.
1. hidden |
Подобно значению none, граница отсутствует, за исключением тех случаев, когда такое значение будет применено для таблиц. В этом случае будет использоваться принцип разрешения конфликтов границ; его мы рассмотрим позднее, когда будем изучать работу с таблицами в CSS |
| |
2. dotted |
Граница отображается линией, составленной из точек |
| |
3. dashed |
Граница отображается пунктирной линией |
| |
4. solid |
Граница отображается сплошной линией |
| |
5. double |
Граница отображается двойной сплошной линией |
| |
6. groove |
Граница отображается "вдавленной" линией с имитацией объема |
| |
7. ridge |
Граница отображается "выпуклой" линией с имитацией объема |
| |
8. inset |
Граница отображается так, что весь блок выглядит как бы вдавленным |
| |
9. outset |
Граница отображается так, что весь блок выглядит как бы "выпуклым" |
Стенографическое свойство border-style по аналогии с border-width позволяет сокращенно записать значения стилей для всех четырех сегментов границы. Оно допускает задание одного, двух, трех или четырех значений. Применение этих значений аналогично свойству border-width.
P { border-style: solid dotted } Стиль верхней и нижней границы вокруг абзаца будет solid, а для левой и правой — dotted. |