Размеры блочных элементов в css
Содержание:
- Конвенция имен классов
- Настройка
- Атрибуты¶
- Как добавить стиль к тегу <div> ?
- Псевдоклассы для структуры
- Использование атрибута class
- Стили кнопок
- Порядок имеет значение
- Адаптивный фон, фиксированный контент
- Изменение классов
- Изменение атрибутов
- Селектор потомков
- Window
- Используем свойство Display: Contents
- Используем переменные CSS для вариаций контейнеров
- Когда используется class, а когда id?
- Фрагменты URL-адресов
- Дивы контейнеров
- Краткий обзор элемента
Конвенция имен классов
Значение атрибута класса HTML может представлять собой почти все, что угодно, если оно соответствует селектору в коде CSS. Стандартная конвенция имен классов — это использование прописных букв и дефисов вместо пробелов, как в именах файлов и папок.
Добавление атрибута class не изменяет смысловое значение HTML-документа и служит для подключения CSS. Рекомендуется избегать имен классов, основанных на том, как они отображаются. Использование чего-то более семантического, например, .synopsis, дает больше свободы в действиях. Что позволяет настроить отображение этого абзаца.
Настройка
Для примера нам нужен только один HTML-файл и таблица стилей CSS. Создайте папку css-selectors и веб-страницу под названием selectors.html со следующей разметкой:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'/>
<title>Селекторы CSS</title>
<link rel='stylesheet' href='styles.css'/>
</head>
<body>
<h1> Селекторы CSS</h1>
<p>Селекторы CSS позволяют <em>выбрать</em> отдельный HTML-элемент в документе HTML.
Это <strong>супер</strong> полезно.</p>
<p>Классы чрезвычайно важны, так как они позволяют выбрать
произвольные блоки на странице.</p>
<p>Мы так же рассмотрим в этом примере ссылки, поэтому вот ссылка
<a href='https://internetingishard.com'>Interneting Is Hard</a>, для которой нам нужно задать стили.</p>
<div>Кнопка Один</div>
</body>
</html>
Теперь создадим в той же папке файл styles.css. Это все, что понадобится для изучения CSS селекторов.
Атрибуты¶
| Атрибут | Значение | Описание |
|---|---|---|
| align | leftrightcenterjustify | Используется для выравнивания содержимого тега <div>.Не поддерживается в HTML5. Вместо атрибута align вы можете использовать CSS свойство text-align. |
Тег <div> поддерживает глобальные атрибуты и атрибуты событий.
Как добавить стиль к тегу <div> ?
Цвет текста внутри тега <div>:
- CSS свойство color определяет цвет контента и оформления текста.
- CSS свойство background-color устанавливает фоновый цвет элемента.
Стили форматирования текста для тега <div>:
- CSS свойство text-indent указывает размер отступа первой строки в текстовом блоке.
- CSS свойство text-overflow указывает, как будет отображаться пользователю строчный текст, выходящий за границы блока.
- CSS свойство white-space указывает, как будут отображены пробелы внутри элемента.
- CSS свойство word-break указывает перенос строки.
Другие свойства для тега <div>:
- CSS свойство text-shadow добавляет тень к тексту.
- CSS свойство text-align-last выравнивает последнюю строку текста.
- CSS свойство line-height устанавливает межстрочный интервал.
- CSS свойство letter-spacing устанавливает расстояние между буквами/символами в тексте.
- CSS свойство word-spacing устанавливает расстояние между словами в тексте.
Псевдоклассы для структуры
Состояния ссылок – это лишь один аспект псевдоклассов. Существует также множество других псевдоклассов, которые предоставляют дополнительную информацию о контексте элемента. Например, псевдокласс last-of-type выбирает последний элемент определенного типа в родительском элементе. Это является альтернативой селекторам классов.
Например, мы могли бы использовать :last-of-type, чтобы добавить в наш пример определенное пространство после последнего абзаца страницы:
p:last-of-type {
margin-bottom: 50px;
}
Это позволяет не затрагивать первые два элемента <p> на странице, не добавляя для последнего абзаца новый атрибут класса:
Можно даже использовать псевдокласс :first-of-type вместо класса .synopsis. Заменив существующее правило .synopsis следующим фрагментом кода, мы получим тот же результат:
p:first-of-type {
color: #7E8184;
font-style: italic;
}
Использование этого метода вместо устаревших классов имеет свои преимущества и недостатки. Например, это работает только в том случае, если наш синопсис является элементом <p>. Если бы мы захотели создать синтаксис с несколькими параграфами, объединив много элементов <p> в <div class=’synopsis’>, нам пришлось бы переписать наш CSS-код. С другой стороны, псевдоклассы позволяют задавать стили для определенных элементов, не изменяя HTML. Это дает нам четкое разделение контента от представления.
Использование атрибута class
Атрибут часто используется для указания на название класса в таблице стилей. Он также может использоваться JavaScript для доступа и управления элементами с указанным именем класса.
В следующем примере мы имеем три элемента с атрибутом со значением «city». Все три элемента будут одинаково стилизованные в соответствии с определением стиля в разделе head:
Пример
<!DOCTYPE html><html><head><style>
.city { background-color: tomato; color: white;
border: 2px solid black; 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>
В следующем примере мы имеем два элемента с атрибутом со значением «note». Оба элемента будут одинаково стилизованы в соответствие определению в разделе head:
Пример
<!DOCTYPE html><html><head><style>.note {
font-size: 120%; color: red;}
</style></head><body><h1>Мой <span class=»note»>важный</span> заголовок</h1><p>Это какой-то <span class=»note»>важный</span> текст.</p></body></html>
Совет: Атрибут может быть использован на любом HTML элементе.
Примечание: Название класса чуствительно к регистру!
Совет: Вы можете узнать намного больше про CSS в CSS Учебнике на нашем сайте W3Schools.
Стили кнопок
Начнем с :link и :visited. Мы используем аналогичный подход, что и в предыдущем разделе о CSS селекторах родителя. Но поскольку это кнопки, то мы сохраним одинаковые цвета для состояний посещенная и не посещенная. Измените существующие правила .button следующим образом:
.button:link, /* Измените это */
.button:visited { /* Измените это */
display: block; /* Добавьте это */
text-decoration: none; /* Добавьте это */
color: #FFF; /* Все остальное остается без изменений */
background-color: #5995DA;
font-weight: bold;
padding: 20px;
text-align: center;
border: 2px solid #5D6063;
border-radius: 5px;
width: 200px;
margin: 20px auto;
}
Обратите внимание на новые псевдоклассы :link и :visited в селекторе. Без них стиль браузера по умолчанию для a:link не изменился бы
Теперь оформим состояние при наведении курсора.
.button:hover,
.button:visited:hover {
color: #FFF;
background-color: #76AEED; /* Light blue */
}
Обе наши кнопки при наведении курсора будут окрашиваться в более светлый голубой цвет. Сделаем так, чтобы кнопки становились темнее, когда пользователь нажимает на них с помощью псевдокласса :active:
.button:active,
.button:visited:active {
color: #FFF;
background-color: #5995DA; /* Blue */
}
Стили, которые мы только что определили, готовы к повторному использованию. Назначьте класс .button любому HTML-элементу, и вы превратите его в интерактивную кнопку.
Порядок имеет значение
Хочу обратить ваше внимание на две важные вещи, касающиеся нашей второй кнопки:
- Это добавление нового объявления по сравнению с исходным правилом .button — font-style;
- Переопределение существующего в классе .button стиля — background-color.
Переопределение дочерних селекторов в CSS происходит из-за порядка размещения правил .call-to-action и .button в таблице стилей. Когда в файле CSS есть два противоречащих друг другу свойства, всегда применяется то, которое указано последним. Если бы вы разместили .call-to-action перед .button, применялось бы это правило, и кнопка осталась бы синей.
Это означает, что порядок атрибутов класса в HTML-элементе не влияет на поведение переопределения. Несколько классов в одном элементе применяются «одинаково», а приоритет определяется исключительно порядком размещения правил в файле styles.css.
Другими словами, следующие элементы эквивалентны:
<!-- В результате элементы будут отображаться на странице одинаково --> <div class='button call-to-action'>Кнопка Два</div> <div class='call-to-action button'>Кнопка Два</div>
Адаптивный фон, фиксированный контент
В своей книге о секретах CSS Лия Веру предложила интересную технику, которая может быть использована для секций с адаптивным фоном (фон, занимающий всю ширину окна просмотра), внутри которых есть контейнер. Давайте рассмотрим распространенный способ, позволяющий сделать это:
HTML
<section> <div class="wrapper"></div> </section>
CSS
section {
background-color: #ccc;
}
.wrapper {
max-width: 1170px;
margin-left: auto;
margin-right: auto;
padding-left: 16px;
padding-right: 16px;
}
Принцип работы margin-left: auto и margin-right: auto заключается в вычислении половины ширины окна просмотра и вычитании из неё ширины контента. То же самое можно сделать, используя padding.
CSS
section {
padding: 1rem calc(50% - 585px);
}
Мы ещё не закончили. На мобильных устройствах контент будет соприкасаться с границами экрана. Решить это можно следующим способом:
CSS
section {
padding: 1rem;
}
@media (min-width: 1170px) {
section {
padding: 1rem calc(50% - 585px);
}
}
В качестве альтернативного решения можно использовать новую функцию CSS max(). Мы просто устанавливаем минимальный padding размером в 1rem, а вычисление 50% — 585px будет использовано в качестве другого значения.
CSS
section {
padding: 1rem max(1rem, (50% - 585px));
}
Изменение классов
Атрибут class соответствует селекторам класса CSS. Не путайте с классами ES6, особым типом функции JavaScript.
Классы CSS используются для применения стилей для нескольких элементов, в отличие от идентификаторов, которые могут существовать только один раз на странице. В JavaScript есть свойства и для работы с атрибутом класса.
| Метод/Свойство | Описание | Пример |
|---|---|---|
| Получает или устанавливает значение класса | ||
| Добавляет одно или несколько значений класса | ||
| Включает или отключает класс | ||
| Проверяет, существует ли значение класса | ||
| Заменяет существующее значение класса на новое значение класса | ||
| Удаляет значение класса |
Мы создадим другой файл HTML для работы с методами класса, с двумя элементами и несколькими классами.
classes.html
При открытии файла в браузере вы должны получить примерно следующий результат:
Свойство было введено для предотвращения конфликтов с ключевым словом в JavaScript и другими языками, которые имеют доступ к DOM. Вы можете использовать для присвоения значения напрямую в классе.
Мы присвоили класс , определенный в значениях CSS в , для первого . Вывод должен выглядеть следующим образом:
Обратите внимание, что если любые классы уже существуют в элементе, это действие будет перезаписывать их. Вы можете добавить несколько классов с разделителями-пробелами с помощью свойства или используйте его без операторов присвоения для получения значения класса в элементе
Другой способ изменения классов — это свойство , которое имеет несколько полезных методов. Эти методы аналогичны методами , и в jQuery.
После использования описанных выше методов ваша веб-страница будет выглядеть следующим образом:
В отличие от примера , использование будет добавлять новый класс в список существующих классов. Также вы можете добавить несколько в виде разделенной запятыми строки. Также вы можете использовать для изменения класса элемента.
Изменение атрибутов
Атрибуты — это значения, которые содержат дополнительную информацию об элементах HTML. Обычно они идут в паре название/значение и могут быть обязательными в зависимости от элемента.
Среди самых распространенных атрибутов HTML необходимо отметить атрибут тега , для тега , , и . Полный список атрибутов HTML см. в списке атрибутов в Mozilla Developer Network. Пользовательские элементы, которые не являются частью стандарта HTML, будут сопровождаться префиксом .
В JavaScript есть четыре метода для изменения атрибутов элементов:
| Метод | Описание | Пример |
|---|---|---|
| Возвращает или | ||
| Возвращает значение определенного атрибута или | ||
| Добавляет или обновляет заданный атрибут | ||
| Удаляет атрибут элемента |
Давайте создадим новый файл HTML с тегом с одним атрибутом. Мы привяжем открытое изображение через URL, но вы можете использовать другое локальное изображение, если вы работаете оффлайн.
attributes.html
При загрузке указанного выше файла HTML в современном веб-браузере и открытии консоли разработчика, вы должны получить примерно следующий вывод:
Теперь мы можем протестировать все методы атрибутов на ходу.
К этому моменту вы удалите атрибут и значение, связанное с тегом , но вы можете сбросить этот атрибут и присвоить значение другому изображению с помощью :
Наконец, мы можем изменить атрибут напрямую, присвоив новое значение атрибуту в качестве свойства элемента, установив обратно для файла .
Любой атрибут можно изменить таким образом, а также с помощью описанных выше методов.
Методы и обычно используются с условными операторами, а методы и используются для прямого изменения DOM.
Селектор потомков
Возможно, вы заметили, что <em> в нашем первом абзаце больше нельзя отличить от остального текста абзаца, так как правило .synopsis задает отображение курсивом всего текста абзаца.
Чтобы изменить этот элемент <em>, можно было бы добавить к нему еще один класс. Но это приведет к тому, что код будет не очень удобен. Мы хотим иметь правило .synopsis в качестве отдельного независимого компонента, для которого можно полностью задать стили через CSS. То есть без необходимости внесения изменений в HTML только для того, чтобы изменить какие-то стили:
Это то, для чего предназначены CSS селекторы потомков. Они позволяют настраивать только те элементы, которые находятся внутри другого элемента. Например, можно вывести этот элемент <em> в абзаце .synopsis со следующими стилями:
.synopsis em {
font-style: normal;
}
Добавление этого правила в файл styles.css задаст отображение <em> вертикальными (римскими) символами, тем самым определяя разницу с курсивным шрифтом, которым отображается весь абзац <p>. При этом остальных элементов <em>, размещенных на странице это изменение не коснется:
Селекторы потомков не ограничиваются селекторами классов. Таким образом, можно комбинировать любую другую группу селекторов. Например, если нужно выбрать только элементы <em> внутри заголовков:
h1 em {
/* определенные стили */
}
Window
Window Location
hash
host
hostname
href
origin
pathname
port
protocol
search
assign()
reload()
replace()
Window Navigator
appCodeName
appName
appVersion
cookieEnabled
geolocation
language
onLine
platform
product
userAgent
javaEnabled()
taintEnabled()
Window Screen
availHeight
availWidth
colorDepth
height
pixelDepth
width
Window Methods
closed
console
defaultStatus
document
frameElement
frames
history
innerHeight
innerWidth
length
localStorage
location
name
navigator
opener
outerHeight
outerWidth
pageXOffset
pageYOffset
parent
screen
screenLeft
screenTop
screenX
screenY
sessionStorage
self
status
top
alert()
atob()
blur()
btoa()
clearInterval()
clearTimeout()
close()
confirm()
focus()
getComputedStyle()
matchMedia()
moveBy()
moveTo()
open()
print()
prompt()
resizeBy()
resizeTo()
scrollBy()
scrollTo()
setInterval()
setTimeout()
stop()
Используем свойство Display: Contents
Для начала я вас познакомлю с этим значением. Каждый элемент в CSS является блочным; и этот блок содержит контент, границы, внутренние и внешние отступы. Если вы примените display: contents, этот блок будет исключен из потока. Я могу представить это как удаление открывающего и закрывающего тэгов вокруг него.
CSS
<header class="site-header">
<div class="wrapper site-header__wrapper">
<!-- Header content -->
</div>
</header>
CSS
.site-header__wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
Возможно, в примере, приведенном выше, вам понадобится растянуть header на всю ширину страницы, вместо того, чтобы вписывать его в контейнер.
CSS
.site-header__wrapper {
display: contents;
}
.site-header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
Таким способом элемент wrapper будет скрыт (в каком-то смысле). Теперь, когда мы применили display: flex к элементу site-header, объекты, принадлежавшие контейнеру, станут дочерними для элемента site-header.
Используем переменные CSS для вариаций контейнеров
Редко случается так, что вам нужен контейнер только одного размера. Ширина контейнера может быть большой или маленькой, в зависимости от содержимого и варианта использования. Применяя переменные CSS, мы можем по-новому взглянуть на wrapper и сделать его максимально пластичным
Обратите внимание на следующее:
HTML
<div class="wrapper"></div>
CSS
.wrapper {
max-width: var(--wrapper-width, 1170px);
margin-left: auto;
margin-right: auto;
padding-left: 16px;
padding-right: 16px;
}
Возможно, вы заметили, что у функции var есть два значения: первое – —wrapper-width, и второе – 1170px. Вторая переменная является резервной, то есть используется, если значение переменной —wrapper-width не установлено.
Что это значит? Это значит, что вы можете создать вариацию контейнера, установив свойство —wrapper-width, как показано ниже.
HTML
<div class="wrapper" style="--wrapper-width: 720px"></div>
Таким образом, я создал вариацию контейнера:
- Без добавления новых классов;
- Не копируя и не вставляя стили;
- Более надежную и легко редактируемую с помощью DevTools.
Если вам не нравится использовать встроенные стили для изменения переменной CSS, вы можете вместо этого добавить новый класс. Смотрите пример, приведенный ниже:
HTML
<div class="wrapper wrapper--small"></div>
CSS
.wrapper--small {
--wrapper-width: 720px;
/* это изменит ширину контейнера, установленную по умолчанию */
}
Когда используется class, а когда id?
ID используется для отдельных элементов, которые встречаются на странице только один раз. Например, заголовок, подвал, меню и т. д. Селектор class используется для одного или нескольких элементов, которые встречаются на странице несколько раз. Например, абзацы, ссылки, кнопки, элементы ввода. И хотя вы можете использовать class для отдельного элемента, но лучше использовать эти селекторы по назначению.
Также следует учитывать, что у HTML-элемента может быть указан и id, и class. Предположим, что на странице имеется два блока с одинаковым размером и стилизацией, но с разным позиционированием. В таком случае можно применить один и тот же класс к этим блокам для изменения размеров и стилизации, а затем использовать отдельный ID-селектор к каждому блоку, чтобы задать им разное позиционирование.
Элементы также можно привязывать одновременно к нескольким классам. Это очень удобно, когда нужно применить стилизацию к отдельной группе элементов определенного типа. Например, имеется класс .content, который применен ко всем абзацам. Если нужно будет добавить границу или любую другую стилизацию к нескольким отдельным абзацам, то можно сделать это при помощи дополнительного CSS p class .bordered:
<p class="content">Этот пункт не имеет границ.</p> <p class="content bordered">Этот пункт имеет границы.</p>
Обратите внимание на пустое пространство между двумя именами классов в атрибуте class второго абзаца. Ниже приведен пример CSS-кода:
.content { margin: 10px; font-size: 15px; color: blue }
.bordered { border: 2px solid #222 }
Важно правильно применять id и CSS class, так как их неправильное использование может привести к ошибкам в отображении HTML-кода. Пожалуйста, оставьте свои мнения по текущей теме статьи
Мы крайне благодарны вам за ваши комментарии, дизлайки, лайки, подписки, отклики!
Пожалуйста, оставьте свои мнения по текущей теме статьи. Мы крайне благодарны вам за ваши комментарии, дизлайки, лайки, подписки, отклики!
Валентин Сейидовавтор-переводчик статьи «CSS Class vs ID: Which One to Use»
Фрагменты 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-адрес, то сломаете свой сайт.
Дивы контейнеров
Помните, что <div> не изменяет семантическую структуру страницы. Это делает его отличным инструментом для определения представляемой структуры веб-страницы. Обертывая HTML-элементы в теги <div>, можно создать сайт с помощью более крупных фрагментов, не влияя на то, как поисковые системы просматривают наш контент:
Попробуем создать макет фиксированной ширины с использованием метода автополей. Сначала оберните весь документ в <div> и присвойте ему уникальный класс:
<body>
<div class='page'> <!-- Добавьте это -->
<h1> Селекторы CSS</h1>
<p class='synopsis'>Селекторы CSS позволяют <em>выбрать</em> отдельный HTML-элемент в документе HTML.
Это <strong>супер</strong> полезно.</p>
<p>Классы чрезвычайно важны,, так как они позволяют выбрать
произвольные блоки на странице.</p>
<p>Мы так же рассмотрим в этом примере ссылки, поэтому вот ссылка
<a href='https://internetingishard.com'>Interneting Is Hard</a>, для которой нам нужно задать стили.</p>
<div>Кнопка Один</div>
</div> <!-- Добавьте это -->
</body>
Затем добавьте следующий код в файл styles.css:
.page {
width: 600px;
margin: 0 auto;
}
Независимо от того, как будет изменяться размер окна браузера, веб-страница всегда будет иметь ширину 600 пикселей и выравниваться горизонтально по центру доступного пространства
Обратите внимание, что то же самое мы раньше делали для кнопки, но теперь мы делаем это с несколькими элементами одновременно, вложив их в общий контейнер:
Именно таким образом определяются более сложные макеты веб-страниц. Например, если на нашей странице была бы боковая панель, мы бы вложили все ее элементы в другой <div> с классом .sidebar.
Без CSS селекторов атрибутов классов, которые позволяют дифференцировать элементы <div>, ничего из этого не было бы возможно.
Краткий обзор элемента
Давайте посмотрим на практике, как работает элемент <div>. Сотрите все, что есть в файле styles.css (если вы добавляли в него код из предыдущих мануалов серии). Затем добавьте следующее CSS правило для селектора тега <div>:
Сохраните файл styles.css. Затем откройте файл index.html, сотрите все, что там есть (кроме первой строки кода: <link rel=”stylesheet” href=”css/styles.css”>), и добавьте следующий фрагмент:
Обратите внимание, элемент состоит из открывающего и закрывающего тега, но не требует какого-либо контента. Сохраните файл index.html и перезагрузите его в браузере
Если вы не знаете, как просматривать оффлайн-файл HTML, пожалуйста, обратитесь к нашему мануалу по работе с HTML-элементами (раздел «Просмотр оффлайн HTML-файла в браузере»)
Сохраните файл index.html и перезагрузите его в браузере. Если вы не знаете, как просматривать оффлайн-файл HTML, пожалуйста, обратитесь к нашему мануалу по работе с HTML-элементами (раздел «Просмотр оффлайн HTML-файла в браузере»).
На вашей веб-странице должно появиться зеленое поле шириной 100 пикселей и высотой 100 пикселей, согласно CSS-правилу:
Теперь, когда у вас есть правило стиля для элемента <div>, каждый элемент <div> на вашей странице будет оформлен точно так же. Но чаще всего на элементы <div> должны быть стилизованы по-разному. По этой причине для стилизации элементов <div> разработчики часто используют классы.
Чтобы попрактиковаться в создании классов для <div>, удалите из файла styles.css только что созданное CSS-правило и добавьте следующие три новых набора правил:
В этом фрагменте содержатся правила стиля для трех разных классов: div-1, div-2 и div-3
Обратите внимание, имена селекторов классов начинаются с точки
Сохраните файл styles.css и перейдите в файл index.html. Сотрите только что созданный элемент <div> и добавьте три новых элемента, применив к каждому из них класс, который соответствует селекторам CSS из файла styles.css:
Обратите внимание, класс добавляется в качестве атрибута к тегу : для этого нужно указать атрибут class и имя класса в открывающем теге . Сохраните файл и перезагрузите его в своем браузере
Вы должны получить такой результат:
На вашей веб-странице будет три элемента
, каждый из которых отличается по цвету и размеру в соответствии с присвоенным ему правилом стиляОбратите внимание, каждый элемент указывается с новой строки, поскольку элементы являются блочными элементами и это их поведение по умолчанию
