HTML
.pdf
CSS. Наследование
Наследованием называется перенос правил форматирования для элементов, находящихся внутри других. Такие элементы являются дочерними, и они наследуют некоторые стилевые свойства своих родителей, внутри которых располагаются.
Наследование позволяет задавать значения некоторых свойств единожды, определяя их для родителей верхнего уровня. Допустим, требуется установить цвет и шрифт для основного текста. Достаточно воспользоваться
селектором BODY, добавить для него желаемые свойства, и цвет текста внутри абзацев и других текстовых элементов поменяется автоматически
<style type="text/css"> BODY {
font-family: Arial, Helvetica, sans-serif; /* Гарнитура шрифта */ color: navy; /* Синий цвет текста */
}
</style>
...
<body>
<p>Цвет текста этого абзаца синий.</p> </body>
Однако бывают ситуации, когда требуется все-таки изменить цвет для отдельного контейнера. В этом случае придется переопределять нужные параметры явно
Цвет фона ячеек
Цвет фона одновременно всех ячеек таблицы устанавливается через свойство background, которое применяется к селектору TABLE. При этом следует помнить о правилах использования стилей, в частности, наследовании свойств элементов. Если одновременно с TABLE задать цвет у селектора TD или TH, то он и будет установлен в качестве фона
<style type="text/css"> TABLE {
/* Цвет фона таблицы */ background: maroon;
/* Цвет текста */ color: white;
}
TD {
/* Цвет фона ячеек */ background: navy;
}
</style>
<table cellpadding="4" cellspacing="1"> <tr><th>Заголовок 1</th>
<th>Заголовок 2</th></tr> <tr><td>Ячейка 3</td>
<td>Ячейка 4</td></tr> </table>
Поля внутри ячеек
Полем называется расстояние между краем содержимого ячейки и ее границей. Обычно для этой цели применяется атрибут cellpadding тега <table>. Он определяет значение поля в пикселах со всех сторон ячейки. Допускается использовать стилевое свойство padding, добавляя его к селектору TD
<style type="text/css"> TABLE {
background: white; /* Цвет фона таблицы */ color: white; /* Цвет текста */
}
TD, TH {
background: maroon; /* Цвет фона ячеек */ padding: 5px; /* Поля вокруг текста */
}
</style>
<table cellspacing="1">
<tr><th>Заголовок 1</th><th>Заголовок 2</th></tr> <tr><td>Ячейка 3</td><td>Ячейка 4</td></tr>
</table>
В данном примере с помощью группирования селектором поля установлены одновременно для селектора TD и TH.
Границы и рамки
Использование атрибута cellspacing
Известно, что атрибут cellspacing тега <table> задает расстояние между ячейками таблицы. Если используется разный цвет фона таблицы и ячеек, то между ячейками возникнет сетка линий, цвет которых совпадает с цветом таблицы, а толщина равна значению атрибута cellspacing в пикселах
Применение свойства border
Стилевое свойство border одновременно задает цвет границы, ее стиль и толщину вокруг элемента. Когда требуется создать отдельные линии на разных сторонах, лучше использовать его производные — border-left, border-right, border-top и border-bottom, они соответственно определяют границу слева, справа, сверху и снизу.
Применяя свойство border к селектору TABLE, мы добавляем рамку вокруг таблицы в целом, а к селектору TD или TH — рамку вокруг ячеек
<style type="text/css"> TABLE {
background: #dc0; /* Цвет фона таблицы */
border: 5px double #000; /* Рамка вокруг таблицы */
}
TD, TH {
padding: 5px; /* Поля вокруг текста */ border: 1px solid #fff; /* Рамка вокруг ячеек */
}
</style>
Создание одинарной рамки
Обратите внимание, что в месте состыковки ячеек образуются двойные линии. Они получаются опять же за счет действия атрибута cellspacing тега <table>. Хотя в коде примера этот атрибут нигде не фигурирует, браузер использует его по умолчанию. Если задать <table cellspacing="0">, то получим не двойные, а одинарные линии, но удвоенной толщины. Для изменения указанной особенности применяется стилевое свойство border-collapse со значением collapse, которое добавляется к селектору TABLE
<style type="text/css"> TABLE {
/* Убираем двойные границы между ячейками */ border-collapse: collapse;
background: #dc0; /* Цвет фона таблицы */ border: 4px solid #000; /* Рамка вокруг таблицы */
}
TD, TH {
padding: 5px; /* Поля вокруг текста */
border: 2px solid green; /* Рамка вокруг ячеек */
}
</style>
При добавлении border-collapse: collapse значение атрибута cellspacing тега <table>
игнорируется.
Выравнивание содержимого
ячеек по горизонтали
По умолчанию текст в ячейке таблицы выравнивается по левому краю. Исключением из этого правила служит тег <th>, он определяет заголовок, в котором выравнивание происходит по центру. Чтобы изменить способ выравнивания применяется стилевое свойство text-align
TABLE {
/* Убираем двойные линии между ячейками */ border-collapse: collapse;
width: 300px; /* Ширина таблицы */
}
TH {
background: #fc0; /* Цвет фона ячейки */ text-align: left; /* Выравнивание по левому краю */
}
TD {
background: #fff; /* Цвет фона ячеек */ text-align: center; /* Выравнивание по центру */
}
TH, TD {
border: 1px solid black; /* Параметры рамки */ padding: 4px; /* Поля вокруг текста */
}
Выравнивание содержимого
ячеек по вертикали
Выравнивание по вертикали в ячейке всегда происходит по ее центру, если это не оговорено особо. Это не всегда удобно, особенно для таблиц, у которых содержимое ячеек различается по высоте. В таком случае выравнивание устанавливают по верхнему краю ячейки с помощью свойства vertical-align
<style type="text/css"> TABLE {
/* Убираем двойные линии между ячейками */ border-collapse: collapse;
width: 300px; /* Ширина таблицы */
}
TH, TD {
border: 1px solid black; /* Параметры рамки */ text-align: center; /* Выравнивание по центру */ padding: 4px; /* Поля вокруг текста */
}
TH {
background: #fc0; /* Цвет фона ячейки */ height: 40px; /* Высота ячеек */
/* Выравнивание по нижнему краю */ vertical-align: bottom;
padding: 0; /* Убираем поля вокруг текста */
}
</style>
Объемная таблица
Используя стили, таблице можно придать самый разнообразный вид, в том числе и объемный.
Стили позволяют создать эффект трехмерности таблицы за счет использования универсального стилевого свойства border. В качестве значений указывается стиль линии и ее толщина, которые весьма влияют на конечный вид таблицы.
TABLE {
border: 5px groove #ccc; /* Рамка вокруг таблицы */
}
TD, TH {
border: 5px groove #ccc /* Граница между ячейками */
}
Колонки таблицы
Чтобы взгляд читателя скользил по данным, представленным в колонках таблицы, не перескакивая на соседний раздел, колонки удобно выделить цветом фона или вертикальными линиями. При этом цвет четных и нечетных колонок может различаться. В этом случае удобно использовать разные классы — один для ячеек четных колонок, а второй — для нечетных.
TABLE {
width: 300px; /* Ширина таблицы */ /* Рамка вокруг таблицы */
border: 1px solid black;
}
TD, TH {
/* Выравнивание по центру */ text-align: center;
padding: 3px; /* Поля вокруг текста */
}
TH {
color: white; /* Цвет текста */ background: #daa520; /* Цвет фона */
}
TD {
/* Линия слева от ячейки */ border-left: 1px dashed black;
}
Задача