Используя class Атрибут
HTML class атрибут позволяет определить равные стили для элементов с одинаковым именем класса.
Здесь мы имеем три <div> элементов , который указывает на то же имя класса:
пример
<!DOCTYPE html>
<html>
<head>
<style>
div.cities {
background-color: black;
color: white;
margin: 20px 0 20px 0;
padding: 20px;
}
</style>
</head>
<body>
<div class="cities">
<h2>London</h2>
<p>London is the capital of England. It is the most
populous city in the United Kingdom, with a metropolitan area of over 13
million inhabitants.</p>
</div>
<div class="cities">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of
France.</p>
</div>
<div class="cities">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the
Greater Tokyo Area,
and the most populous metropolitan area in the
world.</p>
</div>
</body>
</html> Попробуй сам " Лондон
Лондон - столица Англии. Это самый густонаселенный город в Соединенном Королевстве, с пригородами более 13 миллионов жителей.
Стоя на реке Темзе, Лондон был крупное поселение на протяжении двух тысячелетий, его историю, уходящую своего основания римлянами, которые назвали его Londinium.
Париж
Париж является столицей и самым густонаселенным городом Франции.
Расположенный на берегу Сены, он находится в самом центре Иль-де-Франс, также известный как область парижанки.
В пределах своей столичной области является одним из самых крупных населенных центров в Европе, с более чем 12 миллионов жителей.
Токио
Токио является столицей Японии, в центре Большого Токио Площади, и самый густонаселенный мегаполис в мире.
Это место японского правительства и императорского дворца, и дом японской императорской семьи.
Токио префектура является частью самого густонаселенной столичной области в мире с 38 миллионов людей и крупнейшей городской экономикой в мире.
Используя class Атрибут инлайн элементов
Атрибут HTML класса также может быть использован для встроенных элементов:
пример
<!DOCTYPE html>
<html>
<head>
<style>
span.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>My <span
class="note">Important</span> Heading</h1>
<p>This
is some <span
class="note">important</span> text.</p>
</body>
</html> Попробуй сам " Проверьте себя с упражнениями!
Упражнение 1 » Упражнение 2» Упражнение 3 »