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

Способ отображения контейнера

Так как контейнер – это <div>, он по умолчанию является блочным элементом. Вопрос в том, что делать, если мы хотим, чтобы он отображался в виде сетки, и всё его содержимое располагалось на сетке?

Что ж, я бы не рекомендовал так делать, потому что это противоречит концепции разделения обязанностей. «Обёртка» оборачивает другие элементы, и на этом всё. Если вам нужен контейнер с сеткой, добавьте в существующий контейнер элемент <div> со свойством display: grid. Это более простой, понятный и доступный способ.

HTML

<div class="wrapper">
  <!-- Содержимое -->
</div>

Так делать не рекомендуется, потому что использование элемента wrapper на другой странице может случайно повредить вашу вёрстку.

CSS

.wrapper {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-gap: 16px;
}

Лучшим решением будет следующее:

HTML

<div class="wrapper">
  <div class="featured-news">
    <!-- Элементы, которые должны находиться в сетке -->
  </div>
</div>

CSS

.featured-news {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-gap: 16px;
}

Заметьте, что я добавил отдельный элемент <div>, чтобы он содержал контент. Пожалуйста, не обращайте внимания на классы и соглашения по именованию в этом примере. Мы можем найти гораздо лучшее решение, создав названия классов, которые могут быть использованы повторно на разных страницах сайта. Однако соглашения по именованию выходят за рамки этой статьи.

Псевдоклассы для структуры

Состояния ссылок – это лишь один аспект псевдоклассов. Существует также множество других псевдоклассов, которые предоставляют дополнительную информацию о контексте элемента. Например, псевдокласс 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. Это дает нам четкое разделение контента от представления.

Предостережения

Но псевдоклассы немного сложнее. Контекстные селекторы CSS first-of-type и last-of-type действуют только внутри своего родительского элемента. Другими словами, p:first-of-type выбирает первый элемент <p> в каждом элементе контейнера.

У нас есть один общий <div>, который обертывает контент (.page), поэтому для нас это не проблема. Но что произойдет, если мы добавим следующий код в нижнюю часть элемента .page:

<div class='sidebar'>
  <p>If this page had a sidebar...</p>
  <p>We’d have some problems with pseudo-classes.</p>
</div>

Это иллюстрирует сложность применения псевдоклассов для структуры. Первый элемент <p> здесь также будет соответствовать p:first-of-type, потому что область применения псевдокласса ограничена родительским элементом.

Если вы не хотите затрагивать абзацы в боковой панели, и выбрать только первый <p> в контейнере <div class=’page’>, то нужно ограничить область его применения с помощью селектора дочерних элементов. Например:

.page > p:first-of-type {
  color: #7E8184;
  font-style: italic;
}

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

Стили кнопок

Начнем с :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-элементу, и вы превратите его в интерактивную кнопку.

Изменение атрибутов

Атрибуты – это значения, содержащие дополнительную информацию об элементах HTML. Обычно они входят в пары имя-значение и в зависимости от элемента могут быть неотъемлемыми.

Некоторые из наиболее распространенных атрибутов HTML – это атрибут src тега img, href тега а, class, id и style. Найти полный список атрибутов HTML можно в Mozilla Developer Network. Пользовательские элементы, которые не являются частью стандарта HTML, получат префикс data-.

В JavaScript есть четыре метода изменения атрибутов элемента:

Метод	Описание	Пример
hasAttribute()	Возвращает логическое значение true или false.	element.hasAttribute(‘href’);
getAttribute()	Возвращает значение указанного атрибута или null.	element.getAttribute(‘href’);
setAttribute()	Добавляет или обновляет значение указанного атрибута.	element.setAttribute(‘href’, ‘index.html’);
removeAttribute()	Удаляет атрибут из элемента.	element.removeAttribute(‘href’);

Создайте новый HTML-файл с тегом img с одним атрибутом. Вы можете использовать любое локальное изображение, если работаете оффлайн.

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

Теперь проверьте работу методов атрибутов на ходу.

На этом этапе вы удаляете атрибут src и значение, связанное с img, но вы можете сбросить этот атрибут и присвоить значение другого изображения с помощью img.setAttribute ():

Теперь можно изменить атрибут напрямую, присвоив новое значение атрибуту как свойство элемента и установив в src прежнее значение, my-image.png

Методы hasAttribute() и getAttribute() обычно используются с условными операторами, а методы setAttribute() и removeAttribute() используются для непосредственного изменения DOM.

Другая кнопка

Займемся второй кнопкой. Предполагается, что она имеет желтый фон, но мы изменили это кодом из предыдущего раздела. Наш селектор .button:link более «специфичен», чем текущее правило .call-to-action, поэтому он имеет приоритет.

Исправим такое положение вещей, применив к нашему правилу .call-to-action несколько псевдоклассов. Замените существующее правило следующим (убедитесь, что это определено после новых стилей .button из предыдущего раздела о дочерних селекторах в CSS):

.call-to-action:link,
.call-to-action:visited {
  font-style: italic;
  background-color: #EEB75A;     /* Желтый */
}
.call-to-action:hover,
.call-to-action:visited:hover {
  background-color: #F5CF8E;     /* Светло-желтый */
}
.call-to-action:active,
.call-to-action:visited:active {
  background-color: #EEB75A;     /* Желтый */
}

Мы назначили класс .call-to-action только для второй кнопки, поэтому только она станет желтой. Конечно, нам по-прежнему нужно, чтобы класс .button был назначен для обоих элементов <a>, поскольку он определяет общие стили, такие как отступы, радиус границы и размер шрифта.

Специфичность CSS

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

Но не все селекторы CSS равнозначны. «Специфичность CSS» — это значимость, установленная для различных категорий селекторов. Это означает, что некоторые селекторы всегда будут переопределять другие независимо от того, какую позицию они занимают в таблице стилей.

Если вы добавите следующий код после существующих правил .call-to-action, он переопределит заданный ранее цвет фона. Если вы разместите его в верхней части файла, он сам будет переопределен, и наша кнопка не станет красной. Это ожидаемое поведение:

.call-to-action:link,
.call-to-action:visited {
  background-color: #D55C5F;    /* Красный */
}

Теперь посмотрите, что происходит, когда мы пытаемся сделать то же самое с помощью селектора идентификатора. Во-первых, обязательно удалите предыдущий фрагмент кода, а затем попробуйте добавить приведенный ниже код до существующих правил .call-to-action:

#button-2 {
  background-color: #D55C5F;    /* Красный */
}

CSS селекторы идентификаторов имеют более высокую специфичность, чем селекторы классов, поэтому вторая кнопка будет красной, даже если мы зададим фоновый цвет с помощью .call-to-action:link ниже. Концепция «порядок имеет значение» работает только тогда, когда все правила имеют одинаковую специфичность:

Специфичность селекторов, которые мы рассматривали в этой статье, показана ниже: от максимальной до минимальной:

•	#button-2
•	.button:link и .synopsis em (они равнозначны)
•	.button
•	a:link
•	a

Иногда это приводит к путанице. Это настолько серьезная проблема, что была разработана целая методология под названием «BEM». Суть BEM заключается в попытке обеспечить то, чтобы правила CSS были многоразовыми, сделав все селекторами классов. Это исключает возможность возникновения проблем.

Принципы блочной вёрстки

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

Второе правило — принцип разделения кода, согласно которому содержимое от оформления нужно отделять. Говоря проще и ближе к нашему случаю: HTML — отдельно, CSS — отдельно (желательно в разные файлы). Такой подход делает структуру понятней. Программисту не нужно открывать CSS, дизайнеру — HTML. Все смотрят свой код и не мешают друг другу. Идеально.

Третий принцип — таблицы нужно использовать не везде, а по необходимости, при этом полностью отказываться от них так же странно, как и применять не к месту.

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

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

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

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

Зачем использовать div в HTML?

Чаще всего вы будете использовать элемент div для группировки разделов кода, на которые вы хотите настроить таргетинг с помощью CSS. Вы можете стилизовать их так, чтобы они выглядели иначе, чем другие разделы на странице, или расположить их иначе. Вы также можете использовать атрибут div и language, чтобы изменить язык определенного раздела на странице.

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

Вот HTML:

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

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

Давайте посмотрим на пример, когда вы использовали бы div для изменения внешнего вида раздела своей веб-страницы. Предположим, вы хотите стилизовать определенный заголовок и абзац на странице, а остальные оставить без стиля. Затем вы должны заключить отдельный заголовок и абзац в элемент div и дать ему имя класса. Для этой демонстрации мы будем использовать «myDiv» в качестве имени класса.

Затем в разделе заголовка вашего HTML-документа или во внешней таблице стилей вы можете использовать селектор классов .myDiv и определить любые свойства CSS, которые вы хотите. В этой демонстрации мы будем использовать свойства границы, цвета фона, выравнивания текста и цвета.

Вот CSS:

Вот HTML:

Вот результат на передней панели:

Теперь давайте посмотрим на пример, когда вы использовали бы div для изменения позиционирования или макета раздела вашей веб-страницы. Вы можете найти этот и многие другие примеры в посте «Вот разница между Flexbox, CSS Grid и Bootstrap».

Скажем, я хочу создать сетку flexbox с шестью столбцами. Я бы начал с создания шести элементов

Суть блочной вёрстки

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

Каждая часть страницы помещается в свой блок <div>: верх сайта — в первый, меню — во второй, контент — в третий и т. д. Каждый блок наполняется содержимым средствами HTML, а также позиционируется и оформляется с помощью CSS-разметки.

Конечный HTML-документ представляет собой набор блоков <div> с контентом внутри. Оформление зачастую находится в отдельном CSS-файле, подключенном к странице тегом <link>, или как минимум в контейнере <style> секции <head>.

Как работает float

При применении этого свойства происходит следующее:

1. Элемент позиционируется как обычно, а затем вынимается из документа потока и сдвигается влево (для left ) или вправо (для right ) до того как коснётся либо границы родителя, либо другого элемента с float .
2. Если пространства по горизонтали не хватает для того, чтобы вместить элемент, то он сдвигается вниз до тех пор, пока не начнёт помещаться.
3. Другие непозиционированные блочные элементы без float ведут себя так, как будто элемента с float нет, так как он убран из потока.
4. Строки (inline-элементы), напротив, «знают» о float и обтекают элемент по сторонам.

Элемент при наличии float получает display:block .

То есть, указав элементу, у которого display:inline свойство float: left/right , мы автоматически сделаем его блочным. В частности, для него будут работать width/height .

Исключением являются некоторые редкие display наподобие inline-table и run-in (см. Relationships between „display“, „position“, and „float“)

Ширина float -блока определяется по содержимому. («CSS 2.1, 10.3.5»).

Вертикальные отступы margin элементов с float не сливаются с отступами соседей, в отличие от обычных блочных элементов.

Это пока только теория. Далее мы рассмотрим происходящее на примере.

Текст с картинками

Одно из первых применений float , для которого это свойство когда-то было придумано – это вёрстка текста с картинками, отжатыми влево или вправо.

Например, вот страница о Винни-Пухе с картинками, которым поставлено свойство float :

Её HTML-код выглядит примерно так:

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

Посмотрим, например, как выглядело бы начало текста без float:

1. Элемент IMG вынимается из документа потока. Иначе говоря, последующие блоки начинают вести себя так, как будто его нет, и заполняют освободившееся место (изображение для наглядности полупрозрачно):

1. Элемент IMG сдвигается максимально вправо(при float:right ):

1. Строки, в отличие от блочных элементов, «чувствуют» float и уступают ему место, обтекая картинку слева:

При float:left – всё то же самое, только IMG смещается влево (или не смещается, если он и так у левого края), а строки – обтекают справа

Строки и инлайн-элементы смещаются, чтобы уступить место float . Обычные блоки – ведут себя так, как будто элемента нет.

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

Как видно из рисунка, параграфы проходят «за» float . При этом строки в них о float’ах знают и обтекают их, поэтому соответствующая часть параграфа пуста.

Блок с float

Свойство float можно поставить любому элементу, не обязательно картинке. При этом элемент станет блочным.

Посмотрим, как это работает, на конкретной задаче – сделать рамку с названием вокруг картинки с Винни.

Изменение стилей классов

Что, если мы захотим немного изменить вторую кнопку? К счастью, можно применить несколько классов к одному и тому же HTML-элементу. Стили из каждого класса будут применены к элементу, что даст возможность повторно использовать стили .button и одновременно переопределить некоторые из них новым классом:

Мы добавляем еще один класс к нашей второй кнопке с помощью следующей разметки

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

<div class='button call-to-action'>Кнопка Два</div>

Этому элементу теперь присвоено два разных класса, и можно использовать любой из них для определения стилей. Это дает некоторые дополнительные возможности. Можно задать для второй кнопки стили класса .button и стили, относящиеся только к этой кнопке класса .call-to-action (обязательно добавьте этот код после правила .button):

.call-to-action {
  font-style: italic;
  background-color: #EEB75A;    /* Желтый */
}

Центрируем DIV по нижней границе страницы

Здесь для расположения div по центру по вертикали используется margin: auto и абсолютное позиционирование для внешнего элемента. Метод будет работать во всех современных браузерах.

CSS

.outer-div
{
     position: absolute;
     bottom: 30px;
     width: 100%;
}
.inner-div
{
     margin: 0 auto;
     width: 100px;
     height: 100px;
     background-color: #ccc;
}

HTML

<div class="outer-div"><div class="inner-div"></div></div>

У внутреннего div должна быть установлена ширина. Пространство внизу страницы регулируется с помощью свойства bottom внешнего div. Вы также можете центрировать div по верхней границе страницы, заменив свойство bottom на свойство top.

Используем переменные 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;
  /* это изменит ширину контейнера, установленную по умолчанию */
}

Селекторы классов

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

• Указанный атрибут класса в элементе HTML;
• Соответствующий селектор классов CSS.

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

<p class='synopsis'> Селекторы CSS позволяют <em>выбрать</em> отдельный HTML-элемент в документе HTML. Это <strong>супер</strong> полезно.</p>

Теперь стилизуем абзац <p class=’synopsis’> в файле CSS с помощью следующего кода:

.synopsis {
  color: #7E8184;        /* Светло серый */
  font-style: italic;
}

Это правило применяется только к элементам с соответствующим атрибутом класса

Обратите внимание на точку (.) — префикс перед именем класса. Это отличает соседние селекторы CSS классов от селекторов типов:

Основные стили ссылок

В отличие от CSS селекторов псевдоклассы начинаются с двоеточия, за которым следует имя класса. Наиболее распространенными псевдоклассами ссылок являются:

• :link — ссылка, по которой пользователь еще не переходил;
• :visited — ссылка, по которой пользователь переходил раньше;
• :hover — ссылка, на которую пользователь навел курсор мыши;
• :active — ссылка, нажатая мышью (или пальцем).

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

a:link {
  color: blue;
  text-decoration: none;
}
a:visited {
  color: purple;
}
a:hover {
  color: aqua;
  text-decoration: underline;
}
a:active {
  color: red;
}

Атрибуты¶

Атрибут	Значение	Описание
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 устанавливает расстояние между словами в тексте.

Изменение классов

Атрибут class соответствует селекторам по классу CSS. Не путайте это с классами ES6, особым типом функции JavaScript.

Классы CSS используются для применения стилей к нескольким элементам, в отличие от ID, которые могут встречаться на странице только один раз. В JavaScript для работы с атрибутом класса есть свойства className и classList.

Метод/свойство	Описание	Пример
className	Возвращает или задает значение класса	element.className;
classList.add()	Добавляет одно или несколько значений класса	element.classList.add(‘active’);
classList.toggle()	Включает или отключает класс	element.classList.toggle(‘active’);
classList.contains()	Проверяет, существует ли значение класса	element.classList.contains(‘active’);
classList.replace()	Заменяет существующее значение класса новым значением	element.classList.replace(‘old’, ‘new’);
classList.remove()	Удаляет значение класса	element.classList.remove(‘active’);

Создайте другой файл HTML для работы с методами класса; в нем будет два элемента и несколько классов.

Откройте файл classes.html в веб-браузере и просмотрите страницу.

Свойство className было введено для предотвращения конфликтов с ключевым словом class, которое встречается в JavaScript и других языках, имеющих доступ к DOM. Вы можете использовать className для присваивания значения непосредственно классу.

Вы присвоили класс warning , определенный в значениях CSS classes.html, первому div.Проверьте страницу в браузере.

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

Другой способ изменения классов – это свойство classList, которое содержит несколько полезных методов. Эти методы аналогичны методам jQuery addClass, removeClass и toggleClass.

После применения этих методов веб-страница должна измениться. Проверьте ее в веб-браузере.

В отличие от className, classList.add() добавит новый класс в список существующих классов. Вы также можете добавить несколько классов в виде разделенных запятыми строк. Также для изменения класса элемента можно использовать setAttribute.