Классы | 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 ССБТ &quot;Шум. Общие 
      требования безопасности&quot;</span>, шумовой характеристикой рабочих 
      мест при постоянном шуме являются уровни звуковых давлений в децибелах 
      в октавных полосах. Совокупность таких уровней называется 
      <b>предельным спектром</b>, номер которого численно равен 
      уровню звукового давления в октавной полосе со среднегеометрической 
      частотой 1000&nbsp;Гц.
   </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. Какое имя класса написано правильно?

  1. 2layer1
  2. 1layer
  3. Яndex
  4. pink-floyd
  5. 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; }

  1. Зелёный.
  2. Синий.
  3. Жёлтый.
  4. Оранжевый.
  5. Чёрный.

3. Как задать стиль у тега <div>DOOM</div>?

  1. div[iddqd] { color: red; }
  2. div.iddqd { color: red; }
  3. iddqd.div { color: red; }
  4. div#iddqd { color: red; }
  5. 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; }

  1. s1
  2. s2
  3. s3
  4. s2 s4
  5. s5

Ответы

1. pink-floyd

2. Чёрный.

3. div.iddqd { color: red; }

4. s2 s4

htmlbook.ru

Использование CSS классов – удобный путеводитель

3K

В сегодняшней статье мы рассмотрим 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» , подготовленной дружной командой проекта Интернет-технологии.ру

www.internet-technologies.ru

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 классов в создании облака тегов.

Все ссылки в облаке тегов должны иметь один цвет, но размеры ссылок разные. Также общим можно указать шрифт ссылок.

komotoz.ru

Классы | 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 (Черновик спецификации) — первая черновая версия стандарта.

×

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — свойство полностью поддерживается браузером со всеми допустимыми значениями;
  •  — свойство браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

Число указывает версию браузера, начиная с которой свойство поддерживается.

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 30.08.2017

Редакторы: Влад Мержевич

webref.ru

Классы | 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 классы не работают, если их имена начинаются с дефиса (-) или символа подчеркивания (_).

htmlbook.ru

Список популярных названий классов CSS

Блоки

page — корневой элемент страницы

header — шапка (страницы или элемента)

footer — подвал (страницы или элемента)

section — раздел контента (один из нескольких)

body — основная часть (страницы или элемента)

content — содержимое элемента

sidebar — боковая колонка (страницы или элемента)

aside — блок с дополнительной информацией

widget — виджет, например, в боковой колонке

Раскладка

wrapper, wrap — обёртка, обычно внешняя

inner — внутренняя обёртка

container, holder, box — контейнер

grid — раскладка (страницы или элемента) в виде сетки (обычно содержит в себе row и col)

row — контейнер в виде строки

col, column — контейнер в виде столбца

Элементы управления

button, btn — кнопка, например, для отправки формы

control — элемент управления, например, стрелки «Вперёд/назад» в фотогалерее, кнопки управления слайдером

dropdown — выпадающий список

Текст

title, subject, heading, headline, caption — заголовок

subtitle — подзаголовок

slogan — слоган

lead, tagline — лид-абзац в тексте

text — текстовый контент

desc — описание, вариант текстового контента

excerpt — отрывок текста, обычно используется перед ссылкой «Читать далее…»

link — ссылка

copyright, copy — копирайт

Списки

list, items — список

item — элемент списка

Изображения

image, img, picture, pic — картинка

icon — иконка

logo — логотип

userpic, avatar — юзерпик, маленькая картинка пользователя

thumbnail, thumb — миниатюра, уменьшенное изображение

Медиавыражения

phone, mobile — мобильные устройства

phablet — телефоны с большим экраном (6-7″)

tablet — планшеты

notebook, laptop — ноутбуки

desktop — настольные компьютеры

Размеры

tiny — маленький, крохотный

small — небольшой

medium — средний

big, large — большой

huge — огромный

narrow — узкий

wide — широкий

Состояния

active, current — активный элемент, например, текущий пункт меню

hidden — скрытый элемент

error — статус ошибки

warning — статус предупреждения

success — статус успешного выполнения задачи

pending — состояние ожидания, например, перед сменой статуса на error или success

Дополнительно

search — поиск

socials — блок иконок соцсетей

advertisement, adv, commercial, promo — рекламный блок (режутся Адблоком, не рекомендуется использовать такие классы для блоков с внутренней рекламой)

