Создание хорошо оформленных веб-сайтов в современной сети требует глубокого понимания Каскадные таблицы стилей. Примените серию стилей CSS к вашему HTML-документу, чтобы улучшить внешний вид вашей веб-страницы.
Атрибуты класса и идентификатора
Иногда дизайнеры должны применять стиль только к некоторый элементов в документе, но не всех экземпляров этого элемента. Для достижения этих желаемых стилей используйте класс а также Я БЫ HTML-атрибуты. Эти атрибуты являются глобальными атрибутами, применимыми почти ко всем HTML-тег- поэтому независимо от того, стилизуете ли вы разделы, абзацы, ссылки, списки или любые другие элементы HTML в своем документе, вы можете обратиться к атрибутам class и ID, которые помогут вам выполнить эту задачу!
Селекторы классов
Селектор класса устанавливает несколько стилей для одного и того же элемента или тега в документе. Например, чтобы выделить определенные разделы текста другим цветом в качестве предупреждения, присвойте абзацам классы, подобные этому:
п {цвет: # 0000ff; }
p.alert {цвет: # ff0000; }
Эти стили установят цветвсе абзацы на синий (# 0000ff), но любой абзац с атрибутом класса тревога вместо этого будет выделен красным (# ff0000). Это связано с тем, что атрибут class имеет более высокую специфичность, чем первое правило CSS, которое использует только селектор тегов. При работе с CSS, более конкретное правило имеет приоритет перед менее конкретным. Итак, в этом примере более общее правило устанавливает цвет всех абзацев, но второе, более конкретное правило, чем переопределяет этот параметр, только в некоторых абзацах.
Вот как это можно использовать в некоторой разметке HTML:
Этот абзац будет отображаться синим цветом, который используется для страницы по умолчанию.
Этот абзац тоже будет синим.
И этот абзац будет отображаться красным, поскольку атрибут класса перезапишет стандартный синий цвет из стиля селектора элемента.
В этом примере стиль p.alert будет применяться только к элементам абзаца, которые используют это тревога класс. Чтобы использовать этот класс в нескольких элементах HTML, удалите элемент HTML из начала вызова стиля, например:
.alert {background-color: # ff0000;}
Этот класс теперь доступен любому элементу, который в нем нуждается. Любая часть вашего HTML-кода, имеющая значение атрибута класса, равное тревога теперь получит этот стиль. В приведенном ниже HTML-коде есть и абзац, и заголовок второго уровня, в которых используется тревога класс. Оба отображают красный цвет фона:
Этот абзац будет написан красным.
Сегодня на веб-сайтах атрибуты класса часто используются в большинстве элементов, потому что с ними легче работать с точки зрения специфичности, чем с идентификаторами. Вы обнаружите, что большинство современных HTML-страниц заполняются атрибутами класса, некоторые из которых часто повторяются в документе, а другие могут появляться только один раз.
Селекторы ID
ID селектор называет определенный стиль, не связывая его с тегом или другим HTML-элемент.
Предположим, что в разметке HTML есть раздел, содержащий информацию о событии. Вы могли бы дать этому разделению Атрибут ID из мероприятие, а затем обведите это разделение черной рамкой шириной в 1 пиксель:
#event {border: 1px solid # 000; }
Проблема с Селекторы ID в том, что они не могут быть повторены в документе HTML. Они должны быть уникальными (вы можете использовать один и тот же идентификатор на нескольких страницах вашего сайта, но только один раз в каждом отдельном HTML-документе). Итак, для трех событий, которым нужна эта граница, вы должны идентифицировать атрибуты идентификатора event1, event2, а также event3 и стилизовать каждого из них. Следовательно, было бы намного проще использовать вышеупомянутый атрибут класса для мероприятие и стилизовать их все сразу.
Осложнения атрибутов идентификатора
Еще одна проблема с атрибутами ID заключается в том, что они имеют более высокую специфичность, чем атрибуты класса. Отменить ранее установленный стиль может быть сложно, если вы слишком сильно полагались на идентификаторы. Многие веб-разработчики отошли от используя идентификаторы в своей разметке, даже если они намереваются использовать это значение только один раз, и вместо этого обратились к менее специфичным атрибутам класса почти для всех стили.
Одна из областей, в которой атрибуты идентификатора действительно вступают в игру, - это когда вы хотите создать страницу со встроенными якорными ссылками. Например, рассмотрим веб-сайт в стиле параллакса, который содержит весь контент на одной странице со ссылками, которые «переходят» на различные части этой страницы. Атрибуты идентификатора и текстовые ссылки используют эти якорные ссылки. Добавьте значение этого атрибута, которому предшествует # символ, к href атрибут ссылки, например:
Это ссылка
При нажатии или касании эта ссылка переходит на ту часть страницы, которая имеет этот атрибут ID. Если ни один элемент на странице не использует это значение идентификатора, ссылка ничего не сделает.
Для создания внутристраничных ссылок на сайте потребуется использование атрибутов ID, но вы все равно можете обратиться к классам для общих целей стилизации CSS. Именно так сегодня дизайнеры размечают страницы - они используют селекторы классов в максимально возможной степени и обращаются к идентификаторам только тогда, когда им нужно, чтобы атрибут действовал не только как перехватчик для CSS, но и как внутристраничная ссылка.