ШаблоныТарифыПартнерамНовостиБлогПомощьПосмотреть сайты

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

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

 

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

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

каталог 1

 

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

firebug 1

 

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

код элемента

 

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

замена цвета

 

 

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

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

кнопка

 

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

элемент 2

 

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

код кнопки 1

 

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

Результат

 

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

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

шрифт

 

 

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

код шрифта

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

кнопка 2

 

 

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

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

заголовки

 

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

заголовки 2

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

заголовки 3

 

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

 

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

ссылки 1

 

Как только мы кликнем на эту ссылку, раскроется файл style.css на 165 строке, и мы сможем увидеть, как описаны правила ссылок.

ссылки 2

Псевдокласс link отвечает за непосещенные ссылки, visited — за посещенные. Псевдокласс hover срабатывает при наведении курсора. Изменим цвет непосещенных ссылок на зеленый, цвет посещенных — на красный, а при наведении цвет сделаем фиолетовым и уберем подчеркивание ссылки (за это отвечает правило text-decoration:none):

ссылки 3

Теперь ссылки внешне выглядят совершенно по-другому:

ссылки 4

 

Пример 6. Сдвиг и размер блоков.

 

За расстояние между элементами отвечает правило margin, за расстояние между контентом элемента и его границей — padding. Изменить ширину блока можно с помощью правила width. Выберем элемент, который мы будем изменять:

блоки страницы

Теперь запишем следующие изменения: увеличим padding до 100 пикселей и установим отступ margin сверху и слева по 50 пикселей:

блоки 2

Внешний вид элемента станет таким:

блоки 3

Теперь изменим ширину элемента. Выделяем нужный элемент:

ширина

 

и добавляем измененное правило для класса .right_block — уменьшим его ширину width на 200 пикселей:

ширина 2

 

Теперь блок стал заметно уже:

блок 4

 

 

Пример 7. Рамки блоков.

 

Вы можете изменять границу блоков с помощью правила border — например, задавать закругление с помощью border-radius. Также в данном примере рассмотрим, как добавлять тень к элементу с помощью box-shadow. 

рамки 1

Поставим больше закругление у элемента — увеличим значение border-radius до 50 пикселей, саму границу сделаем жирнее (5 пикселей) и сделаем ее зеленой, также добавим черную тень снизу и справа с помощью box-shadow:

рамки 2

Окончательно элемент будет выглядеть так:

рамка 3

 

Пример 8. Скрыть элемент.

Вы можете скрыть любой элемент с помощью правила display: none. В качестве примера скроем надпись в футере сайта:

скрытие элемента

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

скрытие

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

текст не виден

 

 

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

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

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

изначальный шаблон

 

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

новый лого

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

новый логотип