Как поменять css

Как изменить стиль через CSS?

@mJeevas, Ну не совсем. ID — очень полезное свойство, но из-за особенности применения, его нельзя часто использовать, поэтому чаще классы юзают. Но ID куда быстрее находится, уникален и просто няш-мяш 🙂

3 апр 2015 в 17:36
А как правильней для стиля использовать class или id к примеру с таким кодом: .div3:hover < border-radius:6px 6px 0px 0px; padding:4px 6px 4px 7px; border-left: 1px #E0E0E0 solid; border-top: 1px #E0E0E0 solid; border-right: 1px #E0E0E0 solid; background-color: #096; color:#C33; transition: 0.1s; font-family: Verdana, Geneva, sans-serif; >
3 апр 2015 в 17:45

1 ответ 1

Сортировка: Сброс на вариант по умолчанию
Отслеживать
ответ дан 3 апр 2015 в 16:37
user31688 user31688
Работает! Спасибо!
3 апр 2015 в 16:48
А если бы еще был стиль a3? Можно сразу несколько привязать?
3 апр 2015 в 17:08

@Юрий9090, скажем так: :hover ставишь около элемента, который должен реагировать на наведение, а последним элементом должен быть тот, кто меняется. Например: my .super:hover .puper .element<> — ищет тэг my , в нём ищет все классы .super , внутри них класс .puper и ещё внутри .element . Стили применится только при наведении на любой .super к любому .element .

3 апр 2015 в 17:15

я вот так делал: my #ps:hover #wwww #www < background-color:#096; color: #FFF; >Не хочет работать. Но как было так: #ps:hover #www < background-color:#096; color: #FFF; >#ps:hover #wwww < background-color:#096; color: #FFF; >То работало норм)

3 апр 2015 в 17:31

@Юрий9090, Старик, запомни — id может быть только ОДИН в DOOM. Поэтому эта конструкция бессмысленна, ибо можно так: #ps:hover #www .

Как изменить CSS-стили при помощи JavaScript

Подпишись на наш канал с тестами по HTML/CSS/JS в Telegram!

Как изменить CSS-стили? Ответ очевиден — отредактировать CSS-файл. Возможно, после этого понадобится компиляция. Затем нужно обновить стили во время выполнения, изменив атрибуты элемента, такие как class и aria-* .

Хотя этот ответ неполный, подумайте над следующими вопросами:

• Как обновить стили во время выполнения, основываясь на взаимодействии с пользователем, а не на предустановленных значениях? Сгенерировать уникальные имена классов для каждой возможной комбинации цветов нереально.
• Что, если у вас нет доступа к таблицам стилей или HTML? Например, если сайт сгенерирован конструктором сайтов со сторонними CSS-файлами, изобилующими свойствами !important.

В этой статье мы рассмотрим четыре способа обновить CSS-стили при помощи JavaScript. Также мы кратко разберем, в каких случаях эти способы стоит применять. Наконец, мы оценим их с точки зрения CSS-сложности, т. е. того, насколько просто понять и изменить код в каждом случае.

Используйте встроенные стили

До изобретения CSS для стилизации веб-страниц использовались теперь уже устаревшие HTML-атрибуты, такие как color , background и border . Встроенный CSS — духовный преемник этих атрибутов. При таком подходе свойства CSS задаются через атрибут style элемента.

Два следующих способа изменить размер шрифта для элемента hero равнозначны:

document.getElementById('hero').style = 'font-size: 12rem;'; document.getElementById('hero').style.fontSize = '12rem';

Использование JavaScript для обновления встроенного CSS в целом считается плохой практикой. Причин для этого несколько:

1. Нарушается разделение между стилями и контентом, из-за чего становится сложнее читать и изменять документ.
2. При таком подходе CSS-селекторы не могут формировать семантические абстракции.
3. Без селекторов обновление нескольких элементов на странице потребует прохода по всем элементам, а это отнимает время. К тому же, таким образом можно допустить ошибки.
4. Повторяющиеся стили раздувают ваш HTML.
5. У вас не будет доступа к псевдоэлементам и псевдоклассам, они доступны только через CSS-селекторы.

В настоящее время мы наблюдаем возрождение встроенного CSS-lite через атомарные CSS-фреймворки, такие как Tailwind CSS. Атомарные фреймворки используют имена классов CSS, которые переводятся в одно CSS-свойство и основываются на генерации компонентов для повторного использования стилей при помощи JS. Это позволяет избавиться от проблем 3, 4 и 5 из приведенного выше списка. Но проблему раздувания HTML это все равно не решает.

Хотя встроенные CSS-стили в целом вредны, их применение имеет одно преимущество. Чтобы внести изменение, вам не нужно иметь доступ к таблицам стилей. Поэтому с их помощью вполне можно вносить некоторые правки по ходу работы.

Когда стоит применять встроенный CSS

• Для обновления стилей отдельного элемента во время выполнения.
• Для быстрой проверки чего-либо.
• Когда таблицы стилей недоступны.

Используйте HTML-атрибуты

Можно изменять и другие атрибуты элементов, не только style . Это самый популярный способ, он позволяет создавать переиспользуемые и семантически значимые стили. Вот несколько примеров:

// toggles HTML semantic state document.getElementById('cta').disabled = true; // a aria based semantic button state document.getElementById('cta').ariaExpanded = "true"; // a class based semantic primary variation document.getElementById('cta').classList.toggle('primary');

Тут особо нечего добавить. Вероятно, вы и так пользуетесь этим методом. Такой код и понять просто, и изменить легко. К тому же, в нашем распоряжении множество CSS-методологий для контроля над его сложностью.

Но я хочу отметить, что примеры в приведенном выше коде расположены в порядке их значимости. Прежде чем прибегнуть к состояниям на основе классов, стоит обратиться к состояниям на основе атрибутов HTML. Теперь, когда селектор :has() уже на горизонте, это стало проще.

Когда стоит модифицировать атрибуты помимо style

Всегда, когда у вас есть доступ к таблицам стилей и предопределенные стили.

Используйте CSSOM

Следующий метод изменения CSS посредством JavaScript можно сравнить со скальпелем в наборе инструментов фронтендера. Мы можем напрямую изменять объекты CSS.

Два предыдущих метода для изменения стилей модифицируют HTML DOM. Но в некоторых случаях проще изменить напрямую CSS Object Model (CSSOM).

Обратившись к объекту styleSheets документа, мы можем избирательно менять стили сайта, используя всю мощь CSS. Например:

const thirdPartyStylesheet = document.styleSheets[0]; //index 15 rule color: red !important; thirdPartyStylesheet.deleteRule(15);

Можно даже добавить новые динамически генерируемые стили при помощи конструктора CSSStyleSheet. По своему опыту могу сказать, что это наилучший вариант, когда вы имеете дело со сторонними таблицами стилей или конструктором сайтов, т. е., когда ваши возможности работы с CSS ограничены.

Когда вы засоряете свои встроенные стили многочисленными !important для перезаписи сторонних стилей, происходит жуткое разрастание CSS-селекторов. Изменение CSSOM позволяет этого избежать. Этот подход также может быть эффективнее перебора в цикле нескольких элементов для динамического обновления их стилей.

Основной недостаток CSSOM-подхода — такой код труден для понимания и отладки. Для измененного CSSOM нет поддержки в инструментах разработчика. И, если только вы не задокументировали свои шаги крупным шрифтом, ваш код может довести будущего мейнтейнера до ручки. Так же, как и скальпель, этот метод нужно использовать редко и осторожно.

Когда стоит модифицировать CSSOM

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

Используйте пользовательские свойства CSS

Последний способ динамического обновления CSS-стилей предполагает применение пользовательских свойств CSS. Хотя технически тут не используются никакие новые APIs, применение пользовательских свойств существенно отличается от предыдущих подходов.

Пользовательские свойства можно использовать с любым из предыдущих методов:

const themeColor = document.getElementById('color-picker').value; // use with inline style document.body.style=`--theme-color: $;`; // use in CSSOM const stylesheet = document.styleSheets[0]; stylesheet.insertRule(`:root < --theme-color: $; >`);

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

Самые значительные минусы применения пользовательских свойств — необходимость доступа к таблицам стилей и необходимость планирования своих действий. При благоразумном использовании с их помощью можно изменить несколько стилей за одно обновление. Пример — генерация целой цветовой палитры путем обновления одного цвета.

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

Поддержка кода с пользовательскими свойствами проще, чем кода с измененной CSSOM: тут нужно отслеживать меньше изменений. Но при этом вам нужен доступ к таблицам стилей.

Когда стоит применять пользовательские свойства

• Вам нужно внести комплексные изменения стилей во время выполнения программы.
• Вы хотите создать новые отношения между стилевыми свойствами.
• Вам нужно пробить Shadow DOM, чтобы стилизовать множество веб-компонентов.

Итоги

Когда вам в очередной раз понадобится изменить CSS-стили при помощи JavaScript, спросите себя:

• Это предопределенное изменение или значение стиля определяется динамически во время работы программы?
• Я перекрываю существующие сторонние стили?
• Мне нужно изменить один элемент или несколько, включая псевдоэлементы и классы?
• Хочу ли я, чтобы это изменение повлияло на несколько производных свойств или затронуло несколько элементов на странице?

Исходя из ответов на эти вопросы, можно подобрать наиболее подходящий способ внесения изменений в CSS-стили.

Примеры изменения CSS

Заметка

Перед прочтением данной статьи рекомендуем ознакомиться с инструкцией «Работа с CSS», так как для понимания данной статьи необходимо знать, как использовать встроенный редактор в браузере.

В данной статье мы рассмотрим следующие примеры работы со стилями на сайте.

• Изменение цвета кнопки «Купить»
• Изменение цвета ссылки «Нашли дешевле?»
• Изменение цвета маркеров Хит, Новинка, Распродажа и Скидка
• Изменение цвета ссылки «Отправить сообщение»
• Изменение цвета ссылки «Обратный звонок»
• Изменение цвета бокового меню
• Изменение цвета главного меню
• Изменение цвета всплывающего меню
• Изменение иконки корзины
• Изменение шрифта в описание товара
• Скрыть ссылку и блок регистрации.

Так как рассматривать мы будем изменение цвета того или иного элемента, то в процессе работы вам будут необходимы названия цветов и их соответствующие коды в html. Такую таблицу соответствий вы можете найти по адресу: https://www.w3schools.com/colors/colors_picker.asp

Изменение цвета кнопки «Купить»

Через встроенный редактор в браузере (вызываем редактор через F12) смотрим, какой класс отвечает за стили кнопки (рис. 1).

Рисунок 1.

В результате мы выяснили, что кнопке «Купить» соответствует класс .details-payment-block .btn

Например, пропишем кнопке синий фон. Html-код синего цвета — #0000FF. Если необходим другой цвет, то его html-код вы можете найти по адресу.

Код для изменения стилей будет выглядеть следующим образом:

.details-payment-block .btn background-color: #0000FF;
>

Размещаем код в панели администрирования пункт меню «Мои сайты» — «Редактировать» — «Параметры», вкладка«CSS» и в окне редактора сохраняем настройки (рис. 2).

Редактор файла стилей», в окне редактора и сохраняем настройки» />
Рисунок 2.

Результат применения стилей на рисунке 3.

Рисунок 3.

Изменение цвета ссылки «Нашли дешевле?»

Изменим цвет текста и цвет фона кнопки «Нашли дешевле?».

Через встроенный редактор в браузере (вызываем редактор через F12) смотрим, какой класс отвечает за стили кнопки (рис. 4).

Чтобы прописать новые стили кнопке «Нашли дешевле?», необходимо обратиться по тегу ссылки, у которого есть атрибут data-find-cheaper, то есть следующим образом:

Также пропишем кнопке синий фон — #0000FF. Если необходим другой цвет, то его html-код вы можете найти по адресу.

Код для изменения стилей будет выглядеть следующим образом:

a[data-find-cheaper] background-color: #0000FF;
>

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

a[data-find-cheaper] background-color: #0000FF;/*фон ссылки*/
padding: 5px;/*отступы*/
border-radius:5px;/*скругление края*/
color:#FFFFFF;/*цвет текста*/
>

Размещаем код в панели администрирования пункт меню «Каналы продаж» — «Интернет-магазин» — «Параметры магазина», вкладка «Еще»- «CSS» и в окне редактора сохраняем настройки (рис. 5).

Рисунок 7.

В результате мы выяснили, что маркеру «Хит» соответствует класс .products-view-label-best

Например, пропишем маркеру желтый фон: Html-код жёлтого цвета — #FFFF00. Если необходим другой цвет, то его html-код Вы можете найти по адресу.

Код для изменения стилей будет выглядеть следующим образом:

.products-view-label-best background-color: #FFFF00;
>

Размещаем код в панели администрирования пункт меню «Мои сайты» — «Редактировать» — «Параметры», вкладка«CSS» и в окне редактора сохраняем настройки (рис. 8).

Редактор файла стилей», в окне редактора и сохраняем настройки» />
Рисунок 8.

Цвет маркера изменится не только в плитке каталога, но и внутри карточки товара (рис. 9).

Рисунок 9.

Аналогично — для маркера Новинка:

.products-view-label-new background-color: #b3be08;
>

для маркера Скидка:

.products-view-label-discount background-color: #cd0303;
>

для маркера Рекомендуем:

.products-view-label-recommend background-color: #58a9fd;
>

для маркера Распродажа:

.products-view-label-sales background-color: #58a9fd;
>

Изменение цвета ссылки «Отправить сообщение»

Через встроенный редактор в браузере (вызываем редактор через F12) смотрим, какой класс отвечает за стили ссылки (рис. 10).

Рисунок 10.

В результате мы выяснили, для того чтобы переопределить стили ссылки «Отправить сообщение» в Редакторе файла стилей, к ней необходимо обратиться следующим образом:

a[href=»feedback»] background-color: #0000FF;/*фон ссылки*/
padding: 5px;/*отступы*/
border-radius:5px;/*скругление края*/
color:#FFFFFF;/*цвет текста*/
>

Если необходимы другие цвета, то html-код вы можете найти по адресу.

Размещаем код в панели администрирования пункт меню «Мои сайты» — «Редактировать» — «Параметры», вкладка«CSS» и в окне редактора сохраняем настройки (рис. 11).

Редактор файла стилей», в окне редактора и сохраняем настройки» />
Рисунок 11.

В результате получаем (рис. 12).

Рисунок 12.

Изменение цвета ссылки «Обратный звонок»

Через встроенный редактор в браузере (вызываем редактор через F12) определим класс данного элемента (рис. 13).

Рисунок 13.

Для того чтобы переопределить стили ссылки «Обратный звонок» в Редакторе файла стилей, к ней необходимо обратиться следующим образом:

a[data-callback] background-color: #0000FF;/*фон ссылки*/
padding: 5px;/*отступы*/
border-radius:5px;/*скругление края*/
color:#FFFFFF;/*цвет текста*/
>

Если необходимы другие цвета, то их html-коды вы можете найти по адресу.

Размещаем код в панели администрирования пункт меню «Мои сайты» — «Редактировать» — «Параметры», вкладка«CSS» и в окне редактора сохраняем настройки (рис. 14).

Редактор файла стилей», в окне редактора и сохраняем настройки » />
Рисунок 14.

В результате получаем (рис. 15).

Рисунок 15.

Изменение цвета бокового меню

Через встроенный редактор в браузере (вызываем редактор через F12) смотрим, какой класс отвечает за стили меню категорий (рис.16).

Рисунок 16.

В результате мы выяснили, что боковому меню соответствует класс .menu-dropdown-link-wrap

Изменим его фон на #6495ED. Если необходим другой цвет, то его html-код вы можете найти по адресу.

Код для изменения стилей будет выглядеть следующим образом:

.menu-dropdown-link-wrap background-color: #6495ED;
>

Размещаем код в панели администрирования пункт меню «Мои сайты» — «Редактировать» — «Параметры», вкладка«CSS» и в окне редактора сохраняем настройки (рис. 17).

Редактор файла стилей», в окне редактора и сохраняем настройки» />
Рисунок 17.

В результате (рис. 18).

Рисунок 18.

Для того чтобы цвет меню менялся при наведении на него, в Редакторе файла стилей необходимо прописать цвет для следующего класса: .menu-dropdown-link-wrap:hover, например (рис. 19):

Рисунок 19.

Изменение цвета главного меню

Через встроенный редактор в браузере (вызываем редактор через F12) смотрим, какой класс отвечает за стили главного меню (рис. 20).

Рисунок 20.

В результате мы выяснили, что главному меню соответствует класс .harmonica-initialized

Если необходим другой цвет, то его html — код вы можете найти по адресу.

Код для изменения стилей будет выглядеть следующим образом:

.harmonica-initialized background-color: #6495ED;
border-radius:.3125rem;/*скругление углов блока*/
>

Размещаем код в панели администрирования пункт меню «Мои сайты» — «Редактировать» — «Параметры», вкладка«CSS» и в окне редактора сохраняем настройки (рис. 21).

Редактор файла стилей», в окне редактора и сохраняем настройки» />
Рисунок 21.

Результат применения стилей (рис. 22).

Рисунок 22.

Для того чтобы задать другой цвет при наведении на пункт меню (рис. 23), в Редакторе файла стилей необходимо прописать:

Рисунок 23.

Изменение цвета всплывающего меню

Через встроенный редактор в браузере (вызываем редактор через F12) смотрим, какой класс отвечает за стили всплывающего меню с подкатегориями (рис. 24).

Рисунок 24.

В результате мы выяснили, что всплывающему меню с подкатегориями соответствует класс .menu-dropdown-modern .menu-dropdown-sub-inner

Если необходим другой цвет, то его html-код вы можете найти по адресу.

Код для изменения стилей будет выглядеть следующим образом:

.menu-dropdown-modern .menu-dropdown-sub-inner background-color: #b4c1e8;
>

Размещаем код в панели администрирования пункт меню «Мои сайты» — «Редактировать» — «Параметры», вкладка«CSS» и в окне редактора сохраняем настройки (рис. 25).

Редактор файла стилей», в окне редактора и сохраняем настройки » />
Рисунок 25.

Результат применения стилей (рис. 26).

Рисунок 26.

2) Через встроенный редактор в браузере (вызываем редактор через F12) смотрим, какой класс отвечает за стили всплывающего меню с подпунктами главного меню (рис. 27).

Рисунок 27.

В результате мы выяснили, что всплывающему меню с подкатегориями соответствует класс .menu-general-sub-row

Код для Редактора файла стилей будет выглядеть следующим образом:

.menu-general-sub-row background-color: #b4c1e8;
>

Размещаем код в панели администрирования пункт меню «Мои сайты» — «Редактировать» — «Параметры», вкладка«CSS» и в окне редактора сохраняем настройки (рис. 28).

Редактор файла стилей», в окне редактора и сохраняем настройки» />
Рисунок 28.

Результат применения стилей (рис. 29).

Рисунок 29.

Изменение иконки корзины

Через встроенный редактор в браузере (вызываем редактор через F12) смотрим, какой класс отвечает за стили иконки корзины (рис. 30).

Рисунок 30.

Кнопке соответствует класс .cart-mini-main-icon.

Код для изменения стилей будет выглядеть следующим образом:

width:30px; height:30px — высота Вашей иконки;
cart.png — имя файла Вашей иконки, загруженной в папку userfiles. Предварительно её нужно загрузить на сайт. Подробнее о том, как загрузить изображение на сайт, можно ознакомиться в инструкции.

Размещаем код в панели администрирования пункт меню «Мои сайты» — «Редактировать» — «Параметры», вкладка«CSS» и в окне редактора сохраняем настройки (рис. 31).

Рисунок 31.

Результат применения стилей (рис. 32).

Рисунок 32.

Изменение шрифта в описание товара

Через встроенный редактор в браузере (вызываем редактор через F12) смотрим, какой класс отвечает за стили иконки корзины (рис. 33).

Рисунок 33.

Кнопке соответствует класс .tabs-horizontal .tabs-content. Выбрали именно такое сочетание, так как меняем шрифт не на всем сайте, а только у описания в карточке товара. Поэтому выбирается класс описания + класс родителя, то есть того кто стоит выше, в данном случае это класс блока со всеми вкладками.

Код для изменения стилей будет выглядеть следующим образом:

.tabs-horizontal .tabs-content
font-family: PT sans-serif; >

где PT sans-serif — это наименование шрифта, который вы будете использовать, пишите сюда свой шрифт.

Размещаем код в панели администрирования пункт меню «Мои сайты» — «Редактировать» — «Параметры», вкладка«CSS» и в окне редактора сохраняем настройки (рис. 34).

Рисунок 34.

Результат применения стилей (рис. 35).

Рисунок 35.

Скрыть ссылку и блок «регистрации»

Бывает, что на сайте не планируется регистрация, либо регистрацией занимаются менеджеры через админ.панель, и соответственно блок регистрации и ссылку в шапке сайте нужно скрыть (рис. 36).

Код для изменения стилей будет выглядеть следующим образом:

.col-md-offset-4 .vertical-interval-xsmall, .login-block-registration, a.cs-l-3.toolbar-top-link-alt:nth-child(2)
display:none!important;
>
.registration-block .registration-block-text-explain-inner
display:none!important;
>

Размещаем код в панели администрирования пункт меню «Мои сайты» — «Редактировать» — «Параметры», вкладка«CSS» и в окне редактора сохраняем настройки (рис. 37).

Рисунок 37.

Результат применения стилей (рис. 38).

Рисунок 38.

Готово. Мы рассмотрели самые распространённые случаи изменений в стилях сайта.

Другие статьи по теме

• Добавление карты на страницу «Контакты»
• Модуль «Карусель PRO»
• Тема дизайна
• Цветовая схема
• Фон дизайна

Как изменить дизайн готового сайта. Азбука CSS

197110, Россия, Санкт-Петербург, а/я 144, ООО «Юми» +7 (812) 309-68-23

Итак, у вас есть готовый сайт на UMI.ru. С профессиональным дизайном, тщательно спроектированными интерфейсами, настроенными стилями форматирования. Но что делать, если текущий шаблон вам не совсем подходит: хочется изменить внешний вид сайта, поиграть с цветами, адаптировать веб-страницы под ваш корпоративный стиль или ваше видение? Как изменить сайт?

Прежде всего, внимательно изучить все основные правила юзабилити и сверять с ними все дальнейшие действия. И действовать!

А можно такой же, но с перламутровыми пуговицами? Да!

На 1С-UMI есть возможность изменить внешний вид готового сайта несколькими способами, которые можно сочетать или использовать по отдельности:

1. Самый простой способ — изменить вид страниц сайта при помощи картинок.

• Поставьте ваш логотип в левом верхнем углу сайта. Если у вас нет логотипа – это может быть любое имиджевое изображение, дающее понять, чему посвящен сайт. Это может быть даже ваша фотография – если бизнес привязан к вашей личности (например, уроки английского языка).
• Замените основное имиджевое изображение в “шапке” сайта. Это ключевой элемент вашего брендинга и первое, что увидит посетитель вашего сайта, поэтому подбирайте изображение очень тщательно. Оно должно быть качественным, демонстрировать суть вашего предложения и особенности позиционирования. Использовать его можно также в качестве временного или постоянного баннера, рекламирующего какое-либо предложение или акцию.
• Добавьте картинки, иллюстрирующие текст сайта. Это легко сделать при помощи визуального редактора. Иллюстрации в тексте нужны, но, в зависимости от использования, они могут как улучшить сайт, так и испортить его. Про то, как грамотно работать с изображениями для веб-страниц, мы поговорим отдельно, в другой раз.

Исходный шаблон дизайна:

Шаблон, измененный при помощи картинок:

2. Самый радикальный способ — изменить шаблон дизайна .

Этот способ подойдет, если вы хотите полностью изменить внешний вид сайта, выбрав другую тематику оформления. Для этого просто зайдите в раздел “Дизайн – Смена дизайна” в панели управления вашего сайта и выберите новый дизайн. При этом, вы можете сохранить все внесенные изменения: тексты, картинки, структуру, объекты каталога и т.д.

3. Самый творческий способ — редактирование стилей CSS .

CSS — это технология описания внешнего вида веб-страниц, написанных на языке разметки HTML. Определенные стили CSS уже применены к готовым сайтам на UMI.ru и описывают внешний вид всех элементов: текстов, кнопок, ссылок, меню, “хлебных кошек” и др. Для их изменения необходимо прописать новые стили в специальном файле, который находится в разделе “Дизайн” — “Управление CSS” в панели управления вашего сайта (доступно на платном тарифе).

С помощью стилей CSS можно изменить:

• фон сайта (вставить фоновую картинку или поменять цвет)
• цвет, расположение и угол наклона объектов
• шрифты
• форматирование абзацев
• добавить тени, рамки или закругления объектам
• передвинуть блоки или изменить их форму
• многое другое.

Все это можно сделать самостоятельно, но вам потребуются некоторые базовые знания о редактировании стилей CSS. Не пугайтесь, вам не придется сочинять код: все стили уже есть в специальных учебниках. Разобраться в основах вам поможет отличный самоучитель CSS — htmlbook.ru, а получить нужный код — генераторы CSS: css3maker.com и css3generator.com. А если у вас есть знакомые, знающие язык HTML, то они с легкостью помогут в редактировании стилей.

И сайт превращается…

Как изменить сайт при помощи CSS и посмотреть, какие стили уже применены к элементам страниц — вы узнаете из нашего руководства.

А чтобы вы поняли, насколько это легко — разберем несколько примеров.

Действия с объектами

Первая задача: изменение цвета кнопки с голубого на красный.

Перед тем, как изменить сайт, не забудьте сохранить его резервную копию — тогда вы сможете его легко восстановить с случае неполадок. Теперь можно приступать к редактированию. При помощи инструмента инспектирования кода (в нашем примере использован Firebug в браузере Mozilla Firefox) находим код необходимого элемента — в данном случае, это код кнопки:

В правом окошке инспектора “Стиль” прописан код, обозначенный разными цветами:

• черным — класс (в данном случае, кнопка),
• зеленым — CSS-свойство (в данном случае, цвет),
• синим — значение (в данном случае, голубой),
• зачеркнутый код обозначает, что данный стиль не работает, поскольку конфликтует с другим, более приоритетным стилем.

Мы видим, что класс кнопки называется .direction_title . Чтобы понять, какой фрагмент представленного кода отвечает за цвет, можно “перевести” зеленые теги, воспользовавшись поиском в справочнике . За цвет фона кнопки отвечает свойство background (не путайте со свойством color , оно отвечает за цвет шрифта). Сейчас кнопке присвоен стиль background: #1f1f1f ; где background — это свойство, определяющее стиль фона, а #1f1f1f — голубой цвет в шестнадцатеричной кодировке цвета.

Чтобы сделать кнопку красной, нужно узнать цифровой код красного цвета. Его можно посмотреть с помощью онлайн-палитры, либо в любом графическом редакторе, которым вы привыкли пользоваться (например, Microsoft Paint, Photoshop, онлайн-редактор и т.п.). Итак, код красного цвета — #ff0000:

Теперь перейдем в раздел “Дизайн” — “Управление CSS” админзоны нашего сайта и пропишем новое значение для класса кнопки, соблюдая тот же синтаксис, что показывает инспектор в исходном коде: между открывающей и закрывающей фигурной скобкой помещают CSS-свойства со значениями, разделяя их знаком “;”.

Таким образом, в общем виде схема CSS-кода выглядит так:

• записываем класс (название элемента) — .direction_title
• ставим фигурные скобки —
• внутри фигурных скобок прописываем стиль кнопки — background:
• после двоеточия указываем код красного цвета — #ff0000
• в конце строки ставим ;
• не забываем в самом конце закрыть фигурную скобку.

Что получилось:

Было Стало

Вторая задача: перемещение кнопки вверх и вправо на 100px.

Для начала посмотрим значения текущего расположения кнопки с помощью инспектора, если нужно — “переведем” через самоучитель . Сейчас стоят значения bottom: 20px; left: 40px ; где bottom — расстояние от нижнего края кнопки до нижнего края родительского блока, а left — расстояние от левого края кнопки до левого края родительского блока.

Таким образом, для перемещения кнопки вверх и вправо на 100px нужно прибавить по 100px снизу и слева — получится 120px снизу и 140px слева. Добавим новые значения в наш файл стилей к уже прописанному классу нашей кнопки .direction_title, соблюдая синтаксис исходного кода:

Что получилось:

Изменение шрифтов

При редактировании некоторых текстовых полей на готовых сайтах не появляется визуальный редактор, а потому нельзя стандартным способом изменить цвет, размер и начертание шрифта. Это могут быть заголовки, анонсы новостей, цены на товары, контактные данные в шапке сайта, надписи на кнопках и др. Мы сделали это умышленно: настроили лучшие шрифты, самые удобные для чтения и оптимально подходящие к дизайну сайта. Но если все же вам потребуется изменить стиль этих элементов, то это можно сделать при помощи CSS.

Задача: изменить размер и цвет шрифта в заголовке “Новости”.

Найдем класс заголовка и значения стилей при помощи инспектора кода Firebug, если нужно — “переведем” значения через справочник .

Мы видим, что класс заголовка “Новости” называется .shop-heading, за размер шрифта отвечает свойство font-size , значение которого сейчас — 18px ; а за цвет — свойство color со значением #111111 (темно-серый).

Перейдем в раздел “Дизайн” — ”Управление CSS” админзоны сайта и изменим эти значения на нужные нам. Например, увеличим размер до 28px, а цвет изменим на красный. Как вы помните, цвет указывается в шестнадцатеричном коде:

Сохраняем и смотрим, что получилось. Обратите внимание, что при изменении стиля элемента внешний вид поменяют ВСЕ элементы на сайте, к которым применен данный стиль. В нашем случае, стиль .shop-heading применен к заголовкам “Новости” и “Популярные товары”.

Что получилось: