Пример 4. Сочетание разных классов

1 2 3

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8" >

<title> Облако тегов </title>

<style type="text/css" >

.level1 { font-size: 1em; }

.level2 { font-size: 1.2em; }

.level3 { font-size: 1.4em; }

.level4 { font-size: 1.6em; }

.level5 { font-size: 1.8em; }

.level6 { font-size: 2em; }

A. tag {

color: #468be1; /* Цвет ссылок */

}

</style>

</head>

<body>

<div>

<a href="/term/2" class="tag level6" > Paint.NET </a>

<a href="/term/69" class="tag level6" > Photoshop </a>

<a href="/term/3" class="tag level5" > цвет </a>

<a href="/term/95" class="tag level5" > фон </a>

<a href="/term/11" class="tag level4" > палитра </a>

<a href="/term/43" class="tag level3" > слои </a>

<a href="/term/97" class="tag level2" > свет </a>

<a href="/term/44" class="tag level2" > панели </a>

<a href="/term/16" class="tag level1" > линия </a>

<a href="/term/33" class="tag level1" > прямоугольник </a>

<a href="/term/14" class="tag level1" > пиксел </a>

<a href="/term/27" class="tag level1" > градиент </a>

</div>

</body>

</html>

Результат данного примера показан на рис. 4.

Рис. 4. Облако тегов

В стилях также допускается использовать запись вида.layer1.layer2, где layer1 и layer2 представляют собой имена классов. Стиль применяется только для элементов, у которых одновременно заданы классы layer1 и layer2.

Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями: