Содержание

Классы | 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

HTML Классы

Используя атрибут class

HTML атрибут class позволяет определить равные стили для элементов с одинаковым именем класса.

Здесь мы имеем три элемента <div> с тем же именем класса:

Пример





div.cities {
    background-color: black;
    color: white;
    margin: 20px 0 20px 0;
    padding: 20px;
}

<div>
<h3>Лондон</h3>

<p>Лондон является столицей Англии. Это самый густонаселенный город в Соединенном Королевстве, с пригородами свыше 13 миллионов жителей.</p>
</div>

<div>
<h3>Париж</h3>
<p>Париж является столицей и самым густонаселенным городом Франции.</p>
</div>

<div>
<h3>Токио</h3>
<p>Токио столица Японии, центр большого Токио самый густонаселенный мегаполис в мире.</p>
</div>

</body>
</html>

Редактор кода »

Лондон

Лондон является столицей Англии. Это самый густонаселенный город в Соединенном Королевстве, с пригородами свыше 13 миллионов жителей.

Стоя на берегу реки Темзы, Лондон был крупным поселением на протяжении двух тысячелетий, за его историю, уходящую своего основания римлянами, которые назвали его Londinium.

Париж

Париж является столицей и самым густонаселенным городом Франции.

Расположен на реке Сене, это в центре регеона &Itilde;le-de-France, также известный как рéгеон парижанка.

В пределах его агломерации является одним из крупнейших населенных пунктов в Европе, с более чем 12 миллионов жителей.

Токио

Токио столица Японии, центр большого Токио самый густонаселенный мегаполис в мире.

Он является резиденцией японского правительства и Императорского дворца, дом японской императорской семьи.

Префектура Токио является частью самой густонаселенной в мире агломерации с 38 миллионов людей и крупнейшей городской экономикой в мире.

Используя атрибут class со Встроенными Элементами

Атрибут class HTML также может использоваться для встроенных элементов:

Пример





span.note {
    font-size: 120%;
    color: red;
}

<h2>Мой <span>Важный</span> Заголовок</h2>
<p>Это <span>Важный</span> текст.</p>

</body>
</html>

Редактор кода »

Проверьте себя с помощью упражнений!

HTML Идентификаторы и классы

Идентификаторы

Каждый НТМL-элемент может иметь атрибут id. Он предназначен для идентификации какого-либо конкретного тега. В пределах всей HTML-страницы должен существовать только один тег с определенным значением атрибута id. Наличие нескольких элементов с одинаковым значением id не допускается и может привести к ошибке. Значение атрибута id может состоять из букв латинского алфавита, цифр, знака подчеркивания и дефиса. Причем значение атрибута может начинаться с латинской буквы или со знака подчеркивания (но не с цифры или другого символа). Кроме того, значения атрибута

id чувствительны к регистру. Атрибут id называют глобальным, поскольку он может быть использован с любыми НТМL-элементами.
В CSS id-селектор содержит символ (#), непосредственно за которым следует значение атрибута id. Например, следующий id-селектор сопоставляется элементу <h3>, значение атрибута id которого равно chapter7:

#chapter7 {background-color:#FF00FF;}

После описания идентификатора его следует включить в состав тега:

<h3>Заголовок второго уровня с id</h3>

Пример: Применение идентификатора

Заголовок второго уровня с id

Заголовок второго уровня

Заголовок второго уровня

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
  #chapter7 {
     background-color:#FF00FF;
  }  
</style>
</head>
<body>
<h3>Заголовок второго уровня с id</h3>
<h3>Заголовок второго уровня</h3>
<h3>Заголовок второго уровня</h3>
</body>
</html>

Классы

Классы используются для классификации элементов по общим группам, поэтому в отличие от атрибута id, множеству элементов может быть присвоено общее имя класса. Присваивая элементам имя одного класса, вы можете применить стили ко всем таким элементам одновременно с помощью единственного правила стилей. Чтобы сделать это, следует воспользоваться атрибутом class. Его значение должно описывать, к какому классу принадлежит элемент.
Класс похож на идентификатор, но вместо символа (#) перед именем класса указывается точка (.):

<style>
h3.boldfont {font-weight: bold;}
h3.italicfont {font-style: courier;}
</style>

После описания класса его следует включить в открывающий тег элемента:

<h3>Заголовок второго уровня</h3>

Пример: Применение атрибутов id и class

Заголовок второго уровня с id и class=test

Заголовок второго уровня с class=test

Заголовок второго уровня

Заголовок второго уровня с class=test orange

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
  h3#chapter7 {background-color: #FF00FF;}  
  h3.orange {background-color: orange;}
  .test {color: green;}
</style>
</head>
<body>
<h3>Заголовок второго уровня с id и class=test</h3>
<h3>Заголовок второго уровня с class=test</h3>
<h3>Заголовок второго уровня</h3>
<h3>Заголовок второго уровня с class=test orange</h3>
</body>
</html>
Обратите внимание, что один и тот же элемент может иметь одновременно класс и идентификатор. Также любому тегу может быть присвоено сразу несколько классов. В этом случае они указываются через пробел в значении атрибута class.

Задачи

  • Атрибут class

    Примените класс test к элементу <div>.

    Задача HTML:

    Реши сам » 
    <!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
<style>   
  .test {
    background-color:blue;
    color:white;
  }
</style>
    </head>
    <body>
<div>
<h3>Атрибуты id и class</h3>
<p>Атрибут id (идентификатор) используется для идентификации.</p>
<p>Атрибут class (класс) используется для классификации.</p>
</div>
</body>
    </html>

  • Селектор класса

    Создайте селектор класса с именем «test». Напишите для созданного селектора два стилевых правила: первое, что цвет (color) элементов, к которым будет применен класс будет красным (red), а второе, что фон этих элементов будет желтым (yellow). Присвойте имя класса «test» заголовку <h3> и встроенному элементу <span>.

    Задача HTML:

    Реши сам » 
    <!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
<style> 
...
</style>
    </head>
    <body>
<h3>Атрибут class</h3>
<p>Атрибут <span>class (класс)</span> используется для классификации.</p>
</body>
    </html>

  • Цвет для идентификатора

    Напишите стилевое правило к абзацу с идентификатором, благодаря которому цвет текста этого абзаца станет красным.

    Задача HTML:

    Реши сам » 
    <!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
<style> 
...
</style>
    </head>
    <body>
<h3>Это заголовок</h3>
<p>Этот параграф будет выделен красным цветом.</p>
<p>Этот параграф НЕ будет выделен красным цветом.</p>
</body>
    </html>

  • Цвет для класса

    Напишите стилевое правило для класса, благодаря которому цвет текста элемента, к которому применен класс станет красным.

    Задача HTML:

    Реши сам » 
    <!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
<style> 
...
</style>
    </head>
    <body>
<h3>Это заголовок</h3>
<p>Этот параграф будет выделен красным цветом.</p>
<p>Этот параграф НЕ будет выделен красным цветом.</p>
</body>
    </html>

  • Селектор идентификатора

    Создайте селектор id с именем «redlow». Напишите для созданного селектора два стилевых правила: первое, что цвет (color) элемента, к которым будет применен id будет красным (red), а второе, что фон этого элемента будет желтым (yellow). Присвойте id с именем «redlow» заголовку <h3>.

    Задача HTML:

    Реши сам » 
    <!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
<style> 
...
</style>
    </head>
    <body>
<h3>Атрибут id</h3>
<p>Атрибут id (идентификатор) используется для идентификации, поэтому он на странице 
    только один.</p>
</body>
    </html>


Атрибуты class HTML уроки для начинающих академия


Использование атрибута Class

Атрибут class указывает одно или несколько имен классов для элемента HTML.

Имя класса может использоваться CSS и JavaScript для выполнения определенных задач для элементов с указанным именем класса.

В CSS, чтобы выбрать элементы с определенным классом, напишите символ точки (.), за которым следует имя класса:

Пример

Используйте CSS для оформления всех элементов с именем класса «City»:


.city {
    background-color: tomato;
    color: white;
    padding: 10px;
}

<h3 class=»city»>London</h3>
<p>London is the capital of England.</p>

<h3 class=»city»>Paris</h3>
<p>Paris is the capital of France.</p>

<h3 class=»city»>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>

Result:

London

London is the capital of England.

Paris

Paris is the capital of France.

Tokyo

Tokyo is the capital of Japan.

Совет: Атрибут Class можно использовать для любого элемента HTML.

Примечание: Имя класса чувствительно к регистру!

Совет: Вы можете узнать больше о CSS в нашем учебнике по CSS.

Использование атрибута Class в JavaScript

JavaScript может получить доступ к элементам с указанным именем класса с помощью getElementsByClassName() method:

Пример

Когда пользователь щелкает по кнопке, скройте все элементы с именем класса «city»:

<script>
function myFunction() {
  var x = document.getElementsByClassName(«city»);
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = «none»;
  }
}
</script>

Несколько классов

Элементы HTML могут иметь более одного имени класса, каждое имя класса должно быть разделено пробелами.

Пример

Элементы стиля с именем класса «City», а также элементы стиля с именем класса «Main»:

<h3 class=»city main»>London</h3>
<h3>Paris</h3>
<h3 class=»city»>Tokyo</h3>

В приведенном выше примере первый элемент <h3> принадлежит как классу «City», так и классу «Main».

Тот же класс, другой тег

Различные теги, такие как <h3> и <p>, могут иметь одно и то же имя класса и тем самым испол

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

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

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

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

HTML-классов — Атрибут класса

Атрибут HTML class используется для указания класса для элемента HTML.

Несколько элементов HTML могут совместно использовать один и тот же класс.

Использование атрибута класса

Атрибут class часто используется для указания на имя класса в таблице стилей. Он также может быть использован JavaScript для доступа и манипулировать элементами с определенным именем класса.

В следующем примере у нас есть три

элементов с атрибутом класса со значением «город».Все три
элементы будут стилизованы одинаково в соответствии с .city определение стиля в главном разделе:

Пример





.city {
цвет фона: помидор;
цвет: белый;
рамка: 2px сплошной черный; Маржа
: 20 пикселей;
отступы: 20 пикселей;
}


Лондон

Лондон — столица Англии.


Париж

Париж — столица Франции.


Токио

Токио — столица Японии.


Попробуй сам »

В следующем примере у нас есть два элементов с атрибутом класса со значением «нота».Оба элементы будут оформлены одинаково в соответствии с . Примечание определение стиля в главном разделе:

Пример





. Примечание {
размер шрифта: 120%;
цвет: красный;
}

Мой важный заголовок

Это некоторый важный текст.


Попробуй сам »

Совет: Атрибут class можно использовать в любом HTML-элементе .

Примечание: Имя класса чувствительно к регистру!

Подсказка: Вы можете узнать больше о CSS в нашем руководстве по CSS.

Синтаксис для класса

создать класс; написать символ точки (.), а затем имя класса Затем определите свойства CSS в фигурных скобках {}:

Пример

Создайте класс с именем «city»:





.city {
цвет фона: помидор;
цвет: белый;
отступов: 10 пикселей;
}

Лондон

Лондон — столица Англии.

Париж

Париж — столица Франции.

Токио

Токио — столица Японии.



Попробуй сам »

Несколько классов

HTML-элементы могут принадлежать более чем одному классу.

Чтобы определить несколько классов, разделите имена классов пробелом, например,

.Элемент будет стилизован под все классы указаны.

В следующем примере первый элемент

принадлежит обоим город класс, а также основной класс, и получит стили CSS от обоих классов:

Пример

Лондон

Париж

Токио

Попробуй сам »

различных элементов могут совместно использовать один и тот же класс

Различные элементы HTML могут указывать на одно и то же имя класса.

В следующем примере

и

указывает на «городской» класс и поделится тем же стилем:

Пример

Париж

Париж — столица Франции

Попробуй сам »

Использование атрибута класса в JavaScript

Имя класса может также использоваться JavaScript для выполнения определенных задач для конкретные элементы.

JavaScript может обращаться к элементам с определенным именем класса с помощью метода getElementsByClassName () :

Пример

Нажмите на кнопку, чтобы скрыть все элементы с именем класса «город»:


Пример

Использование атрибута класса в документе HTML:




h2.intro {
цвет: синий;
}

p.important {
цвет: зеленый;
}


Заголовок 1

Абзац.

Обратите внимание, что это важный абзац.:)


Попробуй сам "

Ниже приведены примеры "Попробуйте сами".

Определение и использование

Атрибут class указывает одно или несколько имен классов для элемента.

Атрибут class в основном используется для указания на класс в таблице стилей. Тем не менее, он также может быть использован JavaScript (через HTML DOM) для внесения изменений в HTML-элементы с указанным классом.

Поддержка браузера

Атрибут
класс да да да да да

Синтаксис

< элемент >

Значения атрибута

Значение Описание
имя класса Указывает одно или несколько имен классов для элемента.Чтобы указать несколько классов, разделите имена классов пробелом, например, . Это позволяет комбинировать несколько классов CSS для одного элемента HTML.

Правила именования:

  • Должен начинаться с буквы A-Z или a-z
  • Может сопровождаться: буквами (A-Za-z), цифрами (0-9), дефисами ("-") и символами подчеркивания ("_")

Дополнительные примеры

Пример

Добавить несколько классов к одному элементу HTML:





h2.вступление {
цвет: синий;
выравнивание текста: по центру;
}

