Пример работы с CSS

Рассмотрим несколько примеров по изменению CSS:

 

Пример 1. Изменение фона.

 

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

 

 

Выбираем с помощью firebug (кнопка F12) необходимый нам элемент:

 

 

Чтобы изменить фон этого элемента, скопируем нужный нам код и вставим его в редактор CSS, внеся необходимые изменения:

 

 

Красной рамкой обведен код, который мы вставляем сейчас.  После сохранения, цвет фона элемента изменился на выбранный нами:

 

 

Рассмотрим ещё один пример, как при помощи смены фона можно изменить внешний вид сайта:

 

 

 

• "Изменение внешнего вида сайта"

 

 

Пример 2. Изменение цвета кнопки.

 

Изменим цвет кнопки «Обратный звонок». Мы хотим сделать так, чтобы изменился ее цвет до нажатия с оранжевого на изумрудный:

 

 

Выбираем необходимый элемент:

 

 

Добавляем код, который изменяет цвет кнопки до нажатия :

 

И, нажав на кнопку «Сохранить», смотрим на результат:

 

 

 

 

Пример 3. Изменение шрифта.

 

Теперь изменим шрифт кнопки «Корзина товаров». Выбираем нужный нам элемент, ищем нужный участок кода:

 

 

 

 

Мы хотим сделать эту надпись синей, отображать ее увеличенной и с курсивом. Для этого вставляем следующий код:

 

И видим, как изменилась кнопка «Корзина товаров»:

 

 

 

 

 

Пример 4. Изменение стиля заголовков.

 

При редактировании заголовков не появляется поле визуального редактора, и изменить их цвет, размер и шрифт можно только с помощью CSS. Итак, выбираем заголовки и видим, что у класса "h2_content" нет определенного готового правила.

В этом случае, нам необходимо самостоятельно сначала придумать необходимое правило к этому классу. Изменим цвет заголовков на зеленый, сделаем шрифт больше и курсивом:

 

И, после сохранения изменений, посмотрим на изменившиеся заголовки:

 

 

 

 

Пример 5. Изменение стиля ссылок.

 

Ссылка может иметь несколько состояний. Например, есть посещенные и не посещенные ссылки, также можно задавать выделение ссылки курсором. Возьмем страницу с 3 ссылками, выделим ссылку курсором и в окне firebug в разделе Стиль нажмем на style.css?106(строка 165).

 

 

Как только мы кликнем на эту ссылку, нам раскроется файл 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. В качестве примера, скроем надпись в футере сайта:

 

Добавим в CSS редактор правило для класса footer_text, изменив значение параметра display:

 

Теперь выбранный текст из футера не будет виден пользователям:

 

 

 

 

Пример 9. Заменить логотип.

 

Изначально в шаблонах прописан определенный размер логотипа, и, чтобы залить картинку больше, необходимо сначала скрыть существующий логотип и загрузить новое изображение с помощью background.

Так логотип выглядел до изменений:

 

Теперь вносим необходимые изменения. Новое изображение Вы можете или загрузить на Ваш сайт, или загрузить на сторонний фото хостинг и указать ссылку оттуда.

 

После внесения данных правил логотип выглядит следующим образом: