Способы построения колонок в css

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

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

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

Пример

<!DOCTYPE html><html><head><style>
.city { background-color: black; color: white; margin: 20px;
padding: 20px;} </style>
</head><body><div class=»city»>

<h2>Лондон</h2> <p>Лондон — столица Англии.</p>
</div><div class=»city»>

<h2>Париж</h2> <p>Париж — столица Франции.</p></div><div class=»city»>

<h2>Токио</h2> <p>Токио — столица Японии.</p></div></body></html>

Результат:

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

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

Пример

<!DOCTYPE html><html><head><style>.note {
font-size: 120%; color: red;}
</style></head><body><h1>Мой <span class=»note»>Important</span> Заголовок</h1><p>Это уже кое-что <span class=»note»>important</span> text.</p></body></html>

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

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

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

Определение стилей для класса

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

Пример

Стиль всех элементов с именем класса «city»:

Результат:

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

HTML элементы могут иметь более одного имени класса.

Чтобы указать несколько классов, разделите имена классов пробелом, например <div class=»city main»>.
Это позволяет объединить несколько классов CSS для одного HTML элемента.

В следующем примере первый элемент принадлежит обоим классам
, а также к классу , и получит стили CSS от обоих классов:

Пример

<h2 class=»city main»>Лондон</h2><h2 class=»city»>Париж</h2><h2
class=»city»>Токио</h2>

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

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

В следующем примере оба варианта и
указывает на то, что класс «city» будет разделять один и тот же стиль:

Пример

<h2 class=»city»>Париж</h2><p
class=»city»>Париж — столица Франции.</p>

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

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

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

Пример

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

Не волнуйтесь, если вы не понимаете код в приведенном выше примере.

Вы узнаете больше о JavaScript в разделе HTML JavaScript, или вы можете изучить,
JavaScript Учебник.

Краткое содержание главы

HTML атрибут указывает одно или несколько имен классов для элемента
Классы используются CSS и JavaScript для выбора и доступа к определенным элементам
Атрибут может быть использован для любого HTML элемента
Имя класса чувствительно к регистру
Различные элементы HTML могут указывать на одно и то же имя класса
JavaScript может получить доступ к элементам с определенным именем класса с помощью мтода

Как выбрать тег по его атрибуту

Еще один вариант выбора тега по его атрибуту. Предположим что у нас есть такие вот 2 кнопки в форме:

<input type="text" value="">
<input type="submit" value="send">

Как видите, у наших кнопок нету классов. Предположим что вам нужно как-то добраться до них:

input {}
input {}

Как вы возможно поняли, выбирать можно по любым атрибутам, указывая таким вот образом. Не забудьте, что такой выбор отлично работает в случае активных действий мыши:

input:focus {}
input:hover {cursor: pointer;}

Напоследок хотелось бы рассказать про, так называемые data- атрибуты. В HTML5 появилась возможность в коде указывать не только стандартные атрибуты, но и произвольные атрибуты, которые могут нам пригодится. Как работают дата атрибуты:

<p class="my-class" data-title="Hello, "></p>

Мы записали текстовую информацию в наш собственный атрибут data-title. Тут может быть любая информация — кстати говоря, отлично подойдет для данных полученных динамическим путем. Наш CSS код:

.my-class:before {
  content: attr(data-title);
}

Мы выводим фразу «Hello, » сразу перед основным содержимым.
Ну вот и все что я хотел рассказать в этом небольшом обзоре. Почитайте в интернете какие еще есть способы выбора и обязательно попробуйте все что вы узнали на практике

Способы подключения CSS

Таблицу стилей можно прописать конкретно в коде HTML-страницы, обрамив правила тегами <style>. Или хранить в отдельном файле .css — и применять для многих страниц. Это внутренние и внешние таблицы стилей. Их еще называют глобальными и связанными.

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

Это так называемый встроенный стиль. В данном случае атрибут style относится к HTML, а код CSS прописывается внутри скобок. Но нет особого смысла прописывать стили именно таким образом. Просто технически такая возможность существует, ее лучше знать, вдруг когда-нибудь понадобится. Если же мы хотим грамотно применить стиль только к определенному элементу (например, только к одному абзацу на отдельной странице), то в таблице стилей следует создать особый тип стиля, который называется селектором класса — он форматирует только те элементы, к которым мы применим этот класс.

Например, в случае данного абзаца (p) в таблице стилей создается селектор класса, например, skill:

А затем тег этого абзаца трансформируется из

Так можно грамотно подключать стили к документу вместо того, чтобы прописывать встроенные стили. У этого метода ряд очевидных преимуществ: гораздо удобнее хранить стили изолированно и отдельно от документа: так их легче редактировать и применять к разным документам (вдруг вы захотите использовать тот же класс skill для еще одного абзаца?). Но главное — так соблюдается концептуальное разделение контента (HTML) и оформления (CSS).

Внутренние таблицы стилей

Возьмем тот же простой стиль, который определяет размер шрифта (font-size) и цвет (color) для абзацев (p) на странице.

Этот код можно внедрить непосредственно в конкретную HTML-страницу, обрамив тегами <style>…</style>. Все это вставляется в код страницы сразу после заголовка (тег <title>).

Таким образом, наша страница будет теперь выглядеть следующим образом:

…и так далее.

Полный код такой страницы:

Обратите внимание на оформление кода CSS. На самом деле не обязательно начинать каждое объявление с новой строки или оставлять отдельные строки для фигурных скобок

Просто принято оформлять код именно так для лучшей читаемости, при этом перед объявлениями ставится табуляция или несколько пробелов.

Сейчас мы создали внутреннюю таблицу стилей, которую в будущем сможем редактировать по своему желанию: добавлять новые правила, то есть селекторы и объявления для любых элементов на странице. Более того, можно даже вынести ее в отдельный файл .css — и применить сразу для многих HTML-страниц. Это уже будут внешние таблицы стилей.

Внешние таблицы стилей

Внешние таблицы стилей хранятся в отдельном файле с расширением .css. Вы можете создать этот файл хоть в Блокноте, главное — сохранить под правильным расширением. Содержание этого файла не отличается от кода, который мы написали для внутренних стилей и поместили между открывающим тегом <style> и закрывающим </style>:

То есть в файле .css пишется все то же самое, что и во внутренних стилях. И наоборот: во внутренних стилях внутри тегов <style> можно писать все то же самое, что и в файле .css. Разница только в том, что внешние стили могут применяться сразу к нескольким страницам HTML и даже ко всему сайту целиком.

Теперь вместо тегов <style> в HTML-файлы нужно вставить код, который указывает на местонахождение внешней таблицы стилей. Он вставляется в то же самое место после заголовка (<title>), где мы раньше размещали встроенные стили:

Он будет выглядеть так:

В данном примере не указан путь до файла styles.css, потому что он лежит в той же папке, что и документ HTML. Если же файл находится в другой папке или вообще на другом сервере, то следует указать полный абсолютный или относительный путь к нему. В случае нашего сервера достаточно относительного пути с указанием только папки, где лежит файл. В случае другого сервера потребуется полный абсолютный путь с указанием доменного имени.

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

Предотвращение наследования

Когда переменные CSS используются для хранения данных, их поведение по умолчанию — наследование — желательно. Определяем переменные в корневом элементе и можем переопределять их в поддереве. Но наследование часто мешает. Рассмотрим следующий пример, в котором используется переменная для применения тонкого свечения с предопределенным цветом, смещением и радиусом размытия, но с переменным разбросом:

See this code Cancelling inheritance on x.xhtml.ru.

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

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

Фрагменты URL-адресов

Атрибуты id должны быть уникальными, поскольку на них указывают «фрагменты URL-адресов». Фрагменты — это элементы, с помощью которых можно указать пользователям на определенную часть веб-страницы. Они выглядят как селекторы идентификаторов, расположенные в конце URL-адреса:

Например, если мы хотим указать пользователю на вторую кнопку, можно использовать следующий код

Обратите внимание, что можно полностью опустить URL-адрес, если он указывает на другой раздел той же веб-страницы:

<!-- С той же страницы -->
<a href='#button-2'>Go to Button Two</a>
<!-- С другой страницы -->
<a href='selectors.html#button-2'>Go to Button Two</a>

Если вы добавите первый вариант ссылки в разметку страницы selectors.html и кликните по ней, то увидите, что данный URL-адрес значится в адресной строке браузера. Чтобы увидеть, как осуществляется переход ко второй кнопке, нужно добавить на страницу немного произвольного контента или сделать высоту окна маленькой:

Этот пересекающийся функционал является веской причиной для того, чтобы избегать использования идентификаторов. Они создают зависимость между URL-адресами сайта и стилями CSS. Представьте, что вы используете в заголовках кучу атрибутов id в качестве как фрагментов URL-адресов, так и идентификаторов. Если вы забудете обновить таблицу стилей, когда отредактируете URL-адрес, то сломаете свой сайт.

Создание CSS-класса с помощью селектора

Приступим к изучению классов CSS на практике. Сотрите все, что есть сейчас в файле styles.css и добавьте следующий фрагмент кода, чтобы объявить правило для класса red-text:

После добавления кода в styles.css сохраните файл.

Теперь откройте файл index.html и сотрите все, кроме первой строки кода:

Она ссылается на вашу таблицу стилей CSS. Затем добавьте следующий фрагмент HTML-кода:

Обратите внимание, здесь в имя класса не точка не добавляется. На данный момент файл index.html должен содержать такой код:. Здесь мы добавили текст с помощью тега HTML

Также мы указали класс red-text, добавив выделенный атрибут класса class = “red-text” внутри открывающего тега HTML

Здесь мы добавили текст с помощью тега HTML <p>. Также мы указали класс red-text, добавив выделенный атрибут класса class = “red-text” внутри открывающего тега HTML.

Сохраните файл index.html и загрузите его в браузере. Если вы не знаете, как просматривать оффлайн-файл HTML, пожалуйста, обратитесь к нашему мануалу по работе с HTML-элементами (раздел «Просмотр оффлайн HTML-файла в браузере»).

Вы должны получить веб-страницу с красным текстом:

Here is the first sample of paragraph text.

Теперь давайте добавим еще один класс CSS, чтобы посмотреть, как происходит стилизация различных фрагментов текстового контента элемента <p>. Добавьте следующий фрагмент кода в файл styles.css (после класса red-text):

Это правило объявляет, что свойству background-color класса yellow-background-text присвоено значение yellow. Любой текстовый HTML элемент, которому присвоится этот класс, будет использовать желтый фон

Обратите внимание, слово text в классе yellow-background-text используется только для удобства чтения файла человеком. На обработку самого класса браузером это слово никак не влияет

Чтобы применить новый класс к каким-нибудь элементам, вернитесь в файл index.html и добавьте следующую строку в конец файла:

Мы добавили новый текст с помощью элемента <p> и указали класс yellow-background-text. Сохраните файл и перезагрузите его в браузере. Ваша веб-страница покажет два разных предложения, первое будет написано красным, а второе – на желтом фоне:Here is the first sample of paragraph text.

Here is the second sample of paragraph text.

Обратите внимание: в один HTML-тег можно добавить несколько классов. Попробуйте поместить оба класса в один текстовый элемент, добавив следующую строку в index.html:. Как видите, имена классов разделяются только пробелом

Сохраните файл и перезагрузите его в браузере. Вы должны получить такой результат:Here is the first sample of paragraph text

Как видите, имена классов разделяются только пробелом. Сохраните файл и перезагрузите его в браузере. Вы должны получить такой результат:Here is the first sample of paragraph text.

Here is the second sample of paragraph text.

Here is a third sample of text.

