Litra Library
Главная » Статьи » WEB » Самоучитель CSS
Классы

Классы применяют, когда необходимо определить стиль для индивидуального элемента веб-страницы или задать разные стили для одного тега. При использовании совместно с тегами синтаксис для классов будет следующий.

Тег.Имя класса { свойство1: значение; свойство2: значение; ... }

Внутри стиля вначале пишется желаемый тег, а затем, через точку пользовательское имя класса. Имена классов должны начинаться с латинского символа и могут содержать в себе символ дефиса (-) и подчеркивания (_). Использование русских букв в именах классов недопустимо. Чтобы указать в коде HTML, что тег используется с определенным классом, к тегу добавляется атрибут class="Имя класса" (пример 8.1).

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

HTML 4.01CSS 2.1IE 7IE 8IE 9Cr 11Op 11Sa 5Fx 4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>Классы</title>
 <style type="text/css">
 P { /* Обычный абзац */ 
 text-align: justify; /* Выравнивание текста по ширине */
 } 
 P.cite { /* Абзац с классом cite */
 color: navy; /* Цвет текста */
 margin-left: 20px; /* Отступ слева */
 border-left: 1px solid navy; /* Граница слева от текста */
 padding-left: 15px; /* Расстояние от линии до текста */
 } 
 </style>
 </head> 
 <body>
 <p>Для искусственного освещения помещения применяются люминесцентные лампы. 
 Они отличаются высокой световой отдачей, продолжительным сроком службы, 
 малой яркостью светящейся поверхности, близким к естественному спектральным 
 составом излучаемого света, что обеспечивает хорошую цветопередачу.</p>
 <p class="cite">Для исключения засветки экрана дисплея световыми потоками 
 оконные проемы снабжены светорассеивающими шторами.</p>
 </body>
</html>

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

Вид текста, оформленного с помощью стилевых классов

Рис. 8.1. Вид текста, оформленного с помощью стилевых классов

Первый абзац выровнен по ширине с текстом черного цвета (этот цвет задается браузером по умолчанию), а следующий, к которому применен класс с именем cite — отображается синим цветом и с линией слева.

Можно, также, использовать классы и без указания тега. Синтаксис в этом случае будет следующий.

.Имя класса { свойство1: значение; свойство2: значение; ... }

При такой записи, класс можно применять к любому тегу (пример 8.2).

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

HTML 4.01CSS 2.1IE 7IE 8IE 9Cr 11Op 11Sa 5Fx 4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>Классы</title>
 <style type="text/css">
 .gost {
 color: green; /* Цвет текста */
 font-weight: bold; /* Жирное начертание */
 }
 .term {
 border-bottom: 1px dashed red; /* Подчеркивание под текстом */
 }
 </style>
 </head> 
 <body>
 <p>Согласно <span class="gost">ГОСТ 12.1.003-83 ССБТ &quot;Шум. Общие 
 требования безопасности&quot;</span>, шумовой характеристикой рабочих 
 мест при постоянном шуме являются уровни звуковых давлений в децибелах 
 в октавных полосах. Совокупность таких уровней называется 
 <b class="term">предельным спектром</b>, номер которого численно равен 
 уровню звукового давления в октавной полосе со среднегеометрической 
 частотой 1000&nbsp;Гц.
 </p>
 </body>
</html>

Результат применения классов к тегам <span> и <b> показан на рис. 8.2.

Вид тегов, оформленных с помощью классов

Рис. 8.2. Вид тегов, оформленных с помощью классов

Классы удобно использовать, когда нужно применить стиль к разным элементам веб-страницы: ячейкам таблицы, ссылкам, абзацам и др. В примере 8.3 показано изменение цвета фона строк таблицы для создания «зебры».

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

HTML 4.01CSS 2.1IE 7IE 8IE 9Cr 11Op 11Sa 5Fx 4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>Камни</title>
 <style type="text/css">
 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 показано использование разных классов для создания облака тегов.

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

HTML 4.01CSS 2.1IE 7IE 8IE 9Cr 11Op 11Sa 5Fx 4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; 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>

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

Облако тегов

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

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

Категория: Самоучитель CSS | Добавил: expert1 (31.01.2013)
Просмотров: 422 | Теги: CSS, Самоучитель | Рейтинг: 0.0/0
Всего комментариев: 0

Проекты

RSS Правила Бесплатный хостинг uCoz Litra Library
^ Наверх ^