Классы | htmlbook.ru
Классы применяют, когда необходимо определить стиль для
индивидуального элемента веб-страницы или задать разные стили для
одного тега. При использовании совместно с тегами синтаксис для классов
будет следующий.
Тег.Имя класса { свойство1:
значение; свойство2: значение; … }
Внутри стиля вначале пишется желаемый тег, а затем, через точку
пользовательское имя класса. Имена классов должны начинаться с латинского символа и могут содержать в себе символ дефиса (-) и подчеркивания (_). Использование русских букв в именах классов недопустимо. Чтобы указать в коде HTML, что тег используется
с определённым классом, к тегу добавляется атрибут (пример 8.1).
Пример 8.1. Использование классов
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Классы</title>
<style>
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>Для исключения засветки экрана дисплея световыми потоками
оконные проемы снабжены светорассеивающими шторами.</p>
</body>
</html>Результат данного примера показан на рис. 8.1.
Рис. 8.1. Вид текста, оформленного с помощью стилевых классов
Первый абзац выровнен по ширине с текстом чёрного цвета (этот цвет задаётся браузером по умолчанию), а следующий, к которому
применен класс с именем cite — отображается синим цветом и с линией слева.
Можно, также, использовать
классы и без указания тега. Синтаксис в этом случае будет следующий.
.Имя класса { свойство1: значение;
свойство2: значение; … }
При такой записи класс можно применять к любому тегу (пример 8.2).
Пример 8.2. Использование классов
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Классы</title>
<style>
.gost {
color: green; /* Цвет текста */
font-weight: bold; /* Жирное начертание */
}
.term {
border-bottom: 1px dashed red; /* Подчеркивание под текстом */
}
</style>
</head>
<body>
<p>Согласно <span>ГОСТ 12.1.003-83 ССБТ "Шум. Общие
требования безопасности"</span>, шумовой характеристикой рабочих
мест при постоянном шуме являются уровни звуковых давлений в децибелах
в октавных полосах. Совокупность таких уровней называется
<b>предельным спектром</b>, номер которого численно равен
уровню звукового давления в октавной полосе со среднегеометрической
частотой 1000 Гц.
</p>
</body>
</html>Результат применения классов к тегам <span> и <b> показан на рис. 8.2.
Рис. 8.2. Вид тегов, оформленных с помощью классов
Классы удобно использовать, когда нужно применить стиль к разным элементам веб-страницы:
ячейкам таблицы, ссылкам, абзацам и др.
В примере 8.3 показано изменение цвета фона строк таблицы для создания «зебры».
Пример 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>
<tr>
<th>Название</th><th>Цвет</th><th>Твердость по Моосу</th>
</tr>
<tr>
<td>Алмаз</td><td>Белый</td><td>10</td>
</tr>
<tr>
<td>Рубин</td><td>Красный</td><td>9</td>
</tr>
<tr>
<td>Аметист</td><td>Голубой</td><td>7</td>
</tr>
<tr>
<td>Изумруд</td><td>Зеленый</td><td>8</td>
</tr>
<tr>
<td>Сапфир</td><td>Голубой</td><td>9</td>
</tr>
</table>
</body>
</html>Результат данного примера показан на рис. 8.3. В примере класс с именем odd используется для изменения цвета фона строки таблицы. За счёт того, что этот класс добавляется не ко всем тегам <tr> и получается чередование разных цветов.
Рис. 8.3. Результат применения классов
Одновременное использование разных классов
К любому тегу одновременно можно добавить несколько классов, перечисляя их в атрибуте class через пробел. В этом случае к элементу применяется стиль, описанный в правилах для каждого класса. Поскольку при добавлении нескольких классов они могут содержать одинаковые стилевые свойства, но с разными значениями, то берётся значение у класса, который описан в коде ниже.
В примере 8.4 показано использование разных классов для создания облака тегов.
Пример 8.4. Сочетание разных классов
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">Paint.NET</a>
<a href="/term/69">Photoshop</a>
<a href="/term/3">цвет</a>
<a href="/term/95">фон</a>
<a href="/term/11">палитра</a>
<a href="/term/43">слои</a>
<a href="/term/97">свет</a>
<a href="/term/44">панели</a>
<a href="/term/16">линия</a>
<a href="/term/33">прямоугольник</a>
<a href="/term/14">пиксел</a>
<a href="/term/27">градиент</a>
</div>
</body>
</html>Результат данного примера показан на рис. 8.4.
Рис. 8.4. Облако тегов
В стилях также допускается использовать запись вида .layer1.layer2, где layer1 и layer2 представляют собой имена классов. Стиль применяется только для элементов, у которых одновременно заданы классы layer1 и layer2.
Вопросы для проверки
1. Какое имя класса написано правильно?
- 2layer1
- 1layer
- Яndex
- pink-floyd
- 28_days_later
2. Какой цвет будет у слова «потока» в коде?
<p>Коэффициент использования излучаемого светильниками <span>потока</span>, на расчетной плоскости.</p>
При использовании следующего стиля?
BODY { color: red; }
P { color: green; }
.c1 {color: blue; }
.c2 { color: yellow; }
.c3 { color: orange; }
.c2.c3 { color: black; }
- Зелёный.
- Синий.
- Жёлтый.
- Оранжевый.
- Чёрный.
3. Как задать стиль у тега <div>DOOM</div>?
- div[iddqd] { color: red; }
- div.iddqd { color: red; }
- iddqd.div { color: red; }
- div#iddqd { color: red; }
- div=iddqd { color: red; }
4. Какое имя класса следует добавить к тегу <P>, чтобы текст был одновременно жирным и красного цвета, если имеется следующий стиль?
s1 { color: red; font-weight: bold; }
.s2 { color: red; }
.s3 { background-color: red; font-weight: bold; }
.s4 { font-weight: bold; }
.s5 { font: red bold; }
- s1
- s2
- s3
- s2 s4
- s5
Ответы
1. pink-floyd
2. Чёрный.
3. div.iddqd { color: red; }
4. s2 s4
CSS: — классы CSS.
Классы в CSS — инструмент, который разработчиками используется очень часто. Классы позволяют задавать одному тегу различные стилевые правила. Давайте сразу рассмотрим на примере как их использовать. Но сначала проясним синтаксис селектора класса:
Тег.Имя класса { свойство1: значение; свойство2: значение; … }
В селекторе после имени тега через точку пишется имя класса. Имя класса разработчик придумывает сам. Имя класса должно начинаться с латинской буквы, может содержать дефис (-) и знак подчёркивания (_).
В коде HTML для указания связи тега с классом CSS в теге прописывается атрибут.
Теперь простой пример использования классов:
<!DOCTYPE html>
<html>
<head>
<title>Классы в CSS</title>
<style>
ul.menu-1 { color: red; }
ul.menu-2 { color: green; }
ul.menu-3 { color: blue; }
</style>
</head>
<body>
<ul>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
</ul>
<ul>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
</ul>
<ul>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
</ul>
</body>
</html>В этом примере при помощи классов мы устанавливаем разные цвета для трёх списков созданных тегом <ul>. Этот пример не очень прикладной. Сейчас немного усовершенствуем его, сделаем его более прикладным. Тег <ul> используется для создания меню сайтов. В следующем примере мы создадим два меню при помощи этого тега.
<!DOCTYPE html>
<html>
<head>
<title>Классы в CSS</title>
<style>
div.menu-top {
position: absolute;
top: 0; left: 80px;
height: 50px;
}
ul.menu-top > li {
display: inline; /* Располагаем элементы по горизонтали */
list-style: none; /* Убираем маркеры списка */
padding: 5px; /* Поля вокруг текста */
}
ul.menu-top > li > a {
border: 1px solid #666; /* Параметры рамки */
padding: 5px; /* Поля вокруг текста */
font-size: 80%; /* Размер шрифта */
color: red;
}
div.menu-left {
position: absolute;
top: 50px; left: 0;
}
ul.menu-left {
padding-left: 10px;
}
ul.menu-left > li {
list-style: none; /* Убираем маркеры списка */
padding: 5px;
padding-left: 0;
}
ul.menu-left > li > a {
background: #DEE1AE; /* Цвет фона */
border: 1px solid #666; /* Параметры рамки */
padding: 5px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<div>
<ul>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
</ul>
</div>
<div>
<ul>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
</ul>
</div>
</body>
</html>Результат работы кода:
Рисунок 1. Пример использования классов в создании меню.
Конечно в этом примере меню получились не красивые, но смысл примера в том, чтобы показать как применяются классы в данном случае.
Давайте рассмотрим ещё один простой пример использования классов. Создадим класс для оформления абзаца (тег <p>) в виде цитаты.
<!DOCTYPE html>
<html>
<head>
<title>Классы в CSS</title>
<style>
p.citata {
color: navy; /* Цвет текста */
font-family: Courier, monospace;
font-size: 90%;
margin-left: 25px; /* Отступ слева */
border-left: 2px solid red; /* Граница слева от текста */
padding-left: 10px; /* Расстояние от линии до текста */
}
</style>
</head>
<body>
<p>CSS является незаменимым инструментом в вёрстке html-документов. Как говорил великий Тутанхомон:</p>
<p>Используйте CSS во всех областях вашей жизни: на кухне, в ванной, в саду и огороде.</p>
</body>
</html>Работа кода:
Рисунок 2. Пример использования классов в создании цитаты.
И ещё один простой пример использования классов CSS. На этот раз сделаем таблицу зеброй для удобства чтения данных.
<!DOCTYPE html>
<html>
<head>
<title>Классы в CSS</title>
<style>
table.towns {
widht: 300px;
border: 1px solid navy;
}
th {
background: #519E70; /* Цвет фона */
}
tr.zebra {
background: #C4E1CF; /* Цвет фона */
}
</style>
</head>
<body>
<table>
<tr>
<th>Планета</th>
<th>Город</th>
<th>Население</th>
</tr>
<tr>
<td>Земля</td>
<td>Токио</td>
<td>Много</td>
</tr>
<tr>
<td>Земля</td>
<td>Лондон</td>
<td>Много</td>
</tr>
<tr>
<td>Земля</td>
<td>Мухосранск</td>
<td>Мало</td>
</tr>
<tr>
<td>Марс</td>
<td>Еулоаей</td>
<td>Неизвестно</td>
</tr>
</table>
</body>
</html>Работа кода:
Рисунок 3. Пример использования классов в создании таблицы.
Но стоит отметить что этот код некорректен. Дело в том, что в html документе все теги <th> будут имень фоновый цвет #519E70. Чтобы правило для тега <th> действовало только в рамках таблицы с классом towns, селектор должен быть следующим table.towns th { … }.
Одновременное использование разных классов
К любому html-тегу можно одновременно добавить несколько классов. Для этого в атрибуте тега class их нужно указать через пробел. В случае использования одинаковых правил стилей в разных классах, но с одинаковыми значениями, для форматирования будут использовано правило указанное в коде стиля ниже.
Создадим облако тегов применяя два класса к одноме тегу:
<!DOCTYPE html>
<html>
<head>
<title>Классы в CSS</title>
<style>
a.tag { color: #449C70; /* Цвет ссылок */ }
.level-1 { font-size: 1em; }
.level-2 { font-size: 1.3em; }
.level-3 { font-size: 1.6em; }
.level-4 { font-size: 1.9em; }
.level-5 { font-size: 2.1em; }
</style>
</head>
<body>
<div>
<a href="/CSS/">CSS</a>
<a href="/CSS/selectors.php">Селекторы</a>
<a href="/CSS/tsveta_v_css.php">Цвета в CSS</a>
<a href="/CSS/tablitsa_tsvetov_v_css_i_html.php">Таблица цветов</a>
<a href="/CSS/rabota_s_tekstom.php">Работа с текстом</a>
<a href="/CSS/blochnaja_model_v_css.php">Блочная модель CSS</a>
</div>
</body>
</html>Пример выполнения этого кода:
Рисунок 3. Пример одновременного использования 2 классов в создании облака тегов.
Все ссылки в облаке тегов должны иметь один цвет, но размеры ссылок разные. Также общим можно указать шрифт ссылок.
Классы | CSS | WebReference
Классы применяют, когда необходимо определить стиль для одного или нескольких элементов веб-страницы. Элементы при этом могут быть разными, но иметь частично или полностью похожие элементы оформления. В коде HTML имя класса определяется через атрибут class.
Синтаксис
E.<Имя класса> { Описание правил стиля }
.<Имя класса> { Описание правил стиля }Здесь E — обозначает любой элемент. Имена классов должны начинаться с латинского символа и могут содержать в себе символ дефиса (-) и подчёркивания (_). Использование русских букв в именах классов недопустимо. Чтобы указать в коде HTML, что элемент используется с определённым классом, к тегу добавляется атрибут class.
Обозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Пример
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Классы</title>
<style>
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>Для исключения засветки экрана дисплея световыми потоками
оконные проемы снабжены светорассеивающими шторами.</p>
</body>
</html>
Результат примера показан на рис. 1.
Рис. 1. Вид текста, оформленного с помощью класса
Примечание
Internet Explorer до версии 7 понимает классы, имена которых начинаются с дефиса (-) или символа подчёркивания (_). Остальные браузеры таки имена игнорируют.
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 02.03.2020
Редакторы: Влад Мержевич
Классы | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 3.0 | 7.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Классы применяют, когда необходимо определить стиль для индивидуального элемента веб-страницы или задать разные стили для одного тега.
Синтаксис
E.Имя_класса { Описание правил стиля }
.Имя_класса { Описание правил стиля }
Здесь E — обозначает любой тег. Имена классов должны начинаться с латинского символа и могут содержать в себе символ дефиса (-) и подчеркивания (_). Использование русских букв в именах классов недопустимо. Чтобы указать в коде HTML, что тег используется с определенным классом, к тегу добавляется атрибут class.
Пример
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Классы</title>
<style>
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>Для исключения засветки экрана дисплея световыми потоками
оконные проемы снабжены светорассеивающими шторами.</p>
</body>
</html>Результат примера показан на рис. 1.
Рис. 1. Вид текста, оформленного с помощью класса
Браузеры
В Internet Explorer до версии 7.0 классы не работают, если их имена начинаются с дефиса (-) или символа подчеркивания (_).
Классы и ID CSS: Что использовать?
В этой статье мы кратко рассмотрим, как применяются CSS классы и ID, и постараемся с помощью нескольких простых примеров объяснить, как их использовать.
В CSS мы можем управлять стилями HTML-элементов веб-страницы с помощью ряда селекторов. ID и классы являются двумя наиболее часто используемыми селекторами CSS, с помощью которых можно не только задавать структуру HTML-документа, но и назначать стили.
Сначала рассмотрим, как используются CSS классы и идентификаторы, а затем определим различия между ними, и когда лучше применять каждый из них.
Селектор id используется для выбора одного HTML-элемента с уникальным значением атрибута id. В следующем примере приведен раздел <div> со значением атрибута id header:
<div> <font> <font>Это заголовок нашей веб-страницы. </font> </font> </div>
В файле CSS можно применить стили к этому элементу div:
#header { width: 100%; height: 80px; background: blue }Обратите внимание на использование # (хэша) перед именем идентификатора.
Селектор класса используется для выбора одного или нескольких HTML-элементов с одинаковым значением атрибута CSS класса class. В следующем примере приведен код трех элементов <р> со значением атрибута class content:
<p> <font> <font>Это наш первый пункт.</font> </font> </p> <p> <font> <font>Это наш второй абзац.</font> </font> </p> <p> <font> <font>Это наш третий абзац.</font> </font> </p>
В файле CSS можно применить стили к этим абзацам следующим образом:
.content { margin: 20px 0; line-height: 24px; font-size: 15px }Обратите внимание на использование точки перед именем класса.
Рассмотрим, в чем состоит разница между CSS классами и идентификаторами. В приведенных выше примерах мы использовали селектор ID (#header) для одного элемента, а селектор класса (.content) — для нескольких.
Это потому, что значение идентификатора может быть присвоено только одному элементу HTML, и несколько элементов на одной странице не могут иметь одинаковый ID. Например, на странице может присутствовать только один элемент с идентификатором #header или один элемент с идентификатором #footer. Значение класса может быть присвоено одному или нескольким HTML-элементам. Например, нескольким абзацам с классом .content.
Следующий пример поможет лучше понять разницу между классами и ID CSS и то, как правильно их использовать:
<div> <a> <font> <font>Ссылка 1 </font> </font></a> <a> <font> <font>Ссылка 2 </font> </font> </a> <a> <font> <font>Ссылка 3 </font> </font> </a> <a> <font> <font>Ссылка 4</font> </font> </a> </div> <div> <p> <font> <font>Это наш первый пункт.</font> </font>< /p> <p> </p> <p> <font> <font>Это наш второй абзац.</font> </font> </p> <p> </p> <p> <font> <font>Это наш третий абзац.</font> </font> </p> </div>
В приведенном выше HTML коде мы присвоили контейнеру <div> ID (#container), так как у нас на странице есть только один контейнер.
В нем содержатся разделы меню (#menu) и контента (#content). Как и в случае контейнера, у нас на странице есть только одно меню и один раздел контента. Внутри меню у нас есть четыре ссылки <a>, мы присвоили каждой из них CSS класс (.link). Аналогичным образом мы присвоили класс (.text) каждому абзацу в разделе контента.
Назначим стили для этих элементов:
#container { width: 1080px; margin: 0 auto; background: #eee }
#menu { height: 90px; background: #ddd }
.link { color: #000; text-decoration: none }
#content { padding: 20px }
.text { font-size: 15px }ID используется для отдельных элементов, которые присутствуют на странице только в одном месте. Например, заголовка, подвала или меню. Класс используется для одного или нескольких элементов, которые присутствуют на странице: параграфов, ссылок, кнопок, полей ввода. Также можно использовать класс для единичного элемента. Чтобы привыкнуть к этому различию, лучше завести привычку использовать классы для управления несколькими элементами одного типа.
Следует помнить, что HTML-элемент может иметь CSS класс и идентификатор. Например, вам нужно разместить на странице две панели с одним размером и стилями, но в разных местах. В этом случае можно назначить для панелей один класс, чтобы задать их размер и стили, а затем назначить им разные идентификаторы, чтобы задать их позиции:
<div> <font> <font>...</font> </font> </div> <div> <font> <font>...</font> </font></div>
Элементам также можно назначить в CSS несколько классов одновременно. Это полезно, когда нужно задать стили группе элементов в пределах элемента определенного типа на странице. Например, предположим, что у вас есть класс .content, который применяется ко всем абзацам. Если вы хотите добавить определенным абзацам рамку, то можно добавить еще один класс. Например, .bordered:
<p> <font> <font>Этот пункт не имеет границ.</font> </font> </p> <p> <font> <font>Этот пункт имеет границы.</font> </font> </p>
Обратите внимание на пустое пространство между двумя именами классов в атрибуте class второго абзаца. Пример CSS для приведенного выше HTML кода:
.content { margin: 10px; font-size: 15px; color: blue }
.bordered { border: 2px solid #222 }Важно правильно использовать CSS идентификаторы и классы, исходя из изложенных выше правил. Иначе их неправильное использование может привести к нарушению функциональности HTML-кода. И даже если страница будет выглядеть нормально в определенном браузере или на конкретном устройстве, в другом браузере макет может быть «сломан».
На этом мы завершаем сравнение классов и ID CSS. Мы надеемся, что этот материал окажется полезным для вас.
Данная публикация представляет собой перевод статьи «CSS Class vs ID Which One to Use» , подготовленной дружной командой проекта Интернет-технологии.ру
Использование CSS классов – удобный путеводитель
В сегодняшней статье мы рассмотрим CSS классы и их взаимосвязь с языком гипертекста. HTML — теги и CSS связаны напрямую. Эта взаимосвязь позволяет определить, как выглядит тег или как он ведет себя при использовании его имени в таблице стилей:
tag {
/*
Внешний вид и функциональные изменения.
*/
name:value;
}Но зачастую требуется больше контроля, чем просто делать каждый экземпляр тега одинаковым. Если бы все ячейки HTML-таблицы были выполнены в одном стиле, это выглядело бы непрактично. К примеру, если вам нужно выделить определенные данные.
Поэтому CSS предоставляет нам два разных определения, которые мы можем использовать — CSS классы и идентификаторы.
Когда у вас на странице есть повторяющиеся элементы, которые должны иметь одинаковое оформление, нужно использовать CSS классы. Для этого необходимо выполнить два шага:
Чтобы повлиять на внешний вид HTML-страницы, вы должны сначала разметить элементы с атрибутом class=»class-name». Вот пример:
<div> Контейнер 1 </div> <div> Контейнер 2 </div> <div> Контейнер 3 </div>
В данном примере я хочу создать три контейнера одинакового размера. Возможно, я захочу запустить галерею изображений, или поместить в них изображения в качестве HTML — ссылки для перехода на другие страницы. При этом все контейнеры должны быть одинаковыми.
Давайте посмотрим, что нужно сделать в нашем CSS:
div.box{
height:200px;
width:200px;
text-align:center;
font-size:14px;
color:#090;
background-color:#ddd;
margin-right:10px;
}Чтобы задать правило для определенного тега с CSS классом, а не просто определить tagname{ }, мы используем tagname.classname{ }. Точка между tagname и classname является тем, что определяет правило как CSS класс. Также обратите внимание, что там нет пробелов. Если поставить пробел в правиле, то оно не будет работать так, как вы планировали.
В этом примере использовалось свойство margin-right:10px. Эта строка гарантирует, что между тремя контейнерами сохраняется пространство в 10 пикселей. Свойство float со значение left обеспечивает, чтобы все контейнеры размещались слева.
Такое сочетание должно дать вам что-то вроде этого:
Чтобы показать вам, что ваш CSS класс изображения box применяется только там, где вы хотите, поместите дополнительный элемент <div> после «Контейнер 3»:
<div> Контейнер 4 </div>
Обновите страницу. Вы увидите, что ни одно из правил, установленных в div.box {} не применяется. Потому что вы не указали значение класса.
Вот почему этот вариант использования классов CSS более гибкий, чем простое tagname{ }. На странице может быть много элементов <div>, но стили будут применяться только к тем, в которых задано соответствующее значение атрибута class!
В современном веб-дизайне для элемента иметь только один класс CSS — редкость. Давайте возьмем наши три квадрата и посмотрим, что произойдет, если вы захотите перекрасить каждый из них.
Чтобы указать, что вы хотите использовать в CSS несколько классов, нужно добавить следующий класс через пробел. Как здесь:
<div> Контейнер 1 </div> <div> Контейнер 2 </div> <div> Контейнер 3 </div>
Поскольку стили CSS используют каскадный порядок, вы размещаете свои классы по уровню важности. В данном случае мы хотим, чтобы класс class=»box» применялся перед class=»red». Иначе class=»red» будет применяться до class=»box». Надеюсь, это понятно!
Изменим наш код CSS:
div.box{
height:200px;
width:200px;
text-align:center;
font-size:14px;
color:#090;
background-color:#dddddd;
margin-right:10px;
}
div.red{
background-color:#ffcccc;
}
div.green{
background-color:#ccffcc;
}
div.blue{
background-color:#ccccff;
}Поскольку у каждого из трех контейнеров есть CSS класс .box, к ним всем применяются свойства, прописанные в div.box. Но к каждому <div> применяется также дополнительный класс (red, green, или blue). Конечный результат:
Примечание: несмотря на то, что div.box определяет background-color:#cccccc; «цветовые» классы определяются после него. Например, в box red свойство background-color, указанном в div.red, перезаписывает аналогичное свойство в div.box. Это то, что подразумевается под каскадом: в CSS логике определяется сверху вниз. А при определении классов HTML — слева направо.
Подумайте, для каких элементов нужно использовать CSS классы при верстке макета страницы. Вот некоторые мысли для подсказки:
- Любые изображения, которые вам захочется сделать иконками или изображением товара, придется сделать в форме квадрата: например img.thumbnail{ width:200px;height:200px; };
- Стили ссылок для кнопок должны определяться отдельно от стилей обычных ссылок. Например, a.button {};
- Нужно применить другой цвет при наведении курсора на ссылки в вашей навигации. Например, a.nav:hover{ } a.nav: Hover {}.
Эффективное использование классов позволяет элементу страницы дать имя, которое понимает CSS. Используя эти «имена» можно применить один ряд правил для нескольких экземпляров элемента без повторного определения кода CSS.
И поскольку они располагаются каскадом, порядок в котором вы размещаете свои классы в HTML, действительно имеет значение, так что следите за этим.
Если у вас есть какие-либо вопросы, не стесняйтесь задать их в комментариях!
Данная публикация представляет собой перевод статьи «Using CSS Classes – A Handy Guide» , подготовленной дружной командой проекта Интернет-технологии.ру
Как работают в css классы и идентификаторы?
От автора: в css классы и идентификаторы позволяют привязать стили к любым элементам, но суть их работы немного отличается друг от друга. Как они работают и каковы особенности их применения?
Стилевые классы
Классы – это наиболее часто используемые селекторы в css. В большинстве случаев прописывание стилей различным элементам идет через них. Все потому, что class, в отличие от id, можно задавать многим тегам, поэтому он может быть применен для стилизации целой группы блоков. Например:
.center-wrap{
max-width: 960px;
margin: 0 auto;
}
.center-wrap{ max-width: 960px; margin: 0 auto; } |
Теперь какому бы блоку мы ни прописали class center-wrap, он получит максимальную ширину в 960 пикселей и будет центрирован. И мы можем прописать его и для шапки, и для контента, и для футера.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
Класс вообще для того и создан, чтобы стилизовать группу, а не одиночный блок. Хотя при этом никто не запрещает задавать новый уникальный class только одному элементу. Вы вполне можете это делать.
Несколько классов: как это работает?
Стилевые классы имеют еще одну особенность – их можно задавать несколько одному html-элементу. Даже не несколько, а бесконечное количество, тут никаких ограничений нет. Например:
<div class = «red transform m-size»></div>
<div class = «red transform m-size»></div> |
Первый может отвечать за цвет, второй – за какой-либо эффект, третий – за размер. К слову, такой подход сделан в css-фреймворках. Например, в Bootstrap. CSS-фреймворк – это уже по сути готовые написанные стили и вам остается лишь прописать нужные свойства элементам.
Если оба класса, которые применяются к элементу, содержат одинаковое стилевое свойство с разным значением, то применится то значение, которое записано в таблице стилей последним. Например:
<div class = «first two»></div>
<div class = «first two»></div> |
.first{
Color: red;
}
.two{
Color: green;
}
.first{ Color: red; } .two{ Color: green; } |
В данном случае текст в блоке будет зеленым, а не красным, потому что это стилевое правило стоит в таблице стилей позже первого, а значит, переопределяет его.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
Идентификаторы
Наверняка вы зарегистрированы в какой-нибудь соц. сети? У вашему аккаунта там гарантированно есть какой-то id. Правда это не имеет ничего общего с css-идентификаторами, но общая их особенность вот в чем – id может быть только одним для одного конкретного элемента.
Нельзя задавать более 1 id одному элементу, а также нельзя давать один и тот же идентификатор двум разным элементам. Задается он с помощью атрибута id.
Из этого всего становится понятно, что идентификатор предназначен для стилизации одного конкретного элемента. Обычно он применяется по отношению к крупным элементам сайта. Например, к шапке (header), блоку контента (content), футеру (footer). То есть это те элементы, которые присутствуют на любом сайте в единственном числе и не повторяются. Также это может быть главная навигация, боковая колонка, форма комментариев и т.д.
Приоритетность в стилях
Если говорить о приоритетности в css, то тут идентификатор берет верх над классом. Давайте рассмотрим пример:
<div class = «green» id = «brown»></div>
<div class = «green» id = «brown»></div> |
У нас есть 1 блок. Мы задали ему класс и идентификатор. Пропишем стили:
.green{
color: green;
}
#brown{
color: brown;
}
.green{ color: green; } #brown{ color: brown; } |
Какого цвета будет текст в блоке: зеленого или коричневого? Коричневого. И не потому, что идентификатор стоит в таблице стилей дальше класса. В данном случае это неважно, можно было бы поставить его перед, но результат все равно был бы таковым. Все потому, что идентификатор можно задать только 1. Соответственно, это очень точная характеристика элемента.
Дело в том, что для браузера чем точнее селектор, тем он является более приоритетным для выполнения записанных в нем свойств. Например, возьмем простой селектор тега – p. Он обращается ко всем абзацам на странице. Очень широкий селектор, так как абзацев очень много.
Но давайте попробуем селектор p.right{}. Он уже обратится только к тем абзацам, которые имеют класс right. То есть их может быть на самом деле много, но в любом случае их будет меньше, чем абзацев всего.
А теперь обратимся, допустим, к селектору #p-text. Он очень точный, так как выберет всего 1 элемент, у которого имеется этот идентификатор. Соответственно, вы можете привязать к элементу хоть 7 классов и прописать в них стили, но идентификатора хватит, чтобы все нужные стили переопределить.
Подытоживаем
В общем-то, сегодня мы достаточно подробно разобрали работу этих важных компонентов css, а также для чего они нужны. Могу сказать, что стилевые классы используются обычно чаще. Я видел шаблоны, где вообще использовались только они. И это нельзя назвать какой-то грубой ошибкой, если так подумать.
Стилевой класс вы можете использовать как для стилизации группы элементов, так и для одного. Идентификатор же используется строго для одного элемента. Если вы попробуете один и тот же id прописать двум элементам, то это не сработает. Также нельзя одному элементу определять более одного идентификатора – это уникальная метка, которая может быть только в одном числе.
Если мы говорим о приоритетности, то id приоритетнее класса, но тот, в свою очередь, приоритетней обычных селекторов тегов.
Вот такие пироги, друзья. Еще одну вещь могу сказать – без этих вещей css просто немыслим, почти все стили в каскадных таблицах записываются, привязываясь либо к стилевому классу, либо к id. Если вы используете редактор кода с подсветкой синтаксиса, то это можно будет легко увидеть.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее 
PSD to HTML
Верстка сайта на HTML5 и CSS3 с нуля
Смотреть
HTML-классов — Атрибут класса
Атрибут класса HTML
используется для указания класса для элемента HTML.
Несколько элементов HTML могут использовать один и тот же класс.
Использование атрибута класса
Атрибут класса часто используется для указания
к имени класса в таблице стилей. Он также может использоваться JavaScript для доступа и
манипулировать элементами с определенным именем класса.
В следующем примере у нас есть три элемента
с атрибутом
класса со значением"город".Все три
элементы будут одинаково стилизованы в соответствии с .city
определение стиля в головном разделе: Пример
.city {
background-color: помидор;
цвет: белый;
граница: сплошной черный цвет 2px;
маржа: 20 пикселей;
отступ: 20 пикселей;
}
Лондон
Лондон - столица Англии.
Париж
Париж - столица Франции.
Токио
Токио - столица Японии.