.important {
цвет фона: желтый;
}


Заголовок 1

Абзац.


Попробуй сам "

Связанные страницы

Учебник по HTML: Атрибуты HTML

Учебник CSS: Синтаксис CSS

CSS Ссылка: CSS .класс Селектор

HTML DOM Ссылка: HTML DOM getElementsByClassName () Метод

HTML DOM Ссылка: HTML DOM className Свойство

HTML DOM Ссылка: HTML DOM classList Свойство

HTML DOM Reference: Объект стиля HTML DOM


,
HTML-классы

Онлайн

Пн, 13 июля 2020 до
вт, 14 июля 2020 до

Американский графический институт Американский графический институт https://www.agitraining.com

Онлайн

Онлайн-класс под руководством инструктора

1969-12-31T19: 00: 00-05: 00 $ 695.00

NYC

Ср, 22 июля 2020 до
чт, 23 июля 2020 до

Американский графический институт Американский графический институт https://www.agitraining.com

Нью-Йорк
Американский институт графики
AGI Training Нью-Йорк

21 W 46th St.
Нью-Йорк, Нью-Йорк 10036

1969-12-31T19: 00: 00-05: 00 $ 695,00

Онлайн

Ср, 22 июля 2020 до
чт, 23 июля 2020 до

Американский графический институт Американский графический институт https: // WWW.agitraining.com

Онлайн

Онлайн-класс под руководством инструктора

1969-12-31T19: 00: 00-05: 00 $ 695,00

Бостон

Ср, 22 июля 2020 до
чт, 23 июля 2020 до

Американский графический институт Американский графический институт https: // WWW.agitraining.com

Бостон
Американский институт графики
AGI Training Бостон

150 Президентский путь
Бостон - Woburn, MA 01801

1969-12-31T19: 00: 00-05: 00 $ 695,00

Филадельфия

Ср, 22 июля 2020 до
чт, 23 июля 2020 до

Американский графический институт Американский графический институт https: // WWW.agitraining.com

Филадельфия
Американский институт графики
AGI Training Philadelphia

101 West Elm St.
Филадельфия - Коншохокен, Пенсильвания 19428

1969-12-31T19: 00: 00-05: 00 $ 695,00

NYC

Пн, 3 августа 2020 года до
вт, 4 августа 2020 года

Американский графический институт Американский графический институт https: // WWW.agitraining.com

Нью-Йорк
Американский институт графики
AGI Training Нью-Йорк

21 W 46th St.
Нью-Йорк, Нью-Йорк 10036

1969-12-31T19: 00: 00-05: 00 $ 695,00

Филадельфия

Пн, 3 августа 2020 года до
вт, 4 августа 2020 года

Американский графический институт Американский графический институт https: // WWW.agitraining.com

Филадельфия
Американский институт графики
AGI Training Philadelphia

101 West Elm St.
Филадельфия - Коншохокен, Пенсильвания 19428

1969-12-31T19: 00: 00-05: 00 $ 695,00

Бостон

Пн, 3 августа 2020 года до
вт, 4 августа 2020 года

Американский графический институт Американский графический институт https: // WWW.agitraining.com

Бостон
Американский институт графики
AGI Training Бостон

150 Президентский путь
Бостон - Woburn, MA 01801

1969-12-31T19: 00: 00-05: 00 $ 695,00

Онлайн

Пн, 10 августа 2020 года до
вт, 11 августа 2020 года

Американский графический институт Американский графический институт https: // WWW.agitraining.com

Онлайн

Онлайн-класс под руководством инструктора

1969-12-31T19: 00: 00-05: 00 $ 695,00

Филадельфия

Ср, 19 августа 2020 года до
Чт, 20 августа 2020 года

Американский графический институт Американский графический институт https: // WWW.agitraining.com

Филадельфия
Американский институт графики
AGI Training Philadelphia

101 West Elm St.
Филадельфия - Коншохокен, Пенсильвания 19428

1969-12-31T19: 00: 00-05: 00 $ 695,00

NYC

Ср, 19 августа 2020 года до
Чт, 20 августа 2020 года

Американский графический институт Американский графический институт https: // WWW.agitraining.com

Нью-Йорк
Американский институт графики
AGI Training Нью-Йорк

21 W 46th St.
Нью-Йорк, Нью-Йорк 10036

1969-12-31T19: 00: 00-05: 00 $ 695,00

Онлайн

Ср, 19 августа 2020 года до
Чт, 20 августа 2020 года

Американский графический институт Американский графический институт https: // WWW.agitraining.com

Онлайн

Онлайн-класс под руководством инструктора

