Главная | Обратная связь | Поможем написать вашу работу!
МегаЛекции

Пример 8.3. Использование классов




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>


Результат данного примера показан на рис. 8.3. В примере класс с именем odd используется для изменения цвета фона строки таблицы. За счёт того, что этот класс добавляется не ко всем тегам <tr> и получается чередование разных цветов.

Рис. 8.3. Результат применения классов

Одновременное использование разных классов

К любому тегу одновременно можно добавить несколько классов, перечисляя их в атрибуте class через пробел. В этом случае к элементу применяется стиль, описанный в правилах для каждого класса. Поскольку при добавлении нескольких классов они могут содержать одинаковые стилевые свойства, но с разными значениями, то берётся значение у класса, который описан в коде ниже.

В примере 8.4 показано использование разных классов для создания облака тегов.

Поделиться:





Читайте также:





Воспользуйтесь поиском по сайту:



©2015 - 2024 megalektsii.ru Все авторские права принадлежат авторам лекционных материалов. Обратная связь с нами...