Теперь на странице есть третья строка текста, оформленная согласно свойствам, установленным в классах red-text и yellow-background-text – это красный текст на желтом фоне.

Импорт чужого CSS

Из предыдущего раздела понятно, как использовать чужой стиль в своем документе: просто укажите URL соответствующего файла в своих HTML-документах.

Вот и все. Но имейте в виду: если владелец сайта изменит свой стиль — у вас тоже поменяются все страницы! Может быть, проще скопировать его файл .css к себе на сервер.

Как подключить CSS — это лишь начало большой и интересной дороги по изучению веб-программирования. Курс «Профессия — веб-разработчик» познакомит вас с основными инструментами веб-разработчика: HTML, CSS, JavaScript и PHP. Годовая программа обучения идеально подходит людям, которые хотят с чистого листа освоить навыки профессионального веб-разработчика, а также начинающим программистам.

Селектор потомков

Возможно, вы заметили, что <em> в нашем первом абзаце больше нельзя отличить от остального текста абзаца, так как правило .synopsis задает отображение курсивом всего текста абзаца.

Чтобы изменить этот элемент <em>, можно было бы добавить к нему еще один класс. Но это приведет к тому, что код будет не очень удобен. Мы хотим иметь правило .synopsis в качестве отдельного независимого компонента, для которого можно полностью задать стили через CSS. То есть без необходимости внесения изменений в HTML только для того, чтобы изменить какие-то стили:

Это то, для чего предназначены CSS селекторы потомков. Они позволяют настраивать только те элементы, которые находятся внутри другого элемента. Например, можно вывести этот элемент <em> в абзаце .synopsis со следующими стилями:

.synopsis em {
  font-style: normal;
}

Добавление этого правила в файл styles.css задаст отображение <em> вертикальными (римскими) символами, тем самым определяя разницу с курсивным шрифтом, которым отображается весь абзац <p>. При этом остальных элементов <em>, размещенных на странице это изменение не коснется:

Селекторы потомков не ограничиваются селекторами классов. Таким образом, можно комбинировать любую другую группу селекторов. Например, если нужно выбрать только элементы <em> внутри заголовков:

h1 em {
  /* определенные стили */
}

Не переусердствуйте

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

/* Старайтесь избегать такого */
.article h2 .subheading em {
  /* Конкретные стили */
}

Эти стили нельзя будет повторно использовать, поскольку они соответствуют только следующей структуре HTML:

<div class='article'>
  <h2>
    <span class='.subheading'>Это <em>на самом деле</em> особенный текст.</span>
  </h2>
</div>

Если захотите применить эти стили к заголовку <h2>, который не был обернут в тег <div class = ‘article’>, придется здорово поломать голову. Та же ситуация, если вы захотите применить их к заголовку <h3>.

Один или несколько классов в CSS?

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

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

Например, этот параграф имеет три класса:

Это будет текст пункта

Это устанавливает следующие три класса в теге абзаца:

Pullquote
Рекомендуемые
Оставил

Обратите внимание на пробелы между каждым из этих значений класса. Эти пространства — это то, что устанавливает их как разные индивидуальные классы

Это также объясняет, почему имена классов не могут иметь пробелов в них, потому что это делает их отдельными классами. Например, если вы использовали «pullquote-featured-left» без пробела, это было бы одно значение класса, но пример выше, где эти три слова разделены пробелом, устанавливает их как отдельные значения

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

После того, как у вас есть значения класса в HTML, вы можете назначить их как классы в своем CSS и применить стили, которые вы хотите добавить. Например.

.pullquote {…}.featured {…}p.left {…}

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

Если вы установите класс для определенного элемента (например,p.left), вы все равно можете использовать его как часть списка классов; однако имейте в виду, что это затронет только те элементы, которые указаны в CSS. Другими словами, p.left стиль будет применяться только к параграфам этого класса, так как ваш селектор фактически говорит, чтобы применить его к «абзацам с классом« слева ». Напротив, другие два селектора в примере не указывают определенный элемент, поэтому они будут применяться к любому элементу, который использует эти значения класса.

Преимущества нескольких классов

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

Например, вы можете захотеть быстро перемещать элементы влево или вправо. Вы можете написать два класса

оставил а также

право с просто

плыть налево; а также

плавать: право; в них. Затем, всякий раз, когда у вас есть элемент, вам нужно плавать влево, вы просто добавите класс «left» в его список классов.

Тем не менее, здесь есть тонкая линия. Помните, что веб-стандарты диктуют разделение стиля и структуры. Структура обрабатывается через HTML, а стиль — в CSS. Если ваш HTML-документ заполнен элементами, у которых есть имена классов, такие как «красный» или «левый», которые являются именами, которые определяют, как должны выглядеть элементы, а не то, что они есть, вы пересекаете эту линию между структурой и стилем. По этой причине я стараюсь ограничить имена не семантических классов.

Используйте несколько классов CSS для одного элемента

Что я здесь делаю не так?

у меня есть , но на первом я хочу, чтобы сверху было нулевое отступление, а на втором — без нижней границы.

Я попытался создать классы для этого первого и последнего, но я думаю, что где-то ошибся:

И HTML

Я предполагаю, что невозможно иметь два разных класса? Если да, то как я могу это сделать?

3 Я создал простой пример, демонстрирующий разницу между селектором потомка и селектором двойного класса: jsfiddle.net/jyAyX. Также см. Developer.mozilla.org/en-US/docs/CSS/Getting_Started/Selectors.
Просто любопытно, если я сделаю: будут ли применяться оба правила или просто b или … Я делаю быструю и грязную альфа-версию и собирался вырезать и вставить операторы классов во множество элементов, у которых не было классов, но у некоторых есть. Просто пытаюсь понять, как с этим справиться. Посмотрел немного без радости.
Также связано (если даже не рассматривается как дубликат): селектор CSS, который применяется к элементам с двумя классами.

Если вам нужно два класса для одного элемента, сделайте это так:

Ссылайтесь на него в css так:

Пример:

https://jsfiddle.net/tybro0103/covbtpaq/

7 Спасибо, не знал, что могу вот так удвоить Полезно знать на будущее!
Что бы случилось, если бы у нас было ?
1 @MarcoCastanho Я обновил ответ ссылкой на пример
2 Я просто хотел добавить порядок, в котором вы ссылаетесь на элемент CSS, не имеет значения, поэтому вы также можете ссылаться на него в css следующим образом: .first.social {}, и он будет таким же, как .social.first {}
АААААА! Я все время хотел поставить запятую между ними, так что это мне помогло!

Вы можете попробовать это:

HTML

КОД CSS

Чтобы добавить несколько классов в один и тот же элемент, вы можете использовать следующий формат:

ДЕМО

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

Если у вас 2 класса, т.е. и , работает.

Вам не обязательно иметь в CSS.

Вы можете разделить классы в css и по-прежнему вызывать оба, просто используя в HTML. Вам просто нужен пробел между одним или несколькими именами классов.

Если у вас всего два предмета, вы можете сделать это:

Просто копия ответа @Oriol.
1 Нет, @ Шиме Видас был на минуту раньше

Если вы хотите применить стили только к элементу, который является первым дочерним элементом его родителей, лучше использовать псевдокласс

Тогда правило имеет как общие стили, так и стили последнего элемента.

И переопределяет их стилями первого элемента.

Вы также можете использовать селектор, но больше поддерживается старыми браузерами: см. https://developer.mozilla.org/en-US/docs/CSS/:first-child#Browser_compatibility и https://developer.mozilla.org/es/docs/CSS/: last-child # Совместимость с браузером.

Чтобы узнать, можете ли вы использовать: last-child и: first-child в других браузерах, проверьте: caniuse.com/#search=first-child

Я знаю, что этот пост устарел, но вот что они спросили. В вашей таблице стилей:

Но это может быть плохой способ использовать селекторы. Кроме того, если вам нужно несколько «первых» расширений, вы должны обязательно указать другое имя или уточнить свой селектор.

Надеюсь, это кому-то поможет, может быть очень удобно в какой-то ситуации.

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

Становится:

Другой вариант — использовать селекторы потомков.

HTML:

Ссылка на первую в CSS:

Ссылка на последний в CSS:

Jsfiddle: https://jsfiddle.net/covbtpaq/153/

Вместо использования нескольких классов CSS для решения основной проблемы вы можете использовать псевдоселектор:

Создание стилей CSS. Синтаксис каскадных таблиц стилей — правила, свойства, селекторы.

Далее рассмотрим синтаксис написания правил CSS. Обычный формат определения CSS правила выглядит так:

Т.е. правило стиля включает в себя селектор стиля и список свойств стиля с их значениями в фигурных скобках(«{» и «}»):

селектор используется для привязки к элементам web-страницы, на которые он должен распространять свое действие;
пары «Свойство: Значение» разделяются символом точкой с запитой(«;») и их может быть сколь угодно много;
между последней парой «Свойство: Значение» и закрывающей фигурной скобкой символ точка с запитой можно не ставить;
свойство стиля представляет из себя один из параметров элемента html страницы: цвет текста, гарнитура шрифта, величина отступов;
пробелы и переводы строк при написании правил css не критичны, браузер их игнорирует, поэтому можно оформлять код так как вам захочется;
так же код не чувствителен к регистру символов.

Чтобы было понятней рассмотрим несколько примеров.

Разберем данное CSS правило:

body — это селектор, который представляет из себя имя тега body;
background — свойство стиля, с помощью которого задаются параметры фона;
#0000FF — значение свойства стиля background, которой представляет из себя код цвета в формате RGB.

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

Рассмотрим еще пример:

Этот стиль говорит о том, что браузер выведет любой текст помещенный в теги h1 зеленым цветом и задаст ему размер шрифта 24 пикселя.

В качестве селектора тега, кроме имени тега, можно указывать класс:

.yellowtext {color:yellow}

Имя класса должно состоять из букв латинского алфавита, цифр и дефисов и начинаться должно с буквы. А в определении CSS правила перед именем класса должна стоять точка, означающая что определяется стилевой класс. Данный стиль будет применен ко всем тегам, у которых будет задан атрибут class и его значение будет равно имени стилевого класса без точки:

В примере мы привязали к тегу «Р» css правило с помощью имени класса yellowtext. В результате текст в данном абзаце будет отображен оранжевым цветом.

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

В этом примере к тегу «Р» мы привязали сразу два класса: yellowtext и cursivtext. В результате содержимое тега отобразится желтым цветом и курсивным шрифтом.

Кроме классов в качестве селектора правила css можно использовать идентификатор, который определяет уникальное имя элемента. Здесь все также как и в случае со стилевыми классами, только есть несколько отличий:

в селекторе правила CSS, также задается имя идентификатора, только вместо точки перед его именем ставят символ решетки «#»;
привязка к html элементу осуществляется через атрибут id, в качестве значения которого устанавливают имя стиля без знака решетки;
значение атрибута id должно быть уникальным в пределах страницы, то есть в html коде может только один элемент с заданным значение атрибута id, иначе код будет не валидным.

Рассмотрим пример для ясности:

К элементу p (абзац) с помощью атрибута id привязывается правило css, которое выравнивает текст по центру страницы. На странице больше не допускается создавать элементы с таким значением атрибута id, иначе html код будет не валидным.

Кроме рассмотренных способов описания стилей, css позволяет создавать комбинированные стили и задавать сразу несколько одинаковых стилей. Посмотрим пример:

h1.redtext, p strong {color: red}

В примере через запятую указано два селектора: «h1.redtext» и «p strong». Первый селектор говорит о том, что во всех элементах h1 у которых значение атрибута class буде эквивалентно redtext, текст будет отображаться красным цветом. Во втором селекторе произойдет тоже самое для всех элементов strong, которые вложены в тег p: