Як використовувати селектор ідентифікаторів у CSS

Квітня 25, 2024

В останніх підручниках ми обговорили два з трьох типів правил CSS. Перший тип - це селектор HTML, який заснований на та керує стилем відповідного тегу HTML. Другий тип - це селектор класів, який працює як загальний стиль, який можна застосувати до будь-якого елемента на веб-сторінці.

Тепер прийшов час обговорити третій тип правила CSS, який називається селектором ID. Як і у селекторі класів, селектор ідентифікаторів може бути застосований до будь-якого елемента веб-сторінки. Однак він призначений для використання лише один раз на сторінці. Це робить селектор ідентифікаторів дуже корисним для динамічних HTML та JavaScript. Теоретично, якщо ви використовуєте селектор ідентифікаторів більше разів на сторінці, наступні з них повинні ігноруватися веб-браузером. Однак це не завжди так. Покладатися на передбачуваність веб-браузерів дуже важко. Тому, вибираючи використовувати селектор ідентифікаторів, будьте обережні, щоб використовувати його лише один раз. Давайте подивимось на приклад.

Основний код

. . .

Приклад

. . .

Селектор ідентифікаторів

Усередині тегів ви помітите, що селектор ідентифікаторів починається з хеш-символу (#), а за ним слідує ім'я, яке ви присвоюєте селектору ідентифікаторів. Як і у селекторі класів, ви можете використовувати будь-яке ім’я, яке вам потрібно, але найкраще, якщо ім'я вказує, для чого буде використовуватися селектор ідентифікаторів. У прикладі ми використовуємо його для ідентифікації спеціального розділу тексту.

{властивість: значення;}

Також всередині тегів за вибором ідентифікатора йде одна або кілька пар властивостей, які розміщені між фігурними дужками. Ці пари властивостей і цінностей задають характеристики стилю. У прикладі абзац із селектором спеціального_тексту матиме текст червоного кольору.

. . .

Коли ви використовуєте селектор ідентифікаторів в тілі веб-сторінки, ви будете використовувати атрибут id у відкритому тезі HTML. Значення для атрибута id - це унікальне ім'я, яке надається селектору ідентифікаторів, в цьому випадку "special_text". (id = "значення") Ось так селектор "підключає" стиль до того HTML тегу, до якого ви хочете застосувати стиль. У наведеному вище прикладі селектор ідентифікаторів буде розміщений всередині лише одного

тег на веб-сторінці. Будь-які інші теги HTML на веб-сторінці не повинні містити селектор ідентифікаторів всередині вступного тегу.

Відео Інструкція: Урок 5. Селектори в CSS (Квітня 2024).

Як використовувати селектор ідентифікаторів у CSS, HTML, типах правил CSS, як використовувати селектор ідентифікаторів, селектор ідентифікаторів CSS

Попередня Стаття

Наступна Стаття

Схожі Статті

комп’ютери

Технологія в новинах

Квітня 2024

Ви твітте? Якщо ви регулярно відвідуєте Twitter, на цьому тижні, можливо, ви вже чули про величезні вигадки всесвітньо відомого модельєра Кеннета Коула. Світ спостерігав, як у Єгипті розгорнулися...

комп’ютери

Фільтр захисного екрану Hori PSP

Квітня 2024

PSP - Портативний Sony PlayStation - екран чіткий і великий. Це широкоекранне зображення є майже магнітом для відбитків пальців, пилу та подряпин. Цей фільтр від Хорі допомагає захистити цей екран...