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

4.1K

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

Смотреть

webformyself.com

Атрибут class | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
4.0+1.0+3.5+1.0+1.0+1.0+1.0+

Описание

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

Синтаксис

class="имя"

Значения

Имена классов могут содержать в себе латинские буквы (A–Z, a–z), цифры (0–9), символ дефиса (-) и подчеркивания (_). Использование русских букв в классах недопустимо.

Значение по умолчанию

Нет.

Применяется к тегам

<a>, <abbr>, <acronym>, <address>, <applet>, <area>, <b>, <basefont>, <bdo> <bgsound>, <big>, <blockquote>, <body>, <br>, <button>, <caption>, <center>, <cite>, <code>, <col>, <colgroup>, <dd>, <del>, <dfn>, <dir>, <div>, <dl>, <dt>, <em>, <embed>, <fieldset>, <font>, <form>, <frame>, <h2>, <h3>, <h4>, <h5>, <h5>, <h6>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <isindex>, <kbd>, <label>, <legend>, <li>, <link>, <map>, <marquee>, <menu>, <nobr>, <object>, <ol>, <option>, <p>, <plaintext>, <pre>, <q>, <s>, <samp>, <select>, <small>, <span>, <strike>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <u>, <ul>, <var>, <wbr>, <xmp>

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Атрибут class</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>

htmlbook.ru

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>

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

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

schoolsw3.com

Селектор .class | CSS справочник

CSS селекторы

Значение и применение


Селектор класса в CSS.

Селектор .class стилизует все элементы с указанным классом. После имени идет блок описаний (объявлений), содержащий свойства и их значения.

Обратите внимание на следующие правила, которые необходимо соблюдать при работе с селекторами класса:

  • все названия селекторов класса должны начинаться с точки (благодаря ей браузеры находят эти селекторы в таблице стилей). Точка требуется только в названии селектора таблицы стилей (в значении глобального HTML атрибута class она не ставится, будьте внимательны из-за этого возникает много ошибок).
  • используйте только буквы алфавита (A-Z, a-z), числа, дефисы, знаки подчеркивания.
  • название после точки всегда должно начинаться с символа (неправильно: .50cent, .-vottakvot).
  • Учитывайте регистр при наименовании стилевых классов, т.к. они к этому чувствительны и очень ранимы (.vottakvot и .VotTakVot разные классы).

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

CSS синтаксис:

.class {
блок объявлений;
}

Обращаю Ваше внимание, что вы можете использовать селекторы класса напрямую к HTML элементам, используя следующий синтаксис:

a.test { /* выбирает все элементы <a> с классом test */
блок объявлений;
}
p.intro { /* выбирает все элементы <p> с классом intro */
блок объявлений;
}

Версия CSS

CSS1

Пример использования

И так, мы хотим, чтобы один из элементов выглядел не так, как другие. Для этого нам необходимо создать селектор, назначив ему имя, которое нам необходимо придумать самостоятельно:

.test {
text-align: center; /* горизонтальное выравнивание текста по центру */
font-family: Courier; /* задаем тип шрифта Courier */
color: green; /* задаем цвет текста*/
margin-top: 50px; /* добавляем отступ от верхнего края элемента */
}

После того как мы создали наш класс в таблице стилей, нам необходимо применить его к интересующему нас элементу, или элементам, которые мы хотим стилизовать. Чтобы указать класс для определенного элемента, необходимо добавить к этому элементу глобальный HTML атрибут class со значением нашего класса, но без точки:

<h3 class = "test">Заголовок второго уровня</h3> /* задаем класс для элемента*/

Теперь соберем это в одном примере и посмотрим результат:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title> Селекторы класса</title>
<style>
.test {
text-align: center; /* горизонтальное выравнивание текста по центру */
font-family: Courier; /* задаем тип шрифта Courier */
color: green; /* задаем цвет текста*/
margin-top: 50px; /* добавляем отступ от верхнего края элемента */
}
</style>
</head>
<body>
	<h3>Обычный заголовок второго уровня</h3>
	<h3 class = "test">Заголовок с заданным классом</h3>
</body>
</html>

Результат нашего примера:

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

Селекторы класса очень гибкий инструмент, который позволяет указать конкретный стиль даже к одному слову предложения. Для этого мы поместим это слово внутри элемента <span> и назначим этому элементу определённый класс, который опишем во внутренней таблице стилей:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Пример выделения одного слова</title>
<style>
.test {
color: #00FF00; /* задаём цвет текста */
font-size: 30px; /* задаем размер шрифта*/
}
</style>
</head>
<body>
	<h3>Обычный заголовок <span class = "test">второго</span> уровня</h3>
</body> 
</html>

Результат нашего примера:

Рис. 6 Пример выделения одного слова с использованием селектора класса.CSS селекторы

basicweb.ru

Мультиклассы | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
5.07.0+1.0+3.5+1.0+1.0+1.0+1.0+

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

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

Синтаксис

<E>

Здесь E — обозначает любой тег.

В стилях допустимо использовать запись следующего вида.

.class1.class2 { Описание правил стиля }

В таком случае стиль применяется только для элементов, у которых одновременно заданы классы class1 и class2, т. е. в коде HTML используется конструкция <EexampleTitle»>Пример

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Мультиклассы</title>
  <style>
   .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>

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

Рис. 1. Цвет и размер ссылок, заданный через классы

Браузеры

Браузер IE до версии 7.0 некорректно работает с мультиклассами и понимает запись .a.b как .b, т.е. воспринимает только имя последнего класса, что приводит к ошибкам.

htmlbook.ru

CSS: Селекторы ID и CLASS

Если нам нужно сделать отступ у первой строки для всех абзацев или изменить цвет всех заголовков первого уровня, то мы будем использовать селектор типа:


/*Задаём отступ первой строки для всех абзацев*/
p {text-indent: 25px;}

/*Изменяем цвет всех заголовков первого уровня на зелёный*/
h2 {color: green;}

Селектор типа — это селектор, который задаёт стиль для всех элементов с данным именем. В стилях в качестве селектора в данном случае выступает имя тега.

Но что если нам не нужно изменять цвет для всех заголовков <h2>, а только у одного или у двух? CSS предоставляет нам такую возможность. С помощью селекторов id и class, мы можем применять стиль к элементам не зависимо от их имён.

Селектор id

CSS селектор id (идентификатор) предназначен для применения стиля к уникальным элементам на веб-странице. Уникальность элемента означает, что элемент с данным оформлением будет использоваться на странице всего один раз. В роли таких элементов могут быть: шапка сайта, нижний колонтитул, меню навигации и тд.

Для использования селектора id, нужно создать идентификатор (id), придумав ему уникальное имя, и прописать его в атрибуте id элемента, к которому будет применяться стиль. В CSS коде селектор id начинается с символа # сразу после которого идет имя идентификатора.

Каждый идентификатор может встречаться на странице только один раз, т.е. определенный id должен быть использован на странице только с тем тегом, для которого он предназначен. Если один и тот же идентификатор будет применен более, чем к одному элементу, во-первых HTML код не пройдет валидацию, во-вторых это может вызвать некорректную обработку кода браузером и вы можете увидеть не тот результат, которого ожидали.

Пример работы селектора id:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      #para1 {
        text-align: center;
        color: red;
      } 
    </style>
  </head>

  <body>
    <p>Добро пожаловать!</p>
    <p>К этому абзацу не будет применен стиль.</p>
  </body>
</html>
Попробовать »

Примечание: не давайте идентификаторам имена, начинающиеся с цифр, они не будут работать в браузере Mozilla Firefox.

Селектор class

CSS селектор class позволяет также как и селектор id стилизовать конкретный элемент страницы, но в отличие от id, селектор class позволяет применить свой стиль к нескольким элементам на веб-странице, а не только к одному.

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

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

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

CSS код для классов ничем не отличается от CSS кода для других селекторов. После имени класса идет блок объявлений, содержащий все необходимые свойства:

.menu {
  color: #33CCFF;
  font-family: sans-serif;
}

Если атрибут class, с одним и тем же именем, добавлен к нескольких разным тегам, а вам нужно чтобы стиль применялся только к определенным тегам, то в селекторе перед обозначением класса нужно указать тег, к которому должен быть применён стиль:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      p.center { text-align: center; }
    </style>
  </head>

  <body>
    <h2>Стиль не будет применен.</h2>
    <p>Абзац будет выровнен по центру.</p> 
  </body>
</html>
Попробовать »

Как вы уже заметили из примера, писать точку перед именем класса в HTML коде (в значении атрибута class) не нужно. Она требуется только в обозначении селектора в таблице стилей.

С этой темой смотрят:

puzzleweb.ru

No related posts.