Разница между идентификатором и классом в CSS

Оглавление:

Anonim

В главное отличие между идентификатором и классом в CSS заключается в том, что id используется для применения стиля к одному уникальному элементу, в то время как класс используется для применения стиля к нескольким элементам.

В веб-разработке используются различные технологии. Основными языками разработки веб-сайтов являются HTML, CSS и JavaScript. HTML означает язык гипертекстовой разметки. Это помогает разработать структуру веб-страницы. JavaScript помогает сделать веб-страницу более динамичной. CSS означает каскадные таблицы стилей. Это помогает добавлять стили и делать веб-страницы более презентабельными. Правила CSS применяются к элементам HTML. Кроме того, селекторы CSS помогают найти элементы и применить нужный стиль к тегам HTML. id и class - это два типа селекторов.

Класс, правила CSS, идентификатор

Что такое правила CSS

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

селектор {свойство: значение; }

Селектор - Помогает идентифицировать элемент для применения стиля

Имущество - Атрибут. Все атрибуты HTML преобразуются в свойства CSS. Некоторые примеры: цвет, выравнивание текста, граница и т. Д.

Ценить - Стоимость - это то, что присвоено собственности. Например, цвету свойства можно присвоить синий цвет.

Что такое id

Программист может определить правило стиля на основе идентификатора элементов. Все элементы с одинаковым идентификатором будут применены с определенным стилем. Чтобы выбрать элемент с определенным идентификатором, должен быть символ # (решетка), за которым следует идентификатор элемента.

Предположим, что HTML-файл содержит следующую инструкцию.

Файл CSS содержит следующий фрагмент кода.

# header1 {

цвет синий;

}

Когда браузер интерпретирует инструкцию HTML, он проверяет идентификатор элемента h1, который является header1 в файле CSS. Затем он применяет определенное правило CSS к элементу h1. Таким образом, текст Hello World будет отображаться синим цветом.

Идентификатор уникален на странице. Следовательно, селектор id используется для одного уникального элемента.

Что такое класс

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

Предположим, что HTML-файл содержит следующие инструкции.

Файл CSS содержит следующий фрагмент кода.

.header1 {

цвет синий;

}

Когда браузер интерпретирует инструкцию HTML, он проверяет класс элемента h1, который является header1 в файле CSS. Затем он применяет определенное правило CSS ко всем элементам h1. Поэтому текст Hello World 1 и Hello World 2 будет отображаться синим цветом.

Можно использовать один и тот же класс для нескольких элементов. Следовательно, селектор класса используется для нескольких элементов.

Разница между идентификатором и классом в CSS

Определение

id - это селектор в CSS, который стилизует элемент с указанным идентификатором, тогда как class - это селектор в CSS, который стилизует выбранные элементы с указанным классом.

Синтаксис

Синтаксис идентификатора: #id {объявления css; }. Синтаксис класса:.class {объявления css; }

использование

Кроме того, идентификатор используется для применения стиля к одному конкретному элементу. Использование класса заключается в применении стиля к нескольким элементам.

Заключение

Идентификатор и класс - это два селектора в CSS, которые позволяют применять стили к элементам HTML. Основное различие между идентификатором и классом в CSS заключается в том, что идентификатор используется для применения стиля к одному уникальному элементу, в то время как класс используется для применения стиля к нескольким элементам.

Ссылка:

1. «Синтаксис и селекторы CSS». Интернет-учебники W3Schools, доступные здесь.

Изображение предоставлено:

1. «CSS.3» Никотаф - собственная работа (CC BY-SA 4.0) через Commons Wikimedia

Разница между идентификатором и классом в CSS