лекция 4 CSS свойства

CSS-свойства: фон, оформление таблиц
Фон
Как и в языке HTML, в CSS фоном служит заливка цветом или изображение.
Фоновое изображение может быть повторяющимся.
background-color– устанавливает цвет фона. Пример:
TD.head {background-color: #ffff00}
background-image– устанавливает в качестве фона изображение:
BODY {background-image: url(images/bg.jpg)}
background-attachment – задает поведение фонового изображения при прокрутке. По
умолчанию задается значение scroll – фон прокручивается вместе с содержимым.
Значение fixed делает фон неподвижным.
background-position – начальное положение фонового изображения по
горизонтали(left, center, right) и вертикали(top, center, bottom). Вместо ключевых слов
можно указывать расстояние в пикселях или процентах.
background-repeat– указывает, в каком направлении должно размножаться фоновое
изображение:
repeat– по горизонтали и вертикали(по умолчанию);
repeat-x– только по горизонтали;
repeat-y– только по вертикали;
no-repeat– отключить повторение.
Пример:
Используя изображение одного вагона, составим в фоне поезд.
CSS код:
BODY {
background-image: url('coach.png');
background-repeat: repeat-x;
background-position: 80px 100px;
}
opacity- Определяет уровень прозрачности элемента веб-страницы. При частичной или
полной прозрачности через элемент проступает фоновый рисунок или другие элементы,
расположенные ниже полупрозрачного объекта.
1
opacity: значение
В качестве значения выступает число из диапазона [0.0; 1.0]. Значение 0 соответствует
полной прозрачности элемента, а 1, наоборот — его непрозрачности. Дробные числа
вида 0.6 устанавливают полупрозрачность. Допускается писать числа без нуля впереди,
вида opacity: .6.
Таблицы
Свойства CSS могут применяться к таблицам, их строкам и ячейкам для задания
свойств текста и шрифта, управления фоном, полями, границами, размерами и т.п.
По умолчанию содержимое заголовочных ячеек отображается жирным шрифтом с
выравниванием по центру.
border-collapse
Устанавливает, как отображать границы вокруг ячеек таблицы. Это свойство играет
роль, когда для ячеек установлена рамка, тогда в месте стыка ячеек получится линия
двойной толщины. Значение collapse заставляет браузер анализировать подобные места в
таблице и убирать в ней двойные линии. При этом между ячейками остается только одна
граница, одновременно принадлежащая обеим ячейкам. То же правило соблюдается и
для внешних границ, когда вокруг самой таблицы добавляется рамка.
border-collapse: collapse | separate | inherit
collapse -Линия между ячейками отображается только одна.
separate -Вокруг каждой ячейки отображается своя собственная рамка, в местах
соприкосновения ячеек показываются сразу две линии.
inherit -Наследует значение родителя.
border-spacing
Задает расстояние между границами ячеек в таблице. border-spacing не работает в случае,
когда для таблицы установлено свойство border-collapse со значением collapse.
border-spacing: значение1 [значение2]
Одно значение устанавливает одновременно расстояние по вертикали и горизонтали
между границами ячеек. Если значений два, то первое определяет горизонтальное
расстояние, а второе — вертикальное.
2
caption-side
Определяет положение заголовка таблицы, который задается с помощью тега
<CAPTION>, относительно самой таблицы. Свойство caption-side выводит заголовок до
или после таблицы, а выравнивание текста по правому или левому краю устанавливается
через свойство text-align. Браузер Firefox также поддерживает расположение заголовка
слева или справа от таблицы, но эти значения не входят в спецификацию CSS.
caption-side: top | bottom
top -Располагает заголовок по верхнему краю таблицы.
bottom -Заголовок располагается под таблицей.
right -Заголовок размещается справа от таблицы. Это значение работает только в
браузерах Firefox.
left -Заголовок размещается слева от таблицы. Это значение работает только в браузерах
Firefox.
empty-cells
Задает отображение границ и фона в ячейке, если она пустая. При одновременном
добавлении к таблице свойства border-collapse со значением collapse, свойство emptycells игнорируется.
Ячейка считается пустой в следующих случаях:

нет вообще никаких символов;

в ячейке содержится только перевод строки, символ табуляции или пробел;

значение visibility установлено как hidden.
Добавление неразрывного пробела   воспринимается как видимое содержание, т.е.
ячейка уже будет непустой.
empty-cells: show | hide
show -Отображает границу вокруг ячейки и фон в ней.
hide -Граница и фон в пустых ячейках не отображается. Если все ячейки в строке пустые,
то строка прячется целиком.
table-layout
Определяет, как браузер должен вычислять ширину ячеек таблицы, основываясь на ее
содержимом.
table-layout: auto | fixed | inherit
3
auto -Браузер загружает всю таблицу, анализирует ее для определения размеров ячеек и
только после этого отображает.
fixed -Ширина колонок в этом случае определяется либо с помощью тега <COL>, либо
вычисляется на основе первой строки. Если данные о форматировании первой строки
таблицы по каким-либо причинам получить невозможно, в этом случае таблица делится
на колонки равной ширины. При использовании этого значения, содержимое, которое не
помещается в ячейку указанной ширины, будет «обрезано» либо наложено поверх
ячейки. Это зависит от используемого браузера, но в любом случае ширина ячейки
меняться не будет. Для корректной работы этого значения обязательно должна быть
задана ширина таблицы.
inherit -Наследует значение родителя.
Пример
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>border-collapse</title>
<style type="text/css">
TABLE {
width: 300px; /* Ширина таблицы */
border: 4px double black; /* Рамка вокруг таблицы */
border-collapse: collapse; /* Отображать только одинарные линии */
}
TH {
text-align: left; /* Выравнивание по левому краю */
background: #ccc; /* Цвет фона ячеек */
padding: 5px; /* Поля вокруг содержимого ячеек */
border: 1px solid black; /* Граница вокруг ячеек */
}
TD {
padding: 5px; /* Поля вокруг содержимого ячеек */
border: 1px solid black; /* Граница вокруг ячеек */
}
</style>
</head>
<body>
<table cellspacing="0">
<tr>
<th> </th><th>2003</th>
<th>2004</th><th>2005</th>
4
</tr>
<tr>
<td>Нефть</td><td>43</td>
<td>51</td><td>79</td>
</tr>
<tr>
<td>Золото</td><td>29</td>
<td>34</td><td>48</td>
</tr>
<tr>
<td>Дерево</td><td>38</td>
<td>57</td><td>36</td>
</tr>
</table>
</body>
</html>
2003
2004
2005
Нефть
43
51
79
Золото
29
34
48
Дерево
38
57
36
5