features, benefits — список основных особенностей товара, услуги

slider, carousel — слайдер, интерактивный элемент с прокруткой содержимого

pagination — постраничная навигация

user, author — пользователь, автор записи или комментария

meta — блок с дополнительной информацией, например, блок тегов и даты в посте

cart, basket — корзина

breadcrumbs — навигационная цепочка, «хлебные крошки»

more, all — ссылка на полную информацию

modal — модальное (диалоговое) окно

popup — всплывающее окно

tooltip, tip — всплывающие подсказки

preview — анонс, отрывок, например новости или поста, может состоять из заголовка, описания и картинки. Предполагается ссылка на полную версию

Источник: «Слова, часто используемые в CSS-классах»

tpverstak.ru

Использование классов и идентификаторов для назначения стилей

712

Часто нужно применить стиль только для отдельных элементов. В других случаях необходимо создать стиль, который можно применить к нескольким элементам документа без повторения правила для каждого отдельного экземпляра. Для реализации этих задач можно использовать HTML class и id.

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

<style type="text/css">
  p { color: #0000ff; }
  p.alert { color: #ff0000; }
</style>

Эти стили задают для всех параграфов синий цвет (#0000FF), но любой абзац с классом «alert» будет выводиться красным цветом.

Атрибут class является более специфичным, чем первое правило CSS, которое использует только селектор тега. Вот как это можно использовать в HTML-разметке:

<p>
Этот абзац будет отображаться синим цветом, который является цветом текста по умолчанию.
</p>
<p>
Этот абзац также будет синим.
</p>
<p>
А этот абзац будет отображаться красным цветом, так как атрибут class переопределяет стандартный синий цвет.
</p>

В этом примере стиль «p.alert» будет применяться только к параграфам, которые используют класс «alert«. Если вы хотите применить этот HTML style class для нескольких элементов, нужно удалить элемент из начала стиля (только не забудьте оставить точку):

<style type="text/css">
.alert {background-color: #ff0000;}
</style>

Теперь можно применять этот класс к любому элементу:

<p>
Этот параграф будет отображаться красным цветом.
</p>
<h3>Этот элемент h3 также будет красным.</h3>

На сегодняшний день классы CSS применяются к большинству элементов, потому что с ними легче работать, чем с идентификаторами.

Селектор ID позволяет присвоить имя определенному стилю, не связывая его с тегом или другим HTML-элементом. Допустим, что у вас есть блок div, который содержит информацию о событии. Можно задать для него id «event«, а затем выделить этот блок черной рамкой шириной в 1 пиксель:

<style type="text/css">
#event { border: 1px solid #000; }
</style>

Проблема, связанная с идентификаторами, заключается в том, что они не могут повторяться в HTML-документе. Они должны быть уникальными. Так что если у вас есть три блока событий, и для них нужно создать рамку, придется присвоить им идентификаторы «event1«, «event2» и «event3» и задать стили отдельно для каждого. Поэтому было бы гораздо проще использовать упомянутый выше HTML div class «event» и задать стили для всех сразу.

Идентификаторы являются более специфичными, чем классы. Например, если нужно переопределить ранее установленный стиль, это может быть трудно сделать, если использовать много идентификаторов. По этой причине многие веб-разработчики отошли от использования идентификаторов в разметке, даже если планируется использовать это значение только один раз. Вместо этого для назначения почти всех стилей применяют менее специфичные классы.

Но идентификаторы незаменимы, если нужно создать страницу, которая содержит анкорные ссылки. Например, если у вас есть параллакс-сайт. Он содержит весь контент на одной странице со ссылками, с помощью которых можно «перепрыгивать» к различным частям страницы. Это делается с помощью идентификаторов и текстовых ссылок, которые использует эти анкорные ссылки. Вы просто добавляете значение этого атрибута, которому предшествует символ #, в атрибут ссылки href. Например, следующим образом:

<a href="#event"> Это ссылка </a>

Если вы хотите создать такой тип внутри страничной навигации, без использования идентификаторов вам не обойтись. Но вы все равно можете применять HTML class для определения общих стилей.

Данная публикация представляет собой перевод статьи «Using Style Classes and IDs» , подготовленной дружной командой проекта Интернет-технологии.ру

www.internet-technologies.ru

Отправить ответ

avatar
  Подписаться  
Уведомление о