2020-05-11
88
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" >
<title> Камни </title>
<style>
table. jewel {
width: 100%; /* Ширина таблицы */
border: 1px solid #666; /* Рамка вокруг таблицы */
}
th {
background: #009383; /* Цвет фона */
color: #fff; /* Цвет текста */
text-align: left; /* Выравнивание по левому краю */
}
tr. odd {
background: #ebd3d7; /* Цвет фона */
}
</style>
</head>
<body>
<table class="jewel" >
<tr>
<th> Название </th><th> Цвет </th><th> Твердость по Моосу </th>
</tr>
<tr class="odd" >
<td> Алмаз </td><td> Белый </td><td> 10 </td>
</tr>
<tr>
<td> Рубин </td><td> Красный </td><td> 9 </td>
</tr>
<tr class="odd" >
<td> Аметист </td><td> Голубой </td><td> 7 </td>
</tr>
<tr>
<td> Изумруд </td><td> Зеленый </td><td> 8 </td>
</tr>
<tr class="odd" >
<td> Сапфир </td><td> Голубой </td><td> 9 </td>
</tr>
</table>
</body>
</html>
Результат данного примера показан на рис. 3. В примере класс с именем odd используется для изменения цвета фона строки таблицы. За счёт того, что этот класс добавляется не ко всем тегам <tr> и получается чередование разных цветов.
|
|
|
Рис. 3. Результат применения классов
Одновременное использование разных классов
К любому тегу одновременно можно добавить несколько классов, перечисляя их в атрибуте class через пробел. В этом случае к элементу применяется стиль, описанный в правилах для каждого класса. Поскольку при добавлении нескольких классов они могут содержать одинаковые стилевые свойства, но с разными значениями, то берётся значение у класса, который описан в коде ниже.
В примере 4 показано использование разных классов для создания облака тегов.
