Приклад 1. Зміна фону.
У цьому прикладі ми розглянемо, як можна змінити фон в каталозі. Спочатку каталог виглядає так:
Вибираємо за допомогою Firebug (кнопка F12) необхідний нам елемент:
Червоної рамкою обведений код, який ми вставляємо зараз. Після збереження колір фону елемента змінився на обраний нами:
Приклад 2. Зміна кольору кнопки.
Вибираємо необхідний елемент:
Додаємо код, який змінює колір кнопки до натискання:
І, натиснувши на кнопку «Зберегти». дивимося на результат:
Приклад 3. Зміна шрифту.
Тепер змінимо шрифт кнопки «Кошик товарів». Вибираємо потрібний нам елемент, шукаємо потрібну ділянку коду:
Ми хочемо зробити цей напис синьою, відображати її збільшеною і з курсивом. Для цього вставляємо наступний код:
І бачимо, як змінилася кнопка «Кошик товарів».
Приклад 4. Зміна стилю заголовків.
У цьому випадку нам необхідно самостійно спочатку придумати необхідне правило до цього класу. Змінимо колір заголовків на зелений, зробимо шрифт більше і курсивом:
І після збереження змін подивимося на умови, що змінилися заголовки:
Приклад 5. Зміна стилю посилань.
Як тільки ми кликнемо на це посилання, розкриється файл style.css на 165 рядку, і ми зможемо побачити, як описані правила посилань.
Псевдоклас link відповідає за невідвідані посилання, visited - за відвідані. Псевдоклас hover спрацьовує при наведенні курсору. Змінимо колір невідвіданих посилань на зелений, колір відвіданих - на червоний, а при наведенні колір зробимо фіолетовим і приберемо підкреслення посилання (за це відповідає правило text-decoration: none):
Тепер посилання зовні виглядають зовсім по-іншому:
Приклад 6. Зрушення і розмір блоків.
За відстань між елементами відповідає правило margin. за відстань між контентом елемента і його кордоном - padding. Змінити ширину блоку можна за допомогою правила width. Виберемо елемент, який ми будемо змінювати:
Тепер запишемо наступні зміни: збільшимо padding до 100 пікселів і встановимо відступ margin зверху і зліва по 50 пікселів:
Зовнішній вигляд елемента стане таким:
Тепер змінимо ширину елемента. Виділяємо потрібний елемент:
і додаємо змінене правило для класу .right_block - зменшимо його ширину width на 200 пікселів:
Тепер блок став помітно вже:
Приклад 7. Рамки блоків.
Ви можете змінювати кордон блоків за допомогою правила border - наприклад, ставити закруглення за допомогою border-radius. Також в даному прикладі розглянемо, як додавати тінь до елементу за допомогою box-shadow.
Поставимо більше закруглення у елемента - збільшимо значення border-radius до 50 пікселів, саму кордон зробимо жирніше (5 пікселів) і зробимо її зеленою, також додамо чорну тінь знизу і праворуч за допомогою box-shadow:
Остаточно елемент буде виглядати так:
Приклад 8. Приховати елемент.
Ви можете приховати будь-який елемент за допомогою правила display: none. Як приклад приховуємо напис в футере сайту:
Тепер обраний текст з футера НЕ буде видно користувачам:
Приклад 9. Замінити логотип.
Спочатку в шаблонах прописаний певний розмір логотипу, і, щоб залити картинку більше, необхідно спочатку приховати існуючий логотип і завантажити нове зображення за допомогою background.
Так логотип виглядав до змін:
Тепер вносимо необхідні зміни. Нове зображення завантажте або на ваш сайт, або на сторонній фотохостинг і вкажіть посилання звідти.
Після внесення даних правил логотип виглядає наступним чином: