Налаштування зовнішнього вигляду сайтів

Саме ці параметри можна використовувати для зміни зовнішнього вигляду блоків. Так, наприклад, щоб внести зміни в стиль відразу всіх блоків з класом adv потрібно написати в призначеному для користувача стилі такий код:

Зверніть увагу, що ім'я елемента div і ім'я класу adv розділені крапкою. У разі, якщо для блоку задано ім'я (id), замість точки ставиться решітка - в цьому випадку зміни стилю будуть ставитися до конкретного блоку, навіть якщо на сторінці є інші блоки з таким же стилем:

Що можна зробити з блоками?

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

Інша операція - це перефарбування фону блоку в інший колір. Якщо дизайнер підібрав колір фону, який ускладнює читання тексту, можна змінити колір фону через властивість background-color:

div.adv

Змінити колір тексту можна за допомогою атрибуту color:

Атрибут text-decoration дозволяє зробити текст підкресленим (underline) або, навпаки, неподчеркнутим (none):

div.adv

Атрибут font-weight дозволяє зробити текст напівжирним (якщо в якості значення вказано bold) або нежирним (в разі значення normal):

Інші елементи сторінки

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

• body - зовнішній вигляд всієї сторінки;
• a - зовнішній вигляд посилань;
• a: hover - зовнішній вигляд посилання при наведенні на неї курсора мишки;
• td - зовнішній вигляд елементів таблиці;
• h1. h6 - зовнішній вигляд заголовків 1-6 рівня.

Звичайно, елементів набагато більше, просто ці є найпоширенішими.

Якщо у елемента задані атрибути, то вибірку можна зробити по ним, вказавши атрибути і їх значення в дужках після назви тега:

У цьому прикладі посилання, які ведуть на сторінку контактів, будуть виділені жирним. Звичайно, не завжди значення атрибута потрібно приводити цілком, іноді досить привести тільки його початок або деяку частину:

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

Іноді потрібно перевіряти відразу кілька атрибутів. Так, ширина 88 пікселів може бути у різного роду зображень, але якщо у картинки ще й висота 31 піксель, то це швидше за все міні-банер у вигляді кнопки. Наступний код дозволяє приховати всі кнопки на сторінці (якщо у них явно задані розміри):

У деяких випадках потрібно застосовувати оформлення до тегу, який вкладений в інший тег. Наприклад, якщо в документі непотрібні блоки завжди укладені в тег

. який, в свою чергу, вкладений в тег