Синтаксис css
Общий вид:
селектор
{
блок стилей;
}
Селектор – это выражение, при помощи которого указывается для каких элементов применяется блок стилей
Блок стилей – один и более стилей с значениями
/* комментарии в CSS */
Примеры:
p
{
text-align:center;
color-red;
}
Запятая позволяет перечислить несколько элементов, к которым применяется блок стилей.
p, h1
{
text-align:center;
color-red;
}
p strong
{
color:red;
}
Стиль применяется только к strong, вложенному в p
p strong em
{
color:red;
}
Обязательная вложенность в обратном порядке
<p><strong><em>Text</em></strong></p>
p em, h1 strong
{
color:red;
}
Использование классов в селекторах
Класс- именованный блок стилей
p.red
{
color:red;
}
p
{
color:blue;
}
<p>Text-синий</p>
<p class=”red”>Text-красный</p>
<p>Text-синий</p>
Если перед названием класса не указано название элемента, то класс применяется ко всем элементам.
можно *.red или .red
Использование идентификаторов в селекторе
p#red
{
color:red;
}
p
{
color:blue;
}
! Блок стилей с id можно использовать только 1 раз на одной странице.
Таблицы – блочный элемент
<table> таблица
<tr> строка
<td> ячейка
Ячейки описываются слева – направо, сверху-вниз. По умолчанию рамки таблиц не отображаются.
Пример:
<
Результат
<tr>
1 2 3 4
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
Атрибуты элемента <table>
<table align=”left” выравнивание
center
right
width=”ширина”
height=”высота”
border=”1” толщина рамок и ячеек
cellpadding=”0” расстояние от содержимого ячейки до границы яч.
cellspacing=”0”> расстояние между границами соседних ячеек
Объединение ячеек по горизонтали
1 |
2 |
|
3 |
4 |
5 |
<tr>
<td>1</td>
<td colspan=”2”>2</td>
</tr>
Атрибут colspan –позволяет
объединят ячейки по горизонтали, в
качестве значения указывается количество
объединяемых ячеек
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
Объединение ячеек по вертикали
<table>
1 |
2 |
3 |
4 |
5 |
|
6 |
<td>1</td>
<td rowspan=”3”>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td rowspan=”2”>5</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
</tr>
</table>
Использование вложенных таблиц
<table>
<tr>
<td>/<td>
<td>
<table>
<tr>
<td>2</td>
<td>3</td>
</tr>
</table>
</td>
</tr>
</table>
! таблицы вставляются в ячейку
Дополнительные элементы таблиц.
<th> ячейка - шапка таблицы (отличие от td только полужирный)
<caption> название таблицы, пишется после открывающего тега <table>
align=”top/bottom”
Элементы группировки строк
<thead> (голова) группирует строки, относящиеся к верхнему заголовку
<tfoot> (ноги) группирует строки, относящиеся к нижнему заголовку
<tbody> (тело) группирует строки, относящиеся к телу таблицы
Группировки столбцов (bcgjkmpjdfnm c jcnj)
<colgroup span=”число”>…</colgroup>
<col span=”число”/> используется только в <colgroup>
в атрибуте <span> указывается количество подряд сгруппированных столбцов
Пример
<html>
<head>
</head>
<body>
<table border="1" width="70%">
<caption align="top">
Цены на товар
</caption>
<colgroup style="width:10%"></colgroup>
<colgroup style="width:90% span="2">
<col/>
<col style="background:#80FF80"/>
</colgroup>
<thead style="background:lightyellow">
<tr>
<th>№</th>
<th>Название</th>
<th>Цена</th>
</tr>
</thead>
<tfoot style="background:black; color:white">
<tr>
<th colspan="2">Итого</th>
<th>350$</th>
</tr>
</tfoot>
<tbody>
<tr>
<td >1</th>
<td>PentiumIII</td>
<td>150$</td>
</tr>
<tr>
<td >2</th>
<td>PentiumIV</td>
<td>200$</td>
</tr>
</tbody>
</table>
</body>
</html>
Приоритеты применения стилей к элементам таблицы в порядке убывания
td, th
tr
thead, tfoot,tbody
col
colgroup
table