Як визначити стилі за допомогою селектора тегів у Dreamweaver

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

Багато тегів HTML вже містять параметри форматування. Наприклад, теги заголовків включають форматування для стилізації тексту за допомогою великого жирного шрифту. Коли ви створюєте стиль за допомогою селектора тегів, ви повинні враховувати параметри форматування, які вже пов’язані з цим тегом. Будь-які визначені вами параметри будуть або додані до існуючого форматування, або замінять форматування.

Ви можете запитати: «Навіщо мені перевизначати

тег замість того, щоб просто створювати новий стиль заголовка за допомогою селектора класу чи ідентифікатора?» Хоча ви можете визначити новий стиль класу замість перевизначення тегу HTML, іноді краще використовувати наявний тег HTML.

Стилі заголовків особливо важливі в Інтернеті, оскільки текст, відформатований у форматі an

тег добре визнаний як найважливіший текст на сторінці. Серед іншого, текст, відформатований у форматі an

тег може отримати особливу увагу з боку пошукових систем.

Щоб створити стиль, який перевизначає тег HTML (наприклад,

тег) за допомогою селектора тегів, спочатку створіть файл або відкрийте наявний, а потім виконайте такі дії:

1На панелі «Селектори» панелі «Конструктор CSS» виберіть таблицю стилів, до якої потрібно додати новий стиль.

Коли ви створюєте стиль для існуючого тегу HTML, вам не потрібно застосовувати сам стиль так, як ви це робите зі стилями класу та ідентифікатора. Де б ви не використовували тег HTML, застосовуються налаштування визначення стилю.

2Якщо ви хочете націлити стиль на певний тип медіа чи розмір екрана, виберіть або визначте медіа-запит на панелі @Media.

Використання медіа-запитів зі стилями є необов’язковим. Якщо ви не вкажете медіа-запит, Dreamweaver використовуватиме властивість Global, і ваш стиль працюватиме в усіх медіаформатах і розмірах екрана.

3 Клацніть знак плюс (+) на панелі вибору.

На панель селектора додано новий селектор.

Коли ви натискаєте знак плюс (+), щоб створити новий селектор, може статися кілька речей, залежно від того, що вже є на сторінці, відкритій у Dreamweaver. Коли ви вперше створюєте стиль на порожній веб-сторінці, Dreamweaver вводить тіло на панелі «Вибірки».

Якщо ви працюєте над сторінкою з текстом або іншим вмістом, відформатованим за допомогою тегів або стилів HTML, Dreamweaver може додати складений селектор на основі елементів, що оточують те, що ви вибрали за допомогою курсора.

4 На панелі селектора двічі клацніть назву селектора. Почніть вводити назву тегу HTML, а потім виберіть тег зі спадного списку, що з’явиться.

Ви можете ввести назву будь-якого тегу HTML, щоб створити стиль за допомогою селектора тегів. Коли ви вводите тег HTML, з’являється спадний список із тегами, які починаються з тієї ж букви, яку ви ввели. Вибір потрібного тегу зі списку замість того, щоб самостійно вводити всю назву тегу, є гарною практикою, оскільки ви уникаєте помилок.

5 На панелі «Властивості» вкажіть потрібні параметри у правилі стилю.

Шрифт і колір відразу ж застосовуються до тексту на сторінці, відформатованої за допомогою

тег.

Якщо ви хочете мати можливість використовувати один і той же тег HTML з різним форматуванням у різних частинах однієї сторінки, ви можете створити складені стилі. Складені стилі зручні, наприклад, якщо ви хочете, щоб текст був відформатований за допомогою

щоб виглядати в основній частині вашої сторінки інакше, ніж на бічній панелі.