Чем править css: Как редактировать CSS сайта WordPress – CSS — Википедия

Как редактировать CSS сайта WordPress

Вступление

Изменить оформление сайта, можно в файлах активной темы WordPress, а именно в файле под названием style.css. Это простой текстовой файл в расширении CSS. Переводится CSS как Cascading Style Sheets — каскадные таблицы стилей. Согласен, перевод мало о чем говорит. Какими способами можно редактировать CSS сайта WordPress пойдет речь далее.

CSS это

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

Сразу замечу, файлы CSS могут иметь пугающие размеры, но в них нет ничего сложного. Это очень простые, хотя и разнообразные, правила, написанные в простом синтаксисе.

Я не собираюсь обучать основам CSS, это отлично делают на специальных сайтах. Нам понадобиться только справочник HTML: http://htmlbook.ru/.

Также замечу, что запоминать все правила CSS наизусть совершенно не обязательно. Достаточно понимать синтаксис написания правил CSS. Этого достаточно, чтобы редактировать файл CSS, да и справочник всегда поможет. Главное знать, что править и как править. Кроме справочника есть инструменты в браузерах, о них чуть ниже, которые позволяют редактировать CSS онлайн.

Где лежит файл style.css WordPress

Несколько прописных истин:

• Каждая тема WordPress имеет свой файл определяющий ее внешний вид.
• Редактирования файла style.css одной темы не затрагивает другие темы установленные на сайт;
• Перед редактированием любых файлов активной темы, сделайте резервную копию сайта, на случай фатальных ошибок редактирования и возвращения сайту рабочего состояния.

А лежит файл style.css WordPress в папке с темой (шаблоном) WP. Полный адрес, одинаков для всех тем: wp-content/themes/название_темы/style.css.

Три способа редактировать CSS сайта WordPress

Предложу три варианта редактирования файла style.css.

Редактирование из панели администратора

Вам, наверное, известно, что система WordPress имеет внутренний редактор файлов установленных тем. Войти в него можно из консоли сайта через вкладку: Внешний вид→Редактор.

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

Совет: Ошибки в редактировании style.css не могут обрушить сайт, вы можете изуродовать только внешний вид. Поэтому, перед прямым редактированием из консоли можно обойтись без резервной копии сайта, достаточно сделать копию самого файла style.css и в случае неудачного редактирования вернуть файлу прежний вид.

Редактирование файла style.css по FTP

Говорят, что есть хостинги, которые не поддерживают редактирование файлов темы из административной панели сайта. Не беда. Можно и на самом деле это правильно, редактировать файл style.css по FTP. Правильно, потому что безопасно и у вас всегда есть оригинальная копия файла.

• Входите в каталог сайта по FTP;
• Добираетесь до wp-content/themes/название_темы/style.css и копируете его на компьютер;
• Далее редактируете его в текстовом редакторе типа Notepad++, сохраняете, оставляя оригинальную копию, и заливаете обратно в каталог. Согласен, немного дольше, но безопаснее и удобнее. Можно спокойно почитать файл и не спеша разобраться с его синтаксисом.

Оба способа редактирования относятся к прямому редактированию, «живого» файла активной темы. У прямого редактирования есть большой недостаток: при обновлении темы все ваши изменения потеряются и тема примет исходный внешний вид. Чтобы этого избежать используется способ дочерней темы.

Дочерняя тема WordPress

Система WordPress позволяет создавать дочерние темы, для родительской активной темы. Дочерняя тема может полностью быть копией родительской темы или с помощью функции import, «забирать» и переопределять стиль родительской темы. То есть, после создания и активации темы наследницы редактируется файл style.css дочерней темы и изменения не пропадают после обновления шаблона. О дочерней теме я писал подробную статью: Зачем нужна дочерняя тема WordPress.

На этом принципе основан и третий способ редактирования стилей.

Редактирование файла style.css с помощью плагинов

Есть несколько плагинов для улучшения редактора файлов темы. Для редактирования стилей мне нравится плагин Jetpack. О плагине я писал подробную статью: Плагин Jetpack заменит 33 плагина WordPress. Плагин очень большой и для редактирования стилей темы нужно активировать модуль Custom CSS.

После его активации в меню консоли в пункте Внешний вид появляется вкладка «Редактировать CSS».

редактировать CSS сайта WordPress

Теперь не нужно редактировать style.css напрямую, достаточно вписать кусок кода css в поле редактора и изменения появятся на сайте. Причем при обновлении темы они не потеряются.

Как понять, что нужно редактировать

Если вы бегло не читаете CSS нужно воспользоваться онлайн инструментами, для чтения CSS и понять, что нужно редактировать.

Самый простой инструмент, это инструмент в любом браузере: «Просмотр кода элемента» в Chrom. В других браузерах название похожее. Доступ к инструменту через правую кнопку мыши или короткими клавишами (Ctrl+Shift+I).

Показываю, как им пользоваться:

Например, хотим поменять заголовок сайта.

• Наводим на него мышь, через правую кнопку открываем «Код элемента»;

редактировать CSS сайта WordPress начало

• Видим код HTML в правом поле и код CSS в левом поле;

• Можно «наживую» поиграть с кодом CSS и сразу посмотреть, как это выглядит;
• Чтобы открыть CSS в основном поле, жмем на название файла CSS (на фото цифра 2).

редактировать CSS сайта WordPress

Для примера, я поменял онлайн размер шрифта названия.

Но это еще не все.

• Нашли нужный кусок кода css;
• Копируем его;
• Переносим в текстовой редактор;
• Редактируем и переносим кусок кода в style.css дочерней темы или в поле редактора Jetpack.
• Таким образом, меняем любые стили активной темы.

Полезные ссылки

©www.wordpress-abc.ru

Другие статьи раздела: CMS WordPress

Похожие посты:

10 советов CSS, от мастеров

От Автора: Касаемо CSS в Сети полно ресурсов и мнимых “полезных советов экспертов”. Они от непроверенных, самопровозглашенных “гуру”, не признанных в мире веб-дизайна. Так как они могут быть похожими на правду, то откуда нам узнать, что совет по CSS – это надежный источник или непроверенное, на «скорую руку» слепленное решение?

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

Ниже приведены 10 отличных CSS советов, которые любой веб-разработчик или дизайнер может признать полезными, содержательными или стимулирующими. Рассмотрите эти мудрые рекомендации от квалифицированных профессионалов, которые прошли длительный и сложный путь к непревзойденному мастерству дизайна. Это – настоящие мастера CSS. Отведайте глоток их знаний и примените их знания в своем очередном дизайн-приключении.

1. Ваш CSS должен быть простым – Peter-Paul Koch (Питер-Поль Кох)

---

Что меня больше всего достает в складе ума дилетантов от CSS – то, как активно они ищут непростых решений. Ищите, и обретете, и если хотите сложностей, они станут вам поперек горла. Не отстанут от вас, а также и не помогут вам.

---

Питер-Поль Кох – крестный отец веб-разработки. Так как он является разработчиком старой школы и основная масса образцов в его портфолио пришлась на 1998-2002гг., он работал с такими тяжеловесами, как Apple. Он написал книгу по javascript, но даже и секунды не думайте, что ему нечего сказать о CSS.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Опасность CSS хаков.

Кох говорил о том, что каждый дизайнер и веб-разработчик должен усердно следовать правилу: Ваш CSS должен быть простым. Добиться простоты нелегко, особенно в CSS-дизайне. Можно найти несчетное множество особенностей реализации CSS в конкретном браузере, при помощи CSS-хаков во всех браузерах станицы выглядят одинаково, невзирая на версию или тип. Однако использование множества CSS-хаков имеет существенный недостаток. Поскольку веб-браузеры развиваются, так гораздо труднее успевать за переменами.

Кох высказывает интересное соображение по поводу разработки Сети. Интернет в целом очень непредсказуемое место, и попытки спрогнозировать направление его работы в будущем – весьма невыгодная линия поведения.

---

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

Браузеры не поддерживают CSS в совершенстве; это может привести в бешенство, особенно тех, кто только начал изучение CSS. Несмотря ни на что, CSS-хаки – это не решение проблемы. Принятие того пути, по которому сейчас идет работа Сети – лучшее, что можно сделать, потому что так ваши сайты останутся простыми.

---

Питер-Поль сделал ударение на том, что кажется верным не только для CSS, но и для веб-разработки в целом. Простота – это ключ к эффективному кодированию.

2. Выполняйте CSS-объявления в одной строке – Jonathan Snook (Джонатан Снук)

Джонатан Снук – невероятно популярный разработчик из г. Оттава (Ottawa) в Канаде, сделавший себе имя в сетевых стандартах и дизайне. Он выступал на престижных конференциях типа SXSW и опубликовал несколько технических ресурсов по дизайну на Sitepoint.

Одна из постоянных идей Джонатана в кодировании CSS состоит в том, чтобы ставить объявления в одну строку.

---

Разбиение на части может выглядеть более привлекательным, но, конечно, не помогает ничего найти. При поиске чего-либо в таблице стилей самое главное – это массив правил (т.е. часть перед { and } ). Я ищу элемент, id или класс. Расположение всего в одной строке делает просмотр документа намного более быстрым просто оттого, что вы больше видите на одной странице. Когда я нашел массив правил, который искал, найти нужное мне свойство обычно уже несложно, так как их редко бывает слишком много.

---

Джонатан продолжает свою мысль, давая пример объявлений одной строкой, которая выглядит так:

Хорошо

{font-size:18px; border:1px solid blue; color:#000; background-color:#FFF;}

{font-size:18px; border:1px solid blue; color:#000; background-color:#FFF;}

Плохо

h3 { font-size:18px; border:1px solid blue; color:#000; background-color:#FFF; }

h3 { font-size:18px; border:1px solid blue; color:#000; background-color:#FFF; }

Этот подход не только позволяет быстро просматривать ваш CSS, но также поможет сделать ваш CSS-файл маленьким по размеру за счет удаления ненужных пробелов и символов.

3. Используйте сокращения CSS – Roger Johansson (Роджер Йоханссон)

---

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

---

Роджер Йоханссон знает кое-что о разработке Сети. Шведский веб-дизайнер работает с Интернетом с 1994 и имеет популярный блог о веб-дизайне. Если речь идет о простых и элегантных решениях, то Роджер — один из самых хорошо осведомленных людей в этой области.

Йоханссон написал очень исчерпывающую статью о важности сокращений CSS и дает довольно много примеров того, как их использовать в процессе кодирования CSS. Вот один из примеров:

---

Использование сокращенной записи для свойств может сэкономить много места. Например, чтобы выставить разные margin для сторон блока, можно использовать это:

margin-top:1em;
margin-right:0;
margin-bottom:2em;
margin-left:0.5em;

Но вот это же самое гораздо более эффективно:

margin:1em 0 2em 0.5em;

Тот же самый синтаксис используется и для свойства padding.

---

Так как скоропись CSS сокращает размеры таблицы стилей, она также помогают организовать и поддержать код несложным. Красивый CSS – это простой CSS.

4. Дайте возможность блочным элементам естественным путем заполнить пространство – Jonathan Snook (Джонатан Снук).

У мистера Снука есть еще одна ключевая рекомендация, которой должен жить каждый веб-разработчик: дайте возможность блочным элементам заполнить пространство как можно более органически. Если и есть постоянно повторяющаяся тема при разработке CSS, то она звучит так: не заставляйте код делать те вещи, для которых он не предназначен. Это означает избегать CSS-хаков, находя наиболее простые решения.

---

Мое практическое правило заключается в следующем: если я устанавливаю ширину, я не определяю margin или padding. Таким же образом, если я устанавливаю margin или padding, я не определяю ширину. Работать с блочной моделью иногда такое мучение, особенно если вы имеете дело с процентами. По этой причине я устанавливаю ширину контейнеров, а затем margin или padding для элементов внутри них. Обычно это проходит гладко.

---

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

5. Устанавливайте и сбрасывайте float – Trevor Davis (Тревор Дэвис)

---

Float, возможно, одна из самых важных вещей, которые нужно понять в CSS, но знать, как сбросить float (clear)– так же необходимо.

---

Тревор Дэвис, может быть, и не такое великое имя в мире веб-дизайна, как Зельдман (Zeldman) или Снук (Snook), но он, конечно, заслуживает упоминания в связи со своим великолепным портфолио веб-разметок. Его блог – прекрасный ресурс для любого веб-разработчика, желающего избавиться от мусора.

Сбрасывайте float

В свою основную статью «6 Важнейших методик CSS, которые нужно знать», Тревор добавил настоящий самородок, который может спасти от головной боли при использовании столбцов в разметке.

---

Я создал простую страницу с двумя свободно перемещающимися столбцами рядом. В примере вы заметите, что серый фон не вмещает эти столбцы. И самое простое, что можно придумать – это сделать содержащий элемент также плавающим. Но сейчас вы видите, что фон контейнера не вмещает область контента.

Так как контейнер имеет margin: 0 auto, мы не хотим его делать плавающим, потому что это будет уводить его в сторону, от места, где он должен быть. Так что, другой способ ограничить плавающий объект – это вставить ограничивающий элемент. В этом случае я просто использую пустой div, установленный на clear: both. В настоящее время имеются другие способы очистить плавающий объект без разметки, но я заметил некоторую противоречивость этого приема, так что я просто жертвую пустым div’ом.

---

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

6. Используйте отрицательный margin – Dan Cederholm (Дэн Сидерхолм)

---

Иногда легче иметь дело с исключением из правила, чем добавлять объявления ко всем остальным элементам вокруг него.

---

Компания Дэна Сидерхолма SimpleBits — это энергичная команда дизайнеров. Дэн работал с:

Google

Blogger

MTV

Fast Company

Inc.com

… и множеством прочих выдающихся веб-компаний. К счастью, Дэн передает знания, полученные при работе с этими грандиозными именами, в своем блоге на SimpleBits. Вот практический метод для вас, веб-дизайнеры и разработчики: если Дэн Сидерхолм что-то говорит, вы слушаете. Считайте его цифровым проводником-шерпом, ведущим вас к вершине вашей дизайнерской горы.

Отрицательные margin

В то время, как может казаться алогичным поставить отрицание впереди любого объявления (как margin-left: -5px), в действительности это довольно хорошая идея. Мистер Сидерхолм объясняет, что использовать отрицательные поля для элементов иногда легче, чем изменить каждый аспект дизайна для выстраивания так, как вам нужно.

---

Бывают ситуации, когда использование отрицательных полей для элемента – самый простой способ «вытолкнуть» его из остальных, рассматривая как исключение из правила для того, чтобы упростить код.

---

7. Используйте CSS для центрирования разметки – Dan Cederholm (Дэн Сидерхолм)

---

«Как я центрирую разметку с фиксированной шириной, используя CSS?» Для тех, кто знает, это просто. Для тех, кто нет, нахождение двух необходимых для завершения работы правил может стать разочарованием.

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

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

#container { margin: 0 auto; width: xxxpx; text-align: left; }

#container { margin: 0 auto; width: xxxpx; text-align: left; }

Многие современные дизайнеры полагаются на центрированние разметки, так что использование этого готового метода пригодится веб-разработчикам и дизайнерам.

8. Используйте правильный DOCTYPE – Jeffrey Zeldman (Джеффри Зельдман)

---

Вы написали эффективный XHTML и CSS. Вы собираетесь использовать W3C-стандартный Document Object Model (DOM) для управления динамическими элементами страницы. Однако в браузерах, созданных для поддержки тех самых стандартов, ваш сайт падает. Винить в этом, скорее всего, придется неправильный DOCTYPE.

---

Джеффри Зельдман – один из основателей прекрасного ресурса, сайта A List Apart, учредил и управлял The Web Standards Project, управляет студией дизайна Happy Cog и даже написал книгу по проектированию для веб-стандартов. Короче говоря, Зельдман принадлежит к избранным веб-дизайнерским кругам.

Неверное представление о DOCTYPE

DOCTYPE веб-страницы — один из самых игнорируемых аспектов дизайна. Использование правильного DOCTYPE’а – ключевой момент, и Зельдман объясняет почему.

---

Использование неполного или устаревшего DOCTYPE’а – или вообще никакого DOCTYPE’а – ставит те самые браузеры в режим “Quirks” (причуды), где браузер предполагает, что вы написали старомодную, неэффективную разметку и код согласно унылым индустриальным нормам поздних 1990-х гг.

---

Зельдман выделяет важность реального использования DOCTYPE’а и указывает, что вы должны добавить url в объявлении, как здесь:

Если в своих разметках вы находите необъяснимые затруднения, возможно, что проблема в DOCTYPE.

9. Центрируйте отдельные элементы при помощи CSS – Wolfgang Bartelme (Вольфганг Бартельми)

---

Центрирование элементов — частая задача при создании вебсайтов. Но для новичков в CSS зачастую что-то вроде головоломки, как центрировать, например, весь вебсайт в браузерах помимо IE.

---

Вольфганг Бартельми – веб-дизайнер в дизайнерской фирме Bartelme design. У Бартельми один из самых элегантных блогов, и он непрерывно создает прекрасные иконки и дизайнерские работы. Он сделал дизайн блоговой платформы Squarespace и популярного софта MacHeist.

Вольфганг создал учебник, который помогает справиться со сложной задачей центрирования элементов при помощи CSS. Центрированные элементы безумно полезны, но иногда сложно добиться нужного дизайна. Учебник Бартельми гарантирует центрированное расположение при помощи выбора правильного DOCTYPE’а и присоединения магии CSS. Код неприхотливый, позволяет выполнить работу и прекрасно сочетается со стремлением к простоте в CSS.

10. Используйте команду text-transform – Trenton Moss (Трентон Мосс)

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

Общеизвестно, что стили со временем меняются, особенно то, как в вебсайтах отражается текст. Лучшее, что может сделать дизайнер, это в будущем всегда вместо изменения способа отображения текста вручную использовать для изменения внешнего вида текста CSS. Трентон Мосс показывает нам, как добиться этого через использование простой, недооцененной команды CSS, называемой text-transfom

---

Одна из наименее известных, но действительно полезных CSS- команд – команда text-transfom. Три самых общих значения этого правила таковы: text-transform: uppercase, text-transform: lowercase и text-transform: capitalize. Первое правило превращает все знаки в заглавные буквы, второе обращает в строчные, а третье делает первую букву каждого слова заглавной.

---

Использование CSS для отображения внешнего вида текста на сайте позволяет изменять его в будущем и обеспечивает логичность по прошествии длительного времени.

---

Эта команда невероятно полезна для обеспечения последовательности стиля на всем пространстве вебсайта, особенно если у него несколько контент-редакторов. Скажем, ваш стиль требует, чтобы слова в заголовках всегда начинались с заглавных букв. Чтобы обеспечить это, используйте text-transform: capitalize. Даже если редакторы сайта забудут об этом требовании, их ошибка не отразится на сайте.

---

Хотя text-transfom– это мелочь, добавляемая в разметку css, она может иметь огромное значение в будущем, когда понадобится сделать изменения.

На этом сборник из десяти CSS советов для вебмастера, закончен, желаю Вам успехов в разработке сайтов.

Автор: Glen Stansberry

Перевод и редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

Источник: http://net.tutsplus.com

E-mail: [email protected]

Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения

P.S. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Как редактировать CSS в WordPress.Изменение CSS стилей в WordPress.Как добавить CSS в WordPress

Здравствуйте, друзья! В этом уроке мы поговорим о том, как в WordPress можно добавить свои CSS стили или изменить существующие.

Замечу, что данных урок рассчитан в большей степени для тех, кто уже имеет базовые знания

в использовании CSS стилей. И так, давайте начнем!

Способ №1

1. Заходим в административное меню и переходим в Внешний вид -> Редактор.

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

Как видите, с административной панели всего за несколько кликов можно добраться до стилей вашего шаблона WordPress.

Способ №2

Для редактирования стилей этим способом нам нужно:

1. Найти файл style.css в корне папки вашей активированной темы (шаблона).

Путь к файлу: wp-content\themes\название_вашей темы\style.css

2. Открываем с помощью текстового редактора (я пользуюсь Notepad++) файл style.css и вносим необходимые изменения.

3. После того как внесете все необходимые правки в стилях не забудьте сохранить файл style.css.

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

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

Если у вас что-то не получилось или возникли вопросы, смело пишите в комментариях!

Здравствуйте, друзья! В этом уроке мы поговорим о том, как в WordPress можно добавить свои CSS стили или изменить существующие. Замечу, что данных урок рассчитан в большей степени для тех, кто уже имеет базовые знания в использовании CSS стилей. И так, давайте начнем! Способ №1 1. Заходим в административное меню и переходим в Внешний вид -> Редактор. 2. В открывшейся странице по умолчанию будет открыто окно редактирования стилей вашей темы (шаблона). После того как вы добавите свои новые стили или измените уже существующие, не забудьте сохранить изменения нажав кнопку «Обновить файл». Как видите, с административной панели всего за несколько кликов можно…

Проголосуйте за урок

100

Оценка

Итог : Уважаемые читатели! Не поленитесь проголосовать и оставить комментарий. Таким образом я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

Рейтинг: 4.49 ( 14 голосов ) 100

Изменение правила CSS — создание и продвижение сайтов

Можно без труда изменять как внутренние, так и внешние правила, примененные к документам.

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

Для изменения таблиц стилей можно использовать внешний редактор.

Изменение правила на панели «Стили CSS» (режим «Текущий»)

1. Откройте панель «Стили CSS», выбрав меню «Окно» > «Стили CSS».
2. Нажмите кнопку «Текущий» в верхней части панели «Стили CSS».
3. Выделите текстовый элемент в текущей странице, чтобы отобразились его свойства.
4. Выполните одно из следующих действий.

   • Дважды щелкните свойство в области «Сводка по выделению», чтобы отобразилось диалоговое окно «Определение правила CSS», а затем внесите изменения.

   • Выберите свойство на панели «Сводка по выделению», а затем измените свойство в области «Свойства» ниже.

   • Выберите правило в области «Правила», а затем измените свойства правила в области «Свойства» ниже.

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

Изменение правила на панели «Стили CSS» (режим «Везде»)

1. Откройте панель «Стили CSS», выбрав меню «Окно» > «Стили CSS».
2. Нажмите кнопку «Везде» в верхней части панели «Стили CSS».
3. Выполните одно из следующих действий.

   • Дважды щелкните правило в области «Все правила», чтобы отобразить диалоговое окно «Определение правила CSS», а затем внесите изменения.

   • Выберите правило на панели «Все правила», а затем измените свойства правила в области «Свойства».

   • Выберите правило в области «Все правила», а затем нажмите кнопку «Изменить стиль» в нижнем правом углу панели «Стили CSS».

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

Изменение имени селектора CSS

1. На панели «Стили CSS» (режим «Везде») выберите селектор, который нужно изменить.
2. Еще раз щелкните селектор, чтобы изменить имя.
3. Внесите изменения и нажмите клавишу «Ввод» (Windows) или «Return» (Macintosh).