1969-12-31T19: 00: 00-05: 00 $ 695,00

Бостон

Ср, 19 августа 2020 года до
Чт, 20 августа 2020 года

Американский графический институт Американский графический институт https: // WWW.agitraining.com

Бостон
Американский институт графики
AGI Training Бостон

150 Президентский путь
Бостон - Woburn, MA 01801

1969-12-31T19: 00: 00-05: 00 $ 695,00

NYC

Вт, 8 сентября 2020 года до
Ср, 9 сентября 2020 года

Американский графический институт Американский графический институт https: // WWW.agitraining.com

Нью-Йорк
Американский институт графики
AGI Training Нью-Йорк

21 W 46th St.
Нью-Йорк, Нью-Йорк 10036

1969-12-31T19: 00: 00-05: 00 $ 695,00

Филадельфия

Вт, 8 сентября 2020 года до
Ср, 9 сентября 2020 года

Американский графический институт Американский графический институт https: // WWW.agitraining.com

Филадельфия
Американский институт графики
AGI Training Philadelphia

101 West Elm St.
Филадельфия - Коншохокен, Пенсильвания 19428

1969-12-31T19: 00: 00-05: 00 $ 695,00

Бостон

Вт, 8 сентября 2020 года до
Ср, 9 сентября 2020 года

Американский графический институт Американский графический институт https: // WWW.agitraining.com

Бостон
Американский институт графики
AGI Training Бостон

150 Президентский путь
Бостон - Woburn, MA 01801

1969-12-31T19: 00: 00-05: 00 $ 695,00

Онлайн

Пн, 14 сентября 2020 года до
вт, 15 сентября 2020 года

Американский графический институт Американский графический институт https: // WWW.agitraining.com

Онлайн

Онлайн-класс под руководством инструктора

1969-12-31T19: 00: 00-05: 00 $ 695,00
.

HTML - атрибут id

Используется атрибут HTML id указать уникальный идентификатор для элемента HTML.

Вы не можете иметь более одного элемента с одинаковым идентификатором в HTML документ.

Использование атрибута идентификатора

Атрибут идентификатор указывает уникальный идентификатор для элемента HTML. Значение , идентификатор Атрибут должен быть уникальным в документе HTML.

Атрибут id используется для указания к определенному объявлению стиля в таблице стилей.Он также используется JavaScript для доступа и манипулировать элементом с конкретным идентификатором.

Синтаксис для идентификатора: написать символ хеша (#), за которым следует имя идентификатора. Затем определите свойства CSS в фигурных скобках {}.

В следующем примере у нас есть элемент

, который указывает на имя "MYHEADER". Это

элемент будет стилизован в соответствии с #myHeader определение стиля в главном разделе:

Пример





#myHeader {
цвет фона: голубой;
цвет: черный;
отступа: 40px;
выравнивание текста: по центру;
}

My Заголовок


Попробуй сам "

Примечание: ИД учитывает регистр!

Примечание: Идентификационное имя должно содержать хотя бы один символ и не должен содержать пробелы (пробелы, табуляции, и т.п.).

Разница между классом и ID

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

Пример


/ * Стиль элемента с идентификатором "myHeader" * /
#myHeader {
цвет фона: голубой;
черный цвет;
обивка: 40px;
выравнивание текста: по центру;
}

/ * Стиль все элементы с названием класса "город" * /
.город {
цвет фона: помидор;
цвет: белый;
отступы: 10 пикселей;
}


My Города


Лондон

Лондон - столица Англии.

Париж < / h3>

Париж - столица Франции.

Токио

Токио - столица Японии.

Попробуй сам "

HTML-закладки с идентификатором и ссылками

HTML-закладки используются, чтобы позволить читателям переходить к определенным частям веб-страницы.

Закладки могут быть полезны, если ваша страница очень длинная.

Чтобы использовать закладку, вы должны сначала создать ее, а затем добавить ссылку к этому.

Затем, когда щелкнет ссылка, страница перейдет к месту с закладка.

Пример

Сначала создайте закладку с атрибутом id :

Глава 4

Затем добавьте ссылку на закладку («Перейти к главе 4») на той же странице:

Или добавьте ссылку на закладку («Перейти к главе 4») с другой страницы:

Перейти к главе 4

Использование атрибута id в JavaScript

Атрибут id также может использоваться JavaScript для выполнения некоторые задачи для этого конкретного элемента.

JavaScript может получить доступ к элементу с определенным идентификатором с помощью метода getElementById () :

Пример

Используйте атрибут id для управления текстом с помощью JavaScript: